@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600;900&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@600&display=swap');

/* reset
--------------------------------------- */
html,body,
header,main,section,article,footer,aside,canvas,details,figcaption,figure,hgroup,menu,nav,
div,span,applet,embed,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,q,pre,abbr,address,big,small,
cite,code,del,dfn,em,img,strong,sub,sup,tt,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,caption,table,tbody,tfoot,thead,tr,th,td,output,ruby,
audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
header,main,section,article,footer,aside,details,figcaption,figure,hgroup,menu,nav{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* base
--------------------------------------- */
body{
  position:relative;
  width:100%;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:400;
  font-style:normal;
    /*font-size:clamp(1.125rem, 1.06rem + 0.22vw, 1.25rem); /*w1400-20px -> w480-18px*/
  font-size:18px;
  line-height:1.5;
  font-optical-sizing:auto;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -o-text-size-adjust:100%;
  text-size-adjust:100%;
  text-align:left;
  text-justify:none;
  color:#fff;
    letter-spacing:0.05em;
  letter-spacing:0;
  background-color:#263642;/*
  overflow-x: hidden;*/
  /*text-align:justify;
  text-justify:inter-ideograph;*/
}
*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
a{outline:none;text-decoration:none;color:#fff;}
a[href^="tel:"]{color:#fff;pointer-events:none;text-align:left;}
img{max-width:100%;height:auto;vertical-align:bottom;image-rendering:-webkit-optimize-contrast;}
@media screen and (max-width:1920px){}
@media screen and (max-width:1440px){}
@media screen and (max-width:768px){
  body{font-size:24px;}
  a[href^="tel:"]{pointer-events:auto;}
  img{image-rendering:auto;}
}

/* main
--------------------------------------- */
/*
.main{padding:0 0 90px;}
@media screen and (max-width:1920px){}
@media screen and (max-width:1440px){}
@media screen and (max-width:768px){
  .main{padding:0 0 240px;}
}*/

/* key visual
--------------------------------------- */
.visual-container{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:3840 / 2480;
  background:url(../images/kv_bg.webp) center top no-repeat;
  background-size:contain;
}
.visual-container .section{
  width:100%;
  height:100%;
  margin:auto;
  padding-top:17.44vw;
}
.visual-container .section .koji50th{
  position:relative;
  width:43.38vw;
  max-width:833px;
  margin:0px auto 0px;
}
.visual-container .section .img11{
  width:100%;
}
.visual-container .section .img12{
  position:absolute;
  top:0;
  width:100%;
}
.visual-container .section .img2{
  width:24.68vw;
  max-width:474px;
  margin:-0.3vw auto 1.04vw;
}
.visual-container .section .img3{
  width:24.68vw;
  max-width:474px;
  margin:0px auto 1.56vw;
}
.visual-container .section .img4{
  width:40.15vw;
  max-width:771px;
  margin:0px auto 0px;
}
@media screen and (max-width:1920px){}
@media screen and (max-width:1440px){}
@media screen and (max-width:768px){
  .visual-container{
    aspect-ratio:1536 / 2698;
    background-image:url(../images/sp-kv_bg.webp);
  }
  .visual-container .section{
    padding-top:340px;
  }
  .visual-container .section .koji50th{
    width:750px;
    max-width:initial;
  }
  .visual-container .section .img2{
    width:430px;
    max-width:initial;
    margin:-6px auto 0px;
  }
  .visual-container .section .img3{
    width:430px;
    max-width:initial;
    margin:0px auto 10px;
  }
  .visual-container .section .img4{
    width:692px;
    max-width:initial;
    margin:0px auto 20px;
  }
}

/*  */
#sp-goticket{display:none;}
#sp-goticket2{display:none;}
@media screen and (max-width:768px){
  #sp-goticket{display:block;}
  .visual-container .section a.sp-goticket{
    position:relative;
    bottom:0;
    left:0;
    right:0;
    width:324px;
    margin:auto;/*
    transition:bottom 100ms;*/
    z-index:95;
  }
  .visual-container .section a.sp-goticket.fixed{
    position:fixed;
    bottom:100px;
  }
  .visual-container .section a.sp-goticket.logo{
    width:100%;
    margin:0 auto 0;
  }
  .visual-container .section a.sp-goticket p{
    display:block;
    width:200px;
    margin:12px auto 0;
    padding:8px 0;
    font-family: "Jost", sans-serif;
    font-size:38px;
    font-weight: 900;
    line-height:1.0;
    color:#061931;
    text-align:center;
    background:#ffeb00;
  }
  #sp-goticket2{
    position: fixed;
    bottom:80px;
    left:0;
    right:0;
    display:block;
    width:324px;
    margin:auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease, visibility 500ms ease, bottom 500ms;
    z-index:95;
  }
  #sp-goticket2.active{
    visibility: visible;
    bottom:150px;
    opacity: 1;
    pointer-events: auto;
  }
}

/* navigation
--------------------------------------- */
#pc-navi{display:block;}
#sp-navi{display:none;}
.pc-navi{
  position:fixed;
  top:3.64vw;
  left:11.87vw;
  width:13.02vw;
  max-width:250px;
    transition:left 100ms;
  z-index:100;
}
.pc-navi a.goticket{
  display:block;
  width:100%;
}
.pc-navi a.goticket .logo{
  width:100%;
  margin:0 auto 0.52vw;
}
.pc-navi a.goticket p{
  display:block;
  width:8.33vw;
  margin:0 auto 1.56vw;
  padding:0.26vw 0;
  font-family: "Jost", sans-serif;
    font-size:clamp(21px, 1.56vw, 30px); 
  font-size:30px;
  font-weight: 900;
  line-height:1.0;
  color:#061931;
  text-align:center;
  background:#ffeb00;
  transition:color 300ms;
}
.pc-navi a.goticket:hover p{
  color:#fff;
}
.pc-navi ul{
  margin-left:3.12vw;
}
.pc-navi ul li{overflow: hidden;}
.pc-navi ul li a{}
.pc-navi ul li a {
    font-size:clamp(15px, 1.04vw, 20px); 
  font-size:20px;
  color: transparent;
  text-shadow: 0 -1.5em 0 #061931, 0 0 0 #061931;
  transition: text-shadow 0.3s;
}
.pc-navi ul li a:hover {
  text-shadow: 0 0 0 #ffeb00, 0 1.5em 0 #ffeb00;
}
.pc-navi.active ul li a {
  text-shadow: 0 -1.5em 0 #fff, 0 0 0 #fff;
}
.pc-navi.active ul li a:hover {
  text-shadow: 0 0 0 #ffeb00, 0 1.5em 0 #ffeb00;
}
@media screen and (max-width:1600px){
  .pc-navi{left:2vw;}
  .pc-navi{
    left:2vw;
    width:190px;
    max-width:initial;
  }
  .pc-navi a.goticket .logo{
    margin:0 auto 5px;
  }
  .pc-navi a.goticket p{
    width:120px;
    margin:0 auto 5px;
    font-size:21px;
  }
  .pc-navi ul{
    margin-left:45px;
  }
  .pc-navi ul li a {
    font-size:16px;
  }
}
@media screen and (max-width:768px){
  #pc-navi{display:none;}
  #sp-navi{display:block;}
}

/* フッター
--------------------------------------- */
#footer .copyright{
  margin:30px 0 30px;
  font-size:15px;
  font-weight:500;
  color:#fff;
  text-align:center;
  background-color:#263642;
}
@media screen and (max-width:768px){
  #footer .copyright{
    font-size:28px;
  }
}

/* ページトップ移動ボタン
--------------------------------------- */
.pagetop-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  align-content:flex-start;
  width:980px;
  margin:auto;
}
.pagetop-wrap #pagetop{
  width:13.02vw;
  max-width:250px;
  margin-right:-13.02vw;
}
.pagetop-wrap #pagetop .logo{
  width:100%;
  margin:0 auto 5px;
}
.pagetop-wrap #pagetop .arrow{
  width:1.25;
  max-width:24px;
  margin:0 auto;
}
@media screen and (max-width:1480px){
  .pagetop-wrap #pagetop{
    margin-right:0;
  }
}
@media screen and (max-width:1000px){
  .pagetop-wrap{
    width:98%;
  }
}
@media screen and (max-width:768px){
  .pagetop-wrap{
    width:100%;
  }
  .pagetop-wrap #pagetop{
    width:50px;
    max-width:initial;
    margin-right:50px;
  }
  .pagetop-wrap #pagetop .logo{
    display:none;
  }
  .pagetop-wrap #pagetop .arrow{
    width:100%;
    max-width:initial;
    margin:0;
  }
}

/* information
--------------------------------------- */
/*.sticky-wrapper {height:250vh;}*/
.information-container{/*
  position: sticky;
  top: 0;*/
  width:980px;
  margin:auto;
}
.information-container h2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom:70px;
}
.information-container h2 span{
  display: inline-block;
    margin: 0 0.3em;
    padding: 0.12em 1em;
    font-family: "Jost", sans-serif;
    font-size:58px;
    font-weight: 600;
    line-height:1.0;
    color:#263642;
    background:#ffeb00;
}
.information-container h2::before,
.information-container h2::after {
  content: "";
  width: 96px;
  height: 2px;
  background-color: #ffeb00;
}
@media screen and (max-width:1920px){
  .information-container{
    width:98%;
  }
  .information-container h2{
    margin-bottom:4.00vw;
  }
  .information-container h2 span{
      font-size:48px;
  }
}

@media screen and (max-width:1000px){
  .information-container h2{
    margin-bottom:90px;
  }
  .information-container h2 span{
      font-size:42px;
  }
}
@media screen and (max-width:768px){/*
  .sticky-wrapper {height:200vh;}*/
}

/* information
--------------------------------------- */
.information-container .message{
  padding:160px 0 300px;
  min-height:100vh;
}
.information-container .message .wrap-msg{
  display: flex;
  justify-content: space-between;
  width:780px;
  margin:auto;
}
.information-container .message .block-right{
  display: flex;
  flex-direction: row-reverse;
  width:318px;
  order:2;
}
.information-container .message .block-left{
  display: flex;
  flex-direction: row-reverse;
  width:318px;
  order:1;
}
#message .block-right,
#message .block-left{
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1800ms ease, filter 1800ms ease;
  will-change: opacity, filter;
}
#message .block-left {transition-delay: 900ms;}
#message.is-animated .block-right,
#message.is-animated .block-left{
  opacity: 1;
  filter: blur(0);
}
/*
#message .block-right .img,
#message .block-left .img{
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1200ms ease, filter 1200ms ease;
  will-change: opacity, filter;
}
#message .block-right #msg11{transition-delay: 000ms;}
#message .block-right #msg12{transition-delay: 100ms;}
#message .block-right #msg13{transition-delay: 200ms;}
#message .block-right #msg14{transition-delay: 300ms;}
#message .block-right #msg15{transition-delay: 400ms;}
#message .block-right #msg16{transition-delay: 500ms;}
#message .block-left #msg21{transition-delay: 800ms;}
#message .block-left #msg22{transition-delay: 900ms;}
#message .block-left #msg23{transition-delay: 1000ms;}
#message .block-left #msg24{transition-delay: 1100ms;}
#message .block-left #msg25{transition-delay: 1200ms;}
#message .block-left #msg26{transition-delay: 1300ms;}
#message.is-animated .block-right .img,
#message.is-animated .block-left .img{
  opacity: 1;
  filter: blur(0);
}
*/
@media screen and (max-width:1920px){}
@media screen and (max-width:1000px){
  .information-container .message{
    padding:8.33vw 0 15.62vw;
  }
  .information-container .message .wrap-msg{
    width:90%;
  }
  .information-container .message .block-right{
    width:42%;
  }
  .information-container .message .block-left{
    width:42%;
  }
}
@media screen and (max-width:768px){
  .information-container .message{
    padding:120px 0 130px;
  }
  .information-container .message .wrap-msg{
    justify-content: flex-start;
    flex-direction: column;
    width:690px;
    margin:auto;
  }
  .information-container .message .block-right{
    width:580px;
    margin:0 auto 80px;
    order:1;
  }
  .information-container .message .block-left{
    width:620px;
    margin:auto;
    order:2;
  }
}

/* ticket
--------------------------------------- */
.ticket{
  margin-bottom:270px;
}
.ticket .block{
  width:740px;
  margin:auto;
}

.ticket .block h3{
  display:inline-block;
  margin-bottom:10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size:32px;
  font-weight:600;
  color:#fff;
}
.ticket .block .note,
.ticket .block .noteb{
  font-size:21px;
  padding-left:1.0em;
  text-indent:-1.0em;
}
.ticket .block .noteb{
  font-weight:600;
}
.ticket .block .guide{
  margin-bottom:40px;
  color:#fff;
}
.ticket .block .guide .info1{
  margin-bottom:20px;
}
.ticket .block .guide .info2{}
.ticket .block .guide .date{
  font-size:28px;
}
.ticket .block .guide .link{
  margin-bottom:10px;
  font-size:28px;
}
.ticket .block .guide .link a{
  color:#ffeb00;
  transition:color 300ms;
}
.ticket .block .guide .link a:hover{
  color:#fff;
}
.ticket .block .guide .link a[href^="tel:"]{
  color:#fff;
  transition:none;
}

.ticket .block .guide-end{
  color:#ccc;
}
.ticket .block .guide-end .date,
.ticket .block .guide-end .link{
  font-size:26px;
}
@media screen and (max-width:1920px){}
@media screen and (max-width:1000px){
  .ticket{margin-bottom:27vw;}
  .ticket .block{width:74vw;}
  .ticket .block h3{font-size:3.2vw;}
  .ticket .block .note,
  .ticket .block .noteb{font-size:2.1vw;}
  .ticket .block .guide .date,
  .ticket .block .guide .link{font-size:2.8vw;}
  .ticket .block .guide-end .date,
  .ticket .block .guide-end .link{font-size:2.6vw;}
}
@media screen and (max-width:768px){
  .ticket{margin-bottom:190px;}
  .ticket .block{width:690px;}
  .ticket .block h3{font-size:38px;}
  .ticket .block .note,
  .ticket .block .noteb{font-size:30px;}
  .ticket .block .guide .date,
  .ticket .block .guide .link{font-size:36px;}
  .ticket .block .guide-end .date,
  .ticket .block .guide-end .link{font-size:34px;}
  .ticket .block .link a{transition:none;}
  .ticket .block .guide .link a:hover{color:#ffeb00;}
  .ticket .block .guide .link a[href^="tel:"]{color:#fff;}
}

/* information
--------------------------------------- */
.information{
  margin-bottom:90px;
}
.information .block{
  width:740px;
  margin:0 auto 90px;
}
.information .block:last-of-type{
  margin-bottom:0;
}
.information .block h3{
  display:inline-block;
  margin-bottom:10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size:32px;
  font-weight:600;
  color:#fff;
}
.information .block .date,
.information .block .loc{
  margin-bottom:10px;
  font-size:28px;
  color:#fff;
}
.information .block .loc a{
  color:#ffeb00;
  transition:color 300ms;
}
.information .block .loc a:hover{
  color:#fff;
}
.information .block .loc a:after{
  content:'';
  display:inline-block;
  width:24px;
  height:24px;
  margin-left:5px;
  background:url(../images/ext_link.svg) center center no-repeat;
  background-size:contain;
}

.information .block .open{
  font-size:0.875em;
  color:#ffeb00;
}
.information .block .price{
  font-size:28px;
  color: #ffeb00
}
.information .block .toi{
  font-size:28px;
}
.information .block .toi2{
  margin-bottom:20px;
  font-size:24px;
}
.information .block .tax{
  font-size:0.875em;
}
.information .block .mi{
  font-size:24px;
}
.information .block ul.note{
  font-size:18px;
  padding-left:1.0em;
  text-indent:-1.0em;
}
.information .block ul.note li{
  margin-bottom:0.3em;
}
@media screen and (max-width:1920px){}
@media screen and (max-width:1000px){
  .information{
    margin-bottom:9vw;
  }
  .information .block{
    width:74vw;
  }
  .information .block h3{
    font-size:3.2vw;
  }
  .information .block .date,
  .information .block .loc{
    font-size:2.8vw;
  }
  .information .block .price{
    font-size:2.8vw;
  }
  .information .block .toi{
    font-size:2.8vw;
  }
  .information .block .toi2{
    margin-bottom:2.0vw;
    font-size:2.4vw;
  }
  .information .block .tax{
    font-size:0.875em;
  }
  .information .block .mi{
    font-size:2.1vw;
  }
  .information .block ul.note{
    font-size:1.8vw;
  }
}
@media screen and (max-width:768px){
  .information{
    margin-bottom:90px;
  }
  .information .block{
    width:690px;
  }
  .information .block h3{
    font-size:38px;
  }
  .information .block .date,
  .information .block .loc{
    font-size:38px;
  }
  .information .block .loc a{
    transition:none;
  }
  .information .block .loc a:hover{
    color:#ffeb00;
  }
  .information .block .loc a:after{
    width:34px;
    height:34px;
  }

  .information .block .price{
    font-size:38px;
  }
  .information .block .toi{
    font-size:38px;
  }
  .information .block .toi2{
    font-size:36px;
  }
  .information .block .mi{
    font-size:34px;
  }
  .information .block ul.note{
    font-size:32px;
  }
}

/* バナー
--------------------------------------- */
.btm-banner{background-color:#263642;}
.btm-banner .wrap{padding:70px 0 70px;}
.btm-banner .inner{}
.btm-banner .block-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:250px;
}
.btm-banner .block-btn .btn{width:700px;}
.btm-banner .block-btn .btn a{transition:filter 300ms;}
.btm-banner .block-btn .btn a:hover{filter:brightness(1.2);}
@media screen and (max-width:768px){
  .btm-banner .inner{width:100%;}
  .btm-banner .wrap{padding:70px 0 290px;}
  .btm-banner .block-btn .btn a{transition:none;}
  .btm-banner .block-btn .btn a:hover{filter:brightness(1);}
}

/* 汎用
--------------------------------------- */
/* clearfix */
.cf{display:block;}
.cf:after,.cf:before{content:'';display:block;clear:both;}
@media screen and (max-width:768px){
  .sp-cf{display:block;}
  .sp-cf:after,.sp-cf:before{content:'';display:block;clear:both;}
}
/* display */
.disable{display:none;}
.hidden{visibility:hidden;}
.pc{display:block;}
.sp{display:none;}
.pc-visible{display:inline;}
.sp-visible{display:none;}
@media screen and (max-width:768px){
  .pc{display:none;}
  .sp{display:block;}
  .pc-visible{display:none;}
  .sp-visible{display:inline;}
}
/* font - size(base:18px) */
.sml{font-size:0.889em  !important;} /* 16px */
.sml2{font-size:0.833em !important;} /* 15px */
.sml3{font-size:0.778em !important;} /* 14px */
.sml4{font-size:0.722em !important;} /* 13px */
.sml5{font-size:0.667em !important;} /* 12px */
.big{font-size:1.112em  !important;} /* 20px */
.big2{font-size:1.167em !important;} /* 21px */
.big3{font-size:1.222em !important;} /* 22px */
.big4{font-size:1.333em !important;} /* 24px */
/* text */
.normal,.n{font-weight:400 !important;}
.bold,b,.b{font-weight:700 !important;}
.underline{text-decoration:underline;}
.nowrap{white-space:nowrap;}
sup{font-size:0.75em !important;vertical-align:top;}
sub{font-size:0.75em !important;vertical-align:baseline;}
.sup{font-size:0.75em !important;vertical-align:top;position:relative;top:-0.1em;}
/* indent 0.5-1.5(step:0.5em) */
.ind5{text-hangent:0.5em;} .ind10{text-hangent:1.0em;} .ind15{text-hangent:1.5em;}
/* font - hanging indent 0.5-4.0(step:0.5em) */
.hang5{padding-left:0.5em;text-hangent:-0.5em;}
.hang10{padding-left:1.0em;text-hangent:-1.0em;} .hang15{padding-left:1.5em;text-hangent:-1.5em;}
.hang20{padding-left:2.0em;text-hangent:-2.0em;} .hang25{padding-left:2.5em;text-hangent:-2.5em;}
.hang30{padding-left:3.0em;text-hangent:-3.0em;} .hang40{padding-left:4.0em;text-hangent:-4.0em;}
/* line-height 1.0-2.0 */
.lh10{line-height:1.0 !important;} .lh11{line-height:1.1 !important;} .lh12{line-height:1.2 !important;} .lh13{line-height:1.3 !important;} .lh14{line-height:1.4 !important;}
.lh15{line-height:1.5 !important;} .lh16{line-height:1.6 !important;} .lh17{line-height:1.7 !important;} .lh18{line-height:1.8 !important;} .lh19{line-height:1.9 !important;} .lh20{line-height:2.0 !important;}
/* layout - edge center */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center,.sp-left,.sp-right{text-align:center !important;}
@media screen and (max-width:768px){
  .sp-left{text-align:left !important;}
  .sp-right{text-align:right !important;}
  .sp-center,.left,.right{text-align:center !important;}
}
/* layout - float */
.fl, .pc-fl{float:left;}
.fr, .pc-fr{float:right;}
@media screen and (max-width:768px){
  .pc-fl, .pc-fr{float:none;margin-left:auto;margin-right:auto;}
  .sp-fl{float:left;} .sp-fr{float:right;}
}
/* layout - flex row */
.flex-edge{display:flex;justify-content:space-between;}
.flex-center-top{display:flex;justify-content:center;align-items:flex-start;}
.flex-center-center{display:flex;justify-content:center;align-items:center;}
@media screen and (max-width:768px){
  .flex-edge, .flex-center-top, .flex-center-center{display:block;justify-content:normal;align-items:normal;}
}
/* layout - width 1-100(step:1)*/
.w100{width:100%;}.w1{width:1%;}   .w2{width:2%;}   .w3{width:3%;}   .w4{width:4%;}   .w5{width:5%;}   .w6{width:6%;}   .w7{width:7%;}   .w8{width:8%;}   .w9{width:9%;}
.w10{width:10%;} .w11{width:11%;} .w12{width:12%;} .w13{width:13%;} .w14{width:14%;} .w15{width:15%;} .w16{width:16%;} .w17{width:17%;} .w18{width:18%;} .w19{width:19%;}
.w20{width:20%;} .w21{width:21%;} .w22{width:22%;} .w23{width:23%;} .w24{width:24%;} .w25{width:25%;} .w26{width:26%;} .w27{width:27%;} .w28{width:28%;} .w29{width:29%;}
.w30{width:30%;} .w31{width:31%;} .w32{width:32%;} .w33{width:33%;} .w34{width:34%;} .w35{width:35%;} .w36{width:36%;} .w37{width:37%;} .w38{width:38%;} .w39{width:39%;}
.w40{width:40%;} .w41{width:41%;} .w42{width:42%;} .w43{width:43%;} .w44{width:44%;} .w45{width:45%;} .w46{width:46%;} .w47{width:47%;} .w48{width:48%;} .w49{width:49%;}
.w50{width:50%;} .w51{width:51%;} .w52{width:52%;} .w53{width:53%;} .w54{width:54%;} .w55{width:55%;} .w56{width:56%;} .w57{width:57%;} .w58{width:58%;} .w59{width:59%;}
.w60{width:60%;} .w61{width:61%;} .w62{width:62%;} .w63{width:63%;} .w64{width:64%;} .w65{width:65%;} .w66{width:66%;} .w67{width:67%;} .w68{width:68%;} .w69{width:69%;}
.w70{width:70%;} .w71{width:71%;} .w72{width:72%;} .w73{width:73%;} .w74{width:74%;} .w75{width:75%;} .w76{width:76%;} .w77{width:77%;} .w78{width:78%;} .w79{width:79%;}
.w80{width:80%;} .w81{width:81%;} .w82{width:82%;} .w83{width:83%;} .w84{width:84%;} .w85{width:85%;} .w86{width:86%;} .w87{width:87%;} .w88{width:88%;} .w89{width:89%;}
.w90{width:90%;} .w91{width:91%;} .w92{width:92%;} .w93{width:93%;} .w94{width:94%;} .w95{width:95%;} .w96{width:96%;} .w97{width:97%;} .w98{width:98%;} .w99{width:99%;}
@media screen and (max-width:768px){
  .w100, .w1,  .w2,  .w3,  .w4,  .w5,  .w6,  .w7,  .w8,  .w9, .w10, .w11, .w12, .w13, .w14, .w15, .w16, .w17, .w18, .w19,
  .w20, .w21, .w22, .w23, .w24, .w25, .w26, .w27, .w28, .w29, .w30, .w31, .w32, .w33, .w34, .w35, .w36, .w37, .w38, .w39,
  .w40, .w41, .w42, .w43, .w44, .w45, .w46, .w47, .w48, .w49, .w50, .w51, .w52, .w53, .w54, .w55, .w56, .w57, .w58, .w59,
  .w60, .w61, .w62, .w63, .w64, .w65, .w66, .w67, .w68, .w69, .w70, .w71, .w72, .w73, .w74, .w75, .w76, .w77, .w78, .w79,
  .w80, .w81, .w82, .w83, .w84, .w85, .w86, .w87, .w88, .w89, .w90, .w91, .w92, .w93, .w94, .w95, .w96, .w97, .w98, .w99{width:100%;}
}
@media screen and (max-width:768px){
  .sp-w100{width:100% !important;}.sp-w1{width:1% !important;}   .sp-w2{width:2% !important;}   .sp-w3{width:3% !important;}   .sp-w4{width:4% !important;}   .sp-w5{width:5% !important;}   .sp-w6{width:6% !important;}   .sp-w7{width:7% !important;}   .sp-w8{width:8% !important;}   .sp-w9{width:9% !important;}
  .sp-w10{width:10% !important;} .sp-w11{width:11% !important;} .sp-w12{width:12% !important;} .sp-w13{width:13% !important;} .sp-w14{width:14% !important;} .sp-w15{width:15% !important;} .sp-w16{width:16% !important;} .sp-w17{width:17% !important;} .sp-w18{width:18% !important;} .sp-w19{width:19% !important;}
  .sp-w20{width:20% !important;} .sp-w21{width:21% !important;} .sp-w22{width:22% !important;} .sp-w23{width:23% !important;} .sp-w24{width:24% !important;} .sp-w25{width:25% !important;} .sp-w26{width:26% !important;} .sp-w27{width:27% !important;} .sp-w28{width:28% !important;} .sp-w29{width:29% !important;}
  .sp-w30{width:30% !important;} .sp-w31{width:31% !important;} .sp-w32{width:32% !important;} .sp-w33{width:33% !important;} .sp-w34{width:34% !important;} .sp-w35{width:35% !important;} .sp-w36{width:36% !important;} .sp-w37{width:37% !important;} .sp-w38{width:38% !important;} .sp-w39{width:39% !important;}
  .sp-w40{width:40% !important;} .sp-w41{width:41% !important;} .sp-w42{width:42% !important;} .sp-w43{width:43% !important;} .sp-w44{width:44% !important;} .sp-w45{width:45% !important;} .sp-w46{width:46% !important;} .sp-w47{width:47% !important;} .sp-w48{width:48% !important;} .sp-w49{width:49% !important;}
  .sp-w50{width:50% !important;} .sp-w51{width:51% !important;} .sp-w52{width:52% !important;} .sp-w53{width:53% !important;} .sp-w54{width:54% !important;} .sp-w55{width:55% !important;} .sp-w56{width:56% !important;} .sp-w57{width:57% !important;} .sp-w58{width:58% !important;} .sp-w59{width:59% !important;}
  .sp-w60{width:60% !important;} .sp-w61{width:61% !important;} .sp-w62{width:62% !important;} .sp-w63{width:63% !important;} .sp-w64{width:64% !important;} .sp-w65{width:65% !important;} .sp-w66{width:66% !important;} .sp-w67{width:67% !important;} .sp-w68{width:68% !important;} .sp-w69{width:69% !important;}
  .sp-w70{width:70% !important;} .sp-w71{width:71% !important;} .sp-w72{width:72% !important;} .sp-w73{width:73% !important;} .sp-w74{width:74% !important;} .sp-w75{width:75% !important;} .sp-w76{width:76% !important;} .sp-w77{width:77% !important;} .sp-w78{width:78% !important;} .sp-w79{width:79% !important;}
  .sp-w80{width:80% !important;} .sp-w81{width:81% !important;} .sp-w82{width:82% !important;} .sp-w83{width:83% !important;} .sp-w84{width:84% !important;} .sp-w85{width:85% !important;} .sp-w86{width:86% !important;} .sp-w87{width:87% !important;} .sp-w88{width:88% !important;} .sp-w89{width:89% !important;}
  .sp-w90{width:90% !important;} .sp-w91{width:91% !important;} .sp-w92{width:92% !important;} .sp-w93{width:93% !important;} .sp-w94{width:94% !important;} .sp-w95{width:95% !important;} .sp-w96{width:96% !important;} .sp-w97{width:97% !important;} .sp-w98{width:98% !important;} .sp-w99{width:99% !important;}
}
.wTri{width:33.13%;} .wQuart{width:24.8%;} .wHalf{width:49.8%;} .wWide{width:66.46%;} .wFull{width:99.8%;}
/* layout - margin 0-120(step:10px) */
.mt0{margin-top:0px !important;} .mt10{margin-top:10px !important;} .mt20{margin-top:20px !important;} .mt30{margin-top:30px !important;} .mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;} .mt60{margin-top:60px !important;} .mt70{margin-top:70px !important;} .mt80{margin-top:80px !important;} .mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;} .mt110{margin-top:110px !important;} .mt120{margin-top:120px !important;}
.mr0{margin-right:0px !important;} .mr10{margin-right:10px !important;} .mr20{margin-right:20px !important;} .mr30{margin-right:30px !important;} .mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;} .mr60{margin-right:60px !important;} .mr70{margin-right:70px !important;} .mr80{margin-right:80px !important;} .mr90{margin-right:90px !important;}
.mr100{margin-right:100px !important;} .mr110{margin-right:110px !important;} .mr120{margin-right:120px !important;}
.mb0{margin-bottom:0px !important;}  .mb10{margin-bottom:10px !important;} .mb20{margin-bottom:20px !important;} .mb30{margin-bottom:30px !important;} .mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;} .mb60{margin-bottom:60px !important;} .mb70{margin-bottom:70px !important;} .mb80{margin-bottom:80px !important;} .mb90{margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;} .mb110{margin-bottom:110px !important;} .mb120{margin-bottom:120px !important;}
.ml0{margin-left:0px !important;} .ml10{margin-left:10px !important;} .ml20{margin-left:20px !important;} .ml30{margin-left:30px !important;} .ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;} .ml60{margin-left:60px !important;} .ml70{margin-left:70px !important;} .ml80{margin-left:80px !important;} .ml90{margin-left:90px !important;}
.ml100{margin-left:100px !important;} .ml110{margin-left:110px !important;} .ml120{margin-left:120px !important;}
.m-center{margin-left:auto;margin-right:auto;}
@media screen and (max-width:768px){
  .mt10{margin-top:1vw !important;} .mt20{margin-top:2vw !important;} .mt30{margin-top:3vw !important;} .mt40{margin-top:4vw !important;}
  .mt50{margin-top:5vw !important;} .mt60{margin-top:6vw !important;} .mt70{margin-top:7vw !important;} .mt80{margin-top:8vw !important;} .mt90{margin-top:9vw !important;}
  .mt100{margin-top:10vw !important;} .mt110{margin-top:11vw !important;} .mt120{margin-top:12vw !important;}
  .mr10{margin-right:1vw !important;} .mr20{margin-right:2vw !important;} .mr30{margin-right:3vw !important;} .mr40{margin-right:4vw !important;}
  .mr50{margin-right:5vw !important;} .mr60{margin-right:6vw !important;} .mr70{margin-right:7vw !important;} .mr80{margin-right:8vw !important;} .mr90{margin-right:9vw !important;}
  .mr100{margin-right:10vw !important;} .mr110{margin-right:11vw !important;} .mr120{margin-right:12vw !important;}
  .mb10{margin-bottom:1vw !important;} .mb20{margin-bottom:2vw !important;} .mb30{margin-bottom:3vw !important;} .mb40{margin-bottom:4vw !important;}
  .mb50{margin-bottom:5vw !important;} .mb60{margin-bottom:6vw !important;} .mb70{margin-bottom:7vw !important;} .mb80{margin-bottom:8vw !important;} .mb90{margin-bottom:9vw !important;}
  .mb100{margin-bottom:10vw !important;} .mb110{margin-bottom:11vw !important;} .mb120{margin-bottom:12vw !important;}
  .ml10{margin-left:1vw !important;} .ml20{margin-left:2vw !important;} .ml30{margin-left:3vw !important;} .ml40{margin-left:4vw !important;}
  .ml50{margin-left:5vw !important;} .ml60{margin-left:6vw !important;} .ml70{margin-left:7vw !important;} .ml80{margin-left:8vw !important;} .ml90{margin-left:9vw !important;}
  .ml100{margin-left:10vw !important;} .ml110{margin-left:11vw !important;} .ml120{margin-left:12vw !important;}
}
/* layout - margin 0.5-2.0(step0.5em) */
.mt5em{margin-top:0.5em;} .mr5em{margin-right:0.5em;} .mb5em{margin-bottom:0.5em;} .ml5em{margin-left:0.5em;}
.mt10em{margin-top:1.0em;} .mr10em{margin-right:1.0em;} .mb10em{margin-bottom:1.0em;} .ml10em{margin-left:1.0em;}
.mt15em{margin-top:1.5em;} .mr15em{margin-right:1.5em;} .mb15em{margin-bottom:1.5em;} .ml15em{margin-left:1.5em;}
.mt20em{margin-top:2.0em;} .mr20em{margin-right:2.0em;} .mb20em{margin-bottom:2.0em;} .ml20em{margin-left:2.0em;}
/* color */
.wt{color:#fff;}/*white*/
.bg-wt{background-color:rgba(255,255,255,1.0);}
.bk{color:#000;}/*black*/
.bg-bk{background-color:rgba(0,0,0,1.0);}
.gy{color#efefef;}/*gray*/
.bg-gy{background-color:rgba(239,239,239,1.0);}
.rd{color:#f00000;}/*red*/
.bg-rd{background-color:rgba(240,0,0,1.0);}
.bl{color:#0000f0;}/*blue*/
.bg-bl{background-color:rgba(0,0,240,1.0);}
/* brand-color */
.main-blue{color:#005fcc;}
.bg-main-blue{background-color:#005fcc;}
.peil-blue{color:#eaeff2;}
.bg-peil-blue{background-color:#eaeff2;}
.steel-blue{color:#528ca3;}
.bg-steel-blue{background-color:#528ca3;}
.lead-grey{color:#4c4948;}
.bg-lead-grey{background-color:#4c4948;}
.yellow{color:#ffeb00;}
.bg-yellow{background-color:#ffeb00;}
.red{color:#c30d23;}
.bg-red{background-color:#c30d23;}

/* 
--------------------------------------- */
#js-kv12 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 800ms;
  
  will-change: clip-path;
}
#js-kv12.is-open {
  clip-path: inset(0 0 0 0);
}
#js-kv2 {
  clip-path: inset(0% 50% 0% 50%);
  transition: clip-path 500ms cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 1500ms;
  will-change: clip-path;
}
#js-kv2.is-open {
  clip-path: inset(0% 0% 0% 0%);
}

/* 
--------------------------------------- */
.sp-navi{
  position:relative;
  z-index:100;
}
.sp-navi li.img{width:480px;margin:170px auto 0;}
.sp-navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-navi .drawer-list {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  transform: translate(100vw, 0);
  /* ie workaround */
  -ms-transform: translatex(-100vw);
  box-sizing: border-box;
  pointer-events: none;
  padding-top: 125px;
  transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
  border-bottom-left-radius: 100vw;
  background-color: #263642;
  background-color: rgba(38, 54, 66, 0.9);
}
.sp-navi .drawer-list ul {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
  pointer-events: auto;
}
.sp-navi .drawer-list li {
  list-style: none;
  text-transform: uppercase;
  pointer-events: auto;
  white-space: nowrap;
  box-sizing: border-box;
  transform: translatex(100vw);
  /* ie workaround */
  -ms-transform: translatex(-100vw);
}
.sp-navi .drawer-list li:last-child {
  margin-bottom: 2em;
}
.sp-navi .drawer-list li a {
  text-decoration: none;
  color: #fefefe;
  text-align: center;
  display: block;
  padding: 1rem;
  font-size: 32px;
}/*
@media (min-width: 768px) {
  .sp-navi .drawer-list li a {
    text-align: right;
    padding: 0.5rem;
  }
}*/
.sp-navi .drawer-list li a:hover {
  cursor: pointer;
  background-color: #263642;
  background-color: rgba(38, 54, 66, 0.9);
}

.sp-navi input.hamburger {
  display: none;
}
.sp-navi input.hamburger:checked ~ .drawer-list {
  transform: translatex(0);
  border-bottom-left-radius: 0;
}
.sp-navi input.hamburger:checked ~ .drawer-list li {
  transform: translatex(0);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(1) {
  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(2) {
  transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(3) {
  transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(4) {
  transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(5) {
  transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(6) {
  transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(7) {
  transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(8) {
  transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(9) {
  transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(10) {
  transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(11) {
  transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(12) {
  transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(13) {
  transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(14) {
  transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(15) {
  transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(16) {
  transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(17) {
  transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(18) {
  transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(19) {
  transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(20) {
  transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(21) {
  transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(22) {
  transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(23) {
  transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(24) {
  transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(25) {
  transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(26) {
  transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(27) {
  transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(28) {
  transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(29) {
  transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(30) {
  transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(31) {
  transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(32) {
  transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(33) {
  transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(34) {
  transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(35) {
  transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(36) {
  transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(37) {
  transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(38) {
  transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(39) {
  transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(40) {
  transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(41) {
  transition: transform 1s 3.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(42) {
  transition: transform 1s 3.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(43) {
  transition: transform 1s 3.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(44) {
  transition: transform 1s 3.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(45) {
  transition: transform 1s 3.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(46) {
  transition: transform 1s 3.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(47) {
  transition: transform 1s 3.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(48) {
  transition: transform 1s 3.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(49) {
  transition: transform 1s 3.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li:nth-child(50) {
  transition: transform 1s 4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}
.sp-navi input.hamburger:checked ~ .drawer-list li a {
  padding-right: 15px;
}
.sp-navi input.hamburger:checked ~ label > i {
  background-color: transparent;
  transform: rotate(90deg);
}
.sp-navi input.hamburger:checked ~ label > i:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sp-navi input.hamburger:checked ~ label > i:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.sp-navi input.hamburger:checked ~ label close {
  color: #fefefe;
  width: 100%;
}
.sp-navi input.hamburger:checked ~ label open {
  color: rgba(0, 0, 0, 0);
  width: 0;
}

.sp-navi label.hamburger {
  z-index: 9999;
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
}
.sp-navi label.hamburger:hover {
  cursor: pointer;
}
.sp-navi label.hamburger text close,
.sp-navi label.hamburger text open {
  text-transform: uppercase;
  font-size: 0.8em;
  align-text: center;
  position: absolute;
  transform: translateY(50px);
  text-align: center;
  overflow: hidden;
  transition: width 0.25s 0.35s, color 0.45s 0.35s;
}
.sp-navi label.hamburger text close {
  color: rgba(0, 0, 0, 0);
  right: 0;
  width: 0;
}
.sp-navi label.hamburger text open {
  color: #fefefe;
  width: 100%;
}
.sp-navi label.hamburger > i {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  background-color: #fefefe;
  pointer-events: auto;
  transition-duration: 0.35s;
  transition-delay: 0.35s;
}
.sp-navi label.hamburger > i:before, .sp-navi label.hamburger > i:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  left: 50%;
  background-color: #fefefe;
  content: "";
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}
.sp-navi label.hamburger > i:before {
  transform: translate(-50%, -14px);
}
.sp-navi label.hamburger > i:after {
  transform: translate(-50%, 14px);
}

.sp-navi label.hamburger {
  position: fixed;
  top: 15px;
  right: 15px;
}