@charset "utf-8";
/*--基本--*/
:root{
	--font-size:18px;
	--max-width:1200px;
	--color: #070A7D;/*文字色*/
	--color-hover: #FF3F8A;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --spec-border: #ff899f;
  --btn:#FFB000;/*ボタンの色*/
  --btn-hover:#FFB000;/*ボタンの色:hover*/
  --btn-color:#323232;/*ボタンの文字色*/
  --btn-color-hover:#323232;/*ボタンの文字色:hover*/
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:0;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
  --tokyo:#FF3F8A;
  --tokyo-base:#FF91BC;
  --osaka:#009CB2;
  --osaka-base:#5DC2D0;
}


a.btn {position: relative; width: 100%; border-radius: 1000px; overflow: hidden; line-height: 1.2;padding: 1em; border: 5px solid #2589CA;}
.btn svg{position: absolute; left: 0; top: 0; opacity: 0.2;}
a.btn span{color: #070A7D;text-align: center;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: #FFF;font-size: .9em;font-style: normal;font-weight: 800;position: relative; z-index: 10;paint-order: stroke; }
a.btn::after{content: ""; display: none;}


/* ROTATE */
.cloudimage-360 {
  width: 40%!important; 
  cursor: grab;  
  position: absolute;
  left: 45%;
  transform: translateY(-50%);
  top: 60%;
}

.cloudimage-360:active {
  cursor: grabbing;
}

.cloudimage-360-zoom-controls[data-position=bottom-right] {
    bottom: 30%!important;
    right: 0%!important;
}

/*------
  font
------*/
.outfit{
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*------
 
------*/
body{position: relative;}

/*------
 hero
------*/
#hero{position: fixed; width: 100%; height: 100vh;top: 0; left: 0;background: url(../images/bg.jpg) no-repeat; background-size: cover;/* max-width: 2560px; */}
#hero .name{position: absolute; left: 0; top: 50%; z-index: 1;color: #fff; font-weight: 700;font-size: 6.75vw; line-height: 1; transform: translateY(-50%); text-align: center; opacity: .8;}
#hero .img_area{position: sticky; width: calc(87% - 396px); display: block;margin-top: 10px; top:0;z-index: 10; height: 100vh;height: calc(100vh - 135px);}
#hero .text_area{position: absolute; left: 2%; bottom: 2em;z-index: 20;pointer-events: none; font-weight: 900;}
#hero .text_area .scale{color: #FF7030; letter-spacing: .7em;}
#hero .text_area .scale span{color: #070A7D;}
#hero .text_area h1{line-height: .8;font-size: 5vw; margin-top: .2em}
#hero .text_area .small{font-size: .6em;color: #FFB000;}
#hero .text_area .small span{color: #FFB000;color: #070A7D;}
.menu_area{position: absolute; bottom: 0; left: 0; width: 100%; background: #2589CA; padding: 0.8%;height: 120px; align-items: center; }
.menu_cnt_sp{display: none;}

.btn_hero{position: absolute; right: 1em; bottom: -6vw;z-index: 100;}
.btn_hero a.btn{display: flex; width: 12vw; height: 12vw;font-size: .85vw; align-items: center;justify-content: center;align-content: center;line-height: 1.5;}
.btn_hero a.btn span:first-of-type{margin-top: 1em;}
.btn_hero a.btn .line{margin-top: .25em;text-decoration: underline;text-decoration-thickness: .8em; text-decoration-color: #FFF100; text-underline-offset: -.2em; text-decoration-skip-ink: none; font-size: 1.3vw; display: inline-block; }

.pc_sidemenu{width: 13%; height: 100vh; background:/*  #0a89ff42  */linear-gradient(to right top ,  #ffffff00, #2588ca7e); position: absolute; right: 0; top: 0; color: #fff; padding: 10px; font-weight: 600;z-index: 5;}
.pc_sidemenu li{font-size: 1.1vw; padding: 2em 0 0 .5em; line-height: 1; display: flex; align-items: center;}
.pc_sidemenu li::before{content: "";display: inline-block; position: relative; clip-path: polygon(0 0, 0% 100%, 100% 50%); background: #fff;width: .5em; height: .5em; margin-right: .5em;}
.pc_sidemenu li a:hover{color: #0A89FF;text-decoration: none;}
.pc_sidemenu li:hover::before{background: #0A89FF;}

.btn_hero{transition: all 0.2s linear;}
.btn_hero:hover{transform: scale(1.02);transition: all 0.2s linear;}
.btn_hero .click{position: absolute; top: .5vw; left: -3vw; background: #2589CA; text-align: center; width: 10vw; z-index: 20; border-radius: 1000px;}
.btn_hero .click .outfit{font-weight: 800; color: #fff;font-size: 1.5vw;}
.btn_hero .click::after{content: "";display: block;width: 2.2vw; height: 3vw;position: absolute; left: 2vw; bottom: -3vw; background: url(../images/fukidashi.svg) no-repeat; background-size: 100% auto;}
.btn_hero .arrow{position: absolute; width: 3vw; bottom: -.5em;right: 0;animation: arrow 3s linear infinite;z-index: 10; }
.btn_hero .arrow svg{width: 100%; height: auto;}

@keyframes arrow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10px, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}


.language,
.share{background: #fff;border-radius: 10px; padding: .5em 1em .4em; align-items: center;height: 46px;font-weight: 700; font-size: .8em;}
.language{margin-right: 1em;}
.language p,.share p{line-height: 1; margin-right: .5em;}

.language p span{width: 1.5em; ; display: inline-block; vertical-align: middle;line-height: 0;margin-right: .5em;}
.share p span{width: 1.3em; display: inline-block; vertical-align: text-top;line-height: 0;margin-right: .5em;}
.language ul{align-items: center;gap: 10px; margin-left: 1em;}
.language li{font-weight: 600;line-height: 1;}
.language a{color: #2589CA;}
.language li.active a,
.language li a:hover{color: #FF7030; text-decoration: none;}
.share ul{gap: 10px;margin-left: 1em;}
.share li{line-height: 1; width: 25px;}

/*header*/
header{position: absolute}
header p{max-width: 210px;width: 30%;}
/*------
 main
------*/
main{max-width: 396px; width: 100%; border: 1px solid #2589CA; border-width: 0 10px; position: relative; z-index: 4; background: #fff;margin-left: calc(87% - 396px);}

main h2.outfit{padding: 0 3.5%; text-align: center; font-size: /* 1.8vw */1.5em;font-weight: 800;}
main h2 span.lightblue{color: #2589CA;}
main h2 span.orange{color: #FF7030;}
main h2 span.lightorange{color: #FFB000}
main p{margin-top: 1.5em;font-weight: 800;}
main .inner p:first-of-type{margin-top: 0;}
main .inner .bg{padding: 2em 10% 0;}
main .inner .bg.blue{background-image: url(../images/bg_specifications.png); background-size: 100% auto;}

.cloudimage-360-hints-overlay.visible{display: none!important;}
/*------
 top
------*/
.top_read.flex{flex-direction: column;}
#top{background: yellow url(../images/bg_top.png); background-size: 100% auto; }

/*------
 read
------*/
#read{padding: 0 0 12em 0;margin-top: -10em;}
#read .ttl{position: relative; padding: 4em 0; height: 10em;}
#read .ttl::after{content: ""; position: absolute; left: 0; bottom:0;clip-path: polygon(0 0, 0% 100%, 100% 100%); background: #fff; width: 50%; height: 8em; display: block;}
#read .ttl::before{content: ""; position: absolute; right: 0; bottom:0;clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: #fff; width: 50%; height: 8em; display: block;}
#read p{text-align: center;}
#read .inner{padding: 2em 10% 0;}


/*------
 highlights
------*/
#highlights{margin-top: -10em;}

#highlights .ttl{position: relative; padding: 4em 0; height: 10em;}
#highlights .ttl::after{content: ""; position: absolute; left: 0; bottom:0;clip-path: polygon(0 0, 0% 100%, 100% 100%); background: #5AD1FB; width: 50%; height: 8em; display: block;}
#highlights .ttl::before{content: ""; position: absolute; right: 0; bottom:0;clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: #5AD1FB; width: 50%; height: 8em; display: block;}
#highlights .inner{position: relative;background: linear-gradient(180deg, #5AD1FB 0%, #CCECF9 100%);/* padding-bottom: 12em; */}
#highlights .inner .bg{padding-bottom: 12em;}
#highlights .inner .box{margin-top: 3em;}
#highlights .inner .box:first-of-type{margin-top: 0;}
#highlights .inner .box p{font-weight: 500; font-size: .9em;}
/*------
 products
------*/
main #products .inner{padding: 2em 5% 12em;}
#products{margin-top: -10em;}
#products .ttl{position: relative; padding: 4em 0; height: 10em;}
#products .ttl::after{content: ""; position: absolute; left: 0; bottom:0;clip-path: polygon(0 0, 0% 100%, 100% 100%); background: #FFF; width: 50%; height: 8em; display: block;}
#products .ttl::before{content: ""; position: absolute; right: 0; bottom:0;clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: #FFF; width: 50%; height: 8em; display: block;}
/* #products .inner{padding-bottom: 12em;} */

#products h3{text-align: center; font-size: .9em; font-weight: 800;}
#products h3 + p{text-align: center; margin: 2em 0; font-weight: 800;}
.postage{color: #FF7030;text-align: center; margin-bottom: .5em;}
.postage span{font-weight: 300;}

.online{margin-top: 3em;}
.online h4{text-decoration: underline;text-decoration-thickness: .8em; text-decoration-color: #FFF100; text-underline-offset: -.2em; text-decoration-skip-ink: none; font-size: .9em;text-align: center;
}
.online p{font-size: .8em; font-weight: 500; margin-top: 1em; text-align: center;}
main .online p:first-of-type{margin-top: 1em;}

.online hr{border: 2px solid #0A89FF;border-width: 1px 0 0 0; margin: 3em 0;}

/*スライダー*/
.swiper_wrap{padding: 3em 0 1em 0;}
.swiper-pagination{position: relative!important;}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active{border-radius:1000px!important; height: 7px!important;opacity: 1!important;}
.swiper-pagination-bullet{background: #FFF100!important; width:13px!important;}
.swiper-pagination-bullet-active{background: #0A89FF!important;width:22px!important;}
/*------
 specifications
------*/
#specifications{margin-top: -10em;}
#specifications .ttl{position: relative; padding: 4em 0; height: 10em;}
#specifications .ttl::after{content: ""; position: absolute; left: 0; bottom:0;clip-path: polygon(0 0, 0% 100%, 100% 100%); background: #5AD1FB; width: 50%; height: 8em; display: block;}
#specifications .ttl::before{content: ""; position: absolute; right: 0; bottom:0;clip-path: polygon(100% 0, 0% 100%, 100% 100%); background: #5AD1FB; width: 50%; height: 8em; display: block;}
#specifications .inner .bg{padding: 2em 5%;}

#specifications .inner{position: relative;background: linear-gradient(180deg, #5AD1FB 0%, #CCECF9 100%);padding-bottom: 0; }

#specifications .specifications{border-radius: 10px; background: rgba(255, 255, 255, 0.80);width: 100%; padding: 3em;}
#specifications h3{text-align: center;font-weight: 800; margin-top: 2em;}
#specifications h3:first-of-type{margin-top: 0;}
#specifications p{text-align: center;font-weight: 500; margin-top: 0;}
/*------
 footer
------*/
footer{background: none; border: none; padding: 2em 0;}
footer .logo_gsc{width: 50%; display: block; margin: 0 auto; line-height: 1;}
main #specifications .inner footer p:first-of-type{font-size: .65em; font-weight: 400; text-align: center; margin-top: 2em;}


@media screen and (max-width: 1200px){

  /* ROTATE */
  .cloudimage-360 {width: 40%!important; /* left: auto; right: 3%; */}

  #hero .img_area{width: calc(100% - 396px);}
  main{margin-left: calc(100% - 396px);}

  .pc_sidemenu{display: none;}
  .menu_area .inner.flex{flex-direction: column; width: 250px;}
  .language, .share{height: 40px;}
  .language{margin-right: 0;width: 100%;}
  .share{margin-top: 1em; width: 100%;}
  .btn_hero{bottom: -10vw;}

  .btn_hero a.btn{width: 15vw; height: 15vw;font-size: 1vw;}

}

@media screen and (max-width: 768px){

  /* ROTATE */
  .cloudimage-360 {
    width: 80%!important; 
    margin: 0 auto;
    position: relative;
    left: auto;
    transform: translate(2% , 0);
    top:auto;
  }

  .cloudimage-360:active {
    cursor: grabbing;
  }

  .cloudimage-360-zoom-controls[data-position=bottom-right] {
      bottom: 30%;}
  

  /*------
  header
  ------*/
  header.absolute{width: 95%; background: #fff; left: 2.5%; top: 20px; padding: 10px;border-radius: 10px; z-index: 999; height: 50px;}
  header p{width: auto; line-height: 1;}
  header p a{display: block; line-height: 0;}
  header p img{height: 30px; width: auto;}


  /*------
  hero
  ------*/
  #hero{position: relative; height: auto;width: 100%; overflow: hidden;}
  #hero::before{content: ""; display: block; width: 100%; height: 20%; position: absolute; bottom: 0; left: 0; background:linear-gradient(to top ,#ffffff 0, #ffffff00 100%);}
  #hero .img_area{width: 100%; margin-top: 0; position: relative; padding: 70px 0 0 0;height: auto;}

  #hero .text_area{position: relative; margin-top: 1em;}
  #hero .text_area .scale{text-align: center;}
  #hero .text_area h1{text-align: center;font-size: 12vw;}

  .name{display: none;}

  .menu_area{display: none;}
  .menu_cnt_sp{display: block;}
  .btn_nav{position:fixed; top: 25px; right: 4%; display: flex;  width: 40px; height: 40px; border-radius: 100px;margin-left: auto; z-index: 200; padding: 5px; justify-content: center; align-items: center; z-index: 1005;}
  .btn_nav:hover{cursor: pointer;}
  /* .btn_nav.active{background: #000;} */
  .btn_nav span{width: 80%; height: 3px; background:#0A89FF; display: flex; position: relative; align-items: center; border-radius: 1000px;} 
  .btn_nav span::before,
  .btn_nav span::after{content: "";display: block; width: 100%; height: 3px;background:#0A89FF;position: absolute;transition: all 0.2s linear;border-radius: 1000px;}
  .btn_nav span::before{top: -8px;}
  .btn_nav span::after{bottom: -8px;}
  .btn_nav.active span::before{transform: rotate(-45deg);top: calc(50% - 1px);transition: all 0.2s linear; background: #fff;}
  .btn_nav.active span::after{transform: rotate(45deg);bottom: calc(50% - 1px);transition: all 0.2s linear;background: #fff;}
  .btn_nav.active span{background: #ffffff00;}

  .btn_hero{position: fixed;opacity: 0; bottom: 10px; right: 15px;}
  .btn_hero.show{opacity: 1;transition: all 0.2s linear;}
  .btn_hero a.btn{width: 120px; height: 120px;flex-direction: column;font-size: .45em;}
  .btn_hero a.btn .line{font-size: 1.8em;}
  .btn_hero a.btn br{display: none;}
  .btn_hero .click{padding: 0 .7em;width: auto;top: -1.5vw;}
  .btn_hero .click::after{left: 6vw;}
  .btn_hero .click .outfit{font-size: 1em;}
  .btn_hero .arrow{width: 2em;bottom: -1em;right: -.5em;}

  /*------
  main
  ------*/
  main{width: 100%;max-width:100%; margin-left: 0; border: none;}

  .top_read.flex{flex-direction: column-reverse;}

  .menu_area{width: 95%; transform: translateX(110%); display: flex;transition: all 0.5s linear; height: 100vh; background: rgba(37, 137, 202, 0.80);z-index: 100; align-items: center; align-self: center; flex-direction: column; padding: 3em 5% 5%; position: fixed;}
  .menu_area.active{bottom: auto; height: 100vh;left: auto; right: 0; top: 0; transform: translateX(0);transition: all .5s linear;}

  .menu_area .menu_cnt_sp{width: 100%;}
  .menu_area .menu_cnt_sp li {/* line-height: 1;  */border: 1px solid #fff; border-width: 0 0 1px 0;padding: 1em 0; text-align: left; font-weight: 700;}
  .menu_area .menu_cnt_sp li  a{display: block; color: #fff;}
  .menu_area .menu_cnt_sp li  a:hover{text-decoration: none;}
  .menu_area .inner.flex{width: 90%; justify-content: center; text-align: center;margin-left: 10%; margin-top: 2em;}
  .language,.share{background: none; color: #fff; font-size: 1.2em; font-weight: 500; width: 100%; margin: 1em 0 0 0;/* align-items: center; justify-content: center; */}
  .language p,
  .share p{padding-right: 1em; border: 1px solid #fff; border-width: 0 1px 0 0; width: 40%;}
  .language p span,
  .share p span{display: none;}
  .language a{color: #fff; font-weight: 500;}
  .language ul,
  .share ul{gap: 15px;}
  .language li.active a,
  .language li a:hover{text-decoration: underline; color: #fff;}
  .share li {width: 1.3em; line-height: 1;}
  /* .share li img{height: 100%; width: auto;} */
  /*------
  top
  ------*/

  #top{background: #fff;width: 100%;}
  /*------
  read
  ------*/
  #read{width: 100%;padding:0;}
  #read .ttl::after,
  #read .ttl::before{display: none;}

  /*------
  highlights
  ------*/
  main h2.outfit{font-size: 5vw;line-height: 1;}
  #highlights .ttl::before,
  #highlights .ttl::after,
  #products .ttl::before,
  #products .ttl::after,
  #specifications .ttl::before,
  #specifications .ttl::after{height: 10em;}

  /*------
  footer
  ------*/
  footer{padding-bottom: 150px;}
}

@media screen and (max-width: 500px){
  .menu_area .inner.flex{width: 100%; margin-left: 0%;}
.btn_hero .click::after{left: 8vw;}
}