/* ========================================
// Foundation
// 全体の基本的なスタイル設定
======================================== */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #fff; /* 全体の文字色を白に設定 */
    background-color: #0017E3;
    line-height: 1.6;
}

/* ========================================
// Layout
// ページ全体のレイアウトに関するスタイル
======================================== */
.l-header {
    text-align: center;
    padding: 2rem 1rem;
}

.l-main {
    margin: 0 auto;
    width: 780px;
}

/* ========================================
// iframe
// iframeの表示スケールに関するスタイル
======================================== */
.l-main #sasquatch {
	display: block;
	width: 100%;
	border: 0;
}

/* ========================================
// Component
// 繰り返し使われる部品のスタイル
======================================== */
.c-subtitle {
    font-size: 1.28rem;
    font-weight: bold;
    margin-bottom: 0.0rem;
}

.c-main-title {
	margin: 0;
}

.c-main-title img {
    width: 304px;
    height: auto;
}

.c-sub-heading {
    margin: 30px 0;
    font-size: 2.8rem;
    font-weight: bold;
}

.c-sub-heading.--request {
/*    margin: 80px 0 40px;*/
}
.c-sub-heading.--request .emp_text {
	color: yellow;
}

.c-sub-heading.--mailmag {
/*    margin: 80px 0 40px;*/
}

/* ========================================
// Project
// 特定のプロジェクトや機能のスタイル
======================================== */
.p-header__inner {

}

.p-description {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 auto;
}

/* 白いボックス内のテキストスタイル */
.p-mailmag-complete__container {
    background-color: #fff;
    color: #6786A5;
    padding: 4rem;
    border-radius: 1rem;
    text-align: center;
    margin: 40px 0 80px;
}

.p-mailmag-complete__text {
    font-size: 2rem;
    line-height: 1.8;
}

.p-mailmag-complete__label {
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
}

.p-mailmag-complete__email {
    display: inline-block;
    color: #6786A5;
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 4rem;
    text-decoration: none;
}

.p-mailmag-complete__note-title {
    font-size: 1.6rem;
    font-weight: bold;
}

.p-mailmag-complete__note-text {
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 1rem;
}

/* ========================================
// Responsive
// レスポンシブ対応のスタイル
======================================== */
@media (max-width: 768px) {
    /* ページ全体のレイアウト調整 */
    .l-main {
        width: 90%; /* メインコンテンツの幅を狭めて左右に余白を持たせる */
    }

    /* 各コンポーネントのフォントサイズ調整 */
	.c-subtitle {
        font-size: 1.0rem; /* スマートフォン向けに文字サイズを小さくする */
        margin: 0; /* 上下の余白を調整 */
	}

	.c-main-title {
		margin: 0 auto;
	}

	.c-main-title img {
		width: 60%;
	}

    .c-sub-heading {
        font-size: 1.6rem; /* スマートフォン向けに文字サイズを小さくする */
        margin: 0; /* 上下の余白を調整 */
    }

    .p-description {
	    font-size: 0.8rem; /* スマートフォン向けに文字サイズを小さくする */
    }

    /* 完了メッセージの文字サイズ調整 */
    .p-mailmag-complete__container {
        padding: 2rem; /* 内側の余白を小さくする */
    }

    .p-mailmag-complete__note-text {
        font-size: 1.6rem; /* スマートフォンで読みやすい文字サイズにする */
    }
}

@media (min-width: 768px) {
	/* 汎用スタイル */
	br.sp {
		display: none;
	}
}