@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);


 /* JS */
.fade-in {
  transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
}

/* リセット・共通 */

body { font-family: "Sawarabi Gothic" , -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;; }

li{
 list-style-type: none;
 }
body,p,img,div,ul,li,dl,dt,dd,h1,h2,h3,h4,h5{
 padding:0;
 margin:0;
 color:#fff;
 }
a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.textarea{
	max-width:1280px;
	margin:0 auto;
	padding: 20px;
	text-align:center;
}

@media screen and (min-width:600px) {
.visible-ts{
 display:none;
 }
}

@media screen and (max-width:599px) {
.visible-pc{
 display:none;
}
 }
 
@media screen and (max-width:599px) {
	h1,h2{
		font-size:1.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;
	}
}

h1,h2,h3,h4,h5{
margin:16px 0 8px 0;
}

h1,h2{
color:#79ffff;
}

a:link {
  color: #79ffff;
}
a:visited {
  color: #79ffff;
}
a:hover {
  color: #f60;
}
a:active {
  color: #f60;
}

 .btn {
    text-align: center;
    margin: 16px auto 24px auto;
    border-top: 1px solid #fff;
    border-bottom: 3px solid #fff;
    border-left: 1px solid #fff;
    border-right: 3px solid #fff;
    border-radius: 0.5em;
    width:50%;
    min-width:100px;
    background-color: rgba(45,117,167,0.5);
}
.btn a{
	display:block;
	padding: 8px 24px;
}
.btn:hover {
  background-color: rgba(0,0,0,0.3);
}

a img:hover {
	opacity: 0.7 ;
}

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

/* 固定header */
#header-fixed
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: rgba(45,117,167,0.5);
	width:100%;
	z-index:999;
}
 
 
#header { 
	height: 100%;
	max-width: 1260px;
	margin: 16px auto;
	overflow:hidden;
}
@media screen and (max-width:599px) {
#header { 
	margin-top: 8px;
	margin-bottom: 8px;
}
}

#nav{
	text-align:right;
	min-width: 225px;
	float:right;
	padding-top:6px;
}

#nav li{
	display:inline-block;
	padding:0 14px;
}
@media screen and (max-width:599px) {
#nav li{
	padding:0 8px;
}
}

.cc_logo{
display:inline-block;
}

.cc_logo img{
 height:30px;
}

dt{
color:#facc81;
}
dd{
margin-bottom:16px;
}

/* 背景 */

body{
	background-color:#fff;
	background-attachment:fixed;
	background-position:right center;
	background-repeat:no-repeat;
	  background-size: cover;
}

@media screen and (min-width:600px) {
body{
	background-image:url(main_pc.jpg);
	}
}

@media screen and (max-width:599px) {
	#keyvisual_sp{
    z-index                 : -1;
    background-color        : #fff;
    background-image        : url(main_sp.jpg);
    background-repeat       : no-repeat;
    background-size         : 100% auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
    background-image        : url(main_sp.jpg);
	}
}

#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;
}

.right_block{
width:48%;
float:right;
}
.left_block{
width:48%;
float:left;
}
@media screen and (max-width:869px) {
.right_block, .left_block{
width:100%;
clear:both;
}
}

#core p{
color:#696969;
}
#core .copy{
 text-align:center;
 color:#728cc7;
}
#core dt{
 color:#728cc7;
 }
#core dd{
 color:#696969
}

.moreout{
position: absolute;
bottom:10px;
width:100%
}
.more{
text-align:center;
}
.lead{
position: absolute;
top:180px;
left:25%;
}
.lead img{
max-height:650px;
}
@media screen and (max-width:1280px) {
.moreimg{
width:50px;
bottom:5px;
}
.lead{
left:10%;
}
.lead img{
max-height:550px;
}
}
@media screen and (max-width:1024px) {
.lead{
left:60%;
top:auto;
bottom:5%;
}
}
@media screen and (max-width:599px) {
.moreimg{
width:50px;
bottom:5px;
}
.lead{
top:45%;
left:25%;
}
.lead img{
width:60%;
}
}


/* コンテンツ */

#first,
#shopping{
	max-width:960px;
	margin:150px 20px 0 0;
	overflow:hidden;
background: #381f46;
background: -moz-linear-gradient(-45deg, #381f46 0%, #ad1283 51%, #a61c50 100%);
background: -webkit-linear-gradient(-45deg, #381f46 0%,#ad1283 51%,#a61c50 100%);
background: linear-gradient(135deg, #381f46 0%,#ad1283 51%,#a61c50 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#381f46', endColorstr='#a61c50',GradientType=1 );
}

#first{
　margin-top:0;
　	background-color: #000;
}

.ml20{
 float:left;
 width:20px;
 height:300px;
}

#summary,
#news{
	width:100%;
	overflow:hidden;
	background-color: rgba(45,11,59,0.7);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#first{
  text-align:center;
}

.jkimg{
 max-width:500px;
}
.tapimg{
 max-width:470px;
 display:inline-block;
}

.jk, .cross{
 text-align:center;
 }
 
 .copy{
    color: #facc81;
	font-size:16px;
	margin-bottom:16px;
}


/* footer */

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

footer{
 margin-top:150px;
background-color: rgba(45,117,167,0.5);
 text-align:right;
 padding-right:10%;
 }

.tow-box{
 display:inline-block;
 width:45%;
 text-align:center;
 }
 
 .tow-box img{
  min-width:100px;
 }


/* 共通 */

.tac{
text-align:center;
}
.mt40{
margin-top:40px;
}