@charset "UTF-8";
/* CSS Document */


ul{
	list-style: none;
	
}

a{ text-decoration: none;}



section#title{padding-top:calc(230/1920*100vw);}
section#title h1{width:calc(422/1920*100vw);}
section#title h2{width:calc(468/1920*100vw); margin: calc(-30/1920*100vw) auto;}

#dlc #content{background:url("../images/dlc/bg.png") no-repeat center top;background-size:100%;}
#dlc #content #sec01 {text-align: center;}
#dlc #content section .tokuten{width: calc(1100/1920*100vw); margin: calc(50/1920*100vw) auto calc(-60/1920*100vw);}
#dlc #content section#sec01 a{text-decoration: underline; color: #000;}
#dlc #content ul.nav{width: calc(1740/1920*100vw); margin: calc(140/1920*100vw) auto calc(30/1920*100vw); display: flex; flex-wrap: wrap; justify-content: center;flex-wrap: wrap;}
#dlc #content ul.nav li{width:calc(430/1920*100vw); margin:calc(10/1920*100vw);;}
#dlc #content ul.nav li p{width:calc(430/1920*100vw); font-size:calc(32/1920*100vw); font-family: 'Noto Serif JP', serif;}
#dlc #content ul.nav li p a{ padding: calc(25/1920*100vw) calc(15/1920*100vw) calc(25/1920*100vw) calc(40/1920*100vw);}
#dlc #content ul.nav li p a:before{ background: url("../images/products/arrow.png") no-repeat center top; background-size: calc(22/1920*100vw) calc(14/1920*100vw); 
	width: calc(22/1920*100vw); height: calc(14/1920*100vw); margin-top: calc(-5/1920*100vw);}
#dlc #content ul.nav li p a:hover:before{ background: url("../images/products/arrow-w.png") no-repeat center top; background-size: calc(22/1920*100vw) calc(14/1920*100vw);opacity:1;} 
#dlc #content ul.nav p.btn{margin-top:calc(10/1920*100vw);}
#dlc #content ul.nav p.btn a{text-decoration: none;}

#dlc #content #sec01 .inner .item{padding:calc(20/1920*100vw) calc(20/1920*100vw) calc(60/1920*100vw); }

#dlc #content section {padding-bottom:calc(130/1920*100vw);}
#dlc #content section h2{background:#000; font-size:calc(60/1920*100vw); padding:calc(10/1920*100vw); text-align: center; color: #fff;}
#dlc #content section h3{position: relative;text-align:center;  margin: calc(120/1920*100vw) auto calc(30/1920*100vw);font-size: calc(50/1920*100vw); padding: calc(20/1920*100vw) 0; width: 85vw;}
#dlc #content section h3::before,#dlc #content section h3::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
#dlc #content section h3::before {
	top: 0;
	border-top: 2px solid #000;
	border-bottom: 1px solid #000;
}
#dlc #content section h3::after {
	bottom: 0;
	border-top: 1px solid #000;
	border-bottom: 2px solid #000;
}

#dlc #content section h4{position: relative;text-align:center;  margin: 0 auto ;font-size: calc(45/1920*100vw); padding: calc(20/1920*100vw) 0; width: 85vw;background: rgba(255,255,255,0.5);}

#dlc #content section ul.btn-list{ display: flex;align-items: center; justify-content: center;flex-wrap: wrap;}
#dlc #content section ul.btn-list li{ margin: 0 calc(10/1920*100vw);}
#dlc #content section#title h2{background:none; }
#dlc #content section .box{ border: 1px solid #000; width: 85vw; margin: calc(40/1920*100vw) auto calc(80/1920*100vw);}
#dlc #content section .box p{margin: 0 auto calc(30/1920*100vw);}
#dlc #content section .box .item{margin: calc(30/1920*100vw) auto 0;}
#dlc #content section .inner{ display: flex;align-items: center;justify-content: center; padding:calc(30/1920*100vw) calc(20/1920*100vw) 0; width: 95%; margin: calc(20/1920*100vw) auto 0;flex-wrap: wrap;}
#dlc #content section .inner p,#dlc #content section .inner ul li{ text-align: left;}
#dlc #content section p{font-size:calc(30/1920*100vw); text-align: center; margin: calc(30/1920*100vw) auto calc(30/1920*100vw);}
#dlc #content section p.price{font-size:calc(42/1920*100vw);}
#dlc #content section .item-txt{font-size:calc(30/1920*100vw); padding-left:calc(40/1920*100vw);width:calc(790/1920*100vw);}
#dlc #content section .item-txt ul{padding-top:0;}
#dlc #content section .item-txt ul li{padding-top:calc(10/1920*100vw);}
#dlc #content section .item{width:calc(790/1920*100vw); margin: 0 auto; }
#dlc #content section .inner .item{width:calc(740/1920*100vw); margin: calc(20/1920*100vw) calc(10/1920*100vw) 0; }
#dlc #content section .item a{ position: relative;display: block;}
#dlc #content section .item a::after{content: ""; background:url("../images/character/zoom.jpg") no-repeat center top; position: absolute; bottom:0; right: 0; background-size:calc(66/1920*100vw) calc(66/1920*100vw); width:calc(66/1920*100vw); height:calc(66/1920*100vw);}
#dlc #content section p.btn{width: calc(400/1920*100vw); position: relative; margin: calc(20/1920*100vw) auto 0;}
#dlc #content section#sec02 ul.btn-list{margin-bottom:calc(90/1920*100vw);}

#dlc #content section .item-txt ul li a{ text-decoration:underline; color: #000;}

#products #content section p{text-align: center; margin: calc(30/1920*100vw) auto calc(40/1920*100vw);}
#products #content section .item{width:calc(655/1920*100vw); margin: calc(40/1920*100vw) auto;}

#dlc #content section ul.btn-list p.btn{ width: calc(400/1920*100vw);}
#dlc #content section#title ul.btn-list p.btn{ width: calc(520/1920*100vw);}
#dlc #content section p.btn.gray{background: #484848;  border: none; color: #8f8f8f;  padding:calc(25/1920*100vw) calc(30/1920*100vw) calc(25/1920*100vw)  calc(30/1920*100vw); font-size: calc(33/1920*100vw);    width: calc(350/1920*100vw)!important; text-align: center;}

#dlc #content section#sec05 ul li p.btn.gray{padding:calc(15/1920*100vw) 0 calc(15/1920*100vw) 0;}

#dlc .gallery{padding: calc(30/768*100vw) 0!important; height: calc(200/768*100vw);}
#dlc .gallery .topics-inner{position:relative;}
#dlc .gallery ul{display: flex; margin-bottom:calc(160/1920*100vw);}
#dlc .gallery ul li{position: relative; width:calc(862/1920*100vw); box-shadow: 0 0 calc(50/1920*100vw) 0 rgba(0, 0, 0, .5);}
#dlc .gallery ul li::after{content: ""; background:url("../images/character/zoom.jpg") no-repeat center top; position: absolute; bottom:0; right: 0; background-size:calc(66/1920*100vw) calc(66/1920*100vw); width:calc(66/1920*100vw); height:calc(66/1920*100vw);}

#dlc .swiper-button-next{width:calc(58/1920*100vw);height:calc(198/1920*100vw);background:url('../images/character/arrow02.jpg');background-size:100%;margin-top:0;transform:translate(0,-50%);right:50%;margin-right:calc(-468/1920*100vw);transition:all 0.2s;}
#dlc .swiper-button-next:hover{ filter: brightness(120%);transform:translateY(-50%)scale(1.04);}
#dlc .swiper-button-prev{width:calc(58/1920*100vw);height:calc(198/1920*100vw);background:url('../images/character/arrow01.jpg');background-size:100%;margin-top:0;transform:translate(0,-50%);left:50%;margin-left:calc(-470/1920*100vw);transition:all 0.2s;}
#dlc .swiper-button-prev:hover{ filter: brightness(120%);transform:translateY(-50%)scale(1.04);}

@media screen and (max-width:768px){
section#title{padding-top:calc(150/768*100vw);margin:0!important;}	
section#title h1{width:calc(250/768*100vw);}
section#title h2{width:calc(300/768*100vw); margin: 0 auto;}


/*-------products-------*/	
#dlc #content section .tokuten{width: calc(650/768*100vw); margin: calc(30/768*100vw) auto calc(30/768*100vw);}
#dlc #content #sec00 p.notice{font-size:calc(22/768*100vw); width: calc(680/768*100vw); margin:calc(30/768*100vw) auto; text-align: left;}
#dlc #content ul.nav{width: calc(740/768*100vw); margin: calc(90/1920*100vw) auto calc(100/1920*100vw); flex-wrap: wrap;}
#dlc #content ul.nav li{width:calc(330/768*100vw); margin:calc(10/768*100vw);height: calc(65/768*100vw);}
#dlc #content ul.nav li p{width:calc(330/768*100vw); font-size:calc(24/768*100vw);}
#dlc #content ul.nav li p a{ padding: calc(25/1920*100vw) calc(20/1920*100vw) calc(25/1920*100vw) calc(40/1920*100vw);}
#dlc #content ul.nav li p a:before{ background: url("../images/products/arrow.png") no-repeat center top; background-size: calc(22/768*100vw) calc(14/768*100vw); width: calc(22/768*100vw); height: calc(14/768*100vw); margin-top: calc(-5/768*100vw);}
#dlc #content ul.nav li p a:hover:before{ background: url("../images/products/arrow.png") no-repeat center top; background-size: calc(22/768*100vw) calc(14/768*100vw); width: calc(22/768*100vw); height: calc(14/768*100vw); margin-top: calc(-5/768*100vw);} 

#dlc #content section {padding-bottom:calc(10/768*100vw);margin: calc(50/768*100vw) 0;}
#dlc #content section h2{font-size:calc(45/768*100vw); padding:calc(10/1920*100vw); text-align: center; color: #fff;}
#dlc #content section#title h2{background:none; }
#dlc #content section h3{font-size:calc(36/768*100vw); padding:calc(25/768*100vw) 0 ; text-align: center; margin: calc(70/768*100vw) auto calc(30/1920*100vw);}	
#dlc #content section .inner{ align-items: center;justify-content: center; padding-top:calc(0/1920*100vw);}
#dlc #content section#sec01 p{font-size:calc(24/768*100vw); text-align: center; margin: calc(50/1920*100vw) auto calc(40/1920*100vw);}
#dlc #content section p.price{font-size:calc(34/768*100vw)!important; text-align: center;}
#dlc #content section .item-txt{font-size:calc(30/1920*100vw); padding-left:calc(40/1920*100vw);width:calc(650/768*100vw); margin:calc(40/1920*100vw) auto calc(30/768*100vw);}
#dlc #content section .item-txt ul{padding-top:calc(20/1920*100vw);}
#dlc #content section .item-txt ul li{padding-top:calc(20/1920*100vw); font-size:calc(26/768*100vw);}
#dlc #content section .item{width:calc(560/768*100vw)!important; margin: calc(100/1920*100vw) auto 0!important; }
#dlc #content section .item a::after{background-size:calc(66/768*100vw) calc(66/768*100vw); width:calc(66/768*100vw); height:calc(66/768*100vw);}
#dlc #content section#sec01 .item{width:calc(500/768*100vw); margin: calc(40/1920*100vw) auto 0;}

#dlc #content section .inner .item{width:calc(290/768*100vw)!important; margin: calc(20/1920*100vw) calc(10/1920*100vw) 0; }	
#dlc #content section .inner .item.item2{width:calc(600/768*100vw)!important; }	
#dlc #content section p.btn{width: calc(400/768*100vw); position: relative; margin: calc(10/768*100vw) auto 0;}
#dlc #content section p.btn a{padding: calc(30/768*100vw) calc(10/768*100vw) calc(30/768*100vw) calc(40/768*100vw);font-size:calc(26/768*100vw);}
#dlc #content section .box p{font-size:calc(22/768*100vw);}
	
#dlc #content section#sec05 ul{ display: flex;align-items: center; justify-content: center;flex-wrap: wrap;}
#dlc #content section#sec05 ul li{width:calc(280/768*100vw); padding:0 calc(30/768*100vw) calc(100/768*100vw); margin:calc(10/768*100vw); background: rgba(0,0,0,0.85); color: #fff; text-align: center;}
#dlc #content section#sec05 ul li h3{font-size:calc(28/768*100vw); line-height:calc(40/768*100vw); height:calc(115/768*100vw); display: table-cell; vertical-align: middle;width:calc(640/768*100vw); padding: 0;}
#dlc #content section#sec05 ul li p{font-size:calc(25/768*100vw); line-height:calc(30/768*100vw); width:calc(640/768*100vw);height: calc(162/768*100vw);}
#dlc #content section#sec05 ul li p span{font-size:calc(19/768*100vw);}
#dlc #content section#sec05 ul li p.btn{font-size:calc(34/768*100vw); width:calc(280/768*100vw);  margin-top: calc(10/768*100vw);}
#dlc #content section#sec05 ul li img{margin-bottom: calc(20/1920*100vw);}
#dlc #content section#sec05 ul li p.btn a{padding: calc(13/768*100vw) calc(30/768*100vw) calc(18/768*100vw) calc(50/768*100vw);font-size:calc(28/768*100vw);}
#dlc #content section#sec05 ul li a::after{bottom:0; right: 0; background-size:calc(66/768*100vw) calc(66/768*100vw); width:calc(66/768*100vw); height:calc(66/768*100vw);}
	#dlc #content section h4{font-size: calc(30/768*100vw);}
	#dlc #content section .box p{width: calc(560/768*100vw); margin: calc(0/768*100vw) auto  calc(40/768*100vw)!important;}
	

#dlc #content section .inner .item{width:calc(290/768*100vw)!important; margin: calc(20/1920*100vw) calc(10/1920*100vw) 0; }	
#dlc #content section ul.btn-list p.btn{ width: calc(320/768*100vw);}
	#dlc #content section ul.btn-list li{ margin: 0 calc(10/768*100vw);}
#dlc #content section#title ul.btn-list p.btn{ width: calc(480/768*100vw);}
#dlc #content section p.btn.gray{ padding:calc(20/768*100vw) calc(30/768*100vw) calc(20/768*100vw)  calc(30/768*100vw); font-size: calc(32/768*100vw); margin: calc(50/1920*100vw) auto 0!important; width: calc(270/768*100vw)!important;}
#dlc #content section#sec05 ul li p.btn.gray{padding:calc(15/768*100vw) 0 calc(15/768*100vw) 0;}
	
#dlc #content section#sec06 .item-txt{font-size: calc(28/768*100vw);}
#dlc #content section#sec06 p.price{font-size: calc(34/768*100vw); margin-bottom:calc(30/768*100vw);}
#dlc #content section#sec06 p {font-size: calc(28/768*100vw);}
#dlc #content section#sec06 p.notice{font-size:calc(22/768*100vw); width: calc(680/768*100vw); margin:calc(30/768*100vw) auto; text-align: left;}

#dlc .gallery{padding: calc(50/768*100vw) 0!important; height: calc(350/768*100vw);}
#dlc .gallery ul{display: flex; margin-bottom:calc(100/1920*100vw);}
#dlc .gallery ul li{position: relative; width:80vw;}
#dlc .gallery ul li::after{content: ""; background:url("../images/character/zoom.jpg") no-repeat center top; position: absolute; bottom:0; right: 0; background-size:calc(66/768*100vw) calc(66/768*100vw); width:calc(66/768*100vw); height:calc(66/768*100vw);}
#dlc .swiper-button-next{width:calc(80/1920*100vw);height:calc(280/1920*100vw);background:url('../images/character/arrow02.jpg');background-size:100%;margin-top:0;transform:translate(0,-50%);right:50%;margin-right:calc(-837/1920*100vw);transition:all 0.2s;}

#dlc .swiper-button-prev{width:calc(80/1920*100vw);height:calc(280/1920*100vw);background:url('../images/character/arrow01.jpg');background-size:100%;margin-top:0;transform:translate(0,-50%);left:50%;margin-left:calc(-837/1920*100vw);transition:all 0.2s;}
}



@media screen and (min-width:1400px){
section#title h2{width: 342px;}
#dlc #content section .tokuten{width: 900px;}
#dlc #content section p{font-size:20px;}
#dlc #content ul.nav{width: 1350px;margin: 160px auto -50px;}
#dlc #content ul.nav li{width: 350px;}
#dlc #content ul.nav li p{font-size:22px; width: 350px;}	
#dlc #content ul.nav li p a:before{    background-size:18px 11px;  width: 18px; height: 11px;}	
#dlc #content ul.nav li p a:hover:before{  background-size:18px 11px;  width: 18px; height: 11px;} 
#dlc #content section h2{font-size:40px;}	
#dlc #content section h3{font-size:32px;}	
#dlc #content section p{margin: 30px auto 30px;}
#dlc #content section ul.btn-list p.btn{width: 300px;}
#dlc #content section p.btn.gray{padding:20px 25px; font-size: 22px;}
#dlc #content section .item{width: 600px;}
#dlc #content section#sec01 .item{width: 450px;}
#dlc #content section .item-txt{width: 480px; font-size:20px; padding-left: 30px; padding-top:0;}
#dlc #content section p.price{font-size:30px;margin: 20px auto 30px;}
#dlc #content section p{}	
#dlc #content section#sec05 ul li{width: 230px; padding: 0 25px 95px;  margin:16px;}
#dlc #content section#sec05 ul li h3{font-size:25px; height:96px; line-height:32px; width: 283px;}
#dlc #content section#sec05 ul li p{font-size:20px; line-height:25px; height:118px; width: 283px;}
#dlc #content section#sec05 ul li p span{font-size:13px; }
#dlc #content section#sec05 ul li p.btn{font-size:22px;  width: 230px;margin-top: 15px;}
#dlc #content section#sec05 ul li img{margin-bottom:10px;}	
#dlc #content section#sec05 ul{width:1400px;  margin:40px auto 15px;}	
#dlc #content section#sec06 p{font-size:22px;}	
#dlc #content section#sec06 .item-txt{font-size:22px;}	
#dlc #content section h3{width: 1000px; margin: 60px auto 20px;}
	#dlc #content section .inner{padding: 10px 0;}
	#dlc #content section#title ul.btn-list p.btn{width: 400px;}
	#dlc #content section ul li a::after{    background-size: 50px 50px!important; width: 50px!important; height: 50px!important;}
#dlc #content section .item a::after{    background-size: 50px 50px!important; width: 50px!important; height: 50px!important;}
#dlc #content section p.btn.gray{ width: 260px!important;}	
#dlc #content section .box{width: 1000px; margin: 20px auto 40px;}
#dlc #content section h4{font-size:28px;width: 1000px; }
	#dlc #content section .inner .item{width: 450px;}	
}