@charset "utf-8";



/* =====================================================
--------------------------------------------------------
リセット・基本設定
--------------------------------------------------------
===================================================== */

/* 変数代入 */
:root {
	--color-black: #103445;
	--color-gray: #ced9de;
	--color-orange: #f77539;
	--color-brown: #f7ece6;
	--color-blue: #33a8de;
	--color-green: #30c42d;
	--color-white: #fff;
}

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

html.open {
	overflow: hidden;
}

body {
	position: relative;
	color: var(--color-black);
	font-family: 'Lato', 'M PLUS 1p', 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
}

input {
	/*transform: rotate(-0.05deg);*/
}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.2;
}

ul,ol { list-style: none; }

img {
	max-width: 100%;
	height: auto;
	max-height: 100%;
	vertical-align: bottom; /* 下部の余白を抑える */
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast; /* 拡大縮小でぼかしたり滑らかに処理せずエッジを保つ */
}

a {
	color: var(--color-black);
	text-decoration: none;
	transition: all 0.5s;
}

a img:hover {
	opacity: 0.5;
}

/* 文字リンクの下線 */
.u--underline {
	position: relative;
}

.u--underline::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-black);
	transition: all 0.5s;
	content: '';
}

.u--underline:hover::after {
	width: 0;
}

::selection {
	background: var(--color-black);
	color: var(--color-white);
}

/* オーバーフロー */
.overwrap {
	display: none;
}

.overwrap.open {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 130;
	overflow: hidden;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	background: #323f45;
}

section {
	padding: 40px 0;
}

/* インナー幅 */
.inner {
	/*transform: rotate(0.05deg);*/
	margin: 0 auto;
	padding: 0 30px;
	width: 100%;
}

/* 見出し */
h2 {
	margin-bottom: 30px;
	font-size: 3.0rem;
	font-weight: 800;
	text-align: center;
}

.notice_h2 {
	position: relative;
	margin-bottom: 50px;
}

.notice_h2:not(:first-of-type) {
	margin-top: 80px;
}

.notice_h2::after {
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 10px;
	border-radius: 5px;
	background: var(--color-orange);
	content: '';
}

.u--h2b {
	font-size: 4.0rem;
	font-weight: 700;
}

.u--h2r {
	font-weight: 400;
}

/* 直接切替 */
.u--sp-none { display:none; }
.u--pc-none { display:inline-block; }

.u--text-orange {
	color: var(--color-orange);
}

.u--text-right {
	text-align: right;
}

.u--note {
	font-size: 1.6rem;
}

@media screen and (min-width:1024px) {
	body {
		font-size: 2.0rem;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	section {
		padding: 80px 0;
	}
	.inner {
		padding: 0;
		width: 1000px;
	}
	h2 {
		margin-bottom: 50px;
		font-size: 4.0rem;
	}
	.u--h2b {
		font-size: 5.0rem;
	}
	.u--sp-none { display:inline-block; }
	.u--pc-none { display:none; }
}





/* =====================================================
--------------------------------------------------------
cssアニメ
--------------------------------------------------------
===================================================== */

.u--fadeUp {
	transform: translateY(400px);
	animation: fadeUp 1s forwards;
}

@keyframes fadeUp {
	0% {
		transform: translateY(400px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.u--scale {
	transform:scale(1.5);
	animation: scale 1s forwards;
}

@keyframes scale {
	0% {
		transform:scale(1.5);
	}
	100% {
		transform:scale(1);
	}
}





/* =====================================================
--------------------------------------------------------
メインビジュアル
--------------------------------------------------------
===================================================== */

.mainvisual {
	margin: 20px 0;
}

.mainvisual .inner {
	padding-bottom: 236px;
	background: url(/img/ep/plplan/mainvisual.png) no-repeat center bottom / 320px 236px;
}

.mainvisual_left {
	width: 100%;
	text-align: center;
}

.mainvisual_left_h1 {
	display: inline;
	background: linear-gradient(transparent 66%, #f7ece6 0%);
	font-weight: 700;
}

.mainvisual_left_h1 span {
	color: var(--color-orange);
	font-size: 3.0rem;
}

.mainvisual_left_logo {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin-top: 30px;
	margin-bottom: 10px;
	padding: 0 25px;
	font-weight: 700;
}

.mainvisual_left_logo::before,
.mainvisual_left_logo::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 30px;
	background: var(--color-black);
	content: '';
}

.mainvisual_left_logo::before {
	left: 0;
	clip-path: polygon(0 10px,5px 0,15px 30px);
}

.mainvisual_left_logo::after {
	right: 0;
	clip-path: polygon(15px 10px,10px 0,0 30px);
}

.mainvisual_left_logo img {
	margin-right: 10px;
	width: 150px;
}

/* catch */
.mainvisual_left_catch {
	margin-bottom: 10px;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -2px;
}

.mainvisual_left_catch span {
	font-size: 3.5rem;
	font-weight: 800;
}

.mainvisual_left_catch img {
	margin-top: 5px;
	width: 130px;
	vertical-align: baseline;
}

.mainvisual_left .u--note {
	margin-top: 10px;
}

@media screen and (min-width:1024px) {
	.mainvisual {
		margin: 0;
		height: 600px;
	}
	.mainvisual .inner {
		display: flex;
		/* align-items: flex-end; */
		align-items: center;
		padding-bottom: 0;
		height: 500px;
		background-position: right bottom;
		background-size: 560px 412px;
	}
	.mainvisual_left {
		width: auto;
	}
	.mainvisual_left_logo {
		padding: 0 45px;
		font-size: 3.0rem;
	}
	.mainvisual_left_logo::before,
	.mainvisual_left_logo::after {
		width: 25px;
		height: 50px;
	}
	.mainvisual_left_logo::before {
		clip-path: polygon(0 15px,10px 0,25px 50px);
	}
	
	.mainvisual_left_logo::after {
		clip-path: polygon(25px 15px,15px 0,0 50px);
	}
	.mainvisual_left_logo img {
		width: 250px;
	}
	.mainvisual_left_catch {
		font-size: 6.0rem;
		line-height: normal;
	}
	.mainvisual_left_catch span {
		font-size: 5.0rem;
	}
	.mainvisual_left_catch img {
		margin: 0;
		width: 188px;
	}
}





/* =====================================================
--------------------------------------------------------
お悩み
--------------------------------------------------------
===================================================== */

.worry {
	padding-bottom: 0;
	background: var(--color-brown);
}

.worry_ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	font-family: 'M PLUS Rounded 1c';
	font-size: 2.4rem;
	font-weight: 700;
}

.worry_ul li {
	display: flex;
	justify-content: flex-end;
	position: relative;
	width: 100%;
}

.worry_ul li:nth-of-type(even) {
	justify-content: flex-start;

}

.worry_ul_li_img {
	position: absolute;
	bottom: 0;
	width: 90px;
}

.worry_ul li:nth-of-type(odd) .worry_ul_li_img {
	left: 0;
}

.worry_ul li:nth-of-type(even) .worry_ul_li_img {
	right: 0;
}

.worry_ul_li_text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: var(--color-white);
	text-align: center;
}

.worry_ul_li_text p {
	opacity: 0;
	transition: all 3s;
}

@media screen and (min-width:1024px) {
	.worry_ul {
		gap: 0 40px;
		font-size: 3.0rem;
	}
	.worry_ul li {
		width: calc((100% - 40px) / 2);
	}
	.worry_ul_li_img {
		width: auto;
	}
	.worry_ul_li_text {
		width: 320px;
		height: 320px;
	}
}





/* =====================================================
--------------------------------------------------------
提案
--------------------------------------------------------
===================================================== */

.suggest {
	position: relative;
	padding-top: 140px;
	text-align: center;
}

.suggest::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: var(--color-brown);
	content: '';
	clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.suggest_ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	margin: 40px 0;
}

.suggest_ul li {
	position: relative;
	padding: 30px 20px;
	width: 100%;
	max-width: 220px;
	background-repeat: no-repeat;
	background-position: center center;
	box-shadow: 0 0 10px var(--color-brown);
}

.suggest_ul li:nth-of-type(1) {
	background-image: url(/img/ep/plplan/suggest01.png);
	background-size: 150px 95px;
}

.suggest_ul li:nth-of-type(2) {
	background-image: url(/img/ep/plplan/suggest02.png);
	background-size: 120px 126px;
}

.suggest_ul li:nth-of-type(3) {
	background-image: url(/img/ep/plplan/suggest03.png);
	background-size: 150px 120px;
}

.suggest_ul li:nth-of-type(4) {
	background-image: url(/img/ep/plplan/suggest04.png);
	background-size: 124px 150px;
}

.suggest_ul li::after {
	position: absolute;
	top: 2px;
	right: 10px;
	z-index: -1;
	color: var(--color-brown);
	font-size: 6.0rem;
	font-weight: 700;
	line-height: 1;
	content: attr(data-num);
}

.suggest_ul li h3 {
	margin-bottom: 20px;
	color: var(--color-orange);
	font-size: 2.5rem;
	font-weight: 700;
}

@media screen and (min-width:1024px) {
	.suggest {
		padding-top: 230px;
	}
	.suggest::after {
		height: 150px;
	}
	.suggest_ul li {
		padding: 40px 20px 60px;
		width: calc((100% - 60px) / 4);
		max-width: initial;
		background-position: center bottom 40px;
	}
}





/* =====================================================
--------------------------------------------------------
概要
--------------------------------------------------------
===================================================== */

.outline {
	background: url(/img/ep/plplan/outline-bg.png) repeat 10px 10px;
}

.outline_dl div {
	display: flex;
	flex-flow: row wrap;
	gap: 20px 62px;
	margin-bottom: 10px;
	padding: 20px;
	background: var(--color-white);
}

.outline_dl dt {
	position: relative;
	width: 100%;
}

.outline_dl dt::after {
	position: absolute;
	top: calc(100% + 10px);
	right: 50%;
	transform: translateX(50%);
	width: 100%;
	height: 2px;
	background: var(--color-orange);
	content: '';
}

.outline_dl_ul {
	display: flex;
	flex-flow: row wrap;
}

.outline_dl_ul li {
	width: 100%;
}

.outline_dl_ul li::before {
	content: '・';
}

@media screen and (min-width:1024px) {
	.outline_dl dt {
		width: 7em;
	}
	.outline_dl dt::after {
		top: 0;
		right: -30px;
		transform: translateX(0%);
		width: 2px;
		height: 100%;
	}
	.outline_dl dd {
		width: calc(100% - 7em - 62px);
	}
	.outline_dl_ul li {
		margin-right: 1em;
		width: auto;
	}
}





/* =====================================================
--------------------------------------------------------
シミュレーション
--------------------------------------------------------
===================================================== */

.simulate .u--h2b {
	letter-spacing: -5px;
}

.simulate .inner {
	margin-bottom: 40px;
}

.simulate_setting {
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	row-gap: 10px;
}

.simulate_setting input {
	padding: 10px;
	width: 180px;
	border: none;
	background: var(--color-brown);
	font-family: 'Lato';
	font-size: 3.0rem;
	font-weight: 700;
	text-align: right;
}

.simulate_setting select {
	padding: 12px;
	border: none;
	background: var(--color-brown);
	font-size: 2.5rem;
	text-align: right;
}

.simulate_hr {
	margin: 20px 0;
	border: 1px solid var(--color-gray);
}

.simulate_result h3 {
	font-size: 3.0rem;
	font-weight: 700;
	text-align: center;
}

.simulate_result_all,
.simulate_result_first,
.simulate_result_second {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	gap: 10px;
	margin-top: 30px;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
}

.simulate_result h4 {
	width: 100%;
}

.simulate_result-en {
	width: 100%;
	border-bottom: 4px solid var(--color-orange);
	text-align: right;
}

#simulate_all,
#simulate_first,
#simulate_second {
	font-size: 4.0rem;
}

.simulate_warn.blink {
	color: var(--color-orange);
	/*animation: blink 1s ease-in-out infinite alternate;*/
}

/*@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}*/

@media screen and (min-width:1024px) {
	.simulate .inner:first-of-type {
		position: relative;
		padding: 60px 40px 40px 40px;
		border-radius: 20px;
		background: var(--color-black);
	}
	.simulate .inner:first-of-type::after {
		position: absolute;
		bottom: 20px;
		right: 80px;
		width: 240px;
		height: 486px;
		background: url(/img/ep/plplan/simulate.png) no-repeat center center / contain;
		content: '';
	}
	.simulate_paper {
		position: relative;
		padding: 60px 40px 50px 40px;
		border-radius: 20px;
		background: var(--color-white);
	}
	.simulate_paper::after {
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		width: 240px;
		height: 40px;
		background: var(--color-gray);
		content: '';
	}
	.simulate_setting {
		padding: 0 40px;
	}
	.simulate_hr {
		margin: 50px 0;
	}
	.simulate_result {
		padding-left: 80px;
	}
	.simulate_result h3 {
		font-size: 4.0rem;
	}
	.simulate_result_all,
	.simulate_result_first,
	.simulate_result_second {
		font-size: 3.0rem;
	}
	.simulate_result h4 {
		padding-bottom: 2px;
		width: 5em;
		text-align: right;
	}
	.simulate_result_all h4 {
		padding-bottom: 0;
		line-height: 0.6;
	}
	.simulate_result-en {
		width: 300px;
	}
	#simulate_all,
	#simulate_first,
	#simulate_second {
		font-size: 5.0rem;
	}
}





/* =====================================================
--------------------------------------------------------
流れ
--------------------------------------------------------
===================================================== */

.flow {
	background: url(/img/ep/plplan/flow-bg.png) repeat;
}

.flow_ul li {
	position: relative;
	padding-left: 40px;
}

.flow_ul li:not(:last-of-type) {
	padding-bottom: 30px;
}

.flow_ul li::before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-orange);
	content: '';
}

.flow_ul_line {
	position: absolute;
	top: 2px;
	left: 10px;
	width: 2px;
	height: 0%;
	background: var(--color-orange);
	content: '';
	transition: all 2s;
}

.flow_ul li h3 {
	color: var(--color-orange);
	font-weight: 900;
}

@media screen and (min-width:1024px) {
	.flow .inner {
		background: url(/img/ep/plplan/flow.png) no-repeat right bottom / 500px 310px;
	}
}





/* =====================================================
--------------------------------------------------------
オリジナルサービス
--------------------------------------------------------
===================================================== */

.original {
	text-align: center;
}

.original_marche img {
	margin: 30px 0 40px 0;
}

.original_more_more span {
	position: relative;
	color: var(--color-orange);
	font-size: 4.0rem;
	font-weight: 800;
}

.original_more_more span::before,
.original_more_more span::after {
	position: absolute;
	top: 50%;
	width: 5px;
	height: 40px;
	background: var(--color-orange);
	content: '';
}

.original_more_more span::before {
	left: -30px;
	transform: translateY(-50%) rotate(-30deg);
}

.original_more_more span::after {
	right: -30px;
	transform: translateY(-50%) rotate(30deg);
}

.original_more_ul {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	margin-top: 30px;
}

.original_more_ul li {
	width: 100%;
}

.original_more_ul_li_catch {
	display: block;
	margin-top: 20px;
	font-weight: 700;
}

.original_more_ul li h3 {
	color: var(--color-orange);
	font-size: 2.5rem;
	font-weight: 700;
}

@media screen and (min-width:1024px) {
	.original_more_ul li {
		width: calc((100% - 20px) / 2);
	}
	.original_more_ul li h3 {
		font-size: 3.0rem;
	}
}





/* =====================================================
--------------------------------------------------------
よくあるご質問
--------------------------------------------------------
===================================================== */

.faq {
	background: url(/img/ep/plplan/faq-bg.png) repeat 10px 10px;
}

.faq_dl dt {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	column-gap: 16px;
	position: relative;
	margin-bottom: 10px;
	color: var(--color-orange);
	font-weight: 700;
}

.faq_dl span {
	width: calc(100% - 44px - 16px);
}

.faq_dl_q {
	position: relative;
	width: 44px !important;
	height: 44px;
	border-radius: 50%;
	background: var(--color-orange);
	color: var(--color-white);
	font-size: 3.0rem;
	text-align: center;
	line-height: 130%;
}

.faq_dl dd {
	padding: 20px 30px;
	background: var(--color-white);
}

.faq-fc .faq_dl dd {
	background: var(--color-brown);
}

.faq_dl dd:not(:last-of-type) {
	margin-bottom: 30px;
}

@media screen and (min-width:1024px) {
	.faq_dl_q::after {
		position: absolute;
		top: calc(100% + 2px);
		left: 20px;
		width: 34px;
		height: 32px;
		background: url(/img/ep/plplan/faq_dt.png) no-repeat;
		content: '';
	}
	.faq_dl dd {
		margin-left: 60px;
	}
}





/* =====================================================
--------------------------------------------------------
会社概要
--------------------------------------------------------
===================================================== */

.company_dl {
	display: flex;
	flex-flow: row wrap;
}

.company_dl dt {
	width: 100%;
	font-weight: 800;
}

.company_dl dd {
	margin-bottom: 20px;
	width: 100%;
}

.company_dl dd p:not(:last-of-type) {
	margin-bottom: 10px;
}

.company_dl dd p:last-of-type {
	text-align: right;
}

@media screen and (min-width:1024px) {
	.company_dl {
		gap: 20px 40px;
	}
	.company_dl dt {
		width: 4em;
		/*width: 7em;*/
		font-weight: 500;
	}
	.company_dl dd {
		margin-bottom: 0;
		width: calc(100% - 40px - 4em);
		/*width: calc(100% - 40px - 7em);*/
	}
}





/* =====================================================
--------------------------------------------------------
セカンドページ
--------------------------------------------------------
===================================================== */

.notice_head {
	margin: 40px 0;
}

.notice_bg {
	position: relative;
}

.notice_bg span {
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(50%);
	z-index: -1;
	opacity: 50%;
	width: 260px;
	height: 260px;
	background: url(/img/ep/plplan/mainvisual.png) no-repeat top center / contain;
	content: '';
}

.notice_h1 {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	row-gap: 10px;
	font-size: 2.5rem;
	font-weight: 700;
}

.notice_h1 span {
	color: var(--color-orange);
	font-size: 3.0rem;
}

.notice_h1 img {
	width: 200px;
}

@media screen and (min-width:1024px) {
	.notice_bg span {
		right: 0;
		transform: translateX(0%);
		width: 350px;
	}
	.notice_h1 {
		font-size: 3.0rem;
	}
	.notice_h1 span {
		font-size: 4.0rem;
	}
	
	.notice_h1 img {
		margin-right: 20px;
		width: 250px;
	}
}

.notice_ul li {
	position: relative;
	margin-bottom: 30px;
	padding-left: 30px;
}

.notice_ul li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-size: 2.0rem;
	font-weight: 900;
	content: '\f058';
}

/* 本人確認 */
.notice_ol {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

.notice_ol li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.notice_ol_li_icon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 3.0rem;
	line-height: 1;
}

.notice_ol li:not(:last-of-type) .notice_ol_li_icon::after {
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%);
	color: var(--color-black);
	font-family: "Font Awesome 5 Free";
	font-size: 2.0rem;
	font-weight: 900;
	content: '\f101';
}

.notice_ol li:last-of-type .notice_ol_li_icon {
	background: var(--color-orange);
}

/* ご利用の流れ */
.notice_dl {
	margin-bottom: 80px;
}

.notice_dl dt {
	position: relative;
	color: var(--color-orange);
	font-size: 2.5rem;
	font-weight: 700;
}

.notice_dl dt::before {
	padding-bottom: 5px;
	display: inline-block;
	width: 100%;
	height: auto;
	background: var(--color-orange);
	color: var(--color-white);
	font-size: 2.0rem;
	text-align: center;
	content: attr(step-num);
}

.notice_dl dt:not(:first-of-type) {
	margin-top: 50px;
}

.notice_dl dd:not(:last-of-type) {
	position: relative;
	padding-bottom: 50px;
	border-bottom: 4px solid var(--color-gray);
}

.notice_dl dd:not(:last-of-type)::after {
	position: absolute;
	bottom: -16px;
	left: 55px;
	width: 20px;
	height: 20px;
	transform: rotate(45deg);
	border-right: 4px solid var(--color-gray);
	border-bottom: 4px solid var(--color-gray);
	background: var(--color-white);
	content: '';
}

@media screen and (min-width:1024px) {
	.notice_ol {
		gap: 100px;
	}
	.notice_ol li::after {
		display: none;
	}
	.notice_ol_li_icon {
		width: 120px;
		height: 120px;
		font-size: 6.0rem;
	}
	.notice_ol li:not(:last-of-type) .notice_ol_li_icon::after {
		right: -70px;
		color: var(--color-black);
		font-size: 4.0rem;
	}
	.notice_dl dt {
		padding-left: 115px;
		font-size: 3.0rem;
	}
	.notice_dl dt::before {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 95px;
	}
}

/* ポップアップ */
.notice_na-link {
	cursor: pointer;
}

.notice_na {
	display: none;
}

.notice_na.open {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 130;
	overflow: auto;
	width: calc(100% - 60px);
	max-width: 600px;
	height: auto;
	background: #fff;
}

.notice_na_head {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 10px 25px 10px 30px;
	background: var(--color-black);
	color: var(--color-white);
}

.notice_na_head_close {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-black);
	cursor: pointer;
}

.notice_na_ul {
	display: flex;
	flex-flow: row wrap;
	padding: 30px;
}

.notice_na_ul li {
	width: 100%;
}

@media screen and (min-width:1024px) {
	.notice_na_ul li {
		width: 50%;
	}
}





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

.footer_corp {
	padding: 70px 0;
	background: var(--color-black);
	color: var(--color-white);
	text-align: center;
}

/* .footer_corp_ul {
	display: flex;
	flex-flow: row wrap;
	gap: 20px 0;
}

.footer_corp_ul li {
	width: 100%;
} */

.footer_corp_ul_li_dl dt span {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	font-size: 2.5rem;
}

.footer_corp_ul_li_dl dt span::before,
.footer_corp_ul_li_dl dt span::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 30px;
	border-top: 2px solid var(--color-white);
	border-bottom: 2px solid var(--color-white);
	content: '';
}

.footer_corp_ul_li_dl dt span::before {
	left: -20px;
	border-left: 2px solid var(--color-white);
}

.footer_corp_ul_li_dl dt span::after {
	right: -20px;
	border-right: 2px solid var(--color-white);
}

.footer_corp_ul_li_dl_btn {
	margin: 20px 0 10px 0;
}

.footer_corp_ul_li_dl_btn a {
	display: inline-block;
	padding: 10px 20px;
	width: 100%;
	max-width: 400px;
	border-radius: 40px;
	background: var(--color-white);
	font-size: 2.5rem;
	font-weight: 800;
}

.footer_corp_ul_li_dl_btn a:nth-of-type(2) {
		margin-top: 20px;
		font-weight: 700;
}

.footer_corp_ul_li_dl_btn a i {
	color: var(--color-orange);
	transition: all 0.5s;
}


.footer_cta {
	padding: 40px 0;
	background: var(--color-orange);
}

.footer_corp p {
	margin-top: 24px;
	font-size: 16px;
}

@media screen and (min-width:1024px) {
	.footer_corp_ul_li_dl dt span {
		font-size: 3.0rem;
	}
	/* .footer_corp_ul li {
		width: 50%;
	} */
	.footer_corp_ul_li_dl_btn a {
		font-size: 3.5rem;
	}
	.footer_corp_ul_li_dl_btn a:hover {
		background: var(--color-gray);
		color: var(--color-white);
	}
	.footer_corp_ul_li_dl_btn a:hover i {
		color: var(--color-white);
	}
}





/* =====================================================
--------------------------------------------------------
CTA
--------------------------------------------------------
===================================================== */

.cta_main,
.cta_marche,
.footer_cta a {
	display: block;
	position: relative;
	padding: 20px 10px;
	width: 100%;
	border-radius: 50px;
	font-size: 3.0rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.cta_main {
	margin: 0 auto;
	max-width: 450px;
	border: 2px solid var(--color-orange);
	background: var(--color-orange);
	color: var(--color-white);
}

.cta_marche {
	/* margin: 40px auto 60px auto; */
	margin: 40px auto 0;
	width: 100%;
	max-width: 470px;
	border: 2px solid var(--color-black);
	background: var(--color-black);
	color: var(--color-white);
	font-size: 3.0rem;
	text-align: center;
}

.footer_cta a {
	margin: 0 auto;
	max-width: 450px;
	border: 2px solid var(--color-white);
	background: var(--color-white);
}

.cta_yes,
.cta_no {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 20px 10px;
	width: 100%;
	max-width: 600px;
	border-radius: 30px;
	line-height: 1.2;
	color: var(--color-white);
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
}

.cta_yes {
	margin-bottom: 20px;
	border: 2px solid var(--color-orange);
	background: var(--color-orange);
}

.cta_no {
	border: 2px solid var(--color-black);
	background: var(--color-black);
}

.cta_main::after,
.cta_marche::after,
.footer_cta a::after,
.cta_yes::after,
.cta_no::after {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-size: 3.0rem;
	font-weight: 900;
	content: '\f105';
}

.cta_main::after,
.cta_marche::after,
.cta_yes::after,
.cta_no::after {
	color: var(--color-white);
}

.cta_main::after {
	animation: cta-out 0.5s 0s linear both;
}

.cta_marche::after {
	animation: marche-out 0.5s 0s linear both;
}

.footer_cta a::after {
	color: var(--color-orange);
	animation: footer-out 0.5s 0s linear both;
}

.cta_main span,
.cta_marche span,
.footer_cta a span,
.cta_yes span,
.cta_no span {
	font-size: 2.0rem;
	font-weight: 800;
}

@media screen and (min-width:1024px) {
	.cta_main,
	.footer_cta a {
		font-size: 5.0rem;
	}
	.cta_marche {
		font-size: 4.0rem;
	}
	.cta_yes,
	.cta_no {
		border-radius: 50px;
		font-size: 3.0rem;
		line-height: 1;
	}
	.cta_main span,
	.cta_marche span,
	.footer_cta a span {
		font-size: 3.0rem;
	}
	.cta_yes span,
	.cta_no span {
		font-size: 2.0rem;
	}
	.cta_main::after,
	.cta_marche::after,
	.footer_cta a::after {
		font-size: 4.0rem;
	}
	.cta_main:hover,
	.cta_yes:hover {
		background: var(--color-white);
		color: var(--color-orange);
		transform:scale(1.1);
	}
	.cta_marche:hover,
	.cta_no:hover {
		background: var(--color-white);
		color: var(--color-black);
		transform:scale(1.1);
	}
	.footer_cta a:hover {
		color: var(--color-orange);
		transform:scale(1.1);
	}
	.cta_main:hover::after,
	.cta_yes:hover::after {
		animation: cta-on 0.5s 0s linear both;
	}
	.cta_marche:hover::after,
	.cta_no:hover::after {
		animation: marche-on 0.5s 0s linear both;
	}
	.cta_main::after,
	.cta_marche::after,
	.footer_cta a::after {
		right: 30px;
	}
	@keyframes cta-out {
		0% {
			color: var(--color-orange);
		}
		100% {
			color: var(--color-white);
		}
	}
	@keyframes cta-on {
		0% {
			color: var(--color-white);
		}
		100% {
			color: var(--color-orange);
		}
	}
	@keyframes marche-out {
		0% {
			color: var(--color-black);
		}
		100% {
			color: var(--color-white);
		}
	}
	@keyframes marche-on {
		0% {
			color: var(--color-white);
		}
		100% {
			color: var(--color-black);
		}
	}
}