/* ================================================
   0 基本設定 （★変数宣言）
================================================ */

/* 1 ページレイアウト設定
     （フォントサイズ・span装飾など） */

/* 2-1 パーツ レイアウト設定
       （【変更予定】・余白・アニメーション用・ヘッダー・フッター・ボタンなど） */
/* 2-2 パーツ デザイン設定
       （★bodyの背景・↑の色設定など） */

/* 3 要素別設定 共通
     （★テキストブロック・チェックリスト・枠など（色設定含む）） */

/* 4 要素別設定 個別 背景
     （★各セクションの背景） */
/* 5 要素別設定 個別 デザイン設計
     （★各セクションの特別設定） */

:root {
	--color-main: #23000a;
	--color-sub: #eed387;
	--color-accent: #b8003d;
	--color-base: #f7f3f0;

	--color-w: #fff;
	--color-lg: #eee;
	--color-g: #999;
	--color-dg: #333;
	--color-b: #000;

	--color-r: #da1047;
	--color-y: #f2f378;
	--color-gold: #c69923;

	--font-color: #33000a;
	--font-size: 1.15rem;
	--font-size-sp: 1rem;
	--font-spacing: 0.05em;
	--font-height: 1.6;
	--font-height_mini: 1.4;
	--font-height_mini2: 1.2;
	--font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-family-serif: "Noto Serif JP", serif;

	--font-size-ttl: 1.8em;
	--font-size-ttl-sp: 1.5em;
	--font-size-en: 1.3em;
	--font-size-em: 1.2em;
	--font-size-em2: 1.7em;
	--font-size-small: 1rem;
	--font-size-small2: 0.7em;
	--font-spacing-wide: 0.1em;

	--width-inner: 800px; /* @media screen も一緒に変更 */
	--width-inner-headerBtn: 700px;
	--width-inner-header: 1400px;
}





/* ================================================
   1 ページレイアウト設定
================================================ */
* {
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	list-style: none;
}
body {
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--font-color);
	font-size: var(--font-size);
	letter-spacing: var(--font-spacing);
	line-height: var(--font-height);
	font-family: var(--font-family);
	font-feature-settings: "palt";
}

img {
	width: 100%;
	max-width: 100%;
}

a {
	text-decoration: none;
	opacity: 1;
	transition: opacity 0.5s;
}
a:hover{
	cursor: pointer;
	opacity: 0.8;
}

.f-red {
	color: var(--color-r);
}
.f-main {
	color: var(--color-main);
}
.f-accent {
	color: var(--color-accent);
}
.f-bold {
	font-weight: bold;
}
.f-center {
	text-align: center;
}
.f-left {
	text-align: left;
}
.f-em {
	font-size: var(--font-size-em);
}
.f-em2 {
	font-size: var(--font-size-em2);
}
.f-small {
	font-size: var(--font-size-small);
}
.f-small2 {
	font-size: var(--font-size-small2);
}
.f-en {
	font-size: var(--font-size-en) !important;
	line-height: 1 !important;
}
.f-line_y {
	background: linear-gradient(transparent 40%, var(--color-y) 0%) ;
}
.f-serif {
	font-family: var(--font-family-serif);
}

/* ------ pc ------ */
@media screen and (min-width: 801px){
	.sp {
		display: none;
	}
}
/* ------ sp ------ */
@media screen and (max-width: 800px){
	.pc {
		display: none;
	}
	body {
		font-size: var(--font-size-sp);
	}
	.f-line_y {
		background: linear-gradient(transparent 50%, var(--color-y) 0%);
	}
}





/* ================================================
   2-1 パーツ レイアウト設定
================================================ */

/* 【変更予定】 */
.henkou {
	position: relative;
}
.henkou::after {
	content: "【変更予定】";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-b);
	opacity: 0.8;
	color: var(--color-w);
	padding: 2em;
	box-sizing: border-box;
}
img.hoge {
	display: block;
	width: 80%;
	margin: 0 auto;
}

/* 余白系 */
.inner {
	max-width: var(--width-inner);
	margin: 0 auto;
}
header .inner {
	max-width: var(--width-inner-header);
}

.p_x {
	padding-right: 4%;
	padding-left: 4%;
}
.p_y {
	padding-top: 80px;
	padding-bottom: 80px;
}
.p_y_mini {
	padding-top: 40px;
	padding-bottom: 40px;
}

.m_x {
	margin-right: 4%;
	margin-left: 4%;
}
.m_y {
	margin-top: 80px;
	margin-bottom: 80px;
}
.m_y_mini {
	margin-top: 40px;
	margin-bottom: 40px;
}
.m_y_1 {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* アニメーション用 フェードイン */
.is-animate {
	opacity: 0;
	transition: opacity 1.5s;
}
.is-animate .is-animate-inner { /* 自動生成 */
	transform: translateY(100px);
	transition: transform 0.7s;
}
.is-animate.is-animate-on {
	opacity: 1;
}
.is-animate.is-animate-on .is-animate-inner { /* 自動生成 */
	transform: translateY(0);
}

/* アニメーション用 moreボタン */
.textbox_more .is-more-show {
    position: relative;
    display: inline-block;
}
.textbox_more .is-more-show::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(transparent,#fff);
}
.textbox_more .is-more-show.is-more-on::after {
    background: transparent;
}
.textbox_more .is-more-hide {
	display: none;
}
.textbox_more button.is-more {
	width: fit-content;
	margin: 20px auto;
	display: block;
	padding: 10px 1.5em;
	border: none;
	outline: 0;
	transition: .5s;
	border-radius: 30px;
	cursor: pointer;
	font-size: 1em;
}
.textbox_more button.is-more::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f13a'' 続きをよむ';
	transition: .2s;
}
.textbox_more button.is-more.is-more-on::after{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f139'' 閉じる';
}

/* 背景固定用 */
.is-bgfix {
	position: relative;
}
.is-bgfix-inner {
	position: relative;
	z-index: 1;
}
.is-bgfix-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0);
}
.is-bgfix-bg::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}


/* ボタン */
.btn {
	display: block;
	opacity: 1;
	transition: opacity 0.5s;
}
.btn:hover {
	cursor: pointer;
	opacity: 0.8;
}
@keyframes bound {
	0%, 100% { transform: translateY(0px); }
	10% { transform: translateY(-10px); }
	20% { transform: translateY(-18px); }
	30% { transform: translateY(-22px); }
	40% { transform: translateY(-24px); }
	50% { transform: translateY(-25px); }
	60% { transform: translateY(-24px); }
	70% { transform: translateY(-22px); }
	80% { transform: translateY(-18px); }
	90% { transform: translateY(-10px); }
}
@keyframes hop {
	0%, 40% { transform: skew(0deg,0deg) }
	5% { transform: skew(5deg,5deg) }
	10% { transform: skew(-4deg,-4deg) }
	15% { transform: skew(3deg,3deg) }
	20% { transform: skew(-2deg,-2deg) }
	25% { transform: skew(1deg,1deg) }
	30% { transform: skew(-0.6deg,-0.6deg) }
	35% { transform: skew(0.3deg,0.3deg) }
}
@keyframes pulse {
	0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
	50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); }
	100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes btn {
	0% { transform: translateX(0); }
	5% { transform: translateX(0); }
	10% { transform: translateX(0); }
	20% { transform: translateX(-15px); }
	25% { transform: translateX(0); }
	30% { transform: translateX(-15px); }
	50% { transform: translateX(0); }
	70% { transform: translateX(-15px); }
	75% { transform: translateX(0); }
	80% { transform: translateX(-15px); }
	100% { transform: translateX(0); }
}
@keyframes animate73 {
	0% { transform: scale(0.92); }
	40% { transform: scale(0.97); }
	60% { transform: scale(0.86); }
	80% { transform: scale(1); }
	100% { transform: scale(0.92); }
}
@keyframes tada {
	from { transform: scale3d(1, 1, 1); }
	5%, 10% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
	15%, 25%, 35%, 45% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	20%, 30%, 40% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	50% { transform: scale3d(1, 1, 1); }
	to { transform: scale3d(1, 1, 1); }
}

/* ヘッダー */
header img {
	position: relative;
	z-index: 1;
}

/* ヘッダー用ボタン */
.headerBtn {
	overflow: hidden;
}
.headerBtn .btn {
	max-width: var(--width-inner);
}

/* メイン */
.main_outer {
	overflow: hidden;
}
main {
	max-width: var(--width-inner);
	margin: 0 auto;
	box-shadow: 0px 0px 10px 5px rgba(3, 0, 0, 0.1);
}

/* フッター 固定ボタン */
.footerBtn_displayArea {
	position: relative;
}
.footerBtn {
	position: sticky;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 99;
	padding: 10px 4%;
	text-align: center;
}
.footerBtn img {
	max-width: 500px;
}

/* フッター */
footer {
	text-align: center;
	padding: 30px 4%;
	font-size: 0.8em;
}
footer li {
	display: inline-block;
}
footer li::after {
	content: "|";
	display: inline-block;
	margin: 0 10px;
}
footer li:last-child::after {
	content: "";
}
footer a {
	display: inline-block;
	transition: 0.2s;
}
footer a:hover {
	opacity: 0.6;
}
footer .copyright {
	font-size: 0.8rem;
	margin-top: 1rem;
}

/* ------ sp ------ */
@media screen and (max-width: 800px){
	.p_x_sp {
		padding-right: 4%;
		padding-left: 4%;
	}
	.p_y {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.p_y_mini {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.m_x {
		margin-right: 2%;
		margin-left: 2%;
	}
	.m_y {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.m_y_mini {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	@keyframes bound {
		0%,100%{transform:translateY(0px);}
		10%{transform:translateY(-8px);}
		20%{transform:translateY(-12px);}
		30%{transform:translateY(-14px);}
		40%{transform:translateY(-15px);}
		50%{transform:translateY(-16px);}
		60%{transform:translateY(-15px);}
		70%{transform:translateY(-14px);}
		80%{transform:translateY(-12px);}
		90%{transform:translateY(-8px);}
	}

	footer {
		padding: 15px 4%;
		font-size: 0.8em;
	}
	footer li::after {
		margin: 0 5px;
	}
}





/* ================================================
   2-2 パーツ デザイン設定
================================================ */

/* 全体 */
body {
	background: transparent url(../img/body_bg.png) top center repeat-y;
	background-size: 100%;
}

/* アニメーション用 moreボタン */
.textbox_more button.is-more {
	background-color: var(--color-accent);
	color: var(--color-w);
}
.textbox_more button.is-more.is-more_main {
	background-color: var(--color-main);
	color: var(--color-w);
}
.textbox_more button.is-more.is-more_gold {
	background-color: var(--color-gold);
	color: var(--color-w);
}
.textbox_more button.is-more.is-more_A {
	background-color: #e34a79;
	color: var(--color-w);
}
.textbox_more button.is-more.is-more_B {
	background-color: #278aaa;
	color: var(--color-w);
}

/* ボタン */
.btn {
	animation: tada 2.5s infinite;
}

/* ヘッダー */
header {
	background: var(--color-sub);
}

/* ヘッダー用ボタン */
.headerBtn {
	background: var(--color-main) url(../img/btn_bg.png) center center no-repeat;
	background-size: cover;
}
.headerBtn .inner {
	max-width: var(--width-inner-headerBtn);
}
.headerBtn .btn {
	margin: 0 auto 0.5em;
}
.headerBtn .btn_info {
	text-align: center;
	font-size: var(--font-size-small);
	line-height: var(--font-height_mini2);
}

/* メイン */
main {
	background: var(--color-w);
}

/* メイン ヘッダー以外のボタン */
.conBtn {
	background: var(--color-main) url(../img/btn_bg.png) center center no-repeat;
	background-size: cover;
}
.conBtn .inner {
	max-width: var(--width-inner-headerBtn);
}
.conBtn .btn {
	margin: 0 auto 0.5em;
}
.conBtn .btn_info {
	text-align: center;
	font-size: var(--font-size-small);
	line-height: var(--font-height_mini2);
}

/* フッター 固定ボタン */
.footerBtn {
	background: rgba(0,0,0,0.6);
}

/* フッター */
footer {
	background: var(--color-main);
	color: var(--color-w);
}
footer a {
	color: var(--color-w);
}





/* ================================================
   3 要素別設定 共通
================================================ */

/* テクストブロック */
.txtblock.txtblock_A {
	background: var(--color-w);
}
.txtblock.txtblock_B {
	background: var(--color-base);
}

/* テクストブロック タイトル */
.txtblock h2 {
	background: transparent;
	padding: 0.5em 0;
	margin-bottom: 1em;
	text-align: center;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-ttl);
	letter-spacing: var(--font-spacing-wide);
	line-height: var(--font-height_mini2);
	color: var(--color-accent);
	border-top: solid 1px var(--color-accent);
	border-bottom: solid 1px var(--color-accent);
}
.txtblock h2 .h2_sub {
	display: inline-block;
	margin-bottom: 0.2em;
	font-size: 0.8em;
	color: var(--color-w);
	background: var(--color-accent);
	border-radius: 100px;
	padding: 0.2em 1em;
}

/* チェックリスト */
.listStyle {
    padding: 1em;
    border-radius: 10px;
}
.listStyle li {
	margin: 1em 0;
    margin-left: 1.5em;
    text-indent: -1.5em;
}
.listStyle li::before {
	display: inline;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f00c'' ';
}
.listStyle.listStyle_A {
    background: var(--color-base);
}
.listStyle.listStyle_A li::before {
    color: var(--color-accent);
}
.listStyle.listStyle_B {
    background: var(--color-w);
}
.listStyle.listStyle_B li::before {
    color: var(--color-accent);
}
/* チェックリスト 補足枠 */
.listStyle .listStyle_note {
	text-indent: 0px;
	padding: 1em;
	font-size: var(--font-size-small);
	border: var(--color-accent) 1px solid;
	border-radius: 5px;
	color: var(--color-accent);
}

/* 枠 */
.waku01 {
	border-radius: 10px;
	background: var(--color-w);
}

/* ------ sp ------ */
@media screen and (max-width: 800px){
	.txtblock h2 {
		font-size: var(--font-size-ttl-sp);
	}
}




/* ================================================
   4 要素別設定 個別 背景
================================================ */

.lead {
	background: var(--color-main);
}
.profile .is-bgfix-bg::before {
	background: var(--color-sub) url(../img/profile_bg.png) top center repeat-y;
	background-size: 100%;
}
.method .is-bgfix-bg::before {
	background: #916F3B url(../img/method_bg.png) top center no-repeat;
	background-size: cover;
}
.method_step {
	background: var(--color-w);
}
.cm {
	background: var(--color-sub);
}
.method_prep {
	background: var(--color-accent);
}
.future {
	background: var(--color-sub); /* キラキラ2 */
}
.flow {
	background: var(--color-base);
}


/* ------ sp ------ */
@media screen and (max-width: 800px){
	.profile {
		background: var(--color-sub) url(../img/profile_bg.png) top center repeat-y;
		background-size: 100%;
		background-attachment: fixed;
	}
}





/* ================================================
   5 要素別設定 個別 デザイン設計
================================================ */

.profile_box {
	background: var(--color-w);
	border: solid 1px var(--color-gold);
}
.profile_box_ttl {
	margin-bottom: 1em;
}
.profile_li_01 {
	margin-bottom: 1em;
}

.method_01,
.method_02 {
	background: var(--color-w);
	border-radius: 10px;
}
.method_01 h3,
.method_02 h3 {
	position: relative;
	top: -3em;
	margin-bottom: -3em;
	margin-top: 3em;
}
.method_02 h3 {
	margin-top: 4em;
}

.flow {
	position: relative;
}
.flow_btn {
	position: absolute;
	top: 29%;
	left: 16%;
	width: 78%;
}

/* ------ sp ------ */
@media screen and (max-width: 800px){
	
}