@charset "UTF-8";
/* CSS Document */
/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/

img{width:100%;}

/*メイン画像*/
#main{margin:0 auto; max-width:1200px;}
.pc{display:block;}
.sp{display:none;}



/*メインテキスト*/
#info{width:100%; padding:10% 0 5% 0; font-family: 'Noto Sans JP', sans-serif;}
#info p{font-size:90%; line-height:180%;}
#info b{font-size:60%; color:red; font-weight:bold;}


.item_info{width:100%; max-width:900px; margin:0 auto; text-align:left; font-family: 'Noto Sans JP', sans-serif; overflow:hidden;}
.info-left{width:40%; float:left; margin-right:8%;}
.info-right{width:52%; float:left; padding:7% 0;}
.info-right p{line-height:30px; font-size:15px;}
.info-right a{font-size:13px; color:#000; border-bottom:1px solid #000; margin-top:5%; display:block; padding-bottom:2%; clear:both;}
.info-right a span{float:right; font-size:16px;}

.item_code{width:100%; max-width:900px; margin:3% auto 0; clear:both; text-align:left; font-family: 'Noto Sans JP', sans-serif;}
.code-left{width:60%; float:left; padding:4% 0;}
.code-left h3{font-size:18px; font-weight:700; margin-bottom:5%; line-height:25px; padding:0.3rem 2rem; border-left:3px dotted #000;}
.code-left p{line-height:30px; font-size:15px;}
.code-left a{font-size:13px; color:#000; border-bottom:1px solid #000; margin-top:5%; display:block; padding-bottom:2%; clear:both;}
.code-left a span{float:right; font-size:16px;}
.code-right{width:40%; float:left;}

h3.con-1{color:#353535;}
h3.con-2{color:#353535;}
h3.con-3{color:#497299;}
h3.con-4{color:#716a56;}
h3.con-5{color:#3f473d;}
h3.con-6{color:#4b4b4b;}

.item_code a b{float:right; font-weight:bold; background-color:#2A2A2A; color:#fff; padding:1% 2%; font-size:0.7rem;}

.back_inner{
  box-sizing:boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 80px 10px 120px;
}

.back{
  position:relative;
  overflow:hidden;
  padding:40px 0;
	clear:both;
}
.back:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 2% -10% 0;
  z-index: -1;
}
.back-01:before{
  background: #f8f8e9;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.back-02:before{
  background: #878787;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}
.back-03:before{
  background: #b9d5f0;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.back-04:before{
  background: #b9af91;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}
.back-05:before{
  background: #9aa097;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}


.back-06:before{
  background: #4b4b4b;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

#category{max-width:1200px; margin:0 auto; clear:both; padding-top:5%;}



@media screen and (max-width: 768px) {

	
/*メイン画像*/
.pc{display:none;}
.sp{display:block;}

/*メインテキスト*/
#info{padding:20% 0 20% 0; font-family: 'Noto Sans JP', sans-serif;}


.item_info{font-family: 'Noto Sans JP', sans-serif; margin-bottom:15%;}
.info-left{width:90%; padding:0 5%; margin-bottom:5%;}
.info-right{width:90%; padding:0 5%;} 
.info-right p{line-height:25px; font-size:13px;}

.item_code{font-family: 'Noto Sans JP', sans-serif; margin-bottom:25%;}
.code-right{width:90%; padding:0 5%;}
.code-left{width:90%; padding:0 5%;}
.code-left h3{font-size:16px; margin-bottom:6%;}
.code-left p{line-height:25px; font-size:13px;}
	
.item_code{display:flex; flex-direction:column;}
.con1{order:2;}
.con2{order:1;}

.back_inner{margin:-50px auto 0; padding:80px 10px 20px;}
.back:before{padding-bottom:80px;}
	
}