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

/******************************************
　見出し
******************************************/
h1.stH1 {
	margin: 70px 0 0 0; padding: 0;
}
@media screen and (min-width: 768px) {
	h1.stH1 {
	margin: 100px 0 0 0; padding: 0;
}
}

h3.stH1 {
	margin: 20px 0 0 0; padding: 0;
}
@media screen and (min-width: 768px) {
	h3.stH1 {
	margin: 50px 0 0 0; padding: 0;
}
}

.stHA {
	margin: 30px 0 70px 0; 
	padding: 0; 
	font-size: 18px;
	font-weight: normal; 
	line-height: 1em;
}
@media screen and (min-width: 768px) {
	.stHA {
	font-size: /*22px*/1.6vmax;
	}
}
@media screen and (min-width: 1240px) {
	.stHA {
	font-size: 22px;
		margin: 40px 0 100px 0; 
}
}

.stHB {
	font-size: /*28px*/20px;
	color: #4c4d53;
	line-height: 1.4em !important;
	padding: 0 0 0.8em 0 !important;
	font-weight: normal;
}
@media screen and (min-width: 768px) {
	.stHB {
	font-size: /*28px*/1.9vmax;
}
	}
@media screen and (min-width: 1240px) {
	.stHB {
	font-size: 30px;
}
}

.stHC {
	font-size: 22px;
	line-height: 1.4em !important;
	padding: 0 0 0.8em 0 !important;
	font-weight: normal;
}
@media screen and (min-width: 768px) {
	.stHC {
	font-size: /*28px*/1.9vmax;
}
}
@media screen and (min-width: 1240px) {
	.stHC {
	font-size: 30px;
}
}

.stHD {
	font-size: 22px;
	line-height: 1.4em !important;
	padding: 0 1em 0.4em 1em !important;
	font-weight: normal;
	border-bottom: 1px solid #999999;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.stHD {
	font-size: /*28px*/1.9vmax;
}
}
@media screen and (min-width: 1240px) {
	.stHD {
	font-size: 30px;
}
}

.stHE {
	margin: 0; 
	padding: 0; 
	font-size: 22px;
	line-height: 1.4em !important;
	font-weight: normal; 
}
@media screen and (min-width: 768px) {
	.stHE {
	font-size: /*28px*/1.9vmax;
}
}
@media screen and (min-width: 1240px) {
	.stHE {
	font-size: 30px;
}
}

.stHF {
	margin: 0;
	padding: 0;
	line-height: 1em !important;
	margin-bottom: 4em;
	text-align: center;
}
.stHF span {
	display: inline-block;
	margin: 0 auto; 
	padding: 0 0.6em;
	background: #fff;
	font-size: 18px;
	line-height: 1em !important;
	font-weight: normal; 
}
@media screen and (min-width: 768px) {
.stHF span {
    font-size: 1.9vmax;
	/* font-size: 28px; hana.1004 */
	padding: 0 1.6em;
}
	}


.stHF:before {
	display: inline-block;
	content: "";
	width: 100%;
	background: #999;
	height: 1px;
	margin: 0 0 -1em 0;
	text-align: center !important;
}
@media screen and (min-width: 1240px) {
	.stHE {
	font-size: 30px;
}
}

.stH1P {
	font-size: 18px;
	line-height: 1.4em;
	padding: 0.5em 0 1em 0;
}
@media screen and (min-width: 1240px) {
	font-size: /*24px*/1.9vmax;
}
@media screen and (min-width: 1240px) {
	.stH1P {
	font-size: 24px;
	}
}


/******************************************
　こだわり
******************************************/

.kodawari {
	display: block;
	width: 100%;
	margin: 4em 0 0 0;
	padding: 0 0 4em 0;
	border-bottom: 1px solid #999;
}

.kodawari .half {
	display: block;
	width: 90%;
}
.kodawari .half img {
	max-width: 100%;
	margin-bottom: 20px;
}
.kodawari .half .nor {
	padding: 1.3em 0 0 0;
	margin: 0;
}

.kodawari .txtLeft {
	padding: 0 5%;
	text-align: center;
}
.kodawari .txtRight {
	padding: 0 5%;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.kodawari {
		display: table;
		width: 100%;
		margin: 4em 0 0 0;
		padding: 0 0 4em 0;
		border-bottom: 1px solid #999;
	}
	.kodawari .half {
		display: table-cell;
		vertical-align: middle;
		width: 45%;
	}
	.kodawari .half img {
		max-width: 335px;
		margin-bottom: 0;
	}
	.kodawari .half .nor {
		padding: 1.3em 0 0 0;
		margin: 0;
	}

	.kodawari .txtLeft {
		padding-left: 5%;
		text-align: left;
	}
	.kodawari .txtRight {
		padding-right: 5%;
		text-align: right;
	}
}


.colorsbox {
		display: block;
		width: 100%;
		margin: 2em 0;
}

.colorsbox .box33 {
	display: block;
		vertical-align: middle;
		width: 100%;
	padding: 0;
	text-align: center;
}

.colorsbox .box33:last-child {
	padding: 2em 0;
	border: 1px solid #d9d9d9;
	width: calc(100% - 2px);
}
@media screen and (min-width: 414px) {
.colorsbox {
		margin: 2em 0;
}
	
.colorsbox .box33 {
	display: block;
		vertical-align: middle;
		width: 49%;
	padding: 0 1% 1% 0;
	text-align: center;
	float: left;
}

.colorsbox .box33:nth-child(2) {
	padding: 0 0 1% 1%;
}	
	
.colorsbox .box33:last-child {
	width: calc(100% - 2px);
	padding: 2em 0;
	border: 1px solid #d9d9d9;
}
	.colorsbox .box33 .txtNormal {
	margin-bottom: 7px !important ; 
}
	.colorsbox .box33 .txtsmall {
		margin-top: 13px !important ; 
	}
}
@media screen and (min-width: 768px) {
.colorsbox {
		display: table;
}

.colorsbox .box33 {
	display: table-cell;
		vertical-align: middle;
		width: 32%;
	padding: 0 2% 0 0;
	float: none;
}

.colorsbox .box33:nth-child(2) {
	display: table-cell;
		vertical-align: middle;
		width: 32%;
	padding: 0 2% 0 0;
}

.colorsbox .box33:last-child {
	display: table-cell;
	vertical-align: middle;
	width: calc(32% - 2px);
	padding: 0 0 -2px 0;
}
	.colorsbox .box33 .txtNormal {
	margin-bottom: 14px !important; 
}
	.colorsbox .box33 .txtsmall {
		margin-top: 18px !important ; 
	}
}

/******************************************
　画像の上に文字
******************************************/

.box {
	position: relative;
	background-size: cover !important;
	display: table;
	width: 100%;
}

.box.subBG {background:#f6f5f1 url(../img/top/sub@2x_sp.jpg) no-repeat center top; background-size: contain !important;}
@media screen and (min-width: 768px) {
	.box.subBG {background: url(../img/top/sub@2x.jpg) no-repeat center top;background-size: cover!important; }
}

.box .imgTxt {
	display: table-cell;
	vertical-align: middle;
}

.box .imgTxt .txt {
	padding: 90% 8% 8% 0;
	width: 84%;
	display: table-cell;
	vertical-align: middle;
}
@media screen and (min-width: 768px) {
.box .imgTxt .txt {
	padding: 8% 4% 8% 0;
	width: 46%;
	display: table-cell;
	vertical-align: middle;
}
}

.box .imgTxt2 {
	position: absolute;
	top: calc(50% - 0.5em);
	display: block;
	width: 100%;
}

.box .imgTxt3 {
	position: absolute;
	top: calc(50% - 16px);
	display: block;
	width: 100%;
}
.box .imgTxt3 img{
	width: 102px;
}

@media screen and (min-width: 768px) {
	.box .imgTxt3 {
	top: calc(50% - 32px);
}
.box .imgTxt3 img{
	width: 203px;
}
}

.txtgray {
	color: #9fa0a0;
	font-size: 18px;
	line-height: 1.4em !important;
	padding: 0 0 1em 0 !important;
}
@media screen and (min-width: 768px) {
	.txtgray {
	font-size: 22px;
		padding: 0 0 0.4em 0 !important;
}
}

.txtwhite {
	color: #fff;
	font-size: /*22px*/2vmax;
	line-height: 1.4em !important;
	padding: 0 0 0.4em 0 !important;
}
@media screen and (min-width: 1240px) {
	.txtwhite {
	font-size: 22px;
}
}

.txttxt {
	font-size: 14px !important;
	line-height: 1.6em !important;
}
@media screen and (min-width: 768px) {
	.txttxt {
	font-size: /*18px*/1.3vmax !important;
}
}
@media screen and (min-width: 1240px) {
	.txttxt {
	font-size: 18px !important;
}
}

.half {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
@media screen and (min-width: 768px) {
	.half {
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}
}

.lineP {
	font-size: 14px !important;
	line-height: 1.6em !important;
	text-align: left;
	padding: 2.4em 1.8em;
	border-bottom: 1px solid #999999;
	border-top: 1px solid #999999;
	margin: 0 auto 100px auto;
	font-family:thic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
}

@media screen and (min-width: 768px) {
	.lineP {
	margin: 0 auto 140px auto;
	font-size: /*18px*/1.3vmax !important;
	display: inline-block;
	text-align: center;
	font-family:YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
		}
}
@media screen and (min-width: 1240px) {
	.lineP {
	font-size: 18px !important;
	margin: 0 auto 180px auto;
		
}

}

@media screen and (min-width: 1240px) {
	.pages .lineP {
	font-size: 16px !important;
}
}


.nor {
	font-size: 16px !important;
	line-height: 1.6em !important;
	padding: 2.4em 0;
	margin: 0 auto 40px auto;
	display: block;
	text-align: center;
}
@media screen and (min-width: 768px) {
.nor {
	font-size: /*18px*/1.3vmax !important;
	text-align: left;
}
}
@media screen and (min-width: 1240px) {
	.nor {
	font-size: 18px !important;
	margin: 0 auto 60px auto;
}
}

.half .stHE {
	text-align: center;
}
@media screen and (min-width: 768px) {
.half .stHE {
	text-align: left;
}
	}

/******************************************
　カテゴリLOOKBOOK
******************************************/
.photoList { margin:50px 0 0 0; padding: 0; width: 100%;}
.photoList li { display: block;width: 50%; padding: 0; font-size: 0; line-height: 0; margin: 0; float: left; }
.photoList li:first-child,.photoList li:nth-child(3n+1) { width: 100%; }
.photoList li:nth-child(3n+2) { width: calc(50% - 10px); padding: 20px 10px 20px 0; }
.photoList li:nth-child(3n) { width: calc(50% - 10px); padding: 20px 0 20px 10px; }
.photoList li img { max-width: 100%; }
@media screen and (min-width: 768px) {
.photoList li:nth-child(3n+2) { width: calc(50% - 15px); padding: 30px 15px 30px 0; }
.photoList li:nth-child(3n) { width: calc(50% - 15px); padding: 30px 0 30px 15px; }	
}

/******************************************
　カテゴリアイテムリスト
******************************************/
.itemList { margin: 0 auto; padding: 0 20px; max-width: 1500px; text-align: center; }
.itemList li { display: inline-block; width:47%; padding: 0 1.5% 4em 1.5%; vertical-align: top;}
.itemList li img { width: 85%; }
.itemList li .itemName { font-size: 14px; margin-top: -0.7em; padding: 0 0 0.7em 0; display: table-cell;vertical-align: middle; height: 60px; width: 100%;}
.itemList li .itemTxt { font-size: 12px; padding-top: 15px; display: block; border-top: 1px solid #6e6d6c; text-align: left;}
.itemList li p { line-height: 1.3em !important;font-family:thic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif; }
.itemList li a:link, 
.itemList li a:visited { text-decoration: none !important; }
.itemList li a:hover, 
.itemList li a:active { text-decoration: none !important; }


@media screen and (min-width: 414px) {
	.itemList li { width:30.3333%; padding: 0 1.5% 4em 1.5%; }
}
@media screen and (min-width: 768px) {
.itemList { margin: 0 auto; padding: 0 20px; max-width: 80%; text-align: center; }
	.itemList { padding: 0 50px; }
	.itemList li { width:20%; padding: 0 2.5% 4em 2.5%; }
}
/*@media screen and (min-width: 1000px) {
	.itemList { padding: 0 100px; }
	.itemList li { width:14%; padding: 0 3% 4em 3%; }
}*/

/******************************************
　カテゴリカラー展開
******************************************/
.colorList { margin: 0 auto; padding: 0 50px; max-width: 1500px; text-align: center; }
.colorList li { display: inline-block; width:100%; padding: 0 0 4em 0; vertical-align: top; }
.colorList li img{ max-width: 65%; }
.colorList li .colorsName{font-size: 16px; font-weight: normal;border-bottom: 1px solid #999999; width: 100%; text-align: center; padding: 1em 0 0.2em 0; margin: 0 0 1em 0;}
.colorList li .colorsTxt{font-size: 12px; font-weight: normal;width: 100%; text-align: center; line-height: 1.3em;}
@media screen and (min-width: 414px) {
.colorList { padding: 0 20px; }
.colorList li { width:46%; padding: 0 2% 4em 2%; }
	.colorList li img{ max-width: 100%; }
	.colorList li .colorsTxt{line-height: 1.6em;}
}
@media screen and (min-width: 768px) {
	.colorList li .colorsName{font-size: /*22px*/1.6vmax;}
	.colorList li .colorsTxt{font-size: /*18px*/1.2vmax;}
	.colorList { padding: 0 50px; }
.colorList li { width:29.3333%; padding: 0 2% 4em 2%;  }
}
@media screen and (min-width: 1000px) {
	.colorList { padding: 0 100px; }
}
@media screen and (min-width: 1240px) {
	.colorList li .colorsName{font-size: 22px;}
.colorList li .colorsTxt{font-size: 15px;}
}

/******************************************
　画像関連
******************************************/
.txtsmall {
	font-size: 13px;
}
@media screen and (min-width: 768px) {
	font-size: 1.3vmax;
}
@media screen and (min-width: 1240px) {
	.txtsmall {
	font-size: 13px;
}
}
.txtNormal {
	/*16px*/1.1vmax;
}
@media screen and (min-width: 1240px) {
	.txtNormal {
	16px;
}
}
img.max {
	max-width: 100%;
}


/* izumm *** hana adjustment */

/*
ダウン #down
5重ガーゼ  #gaze
*/

/*common*/
#gaze .txttxt,
#down .txttxt{
    line-height: 1.8em !important;
}
/*@media screen and (min-width: 768px) {*/
.itemTxt,
.txtRight{
    display: none !important;
}
.sameHeight1 img{ border-bottom: 1px solid #999999;}
/*}*/

@media screen and (max-width: 767px){
.itemList li .itemName{
    font-size: 12px;
    line-height: 2em;
}
.itemList .pc{
    display: block;
}
}
/*down*/
@media screen and (min-width: 768px) {
#down .box .imgTxt .txt {
	padding: 6% 0 8% 8%;
	width: 50%;
	display: table-cell;
	vertical-align: middle;
}
	.txtgray {
	font-size: 22px;
		padding: 0 0 1em 0 !important;
}
    #down .stHA{
    line-height: 1.4em;}

}

@media screen and (max-width: 767px) {
#down .box .imgTxt .txt {
	padding: 90% 0 8% 8%;
	width: 84%;
	display: table-cell;
	vertical-align: middle;
}
}


/* fs *** hana adjustment */

@media screen and (min-width: 768px) and (max-width: 1000px){
    #imabari_res .wrapperOut .slickSlider .slider_catch { font-size: 47px;} /* hana.1005 */
    .stHA, .txtwhite { font-size: 22px;}
    .stHB, .stHC, .stHD, .stHE, .stHF span { font-size: 28px;}   
    p.txttxt, p.lineP, p.nor { font-size: 18px !important;}
    .colorList { padding: 0 40px !important;}
    .colorList li { width: 28%;}
    p.colorsName { font-size: 22px !important; margin: 0 0 0.5ems 0 !important;}
    p.colorsTxt { font-size: 15px !important; line-height: 1.7em !important;}

    .kodawari .half{ width: 43%;}
    .kodawari .txtLeft{ padding: 0; }
    
    .itemList { padding: 0 50px; }
    .itemList li { width: 23%; padding: 0 1% 4em 1%; }
    .itemList li .itemName{ font-size: 12px;}
    #imabari_res{ background: none;}
    footer, header, .header, .spMenu, #scrollUp { display: none;}
    #down .box .imgTxt .txt { padding: 6% 0 8% 4%;}
    #down .box .imgTxt .txt .txttxt br.pc{ display: inline !important;}
    .itemTxt,.txtRight{ display: inherit!important;}
    .sameHeight1 img{ border-bottom: none;}

}