/* ============================================
   KNIT COLLECTION セクション01・02（PCのみ）
   ファイル: style_sec01.css

   【レイアウトの考え方】
   ・全体は横幅100%。画像の幅・位置・余白はすべて%指定。
     （%はデザインカンプの幅=796を基準に実測した値）
   ・各セクションは次の2段構成。
       ① メイン画像（＋その下にテキスト）と、下へずらしたサイド画像
       ② 下段の2枚並び（1枚の画像 01_01c / 02_01c）
   ・sec01 はメインが右、sec02 はメインが左。
   ・英字名（sec01_name / sec02_name）はメイン画像に重ねて配置。
       sec01（メインが右）: 文字の右端をメイン画像の左端付近にそろえ、左へ伸ばす
       sec02（メインが左）: 文字の左端をメイン画像の右端付近にそろえ、右へ伸ばす
   ・リード文・本文・リンクはメイン画像の下に通常の流れで置くので、
     文章量が変わると下段の画像が自然に下へ押し出される（重ならない）。
   ・日本語名（sec01_name_ja）は非表示。
   ・文字サイズは px 固定。
   ============================================ */

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


#page_top {
	bottom: 77px!important;
}


.container_ {
	background-color:#FFF!important;
}


body {
  margin: 0;
  background: #fff;
}

.sec01_wrap,
.sec02_wrap {
  width: 100%;
}

.sec01_wrap img,
.sec02_wrap img {
  display: block;
  width: 100%;
  height: auto;
}


/* ── タイトル ──
   top_title_inner は文字の幅ぴったりの箱。
   英字タイトルの右端にサブタイトルを右寄せで揃える。 */
.top_title {
  text-align: center;
  margin: 14% 0 19.5% 0;      /* 上の余白 / 01_01a までの余白（画面幅に比例） */
}

.top_title_inner {
  display: inline-block;
  text-align: right;
}




.top_text01 {
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: clamp(40px, 5.8vw, 79px);  /* 画面幅に合わせて拡縮（下限40px・上限110px） */
  line-height: 1;
  letter-spacing: 0.03em;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

/* .top_text01 {
  font-family: "futura-100", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(40px, 5.8vw, 86px);
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #000;
  margin: 0;
  white-space: nowrap;
}*/

.top_text02 {
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: #000;
  margin: 8px 0 0 0;
  padding-right: 4%;       /* 英字の右端から少し内側に */
}

/* ── セクション間の余白 ──
   下段画像の下端 → 次のセクションのメイン画像の上端 = 152 ÷ 913 ≒ 16.6% */
.sec01_wrap + .sec02_wrap,
.sec02_wrap + .sec01_wrap {
  margin-top: 18%;
}

/* 最後のセクションの下の余白 */
.sec01_wrap:last-child,
.sec02_wrap:last-child {
  margin-bottom: 10%;
}


/* ── メイン画像 ＋ サイド画像 ──
   メイン画像（＋その下のテキスト）と、下へずらしたサイド画像を横に並べる */
.sec01_main {
  display: flex;
  align-items: flex-start;
}

.sec01_hero {
  flex: 0 0 42.6%;
}

.sec01_hero_img {
  position: relative;      /* 英字名を重ねる基準 */
}

.sec01_side {
  flex: 0 0 32%;
  margin-top: 31.3%;       /* メイン画像の上端から下へずらす量 */
}

/* sec01：メインが右・サイドが左 */
.sec01_wrap .sec01_main {
  flex-direction: row-reverse;
}

.sec01_wrap .sec01_hero {
  margin-right: 8.8%;      /* 画面右端からの余白 */
}

.sec01_wrap .sec01_side {
  margin-right: 8.4%;      /* メインとの間隔 */
}

/* sec02：メインが左・サイドが右 */
.sec02_wrap .sec01_hero {
  margin-left: 8.1%;       /* 画面左端からの余白 */
}

.sec02_wrap .sec01_side {
  margin-left: 8.8%;       /* メインとの間隔 */
}


/* ── 下段：2枚並び（1枚の画像） ── */
.sec01_strip {
  width: 65.5%;
  margin-top: 12.5%;       /* 上のブロック（メイン＋テキスト）の下端からの間隔 */
}

.sec01_wrap .sec01_strip {
  margin-left: 8.2%;
}

.sec02_wrap .sec01_strip {
  margin-left: 25.1%;
}


/* ── 英字名（メイン画像に重ねる） ──
   top は画像の高さに対する%。right / left は画像の幅に対する%。 */
/*.sec01_name {
  font-family: "futura-100", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: 43px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #000;
  margin: 0;
  white-space: nowrap;
} */

.sec01_name,
.sec02_name {
  position: absolute;
  top: 9.6%;
  z-index: 1;
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 55px;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

/* sec01：メインが右。文字の右端をメイン画像の左端から11.3%内側にそろえ、左へ伸ばす */
.sec01_name {
  right: 88.7%;
}

/* sec02：メインが左。文字の左端をメイン画像の左端から88.4%（右端付近）にそろえ、右へ伸ばす */
.sec02_name,
.sec02_wrap .sec01_name {
  left: 88.4%;
  right: auto;
}


/* ── テキスト（メイン画像の下） ──
   並び順：リード文 → 本文 → リンク（日本語名は非表示） */
.sec01_text {
  margin: 20% 0 0 0;       /* メイン画像の下端からリード文まで */
}

.sec01_name_ja {
  display: none;
}

.sec01_lead {
font-family: "fot-tsukumin-pr6n","zen-old-mincho", sans-serif;
font-weight: 300;
font-style: normal;
  font-size: 22px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #000;
  margin: 0;
}

.sec01_body {
  max-width: 380px;
  margin: 48px 0 0 0;
}

.sec01_body p {
  font-family: "fot-tsukumin-pr6n","zen-old-mincho", sans-serif;
font-weight: 300;
font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.07em;
  color: #101010;
  margin: 0 0 10px 0;
}

.sec01_link {
  font-size: 14px;
  line-height: 1.8;
  margin: 40px 0 0 0;
	font-family: "adobe-garamond-pro","fot-tsukumin-pr6n","zen-old-mincho", sans-serif;
font-weight: 300;
font-style: normal;
  letter-spacing: 0.1em;
  color: #101010;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sec01_link a {
  font-family: "adobe-garamond-pro","fot-tsukumin-pr6n","zen-old-mincho", sans-serif;
font-weight: 300;
font-style: normal;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #101010;
  text-decoration: none;
  transition: opacity 0.2s;
}

.sec01_link a:hover {
  opacity: 0.4;
}



/* ── 最下部バナー（ニット・セーター一覧） ──
   枠線つきの横長リンク。幅は画面幅に対する%、中央寄せ。 */
.knit_banner {
  width: 41%;
  margin: 17% auto 18%;
}

.knit_banner a {
  display: block;
  box-sizing: border-box;
  padding: 23px 0;
  border: 1px solid #000;
  text-align: center;
  font-family: "adobe-garamond-pro","fot-tsukumin-pr6n","zen-old-mincho", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.15em;
  color: #000;
  text-decoration: none;
  transition: opacity 0.2s;
}

.knit_banner a:hover {
  opacity: 0.4;
}


/* ── PC/SP 表示切り替え ──
   .pc_only = PCのみ表示 / .sp_only = スマホ（980px以下）のみ表示 */
.sp_only { display: none !important; }

@media only screen and (max-width: 980px) {
	
	
#header_top { padding: 0 !important; }
.fb_box { margin: 0 !important; }
.scrollbox2 { margin: 0 auto !important; position: relative; z-index: 4; background: #fff; padding-bottom: 20%;}
.scrollbox2 .style_wbox01 { padding-top: 25% !important; margin: 0 !important; }
.l_wrap { padding-bottom: 0 !important; }
/*.view_btn { margin: 10% auto 0 auto !important; }*/
footer { z-index: 5; background: #002a46; }
	




.pc_only {display:none!important;}
.sp_only {display:block!important;}

.wrap {
	width:100%;
	margin:0 auto;
}

/* ============================================
   スマホレイアウト（980px以下）
   ・テキストはPCと共通（HTMLは1つ）。
     .sec01_main / .sec01_hero / .sec01_hero_img / .sec01_text を display:contents にして
     中身を .sec0X_wrap 直下に並べ、order で並び順を入れ替えている。
   ・並び順：英字名 → SP画像1〜3 → リード文 → 本文 → SP画像4 → リンク
   ・画像の幅・余白は%（デザインカンプ幅=223 を基準に実測）、文字は px 固定
   ============================================ */
.sec01_wrap,
.sec02_wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sec01_main,
.sec01_hero,
.sec01_hero_img,
.sec01_text {
	display: contents;
}

.sec01_wrap + .sec02_wrap,
.sec02_wrap + .sec01_wrap {
	margin-top: 45%;
}


/* ── タイトル（スマホ）：2行・ブロックは中央、文字は左揃え ──
   KNIT / COLLECTION を2行にする。サブタイトルは COLLECTION の右端にそろえる */
.top_title {
	text-align: center;        /* ブロックを中央に（文字は左揃えのまま） */
	margin: 35% 0 50% 0;
}

.top_text01 {
	font-size: 11.5vw;
	line-height: 0.82;
	white-space: normal;
	width: min-content;         /* 一番長い単語（COLLECTION）の幅で折り返す */
	text-align: left;
}

.top_text02 {
	font-size: 12px;
	letter-spacing: 0.1em;
	margin: 6px 0 0 0;
	padding-right: 3%;
	text-align: right;
}

/* 英字名：画像の上に通常の流れで置く（下端を少し画像に重ねる） */
.sec01_wrap .sec01_name,
.sec02_wrap .sec01_name,
.sec02_wrap .sec02_name {
	order: 1;
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	z-index: 1;
	margin: 0 0 -0.26em 3.2%;   /* マイナス値で画像に重ねる量を調整 */
	font-size: 36px;
	line-height: 0.8;
	letter-spacing: 0.03em;
}

/* SP画像 */
.sec01_wrap img.sp_img1,
.sec02_wrap img.sp_img1 { order: 2; width: 100%; }

.sec01_wrap img.sp_img2,
.sec02_wrap img.sp_img2 { order: 3; margin: 3.1% 0 0 auto; }
.sec01_wrap img.sp_img2 { width: 76.5%; }
.sec02_wrap img.sp_img2 { width: 77.5%; }

.sec01_wrap img.sp_img3,
.sec02_wrap img.sp_img3 { order: 4; margin: 6.3% 0 0 0; }
.sec01_wrap img.sp_img3 { width: 93.3%; }
.sec02_wrap img.sp_img3 { width: 88.6%; }

.sec01_wrap img.sp_img4,
.sec02_wrap img.sp_img4 { order: 7; width: 72.6%; margin: 22% 0 0 13.9%; }

/* テキスト（PCと共通） */
.sec01_lead {
	order: 5;
	align-self: center;         /* ブロックを中央に（文字は左揃えのまま） */
	width: 75%;                 /* 本文と同じ幅にして左端をそろえる */
	margin: 19% 0 0 0;
	font-size: 18px;
	font-weight: 600;           /* 太さ（500〜700で調整） */
}

.sec01_body {
	order: 6;
	align-self: center;         /* ブロックを中央に */
	width: 75%;
	max-width: none;
	margin: 12% 0 0 0;
}

.sec01_body p {
	font-size: 13px;
	font-weight: 600;           /* 太さ（400〜600で調整） */
	text-align: justify;        /* 箱組み（両端揃え） */
	line-break: strict;
}

.sec01_body p:last-child {
	margin-bottom: 0;
}

/* リンク：枠線ボタン */
.sec01_link {
	order: 8;
	width: 72.2%;
	margin: 12.6% 0 0 13.9%;
}

.sec01_link a {
	display: block;
	box-sizing: border-box;
	padding: 8px 0;
	border: 1px solid #000;
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 600; 
}

/* リンクなしの文言（「11月上旬発売予定」など）：スマホのみ中央揃え。
   HTMLで class="sec01_link sec01_link_text" とする */
.sec01_link_text {
	text-align: center;
}

/* バナー（スマホ） */
.knit_banner {
	width: 78%;
	margin: 35% auto 38%;
}

.knit_banner a {
	padding: 14px 0;
	font-size: 13px;
	font-weight: 600;
}

}