@charset "utf-8";

/* ===================================================== */
/* SUB-VISUAL */
.sub-visual {--lnb-size: 70px; position: relative; z-index: 100; height: calc(25rem + 200px);  text-align: center;}
.sub-visual-bg { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.sub-visual-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.1); animation: sub-visual 5s linear both; background: #444 no-repeat center/cover; } 
@keyframes sub-visual { to { transform: scale(1); } }
.sub-visual-deco {position: absolute; right: 0; bottom: 0; width: 100%; height: calc(40% + 10rem); overflow: hidden; animation: lnb-fade 0.7s 0.2s both;}
.sub-visual-deco::before {content: ''; position: absolute; left: 0; top: 0; width: calc(100% - var(--lnb-size) - 5px); height: calc(100% - var(--lnb-size)); outline: calc(var(--lnb-size) * 3) solid var(--color-main-a6); border-bottom-right-radius: calc(var(--lnb-size) * 0.6);}

.sub-visual-txt {position: absolute; top: 110px; left: 50%; color: #fff; transform: translateX(-50%); width: calc(100% - var(--lnb-size) * 2 - 6rem); display: flex; flex-direction: column; justify-content: center; height: calc(100% - 110px - var(--lnb-size));}
.sub-visual .inner {height: 100%;}
.sub-visual-tit {margin-bottom: 4px; font-size: calc(3rem + 10px); font-family: var(--font-kohi); color: var(--color-main); animation: fade-in-blur 1s ease-out 0.4s both;}
.sub-visual-slogan {font-weight: 700; line-height: 1.4;}
.sub-visual-slogan em {color: var(--color-main); font-weight: 800;}
.sub-visual-slogan .char { animation: fade-in calc((var(--char-total) * 0.015s) - var(--char-index) * 0.01s) ease-out calc(1.4s + (1s / var(--char-total) * var(--char-index))) both; } 

/* LNB  */
.lnb { position: absolute; bottom: 0; left: 0; width: 100%; animation: lnb-fade 0.7s 0.2s both; height: var(--lnb-size); overflow: auto hidden;} 
.lnb::-webkit-scrollbar {height: 6px; background-color: transparent;}
.lnb::-webkit-scrollbar-thumb {background-color: #fff; border-radius: 5rem; border: solid transparent; border-width: 0 1px 1px 1px; background-clip: content-box;}
@keyframes lnb-fade { 
  0% { opacity: 0; transform: translateY(1em); } 
  100% { opacity: 1; transform: translateY(0); } 
}
.lnb-btn { display: none; position: relative; width: 100%; font-weight: 700; font-size: 20px; height: 100%; color: #fff; padding: 0 var(--inner-padding); line-height: 1.1;} 

.lnb-list { display: flex; width: fit-content; margin: 0 auto; height: 100%; }  
.lnb-item { height: 100%; } 
.lnb-item a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 clamp(0.8em, calc(1.5em + 0.5vw) ,2em); font-weight: 600; letter-spacing: normal; color: #9cdde2; transition: all 0.3s; font-size: 18px; position: relative; line-height: 1.1;} 
.lnb-item a::before {content: ''; background: url(../images/common/lnb_item_on.svg) no-repeat center; width: 18px; height: 7px; position: absolute; left: calc(50% - 9px); bottom: 0; transform: translateY(100%); transition: all .3s;}
.lnb-item:not(:last-child) a::after {content: ''; height: 0.7em; width: 1px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #fff; opacity: 0.3;}
.lnb-item a:hover { color: #fff;} 
.lnb-item a:hover::before { transform: translateY(0);}
.lnb-item.on a { font-weight: 700; color: #fff;} 
.lnb-item.on a::before { transform: translateY(0);}

@media (max-width: 1280px) {
  .sub-visual {--lnb-size: 66px;} 
  .sub-visual-txt { top: var(--header-height); height: calc(100% - var(--lnb-size) - var(--header-height));}
  .sub-visual-slogan {font-size: 15px;}
  .lnb-item a { font-size: 17px; } 
}
@media (max-width: 1024px) {
  .lnb-item a { font-size: 16px; } 
}
@media (max-width: 768px) {
  .sub-visual {--lnb-size: 62px;} 
  .sub-visual.nth-1 .sub-visual-img {background-position: 100% center;}
  .sub-visual.nth-4 .sub-visual-img {background-position: 75% center;}
  .sub-visual.nth-5 .sub-visual-img {background-position: 85% center;}
  .sub-visual-slogan {font-size: 14px; font-weight: 500;}
  .lnb { overflow: visible;} 
  .lnb-btn { display: flex; align-items: center; justify-content: center; column-gap: 0.75em;} 
  .lnb-btn::after { width: 29px; height: 29px; background: #fff url(../images/common/lnb_arrow.svg) no-repeat center 60%/calc(100% - 12px); content: ''; transition: all 0.3s; border-radius: 50%; flex-shrink: 0;} 
  .lnb.on .lnb-btn::after { transform: rotate(180deg); } 
  .lnb-list { z-index: 50; overflow: hidden; flex-direction: column; position: absolute; top: 100%; max-height: 0; transition: all 0.7s; box-shadow: 0 0 12px var(--color-black-a1); left: 50%; transform: translateX(-50%); height: auto; width: calc(100% - var(--inner-padding) * 2);} 
  .lnb-item a { color: #222; padding: 1.2em 1em; background-color: #fff;} 
  .lnb-item:not(:first-child) {border-top: var(--border-gray-1);}
  .lnb-item.on a {color: var(--color-main);}
  .lnb-item a:hover { color: var(--color-main);} 
}
@media (max-width: 480px) {
  .sub-visual {--lnb-size: 60px;} 
  .sub-visual-deco::before { width: calc(100% - 50px);}
  .sub-visual-txt {width: calc(100% - 130px);}
  .lnb-btn {font-size: 18px;}
  .lnb-btn::after {width: 25px; height: 25px;}
  :lang(en) .sub-visual-slogan br {display: none;}
}
@media (max-width: 359px) {
  .sub-visual-slogan br {display: none;}
  .sub-visual-deco::before { width: calc(100% - 40px);}
  .sub-visual-txt {width: calc(100% - 105px);}
  .lnb-btn {font-size: 16px;}
}
/* SUB-VISUAL */
/* ===================================================== */

/* ===================================================== */
/* CONTENT */
.content-tit h3 {padding: 7rem 0 6rem; font-size: calc(2.5rem + 10px); color: #222; text-align: center; font-family: var(--font-kohi);}
/* CONTENT */
/* ===================================================== */