@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.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: 23px;
}
}

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

.stHE2 {
	margin: 2.6em 0 0 0; 
	padding: 0 0 2em 0; 
	font-size: 20px;
	line-height: 1.4em !important;
	font-weight: normal; 
  border-bottom: 1px solid #999;
}
.stHE2 span {
	font-size: 11px;
  display: block;
}
@media screen and (min-width: 768px) {
	.stHE2 {
	font-size: /*28px*/1.8vmax;
}
  .stHE2 span {
	font-size: 12px;
}
}
@media screen and (min-width: 1240px) {
	.stHE2 {
	font-size: 24px;
}
  .stHE2 span {
	font-size: 14px;
}
}

.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: 23px;
}
}

.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;
}
}


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

.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 2.5%;
	text-align: center;
}
.kodawari .txtRight {
	padding: 0 2.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: 330px;
		margin-bottom: 0;
	}
	.kodawari .half .nor {
		padding: 1.3em 0 0 0;
		margin: 0;
	}

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

@media screen and (min-width: 900px) {
	.kodawari .half img {
		max-width: 380px;
	}
}




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

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

.box .imgTxt .txt {
	padding: 65% 8% 8% 0;
	width: 84%;
	display: table-cell;
	vertical-align: middle;
}
@media screen and (min-width: 768px) {
.box .imgTxt .txt {
	padding: 15% 4% 15% 6%;
	width: 40%;
	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 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: 16px !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: 13px; margin-top: -0.7em; padding: 0 0 0.7em 0; display: table-cell;vertical-align: middle; height: 90px; 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;
}

/* fs *** hana adjustment */
@media screen and (min-width: 768px) and (max-width: 1000px){
      .stHA, .txtwhite, .threeList li .listName { font-size: 22px;}
    .stHC, .stHD, .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 .half img{ width: 350px;}
    .kodawari div.half:first-child{ text-align: left !important;}
    .kodawari .half p.nor{ font-size: 16px !important;}
    .kodawari .txtLeft{ padding: 0;}
/* slider_catch */
  #imabari_res .wrapperOut .slickSlider .slider_catch, #imabari_res .wrapperOut .slickSlider .slider_catch2 { font-size: 32px;}
/* 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; }
/*　.stHE　*/
    .stHE{ font-size: 24px;}
/* 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% 2em; }
    .itemList li:nth-of-type(3n+2){margin: 0 2%;}
    .itemList li img{ width: 50%;}
*/
/* w2item */
    .itemList li { width: 40%; padding: 0 3% 8em;}
    .itemList li img{ display: block; width: 50% !important; margin: 0 auto;}
/*iframe アイテムリスト*/
    .commonitemlist{
    display: inherit;
    width: 100%;
    height: 1500px;
    }
    #commonplace{
    display: none;
    }
    
/* izumm関連非表示 ***common */
    #imabari_res{ background: none;}
    footer, header, .header, .spMenu, #scrollUp { display: none;}
}