/* ==========================================================================
   1. 見出し・基本テキスト共通スタイル
   ========================================================================== */
.winterlinen2025 h3	{
  margin : unset!important;
}

h3 {
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, "Noto Serif JP", serif;
	text-align: left !important;
}

.h3-lead {
	font-size: 16px;
    padding: 10px 0;
    font-weight: normal;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "Noto Serif JP", serif !important;
    line-height: 180%;
	letter-spacing: 1px;
	margin: 35px 0;
}

.faq_2026spring h3 {
	font-family: "Quasimoda", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシックPro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, sans-serif;
	font-weight: normal !important;
}

.inside_margin {
margin-top: 60px;
}

/* ==========================================================================
   2. 「生地の森が大切にしているものづくり」セクション
      (.container-autumn2026 / .fade_autumn2026 / .image-text / .sub-text)
   ========================================================================== */
	
.container-autumn2026 {
  width: 850px;
  max-width: 100%;
  margin: 70px auto 100px;
  background: #eee9e3;
  padding: 80px 20px 10px;	
}

.container-autumn2026 .product-image {
	margin-bottom: 70px;
    display: flex;
    justify-content: center;	
}

.container-autumn2026 .img-row {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0 0 90px;
}

/* 行全体 */
.fade_autumn2026 {
  position: relative;
  display: flex;
  width: 100%;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade_autumn2026.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 画像カラム・テキストカラム 各50% */
.fade_autumn2026 .img-wrap,
.fade_autumn2026 .text-wrap {
  width: 50%;
}

.fade_autumn2026 .text-wrap {
  position: relative; /* ここがテキストの配置基準 */
}

/* 奇数行:画像→テキスト / 偶数行:テキスト→画像 */
.fade_autumn2026:nth-child(odd) {
  flex-direction: row-reverse;
}
.fade_autumn2026:nth-child(even) {
  flex-direction: row;
}

.fade_autumn2026 img {
  width: 100%;
  display: block;
}

.image-text,
.sub-text {
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, "Noto Serif JP";
  position: absolute;
  width: 100%; /* テキストカラム(50%分)いっぱいを基準に、topとleftで自由配置 */
}

.image-text {
  top: 140px;
  left: 60px;
  font-size: 70px;
  font-weight: bold;
  color: #111111;
}

.sub-text {
  top: 220px;
  left: 60px;
  width: 50%;	
}

.fade_autumn2026:nth-child(even) .sub-text {
  left: 465px; 
}


/* ==========================================================================
   3. 綿麻・ガーゼ 共通セクション (.cottonlinen-showcase / .gauze-showcase)
   ========================================================================== */
.cottonlinen-showcase,
.gauze-showcase {
  max-width: 100%;
  margin: 0 auto 100px;
}

.cottonlinen-showcase h4.group-title {
 margin: 50px auto;
 width: fit-content;
 font-size: 20px;
 display: flex;
 align-items: center;
 gap: 15px;	
}
.cottonlinen-showcase h4.group-title::before,
.cottonlinen-showcase h4.group-title::after {
  content: "";
  flex: 1;             /* 伸ばせるだけ伸ばす */
  width: 50px;         /* 線の長さ（固定したい場合） */
  height: 1px;         /* 線の太さ */
  background-color: #333;
}

.cottonlinen-list,
.gauze-list	{
  display: flex;
  flex-direction: column;
  gap: 70px;
  margin-bottom: 90px;
}

.cottonlinen-item,
.gauze-item	{
  display: flex;
  align-items: center;
  gap: 50px;
  flex-direction: column;	
}

.cottonlinen-showcase .image-box,
.gauze-showcase .image-box {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: baseline;	
}

/* 注: 元のCSSではこのルールが重複して2回書かれていたため、1つに統合しています */
.cottonlinen-showcase .image-box.img-right,
.gauze-showcase .image-box.img-right {
  flex-direction: row-reverse;
}

.cottonlinen-item .item-img,
.gauze-item .item-img	{
  width: 54.5%;
  flex-shrink: 0;
}

.cottonlinen-item .item-img img,
.gauze-item .item-img img 	{
  width: 100%;
  display: block;
}

.cottonlinen-item .item-body,
.gauze-item .item-body {
  width: 100%;
    display:flex;
    align-items: flex-end;
    margin-bottom: 50px;
    justify-content: space-between;
	padding: 0 20px; 
}

.cottonlinen-item .item-body .item-link-box,
.gauze-item .item-body .item-link-box {
 width: 40%;
}	

.cottonlinen-showcase .item-img-topics,
.gauze-showcase .item-img-topics {
  width: 100%;
}
.cottonlinen-showcase .item-img-topics img,
.gauze-showcase .item-img-topics img {
  width: 100%;
  display: block;
}	


/* ==========================================================================
   4. ピックアップリスト（メイン商品紹介カード）セクション
      (.pickup-list / .pickup-item / .pickup-grid)
   ========================================================================== */

/* ラッパー */
.pickup-list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ===== 共通カードスタイル ===== */
.pickup-item {
/*    overflow: hidden;
    display: flex;
    align-items: stretch;
    flex-direction: column;*/
    padding: 10px !important;
    margin: 0 !important;
}
.pickup-item img {
    display: block;
   /* object-fit: cover;*/
    width: 100%;
    height: 100%;
}
.pickup-item .item-body {
    padding: 24px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-title {
    margin: 0 0 8px;
    font-size: 1.15em;
}

h4.item-title,
h5.item-title {
	font-size: 20px;
    text-align: left;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.item-title small {
    display: block;
    background: #eee9e3;
    color: #8c7962;
    font-size: 0.6em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 15px !important;
    vertical-align: middle;
	width: fit-content;
	font-family: initial;  
}	

h5.lead,
h6.lead {
    padding: 0;
    margin: 0 !important;
    color: #000;
    font-size: 15px !important;
    line-height: 180%;
    font-family: "Quasimoda", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシックPro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, sans-serif;
    font-feature-settings: "palt";
	letter-spacing: 0.8px;
	text-align: left;
	font-weight: normal;
}	

.item-spec {
    font-size: 13px;
    color: #777;
    margin: 0 0 10px;
}

/* --- ボタン・リンク類 --- */
.pickup-list .btn_box {
     margin: 40px 0 0 0 !important;
}
.cottonlinen-list .btn_box,
.gauze-list .btn_box {
     margin: 0 0 0 0 !important;
	 text-align: center;
}	
.pickup-list .btn_box a,
.cottonlinen-list .btn_box a,
.gauze-list .btn_box a {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #8c7962;
    color: #8c7962;
    text-decoration: none;
    font-size: 0.85em;
    border-radius: 3px;
    transition: 0.2s;
	background: none!important;  
}
.cottonlinen-list .btn_box a,
.gauze-list .btn_box a {
	margin-bottom: 15px;	
}

.pickup-list .btn_box a:hover,
.cottonlinen-list .btn_box a:hover,
.gauze-list .btn_box a:hover	
{
    background: #8c7962!important;
    color: #fff;
}

.pickup-list .item-body .sample-link {
    display: inline-flex;
    margin: 15px 0 0 auto;
    padding-bottom: 0px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #888;
    text-align: end;
    width: fit-content;
    flex-direction: column;
    align-items: center;
}

.cottonlinen-list .item-body .sample-link,
.gauze-list .item-body .sample-link {
    display: flex;
    margin: 0px 0 5px auto;
    padding-bottom: 0px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #888;
    text-align: revert-rule;
    width: fit-content;
    flex-direction: row;
}

/* ===== メインアイテム（1つ目・大きく目立たせる） ===== */
.pickup-item.main {
    flex-direction: row;
    align-items: stretch;
}

/* 画像3枚をコラージュ風に配置するエリア */
.pickup-item.main .item-img-collage {
    position: relative;
    width: 100%;
    height: 1000px;
}

/* 個別の画像。top / left / width で位置とサイズを調整してください */
.pickup-item.main .item-img-collage img {
    position: absolute;
    object-fit: cover;
}

/* 画像1：大（基準になるメイン画像） */
.pickup-item.main .img-1 {
    top: 0px;
    left: 0px;
    width: 62%;
    height: auto;
}

/* 画像2：中（右上あたりに散らす） */
.pickup-item.main .img-2 {
    top: 540px;
    right: 0px;
    width: 47%;
    height: auto;
}

/* 画像3：小（下側に散らす） */
.pickup-item.main .img-3 {
    top: 610px;
    left: 40px;
    width: 44%;
    height: auto;
}

.pickup-item.main .item-body {
    width: 100%;
}
.pickup-item.main .lead {
    font-size: 1.15em;
}

/* ===== 2つ目以降を並べるグリッド ===== */
.pickup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
	margin-bottom: 80px;
}
.pickup-grid .pickup-item {
    flex-direction: row;
}
.pickup-grid .pickup-item .item-img {
    width: 100%;
    max-height: auto;
}
.pickup-grid .pickup-item .item-body {
    width: 100%;
    padding: 20px 0px;
}

/* 画像を右寄せにする（左右左のパターン用） */
.pickup-grid .pickup-item.img-right {
    flex-direction: row-reverse;
}

/*締めの挨拶*/	
.last_spring {
 background-color: #eee9e3!important;
}
	
.other h3{
text-align: center !important;
margin-top: 100px !important;	
}	


/* ==========================================================================
   5. レスポンシブ（〜640px）
      ※ 内部の並び順も上記のセクション構成（1〜4）に合わせています
   ========================================================================== */
@media screen and (max-width: 640px) {

	/* --- 1. 見出し・基本テキスト --- */
	hr {
		width: 100%!important;
	}
	h2 {
		margin-bottom: 10px!important;		
	} 	
	h3 {
		padding: 0 10px;
		font-size: 21px !important;
		font-weight: bold !important;
		letter-spacing: 1px !important;	
	}
	.h3-lead strong {
		font-size: 15px;
	}
	.h3-lead {
		padding: 0 10px;
		font-size: 14px;
		letter-spacing: .5px;
        line-height: 180%;
		margin: 50px 0!important;
	}
	
	.point .inside_margin{
	    margin: 30px 20px!important;	
	}	

	/* --- 2. 「生地の森が大切にしているものづくり」セクション --- */
	.container-autumn2026 {
		width: 100%;
		margin: 60px auto;
		padding: 3%;
	} 
	.container-autumn2026 .product-image {
		margin: 40px 0 50px;
	}
	.container-autumn2026 .product-image h3 {
		text-align: center!important;
		line-height: 170%!important;
		letter-spacing: 2px !important;
	}		
	.container-autumn2026 .img-row {
		margin: 0 0 80px;
		gap: 10vw;
	}

	/* 画像とimage-textを横並びのまま折り返し可能に */
	.fade_autumn2026 {
		flex-wrap: wrap; /* sub-textの折り返しに必要 */
		align-items: flex-start;
	}

	/* 画像は80%、左右交互配置は維持 */
	.fade_autumn2026 .img-wrap {
		width: 68%;
	}
	.fade_autumn2026:nth-child(odd) .img-wrap {
		margin-left: auto;
		margin-right: 0;
	}
	.fade_autumn2026:nth-child(even) .img-wrap {
		margin-right: auto;
		margin-left: 0;
	}

	/* テキストは画像の下、通常の流れに配置(overflow可) */
	.fade_autumn2026 .text-wrap {
		width: 100%;
		position: relative;
		order: 1;
	}
	.fade_autumn2026 .text-wrap {
		width: 32%;
		position: relative;
	}

	.container-autumn2026 .image-text {
		position: relative;
		top: -22.5vw;
		left: -57vw;
		font-size: 60px;
	}
	.container-autumn2026 .row-box02 .image-text {
		position: relative;
		top: -22.5vw;
		left: 58vw;
		font-size: 60px;
		text-align: end;
	}		

	/* fade_autumn2026直下の子として、画面(行)幅いっぱいに折り返す */
	.container-autumn2026 .sub-text {
		position: relative;
		flex-basis: 100%;
		width: 100%;
		top: 7vw;
		left: 0vw;
	}
	.container-autumn2026 .row-box02 .sub-text {
		position: relative;
		flex-basis: 100%;
		width: 100%;
		top: 7vw;
		left: 0vw;
		text-align: end;
	}	

	/* --- 3. 綿麻・ガーゼ 共通セクション --- */
	.item-text-box {
		width: 100%;		
	}		

	.cottonlinen-showcase,
	.gauze-showcase {
		margin: 0 auto 60px;
		padding: 0 2%;	  
	}

	.cottonlinen-list,
	.gauze-list {
		gap:50px; 
		margin-bottom: 70px;	  
	}
	.cottonlinen-item,
	.gauze-item {
		gap: 25px;	
	}	

	.cottonlinen-showcase .image-box,
	.gauze-showcase .image-box {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.cottonlinen-showcase .image-box.img-right,
	.gauze-showcase .image-box.img-right {
		flex-direction: column;
		gap:10px; 	
	}

	.cottonlinen-item .item-img,
	.gauze-item .item-img {
		width: 100%;
	}	
	.cottonlinen-item .item-body,
	.gauze-item .item-body {
		display: flex;
		align-items: flex-end;
		margin-bottom: 30px;
		justify-content: space-between;
		padding: 0 5px;
		flex-direction: column;
	}	

	.cottonlinen-item .item-img img,
	.gauze-item .item-img img {
		width: 80%;
		display: block;
	}
	.cottonlinen-showcase .image-box.img-right .item-img img,
	.gauze-showcase .image-box.img-right .item-img img {
		width: 80%;
		display: block;
		margin: 0 0 0 auto;		
	} 
	.cottonlinen-item .item-img-topics img,
	.gauze-item .item-img-topics img {
		width: 70%;
		display: block;
		margin: 0 0 0 auto;  
	}
	.cottonlinen-showcase .image-box.img-right .item-img-topics img,
	.gauze-showcase .image-box.img-right .item-img-topics img {
		width: 70%;
		display: block;
		margin: 0 auto 0 0;
	}
	.cottonlinen-item .item-body .item-link-box,
	.gauze-item .item-body .item-link-box {
		margin: 0 auto;
		width: 90%;
	}		
	.cottonlinen-showcase h4.group-title {
		font-size: 17px;
		text-align: center;
		gap: 10px;	
	}

	/* --- 4. ピックアップリスト（メイン商品紹介カード） --- */
	.pickup-list {
		gap: 20px;		
	}	
	h4.item-title,
	h5.item-title {
		font-size: 18px;	
	}
	.item-spec {
		color: #666;
		font-size: 13px;	
		margin-bottom: 10px;
	}
	.pickup-item h5.lead,
	h6.lead	{
		font-size: 14px!important;		
	}
	.pickup-item .item-body {
		padding: 24px 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;		
	}
	.pickup-list .btn_box {
		margin: 0!important;
	}		
	.pickup-list .btn_box a {
		background: none!important;
		margin: 20px auto;	
	}
	.pickup-list .item-body .sample-link{
		margin: 0 0 0 auto;		
	}		

	.pickup-item.main .item-img-collage {
		height: 187vw;
	}
	.pickup-item.main .img-1 {
		top: 0px;
		left: 0px;
		width: 85%;
		height: auto;
	}
	.pickup-item.main .img-2 {
		top: 83vw;
		right: 3vw;
		width: 58%;
		height: auto;
	}
	.pickup-item.main .img-3 {
		top: 140vw;
		left: 7vw;
		width: 71%;
		height: 180px;
	}

	.pickup-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.pickup-grid .pickup-item,
	.pickup-grid .pickup-item.img-right {
		flex-direction: column;
	}
	.pickup-grid .pickup-item .item-img {
		width: 100%;
		padding: 0;
		height: auto;	
	}
	.last_spring {
	padding: 15% 4%!important;
    margin: 50px 0 70px!important;	
	}
	.other h3{
	margin: 100px auto 30px !important;	
	width: 100% !important;	
	}	
}