/* ===============
 * 基本設定
 * =============== */

/* emの基準として19pxを定義 */
html{
	font-size: 19px;
}
@media screen and (max-width: 800px) {
    html {font-size: 15px;
    }
}
/* ボックスサイズの計算方法を指定 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 基本のスタイルリセット */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;	
	height: auto;
	vertical-align: middle;
}

/* 基本のフォント、文字色、背景色を設定 */
body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #393232;
	background-color: #FFFFFF;
	line-height: 1.6; /* 行の高さを設定 */
}



/* ===============
 * 基本レイアウト（共通）
 * =============== */
.container {
	max-width: 1100px;   /* 1100px/16px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.5rem;    /* 40px/16px */
    padding-right: 2.5rem;   /* 40px/16px */
}

@media screen and (max-width: 800px) {
    .container {
        padding-left: 1.2rem;  /* 20px/16px */
        padding-right: 1.2rem; /* 20px/16px */
    }
}


/* ===============
 * ヘッダー
 * =============== */

/* ヘッダー全体（上下の余白） */
.header {
    padding: 1.875em 0; /* 30px/16px */
}

@media screen and (max-width: 800px) {
    .header {
        padding: 1.25em 0; /* 20px/16px */
    }
}

/* ロゴ画像（クリック領域の確保） */
.header__logo-link {
    display: inline-block; /* 画像下の余白防止 */
}

/* ロゴ画像のサイズ */
.header__logo {
    width: 13.75rem; /* 220px/16px */
}

@media screen and (max-width: 800px) {
    .header__logo {
        width: 11.25rem; /* 180px/16px */
    }
}

/* ===============
 * メインビジュアル（修正版）
 * =============== */

/* 画像ラッパー（h1） */
.main-visual__image-wrapper {
    /* PC表示の際に、ここで最大幅と中央揃えを管理します */
    max-width: 1100px; /* 1100px / 16px */
    margin: 0 auto;
    line-height: 0; /* 画像下の隙間対策 */
}

/* PC用の画像（デフォルトで表示） */
.main-visual__img--pc {
    display: block;
    width: 100%; /* ラッパーの幅に追従させる */
}

/* スマホ用の画像（デフォルトで非表示） */
.main-visual__img--sp {
    display: none;
}

/* ボタンエリア */
.main-visual__button-wrapper {
    text-align: center; /* ボタンを中央揃え */
    margin-top: 2.5rem; /* -80px / 16px */
    position: relative;
    z-index: 10;
}

/* ボタンのリンクエリア */
.main-visual__button-wrapper a {
    display: inline-block;
}

/* ボタン画像自体のサイズを制御 */
.main-visual__button-wrapper img {
    /* PCでの最大幅を指定 */
    max-width: 550px; 
    /* スマホなどで画面が狭い場合は、画面幅の90%にする */
    width: 90%;
}


/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {

    /* 画像ラッパーの最大幅指定を解除して、全画面に広がるようにする */
    .main-visual__image-wrapper {
        max-width: none;
    }

    /* PC用の画像を非表示に */
    .main-visual__img--pc {
        display: none;
    }

    /* スマホ用の画像を表示 */
    .main-visual__img--sp {
        display: block;
        width: 100%;
    }

    /* ボタンmarginを調整 */
    .main-visual__button-wrapper {
        margin-top: 0.5rem; /* -40px / 16px */
    }
}




/* ===============
 * 汎用スタイル（共通・修正版）
 * =============== */

/* セクションタイトル */
.section-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 1.8rem; 
    text-align: center;
    margin-bottom: 2.5rem; /* 40px */
}

@media screen and (max-width: 800px) {
    .section-title {
        font-size: 1.4rem; /* 24px */
        margin-bottom: 1.5rem; /* 24px */
    }
}

/* 本文テキスト（両端揃え） */
.body-text {
	 font-family: 'Noto Sans JP', sans-serif; /* ← この行を追加 */
    text-align: justify;
    line-height: 1.8;
}
@media screen and (max-width: 800px) {
    .body-text {
	    line-height: 1.6;
    }
}

/* PC/スマホ 画像切り替え (修正) */
/* imgタグを指定して、より確実にスタイルが適用されるように修正しました */
img.img-swap--pc {
    display: block;
}
img.img-swap--sp {
    display: none;
}
@media screen and (max-width: 800px) {
    img.img-swap--pc {
        display: none;
    }
    img.img-swap--sp {
        display: block;
    }
}


/* ===============
 * セクション2: 治験薬について
 * =============== */

.about-drug {
    padding-top: 4rem; 
    padding-bottom: 5rem; 
}

@media screen and (max-width: 800px) {
    .about-drug {
        padding-top: 2.5rem;
        padding-bottom: 3rem; 
    }
}

/* 説明が入るボックスの共通設定 */
.content-box {
    /* コンテンツ幅を最大640pxに設定し、中央に配置 */
    max-width: 720px; /* 640px */
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 3rem;
    margin-bottom: 1rem; /* 40px */
	background-color: #fff; /* この行を追加 */
}
/* 最後のボックスの下マージンは不要なため削除 */
.content-box:last-child {
    margin-bottom: 0;
}

.content-box--green {
    background-color: #e5f3e8;
}
.content-box--pink {
    background-color: #fbe0d7;
}

@media screen and (max-width: 800px) {
    .content-box {
        padding: 2rem 2rem 2rem; 
    }
}

/* ボックス内の小見出し */
.box-title {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    margin-bottom: 1.5rem; /* 16px */
    text-align: center;  /* 中央揃えに修正 */
}

/* ボックス内の画像エリア */
.box-image__wrapper img {
    width: 100%;
    height: auto;
}




/* ===============
 * 汎用スタイル（追加）
 * =============== */

/* サブタイトル */
.subtitle {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    color: #eb6238;
    font-size: 1rem; /* 16px */
    margin-bottom: 1rem; /* 下に12pxの余白 */
}
.content-box p + .subtitle {
    /* テキストの直後のサブタイトルは上の余白を少し詰める */
    margin-top: 1.5rem;
}

/* サブタイトルとテキストを横並びにするラッパー */
.inline-subtitle-wrapper {
    display: flex;
    align-items: baseline; /* テキストの下端を揃える */
}
.inline-subtitle-wrapper .subtitle {
    margin-top: 0; /* 横並びの時は余白をリセット */
    margin-bottom: 0;
}
.inline-subtitle-wrapper .body-text {
    /* テキストのpタグが持つデフォルトマージンをリセット */
    margin: 0;
}

/* 箇条書きの補足テキスト */
.list-example {
    font-size: 0.875rem; /* 14px */
    padding-left: 1rem; /* 「・」の分だけ字下げ */
    color: #555;
    line-height: 1.6;
}

/* ちょっとした余白を開けるためのスペーサー */
.spacer {
    margin-top: 1.6rem; /* 1行分の高さの余白 */
}



/* ===============
 * セクション3: 治験の概要
 * =============== */

/* ===============
 * セクション3 のボックスのみ角丸に設定
 * =============== */
.overview .content-box {
    border-radius: 1rem; /* 19px */
}

.overview {
    background-color: #eb6238;
    padding-top: 4rem;
    padding-bottom: 4rem; 
    overflow: hidden; /* 背景色からはみ出す要素を隠す */
}

.overview__title {
    color: #fff;
}

/* セクション内のボタン */
.section-button__wrapper {
    text-align: center;
    margin-top: 2.5rem; /* 40px */
}
.section-button__wrapper a {
    display: inline-block;
}
.section-button__wrapper img {
    max-width: 550px; 
    width: 90%;
}

@media screen and (max-width: 800px) {
    .overview {
        padding-top: 2.5rem; /* 35px */
        padding-bottom: 2.5rem; /* 60px */
    }
}



/* ===============
 * セクション4: 治験とは
 * =============== */

.about-chiken {
    background-color: #f1e8dc;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.about-chiken__title {
    color: #393232;
}

/* テキストコンテンツのラッパー */
.text-content-wrapper {
    max-width: 720px; /* .content-boxの幅に合わせる */
    margin-left: auto;
    margin-right: auto;
}

/* 画像コンテンツのラッパー */
.image-content-wrapper {
    max-width: 550px;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
}


/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .about-chiken {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .image-content-wrapper {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}



/* ===============
 * セクション5: 治験にご参加いただくと
 * =============== */

.benefits {
    background-color: #eb6238;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}


.benefits__title {
    color: #fff;
    position: relative;
    z-index: 2;
}

.benefits__container {
    background-color: #fff;
	max-width: 720px;
    border-radius: 1rem;
    padding: 3rem;
    position: relative;
    z-index: 2;
}

.benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各リスト項目のスタイル */
.benefits__item {
    border-bottom: 2px solid #eb6238;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
.benefits__item:last-child {
    margin-bottom: 0;
    padding-bottom: 2rem;
}

/* アイコンとテキストの横並びの行 */
.benefits__item-row {
    display: flex;
    align-items: flex-start; /* アイコンとテキストの頭を揃える */
    gap: 1.5rem;
}

.benefits__icon {
    flex-shrink: 0;
    width: 60px;
}

.benefits__text {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* 補足テキスト */
.benefits__subtext {
    font-weight: 400;
    font-size: 1rem;
    margin-top: 1.5rem; /* 1行分のスペース */
    /* アイコンの幅(60px) + 間の余白(1.5rem)の分だけ左に余白を設けて、テキストの頭と揃える */
    padding-left: calc(60px + 1.5rem); 
}


/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .benefits {
        padding: 2.5rem 0;
    }
    .benefits__container {
        padding: 1.7rem;
		max-width: 90%;
    }
    .benefits__text {
        font-size: 1.1rem;
    }
    .benefits__icon {
        width: 35px;
    }
    .benefits__subtext {
        padding-left: calc(35px + 1rem);
    }
	.benefits__item-row {
    gap: 1rem;
}
	.benefits__item {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.benefits__item:last-child {
    margin-bottom: 0;
    padding-bottom: 1rem;
}
.benefits__subtext {
    margin-top: 0.5rem; /* 1行分のスペース */
    /* アイコンの幅(60px) + 間の余白(1.5rem)の分だけ左に余白を設けて、テキストの頭と揃える */
}
}
	
	
	
/* ===============
 * セクション6: 治験に参加するまでの流れ
 * =============== */

.flow {
    background-color: #fbe0d7;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.flow__image-wrapper{
	max-width: 720px;
	margin: 0 auto;
	
}
/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .flow {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}	
	


/* ===============
 * セクション7: よくある質問
 * =============== */

.faq {
    background-color: #40a161;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.faq__title {
    color: #fff;
}

.faq__icon-wrapper {
    text-align: center;
    margin-bottom: 2.5rem;
}
.faq__icon-wrapper img {
    width: 140px;
}

.faq__list-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.faq__item {
    border-bottom: 2px solid #fff;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
.faq__item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 「Q1」と質問文、「A1」と回答文のまとまり */
.faq__question,
.faq__answer {
    display: flex;
    /* デザインカンプに合わせ、テキストの「上端」で揃えるように変更 */
    align-items: flex-start; 
    color: #fff;
}

.faq__answer {
    margin-top: 1.5rem; /* 1行分のスペース */
}

/* Q&Aの接頭辞 (Q1, A1など) */
.faq__q-prefix,
.faq__a-prefix {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    /* テキストとの間の余白を少し広げる */
    margin-right: 1.5em; 
    flex-shrink: 0;
}

.faq__q-prefix {
    color: #f6d674;
}

.faq__a-prefix {
    color: #eb6238;
}

/* Q&Aのテキスト本文 */
.faq__q-text,
.faq__a-text {
    text-align: justify;
}

/* 最後のQ&Aの下にも線を表示するための追加ルール */
.faq__item--with-border {
    border-bottom: 2px solid #fff;
}

/* 最後の項目は、通常は下の線と余白を消す */
.faq__item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

/* * 最後の項目でも線を表示したい場合は、
 * こちらのより強力なルールで上書きする
*/
.faq__item.faq__item--with-border {
border-bottom: 2px solid #fff;
/* :last-childで消された余白を復活させる */
padding-bottom: 2rem;
margin-bottom: 0rem;
}

/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .faq {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .faq__icon-wrapper img {
        width: 100px;
    }
    .faq__question,
    .faq__answer {
        align-items: flex-start; /* スマホでは上揃えに */
    }
}
	



/* ===============
 * セクション8: 生活向上WEBとは
 * =============== */

.about-skw {
    background-color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.about-skw__image-wrapper {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .about-skw {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}




/* ===============
 * セクション9: お問い合わせ
 * =============== */

.contact {
    background-color: #393232;
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.contact__title {
    color: #fff;
}

.contact__intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

.contact__block {
    text-align: center;
}
.contact__block:first-of-type {
    margin-bottom: 3rem;
}

.contact__subheading {
    font-weight: 700;
    font-size: 0.9rem; /* 17.1px */
    margin-bottom: 0rem;
}

.contact__phone-row {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.contact__phone-content {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    text-decoration: none;
}

/* フリーコールアイコンのサイズを指定 */
.contact__phone-icon {
    height: 3.2rem; /* PCでの電話番号の文字サイズに高さを合わせる */
}

/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .contact__phone-icon {
        height: 1.9rem; /* スマホでの電話番号の文字サイズに高さを合わせる */
    }
}

/* 電話番号のサイズを指定 */
.contact__phone-number {
    font-size: 3.2rem; /* 53.2px */
    font-weight: 700;
    letter-spacing: 0.05em;
	white-space: nowrap; /* この一行を追加 */
}

.contact__phone-content--sp {
    display: none; /* スマホ用はPCでは非表示 */
}

@media screen and (max-width: 800px) {
    .contact__phone-content--pc {
        display: none; /* PC用はスマホでは非表示 */
    }
    .contact__phone-content--sp {
        display: inline-flex; /* スマホ用を表示 */
    }
    .contact__phone-number {
        font-size: 1.9rem;
    }
}

.contact__hours {
    font-size: 0.8rem; /* 15.2px */
    max-width: 550px;
    margin: 0rem auto 0;
}

.contact__note {
    background-color: #fff;
    color: #333;
    max-width: 530px;
    margin: 1rem auto 0;
    padding: 0.5rem;

}
.contact__note p {
    font-size: 0.7rem; /* 13.3px */
    text-align: center;
}

.contact__button {
    display: block;
    max-width: 550px;
    margin: 1rem auto;
}

.contact__instruction {
    font-weight: 700;
    font-size: 0.8rem; /* 15.2px */
    max-width: 550px;
    margin: 0 auto;
	text-align: left;
}



/* ===============
 * フッター
 * =============== */

.footer {
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.footer__image-wrapper {
    max-width: 720px;
    margin: 0 auto; /* 中央揃え */
}


/* === スマホ用の設定 (800px以下) === */
@media screen and (max-width: 800px) {
    .footer {
        padding-top: 2.5rem;
        padding-bottom: 1rem;
    }
}