@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css");
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');







.tl26-box1 {
	
    width:80%; height:auto; border:0; vertical-align:bottom;　
	padding: 0em 0em;
    margin: 0em 0em;
	margin-bottom:  0em;
	margin-left: auto;
    margin-right: auto;
}

.tl26-box1 p {
    margin: 0px; 
    padding: 0px;
	line-height: 1.8em;
	text-align:left;
	font-size: 14px;
	margin-bottom:  1em;
}



@media screen and (max-width:780px){
 
.tl26-box1 {
    width:95%; height:auto; border:0; vertical-align:bottom;　
	padding: 0em 0em;
    margin: 0em 0em;
	margin-bottom:  0em;
	margin-left: auto;
    margin-right: auto;
	
}
	
.tl26-box1 p {
	font-size: 11px;
	margin-bottom:  1em;
}	
}






/* =================================================================
商品一覧
=================================================================*/
/* =================================================================
  15-Image Absolute Grid (どの画面幅でも完全固定)
================================================================= */

/* 全体グリッドコンテナ */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 左右ぴったり2等分 */
  gap: 15px 20px; /* 縦余白 15px / 横余白 20px */
  width: 100%;
  max-width: 900px; /* 全体の最大横幅 */
  margin: 0 auto;
  padding: 20px 10px;
  box-sizing: border-box;
}

/* 画像の表示領域設定 */
.lookbook-grid .item {
  width: 100%;
  overflow: hidden;
}

.lookbook-grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠線内で隙間なく綺麗にフィット */
  display: block;
}

/* -----------------------------------------------------------------
   各画像の配置と「高さ範囲」の絶対固定
----------------------------------------------------------------- */

/* 1枚目: 最上部・中央 */
.lookbook-grid .item-1 {
  grid-column: 1 / 3;
  width: 70%;
  justify-self: center;
  margin-bottom: 20px;
}

/* 2枚目: 左上（横長） */
.lookbook-grid .item-2 {
  grid-column: 1;
  grid-row: 2 / span 3;
}

/* 3枚目: 右上（縦長・1枚目のすぐ下から張り出す） */
.lookbook-grid .item-3 {
  grid-column: 2;
  grid-row: 2 / span 4;
}

/* 4枚目: 右・中（正方形気味） */
.lookbook-grid .item-4 {
  grid-column: 2;
  grid-row: 6 / span 2;
}

/* 5枚目: 左・中（正方形気味） */
.lookbook-grid .item-5 {
  grid-column: 1;
  grid-row: 5 / span 2;
}

/* 6枚目: 左・縦長 */
.lookbook-grid .item-6 {
  grid-column: 1;
  grid-row: 7 / span 4;
}

/* 7枚目: 右・超縦長 */
.lookbook-grid .item-7 {
  grid-column: 2;
  grid-row: 8 / span 5;
}

/* 8枚目: 左・縦長 */
.lookbook-grid .item-8 {
  grid-column: 1;
  grid-row: 11 / span 4;
}

/* 9枚目: 右・縦長 */
.lookbook-grid .item-9 {
  grid-column: 2;
  grid-row: 13 / span 4;
}

/* 10枚目: 左・縦長 */
.lookbook-grid .item-10 {
  grid-column: 1;
  grid-row: 15 / span 4;
}

/* 11枚目: 右・縦長 */
.lookbook-grid .item-11 {
  grid-column: 2;
  grid-row: 17 / span 4;
}

/* 12枚目: 左・縦長 */
.lookbook-grid .item-12 {
  grid-column: 1 / 3;
  width: 70%;
  justify-self: center;
  margin-bottom: 20px;
}

/* 13枚目: 右・下部（横長） */
.lookbook-grid .item-13 {
  grid-column: 1;
  grid-row: 19 / span 2;
}

/* 14枚目: 下部・横長中央 */
.lookbook-grid .item-14 {
  grid-column: 1 / 3;
  width: 55%;
  justify-self: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 15枚目: 最下部・縦長中央 */
.lookbook-grid .item-15 {
  grid-column: 1 / 3;
  width: 50%;
  justify-self: center;
}

/* -----------------------------------------------------------------
   スマホ（画面幅768px以下）時の余白調整
----------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .lookbook-grid {
    gap: 10px 12px; /* スマホ用に隙間を縮小 */
    padding: 10px 5px;
  }
  .lookbook-grid .item-1,
  .lookbook-grid .item-15 {
    width: 70%; /* スマホで見やすいよう少し幅広に */
  }
  .lookbook-grid .item-14 {
    width: 55%;
  }
}
/* =================================================================
1.reset
=================================================================*/
body{
	width: 100%; 
	margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    font-size:15px;
    font-family: din-2014, "游ゴシック", YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif';
    word-wrap:break-word;
    position:relative;
    font-feature-settings:'plat';
}





/*  すべてのタグのマージン・パディングの設定をリセット
-------------------------------------------------------------*/

li{list-style-type: none;}
table{border-collapse: collapse; border-spacing: 0;}

img{ width:100%; height:auto; border:0; vertical-align:bottom; }


/* =================================================================
2.base
=================================================================*/
/*  clear
-------------------------------------------------------------*/
.clear{clear: both;}
.clearfloat{clear: both; height: 0; font-size: 1px; line-height: 0;}
.clearfix{zoom: 1;}
.clearfix:after{content: ""; display: block; clear: both;}
*:first-child+html .clearfix {zoom: 1; } /* IE7 */

/*  基本のlink color
-------------------------------------------------------------*/
a{ color:#000000; }
a:link,
a:visited,
a:hover,
a:active{ text-decoration:none; }
a:hover,
a,
input[type="submit"],
input[type="button"]{
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    transition:0.2s ease-in-out;
}

a:hover{ opacity:0.8; }

.moreLink{ text-align:center; }
.moreLink a{ display:inline-block; padding:0 25px; text-decoration:none; background:url("../images/arrow_open.png") no-repeat right center / 18px auto; font-size:13px; color:#665f5c; }
.moreLink.open a{ background-image:url("../images/arrow_close.png"); }

.moreLink2{ text-align:right; }
.moreLink2 a{ display:inline-block; padding:0 20px 0 0; text-decoration:none; background:url("../images/arrow_link.png") no-repeat right center / 13px auto; font-size:13px; color:#665f5c; }

.link1{ text-align:center; }
.link1 a{ display:inline-block; padding:0 0 0 20px; text-decoration:none; background:url("../images/arrow_link.png") no-repeat 0 center / 13px auto; font-size:13px; color:#665f5c; }


.sns-icon{
	display: flex;
	flex-wrap:wrap;
list-style-type: none;
padding-top: 0em;
  justify-content: center;
	margin-left: auto;
    margin-right: auto;
	margin-top:   7em;
	
}
.sns-icon li {
	width: calc(250px/3);/*←画像を横に4つ並べる場合*/
	padding:0 15px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
　　　　　	
}


@media screen and (max-width:780px){
 
.sns-icon{
display: flex;
flex-wrap:wrap;
list-style-type: none;
padding-top: 0em;
 
	
}
	
.sns-icon li {
width: calc(180px/3);/*←画像を横に4つ並べる場合*/
		padding:0 10px;/*←画像の左右に5pxの余白を入れる場合*/

}
 

 
}




.od24-footer {
    width:100%; height:auto; border:0; vertical-align:bottom; 
	padding: 0em 1em;
margin-right: 0;
 margin-left: auto;
	margin-bottom:  1em;
} 

.od24-footer p {
    margin: 0px; 
    padding: 0px;
	line-height: 2.5em;
	text-align:right;
	font-size: 12px;
	margin-bottom:  1em;
}


@media screen and (max-width:780px){
 
.od24-footer {
    width:100%; height:auto; border:0; vertical-align:bottom; 
	padding: 1em 1em;
    margin-right: 0;
  margin-left: 0;
margin-left: auto;
	margin-bottom:  0em;

} 



.od24-footer p {
    margin: 0px; 
    padding: 0px;
	line-height: 2em;
	text-align:right;
	font-size: 11px;
	position: auto;
	
}
 
}






#footermain {
  padding: 18px 0;
  color: #fff;
  font-size: 0.8rem;
  margin-right: 0;
 margin-left: auto;
  background-color: #222;
}
#footerWrap{
	width:100%;
}