@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --black:#2D2F31;
  --keygreen:#3AC6C5;
  --bg_gley:#F7F7F7;
  --bg_yellow:#FDFAE3;
  --bg_green:#E5F8E7;
  --bg_green02:#E3F7F7;
  --bg_blue:#EEF5FA;
  --bg_blue02:#b2EAEC;
  --li_gley:#999a9e;
  --red:#F772A2;
  --navy:#002A72;
  --op_cat01:#00A040;
  --op_cat02:#BDDC00;
  --op_cat03:#F6CE00;
  --op_cat04:#FE8A36;
  --op_cat05:#FA3C3C;
  --op_cat06:#FF61AD;
  --op_cat07:#B72BF8;
  --op_cat08:#4535F1;
  --op_cat09:#55B5FA;
  --op_cat10:#06B9AF;


  --font:"Noto Sans JP",  "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font_en:"Rubik", sans-serif;

  /*1440px基準*/
  --size10:clamp(8px, 1rem, 12px);
  --size15:clamp(12px, 1.5rem, 20px);
  --size20:clamp(16px, 2.0rem, 25px);
  --size25:clamp(20px, 2.5rem 30px);
  --size30:clamp(25px, 3.0rem, 35px);
  --size35:clamp(30px, 3.5rem, 40px);
  --size40:clamp(35px, 4.0rem, 45px);
  --size45:clamp(40px, 4.5rem, 50px);
  --size50:clamp(45px, 5.0rem, 55px);
  --size55:clamp(50px, 5.5rem, 60px);
  --size60:clamp(55px, 6.0rem, 65px);
  --size70:clamp(65px, 7.0rem, 75px);
  --size80:clamp(75px, 8.0rem, 85px);
  --size90:clamp(85px, 9.0rem, 95px);
  --size95:clamp(90px, 9.5rem, 100px);
  --size100:clamp(95px, 10rem, 110px);

   /*1440px基準*/ 
  --fsize10:clamp(10px, 1rem, 12px);
  --fsize12:clamp(10px, 1.2rem, 12px);
  --fsize14:clamp(12px, 1.4rem, 14px);
  --fsize16:clamp(14px, 1.6rem, 16px);
  --fsize18:clamp(16px, 1.8rem, 18px);
  --fsize20:clamp(18px, 2.0rem, 20px);
  --fsize24:clamp(20px, 2.4rem, 24px);
  --fsize28:clamp(24px, 2.8rem, 28px);
  --fsize32:clamp(28px, 3.2rem, 32px);
  --fsize36:clamp(32px, 2.499984vw, 36px);
  --fsize42:clamp(36px, 2.916666vw, 42px);
  --fsize48:clamp(42px, 3.333312vw, 48px);

  --innergap:min(6.66%, 80px);
  --outergap:max(120px, 8.3%);

  --shadow:0px 0px 2px rgba(0,0,0,0.75);
  --shadow02:0px 0px 10px rgba(0,0,0,0.15);

  --grad_bg:radial-gradient(#FFFFFF 0%, #EFEFE0 82%, #E6E5CD 100%);
  --grad_ov:linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(191, 192, 192, 1) 100%);

  --crip_arw_b:polygon(50% 100%, 0 0, 100% 0);
  --crip_arw_t:polygon(50% 0%, 0% 100%, 100% 100%);
  --crip_arw_l:polygon(100% 0, 0 50%, 100% 100%);
  --crip_arw_r:polygon(0 0, 0% 100%, 100% 50%);
  
  --easeout:cubic-bezier(0,0,.5,1);
  --easein:cubic-bezier(.3,0,1,.7);
  --easeinout:cubic-bezier(.3,0,.7,1);
  --ease:cubic-bezier(.3,.11,.3,.98);
  --liner:cubic-bezier(0,0,1,1);
}

html {
  width: 100%;
  height: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  font-size: var(--fsize16);
  font-family:var(--font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  color: var(--black);
  font-weight: 400;
  background:white;
}

body.hidden {
  overflow: hidden;
  height: 100%;
}

h1,h2,h3,h4,h5 {
  font-weight:500;
}

main {
  position: relative;
  width:100%;
  container-type: inline-size;
}
.second_page main {
  background-color:transparent;
}
.contentsWrap{
  width:100%;
  margin: 0 auto;
  padding:0 var(--outergap);
  position:relative;
}
.outer {
  width:100%;
  margin: 0 auto;
  padding:0 var(--innergap);
  position:relative;
}
.second_page:not(.sub_page) .outer .container {
  padding-inline:0;
}


.container,.container_l,.container_s {
  padding-inline:0;
  position:relative;
} 

.breaking-out {
margin-inline: calc(50% - 50cqi);
}
.breaking-out.-bg {
padding-inline: calc(50cqi - 50%);
}
.breaking-out.-bgr {
padding-inline: 0 calc(50cqi - 50%);
}
.breaking-out.-bgl {
padding-inline: calc(50cqi - 50%) 0;
}
.section {
  position:relative;
  overflow: hidden;
}

a:not(.btn_more):link, a:not(.btn_more):visited {
  text-decoration: none;
  transition: color .3s;
  color: var(--black02);
}

a:hover {
  opacity:0.6;
}
a.coming{
  pointer-events: none;
  opacity:0.3;
}
.en {
  font-family:var(--fontEn); 
}
.go {
  font-family:var(--fontGo); 
}
img {
  width: 100%;
  height: auto;
}


@media (max-width:768px)  {
.outer {
      padding: 0 0;
  }
}
@media (min-width:769px)  {
  body {
    font-size: var(--fsize16);
  }
}
@media (max-width:768px)  {
  body {
    font-size: var(--fsize14);
  }
}

@media (max-width:1280px)  {
  .contentsWrap{
    padding:0 var(--innergap);
  }
}
@media (min-width:1025px)  {

  .container {
    padding-inline:min(6.5%,var(--size70pc));
  }
  .container_s {
    padding-inline:min(3.125%,60px);
  }
}
@media (max-width:1024px)  {
  .contentsWrap{
    padding:0 calc(0.5*var(--innergap));
  }
}
@media (max-width:768px)  {
  .sub_page .outer {
    padding: 0 var(--size30);
  }
  .contentsWrap{
    padding:0 var(--innergap);
  }
}
@media (max-width:500px)  {

}

.columns {
  display: grid;
  gap: clamp(20px, 1.785vw, 25px);
}
.col5x {
  grid-template-columns: repeat(5, 1fr);
}
.col4x {
  grid-template-columns: repeat(4, 1fr);
}
.col3x {
  grid-template-columns: repeat(3, 1fr);
}
.col2x {
  grid-template-columns: repeat(2, 1fr);
}
.columns.gap_xl {
  gap: clamp(45px, 3.89142vw, 60px);
}
.columns.gap_l {
  gap: clamp(30px, 2.857vw, 40px);
}
.columns.gap_s {
  gap: clamp(5px, 0.7vw, 10px);
}
@media (max-width:1024px) {
  .col4x,.col3x {
  grid-template-columns: repeat(2, 1fr);
  }
  .col5x {
      grid-template-columns: repeat(3, 1fr);
   }

}
@media (max-width:768px) {
  .col5x {
      grid-template-columns: repeat(2, 1fr);
      }
  .col3x ,.col2x,.col4x {
      grid-template-columns: repeat(1, 1fr);
    }
}



/*----------------------------------
   styling
-----------------------------------*/

.black{color:var(--black);}
.keygreen{color:var(--keygreen);}
.red{color:var(--red);}
.navy{color:var(--navy);}

.bg_black{background-color:var(--black);}
.bg_blue{background-color:var(--bg_blue);}
.bg_keygreen{background-color:var(--keygreen);}
.bg_gley{background-color:var(--bg_gley);}
.bg_green{background-color:var(--bg_green);}
.bg_yellow{background-color:var(--bg_yellow);}
.bg_red{background-color:var(--red);}
.bg_white{background-color:white;}

.font10{font-size:var(--fsize10)}
.font12{font-size:var(--fsize12)}
.font13{font-size:var(--fsize13)}
.font14{font-size:var(--fsize14)}
.font15{font-size:var(--fsize15)}
.font16{font-size:var(--fsize16)}
.font18{font-size:var(--fsize18)}
.font20{font-size:var(--fsize20)}
.font24{font-size:var(--fsize24)}
.font26{font-size:var(--fsize26)}
.font28{font-size:var(--fsize28)}
.font32{font-size:var(--fsize32)}
.font36{font-size:var(--fsize36)}
.font42{font-size:var(--fsize42)}
.font48{font-size:var(--fsize48)}
.font46{font-size:calc(0.958*var(--fsize42))}
.font100{font-size:calc(5*var(--fsize20))}

.fw300 {font-weight:300;}
.fw400 {font-weight:400;}
.fw700 {font-weight:700;}
.fw900 {font-weight:900;}

.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

.d_flex {display: flex;}
.wrap {flex-flow: wrap;}
.nowrap {flex-flow: nowrap;}
.d_column {flex-direction: column;}
.d_columnrev {flex-direction: column-reverse;}
.d_rowrev {flex-direction: row-reverse;}
.ws_nowrap {white-space:nowrap;}

.word {
  position:relative;
}
sup {font-size:0.5em;position:absolute;
right:0;top:-0.9em;}
.small {
  font-size:0.85em;
}

@media (max-width:599px)  {
    .d_flex.wrap > * {
        width:100%;
    }
    .font100{font-size:calc(4*var(--fsize20))}
}
@media (min-width:1281px)  {
  .max1280 {
    display: none;
  }
}

.mga {
    margin-left:auto;
    margin-right:auto;
}
.mb0{margin-bottom:0;}
.mb10{ margin-bottom: var(--size10)}
.mb15{ margin-bottom: var(--size15)}
.mb20{ margin-bottom: var(--size20)}
.mb25{ margin-bottom: var(--size25)}
.mb30{ margin-bottom: var(--size30)}
.mb35{ margin-bottom: var(--size35)}
.mb40{ margin-bottom: var(--size40)}
.mb45{ margin-bottom: var(--size45)}
.mb50{ margin-bottom: var(--size50)}
.mb55{ margin-bottom: var(--size55)}
.mb60{ margin-bottom: var(--size60)}
.mb70{ margin-bottom: var(--size70)}
.mb80{ margin-bottom: var(--size80)}
.mb90{ margin-bottom: var(--size90)}
.mb100{ margin-bottom: var(--size100)}
.mb120{ margin-bottom:calc(var(--size100) + var(--size20)) }

.mt0{margin-top:0;}
.mt10{ margin-top: var(--size10)}
.mt15{ margin-top: var(--size15)}
.mt20{ margin-top: var(--size20)}
.mt25{ margin-top: var(--size25)}
.mt30{ margin-top: var(--size30)}
.mt35{ margin-top: var(--size35)}
.mt40{ margin-top: var(--size40)}
.mt45{ margin-top: var(--size45)}
.mt50{ margin-top: var(--size50)}
.mt55{ margin-top: var(--size55)}
.mt60{ margin-top: var(--size60)}
.mt70{ margin-top: var(--size70)}
.mt80{ margin-top: var(--size80)}
.mt90{ margin-top: var(--size90)}
.mt100{ margin-top: var(--size100)}
.mt120{ margin-top:calc(var(--size100) + var(--size20)) }

.mr0 {margin-right:0;}
.mr10{ margin-right: var(--size10)}
.mr15{ margin-right: var(--size15)}
.mr20{ margin-right: var(--size20)}
.mr25{ margin-right: var(--size25)}
.mr30{ margin-right: var(--size30)}
.mr35{ margin-right: var(--size35)}
.mr40{ margin-right: var(--size40)}
.mr45{ margin-right: var(--size45)}
.mr50{ margin-right: var(--size50)}
.mr55{ margin-right: var(--size55)}
.mr60{ margin-right: var(--size60)}
.mr70{ margin-right: var(--size70)}
.mr80{ margin-right: var(--size80)}
.mr90{ margin-right: var(--size90)}
.mr100{ margin-right: var(--size100)}

.mi025{margin-inline: 0.25em;}
.mi05{margin-inline: 0.5em;}
.mi1{margin-inline: 1em;}

.pb0 { padding-bottom: 0}
.pb10{ padding-bottom: var(--size10)}
.pb15{ padding-bottom: var(--size15)}
.pb20{ padding-bottom: var(--size20)}
.pb25{ padding-bottom: var(--size25)}
.pb30{ padding-bottom: var(--size30)}
.pb35{ padding-bottom: var(--size35)}
.pb40{ padding-bottom: var(--size40)}
.pb45{ padding-bottom: var(--size45)}
.pb50{ padding-bottom: var(--size50)}
.pb55{ padding-bottom: var(--size55)}
.pb60{ padding-bottom: var(--size60)}
.pb70{ padding-bottom: var(--size70)}
.pb80{ padding-bottom: var(--size80)}
.pb90{ padding-bottom: var(--size90)}
.pb100{ padding-bottom: var(--size100)}
.pb120{ padding-bottom:calc(var(--size100) + var(--size20)) }

.pt0{ padding-top: 0}
.pt10{ padding-top: var(--size10)}
.pt15{ padding-top: var(--size15)}
.pt20{ padding-top: var(--size20)}
.pt25{ padding-top: var(--size25)}
.pt30{ padding-top: var(--size30)}
.pt35{ padding-top: var(--size35)}
.pt40{ padding-top: var(--size40)}
.pt45{ padding-top: var(--size45)}
.pt50{ padding-top: var(--size50)}
.pt55{ padding-top: var(--size55)}
.pt60{ padding-top: var(--size60)}
.pt70{ padding-top: var(--size70)}
.pt80{ padding-top: var(--size80)}
.pt90{ padding-top: var(--size90)}
.pt100{ padding-top: var(--size100)}
.pt120{ padding-top:calc(var(--size100) + var(--size20)) }

.pi025{padding-inline: 0.25em;}
.pi05{padding-inline: 0.5em;}
.pi1{padding-inline: 1em;}

.cap {
  font-size:var(--fsize12);
  font-family: var(--fontGo);
  font-weight:200;
}
.cap.min {
  font-family:var(--fontMin);
  font-weight:400
}
.ls1 {
  letter-spacing: 0.1em;
}
.ls05 {
  letter-spacing: 0.05em;
}
.ls0 {
  letter-spacing: 0;
}
.ls-05 {
  letter-spacing: -0.05em;
}
@media (min-width:1025px) {
  .tab { display: none !important;}
  .sp_tab{ display: none !important;}
  sup {font-size:0.3em;}
}
@media (max-width:1024px)  {
  .pc { display: none !important;}
}
@media (min-width:769px){
  .sp { display: none !important;}
  .cap {
    font-size:var(--fsize12);
  }
}
@media (max-width:768px) {
  .tab_pc { display: none !important;}
  .tab { display: none !important;}
}
@media (min-width:501px){
  .xs { display: none !important;}
}
@media (max-width:500px){
  .xs_none { display: none !important;}
}

.sec_tit {
  display: grid;
  place-items: center;
    font-size:1em;
}
.sec_tit .en:first-child {
  font-size:1.25em;
  font-family: var(--font_en);
    color:var(--keygreen);
}
.sec_tit .en:first-child:after {
  content:"";
  width:6px;
  height:6px;
  background-color: var(--keygreen);
  display: block;
  border-radius: 50%;
  margin:auto;
}
.sec_tit .txt {
  font-size:1.75em;
  display: block;
  margin-top:10px;
}

.notop .contentsWrap .breadcrumb {
  margin-bottom:var(--size30);
}
.notop .contentsWrap > section:last-child {
  padding-bottom:calc(1.5*var(--size100));
}
.mv_wrap .page_tit {
  letter-spacing: 0.04em;
  font-size:var(--size50);
}
.hero {
  width:100%;
  position:relative;
  background-color: var(--bg_blue02);
}
.hero .contentsWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height:300px;
}
.hero h1 {
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size:2.5em;
}
.hero h1:before {
  content:"";
  width:50px;
  height:50px;
  display: block;
} 
.hero.page-hero h1:before{
   display: none;
}


.page_catch {
  font-size:var(--fsize28);
}
.page_lead {
  font-size:var(--fsize32);
  line-height: 1.6;
}
figure {
  position:relative;
}
figure figcaption {
  position:absolute;
  bottom:calc(0.5*var(--size20));
  width:100%;
  left:0;
  font-size:var(--size20);
  padding-inline:1em 1em;
}
figure.has_in_border:after {
  content:"";
  position:absolute;
  left:calc(var(--size20)*0.5);
  top:calc(var(--size20)*0.5);
  width:calc(100% - var(--size20));
  height:calc(100% - var(--size20));
  border:1px solid white;
}
.btn_box.tac{
  display: flex;
  place-content: center;
}
.btn_more {
  width:min(100%,340px);
  height:auto;
  aspect-ratio:85/17;
  display:flex;
  justify-content: center;
  align-items: center;
  padding-inline:var(--size30);
  line-height: 1.4;
  position:relative;
  border-radius:var(--size30);
  transition:all .3s var(--easeout);
  background-color: var(--keygreen);
  color:white;
  overflow: hidden;
}
.btn_more span {
  font-size:var(--fsize16);
  position:relative;
  z-index: 1;
}
.btn_more:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  transform-origin: center;
  background-color: #00000010;
  mix-blend-mode: multiply;
  opacity:0;
  transition:all .3s var(--easeout);
  border-radius:var(--size30);
  z-index: 0;
}
.btn_more:after {
  content:"";
  width:26px;
  height:26px;
  background: url(../img/arw_right_wh.svg) no-repeat;
  background-size: 100% 100%;
  position:absolute;
  right:var(--size20);
  top:calc(50% - 13px);
  z-index: 1;
} 
.btn_more:hover {
  color:white;
  opacity:1;
} 
.btn_more:hover:before {
  opacity:1;
}
.btn_back {
    display: flex;
    padding-inline:var(--size20);
    border-radius:18px;
    height:36px;
    border:1px solid var(--black);
    align-items: center;
    justify-content: center;
    font-size:0.85em;
    transition:.3s var(--easeout);
}
.btn_back:hover {
    background-color: var(--keygreen);
    color:white;
    border-color:var(--keygreen);
    opacity:1;
}
.btn_back:hover span {
     color:white;
    opacity:1;
}

.breadcrumb {
  background-color: var(--bg_yellow);
}
.contentsWrap .breadcrumb{
  background-color: transparent;
}
.breadcrumb ul {
  height:38px;
  display: flex;
  align-items: center;
  gap:4px 8px;
    flex-flow: wrap;
}
.breadcrumb ul li {
  font-size:0.75em;
  color:var(--black);
  white-space: nowrap;
}
.breadcrumb ul li br {
    display: none;
}
.breadcrumb ul li a:link,.breadcrumb ul li a:visited {
  color:var(--li_gley);
}
.breadcrumb ul li:after {
  content:"";
  display: inline-block;
  vertical-align:middle;
  width:6px;
  height:6px;
  border:1px solid var(--li_gley);
  border-width:1px 1px 0 0;
  transform: rotate(45deg);
  margin-left:var(--size10);
}
.breadcrumb ul li:last-child:after {
  content:none;
} 
.sec_tit_en {
  display: flex;
  align-items: center;
  gap:var(--size20);
}

.sec_tit_en .en {
  font-size:var(--fsize20);
  white-space: nowrap;
}
.sec_tit_en .bar {
  flex: 1;
  height:1px;
  width:auto;
}
@media (max-width: 768px) {
    .breadcrumb ul {
  height:auto;
        padding:8px 0;
        gap:2px 8px;
    }
   .hero .contentsWrap {
        height:165px;
    }

  .btn_more svg {
    width:var(--size20);
  }
    .hero h1 {
        font-size:1.5em;
    }
    .sec_tit .en{
        font-size:1.125em;
    }
    .sec_tit .txt {
        font-size:1.25em;
    }
    p.sec_lead.mt60 {
        margin-top:var(--size30);
    }
    .notop .contentsWrap > section:last-child {
        padding-bottom: var(--size100);
    }
}
@media (max-width: 500px) {
  .page_lead {
    font-size:calc(0.9*var(--fsize32));
  }
}
@media (min-width: 501px) {
  .hero_wrap.mv_wrap .page_tit .en {
    font-size:var(--size70);
  }

}
@media (min-width: 769px) {
    .info_area h3 .en {
      font-size:var(--fsize24);
    }
    .info01 p {
      font-size: calc(0.86*var(--fsize48));
    }
    .btn_info01 {
      font-size: var(--fsize28)
    }
    .sec_tit .en:first-child {
      color:var(--keygreen);
    }

    .sec_tit_en.vertical {
      flex-direction: column;
      position:absolute;
      height:100%;
    }
    .sec_tit_en.vertical .en {
      writing-mode: vertical-lr;
    }
    .sec_tit_en.vertical .bar {
      width:1px;
      height:auto;
    }
    .mv_wrap .page_tit {
      text-align: left;
      width:48%;
    }
    .hero_wrap.mv_wrap .txt_box {
      justify-content: space-between;
    }
    .hero_wrap.mv_wrap .page_tit .en {
      font-size:calc(1.5*var(--fsize48));
      white-space: nowrap;
    }
    .page_catch {
      width:44%;
    }
    .page_lead {
      font-size:var(--fsize32);
    }
    figure figcaption {
      font-size:var(--fsize12);
    }
    .img_box:has(.js-zoom_img) .close{display: none;}
    .btn_more {
      font-size:var(--fsize24);
    }
}
@media (min-width: 1025px) {
  .info_area {
    padding-top:calc(1.2*var(--size100pc));
    padding-bottom:calc(1.2*var(--size100pc));
    width:min(68%, 1310px);
    margin-left:auto;
    margin-right:auto;
  }
  .hero_wrap.mv_wrap .txt_box {
    padding:calc(1.5*var(--size100)) 0 calc(1.6*var(--size100));
  }
  .hero_wrap.mv_wrap .page_tit .en {
    font-size:var(--size70);
  }
  .page_catch {
    font-size: calc(0.8*var(--size30pc));
    
  }

}
@media (min-width: 1366px) {
  .hero_wrap.mv_wrap .page_tit .en {
    font-size:var(--size80);
  }
}
@media (min-width: 1700px) {
  .hero_wrap.mv_wrap .page_tit .en {
    font-size:var(--size100);
  }
  .hero_wrap.mv_wrap .page_tit .ja {
    font-size:var(--fsize32);
  }
  .page_catch {
    font-size: var(--size30pc);
    width:50%;
  }
  .page_lead {
    font-size: var(--fsize42);
  }
  
}
.bg_top {
  position:fixed;
  overflow: hidden;
  width: 100%;
  height: 100dvh;
  left:0;
  top:0;
}
.video-box {
  position:absolute;
  width: 100%;
  height: 100%;
}
.video-box:after {
  content:"";
  inset: 0;
  position:absolute;
  background: rgb(0 0 0 / 0.3);
}
.video-box:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/common/bg.jpg) repeat-y;
  background-size: 100% auto;
  position: absolute;
  inset: 0;
  opacity: 0.8;
  mix-blend-mode: multiply;
  z-index: 2;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}






.img_box:has(.js-zoom_img) .close{display: none;}
.img_box:has(.js-zoom_img.zoomed) .close{
  width:var(--size60);
  height:var(--size60);
  font-family: var(--fontGo);
  z-index: 2;
  background-color: var(--gold);
  border-radius: 50%;
  color:white;
  display:flex;
  justify-content: center;
  align-items: center;
  font-weight:600;
  position:absolute;
  right:var(--size20);
  top:0;
}
@media (max-width:768px) {
.img_box:has(.js-zoom_img){
  position:relative;
}

.js-zoom_img {
  overflow: hidden;
  position:relative;
}
.js-zoom_img:before {
  content:"";
  width:var(--size60);
  height:var(--size60);
  background: url(../img/common/icn_zoom.png) center no-repeat;
  background-size:contain;
  position:absolute;
  right:var(--size20);
  top:0;
} 
.js-zoom_img.zoomed:before {
  display: none;
}

.js-zoom_img img {
  transition: transform .3s var(--ease) ,object-position .3s var(--ease);
  width: 100%;
  height: auto;
  display: block;
}
.js-zoom_img.zoomed img {
  transform: scale(2);
  position: relative;
}
}

.simpleParallax {
  height:100%;
}

.js-zoomOut {
  opacity: 0;
  transform: scale(1.2);
}

.js-fadeUp, .fadeUp {
  opacity: 0;
  transform: translateY(50px);
}

.js-fadeUp.animated, .fadeUp.animated, .second_page .mv_wrap.loaded .js-fadeUp {
  animation: fadeup 1.5s var(--easeout) 1 forwards;
}
.second_page .mv_wrap.loaded .js-fadeUp {
  animation-delay: .5s;
}

.js-zoomOut.animated {
  animation: zoomout 1s var(--easeout) 1 forwards;
}
.js-matrix .bg-wrap,
.js-matrix .bg-wrap .inn {
  display: block;
}
.js-matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}
.js-matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.second_page .mv_wrap .bg-wrap, .second_page .mv_wrap .bg-wrap .inn {
  transition-delay: .5s;
}
.js-matrix.animated .bg-wrap, .second_page .mv_wrap.loaded .bg-wrap{
  opacity: 1;
}
.js-matrix.animated .bg-wrap .inn, .second_page .mv_wrap.loaded .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes zoomout {
  0% {
    transform: scale(1.2);
    filter: blur(10);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
.delay2 {
  animation-delay: .2s !important;
  /* transition-delay: .2s; */
}

.delay3 {
  animation-delay: .3s !important;
  /* transition-delay: .3s; */
}

.delay4 {
  animation-delay: .4s !important;
  /* transition-delay: .4s; */
}

.delay5 {
  animation-delay: .5s !important;
  /* transition-delay: .5s; */
}

.delay6 {
  animation-delay: .6s !important;
  /* transition-delay: .6s; */
}

.delay7 {
  animation-delay: .7s !important;
  /* transition-delay: .7s; */
}

.delay10 {
  animation-delay: 1s !important;
  /* transition-delay: 1s; */
}

.p-anima-5 {
  position: relative;
}
.p-anima-5::before {
  content: "";
  display: block;
  background-color:var(--blue);
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
}
.p-anima-5.animated::before {
  animation: anima_bg_5 1s var(--easeout) 1 forwards;
}

.p-anima-5 img {
  position: relative;
  z-index: 1;
  opacity: 0;
}
.p-anima-5.animated img {
  animation: fadein 0.3s var(--easeout) 0.5s 1 forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anima_bg_5 {
  0% {
    left: 0;
    right: 100%;
  }
  40% {
    left: 0;
    right: 0;
  }
  60% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}




@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


.fadeInRight.animated {
  animation-name: fadeInRight;
}

.fadeInLeft.animated {
  animation-name: fadeInLeft;
}

.fadeInUp.animated {
  animation-name: fadeInUp;
}

.fadeInDown.animated {
  animation-name: fadeInDown;
}




.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: var(--easeout);
}