@charset "utf-8";
/*  common
----------------------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Philosopher:ital@0;1&display=swap');

@import url("https://use.typekit.net/vrp5quf.css");
html,body{font-family:'Merriweather', serif; background:#fff1dc; -webkit-font-smoothing:antialiased;}

*{min-height: 0vw;}

html {
	font-size: 16px;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
  line-height:1.61;
  letter-spacing: 0.07em;
}


table{ font-size:inherit;font:100%;}



a{text-decoration: none;}
img{width: auto; max-width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}

strong{font-weight: bold;}
small{ font-size: 50%;}

/* navi
============================================================================================= */
#main-navi {
    position: fixed;
    width: 100%;
    line-height: 1;
    z-index: 999;
    border-solid 1px #fff;
    background:rgba(255,239,212,1);
    color: #685348;
    font-family: 'Philosopher', sans-serif;
    font-weight: 700;
    font-size:clamp(11px,1.5vw,22px);

}

.navi-inner { width: 100%; max-width: 1500px; margin: 0 auto;}



#main-navi a,
#main-navi { text-decoration: none;}
#main-navi .navi-inner { position: relative;}

#main-navi .navi-order { font-size: calc(20 + 10 * (100vw - 600px) / 900); }

#global-nav ul{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
#global-nav ul li{position: relative;}
#global-nav ul li a{width: 90%; padding: 20px 5%; display:block; text-align: center; color: #685348; font-weight: 800; top:0;}


.navi-top{width: calc(9.5% - 1px); margin:0 1px 0 0;}
.navi-news{width: calc(9.5% - 1px); margin:0 1px 0 0;}
.navi-about{width: calc(10.5% - 2px); margin:0 1px 0 1px;}
.navi-characters{width: calc(16.5% - 2px); margin:0 1px 0 1px;}
.navi-system{width: calc(11.5% - 2px); margin:0 1px 0 1px;}
.navi-products{width: calc(12.5% - 2px); margin:0 1px 0 1px;}
.navi-gallery{width: calc(11.5% - 2px); margin:0 1px 0 1px;}

.navi-order{width: calc(18.5% - 1px);  margin:0 0 0 1px;}
#global-nav ul li.navi-order a{ background:#ff6732; color:#fff; font-weight: 600;}

#global-nav ul li a:hover{background:#308791; color: #fff;}

#index .navi-top a{background:#308791; color: #fff;}
#news .navi-news a{background:#308791; color: #fff;}
#about .navi-about a{background:#308791; color: #fff;}
#charactes .navi-characters a{background:#308791; color: #fff;}
#system .navi-system a{background:#308791; color: #fff;}
#products .navi-products a{background:#308791; color: #fff;}
#gallery .navi-gallery a{background:#308791; color: #fff;}


#nav-toggle { display: none;}
#nav-toggle div { position: relative;}
#nav-toggle span { display: block; position: absolute; height: 2px; width: 50%; background: #fff; left: 0; right:0; margin: 0 auto; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;}


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

    #main-navi { top: 0; position: fixed; margin-top: 0; }
	#nav-toggle { display: block; position: absolute; right: 0; top: 0; width: 70px; height: 70px; cursor: pointer; z-index: 101; background: #308791;}
	#nav-toggle span:nth-child(1) { top: 26px;}
	#nav-toggle span:nth-child(2) { top: 33px; }
	#nav-toggle span:nth-child(3) { top: 40px;}
	.open #nav-toggle span:nth-child(1) { width: 100%; top: 25px; right:-20px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
	.open #nav-toggle span:nth-child(2) { width: 0; }
	.open #nav-toggle span:nth-child(3) { width: 100%; top: 25px; right:-20px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg);}
	.open #global-nav { display:block; height: 100vh;}
	
	.navi-top{width: calc(12% - 1px); margin:0 1px 0 0;}
	#global-nav ul li.navi-order a{ background:#ff6732; color:#fff; border-radius: 30px; margin-top: 15%;}

	.navi-top,
	.navi-news,
	.navi-about,
	.navi-characters,
	.navi-system,
	.navi-products,
	.navi-gallery,
	.navi-order{width:100%; width:600px; margin: 1px auto;}

	#main-navi { font-size: calc(28px + 8 * (100vw - 500px) / 900);}
	#global-nav ul{width: 60%; margin: 0 auto; padding-top: 5%;}
	#global-nav ul li a{width: 90%; padding: 20px 5%; display:block; text-align: center; color: #fff; font-weight: 800;}
	#global-nav ul li a:hover{background:#fff; color: #308791;}

    #global-nav { display:none; padding: 10px 0; background: #308791; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; overflow-x:scroll; }
    
    

#index .navi-top a{background:#fff; color: #308791;}
#news .navi-news a{background:#fff; color: #308791;}
#about .navi-about a{background:#fff; color: #308791;}
#charactes .navi-characters a{background:#fff; color: #308791;}
#system .navi-system a{background:#fff; color: #308791;}
#products .navi-products a{background:#fff; color: #308791;}
#gallery .navi-gallery a{background:#fff; color: #308791;}


}



/*  NEW-icon
----------------------------------------------------------------------------------------------------------- */
.new-icon-common-box{position: relative;}
.new-icon-common{position: absolute; top:0; }
.new-icon-common-w-typle1{width: 100%; max-width: 230px; top:-15px; left:0; padding-top:25%; font-size: clamp(18px,1.6vw,24px);}
.new-icon-common-w-typle2{width: 100%; max-width: 230px; top:0px; left:-10px; padding-top:25%; font-size: clamp(18px,1.6vw,24px);}

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

}





@keyframes pulseMotion {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    background-color: rgba(255, 103, 50, 0.4)
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5, 3.5);
    background-color: rgba(255, 103, 50, 0)
  }
}



.new-icon {
  display: block;
  position: absolute;
  top:10px;
  width: 10px;
  height: 10px;
  margin: 0 20px;
  background-color: #ff6732;
  border-radius: 50%;
  transition: background-color cubic-bezier(255, 0.61, 0.355, 1) .4s;
  cursor: pointer;
}

.new-icon.:focus {
  outline: none;
}

.new-icon:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: opacity linear 0.4s;
  content: '';
  animation: pulseMotion 1.4s linear infinite;
}



/*  zoom
----------------------------------------------------------------------------------------------------------- */

.zoom-box{position: relative; overflow: hidden;}
.common-zoom-icon{width: 25%; max-width: 50px; position: absolute; bottom:3px; right:5px;}

.zoom-box img{transition: transform .6s ease;}
.zoom-box:hover img{transform: scale(1.1);}

/*  出しわけ
----------------------------------------------------------------------------------------------------------- */
.pc-only{display:block;}
.sp-only{display:none;}

@media screen and (max-width: 768px) {
.pc-only{display:none;}
.sp-only{display:block;}
}



/*  言語出し分け
----------------------------------------------------------------------------------------------------------- */
.language-list {display: flex;flex-wrap: wrap;justify-content: center;margin: 20px auto ;max-width: 900px;}
.language-list li {margin-bottom: 0.5%;width: 16%;margin-right: 0.5%;}
.language-list li a {text-align: center;display: block;border: 1px solid #b3b3b3;box-sizing: border-box;padding: 8px;font-size: 13px;color: #b3b3b3;}

@media screen and (max-width: 768px) {
   .language-list {flex-wrap: wrap;}
   .language-list li{width: 41%;margin-bottom: 1%;}
   .language-list li a {font-size: 3vw;}
}


.base-pf-box{width: 95%; max-width: 650px; margin: 0 auto;}
.base-pf-box li.ps{width: 49%; padding: 2%;}
.base-pf-box li.ns{width: 20%; padding: 2%;}
.base-pf-box li.stm{width: 20%; padding: 2%;}


@media screen and (max-width: 768px) {
.base-pf-box{width: 70%; max-width: 650px; margin: 5% auto 0 auto; flex-wrap: wrap;}
.base-pf-box li.ps{width: 96%; padding: 2%;}
.base-pf-box li.ns{width: 46%; padding: 2%;}
.base-pf-box li.stm{width: 46%; padding: 2%;}
}


/*  footer
----------------------------------------------------------------------------------------------------------- */
.ss-pf-text{width:95%; text-align: center; margin: 0 auto 5% auto; color: #fff;  font-size: clamp(12px,3vw,14px);}


.base-footer-txt-link{width: 100%; max-width: 300px; margin: 0 auto; text-align: center; padding-bottom: 20px; justify-content: center; }
.base-footer-txt-link li{padding: 8px;}
.base-footer-sns-btn{width: 100%; max-width: 190px; margin: 0 auto;}
.base-footer-sns-btn li{padding: 8px;}

/*.base-footer-txt-link li:first-child{border-right: solid 1px #fff;}
.base-footer-txt-link li:last-child{border-left: solid 1px #fff;}*/


.base-footer-sns-btn img{width: 100%; max-width: 45px;}
.base-footer-box{padding: 48px 0 48px 0; background-color: rgb(12, 12, 12);background-size: cover;}

.base-footer-txt-link a:link { color: #fff; text-decoration: underline;}
.base-footer-txt-link a:visited { color: #fff; }
.base-footer-txt-link a:hover { color: #fff;  text-decoration: none;}
.base-footer-txt-link a:active { color: #fff; }

.base-ratinglogo-box {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.base-ratinglogo-box .br{width: 70%; padding: 12% 2% 5% 10%;}
.base-ratinglogo-box .rt{width: 100%; padding: 0 0 2% 0;}



.base-ratinglogo-box img{}


@media screen and (max-width: 320px) {
	  .base-footer-txt-link{display: block;}
	  .base-footer-txt-link li{padding: 4px;}
	  .base-footer-sns-btn{max-width: 190px; padding-top: 16px;}
	  .base-footer-sns-btn li{padding: 1%;}
}

footer{position: relative;z-index: 10;}


/*  footer -copyright
----------------------------------------------------------------------------------------------------------- */
.base-copyright{width: 95%; max-width: 1200px; margin: 0 auto; font-size: 12px; line-height:1.4; padding: 16px 0; text-align: center;}
.base-copyright span img{max-height: 16px;}
.base-copyright-win-txt{}
.base-copyright-ss-txt{padding-bottom: 16px;}
.base-copyright-txt{padding-top: 16px;}
.base-copyright-pf-txt{padding-bottom: 0.2em;max-width:1050px ;margin: 0 auto;}
.base-copyright img[src$=".gif"], .base-copyright img[src$=".png"] {
mage-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (非標準の名前) */
image-rendering: pixelated;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (非標準プロパティ) */
}


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


.base-footer-box-link{width:90%; max-width:400px; flex-wrap: wrap; margin: 0 auto 5% auto;}
.base-footer-box-link li{width:50%; text-align: center; padding: 2% 0; font-size: clamp(12px,3vw,14px); }


}

.base-footer-sns-box{ width:50%; margin: 0 auto 2% auto; max-width:200px; }

.base-footer-sns-box li{width:31%; padding:1%;}

.base-copyright{width:95%; text-align: center; padding: 5% 0; margin: 0 auto; color: #fff; font-size: clamp(12px,3vw,14px);}
.products-info-ps{width: 94%; max-width: 1000px; margin: 5% auto; border: solid 1px #ffefd4; padding: 3%; color: #ffefd4; font-size: clamp(18px,2.5vw,20px); text-align: left;  transform: rotate(0.05deg); font-weight: 400;}

@media screen and (max-width: 768px) {
.products-info-ps{width: 90%; font-size: clamp(14px,2.5vw,16px);}
}


/*  ページTOP
----------------------------------------------------------------------------------------------------------- */
.page-top-btn{width: 100%; position: relative;}
.page-top-btn a{display:block; width: 25%; max-width: 200px; background: #ff6732; padding: 15px 0; position: absolute; right:0; bottom: 0; border-radius: 20px 20px 0 0; text-align: center; color: #fff; font-size: clamp(12px,3vw,14px); font-weight: 500;}

.page-top-btn a:visited { color: #fff; }
.page-top-btn a:hover { background: #308791; text-decoration: none; }
.page-top-btn a:active { color: #fff; }



/*  動画埋め込み
----------------------------------------------------------------------------------------------------------- */
.movie_emb_box{width: 100%; max-width: 1000px; margin: 10px auto 0 auto;}
.movie_emb{ position: relative; width: 100%; padding-top: 56.25%;}
.movie_emb iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.movie-btn{position: relative;}
.movie-thumbnail{}
.movie-thumbnail-btn{position: absolute; top:0;}
.movie-thumbnail-btn:hover{opacity:0.65;}

/*  free-btn
----------------------------------------------------------------------------------------------------------- */

.free-btn{width: 50%; max-width: 300px; padding: 0 0 2% 0; margin:0 auto 0; }
.free-btn a{color: #fff1db; width: 100%; background: #308791; display:block;  border-radius: 50px; font-weight: 600; padding: 4% 0;  font-size: clamp(20px,2.5vw,25px); box-shadow:rgba(190, 164, 126, 0.309804) 0px 0px 6px 3px;}
.free-btn a:hover{ color: #fef0da; background:#ff6732;}
.free-btn span{display:inline-block; transform:rotate(90deg); margin-right: 10px; margin-left:-15px;}


/*  POPUP
----------------------------------------------------------------------------------------------------------- */
.modaal-container{background:transparent; box-shadow:none!important;}
.modaal-close{top: -10px; right: 0; width: 100px; height: 100px; border :solid 1px #000;}
.modaal-gallery-control:focus,.modaal-gallery-control:hover{outline:0;background:transparent;}
.modaal-close:hover:after,.modaal-close:hover:before{background:#fff;}
.modaal-close:focus,.modaal-close:hover{outline:0;background:transparent;}
.modaal-close:after, .modaal-close:before{
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    left: 40px;
    width: 2px;
    height: 100px;
    border-radius: 4px;
    background: #fff;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}








.popupbox-pr{width: 100%; max-width: 700px; margin: 0 auto;}

.popupbox-pr .free-btn{width: 48%; max-width: 700px; padding: 0 0 2% 0; margin:0 1%; text-align: center;}
.popupbox-pr .free-btn a{ color: #fff1db; width: 100%; background: #ffffff; display:block;  border-radius: 50px; font-weight: 600; padding: 4% 5%;  font-size: clamp(12px,1.8vw,18px); box-shadow:rgba(190, 164, 126, 0.309804) 0px 0px 6px 0; line-height:1.61; color:#308791;}
.popupbox-pr .free-btn a:hover{ color: #fef0da; background:#ff6732;}



.popupbox-pr .free-btn2{width: 100%; max-width: 700px; padding: 0 0 2% 0; margin:0 auto 0; text-align: center; padding:1%;}
.popupbox-pr .free-btn2 a{ color: #fff1db; width: 100%; background: #ffffff; display:block;  border-radius: 50px; font-weight: 600; padding: 4% 5%;  font-size: clamp(12px,1.8vw,18px); box-shadow:rgba(190, 164, 126, 0.309804) 0px 0px 6px 0; line-height:1.61; color:#308791;}
.popupbox-pr .free-btn2 a:hover{ color: #fef0da; background:#ff6732;}


.popupbox-pr h2{font-family: 'M PLUS Rounded 1c', 'Noto Sans JP';
    font-weight: 700;
    font-size: clamp(30px,5.5vw,40px);
    color: #fff;
    text-align: center;
    width: 95%;
    margin: 0 auto 3% auto;
    padding-top: 10%;
    text-shadow: 1px 1px 3px #308791;
}
.popupbox-pr .banner-box-pr {margin: 5% auto 0 auto;}
.popupbox-pr .banner-box-pr li{width: 49%; padding:0.5%;}

.popupbox-pr .banner-box-pr2{width: 98%; margin: 5% auto 0 auto; padding-bottom: 5%;}


@media screen and (max-width: 768px) {
.popupbox-pr .free-btn{width: 100%; padding: 0 0 2% 0; margin:0 auto 0; text-align: center; padding:1%;}
.popupbox-pr .banner-box-pr, .popupbox-pr .banner-box-pr2{width: 80%;}

.popupbox-pr .free-btn a, .popupbox-pr .free-btn2 a{  font-size: clamp(12px,3.5vw,20px);}



}