@charset "UTF-8";
/* 画像パスはこのCSSファイル基準の相対パスで記述（例: url(../images/xxx.jpg)）
   ルート相対（/assets/...）はサブディレクトリ環境で壊れるため使用しない */
/* CSS Document */ :root {
  --base-fnt: 'Shippori Mincho', 'Noto Serif JP', serif;
  --fnt-sans:"Noto Sans JP", sans-serif;
  --clr-main: #4C94AE;
  --clr-gray:#5B5B5B;
  --head2: clamp(22px, 5.128vw, 30px);
  
  --wall_blue:#F3F8FB;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .3s var(--easing);
}
body {
  width: 100%;
  font-family: var(--base-fnt);
  font-size: clamp(12px, 3.077vw, 15px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 500;
  transition: opacity .6s var(--easing);
  opacity: 0;
  color: #000;
}
body.is-load {
  opacity: 1;
}

.fnt-sans{
  font-family: var(--fnt-sans);
}
.lity-hidden{
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transit),visibility var(--transit);
}
button#pagetop{
  position: fixed;
  top:100%;
  right: 1em;
  translate:0 calc(-100% - min(20px,5vw));
  width: min(48px,12vw);
}
button#pagetop.is-fixed{
  position: absolute;
  top: 0;
  translate:0 -50%;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++
/*container 
++++++++++++++++++++++++++++++++++++++++++++++++++*/
#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.inner {
  width: min(1060px, 100%);
  padding-left: min(50px, 7.6vw);
  padding-right: min(50px, 7.6vw);
  margin-left: auto;
  margin-right: auto;
}
a.cvr{
  position: absolute;
  inset:0;
}

.fc_blue{
  color: var(--clr-main);
}
/*js-fadeup*/
.js-fade > *:not(.js-clear) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.js-fade > *.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-fade > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media(hover){
  a.hvr_udl:hover{
    text-decoration: underline;
    text-underline-offset:2px;
  }
}

/*header/nav  +++++++++++++++++++++++++*/

/*SPButton*/
#hum-button {
  width: auto;
  display: none;
  height: min(96px, 16.45vw);
  color: #fff;
}
#hum-button {
  position: fixed;
  top: 0;
  right: min(20px,2.5vw);
  z-index: calc(infinity);
}
#hum-button .line{
  height: 4px;
  background-color: currentColor;
  transition:rotate var(--transit);
  translate:0 -150%;
}
#hum-button .line::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  background-color: currentColor;
  transition: rotate var(--transit);
  top:12px;
}

#hum-button.open .line {
  rotate:45deg;
  translate:0 0;
}
#hum-button.open .line::before{
  top: 0;
  rotate:-90deg;
}
#l-nav {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
  transition: opacity var(--transit),visibility var(--transit);
  z-index: 100;
  background-color: var(--clr-main);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#l-nav.is-view{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.l-nav_inner{
  min-height: 100svh;
  padding:calc(var(--head-h) + min(50px,12vw)) min(60px,8vw) min(50px,12vw);
  color: #fff;
}
.l-nav__menu li:nth-child(n+2){
  margin-top: .5em;
}
.l-nav__menu li a{
  display: block;
  font-size: min(20px,5.33vw);
  padding: 1em 0;
  letter-spacing: .1em;
}
.l-nav__social{
  display: flex;
  font-size: min(24px,6.25vw);
  gap:1.5em;
  margin-top: 2em;
}
.l-nav__social > a{
  width:  1em;
}
/*header +++++++++++++++++++++++++++++++++++*/

header {
  background-color: var(--clr-main);
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  height: min(96px, 16.45vw);
  transition:background var(--transit);
}
header.nav-open{
  background-color: color-mix(in sRGB, var(--clr-main) 90%, #fff 10%);
}
.header_inner {
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  gap: min(30px, 4vw);
  height: 100%;
/*  font-size: clamp(0.9375rem, 0.604rem + 0.69vw, 1.125rem);*/
  font-size: clamp(0.9375rem, 0.317rem + 1.29vw, 1.125rem);
}
.h-logo {
  height: min(90px, 14vw);
  aspect-ratio:1/1.1392;
}
.h-logo img {
  object-fit: contain;
  height: 100%;
  object-position: left;
}
.h-nav {
  flex: 1;
  display: flex;
  justify-content: center;
/*  gap: min(60px, 4vw);*/
   gap: min(42px, 4vw);
  height: 100%;
}
.h-nav a{
  height: 100%;
  display: grid;
  place-content:center;
}
.head-sns-links {
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap: 1.2em;
}
.head-sns-links a {
  width: 1.2em;
}
.head-sns-links a img {
  object-fit: contain;
  height: 100%;
  object-position: center;
}
/*main +++++++++++++++++++++++++++++++++++*/
main {
  flex: 1;
  padding-top: var(--head-h);
}
.lead-text{
  line-height: 300%;
}
.lead-title{
  font-size: clamp(16px, 4vw, 28px);
  line-height: calc(24/16);
}
.sec-title{
  text-align: center;
  color: var(--clr-main);
  font-size: var(--head2);
  letter-spacing: .05em;
  text-indent: .05em;
}
.squ-button{
  height: min(50px,11.25vw);
}
.squ-button a{
  width: min(100%,93vw);
  border: 1px solid var(--clr-main);
  display: grid;
  place-content:center;
  height: 100%;
  color: var(--clr-main);
  font-weight: 500;
  margin-inline:auto;
  font-size: clamp(18px, 4vw, 24px);
}
.squ-button a::after{
  content: "";
  width: min(.7em,4vw);
  aspect-ratio:1;
  border: 1px solid;
  border-color: currentColor currentColor transparent transparent;
  position: absolute;
  top: 50%;
  right: min(30px,7vw);
  translate:0 -50%;
  rotate:45deg;
}
@supports (text-box-trim: trim-start) {
  .sec-title
  ,.box-title
  ,.lead-title
  ,.lead-text {
    text-box-trim: trim-start;
    text-box-edge: text;
  }
}
/*modal ++++++++++*/
.cts-mdl-open{
  cursor: pointer;
}
.mdl-contents{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: rgba(239,249,253,.6);
  backdrop-filter: blur(10px);
  z-index: calc(infinity);
}
.mdl-content_wrap{
  min-height: 100svh;
  padding: min(50px,7vw) min(20px,3vw);
  display: grid;
  grid-template-columns: min(960px,100%);
  place-content:center;
}
.mdl-close_button{
  width: min(48px,9vw);
  aspect-ratio:1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: min(20px,2vw);
  right: min(20px,2vw);
  border-radius: 100vmax;
  border: 1px solid #000;
}
.mdl-close_button span{
  width: 33%;
}
.mdl-close_button span::before
,.mdl-close_button span::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  rotate:45deg;
}
.mdl-close_button span::after{
  rotate:-45deg;
}
.cts-mdl-open{
  cursor: pointer;
}

.sec-story-blc{
  display: grid;
  grid-template-columns: min(576px,100%);
  justify-content: center;
  gap:min(48px,4vw);
}
.movie-thumb{
  width: 100%;
  aspect-ratio:1/0.5625;
}
.movie-thumb img{
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.movie-thumb::after{
  content: "";
  pointer-events: none;
  width: min(80px,11.75vw);
  aspect-ratio:1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate:-50% -50%;
  mask:url("../images/icon/play.svg") no-repeat center/cover;
  -webkit-mask:url("../images/icon/play.svg") no-repeat center/cover;
  background-color: #fff;
  transition:background var(--transit);
}
@media(hover){

  .movie-thumb:hover::after{
    background-color:#f03;
  }
}
/*footer +++++++++++++++++++++++++++++++++++*/
footer {
  letter-spacing: 0.03em;
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(24px,6vw);
  padding-top: min(50px,12vw);
  padding-bottom: min(50px,12vw);
  color: var(--clr-gray);
}

.footer-inner{
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(48px,10vw);
}
.footer__logo{
  width: min(160px,42vw);
}
.footer__desc{
  text-align: center;
  font-size: min(12px,2.8vw);
  line-height: calc(21/12);
}
footer .copy {
  line-height: 1.75;
  font-size: min(12px,2.8vw);
}
@media(max-width:768px){
  
  .h-nav
  ,.head-sns-links{
    display: none;
  }
  /*humhum*/
  #hum-button{
    display: grid;
    grid-template-columns:auto min(40px,9.4vw);
    justify-content: flex-end;
    -ms-align-items: center;
    align-items: center;
    gap:1.5em;
    right: min(26px,6.6vw);
  }
  
  .lead-text{
    line-height: 200%;
  }

  
}