@charset "UTF-8";

html {
	container-type: inline-size;
}

.line_integration {
	font-family:  "Noto Sans JP", sans-serif;
	--linegreen: #1CAE1A;
	--serif:"Noto Serif JP", serif;
}

.section_inner {
	width: 1480px;
	margin-inline: auto;
	padding-inline: 55px;
}
.section_title {
	text-align: center;
	margin-bottom: 48px;
}
.section_title_main {
	color: #373737;
	font-size: 35px;
	font-weight: 700;
	margin-bottom: 2px;
}
.section_title_en {
	color: var(--linegreen);
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 500;
}

#mv img {
	width: 100%;
}

#lead {
	padding-block: 60px;
}
.lead_text {
	color: #373737;
	text-align: center;
	font-size: 26px;
	line-height: 2;
}
.lead_text .color {
	color: var(--linegreen);
}

#merit {
	background: #D9F2D9;
	padding-block: 100px;
}
.merit_content {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: space-between;
	align-items: stretch;
}
.merit_item {
	display: flex;
	flex-flow: column;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	width: 430px;
	background: #fff;
	border-radius: 10px;
	padding: 50px 50px 65px;
	position: relative;
}
.merit_item_num {
	display: flex;
	flex-flow: column;
	align-content: center;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
	width: 70px;
	height: auto;
	border: 1px solid var(--linegreen);
	border-radius: 300px;
	color: var(--linegreen);
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	left: 20px;
	top: 20px;
}
.merit_item_num::before {
	content: "MERIT";
	font-size: 12px;
	font-weight: 400;
}
.merit_item_icon {
	width: 150px;
	margin-bottom: 20px;
}
.merit_item_text {
	text-align: center;
	font-size: 20px;
}
.merit_item_text .color {
	font-weight: 700;
}

#step {
	padding-block: 100px;
}
.step_textwrap {
	text-align: center;
	margin-bottom: 70px;
}
.step_textwrap_inner {
	display: inline-block;
	position: relative;
}
.step_circle {
	display: flex;
	flex-flow: column wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
	width: 112px;
	height: auto;
	background: var(--linegreen);
	border-radius: 300px;
	color: #fff;
	font-size: 22px;
	line-height: 1.35;
	position: absolute;
	right: calc(100% + 12px);
	bottom: 0;
}
.step_text {
	font-size: 22px;
}
.step_content {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 80px;
}
.step_item {
	display: flex;
	flex-flow: column wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	width: 430px;
	background: #FFFDE6;
	border-radius: 10px;
	padding: 16px 30px 55px;
	position: relative;
}
.step_item:nth-of-type(n + 2)::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 52px;
	background: var(--linegreen);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	position: absolute;
	right: calc(100% + 5px);
	top: 50%;
	translate: 0 -50%;
}
.step_item_num {
	width: 100%;
	position: relative;
	text-align: center;
	margin-bottom: 20px;
}
.step_item_num::before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 1px;
	background: var(--linegreen);
	position: absolute;
	left: 0;
	bottom: 44%;
}
.step_item_num p {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 100px;
	margin-inline: auto;
	background: #fefde7;
	color: var(--linegreen);
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 500;
	position: relative;
}
.step_item_num p::before {
	content: "STEP";
	font-size: 20px;
	margin-right: 4px;
	margin-top: .25em;
}
.step_item_text {
	font-size: 18px;
	margin-bottom: 30px;
}
.step_item_img {
	width: 220px;
}
.step_btn a {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 400px;
	margin-inline: auto;
	padding-block: 16px;
	background: var(--linegreen);
	border-radius: 300px;
	color: #fff;
	font-size: 26px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 3px 6px #0003;
}

#faq {
	background: #D9F2D9;
	padding-block: 100px;
}
.faq_content {
	display: flex;
	flex-flow: column wrap;
	gap: 20px;
	width: 1200px;
	margin-inline: auto;
}
.faq_item {
	background: #fff;
	border-radius: 4px;
}
.faq_item dt {
	padding: 24px 88px 24px 50px;
	color: var(--linegreen);
	font-size: 22px;
	font-weight: 500;
	position: relative;
	cursor: pointer;
}
.faq_item dt::before, .faq_item dt::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 2px;
	background: var(--linegreen);
	border-radius: 300px;
	position: absolute;
	right: 23px;
	top: 50%;
	translate: 0 -50%;
	transition: .3s;
}
.faq_item dt:not(.is-active)::before {
	rotate: 90deg;
}
.faq_item dd {
	padding: 6px 88px 30px 50px;
	font-size: 16px;
}
.faq_item dd img {
    display: block;
}
.faq_item dd ol {
    margin-bottom: 1em;
}
.faq_item dd ol li {
    list-style: none;
    text-indent: -1.2em;
    padding-left: 1.2em;
}
.faq_item dd ul {
    margin-bottom: 1em;
}
.faq_item dd ul li {
    list-style: none;
    text-indent: -1.2em;
    padding-left: 1.2em;
}
.faq_item dd ul li::before {
    content: "・";
}


/** SP **/
[data-browse-mode="S" ] .section_inner {
	width: calc(100% - 30px);
	padding-inline: 0;
}
[data-browse-mode="S" ] .section_title {
    margin-bottom: 27px;
}
[data-browse-mode="S" ] .section_title_main {
    font-size: 26px;
}
[data-browse-mode="S" ] .section_title_en {
    font-size: 12px;
}

[data-browse-mode="S" ] #lead {
	padding-block: 40px;
}
[data-browse-mode="S" ] .lead_text {
	font-size: 18px;
	line-height: 1.5;
}

[data-browse-mode="S" ] #merit {
	padding: 50px 15px;
	position: relative;
}
[data-browse-mode="S" ] #merit::before,
[data-browse-mode="S" ] #merit::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(/img/usr/freepage/line_integration/bg01.png) no-repeat center top / contain;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
[data-browse-mode="S" ] #merit::before {
	rotate: 180deg;
}
[data-browse-mode="S" ] #merit .section_inner {
	position: relative;
	z-index: 2;
}
[data-browse-mode="S" ] .merit_content {
    gap: 20px;
}
[data-browse-mode="S" ] .merit_item {
    width: 100%;
    padding: 30px 0 40px;
}
[data-browse-mode="S" ] .merit_item_icon {
    margin-bottom: 10px;
}
[data-browse-mode="S" ] .merit_item_text {
    font-size: 18px;
    width: min(100%, 300px);
}

[data-browse-mode="S" ] #step {
	padding: 50px 15px 60px;
}
[data-browse-mode="S" ] .step_textwrap {
	margin-bottom: 30px;
}
[data-browse-mode="S" ] .step_circle {
	width: 75px;
	font-size: 16px;
	right: calc(100% + 8px);
	bottom: 34px;
}
[data-browse-mode="S" ] .step_text {
	font-size: 18px;
}
[data-browse-mode="S" ] .step_content {
	gap: 36px;
	margin-bottom: 40px;
}
[data-browse-mode="S" ] .step_item {
	width: 100%;
	padding: 16px 0 30px;
}
[data-browse-mode="S" ] .step_item:nth-of-type(n + 2)::before {
    width: 52px;
    height: 18px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    inset: initial;
    left: 50%;
    bottom: calc(100% + 8px);
    translate: -50% 0;
}
[data-browse-mode="S" ] .step_item_num {
	width: calc(100% - 70px);
}
[data-browse-mode="S" ] .step_item_text {
	text-align: center;
}
[data-browse-mode="S" ] .step_btn a {
    width: 100%;
    padding-block: 14px;
    font-size: 22px;
}

[data-browse-mode="S" ] #faq {
	padding: 50px 0;
	position: relative;
}
[data-browse-mode="S" ] #faq::before,
[data-browse-mode="S" ] #faq::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(/img/usr/freepage/line_integration/bg01.png) no-repeat center top / contain;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
[data-browse-mode="S" ] #faq::before {
	rotate: 180deg;
}
[data-browse-mode="S" ] #faq .section_inner {
	position: relative;
	z-index: 2;
}
[data-browse-mode="S" ] .faq_content {
    gap: 10px;
    width: 100%;
}
[data-browse-mode="S" ] .faq_item dt {
    padding: 14px 60px 14px 20px;
    font-size: 18px;
}
[data-browse-mode="S" ] .faq_item dt::before {
    width: 30px;
    height: 30px;
    right: 15px;
}
[data-browse-mode="S" ] .faq_item dt::after {
    background: #fff;
    width: 14px;
    height: 14px;
    clip-path: polygon(calc(50% - 1px) 0, calc(50% + 1px) 0, calc(50% + 1px) calc(50% - 1px), 100% calc(50% - 1px), 100% calc(50% + 1px), calc(50% + 1px) calc(50% + 1px), calc(50% + 1px) 100%, calc(50% - 1px) 100%, calc(50% - 1px) calc(50% + 1px), 0 calc(50% + 1px), 0 calc(50% - 1px), calc(50% - 1px) calc(50% - 1px));
}
[data-browse-mode="S" ] .faq_item dt.is-active::after {
    clip-path: polygon(0 calc(50% - 1px), 100% calc(50% - 1px), 100% calc(50% + 1px), 0 calc(50% + 1px));
}
[data-browse-mode="S" ] .faq_item dd {
    padding: 2px 60px 14px 20px;
}