@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* CSS Document */


body{
	margin:0;
	padding:0;
	color:#2f2f2f;
	font-size:62.5%;
	font-family: 'Open Sans', sans-serif,'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}

a{text-decoration: none;}
a:link { color: #5ebbb6; }
a:visited { color: #5ebbb6; }
a:hover { color: #5ebbb6; text-decoration:underline;}
a:active { color: #5ebbb6; }

dl,
dt,
dd{
	margin:0;
	padding:0;
}
dt{
	font-weight:500;
}
dd{
	margin-bottom:16px;
}

p,
dt,
dd{
	font-size:0.85rem;
}

img{
	max-width:100%;
	vertical-align: bottom;
}

head,
main,
footer{
	width:100%;
}

h1,
h2,
footer,
#link dl,
.tac{
	text-align:center;
}

h1,h2{
	font-size:2rem;
    font-family: "Sawarabi Gothic","メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; 
}
.big{
	font-size:3.3rem;
}
.mini{
	font-size:1rem;
}
h1{
	color:#fff;
}
.sp:after,
.brsp:after{
	content:"　";
}
h3{
	font-size:1.5rem;
	margin-top:48px;
}
.middle{
	font-size:1rem;
	margin-bottom:30px;
}
@media screen and (max-width:599px) {
	h1,h2{
		font-size:1.5rem;
	}
	.big{
		font-size:2.5rem;
	}
	.sp:after{
		content:" ";
	}
	.brsp:after{
  	  content: "\A";
  	  white-space: pre;
	}
}
@media screen and (max-width:479px) {
	h1{
		font-size:1rem;
	}
	h2,h3{
		font-size:1.3rem;
	}
	.big{
		font-size:2rem;
	}
}


#keyvisual{
  position: relative;
  /* width: 100vw; */
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: none;
}
.moreout{
position: absolute;
bottom:10px;
width:100%

}
.more{
text-align:center;
}
.lead{
position: absolute;
bottom:140px;
right:50px;
}
@media screen and (max-width:1280px) {
.moreimg{
width:50px;
bottom:5px;
}
.lead{
bottom:100px;
max-width:650px;
}
}
@media screen and (max-width:599px) {
.moreimg{
width:50px;
bottom:5px;
}
.lead{
bottom:65px;
right:auto;
}
}


#info,
#gift,
#first,
#comment,
#shop,
#link,
#new{
	width:100%;
	margin:0;
	overflow:hidden;
}

header,
footer{
	background-color:#000;
}

.textarea{
	max-width:1000px;
	margin:0 auto;
	padding: 0 20px 20px 20px;
}

.lefttext{
	margin:0;
	padding:0;
	width:50%;
	display:inline-block;
}

.righttext{
	text-align:center;
	margin:0;
	padding:0;
	width:50%;
	float:right;
}

@media screen and (max-width:599px) {
	.lefttext{
		width:100%;
		display:block;
	}
	.righttext{
		width:100%;
		float:none;
	}
	.lefttext,
	.righttext{
		max-width:100%;
	}
}

.movie iframe{
	margin-top:26.560px;
	width:100%;
	height:300px;
}
.tap{
	margin-top:26.560px;
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

@media screen and (max-width:599px) {
	.movie iframe,
	.tap{
		margin-top:0;
	}
	#keyvisualsp{
    z-index                 : -1;
    background-color        : #fff;
    background-image        : url(c92jksp.jpg);
    background-repeat       : no-repeat;
    background-size         : 100% auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
	}
}
body{
	background-color:#fff;
	background-attachment:fixed;
	background-position:top center;
	background-repeat:no-repeat;
	  background-size: cover;
}
@media screen and (min-width:600px) {
body{
	background-image:url(c92jk.jpg);
	}
	}
#info{
	background-color:#fff;
	overflow:hidden;
}

#cdbg{
	background-color: rgba(250,250,250,0.85);
	overflow:hidden;
}

@media screen and (min-width:600px) {
	#cdbg{
		background-color:none;
	}
}
	

#solebg{
	margin:0;
	padding:0;
	background: radial-gradient(#5db5c8, #3bb5e4);
	background-color: rgba(0,0,0,0.45);
	width:50%;
	display:inline-block;
}

#lunabg{
	margin:0;
	padding:0;
	width:50%;
	float:right;
}

#sole,
#luna{
	width:90%;
	max-width:410px;
}

#sole{
	margin:0 0 0 auto;
	padding:0 20px;
	color:#fff;
}
#sole h3{
	border-bottom:#fff 1px solid;
}

#luna{
	margin-left:0;
	padding:0 20px;
}
#luna h3{
	border-bottom:#2f2f2f 1px solid;
}

@media screen and (max-width:599px) {
	#solebg{
		width:100%;
		display:block;
	}
	#lunabg{
		width:100%;
		float:none;
	}
	#sole,
	#luna{
		max-width:100%;
	}
}

#first{
  background: radial-gradient(#2455a6, #1f7cbb);
}

#comment,
#new{
	background-color:#C1D5C8;
}

#shop{
	background-color:#fff;
}

#gift{
	background-color:#000;
	color:#fff;
}

.jk{
	padding-top:20px;
	text-align:center;
}

.jk img{
	max-width:250px;
	display:inline-block;
}

.truck{
	padding-bottom:20px;
}

#link{
	background-color:#fff;
}

#comment,
#new{
	background-color: rgba(250,250,250,0.85);
}

#shop{
	background-color: #fff;
}

small{
	color:#fff;
	font-size:0.8rem;
}

footer .textarea{
	padding-top:20px;
}

.breadcrumbs{
 background-color:#fff;
 text-align:right;
 padding-right:10%;
 }
 
 .btn {
    text-align: center;
    padding: 8px 24px;
    margin-bottom: 8px;
    border-top: 1px solid #00a0e9;
    border-bottom: 3px solid #00a0e9;
    border-left: 1px solid #00a0e9;
    border-right: 3px solid #00a0e9;
    border-radius: 0.5em;
    background-color: #fff;
}
.btn a{
	display:block;
	}
 
 /* JS */
.fade-in {
  transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
}