@charset "UTF-8";
.siteheader { top: 0; }
.siteheader nav a[href*="update"] i { opacity: 1; width: 100%; }

#contents { padding-bottom: 190px; }


#contents header{border-top: 1px solid #fff;}
#contents header {margin-bottom: 210px; }

#contents header::before{ content: ''; width: 900px; position: absolute; right: 50%; top: 120px; z-index: -1; height: 300px; overflow: hidden; margin-right: 90px;}
#contents header::before{background: linear-gradient(-106deg, #fffcbc 0%, #fffcbc 29%, #8cd3f0 100%); }

#contents header h1{-webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; font-size: 117px; color: transparent; letter-spacing: 0.05em; margin: 142px 0 -7px; line-height: 1;}
.ie11 #contents header h1{color: #0961ba;}
#contents header p{font-size: 19px; line-height: 1; margin:-8px 0 0; letter-spacing: 0.01em;}

#contents .update{font-size:19px; line-height: 19px; padding: 5px 0 2px 0;  background:#0961ba; color: #fff; border-radius:20px; width:280px ; margin: 20px auto;}
#contents section{width: 1200px; background-color: rgba(255,255,255,0.8); padding: 5px;}
#contents section .inner{ padding: 45px; border: 1px solid #0961ba;}
#contents section .inner a{ color:#d8245b ; text-decoration: underline;}
#contents section .inner .title{margin-bottom: 30px;}
#contents section .inner article + article{margin-top:60px;}
#contents section .inner p{ color:#0961ba; font-size:18px; line-height: 34px; width: 980px; margin: 0 auto; text-align: center; }
#contents section .inner p + p{margin-top: 20px; }
#contents section .inner p.small{ font-size:16px; line-height: 28px;}
#contents section .inner strong{ color:#d8245b ; }

#contents section .inner h3{font-size: 30px; line-height: 30px; padding: 10px 0 5px 0;  background:#0961ba ; color: #fff; border-radius:30px; margin:0 auto 30px;}
#contents section .inner h4{font-size:30px; line-height: 40px; color: #d8245b; margin: 70px auto 20px; font-weight: bold;}
#contents section .inner .box{border: 2px solid #0961ba; padding: 20px; margin: 30px 0;}
#contents section .inner ul{ padding-top: 10px;}
#contents section .inner ul li{ display: inline-block; margin-top: 18px;}
#contents section .inner ul.img li{width:350px; margin: 5px; position: relative;}
#contents section .inner ul.img li p{width:350px;}
#contents section .inner ul.img li a{width:350px;}

#contents section .inner ul.img li a::after {
    content: '';
    background: url(../img/icon_plus.gif) no-repeat right bottom;
    width: 350px;
    height: 196px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
	transition: 0.4s;}

#contents section .inner ul a.imgmodal {display: inherit; font-size: 0; line-height: 1; transition: 0.5s; }
#contents section .inner ul a.imgmodal:hover{filter:brightness(1.2); transition: 1s;}

#contents section .inner a.btn { width: 295px; height: 73px; background: #d8245b; display: block; margin: 0 auto; color: #fff; font-size: 20px; border: 4px solid #d8245b; padding: 15px 0 0; position: relative; transition: 0.3s; transform: rotate(0.05deg); text-decoration: none; }
#contents section .inner a.btn::after { content: ''; width: calc( 100% - 0px); height: calc( 100% - 0px); border: 1px solid #ffa4a4; position: absolute; left: 0; top: 0; transition: 0.4s; }
#contents section .inner a.btn:hover { background: #fffba7; border-color: #d8245b; color: #d8245b; }

#contents section .inner a.btn2 { width: 200px; height:55px; display: block; margin: 0 auto; color: #0961ba; font-size: 20px; border: 4px solid #0961ba; padding: 13px 0 0; position: relative; transition: 0.3s; transform: rotate(0.05deg); text-decoration: none; }
#contents section .inner a.btn2::after { content: ''; width: calc( 100% - 0px); height: calc( 100% - 0px); position: absolute; left: 0; top: 0; transition: 0.4s; }
#contents section .inner a.btn2:hover { background: #0961ba; border-color: #0961ba; color: #fff; }


#contents section .inner ul.note { text-align: left; }
#contents section .inner ul.note li { text-indent: -1em; margin-left: 1em;}

#contents section .inner p + table{margin-top:30px;}
#contents section .inner table {color:#0961ba; font-size:18px; line-height: 30px;border: 1px solid #0961ba; width: 100%;}
#contents section .inner table strong{font-size:20px; }
#contents section .inner table th{ background:#0961ba ; color: #fff; padding: 20px; text-align: center;}
#contents section .inner table tr:first-child th{border-bottom: 1px solid #fff;}
#contents section .inner table tr th{border-bottom: 1px solid #fff;}
#contents section .inner table td{ border-bottom: 1px solid #0961ba; padding: 20px;}

#contents section .inner dl {font-size:18px; line-height: 30px; width:1010px; text-align: left; margin: 0 auto;}
#contents section .inner dl dt {color:#d8245b; float: left; width:200px; margin: 10px 0;}
#contents section .inner dl dd{float: right; width:780px; margin: 10px 0;}
#contents section .inner dl a{ color:#0961ba; }


#contents section picture{position: relative;}
#contents section picture a{display: block; position: relative; overflow: hidden;}
#contents section picture a::after{content: ''; width: 102px; height: 102px; border: 1px solid #0961ba; background: rgba(255,255,255,0.8); position:absolute; left: 50%; top: 50%; margin: -51px 0 0 -51px; z-index: 10; border-radius: 100%; transition: 0.3s;}
#contents section picture a::before{content: '';width: 0; height: 0; border-style: solid; border-width: 19.5px 0 19.5px 34px; border-color: transparent transparent transparent #0961ba; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -12px; z-index: 20; transition: 0.3s;}
#contents section picture a img{z-index: 10;transition:transform 0.4s,opacity 0.6s;}
#contents section picture a:hover img{transition:transform 0.4s; transform: scale(1.1);}
#contents section picture #inlinemoviewrap{width: 100% !important; height: 100% !important; position: absolute; left: 0; top: 0; transform: scale(1.01); z-index: 0; opacity:0; transition: 0s 0.8s;}
#contents section picture a.playing.show::after,
#contents section picture a.playing.show::before{transform: scale(0); transition: 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);}
#contents section picture a.playing.show img{opacity: 0; transition:opacity 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);}
#contents section picture a.playing.show #inlinemoviewrap {opacity: 1; transition: 0.1s 0.8s; z-index: 10000;}


#contents h2.title { font-size:44px; margin:0 auto 10px; display: flex; align-items: center; width: 1200px; font-weight: bold; padding-top: 40px;}
#contents h2.title:before, #contents h2.title:after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background: #0961ba;
	display: block;}

#contents h2.title:before {
	margin-right: 30px; }
#contents h2.title:after {
	margin-left: 30px; }


#contents section + h2.title{padding-top: 50px;}

.ln_parent { display: flex; justify-content: space-between; width: 1200px; margin: 40px auto 60px; align-content: center; align-items: center; }
.ln_parent a { background: #d8245b; color: #fff; height: 75px; width: 100%; font-size: 18px; line-height: 24px; position: relative; transform: rotate(0.05deg); padding: 4px;}
.ln_parent a::after { content: ''; width: calc( 100% - 8px); height: calc( 100% - 8px); background: #d8245b; z-index: 5; position: absolute; left: 4px; top: 4px; transition: background 0.2s; }
.ln_parent a i { display: flex; align-content: center; align-items: center; justify-content: center; position: relative; width: calc( 100% - 8px); height: calc( 100% - 8px); border: 1px solid #ffa4a4; position: absolute; left: 4px; top: 4px; z-index: 10; }
.ln_parent a:hover { background: #d8245b; color: #d8245b; }
.ln_parent a:hover::after { background-color: #fffba7; }

.uatablet .ln_parent a:hover { background: #d8245b; color: #fff; }
.uatablet .ln_parent a:hover::after { background-color: #d8245b; }

.ln_parent a::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 22px 22px 0 22px; border-color: #0961ba transparent transparent transparent; position: absolute; left: 50%; bottom: 4px; margin: 0 0 0 -22px; z-index: -1; opacity: 1; transition: bottom 0.1s; }
.ln_parent a + a { margin-left: 13px; }
.ln_parent a.active { pointer-events: none; background: #0961ba; transform: rotate(0.05deg); color: #fff !important;}
.ln_parent a.active i { border-color: #0961ba; }
.ln_parent a.active::after { background: #0961ba; }
.ln_parent a.active::before { content: ''; bottom: -10px; opacity: 1; transition: bottom 0.3s; }

	
	/* アコーディオンB */
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #fff;
}

.cp_actab:first-of-type {
	margin-top: 30px;
}

.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}

.cp_actab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #d8245b;
}

.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
color: #333333;
background: #eaeaea;
}

.cp_actab .cp_actab-content p {
margin: 1em;
font-size: 14px;
	margin: 30px auto!important;
}

.cp_actab p{
margin-bottom:0px;
}

/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 90em;
}

/*チェックのアイコン（↓）*/
.cp_actab label:after{
color: #fff;
content:"▼";
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 3em;
}

/*チェックのアイコン（↑）*/
.cp_actab input:checked ~ label::after {
color: #fff;
content:"▲";
}
	


@media screen and (min-width: 641px) {
.bg_cloud_fixed { background: url("../img/bg.jpg") center top no-repeat; background-size: cover; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; }
#contents header::after{content: ''; width: 1600px; height: 355px; background: url("../img/dlc/bg.jpg") left top no-repeat; position: absolute; left: 50%; top: 0; margin-left: -600px; z-index: -1;  }

}

@media screen and (min-width: 1601px) {
#contents header::before{ content: ''; width: calc(710/1600*100vw); position: absolute; right: 50%; top: 120px; z-index: -1; height: 300px; overflow: hidden; margin-right: calc(90/1600*100vw);}
}
@media screen and (min-width: 641px) and (max-width: 640px) {
	
}
@media screen and (max-width: 640px) {
/*  	SP STYLE  *************************************************************/
  .siteheader a[href*="movie"] i { opacity: 1; }

  #contents { padding-bottom: calc(120/640*100vw) }
  .bg_cloud_fixed { background: url("../img/products/bg-sp.jpg") center top no-repeat; background-size: cover; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;  }

#contents header {margin-bottom: calc(211/640*100vw); position: relative;}
#contents header::after{content: ''; width: calc(579/640*100vw); height: calc(327/640*100vw); background: url("../img/dlc/bg-sp.jpg") left top no-repeat; position: absolute; top: 0; margin: 0; left: inherit; background-size: cover; z-index: -1; left: calc(61/640*100vw);}

#contents header::before{ content: ''; width: calc(490/640*100vw); position: absolute; right: inherit; left: 0; top: calc(89/640*100vw); z-index: -1; height: calc(300/640*100vw); overflow: hidden; margin-right: 0;}
#contents header::before{background: linear-gradient(-106deg, #f6f9c0 0%, #f6f9c0 29%, #a2dbe6 100%); }

#contents header h1{-webkit-text-stroke-color: #0961ba; -webkit-text-stroke-width: 1px; font-size: calc(117/640*100vw); color: transparent; letter-spacing: 0.05em; margin: calc(113/640*100vw) 0 calc(-8/640*100vw); line-height: 1;}

#contents header p{font-size: calc(22/640*100vw); line-height: 1; margin:calc(0/640*100vw) 0 0; letter-spacing: 0.01em;}
#contents section .inner p + p{margin-top: calc(20/640*100vw); }

#contents h2 {font-size: calc(72/640*100vw); color: #0961ba; line-height: 1; transform: rotate(0.05deg); width: calc(600/640*100vw); overflow: hidden; margin: 0 auto;}
#contents h2 span {position: relative; display: inline-block; padding: 0 calc(30/640*100vw);}
#contents h2 span::before,
#contents h2 span::after {background: #0961ba; height: 2px; width: 100%; content: ''; position: absolute; left: 100%; top: calc(35/640*100vw);}
#contents h2 span::after {left: inherit; right: 100%;}
#contents h2 sub{display: block; font-size: calc(17/640*100vw); line-height: 1; transform: rotate(0.05deg); margin: calc(5/640*100vw)}


#contents .update{font-size:calc(22/640*100vw); line-height: calc(22/640*100vw); padding: calc(7/640*100vw) 0 calc(3/640*100vw) 0;  background:#0961ba; color: #fff; border-radius:calc(30/640*100vw); width:calc(280/640*100vw); margin: 20px auto;}
#contents section{width: calc(600/640*100vw); background-color: rgba(255,255,255,0.8); padding: calc(5/640*100vw);}
#contents section .inner{ padding:calc(30/640*100vw); border: 1px solid #0961ba;}
#contents section .inner a{ color:#d8245b ; text-decoration: underline;}
#contents section .inner .title{margin-bottom: calc(30/640*100vw);}
#contents section .inner article + article{margin-top:calc(60/640*100vw);}
#contents section .inner p{ color:#0961ba; font-size:calc(20/640*100vw); line-height: calc(36/640*100vw);  text-align: left; width: calc(540/640*100vw); }
#contents section .inner p.small{ font-size:calc(18/640*100vw); line-height: calc(30/640*100vw);}
#contents section .inner strong{ color:#d8245b ; }

#contents section .inner h3{font-size: calc(30/640*100vw); line-height: calc(36/640*100vw); padding:calc(10/640*100vw) 0 calc(5/640*100vw) 0;  background:#0961ba ; color: #fff; border-radius:calc(40/640*100vw); margin:0 auto calc(30/640*100vw);}
#contents section .inner h4{font-size:calc(26/640*100vw); line-height: calc(36/640*100vw); padding:calc(10/640*100vw) 0 calc(5/640*100vw) 0;  color: #d8245b; width:calc(520/640*100vw); margin: calc(30/640*100vw) auto calc(20/640*100vw);}
#contents section .inner .box{border: 2px solid #0961ba; padding: calc(20/640*100vw); margin: calc(30/640*100vw) 0;}
#contents section .inner ul li{font-size:calc(18/640*100vw); line-height: calc(30/640*100vw); margin-top: calc(15/640*100vw); }
#contents section .inner ul li:nth-child(even){ margin-left:0;}
#contents section .inner ul.img li{width:calc(240/640*100vw); margin: calc(5/640*100vw); position: relative;}
#contents section .inner ul.img li a{width:calc(240/640*100vw);}
#contents section .inner ul.img li p{width:calc(240/640*100vw); text-align: center;font-size: calc(18/640*100vw);}

#contents section .inner ul.img li a::after {
    content: '';
    background: url(../img/icon_plus.gif) no-repeat right bottom;
    width:calc(240/640*100vw);
    height: calc(135/640*100vw);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
	transition: 0.4s;
	background-size:calc(30/640*100vw);}

#contents section .inner a.btn { display: block; height: 8.75vw; padding: 1.46875vw;height: calc(70/640*100vw); margin: calc(15/640*100vw) auto 0; font-size: 3.125vw; position: relative; width: auto; left: auto; bottom: auto; z-index: 100;width:calc(400/640*100vw) ;}

#contents section .inner a.btn2 { display: block; height: 8.5vw; font-size: 3.125vw; position: relative; width: auto; left: auto; bottom: auto; z-index: 100; border: calc(4/640*100vw)  solid #0961ba; width:calc(200/640*100vw) ; text-align: center; line-height: 2vw;}


#contents section .inner ul.note { text-align: left; }
#contents section .inner ul.note li { text-indent: -1em; margin-left: 1em;}

#contents section .inner p + table{margin-top:calc(30/640*100vw);}
#contents section .inner table {color:#0961ba; font-size:calc(20/640*100vw); line-height: calc(30/640*100vw);border: 1px solid #0961ba; width: 100%;}
#contents section .inner table strong{font-size:calc(20/640*100vw); }
#contents section .inner table th{ background:#0961ba ; color: #fff; padding: calc(15/640*100vw); width: calc(150/640*100vw); text-align: center;}
#contents section .inner table tr:first-child th{border-bottom: 1px solid #fff;}
#contents section .inner table td{ border-bottom: 1px solid #0961ba; padding: calc(20/640*100vw);}	

	#contents section .inner dl {font-size:calc(24/640*100vw); line-height: calc(36/640*100vw); width:calc(500/640*100vw); text-align: center; }
#contents section .inner dl dt {float: none; width:calc(500/640*100vw); margin-bottom:calc(20/640*100vw);}
#contents section .inner dl dd{float: none;width:calc(500/640*100vw); margin-bottom: calc(20/640*100vw);}
	

#contents section + h2.title{padding-top: calc(50/640*100vw);}
#contents h2.title { font-size:calc(44/640*100vw); line-height:calc(54/640*100vw); margin: calc(40/640*100vw) auto calc(30/640*100vw); display: flex; align-items: center; width: calc(580/640*100vw); padding-top:calc(20/640*100vw); }
#contents h2.title:before, #contents h2.title:after {
	content: "";
	height: calc(4/640*100vw);}

#contents h2.title:before {
	margin-right:calc(30/640*100vw); }
#contents h2.title:after {
	margin-left:calc(30/640*100vw); }	
	
.ln_parent { width: 93.75vw; margin: 9.375vw auto 1.5625vw;  display: inline-block;}
  .ln_parent a { height: 16.40625vw; font-size: 3.5vw; line-height: 5vw; letter-spacing: 0.01em;  transition: none; display: inline-block; width: 44vw; margin-bottom: 2vw;}
  .ln_parent a + a { margin-left: 0; }
	.ln_parent a:nth-child(even) { margin-left: 1.25vw; }
  .ln_parent a.active { background: #0961ba !important; transition: none; }
  .ln_parent a.active::before { border-width: 3.4375vw 3.4375vw 0 3.4375vw; border-color: #0961ba transparent transparent transparent; position: absolute; left: 50%; bottom: -3.28125vw; margin: 0 0 0 -3.4375vw; }	
	
	
#contents section picture a::after{content: ''; width: calc(102/640*100vw); height: calc(102/640*100vw); border: 1px solid #0961ba; background: rgba(255,255,255,0.8); position:absolute; left: 50%; top: 50%; margin: calc(-51/640*100vw) 0 0 calc(-51/640*100vw);}
#contents section picture a::before{border-width: calc(19.5/640*100vw) 0 calc(19.5/640*100vw) calc(34/640*100vw); border-color: transparent transparent transparent #0961ba; position: absolute; left: 50%; top: 50%; margin: calc(-18/640*100vw) 0 0 calc(-12/640*100vw); z-index: 20;}
	
	/* アコーディオンB */

.cp_actab:first-of-type {
	margin-top: calc(30/640*100vw);
}


.cp_actab label {
line-height: 5vw;
padding:3vw 10vw 3vw 3vw;
	text-align: left;
}

.cp_actab .cp_actab-content p {
margin: 1em;
font-size:calc(20/640*100vw);
	margin:calc(30/640*100vw) auto!important;
	width: calc(480/640*100vw)!important;
}


/*チェックのアイコン（↓）*/
.cp_actab label:after{
top: 39%;
}

/*チェックのアイコン（↑）*/
.cp_actab input:checked ~ label::after {
color: #fff;
content:"▲";
}
	
	
	
}
/* animation */
#contents { transform: translateY(0); opacity: 0; transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(1px) brightness(1.1); }
.bg_cloud_fixed { transform: translateY(0); opacity: 0; transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.15s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: blur(1px) brightness(1.1); }
.imgloaded #contents ,
.imgloaded .bg_cloud_fixed { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }