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



/*---------センター寄せ------------*/
#breadcrumb {
	width: 78.334%;
	margin: 0 auto;
}
#main {
	float: none;
	margin: 0 auto;
}
/*---------------------------------*/
.cl:after {
  content: "";
  clear: both;
  display: block;
}
/*---------------------------------*/

/*//////////////////////1024pxよりも大きい幅のときここから////////////////////////*/
br.sp480,br.sp768{
	display:none;
}

#container{
	margin:3% 0 0 0;
}
#container .tab{
	width:100%;
}
#container .tab ul li{
	width:50%;
	float:left;
	text-align:center;
	font-size:3rem;
	padding:2% 0;
}
#container .tab ul li a{
	width:100%;
	display:block;
	text-decoration:none;
	color:#fff;
}
#container .tab ul li a img{
	width:40px;
	padding:0 0 6px 0;
}
#container .tab ul li.tab1{
	background:#fccc52;
}
#container .tab ul li.tab2{
	background:#2cbf13;
}
/**/
#container{
	margin:3% 0 0 0;
}
#container .cont{
	margin:0 0 5% 0;
}
		#container .meruma{
			background:#fccc52;
		}
		#container .line{
			background:#2cbf13;
		}
#container .cont h2{
	margin:0 auto;
	max-width:770px;
	padding:4% 0 0 0;
}
#container .cont .lead{
	text-align:center;
	font-size:1.8rem;
	color:#7a2e02;
	padding:3% 0;
}
	#container .cont .green{
		color:#fff;
	}
	#container .cont .green span{
		color:#ffff00;
		font-weight:bold;
	}
#container .cont .box1{
	width:90%;
	margin:0 auto;
	padding:1.1% 1.5%;
	position:relative;
}
#container .cont .box1 .box2{
	background:#fff;
}
#container .cont .box1 .box2 h3{
	position:absolute;
	top:5%;
	left:0;
	width:25%;
}
#container .cont .box1 .box2 h3.top{
	position:absolute;
	top:-0.5%;
	left:50%;
	-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
	width:28%;
}
#container .cont .box1 .box2 h4{
	margin:0 auto;
	width:40%;
	max-width:358px;
	padding:5% 0 0 0;
}
#container .cont .box1 .box2 .illust{
	position:absolute;
	top:5%;
	right:5%;
	width:16.5%;
}
/**/
#container .cont .box1 .box2 .detail{
	padding:0 4% 4% 4%;
	margin:0 0 4% 0;
}
	#container .cont .box1 .box2 .pdT{
		padding-top:13%;
	}
#container .cont .box1 .box2 .detail ul li{
	padding:3% 0;
}
		#container .cont .box1 .box2 .detail ul li.process1{ border-bottom:1px dotted #aaa; }
		#container .cont .box1 .box2 .detail ul li.process2{ border-right:1px dotted #aaa; width:50%; float:left; padding-right:2%; box-sizing:border-box; }
		#container .cont .box1 .box2 .detail ul li.process3{ width:50%; float:left; padding-left:2%; box-sizing:border-box; }
			
#container .cont .box1 .box2 .detail ul li .nomber{
	width:59px;
	float:left;
	margin:0 -65px 0 0;
}
#container .cont .box1 .box2 .detail ul li .nomal{
	font-size:1.4rem;
	line-height:1.4;
	float:left;
	margin:15px 0 5% 65px;
}
	#container .cont .box1 .box2 .detail ul li .fno{
		margin-left:0;
	}
	#container .cont .box1 .box2 .detail ul li .nomal span{
		font-weight:bold;
		font-size:140%;
	}
	#container .cont .box1 .box2 .detail ul li .nomal a{
		color:#ff5231;
	}
#container .cont .box1 .box2 .detail ul li .scan1{
	width:90%;
	margin:0 auto;
	clear:both;
	box-sizing: border-box;
    border: 1px solid #D0D0D0;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
}
#container .cont .box1 .box2 .detail ul li .scan2{
	width:53%;
	float:left;
}
#container .cont .box1 .box2 .detail ul li .scan3{
	width:45%;
	float:left;
	box-sizing: border-box;
    border: 1px solid #D0D0D0;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.10);
	margin: 6% 0 0 0;
}
/*#container .cont .box1 .box2 .detail ul li .arrow{
	width:10%;
	float:left;
	padding:10% 0 0 0;
}*/
/**/
#container .cont .box1 .box2 .detail .nomal2{
	font-size:1.8rem;
	line-height:1.4;
	text-align:center;
	font-weight:bold;
	padding-bottom:3%;
}
	#container .cont .box1 .box2 .detail .nomal2 span{
		font-size:200%;
	}
#container .cont .box1 .box2 .detail .btn{
	width:50%;
	max-width:250px;
	margin:0 auto;
}
#container .cont .box1 .box2 .detail .btn a{
	width:100%;
	display:block;
}
#container .cont .box1 .box2 .detail ul.pro{
	margin:0 -2% 0 2%;
}
#container .cont .box1 .box2 .detail ul.pro li{
	width:19%;
	float:left;
	margin:0 1% 3% 0;
}
#container .cont .box1 .box2 .detail ul.pro li img.ph1{
	width:85%;
	display:inline-block;
}
#container .cont .box1 .box2 .detail ul.pro li img.ph2{
	width:10%;
	display:inline-block;
	padding:0 0 0 5%;
}
#container .cont .box1 .box2 .detail .qr{
	width:65%;
	max-width:298px;
	margin:0 auto;
}
#container .cont .box1 .caption{
	color:#fff;
	font-size:1.2rem;
	padding:0 0 0.7em 1em;
	text-indent:-1em;
	line-height:1.3;
}
/*//////////////////////1024pxよりも大きい幅のときここまで////////////////////////*/

@media screen and (max-width: 1023px) {
/* 1023pxまでの幅の場合に適応される */
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
br.sp768{
	display:block !important;
}
#container .cont .box1 .box2 .detail ul.pro li{
	width:32.3%;
}
#container .cont .box1 .box2 .detail ul.pro li.four{
	padding-left:17.5%;
}
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
br.sp480{
	display:block !important;
}
#container .tab ul li{
	font-size:5vw;
}
#container .tab ul li a img{
	width:8vw;
}
#container .cont h2{
	width:95%;
}
#container .cont .lead{
	font-size:3.5vw;
}
#container .cont .box1 .box2 h3 {
    position: absolute;
    top: 4vw;
    left: -1.2%;
    width: 40%;
}
#container .cont .box1 .box2 h4 {
    margin: 0;
    width: 50%;
    max-width: 358px;
    padding: 7% 0 3% 40%;
}
#container .cont .box1 .box2 .illust {
    top:inherit;
    bottom: 7vw;
    right: 5%;
    width: 30%;
}
#container .cont .box1 .box2 .detail ul li .nomber {
    width: 30px;
    float: left;
    margin: 0 -35px 0 0;
}
#container .cont .box1 .box2 .detail ul li .nomal{
	margin: 5px 0 5% 35px;
}
	#container .cont .box1 .box2 .detail ul li .fno{
		margin-left:0;
	}
#container .cont .box1 .box2 .detail ul li.process2 {
    border-right: none;
    width: 100%;
    float: none;
    padding-right: 0;
}
#container .cont .box1 .box2 .detail ul li.process3 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-bottom: 15vw;
}
#container .cont .box1 .box2 .detail ul li .scan2 {
    width: 90%;
    margin: 0 auto;
    float: none;
    clear: both;
}
#container .cont .box1 .box2 .detail ul li .arrow {
    width: 10%;
    float: none;
    padding: 3% 0;
    margin: 0 auto;
}
#container .cont .box1 .box2 .detail ul li .scan3 {
    width: 90%;
    padding: 0 0 17vw 0;
    float: none;
    margin: 0 auto;
}
#container .cont .box1 .box2 .detail ul li .nomal span{
	font-size:100%;
}
/**/
#container .cont .box1 .box2 h3.top{
	top:-1vw;
	width:50%;
}
#container .cont .box1 .box2 .pdT {
    padding-top: 18vw;
}
#container .cont .box1 .box2 .detail .nomal2 {
    font-size: 1.4rem;
}
#container .cont .box1 .box2 .detail ul.pro li{
	width:49%;
}
#container .cont .box1 .box2 .detail ul.pro li.four{
	padding-left:0;
}
#container .cont .box1 .box2 .detail .nomal2 span{
	font-size:8.5vw;
}
}