/* Scss Document */

$color:#a08f1a; //サイトで良く使う色
$text:#000; //基本的なテキストの色

//hoverアニメーションを使いたい場合に使用
//呼び出し方法(cssに指定)　→　@include ani;
@mixin ani {
	transition: 0.3s ease-in-out;
}

//display:flex;を使用した場合等に使用（widthが30%から70%まで）画面幅が768pxで100%に変わる
//呼び出し方法(htmlに指定)　→　.flex_30　～　.flex_70
@for $i from 30 through 70 {
    .flex_#{$i} { width: 1% * $i; }
}

//縮めた際の最小サイズ
:root {
    --min-size: 100px; // 最小サイズ
    --clamp-vw: 18vw; // 通常の基準値
}

@media (max-width: 1024px) {
    :root {
        --min-size: 60px; // 最小サイズ
        --clamp-vw: 10vw; // スマホで適度に小さくする
    }
}

$p: 100;
@while $p < 310{
    .padding#{$p}{
        padding-top: clamp(var(--min-size),var(--clamp-vw), #{$p}px);
        padding-bottom: clamp(var(--min-size),var(--clamp-vw), #{$p}px);
    }
    $p: $p + 10;
}
$m: 100;
@while $m < 310{
    .margin#{$m}{
        margin-top: clamp(var(--min-size),var(--clamp-vw), #{$m}px);
        margin-bottom: clamp(var(--min-size),var(--clamp-vw), #{$m}px);
    }
    $m: $m + 10;
}
$pt: 100;
@while $pt < 310{
    .pt-#{$pt}{
        padding-top: clamp(var(--min-size),var(--clamp-vw), #{$pt}px);
    }
    $pt: $pt + 10;
}
$pb: 100;
@while $pb < 310{
    .pb-#{$pb}{
        padding-bottom: clamp(var(--min-size),var(--clamp-vw), #{$pb}px);
    }
    $pb: $pb + 10;
}
$mt: 100;
@while $mt < 310{
    .mt-#{$mt}{
        margin-top: clamp(var(--min-size),var(--clamp-vw), #{$mt}px);
    }
    $mt: $mt + 10;
}
$mb: 100;
@while $mb < 310{
    .mb-#{$mb}{
        margin-bottom: clamp(var(--min-size),var(--clamp-vw), #{$mb}px);
    }
    $mb: $mb + 10;
}
a,
a:hover,
a:focus,
a:active,
a:visited,
a:focus-visible {
    text-decoration: none;
}

/************************/

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 20px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 20px;
	width: 100%;
	transition: 0.3s ease;
	&.active {
		background-color: #FFF;
		box-shadow: 0 3px 10px  rgba(0,0,0,0.1);
	}
}

#logo {
	flex-shrink: 0;
}

.h_right {
	max-width: 855px;
	flex-grow: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 20px;
}

.h_nav {
	max-width: 525px;
	flex-grow: 2;
	padding-top: 10px;
	ul {
		display: flex;
		justify-content: space-between;
	}
	a {
		color: inherit;
		font-weight: 500;
	}
}

.h_contact {
	width: 265px;
	position: relative;
	height: 60px;
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 500;
		background-color: #e09c4c;
		width: 100%;
		height: 100%;
		color: #FFF;
		border-radius: 100px;
		transition: 0.3s ease;
		&:hover {
			transform: translateY(10px);
		}
	}
	&:after {
		content: "";
		background-color: #b97d37;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 10px;
		left: 0;
		border-radius: 100px;
	}
}

/****************************/

.fv_bg {
	background: url("../images/fv_bg.webp") 50% 0/cover no-repeat;
	position: relative;
}
.fv_h850 {
	height: 850px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 100px;
}
.fv_title {
	text-align: center;
	font-size: clamp(28px,4.2vw, 49px);
	font-weight: bold;
	display: flex;
	flex-direction: column;
	gap: 35px;
	p {
		max-width: max-content;
		margin: 0 auto;
		text-box: trim-both cap alphabetic;
		font-feature-settings: "palt" 1;
		letter-spacing: 0.13em;
	}
}
.fv_bg_title {
	background-color: #43b4b0;
	color: #FFF;
	padding: 25px;
	border-radius: 20px;
}
.fv_text {
	margin-top: 40px;
	text-align: center;
	line-height: 2.2em;
	font-weight: bold;
}

.fv_under {
	background-color: #43b4b0;
	padding: 50px 20px;
	.more_btn {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}
.more_btn {
	width: 100%;
	max-width: 580px;
	position: relative;
	height: 100px;
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 500;
		background-color: #e09c4c;
		width: 100%;
		height: 100%;
		color: #FFF;
		border-radius: 100px;
		transition: 0.3s ease;
		font-size: 20px;
		font-weight: bold;
		&:hover {
			transform: translateY(10px);
		}
	}
	&:after {
		content: "";
		background-color: #b97d37;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 10px;
		left: 0;
		border-radius: 100px;
	}
}

.fv_absolute {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	z-index: 300;
	width: 94%;
	max-width: 1580px;
	img {
		max-width: 100%;
		height: auto;
	}
}
.fv_left {
	width: 30%;
}
.fv_right {
	text-align: right;
	width: 25%;
}

/****************************/

.sec01_flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
.sec01_left {
	width: 55%;
	max-width: 665px;
	padding-top: 30px;
}
.sec01_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	img {
		max-width: 100%;
		height: auto;
	}
}
.sec01_title {
	font-size: clamp(24px,4.0vw, 48px);
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	.bb {
		background:linear-gradient(transparent 70%, #fff0af 70%);
	}
}
.green_14a7a2 {
	color: #14a7a2;
}

.sec01_right {
	width: 45%;
	max-width: 520px;
}

.line_height22 {
	line-height: 2.2em;
}
.line_height20 {
	line-height: 2em;
}
/**************************/
.eng_28 {
	font-size: clamp(20px,2.2vw, 28px);
	color: #a8a8a8;
	line-height: 1.0em;
}
.title_42 {
	font-size: clamp(26px,3.5vw, 42px);
	font-weight: bold;
}

.green_40bb7d {
	color: #40bb7d;
}
.title_32 {
	font-size: clamp(24px,2.6vw, 32px);
	font-weight: bold;
}
.letter1 {
	letter-spacing: 0.1em;
}
/********/

.sec02_list_wrap {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.sec02_inner {
	background-color: #ecf5f5;
	border-radius: 20px;
	&.bg_sytle2 {
		background-color: #eaf5f0;
		.sec02_bg_title,.check_list li {
			background-color: #40bb7d;
		}
		.sec02_inner_grid p {
			color: #40bb7d;
		}
	}
}
.sec02_bg_title {
	background-color: #14a5a2;
	border-radius: 20px;
	color: #FFF;
	padding: 15px 15px 15px 150px;
	position: relative;
	font-size: clamp(24px,3.2vw, 38px);
	font-weight: bold;
	overflow: hidden;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.sec02_num {
	position: absolute;
	font-size: clamp(100px,12.5vw, 140px);
	left: 35px;
	bottom: 0;
	text-box: trim-both cap alphabetic;
    font-style: italic;
	opacity: 0.2;
}

.sec02_padding {
	padding: 60px 0;
}
.sec02_inner_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sec02_inner_left {
	width: 400px;
	flex-shrink: 0;
	h3 {
		line-height: 1.9em;
		white-space: nowrap;
	}
}
.letter004 {
	letter-spacing: 0.04em;
}

.sec02_inner_right {
	flex-grow: 2;
}

/**/
.sec02_inner_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 40px;
	p {
		text-align: center;
		color: #14a5a2;
		line-height: 1.2em;
		margin-top: 10px;
		font-size: 19px;
	}
}

.check_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 45px;
    row-gap: 35px;
	li {
		display: flex;
		align-items: flex-start;
		background-color: #6eafa8;
		color: #FFF;
		border-radius: 22px;
		font-size: clamp(18px,1.7vw, 22px);
		padding: 25px 10px 25px 30px;
		line-height: 1.3em;
	}
	.check_icon {
		flex-shrink: 0;
		width: 45px;
		position: relative;
		top: -2px;
	}
}
/****************************/
.bg_14a5a2 {
	background-color: #14a5a2;
}

.sec03_wrap {
	display: flex;
	flex-direction: column;
	gap: 70px;
}

.sec03_inner {
	background-color: #FFF;
	border-radius: 30px;
	&.sec03_bg_style {
		.sec03_bg_title {
			background-color: #cbaf3a;
		}
		.sec03_num {
			background-color: #cbaf3a;
		}
	}
}

.sec03_bg_title {
	background-color: #43b4b0;
	color: #FFF;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px 30px 0 0;
	padding: 0 15px;
}

.sec03_padding {
	padding: 60px;
}

.sec03_flex {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
}

.sec03_left {
	width: 75%;
	max-width: 780px;
}
.text_20 {
	font-size: 20px;
}
.indent_list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	li {
		text-indent: -1.1em;
		padding-left: 1.1em;
		line-height: 1.3em;
	}
}
.sec03_table {
	display: flex;
	flex-direction: column;
	gap: 30px;
	li {
		display: flex;
		align-items: center;
		column-gap: 15px;
	}
}
.sec03_cell1 {
	flex-grow: 2;
	display: flex;
	align-items: center;
	column-gap: 15px;
}
.sec03_num {
	background-color: #43b4b0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 24px;
	text-box: trim-both cap alphabetic;
	padding-top: 5px;
	flex-shrink: 0;
}
.sec03_text {
	font-size: clamp(18px,1.8vw, 22px);
	font-weight: bold;
	line-height: 1.3em;
	letter-spacing: 0.1em;
}
.sec03_cell2 {
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
	font-size: clamp(22px,3.5vw, 42px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.3em;
	letter-spacing: 0.1em;
	.small {
		font-size: clamp(17px,1.7vw, 22px);
		position: relative;
		top: -3px;
	}
}

.sec03_right {
	width: 25%;
	max-width: max-content;
	text-align: right;
	img {
		max-width: 100%;
		height: auto;
	}
}

.sec03_price_bg {
	background-color: #FFF;
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 30px;
	padding: 30px;
}
.sec03_p_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 580px;
	margin: 0 auto;
}
.sec03_p_cell1 {
	color: #14a5a2;
	font-size: clamp(20px,2.5vw, 30px);
	font-weight: bold;
	width: 220px;
	border-right: 3px solid #14a5a2;
	letter-spacing: 0.1em;
	padding-left: 40px;
}
.sec03_p_cell2 {
	font-size: clamp(18px,1.8vw, 22px);
	font-weight: bold;
	font-size: clamp(28px,3.5vw, 42px);
	letter-spacing: 0.1em;
	.font_acumin {
		color: #14a5a2;
		font-style: italic;
	}
	.small {
        font-size: clamp(18px,1.6vw, 22px);
	}
}

/*******************************/
.bg_f6fafa {
	background-color: #f6fafa;
}
.sec04_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 45px;
}

.sec04_inner {
	border-radius: 20px;
	position: relative;
	padding: 30px 25px;
	.img100 {
		padding: 0 20px;
	}
	&:before {
		content: "";
		background-color: #FFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20px;
		z-index: 100;
	}
	&:after {
		content: "";
		background-color: #deeeee;
		position: absolute;
		top: 23px;
		left: 8px;
		width: 100%;
		height: 100%;
		border-radius: 20px;
	}
}
.sec04_num {
	background: url("../images/voice_num.webp") 50% 0/100% 100% no-repeat;
	width: 80px;
	height: 80px;
	position: absolute;
	top: -30px;
	left: 3px;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(32px,3.5vw, 42px);
	z-index: 550;
	padding-top: 6px;
}
.sec04_title {
	font-weight: bold;
	margin: 40px 0 10px;
	font-size: 16px;
}
.sec04_text {
	font-size: 16px;
	line-height: 1.8em;
}
/************************/
.sec05_flex {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}
.sec05_left {
	white-space: nowrap;
	flex-shrink: 0;
}
.sec05_shape_title {
	font-size: 18px;
	display: flex;
	align-items: flex-end;
	gap: 15px;
	line-height: 1.3em;
	&:before,&:after {
		content: "";
		border-left: 1px solid #FFF;
		height: 22px;
	}
	&:before {
		transform: rotate(-40deg);
	}
	&:after {
		transform: rotate(40deg);
	}
}
.title_36 {
	font-weight: bold;
	font-size: clamp(24px,3.1vw, 36px);
}
.sec05_right {
	max-width: 570px;
	flex-grow: 2;
}
/************************/
.sec06_bg {
	background: url("../images/lp17.webp") 50% 0/cover no-repeat;
}

.sec06_flow {
	display: flex;
	flex-direction: column;
	gap: 30px;
	position: relative;
	&:after {
		content: "";
		background-color: #d6e7e6;
		width: 113px;
		height: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}
}
.sec06_inner {
	border: 6px solid #a2cbc9;
	background-color: #e6f7f6;
	border-radius: 30px;
	padding: 40px 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	position: relative;
	z-index: 500;
	p {
		line-height: 1.5em;
	}
}
.sec06_cell1 {
	background-color: #43b4b0;
	border-radius: 50px;
	color: #FFF;
	font-size: clamp(20px,2.5vw, 28px);
	width: 160px;
	flex-shrink: 0;
	text-align: center;
	padding-top: 5px;
}
.sec06_cell2 {
	flex-grow: 2;
	max-width: 730px;
	color: #14a5a2;
	font-size: clamp(18px,1.7vw, 22px);
}

.more_btn.center {
	margin-left: auto;
	margin-right: auto;
}

/************************/

.footer {
	color: #FFF;
	padding: 150px 0;
	a {
		color: #FFF;
	}
	p {
		letter-spacing: 0.1em;
	}
}

.f_flex {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}
.f_left {
	width: max-content;
}
.f_add {
	margin-top: 40px;
}
.f_right {
	flex-grow: 2;
	max-width: 540px;
}
.f_nav {
	ul {
		display: flex;
		justify-content: space-between;
		gap: 20px 60px;
	}
}
.copyright {
	text-align: right;
	font-size: 16px;
}





/* PC用
------------------------------------------------------------*/

@media only screen and (max-width: 1400px) {

}

@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1024px) {
   
/************************/

	.h_right {
		max-width: 265px;
		margin-right: 80px;
	}

	.h_nav {
		display: none;
	}
	

/****************************/
	.sec01_flex {
		flex-wrap: wrap;
	}
	.sec01_left {
		width: 100%;
		max-width: 600px;
		padding-top: 0;
		margin-left: auto;
		margin-right: auto;
	}
	.sec01_grid {
		column-gap: 20px;
	}
	.sec01_right {
		width: 100%;
		max-width: 100%;
	}
	
/********/

	.sec02_inner_flex {
		flex-wrap: wrap;
		gap: 30px;
	}
	.sec02_inner_left {
		width: 100%;
		flex-shrink: 0;
		h3 {
			line-height: 1.9em;
			white-space: nowrap;
		}
	}

/**/
	.sec02_inner_grid {
		column-gap: 20px;
	}

	.check_list {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 15px;
	}
/************************/
	.sec05_flex {
		flex-wrap: wrap;
		gap: 30px;
	}
	.sec05_left {
		white-space: inherit;
	}
	.sec05_right {
		width: 100%;
		max-width: 100%;
	}

/************************/

	.footer {
		padding: 80px 0;
	}

	.f_flex {
		flex-wrap: wrap;
		gap: 30px;
	}
	.f_left {
		width: 100%;
	}
	.f_right {
		width: 100%;
		max-width: 500px;
	}
	.f_nav {
		ul {
			gap: 20px 20px;
		}
	}
	.copyright {
		text-align: left;
		font-size: 13px;
		margin-top: 40px;
	}


}

@media only screen and (max-width: 768px) {
@for $i from 30 through 70 {
    .flex_#{$i} { width: 100%; }
}
/************************/

	.header {
		padding: 15px 20px;
	}

	#logo {
		flex-shrink: 0;
	}

	.h_right {
		max-width: 350px;
		margin-right: 0;
		width: 100%;
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.h_nav {
		display: none;
	}

	.h_contact {
		width: 100%;
		height: 60px;
		&:after {
			top: 5px;
		}
	}
  

/****************************/

	.fv_h850 {
		height: 650px;
		padding-top: 0;
	}
	.fv_title {
		font-size: 26px;
		gap: 20px;
	}
	.fv_bg_title {
		padding: 12px 5px 12px 20px;
		border-radius: 10px;
	}
	.fv_text {
		margin-top: 20px;
		line-height: 2em;
		white-space: nowrap;
	}

	.fv_under {
		padding: 30px 20px;
		.more_btn {
			max-width: 340px;
		}
	}
	.more_btn {
		width: 100%;
		max-width: 580px;
		position: relative;
		height: 80px;
		a {
			font-size: 20px;
			&:hover {
				transform: translateY(5px);
			}
		}
		&:after {
			top: 5px;
		}
	}

	.fv_absolute {
		bottom: 14%;
	}
	.fv_left {
		width: 35%;
	}
	.fv_right {
		text-align: right;
		width: 30%;
	}
/****************************/

	.sec01_flex {
		gap: 30px;
	}
	.sec01_grid {
		column-gap: 10px;
	}
	.sec01_title {
		font-size: 28px;
	}
	.line_height22 {
		line-height: 2em;
	}
	.line_height20 {
		line-height: 2em;
	}

	
/********/

	.sec02_list_wrap {
		gap: 40px;
	}

	.sec02_inner {
		border-radius: 10px;
	}
	.sec02_bg_title {
		border-radius: 10px;
		padding: 10px 10px 10px 70px;
		font-size: 22px;
		min-height: 80px;
	}
	.sec02_num {
		font-size: 80px;
		left: 10px;
	}

	.sec02_padding {
		padding: 30px 0;
	}
	.sec02_inner_flex {
		flex-wrap: wrap;
		gap: 20px;
	}
/**/
	.scroll_p {
		width: max-content;
		margin-left: auto;
		margin-right: auto;
		border-bottom: 1px solid #333333;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.sec02_scroll {
		overflow-x: scroll;
		width: calc(100% + 40px);
		margin-left: -20px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
	}
	.sec02_inner_grid {
		width: 740px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20px;
		row-gap: 40px;
		p {
			font-size: 17px;
		}
	}
	.check_list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		row-gap: 10px;
		li {
			padding: 20px 15px 20px 15px;
			border-radius: 10px;
		}
		.check_icon {
			width: 35px;
		}
	}
/****************************/
	.sec03_wrap {
		gap: 20px;
	}

	.sec03_inner {
		border-radius: 15px;
	}

	.sec03_bg_title {
		padding: 20px 20px;
		height: auto;
		border-radius: 15px 15px 0 0;
		&.title_32 {
			font-size: 22px;
		}
	}

	.sec03_padding {
		padding: 30px;
	}

	.sec03_flex {
		flex-wrap: wrap;
		position: relative;
	}

	.sec03_left {
		width: 100%;
		max-width: 100%;
	}
	.text_20 {
		font-size: 20px;
	}
	.sec03_table {
		gap: 20px;
		li {
			column-gap: 10px;
		}
	}
	.sec03_cell1 {
		flex-grow: 2;
		display: flex;
		align-items: center;
		column-gap: 15px;
	}
	.sec03_num {
		width: 35px;
		height: 35px;
		font-size: 21px;
		padding-top: 5px;
	}
	.sec03_text {
		font-size: 17px;
		font-weight: bold;
		line-height: 1.3em;
		letter-spacing: 0.1em;
	}

	.sec03_right {
		position: absolute;
		right: -20px;
		top: -130px;
	}

	.sec03_price_bg {
		border-radius: 18px;
		padding: 10px;
	}
	.sec03_p_flex {
		justify-content: center;
	}
	.sec03_p_cell1 {
		width: 100px;
		padding-left: 0;
	}
	.sec03_p_cell2 {
		font-size: 32px;
		letter-spacing: 0.1em;
		padding-left: 30px;
		.font_acumin {
			margin-right: 5px;
		}
	}


/*******************************/
	.sec04_grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 45px;
		width: 740px;
		padding-top: 30px;
		padding-bottom: 10px;
	}

	.sec04_inner {
		border-radius: 20px;
		position: relative;
		padding: 20px 20px 30px;
		.img100 {
			padding: 0 10px;
		}
	}
	.sec04_title {
		margin: 20px 0 10px;
		font-size: 16px;
	}
	.sec04_text {
		font-size: 16px;
		line-height: 1.8em;
	}


/*******************************/
	.sec05_flex {
		gap: 20px;
	}
	
/************************/
	.sec06_flow {
		&:after {
			width: 60px;
		}
	}
	.sec06_inner {
		border-radius: 15px;
		padding: 20px 20px;
		gap: 15px;
		p {
			line-height: 1.5em;
		}
	}
	.sec06_cell1 {
		width: 120px;
	}
	

/************************/

	.footer {
		padding: 60px 0 100px;
	}
	.f_logo img {
		width: 200px;
		height: auto;
	}

	.f_flex {
		gap: 20px;
	}
	.f_add {
		margin-top: 20px;
	}
	.f_nav {
		ul {
			display: flex;
			justify-content: space-between;
			gap: 20px 0;
		}
	}
	.copyright {
		margin-top: 30px;
	}

	
}