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

body {
	background-color:#FFFFFF;
	margin:0;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	line-height:1.6em;
    -webkit-text-size-adjust: none;
	font-size:13px;
}
p {
	margin-bottom:0;
}
div {
	box-sizing:border-box;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.block {
	max-width: 1600px;
	margin-left:auto;
	margin-right:auto;
}
ul,li {
	margin:0;
	padding:0;
	list-style:none;
}

header {
	margin: 25px auto 15px auto;
}

header #copic_x_miffy {
	width: 32%;
	height:auto;
	margin-left: 3%;
}
footer {
	margin-top: 20px;
	text-align:center;
}
	

#main,
#mainSubWrap {
	float: left;
}
#sub,
#link {
	float: right;
}
#mainSubWrap {
	width: 88%;
	background-image: url(https://copic.jp/miffy/images/pen.jpg);
	background-repeat:no-repeat;
	background-position:44% bottom;
	background-size: 15%;
}
#main {
	margin-left:  1.5%;
	width: 56.5%;
}
#sub {
	width: 37%;
	margin-right:  5%;
}
#link {
	width: 8.5%;
	margin-right:2%;
	margin-top: 115px;
}


#main #mainImage {
	width: 73%;
	height:auto;
	/*margin-top: -150px;*/
	margin-top: -17%;
	margin-left:1%;
	margin-bottom:2%;
}
#main #color6 {
	width: 26%;
	height:auto;
	margin-left:65%;
}
#main #copy img {
	width: 60%;
	height:auto;
	/*margin-top: -150px;*/
	margin-top: 1%;
	margin-left: 5.5%;
	margin-bottom:2%;
}
#sub h1 {
	font-size: 24px;
	margin-bottom:0.6em;
	margin-top: 2%;
	line-height:1.2em;
}
#sub p#catch {
	font-size: 13px;
	color:#F27700;
	margin-bottom:1.4em;
	line-height:1.5em;
}
#sub ul#set {
	font-size: 13px ;
	color:#525252;
	margin-bottom:1.3em;
}
#sub ul#set li{
	font-size: 12px ;
	color:#888;
	margin-top: 0.6em;
}
#sub a#preceding {
	font-size: 14px ;
	color:#C70B0E;
	line-height:1.4em;
	padding: 1em;
	background-color:#F4F4F4;
	border-radius: 5px;
	display:block;
	text-decoration:none;
	margin-top:15px;
	margin-bottom:15px;
}
#sub a#preceding:hover {
	background-color:#FFEFEF;
}
#sub p.attText {
	font-size: 12px ;
	color:#858585;
	line-height:1.3em;
	margin-top:0.5em;
}
#sub h3 {
	font-size: 15px ;
	margin-bottom: 0.5em;
	color:#000000;
	line-height:1.4em;
	padding: 0 0 5px 15%;
	border-bottom: solid 1px #247033;
	margin-left:-15%;
	display:inline;
	margin-bottom:0.5em;
}

#sub #package {
	float: left;
	width: 36%;
	margin-left:  -10%;
	margin-top: 18px;
}
#sub  #package img {
	width: 90%;
	height:auto;
}
#sub #packageBox {
	margin-top: 10px;
	float: right;
	width: 65%;
	font-family: Helvetica, Arial, sans-serif;
	color: #AAA;
}

#sub #packageBox .setPhoto img { 
	width:55%;
	height: auto;
	border-radius:5px;
}
#sub #packageBox #price { 
	margin: 1rem 0;
}


#sub #packageBox .y08,
#sub #packageBox .r05,
#sub #packageBox .b18,
#sub #packageBox .e57,
#sub #packageBox .yg67,
#sub #packageBox .w5 {
	padding: 1px 3px;
	border-radius: 5px;
	color:#FFFFFF;
	margin-top:0.5em;
	margin-left: 1.5em;
	margin-right:0.5em;
	font-family: Helvetica, Arial, sans-serif;
	font-weight:bold;
}
#sub #packageBox ul#set li span.y08 {
	background-color: #FDCD02;
}
#sub #packageBox ul#set li span.r05 {
	background-color: #EC6101;
}
#sub #packageBox ul#set li span.b18 {
	background-color: #004D97;
}
#sub #packageBox ul#set li span.e57 {
		background-color: #914E24;
}
#sub #packageBox ul#set li span.yg67 {
	background-color: #16722B;
}
#sub #packageBox ul#set li span.w5 {
	background-color: #A2836D;
}




#link ul li img{
	width: 100%;
	height:auto;
	margin-bottom:0px;
}
#link ul li img#miffyTen {
	margin-bottom: 20px;
}




#colors {
	background-color: #A2836D;
}
#colors li#y08,
#colors li#r05,
#colors li#b18,
#colors li#e57,
#colors li#yg67,
#colors li#w5 {
	float:left;
	width:16.666%;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align:center;
}
#colors li#y08 img,
#colors li#r05 img,
#colors li#b18 img,
#colors li#e57 img,
#colors li#yg67 img,
#colors li#w5 img {
	width:40%;
	height: auto;
}

#colors li#y08 {
	background-color: #FDCD02;
}
#colors li#r05 {
	background-color: #EC6101;
}
#colors li#b18 {
	background-color: #004D97;
}
#colors li#e57 {
	background-color: #914E24;
}
#colors li#yg67 {
	background-color: #16722B;
}
#colors li#w5 {
	background-color: #A2836D;
}

footer #copyR{
	font-size: 10px;
	color:#A7A7A7;
}


@media screen and (max-width: 1100px)  {
	#main #mainImage {
		margin-top: -40px;
	}
	#sub h1 {
	font-size: 20px;
	}
	#sub ul#set  li {
		margin-top: 0;
		font-size:12px;
	}
	#sub p#catch {
		font-size: 14px;
		margin-bottom: 1.8em;
		line-height:1.4em;
	}
	#sub #preceding {
		font-size: 13px ;
	}
	#sub #packageBox .setPhoto img { 
		width: 70%;
		height: auto;
	}
	#sub #packageBox .y08,
	#sub #packageBox .r05,
	#sub #packageBox .b18,
	#sub #packageBox .e57,
	#sub #packageBox .yg67,
	#sub #packageBox .w5 {
		margin-left: 0em;
	}
	#sub h3 {
		padding: 0;
		border-bottom: none;
		margin-left:0;
		display: block;
	}
}


@media screen and (max-width: 900px) {
	#link {
		width: 100%;
		float:none;
		margin-top:0;
	}
	#link ul {
		text-align:center;	
	}
	#link ul li {
		display: inline-block;	
		width:25%;
	}
	#link ul li img {
		width: 75%;	
	}
	#main #mainImage {
		width: 95%;
		margin-top: -20px;

	}
	#mainSubWrap {
	width: 100%;
	  content: "";
	  clear: both;
	  display: block;
	  margin-bottom: 35px;
  	}
	header {
		text-align: center;
	}
	header #copic_x_miffy {
		width: 75%;
		margin-left:0;
	}
	#mainSubWrap {
		background-image: none;
	}
	#sub #package {
		margin-left: 0;
		margin-top: 0;
		width: 48%;
	}
	#sub #packageBox {
		width: 48%;
	}
	#link ul li img#miffyTen {
		margin-bottom: 0;
	}
	#sub #packageBox .setPhoto img { 
		width: 85%;
		height: auto;
	}
	#main #copy img{
		width: 85%;
		height:auto;
		margin-left: 4%;
	}
}





@media screen and (max-width: 640px) {
	#main,
	#sub,
	#link {
		width: 100%;
		float:none;
		margin-left:0;
	}
	#sub {
		margin-left:0;
		margin-right:0;		
		padding-left:10px;
		padding-right:10px;
	}

	#sub h1 {
		font-size: 24px;
		text-align: center;
	}
	#sub ul#set  li {
		font-size:15px;
		margin-top: 0.6em;
	}
	#sub h3 {
		background-color: #F8ECEC;
		padding: 4px;
		text-align:center;
	}
	#link ul li {
		display: inline-block;
	}
	#main #mainImage {
		width: 80%;
		margin-top: -80px;
		margin-left:   10%;
		margin-right: 10%;
	}
#colors li#y08 img,
#colors li#r05 img,
#colors li#b18 img,
#colors li#e57 img,
#colors li#yg67 img,
#colors li#w5 img {
	width:60%;
	height: auto;
}
	#link ul li {
		width:30%;
	}
	#link ul li img {
		width:90%;	
	}
	#main #copy img {
		width: 90%;
		height:auto;
		margin-left: 0;
	}
	#main #copy {
		text-align: center;
	}

}