/* =============================================================================
   1. ファーストビュー（アニメーション維持）
   ============================================================================= */
.firstView {
    width: 100%;
    height: 85vh; /* スマホ・PCで印象的な高さに調整 */
    position: relative;
    overflow: hidden;
    background: #1f222e;
}

.firstView_content{
	position: absolute;
	top: 50%;
   left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width:100%;
	text-align: center;
}

.sub_title{
	font-size:1.5rem;
	line-height:2;
	color:var(--bg-color);
}

/* 中央のキャッチコピー */
.firstView h1 {
    color: #fff;
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1.3;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.firstView_content a{
	margin: 0 auto;
	margin-top:1rem;
	width:fit-content;
	display:block;
	padding:0.5rem 7rem;
	box-sizing:border-box;
	background:var(--main-color);
	border-radius:15px;
	color:var(--bg-color);
	font-size:1.5rem;
	font-weight:900;
	text-decoration:none;
}


/* 背景画像のスライドアニメーション */
.firstView_img {
	width: 100%;
   height: 100%;
	position:relative;
}

.firstView_img img {
    width: 100%;
    min-height: 120%;
    object-fit: cover;
    animation: scroll-up 100s linear infinite;
    position: absolute;
    bottom: 0;
    filter: blur(1px);
}

/* オーバーレイ（ドットパターンから洗練されたグラデーションへ変更） */
.firstView_img:after{
	position				:absolute;
	content				:"";
	top					:0;
	left					:0;
	width					:100%;
	height				:100%;
	background-color	:rgba(50, 50, 50, 0.5);
	background-image	:radial-gradient(#000 20%, transparent 20%), radial-gradient(#000 20%, transparent 20%);
	background-size	:6px 6px;
	background-position: 0 0, 3px 3px;
}

@keyframes scroll-up {
    0% { transform: translateY(20%); }
    100% { transform: translateY(0); }
}

/*	==============================================================================
	2.hero area SYOKUTSUとは
	==============================================================================*/
.hero_area{
	width					:100%;
	text-align			:center;
	margin-top			:5rem;
}
.hero_area h2{
	font-size			:2.5rem;
	font-weight			:900;
	position				:relative;
	width					:fit-content;
	margin				:0 auto;
	margin-bottom		:4rem;
}
.hero_area h2:after{
	content				:'';
	display				:block;
	width					:30%;
	height				:1rem;
	background			:var(--main-color);
	position				:absolute;
	left					:50%;
	bottom				:-2rem;
	transform			:translateX(-50%);
	border-radius		:30px;
}
.hero_area p{
	font-size			:1.4rem;
	line-height			:2.5;
}
.hero_area p span{
	display				:inline-block;
}

/*	==============================================================================
	3.main area　SYOKUTSUの特徴
	==============================================================================*/
.mainArea{
	width					:100%;
	margin-top			:5rem;
	background			:#fff;
	padding				:7rem 0;
}
.mainArea:nth-child(2n){
	background			:none;
}
.mainArea h2{
	font-size			:2.5rem;
	font-weight			:900;
	position				:relative;
	width					:fit-content;
	margin				:0 auto;
	margin-bottom		:4rem;
}
.mainArea h2:after{
	content				:'';
	display				:block;
	width					:30%;
	height				:1rem;
	background			:var(--main-color);
	position				:absolute;
	left					:50%;
	bottom				:-2rem;
	transform			:translateX(-50%);
	border-radius		:30px;
}
.mainArea_grid{
	width					:70%;
	margin				:0 15%;
	display				:flex;
   align-items			:center;
   justify-content	:space-between;
}
.grid_kard{
	width					:calc(100% / 3.5);
	text-align			:center;
	background			:var(--bg-color);
	border-radius		:10px;
	overflow				:hidden;
	padding-bottom		:1rem;
}
.grid_kard img{
	width					:100%;
	aspect-ratio		:1.91 / 1;
}
.grid_kard h3{
	font-size			:2rem;
	font-weight			:900;
	margin-bottom		:1rem;
}
.grid_kard p{
	font-size			:1.2rem;
	padding				:0 1rem;
	box-sizing			:border-box;
}


/*	==============================================================================
	4.articleArea SYOKUTSUを少しご紹介
	==============================================================================*/
/* カルーセルの外枠 */
.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.articleArea_grid{
	display				:flex;
	width					:max-content;
	animation			:infinity-scroll 60s linear infinite;
	ooverflow-x			:scroll;
}
/* ホバー時にスクロールを止める */
.articleArea_grid:hover {
    animation-play-state: paused;
}

/* 無限スクロールのアニメーション定義 */
@keyframes infinity-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 半分（1セット分）進んだら戻る */
}
	
/* カードのデザインと高さの統一 */
.article_grid_kard {
    flex-shrink: 0;
    width: 280px; /* カード幅を固定 */
    margin-right: 2rem;
    background: #f8f6f1;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 縦並び */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	position:relative;
}

.article_grid_kard .card_img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.article_grid_kard .card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

/* ホバーで画像拡大演出 */
.article_grid_kard:hover .card_img img {
    transform: scale(1.1);
}

/* テキストエリアの高さ統一 */
.card_content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card_content h3 {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 1rem;
    /* 2行までに制限 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3.4em; /* 高さを固定 */
}

.card_content p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    /* 3行までに制限 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.8em; /* 高さを固定 */
}
	
.article_grid_kard a{
	position				:absolute;
	inset					:0;
}
	

/*	==============================================================================
	5.登録フォーム
	==============================================================================*/
/* フォームセクション全体の背景 */
#entry-form {
    background: linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
    padding: 8rem 2%;
	box-sizing:border-box;
}

.formArea_inner h2 {
    color: #f8f6f1 !important;
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.form-lead {
    color: #f8f6f1;
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 4rem;
    opacity: 0.9;
}

/* フォーム本体のカード */
.formBody {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: #f8f6f1; /* 生成り色 */
    padding: 4rem 3rem;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.input-wrapper {
    margin-bottom: 2rem;
    text-align: left;
}

.input-wrapper label {
    display: block;
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
    color: #1f222e;
}

.input-wrapper input {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    border: 2px solid #ddd;
    border-radius: 15px;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.input-wrapper input:focus {
    border-color: #eb1c24;
    outline: none;
    background: #fff;
}

.sub-text {
    font-size: 0.9rem;
    color: #eb1c24;
    margin-top: 0.5rem;
}

/* 送信ボタン */
.btn-submit {
    width: 100%;
    background: #eb1c24;
    color: #fff;
    padding: 1.8rem;
    border: none;
    border-radius: 50px;
    font-size: 1.6rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(235, 28, 36, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(235, 28, 36, 0.4);
}

.btn-submit:active {
    transform: translateY(0);
}

.terms-text {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #666;
}

.terms-text a {
    color: #eb1c24;
    text-decoration: underline;
}

/* 装飾画像のレスポンシブ */
@media screen and (max-width: 1024px) {
    .form-deco { display: none; }
    .formBody { padding: 3rem 1.5rem; }
}

/*==============================================================================
	6.ポイントが貯まるメディア
==============================================================================*/
/* セクションリード */
.section-lead {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 4rem;
}

/* グリッドレイアウト */
.stone-feature-grid {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.stone-how-to h3, .stone-usage h3 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    border-left: 5px solid var(--main-color);
    padding-left: 15px;
}

/* 貯めるステップカード */
.step-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.step-icon {
    font-size: 2.5rem;
    margin-right: 20px;
}

.step-text h4 { 
	font-size: 1.6rem;
	margin-bottom: 5px;
	color: var(--text-dark); 
}
.step-text p { 
	font-size: 1.4rem;
	color: #777;
	line-height: 1.5;
}

/* 使うステップボックス */
.usage-box {
    background: var(--text-dark);
    color: #fff;
    border-radius: 25px;
    overflow: hidden;
    height: 100%;
}

.usage-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.usage-content {
	padding: 30px;
}
.usage-content h4 { 
	font-size: 1.6rem;
	margin-bottom: 15px;
	color: var(--sub-color);
}
.usage-content p { 
	font-size: 1.4rem;
	line-height: 1.7;
	margin-bottom: 20px;
	opacity: 0.9;
}

.exchange-tag {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 1.2rem;
    color: var(--sub-color);
}

/* 下部ボタン */
.stone-cta {
    text-align: center;
    margin-top: 5rem;
}

.btn-entry-red {
    display: inline-block;
    background: var(--main-color);
    color: #fff;
    padding: 1.5rem 4rem;
    border-radius: 50px;
    font-size: 1.8rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(235, 28, 36, 0.3);
    transition: transform 0.2s;
}

.btn-entry-red:hover { transform: scale(1.05); }

/* モバイル対応 */
@media screen and (max-width: 900px) {
    .stone-feature-grid { grid-template-columns: 1fr; }
    .usage-box { margin-top: 2rem; }
}

/* =============================================================================
   7. 結果表示モーダル
   ============================================================================= */
.resultMessageBox_outer {
    position: fixed;
    inset: 0;
    background: rgba(31,34,46, 0.8);
    z-index: 99999;
    display: none; /* JSでflexに切り替え */
    align-items: center;
    justify-content: center;
}

.resultMessageBox {
    background: var(--bg-color);
    padding: 2.5rem;
    border-radius: 20px;
    width: 85%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.resultMessageBox_index {
    background: var(--main-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: inline-block;
}

.resultMessageBox_index p{
	font-size:1.8rem;
	font-weight:900;
	color:var(--bg-color);
}

.resultIndex_body p{
	font-size:1.4rem;
	color:var(--sub-color);
}

.btn-close-modal{
	padding:0.75rem 0;
	text-align:center;
	width:60%;
	font-size:1.6rem;
	color:var(--sub-color);
	background:#ddd;
	border-radius:20px;
	border:none;
	margin-top:2rem;
}