@charset "utf-8";
/*----*/
:root{
	--font-size:15px;
	--max-width:1500px;
	--color: #3b3b3b;
	--color2:#a1a1a1;
	--color-a: #f9905c;
	--background: #fff;
	--gradation:linear-gradient(#ffbcb4,#ffdac3);
	--gradation-right:linear-gradient(to right,#ffd79c,hsl(0, 100%, 83%));
	--gradation-right-hover:linear-gradient(to right,#ffa6a6,#ffd79c);
}

@media screen and (max-width: 768px){
	:root{
    --font-size:12px;
  }
}

/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}

.font-nitalago{font-family: nitalago-ruika, sans-serif;
  font-style: normal;
  font-weight: 100;}
/*-----------
body
-----------*/
body{color: var(--color);background: var(--background); font-size: var(--font-size); width: 100%; line-height: 1.8; overflow-x: hidden; font-family: "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei"; /* overflow: hidden; */}
img{height: auto;}

.background { position:absolute; display:block;top: 0;left: 0;z-index: 0;height: auto !important; width: auto!important;}

.bg1{position: fixed; background: rgb(255,190,94);
  background: linear-gradient(0deg, rgba(255,190,94,1) 0%, rgba(255,99,94,1) 100%); width: 100%; height: 100vh;}

@media screen and (max-width: 800px){
	body{width: 100%;}
	img{width: 100%;}
}

@media screen and (max-width: 768px){
	.background {height: auto !important; width: 100%!important;}
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}


/*orangerouge commne*/
h3{font-size: 2.5em;}
h3 span{font-weight: 300; font-size: .5em; margin-left: .5em;}


.window{width: .8em; height: .8em; border: 1px solid var(--color); position: relative;}
.window::after{content: ""; width: .8em; height: .8em; position: absolute; border: 1px solid var(--color); border-width: 0 1px 1px 0; top: 1px; left: 1px;}


.btn{display: block; background: #f9905c;color: #fff; border-radius: 200px; padding: .8em 2em .8em 1em; border: 1px solid #f9905c; text-align: center; position: relative; width: 100%; max-width: 100%;margin: 2em auto 0; } 
.btn::after{content: ""; display: block; width: .5em; height: .5em; position: absolute; top: calc(50% - .25em); right: 1.5em; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg);transition: all 0.2s linear;}
.btn.back::after{content: ""; display: block; width: .5em; height: .5em; position: absolute; top: calc(50% - .25em); left:1.5em; right: auto; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(-135deg);transition: all 0.2s linear;}

.btn:hover{background:#f9905c ; color: #FFF;text-decoration: none;}
.btn:hover::after{right: 1em;transition: all 0.2s linear; border-color: #FFF;}
.btn.back:hover::after{left: 1em;transition: all 0.2s linear; border-color: #FFF;}

.btn.finish{background: #a5a5a5; border-color:#a5a5a5;pointer-events: none;cursor: default;}
.btn.finish::after{display: none;}
/*-----------
Header
-----------*/
header{z-index: 20; position: fixed; right: 0; top: 0; height: 100vh; width: 80px; padding-top: 1em;}
header h1{width: 80%; margin: 0 auto; line-height: 0;}
header h1 a{display: block;}

header .language,
header .share {width: 50%;margin: 0 auto;}
header .language li,
header .share li{padding: 0; line-height: 0; margin-top: .5em;}
header .language .lang_sub{display: none;border: 3px solid #fff; border-radius: 1000px; /* height: 40px; */justify-content: center;align-items: center; }
header .share .share_sub{display: none;}
header .language .lang_sub a{color: #fff;}
header .language:hover,
header .share:hover{cursor: pointer;}
header .language:hover .lang_sub,
header .share:hover .share_sub{display: block;}
header .language .lang_sub:hover,
header .share .share_sub:hover{opacity: .8;}
header .language .lang_sub.active {background: #fff;}
header .language .lang_sub.active img{filter: invert(.5);}
header .language .ttl_sp,
header .share .ttl_sp {display: none; }

header .header_btn{display: none;}


/*-----------
nav
-----------*/
nav.flex{position: fixed; width: 54%; z-index: 20; padding: 0 ;justify-content:center; align-items: center; min-height: 100vh; height: 100vh; overflow: auto;scrollbar-color: #ffffff7a #ffffff00; scrollbar-width: thin;}

nav ul.flex{justify-content: center; width: 90%;margin: 0 auto; align-items: center;align-content: center;}
nav li{width: calc((100% / 4) - 40px); /* height: 132px; */ display: block; border-radius: 50%;margin:20px;background-color: #fff; line-height: 0; background-image: url(../images/nav/nav_bg.png);position: relative; }
nav li a{display: block;}
nav li:nth-child(5){margin-left: 3%;}
nav li.cs:after{content: "";display: block; position: absolute; justify-items: center; align-items: center; text-align: center;}
nav li .nmb{position: absolute; width: 30%;  border-radius: 100px; top: -.3em; left: -0.25em;}
nav li.img{overflow: hidden;}
nav .nav_btn{display: none;}
/*-----------
article
-----------*/
article{width: calc(46% - 80px); margin-left: /* calc(100% - 750px) */  54%; background: #fff; z-index: 20; position: relative;padding: 0 50px;}
/*-----------
top
-----------*/
#top h1{max-width: 741px; margin: 0 auto; width: 80%;}
#top h2{text-align: center;font-size: 1.3em;}
#top p{text-align: center; margin: 1em auto 0;}


/*-----------
section
-----------*/
/*common*/
section{border: 1px solid #ff9900; border-radius: 5em; padding: 2em 2em;margin: 3em auto 0;}
section h2.flex{align-items: center;}
section h2 .ttl_icon{width: 15%;}
section h2 span{margin-left: 1em; width: calc(85% - 1em);line-height: 1.3;}
section .text_are{margin: 1em 0 0;}
section .text_are img{border-radius: 10px;}
section .text_are h3{font-size: 1.2em; margin-top: 1em;}
section .text_are h3.ttl{font-size: 1.2em; margin-top: 2em; border: 2px solid #f9905c; border-width: 0 0 1px 10px; padding: 0 0 0 .5em; margin-bottom: .5em;}
section .text_are h4{font-size: 1.1em; margin-top: 1.5em; color: #f9905c;}
section p span{font-size: .8em;}
section p span.large{font-size: 1em; font-weight: bold;}
section ul {padding-left: 1em;}
section ul li{list-style-type: disc;}
section ul li span{font-size: .9em; /* color: #5b5b5b; */}
section ul li h4{color: #3b3b3b;}
section ul.set li{font-size: .9em;}

section .sales{gap: 20px;padding: 0;flex-direction: row;}
section .sales li{list-style: none; width: calc(50% - 10px);}
section .sales li img{width: 100%;}
section .sales li a{color: #3b3b3b;}
section .sales li a:hover{text-decoration: none;}
section .sales_panel{padding: 0; margin-top: 2em;}
section .sales_panel li{list-style: none;}

section .caution{font-size: .8em;}
section .caution li{position: relative;/*  padding-left: 1em;  */text-indent: -1em; list-style: none; }
section .caution li::before{content: "※"; margin-right: .25em;}
section .caution.en li::before{content: "*"; margin-right: .25em;}
section .nmb{ padding-left: 1.5em;}
section .nmb li{list-style:decimal;}

section .caution_text{color: #7b7b7b; }

.nendori{ gap: 20px; padding-left: 0; margin-top: 1em;}
.nendori li{list-style: none; width: calc(50% - 10px);}


.accordion {padding: 0 0 1em; margin-top: 1em;}
.accordion summary{position: relative;display: block; /* border:1px solid var(--color);  */border-width: 0 0 1px 0; padding: 1em 1em 0 0; }
.accordion summary::-webkit-details-marker {color: transparent;text-indent: 0;}
.accordion summary{position: relative;}
.accordion summary::after{content: "＋"; position: absolute; right: 0; top: calc(50% - 0);/}
.accordion summary:hover{cursor: pointer;}
.accordion summary br{display: none;}
details.accordion[open] summary::after{content: "―";}
.accordion summary + ul{margin-top: .5em; padding: 0 0 0 1em;}

/*----------- 
aside
-----------*/
aside{width: 90%; margin: 2em auto 0;}

/*----------- 
footer
-----------*/
footer{border: none; padding: 2em 20px;}
footer p{text-align: center; font-size: .8em;}


/*-----------
scroll
-----------*/
.window-scroll,.window-open{transform: translateY(100px); opacity: 0;}
.window-open.up,.window-scroll.up{animation: up01 1s ease forwards; transform: translateY(0); opacity: 1;}

@keyframes up01{
	0%{transform: translateY(100px); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}


@media screen and (max-width: 1500px){
  /*-----------
  Header
  -----------*/
  header{ width: 50px; }

  /*-----------
  nav
  -----------*/
  nav.flex{width: 50%; }
  nav li{width: calc((100% / 3) - 40px); margin: 10px 20px;}
  nav li:nth-child(6){margin-left: 20px;}
  nav li.navbox.img{order: 1;}
  /*-----------
  article
  -----------*/
  article{padding:25px 25px 0;width: calc(50% - 50px);margin-left: 50%;}

  /*-----------
  section
  -----------*/
  section h2 span{margin-left: .5em;width: calc(85% - .5em);}
}

@media screen and (max-width: 900px){
  body.active{
    overflow: hidden;
  }
  /*-----------
  Header
  -----------*/
  header{z-index: 200; position: fixed; right: auto; left: 0; top: 0; height: auto; width: 100%; padding: 5px 2.5% 0; display: flex; justify-content: space-between;}

  header .header_btn {position: relative; display: block; width: 50px; height: 50px;margin-right: 1em; z-index: 1000;}
  header .header_btn:hover{cursor: pointer;}
  header .header_btn span{position: absolute; background: #f9905c; width: 80%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
  header .header_btn span::after,
  header .header_btn span::before{content: ""; position: absolute; right: 0; height: 2px; background: #f9905c; display: block;}
  header .header_btn span::after{width: 100%; top: -15px;-webkit-transition: .2s ease;transition: .2s ease;}
  header .header_btn span::before{width: 100%; bottom: -15px;-webkit-transition: .2s ease;transition: .2s ease;}
  header .header_btn.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
  header .header_btn.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
  header .header_btn.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}


  header .header_btn:hover{cursor: pointer;}

  header h1{width: 50px; margin: 0 0 0 5px;}
  header .wrap{display: none;}
  header .wrap.active{display: flex; position: absolute; left: 0; top: 0; background: #000000a5; width: 100%;height: 100vh; flex-direction: column; align-items: center; justify-content: center;}


  header .language,
  header .share {width: 100%;}
  header .language{margin-top: -70px; margin-bottom: 3em;}
  header .language ul,
  header .share ul{display: flex;align-items: flex-start;width: 100%;justify-content: center;flex-wrap: wrap;}
  header .language img,
  header .share img{align-items: flex-start;}
  header .language .ttl,
  header .share .ttl {display: none;}
  header .language .ttl_sp,
  header .share .ttl_sp {display: block; width: 100%; color: #fff; font-weight: 500; font-size: 2em; text-align: center; line-height: 1;}
  header .language .lang_sub,
  header .share .share_sub{display: block;width: 50px; margin: 1em .5em 0;}
  
  /*-----------
  nav
  -----------*/
  nav.flex{width: 100%; height: auto; min-height: auto; z-index: 500; }
  nav.flex.active{min-height: 100%; align-items: center;}
  nav .nav_btn{display: block;width: 100%; height: 70px; background: #ffffff; position: fixed; bottom: 0; left: 0;z-index: 500;}
  nav .nav_btn:hover{cursor: pointer;}
  nav .nav_btn .inner.flex{justify-content: center;align-items: center; height: 100%; font-size: 4vw; color: #f9905c;font-weight: 600;border: 1px solid #f9905c48;border-width: 1px 0 0 0;line-height: 1;}
  nav ul.flex{width: 100%; min-height: calc(100vh - 50px); margin: 0 auto;display: none; background: #00000041;position: absolute; top:0; left: 0; width: 100%;  padding: 1em 1em 80px 1em;z-index: 0;}
  nav ul.flex.active{display: flex; z-index: 500;}
  nav ul li{width: calc((100% / 4) - 40px);}

  /*-----------
  article
  -----------*/
  article{/* padding: 0 25px; */width: 95%;margin: 0 auto;}

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

  

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

  /*-----------
  top
  -----------*/
  #top h1{width: 100%;}

  /*SP-on*/
  .pc{display: none;}
  .sp{display: block;}



}

@media screen and (max-width: 650px){
  /*-----------
  nav
  -----------*/
  nav ul li{width: calc((100% / 3) - 20px); margin: .5em 10px;}
  nav li.navbox.img{order: .5;margin-left: 10px;}
  nav li:nth-child(5){margin-left: 10px;}


  .nendori{ gap: 20px; padding-left: 0; margin-top: 1em;}
  .nendori li{list-style: none; width: 100%;}


}