/* culture
=============================================== */

body#culture { background:linear-gradient(to top right, #F5F5F5 6%, #E2F7FF 23%, #F1F1F1 43%, #E2F7FF 72%, #F1F1F1 88%, #E9FFF3 100%); }

:root{
    --qa1-grd-gray:linear-gradient(#FCFCFC, #E5E5E5);
    --qa1-grd-pink:linear-gradient(#FCFCFC, #FDE2FF);
    --qa1-grd-blue:linear-gradient(#FCFCFC, #E2F4FF);
}



/* clt-hd
------------------------------------ */

#clt-hd { margin-bottom:30px; text-align:center; }

#clt-hd-notice { margin-bottom:20px; color:#6C6C6C; line-height:140%; }

.clt-nav { margin:auto; position:relative; width:30em; height:3.4em; border-radius:2em; font-family:"dotgothic16", sans-serif; font-weight:400; font-style:normal; background-color:#e7e7e7; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2) inset; }
.clt-nav::before { position:absolute; z-index:1; width:15em; height:3.4em; box-sizing:border-box; display:block; content:""; background-color:#fff !important; border:var(--cl-tbsblue) 1px solid; border-radius:2em; transition:transform 0.4s ease-in-out; }
.clt-nav li { position:absolute; z-index:2; width:15em; height:3.4em; box-sizing:border-box; line-height:120%; }
.clt-nav:has(li:nth-child(1).current)::before { transform:translateX(0%); }
.clt-nav:has(li:nth-child(2).current)::before { transform:translateX(100%); }
.clt-nav li a { text-decoration:none; }
.clt-nav li .nav-itm { display:flex; justify-content:center; align-items:center; width:100%; height:100%; box-sizing:border-box; cursor:pointer; transition:color 0.4s ease; }
.clt-nav .uncurrent .nav-itm { color:#aaabb0; }
.clt-nav .current .nav-itm { color:var(--cl-tbsblue); }
@media (hover:hover) {
.clt-nav li:hover .nav-itm { color:var(--cl-tbsblue); }
.clt-nav:has(li:nth-child(2):hover) li:nth-child(1).current .nav-itm { color:#aaabb0; }
.clt-nav:has(li:nth-child(1):hover) li:nth-child(2).current .nav-itm { color:#aaabb0; }
}
.clt-nav li.current .nav-itm { background-repeat:no-repeat; background-size:2em; }
.clt-nav li:nth-child(1) { top:0; left:0; }
.clt-nav li:nth-child(2) { top:0; right:0; }
.clt-nav li:nth-child(1).current .nav-itm { background-image:url(../img/icon_cloud.png); background-position:0.75em center; }
.clt-nav li:nth-child(2).current .nav-itm { background-image:url(../img/icon_spark.png); background-position:0.5em center; padding-left:0.5em; }


/* -- Media Queries -- */

@media all and (max-width:1079px) {

#clt-hd { margin-bottom:60px; }

}

@media all and (max-width:504px) {

#clt-hd-notice { font-size:3.0vw; }
.clt-nav { font-size:3.0vw; }

}

/* clt-logo */

#clt-logo { overflow:hidden; }
#clt-logo-inner { position:relative; width:675px; margin:110px auto 20px auto; }
#clt-logo-inner h1 { position:relative; aspect-ratio:1012 / 729; }
#culture h1 span { display:block; position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; background:url(../img/monitor.png) center center no-repeat; background-size:cover; text-indent:-9999px; }
@keyframes cloud-flow-positional { 0% { left:100vw; opacity:0; }5% { opacity:1; }95% { opacity:1; }100% { left:-700px; opacity:0;  } }
#clt-logo-inner::before,
#clt-logo-inner::after,
#clt-logo-inner h1::before,
#clt-logo-inner h1::after { position:absolute; z-index:-1; display:block; content:""; aspect-ratio:532 / 338; background:url(../../img/top/culture/cloud.png) center center no-repeat; background-size:cover; opacity:0; left:100vw; /* ★新しいアニメーション名を指定 */ animation-name:cloud-flow-positional; animation-timing-function:linear; animation-iteration-count:infinite; }
#clt-logo-inner::before { top:-20%; width:266px; animation-duration:35s; animation-delay:0s; }
#clt-logo-inner::after { bottom:20%; width:223px; animation-duration:45s; animation-delay:-10s; }
#clt-logo-inner h1::before { top:20%; width:266px; animation-duration:30s; animation-delay:-20s; }
#clt-logo-inner h1::after { bottom:0%; width:223px; animation-duration:50s; animation-delay:-30s; }

/* -- Media Queries -- */

@media all and (max-width:674px) {
#clt-logo-inner { position:relative; width:110%; margin:110px -5% 20px -5%; }
}



/* readmore
------------------------------------ */

#readmore1,
#readmore2 { padding:2.0em 0; font-family:"dotgothic16", sans-serif; text-align:center; }
#readmore1 { background:url(../img/readmore_bg1.png); }
#readmore2 { background:url(../img/readmore_bg2.png); }
#readmore1 .ttl,
#readmore2 .ttl { margin-bottom:1.0em; font-size:120%; }
#readmore1 .ttl { color:#fff; }
#readmore2 .btn { width:30em; margin:auto; }
#readmore2 .btn a { display:block; width:100%; height:100%; padding:1.0em 0; box-sizing:border-box; border-radius:6px; border:#000 2px solid; background:var(--qa1-grd-gray); text-decoration:none; color:#000; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #readmore2 .btn a:hover { opacity:0.5; } }

/* -- Media Queries -- */

@media all and (max-width:1079px) {

#readmore2 .btn { width:18em; font-size:90%; }
#readmore2 .btn a { padding:1.3em 0; }

}