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

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

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: 1.8em;
}
@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 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: /*28px*/1.9vmax;
	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;
	font-weight: normal;
}
@media screen and (min-width: 1240px) {
	font-size: /*24px*/1.9vmax;
}
@media screen and (min-width: 1240px) {
	.stH1P {
	font-size: 24px;
	}
}

.stHLogo1 {
	display: inline-block;
	padding: 0.55em 1rem;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	font-size: 23px;
	font-weight: normal;
	margin: 100px 0 15px 0;
}


/******************************************
　素材
******************************************/
.sozai {
	display: block;
	width: 100%;
	margin: 4em 0 0 0;
	padding: 0 0 4em 0;
	border-bottom: 1px solid #999;
}

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

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

@media screen and (min-width: 768px) {
	.sozai {
		display: table;
		width: 100%;
		margin: 4em 0 0 0;
		padding: 0 0 4em 0;
	}
	.sozai .half {
		display: table-cell;
		vertical-align: middle;
		width: 50%;
		padding: 0;
	}
	.sozai .half img {
		max-width: 100%;
		margin-bottom: 0;
	}
	.sozai .half .nor {
		padding: 1.3em 0 0 0;
		margin: 0;
	}
	.sozai .txtLeft {
	padding: 0;
}
.sozai .txtRight {
	padding: 0;
}

}

.sozai .half .stHE {
	margin-top: 65px;
}
@media screen and (min-width: 768px) {
	.sozai .half .stHE {
	margin-top: 65px;
}
}
@media screen and (min-width: 900px) {
	.sozai .half .stHE {
	margin-top: 95px;
}
}

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

.kodawariList {
  margin: 0;
  padding: 0;
}
.kodawariList li {
 list-style: none;
  width: 93%;
  margin: 0 3.5%;
}

.kodawariList li img {
  width: 100%;
}

.kodawariList li h4 {
  width: 100%;
  text-align: center;
	margin: 20px 0 20px 0; 
	padding: 0; 
	font-size: 18px;
	font-weight: normal; 
	line-height: 1.8em;
}
.kodawariList li p {
	padding: 0 0 45px 0;
  text-align: left;
}
@media screen and (min-width: 768px) {
.kodawariList li h4 {
	font-size: /*22px*/1.6vmax;
	}
}
@media screen and (min-width: 1240px) {
.kodawariList li {
/*  margin: 0 5% 4% 2%;*/
  width: 43%;
/*  float: left;*/
    display: inline-block;
    vertical-align: top;
}
.kodawariList li:nth-child(2n) {
  margin: 0 2% 4% 5%;
}
  
.kodawariList li h4 {
	font-size: 22px;
		margin: 30px 0 30px 0; 
}
.kodawariList li p {
	padding: 0; 
}
}



.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_sp.jpg) no-repeat center top; background-size: contain !important;}
@media screen and (min-width: 768px) {
	.box.subBG {background: url(../img/top/sub.jpg) no-repeat center top;background-size: cover!important; }
}

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

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

.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 130px 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: 20px !important;
	margin: 0 auto 60px auto;
}
	ul.kodawariList p.nor {
	font-size: 16px !important;
}
}

.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 ---------- */
/*common*/
.itemList li.sameHeight1 img{
    border-bottom: 1px #999999 solid;
}
.itemTxt,
.itemList .txtRight{
    display: none !important;
}

@media screen and (min-width: 768px){
#imabari_res .wrapperOut .slickSlider img { width: 100%;}
img.max { width: 100%; }
    ul.photoList li img{ width: 100%;}
}


/* fs *** hana adjustment */
@media screen and (min-width: 768px) and (max-width: 1000px){
      .stHA, .txtwhite, .threeList li .listName { font-size: 22px;}
    .stHC, .stHD, .stHE, .stHF span, h4.stHI, h4.stHJ, h3.stHJ { font-size: 28px;}   
    p.lineP, p.nor, h4.stHC-1 { font-size: 18px !important;}
    p.nor2{ font-size: 16px !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;}
    h3.stHF3{ font-size: 28px !important;}
    .kodawari .half{ width: 43%;}
    .kodawari .txtLeft{ padding: 0;}
/* slider_catch */
  #imabari_res .wrapperOut .slickSlider .slider_catch { font-size: 35px;} /* hana.1005 */
/* subBH */
    .box .imgTxt .txt { padding: 20% 0 10% 4%;}
    .subBG .imgTxt .txt h3.stHB{ font-size: 24px; }
    .subBG .imgTxt .txt .txttxt{ font-size: 16px !important; }
    
/* fs *** kodawariList */
    .kodawariList li{display: inline-block; width: 40%; padding: 0 1% 2em !important
        ; vertical-align: top;}
    .kodawariList li h4{ font-size: 24px; }
    .kodawariList br.pc{ display: none;}
/* fs *** itemlist */
/* common */
    .itemTxt,
    .itemList .txtRight{ display: inherit !important;}
    .itemTxt,
    .itemList .txtRight{ display: block !important;}
    
    .itemList { padding: 0 20px; }
    .itemList .sameHeight1 img{ border: none !important;}
    .itemList li .itemName{ font-size: 12px;}

/* w3item */
/*
    .itemList li { width: 30%; padding: 0 1% 4em; }
    .itemList li:nth-of-type(3n+2){margin: 0 2%;}
*/
    
/* w2item */
    .itemList li { width: 40%; padding: 0 3% 8em;}
    .itemList li img{ display: block; width: 50% !important; margin: 0 auto;}
    
/* 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, .threeList li .listName { font-size: 22px;}
    .stHB, .stHC, .stHD, .stHE, .stHF span, h4.stHI, h4.stHJ, h3.stHJ { font-size: 28px;}   
    p.txttxt, p.lineP, p.nor, h4.stHC-1 { font-size: 18px !important;}
    p.nor2{ font-size: 16px !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;}
    h3.stHF3{ font-size: 28px !important;}
    .kodawari .half{ width: 43%;}
    .kodawari .txtLeft{ padding: 0; }
    
    .itemList { padding: 0 20px; }
    .itemList li { width: 30%; padding: 0 1% 4em; }
    .itemList li:nth-of-type(3n+2){margin: 0 2%;}
    .itemList .sameHeight1 img{ border: none;}
    .itemList li .itemName{ font-size: 12px;}
    #imabari_res{ background: none;}
    footer, header, .header, .spMenu, #scrollUp { display: none;}
    
    
/*iframe アイテムリスト*/
    .commonitemlist{
    display: inherit;
    width: 100%;
    height: 1500px;
    }
    #commonplace{
    display: none;
    }
    
/* izumm関連非表示 ***common */
    #imabari_res{ background: none;}
    footer, header, .header, .spMenu, #scrollUp { display: none;}
}