@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *							common.css
 *
 *-------------------------------------------------------------*/

body            { margin: 0; font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic ProN', "Noto Sans JP", 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size: 16px; color: #535d64; letter-spacing: 0.2px; line-height: 1.8; }
.f_Outfit       { font-family: 'NewOder','Outfit', sans-serif; }

a               { color: #535d64; text-decoration: none; }
a:hover         { text-decoration: underline; cursor: pointer; }
a.opacity:hover { opacity: 0.8; }
.anchor         { margin-top: -100px; padding-top: 100px; }

img             { max-width: initial; }

.bold           { font-weight: bold; }
.fontWeight_600 { font-weight: 600; }
.colBlue        { color: #034991; }

.border-radius  { border-radius: 50px; }

/*  list style */
dl, ul			{ display:flex; flex-wrap:wrap; margin: 0; padding: 0;  }
ul              { list-style-type: none; }
dt, dd, li		{ box-sizing:border-box; }
    /* news */
    .dlType01 dt						{ width:380px; margin:18px 0 0; }
    .dlType01 dd						{ margin:18px 0 0px 380px; }


/* text position */
.textRight      { text-align:right !important; }
.textLeft       { text-align:left !important; }
.textCenter     { text-align:center !important; }


/* main-content */
.child .main-content        { max-width: 1200px; margin: 0 auto; width: min(93%, 1200px); }
.text-area                  { margin-bottom: 180px; }


/* catch-copy-block */
.catch-copy-block       { font-weight: 600; }
.gradient-text          { line-height: 0.9; background: linear-gradient(135deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform:uppercase; width: fit-content; font-family:outfit; font-weight:600; letter-spacing:0.02em; }
.gradient-text p.c1     { text-indent: 0.62em; }
.gradient-text p.c3     { text-indent: 1.42em; }
.catch-copy-block p.sub-title   { color: #034991; text-align: right; letter-spacing: 4.3px; font-weight: bold; line-height: 2.2; }

/* gradient */
.gradient-border-image  { border-style: solid; border-image: linear-gradient(135deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); border-image-slice: 1; }
.gradient-background    { background: linear-gradient(135deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); }


/* button */
.btn                    { background-color: #0066cb; border-radius:35px; box-sizing: border-box; width: fit-content; height: fit-content; position: relative; }
.btn:hover              { background: linear-gradient(135deg, rgba(176,86,189,1) 14%, rgba(17,156,241,1) 60%, rgba(61,210,214,1) 95%); }
.btn:hover::after       { content: ""; width: calc(100% - 6px); height: calc(100% - 6px); background: white; border-radius: 9999px; display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.btn > a                { color: #fff; font-size: 111%; padding: 17px 60px 19px 50px; display: block; letter-spacing:0.1em; position: relative; z-index: 1; }
.btn:hover > a          { color: #0066cb; text-decoration: none; }

.btn span               { display: inline-block; vertical-align: middle; color: #fff; line-height: 0.5; width: 0.6em; height: 0.6em; border: 1px solid currentColor; border-left: 0; border-bottom: 0; box-sizing: border-box; transform: translateX(90%) rotate(45deg); position: absolute; right: 33px; top: 0; bottom: 0; margin: auto 0; z-index: 1; }
.btn:hover span         { color: #0066cb; }


/* category */
#category                   { position: relative; height: 340px; margin-bottom: 80px; }
#category img               { position: absolute; right: 0; z-index: -1; }
#category .category-text    { max-width: 1200px; margin: 0 auto; padding-top: 195px; width: min(93%, 1200px); }
#category .category-text h3 { font-size: 580%; line-height: 1; font-weight: 600; letter-spacing:0.02em; margin-left:-5px; }
#category .category-text h1  { font-size: 110%; letter-spacing: 0.1em; }

.grandchild #category h3    { font-size: 300%; letter-spacing:0.02em; }
.grandchild-category                    { margin-bottom: 80px; }
.grandchild .grandchild-category h4     { font-size: 580%; line-height: 1; font-weight: 600; margin-bottom:4px; margin-left:-2px; letter-spacing: 0.02em; }
.grandchild .grandchild-category h1      { font-size: 124%; letter-spacing:0.1em; }

.detail-page #category          { margin-bottom: 56px; }
.detail-page #category h3       { font-size: 500%; }



.spBlock_1400,
.spBlock_767                { display: none; }

/* bg-gray */
#allContainer.child .bg-gray                  { background-image: linear-gradient(0deg, transparent calc(100% - 1px), #FFF calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #fff calc(100% - 1px)); background-size: 59px 55px; background-repeat: repeat; background-position: center center; background-color: #ebebeb; position: relative; margin-top: -80px; padding-top: 60px; }
#allContainer.child .bg-gray .main-content    { position: relative; z-index: 3; }
#allContainer.child .bg-gray .text-area       { margin-bottom: 0; padding-bottom: 160px; }

.movOpen                                { position: relative; display: inline-block; width: auto; }
.video_play 						    { display: inline-block; position: absolute; width: 2.2em; height: 2.2em; border: 0.05em solid currentColor; border-radius: 50%; font-size: 50px; color:#fff; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }
.video_play::before 				    { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); width: 0px; height: 0px; border: 0.5em solid transparent; border-left: 0.8em solid currentColor; box-sizing: border-box; content: ""; color: #0066c7; margin-left: 5px; }
.movOpen:hover .video_play              { opacity: 0.8; }


/* common_movieArea */
#common_movieArea                       { border-radius: 50%; width: 190px; height: 190px; display: flex; justify-content: center; align-items: center; position: fixed; right: 50px; bottom: 140px; z-index: 200;color: #fff; font-size: clamp(17px, calc(100vw* 20 / 1400), 20px); flex-direction: column; padding-top: 14px; transition:0.4s; border: 2px solid #fff; }
#common_movieArea.scroll                { width: 150px; height: 150px; font-size: clamp(16px, calc(100vw* 18 / 1400), 18px); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px 0px; }
#common_movieArea span                  { font-size: clamp(14px, calc(100vw* 17 / 1400), 17px); }
#common_movieArea.scroll span           { font-size: clamp(13px, calc(100vw* 14 / 1400), 14px); }
#common_movieArea:hover                 { background: #0066cb; text-decoration: none; transition: none; }

/* news */
#newsList dl,
.rec_newsList dl					{ display: block; }
#newsList dt,
.rec_newsList dt					{ border-top:1px solid #fff; padding-top: 18px; position: relative; float: left; letter-spacing: 0.5px; font-weight: bold; }
#newsList dt:first-child,
.rec_newsList dt:first-child		{ margin-top: 0; border-top: none; }
.rec_newsList span.newsTag,
#newsList span.newsTag 			    { padding: 4px 0; font-size: 85%; margin: 0 48px 0 25px; font-weight: normal; position:absolute; right:0; line-height: 1.3; background: #0066cb; letter-spacing: 2px; color: #fff; text-align: center; width: 170px; box-sizing: border-box; font-weight: normal; }
#newsList dd,
.rec_newsList dd					{ border-top:1px solid #fff; padding:18px 0 2px; }
#newsList dd:nth-of-type(1),
.rec_newsList dd:nth-of-type(1)	    { margin-top: 0; border-top: none; }
#newsList dd:last-child,
.rec_newsList dd:last-child			{ margin-bottom: 18px; }
#newsList dd a,
.rec_newsList dd a					{ text-decoration: underline; color: #0066cb; }
#newsList dd a:hover,
.rec_newsList dd a:hover			{ text-decoration: none; }


/*	pannavi	*/
#panNavi 						{ margin: 94px 0 0 35px; font-size:12px; padding-top: 26px; width: min(93%, 1200px); position: absolute; }
#panNavi li						{ padding:0 9px 0 0; line-height:24px; }
#panNavi li:before				{ content: '/'; margin:0 9px 0 0; }
#panNavi li:first-child:before	{ content: ''; margin:0px; }


/*	header footer linkIcon 	*/
.linkIcon + img                 { display: inline-block; margin: 0 0 -1px 8px; }

/*	header footer linkIcon 	*/
li.linkIcon_sdgs_dx               { margin-top: 40px; } /* footer のみ */
.linkIcon_sdgs_dx img           { display: inline-block; width: 100%; max-width: fit-content; }
.linkIcon_sdgs_dx a + a         { margin-left: 13px; }
.linkIcon_sdgs_dx a:hover       { opacity: 0.8; }


@media screen and ( max-width:1400px ) {
    #category .category-text h3                     { font-size: 520%; }
    .grandchild #category h3                        { font-size: 300%; }
    .grandchild .grandchild-category h4             { font-size: 440%; }

    .spBlock_1400                   { display: block; }

}

@media screen and ( max-width:767px ) {

    body            { font-size: 95%; }
    .pcBlock_767    { display: none; }
    .spBlock_767    { display: block; }

    #allContainer.child .bg-gray    { background-size: 34px 34px; margin-top: -27px; }

    .text-area      { margin-bottom: 100px; }

    /* button */
    .btn > a        { font-size: 100%; }

    /* category */
    #category                       { height: 301px; margin-bottom: 26px; }
    .grandchild #category           { margin-bottom: 40px; }
    #category .category-text        { padding-top: 114px; width: initial; margin-left: 13px; }
    #category .category-text h3     { font-size: 270%; margin-left: 0; }
    #category .category-text h1      { font-size: 95%; }

    .grandchild #category h3            { font-size: 220%; }
    .grandchild .grandchild-category h4 { font-size: 275%; }
    .grandchild .grandchild-category h1  { font-size: 100%; }

    /* works */
    .carouPrev, .carouNext          { width: 46px; height: 45px; }
    .carouPrev                      { left: -30px; }
    .carouNext                      { right: -30px; }


    .video_play                     { width: 1.5em; height: 1.5em; }
    .video_play::before             { border: 0.3em solid transparent; border-left: 0.5em solid currentColor; }

    /* news */
    #newsList dt,
    .rec_newsList.dlType01 dt		{ float: none; }
    #newsList dd,
    .rec_newsList.dlType01 dd		{ border: none; padding-top: 10px; }
    #newsList span.newsTag          { margin-right: 0; font-size: 80%; width: 160px; }

    .dlType01 dt				{ width: 100%; }
    .dlType01 dd				{ margin: 0; }

    /*	pannavi	*/
    #panNavi 						{ margin-top: 55px; margin-left: 15px; font-size: 11px; }
   
}