@charset "utf-8";

/*
************************************************************************
* 和装色掛下コーディネート

************************************************************************
*/

/*
************************************************************************
* 比較画像
************************************************************************
*/
.image-compare{
	width: 90%;
	margin: 0 auto;
	display:flex;
	justify-content:space-between;
	background:url(../../../../irokakeshita/_img/compare_arrow.png)no-repeat center center/50px;
}
.image-compare-list{
	width:40%;
}
.title{
	font-size: 1.7em;
	font-weight: bold;
}
.option_price {
	box-sizing: border-box;
	border: 1px #aaa solid;
	border-radius: 20px;
	padding: 25px 70px;
	display: flex;
	flex-wrap: wrap;
}
.option_price_list{
	width:50%;
	font-size:1.2em;
}
.price {
	margin-left: .5em;
	font-size: 1.8em;
	font-weight: 500;
}
.yen {
	font-size: 1.65em;
	font-weight: 500;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.image-compare{
		width: 100%;
		background:url(../../../../irokakeshita/_img/compare_arrow.png)no-repeat center center/20px;
	}
	.image-compare-list{
		width:45%;
	}
	.option_price{
		display: inline-block;
		border-radius: 15px;
		width: 100%;
		padding: 10px 40px;
	}
	.option_price_list{
		width:100%;
	}
	.price{
		margin-left: .2em;
		font-size: 1.4em;
	}
	.yen{
		font-size: 1.4em;
	}
}

/*
************************************************************************
* nav
************************************************************************
*/
.irokake_nav {
	list-style: none;
	display: flex;
	justify-content:space-between;
}
.irokake_nav li {
	margin-left: 1em;
	width: calc(85%/5);
	text-align: center;
}
.irokake_nav li:last-of-type {
	margin-left: -1.3em;
	margin-right: 1.3em;
}
.irokake_nav li p{
	font-size: 1.6em;
	font-weight: bold;
}
.irokake_nav li p:after{
	content: "";
	display: inline-block;
	width: .8em;
	height: 0.8em;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(45deg);
	margin-left: 0.8em;
	margin-bottom: 0.15em;
}
.irokake_nav li a{
	display:inline-block;
	width:100%;
	height:100%;
}
.irokake_nav li a:hover{
	text-decoration:none;
	opacity:.6;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.irokake_nav{
		flex-wrap: wrap;
	}
	.irokake_nav li {
		margin-left: 0;
		width: calc(100%/2);
	}
	.irokake_nav li:last-of-type{
		margin-left: 0;
		margin-right: 0;
	}
	.irokake_nav li p {
		font-size: 1.2em;
	}
}

/*
************************************************************************
* 和装色掛下コーディネート
************************************************************************
*/

.coodinate_box{
	padding: 35px 0;
}
.coodinate_box_text{
	position:relative;
	/*width:40%;*/
}
.coodinate_box_text h3 {
	font-size: 2.2em;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 30px;
}
.coodinate_box_text h3 .num{
	position:relative;
	font-size: 1.3em;
	margin-right: .7em;
	vertical-align: -3px;
}
.coodinate_box_text h3 .num:before {
	position: absolute;
	left: 0;
	top: -5px;
	content: "オススメ";
	font-size: .25em;
	letter-spacing: 1.8px;
	display: inline-block;
}
.coodinate_box_text h3 .cap:before {
	position: absolute;
	left: 0;
	top: -1em;
	width: 100px;
	font-size: .35em;
}
.coodinate_box_text h3 .cap.sishu:before{
	content: "刺繍衿";
}
.coodinate_box_text h3 .cap.kake:before{
	content: "色掛下";
}
.coodinate_box_text h3 .cap.goten:before{
	content: "5点セット";
}
.coodinate_box_text h3 .cap.kasane:before{
	content: "重ね衿";
}
.coodinate_box_text p {
	margin-bottom: 20px;
}

.img_wrap {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.img_main{
	width:80%;
}
.img_main ul{
	list-style: none;
	display: flex;
	justify-content:space-between;
}
.img_main ul li{
	margin-left:0;
	width: 49%;
}
.img_sub{
	width: 18.4%;
}
.img_sub ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.img_sub ul li{
	margin-left:0;
}
.img_sub ul li img{
	height:auto;
	width:auto;
}
.img_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.img_list li{
	width:calc(90%/4);
	margin-left: 0;
	margin-bottom: 35px;
}
.img_list li figure figcaption{
	margin-top:5px;
	font-size:1.1em;
}
.gallery-link{
	position: absolute;
	right: 0;
	bottom: -10px;
}
/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
	
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.row > hr
	{
		margin-top: 6.66666vw;
	}

	.coodinate_box{
		display:inline-block;
		padding:0;
		margin-bottom: 30px;
	}
	.coodinate_box_text{
		width:100%;
	}
	.coodinate_box_text h3 {
		font-size: 1.9em;
		margin-bottom: 15px;
}
	.coodinate_box_text h3 .num {
		font-size: 1.38em;
		letter-spacing: 1.5px;
		margin-right: .4em;
	}
	.coodinate_box_text h3 .num:before {
		transform: scale(1.1);
		letter-spacing: -0.075em;
		margin-left: 2px;
	}
	.img_wrap{
		display:block;
	}
	.img_main,
	.img_sub{
		width:100%;
	}
	.img_sub ul {
		flex-direction: row;
		justify-content: space-between;
		margin-top:5px;
	}
	.img_sub ul li{
		width:calc(96%/3);
	}
	.img_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.img_list li{
		width:calc(94%/2);
		margin-bottom: 20px;
	}
	.gallery-link {
		position: relative;
		bottom: -10px;
		text-align: center;
	}
	.gallery-link .button{
		/*border:none;*/
	}
}