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

/* はじめての方へ専用 CSS */
/* スマホファーストで構築 */

:root {
--text-color: #473933;
--bg-color: #f5f2ea;
--accent-color: #D6C2B4;
--font-family-body: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana,Geneva, sans-serif;
--font-family-serif: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}

body {
font-family: var(--font-family-body);
color: var(--text-color);
background-color: #fff;
margin: 0;
padding: 0;
line-height: 1.8;
font-size: 16px;
}

/* はじめての方へ専用 CSS */
.first-container {
max-width: 1000px;
margin: 50px auto;
padding: 1rem 1.5rem;
text-align: center;
}

.first-container h1, .first-container h2 {
font-family: var(--font-family-serif);
font-weight: bold;
}

.first-container h2, .first-container h3 {
font-weight: normal; /* すべての見出しの太字を解除 */
}

/* ヘッダー */
.first-header {
margin-bottom: 3rem;
}

.first-header h1 {
font-size: 2.2rem;
margin-bottom: 1rem;
}

.first-header .first-subtitle {
font-size: 1.2rem;
line-height: 1.6;
}

/* ブランド紹介のテキストエリア */
.first-intro {
padding: 0 1rem;
font-size: 1.1rem;
text-align: left;
}

.first-intro-text {
text-align: left;
}

.first-intro p {
margin-top: 1.5rem;
line-height: 2;
}

p.first-catch {
font-family: var(--font-family-serif);
font-size: 1.6rem;
line-height: 2.6rem;
margin: 2rem auto;
text-align: center;
font-weight: bold;
}

/* メッセージ */
.first-message {
background-color: var(--bg-color);
padding: 3rem 2rem; /* 左右の余白を2remに調整 */
border-radius: 0;
}

.first-message h2 {
font-weight: bold;
font-size: 1.5rem;
line-height: 2.3rem;
margin-bottom: 1rem;
text-align: center;
}

.first-message p {
margin: 1rem 0;
text-align: left;
}

/* ブランド紹介の画像エリア（スマホでは縦並び） */
.first-images {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 3rem 0;
}

.first-images img {
width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.first-images img:hover {
/* マウスオーバー時の動きを削除 */
}

/* 商品紹介 */
.first-products {
margin: 3rem 0; /* 下の余白を半分に */
}

.first-products h2 {
font-family: var(--font-family-serif);
font-weight: bold;
font-size: 1.4rem;
line-height: 2.3rem;
margin-bottom: 2rem;
}

.first-product {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 4rem;
background-color: var(--bg-color);
padding: 0;
border-radius: 1rem; /* 上の角丸を元に戻す */
box-shadow: none;
}

.first-product-image {
position: relative;
margin: 0; /* 画像の上下の余白を削除 */
}

.first-product-image img {
width: 100%;
height: auto;
border-radius: 0;
padding: 0;
}

.first-product-title-wrapper {
padding: 2rem 2rem 0 2rem; /* レディースの上の余白と左右の余白を調整, 下の余白を削除 */
text-align: center;
}

.first-product-title-wrapper h3 {
font-size: 1rem;
line-height: 1.8rem;
font-weight: bold;
margin-top: 0.5rem; /* レディースと商品名の間のスペースを調整 */
margin-bottom: 0.5rem;
}

.first-product-gender {
display: inline-block;
font-family: var(--font-family-body);
font-size: 1rem;
color: var(--text-color);
background-color: transparent;
border: 1px solid var(--text-color);
padding: 0.25rem 0.75rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
}

.first-product-text {
text-align: left;
padding: 0 2rem 2rem 2rem; /* 上の余白を削除, 左右と下の余白を調整 */
}

.first-product-text p {
margin: 0.5rem 0;
line-height: 1.8;
font-size: 0.9rem;
}

.first-btn-wrapper {
text-align: center;
}

.first-btn-small {
position: relative;
display: inline-block;
text-decoration: none;
color: #fff !important;
background-color: var(--text-color) !important;
border: 2px solid var(--text-color);
padding: 0.75rem 2rem;
border-radius: 2rem;
font-size: 1rem;
margin-top: 1rem;
transition: all 0.3s ease;
padding-right: 3rem;
}

.first-btn-small::after {
content: '>';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease-out;
color: #fff !important;
}

.first-btn-small:hover {
color: #fff !important;
background-color: var(--text-color) !important;
}

.first-btn-small:hover::after {
transform: translateY(-50%) translateX(5px);
color: #fff !important;
}

/* 会員登録・ボタン */
.first-btn {
display: inline-block;
text-decoration: none;
font-weight: bold;
transition: opacity 0.3s;
}

.first-btn img {
width: 100%;
height: auto;
border-radius: 0; /* 角丸をなくす */
}

.first-btn:hover {
opacity: 0.8;
}

.first-register h2, .first-video h2 {
font-family: var(--font-family-body); /* ゴシック体に変更 */
font-weight: bold; /* ゴシック体なので太字に */
font-size: 1.4rem;
line-height: 2.3rem;
margin: 3rem auto 1.5rem;
}

.first-register p {
font-size: 0.9rem;
margin-top: 1rem;
/* スマホ時の左寄せ */
text-align: left;
}

/* バナー・動画 */
.first-banner img {
width: 100%;
height: auto;
margin: 1.5rem 0 4rem; /* 上の余白を半分に、下の余白を2倍に */
border-radius: 0; /* 角丸をなくす */
}

.first-video iframe {
width: 100%;
aspect-ratio: 16/9;
border-radius: 0; /* 角丸をなくす */
border: none;
}

.first-back {
margin-top: 8rem;
margin-bottom: 8rem; /* 新しく追加した余白 */
}

.first-back .first-btn {
background-color: var(--text-color) !important; /* 背景色を文字色に変更 */
color: #fff !important;
padding: 0.75rem 2rem;
border-radius: 2rem;
font-size: 1rem;
letter-spacing: 0.1rem;
box-shadow: none; /* 影をなくす */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

.first-back .first-btn:hover {
opacity: 0.9;
}

/* 新しく追加した矢印のスタイル */
.first-back .first-btn .house-svg {
width: 1.5em; /* アイコンを少し大きく */
height: 1.5em;
stroke: currentColor;
fill: currentColor;
stroke-width: 0;
margin-right: 0.1rem; /* アイコンと文字の間隔を広げる */
}

/* PC/SP切り替え用 */
.first-news-line {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1.5rem; /* 上部のマージンを調整 */
}

.first-banner-news, .first-banner-line {
flex: 1;
}

/* 会員登録・メールマガジン・LINEをまとめるための新しいラッパー */
.first-join-section {
border: 1px solid var(--text-color);
border-radius: 1rem;
padding: 3rem 2rem; /* 左右の余白を2remに変更 */
margin: 4rem 0;
background-color: transparent; /* 背景色を透明に変更 */
}

.first-benefit h2 {
font-family: var(--font-family-body); /* ゴシック体に戻す */
font-weight: bold;
font-size: 1.6rem;
margin-bottom: 1.5rem;
}

.first-benefit-img {
width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
}

.first-register-btn {
position: relative;
display: inline-block;
text-decoration: none;
color: #fff !important;
background-color: var(--text-color) !important;
border: 2px solid var(--text-color);
padding: 0.75rem 2.3rem 0.75rem 1.3rem;
border-radius: 2rem;
font-size: 1rem;
margin-top: 1rem;
transition: all 0.3s ease;
font-family: var(--font-family-body);
font-weight: bold;
}
.first-register-btn::after {
content: '>';
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease-out;
color: #fff !important;
}
.first-register-btn:hover {
color: #fff !important;
background-color: var(--text-color) !important;
}
.first-register-btn:hover::after {
transform: translateY(-50%) translateX(5px);
color: #fff !important;
}

/* ======================
SP レイアウト調整 (max-width: 767px)
====================== */
@media (max-width: 767px) {
.first-benefit {
padding: 0; /* 左右の余白を削除 */
}
.first-register {
padding: 0; /* 左右の余白を削除 */
}
.pc {
display: none;
}
}


/* ======================
PC レイアウト調整 (min-width: 768px)
====================== */
@media (min-width: 768px) {
.sp {
display: none;
}

.first-container {
padding: 0 1.5rem;
}

/* ブランド紹介のテキストエリア */
.first-intro {
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

.first-intro-text {
text-align: justify;
}

.first-catch {
font-size: 1.8rem;
line-height: 3rem;
}

/* メッセージ */
.first-message {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 1.5rem;
border-radius: 0;
}

.first-message h2, .first-message p {
text-align: center; /* PCでは中央揃え */
}

.first-message h2 {
font-size: 1.8rem;
}

/* 画像3枚を横並び（最大1000px） */
.first-images {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 5rem auto;
}

/* 商品紹介のPCレイアウト */
.first-product-list {
display: flex;
gap: 2rem;
}

.first-product {
flex: 1;
}

.first-products h2 {
font-size: 1.8rem;
}


.first-product-text {
padding: 0 3rem 3rem 3rem; /* PCでは上の余白を削除 */
}
.first-product-image img {
padding: 0;
}

.first-product {
padding: 0; /* PCの余白も削除 */
}

.first-product-gender {
color: var(--text-color);
background-color: transparent;
border: 1px solid var(--text-color);
}
.first-product-title-wrapper {
color: var(--text-color);
position: static;
padding: 3rem 3rem 0 3rem;
text-align: center;
}
.first-product-title-wrapper h3 {
font-size: 1.2rem;
font-weight: bold;
line-height: 2rem;
}
.first-product-image {
position: static;
margin: 0; /* PCの画像の上下の余白を削除 */
}


.first-btn-small {
color: #fff;
background-color: var(--text-color);
}
.first-btn-small::after {
color: #fff;
}

.first-btn-small:hover {
color: #fff;
background-color: var(--text-color);
}
.first-btn-small:hover::after {
transform: translateY(-50%) translateX(5px);
color: #fff;
}

/* PCでは左右に並べる */
.first-news-line {
flex-direction: row;
gap: 2rem;
}

.first-benefit {
margin-bottom: 3rem;
padding: 0 1.5rem; /* PCの余白を元に戻す */
}
.first-register {
margin: 0;
padding: 0 1.5rem; /* PCの余白を元に戻す */
}


/* PCでは中央揃えに戻す */
.first-register p {
text-align: center;
}

.first-register-btn {
font-size: 1.25rem;
}

}