@charset "UTF-8";

/* --------------------
打消し
-------------------- */

.mod_header .titwrap .subleftlinks,
.mod_spNav_btn,
.sp_footfix,
.fix_bnr-line,
.tmp_topicpath,
.mod_footer .content .mod_wrap01 .nav,
.mod_footer .content .mod_wrap01 .sns_box,
.mod_footer .contact {
	display: none;
}

.mod_footer .content {
	padding-bottom: 1px;
}

.mod_toTop {
	bottom: 78px;
}

#footerContact {
	display: none;
}
#FooterArea {
	display: none;
}

@media screen and (min-width: 641px) {
	body:before,
	.mod_footer,
	.mod_header .nav_wrap,
	.mod_header:before {
		display: none;
	}
	body {
		padding-top: 0;
		min-width: auto;
		overflow-x: hidden;
	}
	.mod_header {
		height: auto;
	}
	.mod_header .tit {
		width: 100%;
		height: 50px;
		padding: 0;
		text-align: left;
		background-color: #141405;
		transition: transform 1s;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 50rem;
		left: auto;
		right: calc((100vw - 1280px) / 2);
		right: calc(((100% - 1280px) / 2));
	}
	.mod_header .tit a {
		padding: 12px 0 12px 16px;
		box-sizing: border-box;
		left: 0;
		top: 0;
		position: relative;
		display: block;
		pointer-events: none
	}
	.mod_header .tit a img {
		width: 230px;
		height: auto;
	}
	.mod_header {
		transform: none !important;
		position: absolute !important;
	}
}
@media screen and (max-width: 1280px) and (min-width: 641px)  {
	.mod_header .tit {
		right: 0;
	}
}
@media screen and (max-width: 640px) {
	#FooterArea {
		display: block;
	}
}

/* --------------------
.wrapper
-------------------- */

@media screen and (min-width: 641px) {
	.wrapper {
		position: relative;
		width: 50rem;
	}
	.wrapper_in {
		width: 50rem;
		/*
		height: calc(100vh - 5rem - 90px);
		overflow-y: scroll;
		*/
		margin-top: 5rem;
		margin-bottom: 90px;
	}
}

/* --------------------
.sec_fixed
-------------------- */

.sec_fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100;
}

.sec_fixed img {
	vertical-align: bottom;
	width: 100%;
}

@media screen and (min-width: 641px) {
	.sec_fixed {
		position: absolute;
		position: fixed;
		left: auto;
		right: calc(((100% - 1280px) / 2));
		bottom: 0;
		width: 50rem;
	}
	.mod_toTop {
		right: calc(((100% - 1280px) / 2) + 10px);
		bottom: 100px;
	}
}
@media screen and (max-width: 1280px) and (min-width: 641px)  {
	.sec_fixed {
		right: 0;
	}
	.mod_toTop {
		right: 9px;
	}
}

/* --------------------
.sec_mv
-------------------- */
.sec_mv {
	background-image: url(../img/sec_mv_sp.jpg);
	background-size: cover;
	width: 100%;
}

@media screen and (min-width: 641px) {
	.sec_mv {
		height: calc(50rem * 0.983);
	}
}

@media screen and (max-width: 640px) {
	.sec_mv {
		height: 44rem;
	}
}

.sec_mv .tit {
	font-size: 1.8rem;
}

/* --------------------
.sec_chach
-------------------- */
.sec_chach {
	background-color: #7EAC7B;
	padding-bottom: 2.1rem;
	padding-top: 2rem;
}

.sec_chach .txt {
	font-size: 2.1rem;
	line-height: calc(67/42);
	text-align: center;
	font-weight: 500;
	color: #FFF;
}

@media screen and (min-width: 641px) {
	.sec_chach .txt {
		font-size: calc(2.1rem * 1.389);
	}
}


.sec_chach .txt .line {
	border-bottom: 2px dashed #FFF;
	display: inline;
}

.sec_chach .ph img {
	vertical-align: bottom;
	width: 100%;
}

.sec_chach .line {
	width: 3.4rem;
	margin: 0 auto;
}

@media screen and (min-width: 641px) {
	.sec_chach .line {
		width: calc(3.4rem * 1.389);
	}
}

.sec_chach .line img {
	vertical-align: bottom;
}

.sec_chach .voice {
	margin-top: 2rem;
}

@media screen and (min-width: 641px) {
	.sec_chach .ph {
		padding: 0 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_chach .ph {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

/* --------------------
.sec_best4
-------------------- */
.sec_best4 {
	background-image: url(../img/sec_best4_bg.jpg);
	background-repeat: repeat-y;
	background-size: cover;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}

@media screen and (min-width: 641px) {
	.sec_best4 {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_best4 {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

.sec_best4 .tit_wrap .tit {
	font-size: 1.9rem;
	font-weight: 400;
}

.sec_best4 .tit_wrap .tit > .point {
	font-size: 2.1rem;
	font-weight: 500;
}

@media screen and (min-width: 641px) {
	.sec_best4 .tit_wrap .tit {
		font-size: calc(1.9rem * 1.389);
	}
	.sec_best4 .tit_wrap .tit > .point {
		font-size: calc(2.1rem * 1.389);
	}
}

.tit_wrap.hexagon {
	width: 100%;
	height: calc(100vw * (90 / 720));
	background-image: url(../img/hexagon_bg.svg);
	background-repeat: no-repeat;
	display: flex;
    justify-content: center;
    align-items: center;
	background-position: center center;
}

@media screen and (min-width: 641px) {
	.tit_wrap.hexagon {
		height: calc(4.5rem * 1.389);
	}
}

@media screen and (max-width: 640px) {
	.tit_wrap.hexagon {
		height: calc(100vw * (90 / 720));
	}
}

.sec_best4 .list_ul {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.8rem;
}

.sec_best4 .list_ul li {
	font-size: 1.5rem;
	font-weight: 500;
	background-color: #fff;
	width: 50%;
	width: calc(50% - (100vw * (17 / 720)));
	position: relative;
	padding-top: calc(100vw * (25.5 / 720));
	padding-bottom: calc(100vw * (25.5 / 720));
	border-radius: 1rem;
	padding-left: calc(100vw * (100 / 720));
	box-sizing: border-box;
}
@media screen and (min-width: 641px) {
	.sec_best4 .list_ul li {
		font-size: calc(1.5rem * 1.389);
	}
}

.sec_best4 .list_ul li:nth-child(even) {
	margin-left: calc(100vw * (17 / 720));
}

.sec_best4 .list_ul li:nth-child(odd) {
	margin-right: calc(100vw * (17 / 720));
}

@media screen and (min-width: 641px) {
	.sec_best4 .list_ul li {
		width: calc(50% - .9rem);
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		padding-left: 5rem;
	}
	
	.sec_best4 .list_ul li:nth-child(even) {
		margin-left: .9rem;
	}
	
	.sec_best4 .list_ul li:nth-child(odd) {
		margin-right: .9rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_best4 .list_ul li {
		width: calc(50% - (100vw * (17 / 720)));
		padding-top: calc(100vw * (25.5 / 720));
		padding-bottom: calc(100vw * (25.5 / 720));
		padding-left: calc(100vw * (100 / 720));
	}
	
	.sec_best4 .list_ul li:nth-child(even) {
		margin-left: calc(100vw * (17 / 720));
	}
	
	.sec_best4 .list_ul li:nth-child(odd) {
		margin-right: calc(100vw * (17 / 720));
	}
}

.sec_best4 .list_ul li:before {
	content: "";
	position: absolute;
	left: 1.3rem;
	top: 0;
	bottom: 0;
	width: 2.5rem;
	height: 2rem;
	margin: auto;
}

.sec_best4 .list_ul li:nth-child(1):before {
	background-image: url(../img/sec_best4_num01.svg);
}

.sec_best4 .list_ul li:nth-child(2):before {
	background-image: url(../img/sec_best4_num02.svg);
}

.sec_best4 .list_ul li:nth-child(3):before {
	background-image: url(../img/sec_best4_num03.svg);
}

.sec_best4 .list_ul li:nth-child(4):before {
	background-image: url(../img/sec_best4_num04.svg);
}

.sec_best4 .list_ul li:nth-child(n+3) {
	margin-top: 0.8rem;
}

.sec_best4 .ph img {
	vertical-align: bottom;
	width: 100%;
}

.sec_best4 .bana {
	margin-top: 3.1rem;
}

/* --------------------
.sec_best4
-------------------- */

.sec_detail {
	background-color: #F7F7F3;
	padding-top: 3rem;
}

.sec_detail .detail {
	padding-bottom: 5rem;
	padding-top: 3rem;
	position: relative;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_detail .detail {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

.sec_detail .detail:nth-child(even) {
	background-color: #F2F1EA;
}

.sec_detail .detail:nth-child(odd) {
}

.sec_detail .detail .icon01 {
	width: 2.3rem;
	margin: 0 auto;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail .icon01 {
		width: calc(2.3rem * 1.389);
	}
}

.sec_detail .detail .icon02 {
	width: 6rem;
	margin: 0 auto;
	margin-top: 3rem;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail .icon02 {
		width: calc(6rem * 1.389);
	}
}

.sec_detail .detail .phone {
	margin-top: 3rem;
}

.sec_detail .detail .ph img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

.sec_detail .detail .tit {
	font-size: 1.8rem;
	font-weight: 500;
	padding: 0 2rem;
	margin-top: 1rem;
	line-height: 1;
	text-align: center;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail .tit {
		font-size: calc(1.8rem * 1.389);
	}
}

.sec_detail .detail .best4_link {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail .best4_link {
		top: -80px;
	}
}
.sec_detail .detail .tit .line {
	position: relative;
	display: inline-block;
	z-index: 10;
}

.sec_detail .detail .tit .line:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-color: #D2E2D1;
	z-index: -1;
}

.sec_detail .detail .tit .point {
	font-size: 2.3rem;
	letter-spacing: .06em;
}

.sec_detail .detail .txt {
	font-size: 1.3rem;
	line-height: calc(54/26);
	padding: 0 2rem;
	margin-top: 1.3rem;
}

.sec_detail .detail .txt02 {
	font-size: 1.4rem;
	font-weight: 500;
	margin-top: 2.6rem;
	text-align: center;
}

@media screen and (min-width: 641px) {
	.sec_detail .detail .txt {
		font-size: calc(1.3rem * 1.389);
	}
	.sec_detail .detail .txt02 {
		font-size: calc(1.4rem * 1.389);
	}
}

.sec_detail .detail .btn {
	margin-top: 1rem;
}

.sec_detail .detail .btn img {
	vertical-align: bottom;
	width: 100%;
}


/* --------------------
.sec_others
-------------------- */

.sec_others {
	position: relative;
	padding-top: 5.5rem;
	padding-bottom: 10rem;
	background-color: #fff;
}

@media screen and (min-width: 641px) {
	.sec_others {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_others {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

.sec_others:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -3rem;
	width: 1px;
	height: 6rem;
	margin: auto;
	background-color: #7EAC7B;
}


.sec_others .txt {
	font-size: 2rem;
	font-weight: 400;
	line-height: calc(68/40);
	letter-spacing: .03em;
	text-align: center;
}

@media screen and (min-width: 641px) {
	.sec_others .txt {
		font-size: calc(2rem * 1.389);
	}
}

.sec_others .list_ul {
	background-color: #F2F1EA;
	border-radius: 1rem;
	margin-top: 4rem;
}

.sec_others .list_ul li {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
	padding: 2.4rem 0;
	position: relative;
}

@media screen and (min-width: 641px) {
	.sec_others .list_ul li {
		font-size: calc(1.5rem * 1.389);
	}
}

.sec_others .list_ul li + li:before {
	content: "";
	width: calc(100% - 4rem);
	height: 3px;
	position: absolute;
	background-color: #FFFFFF;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}


/* --------------------
sec_voice
-------------------- */

.sec_voice {

}

.sec_voice .voice img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

/* --------------------
sec_use
-------------------- */

.sec_use {
	background-color: #B8D1B6;
	padding-top: 2.5rem;
	padding-bottom: 5rem;
}

@media screen and (min-width: 641px) {
	.sec_use {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_use {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

.sec_use .tit {
	width: 22rem;
	margin: 0 auto;
}

.sec_use .ph img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

.sec_use .photo {
	border: 3px solid #FFF;
	padding: .4rem;
	margin-top: 3rem;
}

.sec_use .tit02 {
	width: 25rem;
	margin: 2.5rem auto 0;
}

@media screen and (min-width: 641px) {
	.sec_use .tit02 {
		width: calc(25rem * 1.389);
	}
}

.sec_use .txt {
	font-size: 1.3rem;
	line-height: calc(54/26);
	text-align: center;
	margin-top: 1.8rem;
}

@media screen and (min-width: 641px) {
	.sec_use .txt {
		font-size: calc(1.3rem * 1.389);
	}
}

.sec_use .btn {
	margin-top: 2.6rem;
}

.sec_use .btn img {
	vertical-align: bottom;
	width: 100%;
}

/* --------------------
sec_campaign
-------------------- */

.sec_campaign {
	background-color: #F3F2EB;
	padding-top: 6rem;
	padding-bottom: 4.3rem;
}

.sec_campaign .in {
	background-color: #FFF;
	border-radius: 1rem;
	padding-bottom: 1.5rem;
}

@media screen and (min-width: 641px) {
	.sec_campaign {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_campaign {
		padding-left: calc(100vw * (40 / 720));
		padding-right: calc(100vw * (40 / 720));
	}
}

.sec_campaign .tit {
	width: 15.4rem;
	margin: 0 auto;
	position: relative;
	top: -1rem;
}

@media screen and (min-width: 641px) {
	.sec_campaign .tit {
		width: calc(15.4rem * 1.389);
	}
}

.sec_campaign .tit img {
	vertical-align: bottom;
}

.sec_campaign .txt {
	font-size: 2rem;
	line-height: calc(68/40);
	letter-spacing: .03em;
	text-align: center;
	margin-top: 2rem;
}

.sec_campaign .txt02 {
	font-size: 1.3rem;
	line-height: calc(54/26);
	margin-top: 1.7rem;
}

@media screen and (min-width: 641px) {
	.sec_campaign .txt {
		font-size: calc(2rem * 1.389);
	}
	.sec_campaign .txt02 {
		font-size: calc(1.3rem * 1.389);
	}
}

@media screen and (min-width: 641px) {
	.sec_campaign .txt02 {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_campaign .txt02 {
		padding-left: calc(100vw * (36 / 720));
		padding-right: calc(100vw * (36 / 720));
	}
}

.sec_campaign .txt02 .point {
	font-weight: 500;
	color: #7EAC7B;
}

.sec_campaign .price {
	width: 30.3rem;
	margin: 0 auto;
	margin-top: 1rem;
}

.sec_campaign .price img {
	vertical-align: bottom;
}

/* --------------------
sec_contact
-------------------- */

.sec_contact {
	background-color: #fff;
}

.sec_contact .line_box {
	background-color: #7EAC7B;
	padding-bottom: 5rem;
	padding-top: 3.5rem;
}

@media screen and (min-width: 641px) {
	.sec_contact .line_box {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_contact .line_box {
		padding-left: calc(100vw * (36 / 720));
		padding-right: calc(100vw * (36 / 720));
	}
}

.sec_contact .line_box .txt {
	color: #FFF;
	text-align: center;
	font-weight: 500;
	font-size: 1.4rem;
}

@media screen and (min-width: 641px) {
	.sec_contact .line_box .txt {
		font-size: calc(1.4rem * 1.389);
	}
}

.sec_contact .line_box .btn {
	margin-top: 1.8rem;
}

.sec_contact .line_box .btn img {
	vertical-align: bottom;
	width: 100%;
}




.sec_contact .tel_box {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

@media screen and (min-width: 641px) {
	.sec_contact .tel_box {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.sec_contact .tel_box {
		padding-left: calc(100vw * (36 / 720));
		padding-right: calc(100vw * (36 / 720));
	}
}

.sec_contact .tel_box .txt {
	text-align: center;
	font-size: 1.6rem;
}

@media screen and (min-width: 641px) {
	.sec_contact .tel_box .txt {
		font-size: calc(1.6rem * 1.389);
	}
}

.sec_contact .tel_box .btn {
	margin-top: 1.8rem;
}

.sec_contact .tel_box .btn img {
	vertical-align: bottom;
	width: 100%;
}

.sec_contact .tel_box .txt02 {
	text-align: center;
	font-size: 1.3rem;
	line-height: calc(54/26);
	margin-top: 1.3rem;
}

@media screen and (min-width: 641px) {
	.sec_contact .tel_box .txt02 {
		font-size: calc(1.3rem * 1.389);
	}
}

/* --------------------
PC版
-------------------- */
@media screen and (min-width: 641px) {

	.mod_main {
		position: relative;
	}
	.mod_main:before {
		content: "";
		background-image: url(../img/bg_pc.jpg);
		background-position: center center;
		background-size: cover;
		width: 100%;
		height: calc(100vh - 280px);
		position: absolute;
		position: fixed;
		left: 0;
		top: 0;
	}
	.mod_main:after {
		content: "";
		background-image: url(../img/bg02_pc.jpg);
		background-position: center center;
		background-size: cover;
		width: 100%;
		height: 280px;
		position: absolute;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.mod_main_in {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: end;
		position: relative;
		z-index: 10;
	}

	.sec_abso {
		position: absolute;
		position: fixed;
		left: 0;
		bottom: 14px;
		width: 766px;
		width: 60%;
		max-width: 766px;
		height: 252px;
		height: calc(76.6rem * 0.329);
		z-index: 10;
		left: calc((100% - 1280px) / 2);
	}
	.sec_logo {
		position: absolute;
		position: fixed;
		left: 0;
		bottom: 300px;
		width: 650px;
		max-width: 650px;
		height: 150px;
		z-index: 10;
		left: calc((100% - 1280px) / 2);
	}
	.sec_logo img {
		width: 100%;
	}
}

@media screen and (max-width: 1280px) and (min-width: 641px)  {
	.sec_abso {
		left: 10px;
	}
	.sec_logo {
		left: 10px;
	}
}

@media screen and (max-width: 1190px) and (min-width: 641px)  {
	.sec_abso {
		width: 54%;
	}
	.sec_logo {
		width: 54%;
	}
}