@charset "utf-8";
/* CSS Document */

.page_ttl_wrap {
	background: #FCFFD2;
}

.page_ttl_img {
	max-width: 900px;
	width: 90%;
	height: auto;
	display: flex;
	justify-content: center;
}

.page_ttl_img img {
	width: auto;
}

section {
	padding-bottom: 4vw;
}

main {
	background: url("../images/common/back_dots.png");
	background-size: 200px 200px;
	z-index: -1;
}

.flex_box {
	justify-content: space-between;
}

.top_ttl {
	color: #07601E;
}

.settle_series {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	margin-top: 50px;
}

.settle_series li {
	width: calc(96%/4);
}

.sec_ttl {
	font-size: clamp(20px,4vw,40px);
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #07601E;
	line-height: 130%;
}

.sec_ttl::before,
.sec_ttl::after {
	content: '';
	background-repeat: no-repeat !important;
	background-size: contain !important;
	display: inline-block;
	width: 32px;
	height: 49px;
	position: relative;
}

.sec_ttl::before {
	background: url("../images/settle/ttl_left.svg");
	left: -10px;
}

.sec_ttl::after {
	background: url("../images/settle/ttl_right.svg");
	right: -10px;
}

section.production::after {
	content: '';
    position: absolute;
    display: inline-block;
    top: 100%;
    left: 50%;
	transform: translateX(-50%);
    z-index: 1;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: url(../images/common/back_dots.png);
    background-position: center top;
    background-size: 200px 200px;
    width: 24vw;
    height: 8vw;
}


.production article {
	padding-bottom: 5vw;
} 

.production article:nth-of-type(odd) .sec_ttl_icon::after {
	background: #FCFFD2;
}

.production article:nth-of-type(even) .sec_ttl_icon::after {
	background: url("../images/common/back_dots.png");
	background-size: 200px 200px;
	background-attachment: fixed;
}

.production article:nth-of-type(odd) .article_inner {
	max-width: 1000px;
	width: 80%;
	margin: 30px auto 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 30px;
}

.production article:nth-of-type(odd)::after {
	content: '';
    background: #FCFFD2;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 60px;
    bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
    position: absolute;
    z-index: -1;
}

.article_inner > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

.article_txt {
	font-size: clamp(15px,1.8vw,18px);
	line-height: 200%;
	padding: 50px 30px;
	text-align: center;
	letter-spacing: 0px;
}

.article_main_img {
	margin-bottom: 20px;
}

article.meal .article_inner > div {
	width: 47%;
}

article.meal .article_inner .article_txt {
	text-align: justify;
	padding: 0px 0px 50px;
}

article.fee .article_inner {
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
}

article.fee .article_inner > div:nth-of-type(1) {
	max-width: 700px;
	width: 100%;
}

article.fee .article_inner > div:nth-of-type(2) {
	max-width: 350px;
	width: 100%;
	margin: 0px auto;
}

article.fee .article_inner > div:nth-of-type(2) img {
	width: 100%;
	object-fit: contain;
}

.fee_ttl {
	font-size: clamp(16px,2vw,20px);
	font-weight: bold;
	text-align: left;
	width: 100%;
}

.fee_table {
	background: #CCC;
	border: 2px solid #CCC;
	border-radius: 20px;
	border-collapse: collapse;
	overflow: hidden;
	border-spacing: 0px;
	margin: 10px 0px;
}

.fee_table tr > * {
	padding: 10px;
	border: 2px solid #CCC;
}

.fee_table tr:not(:first-of-type) > th {
	background: #666;
	color: #FFF;
	font-weight: normal;
}

.facility_name {
	color: #FFF;
}

.facility_name .ito {
	background: #8EC31F;
}

.facility_name .ex_D {
	background: #9D75CC;
}

.facility_name .ex_U {
	background: #E37A1D;
}

.fee_table tr > td {
	text-align: center;
}

.fee_table tr:nth-of-type(n+2) > td {
	background: #FFF;
}

.fee_table tr:nth-of-type(n+2) > td.ito {
	color: #8EC31F;
	background: #FCFFD2;
}

.fee_caution {
	display: grid;
	gap: 10px;
}

.fee_caution li {
	font-size: 12px;
	text-indent: -33px;
	margin-left: 30px;
	text-align: justify;
	line-height: 130%;
}

.room_ex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 2rem 1vw;
}

.room_ex > dt {
	width: 50%;
}

.room_ex > dd {
	width: 46%;
}

.room_caution {
	text-indent: -1em;
	margin-left: 1em;
	font-size: 12px;
	line-height: 130%;
}

.sub_img {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}

.sub_img li {
	width: 100%;
}

.sub_img li img {
	border-radius: 10px;
}

.setsubi-slide .slick-track {
}

.setsubi-slide li {
	margin: 0px 15px;
}

.setsubi-slide .prev-arrow {
	left: 20vw;
}

.setsubi-slide .next-arrow {
	right: 20vw;
}

.box_wrap li {
	border: 1px solid #242A39;
	background: #FFF;
	border-radius: 20px;
	padding: 20px;
	height: auto;
}

.box_wrap li > *:nth-of-type(n+2) {
	margin-top: 10px;
}

.box_name {
	color: #07601E;
	font-size: clamp(16px,1.6vw,20px);
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: bold;
	text-align: center;
	line-height: 120%;
}

.box_txt {
	text-align: justify;
	line-height: 160%;
	font-size: 13px;
}

.box_caution {
	font-size: clamp(14px,1.8vw,18px);
	font-weight: bold;
	color: #B7002C;
	text-align: center;
	margin-top: 10px;
}

.safe_box {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}

.safe_box li {
	width: 100%;
	padding: 0px 0px 10px;
	overflow: hidden;
}

.safe_box li > *:nth-of-type(n+2) {
	margin-top: 0px;
}

section.series {
	background: #FCFFD2;
	padding-top: 160px;
}

section.series .sec_txt {
	padding-top: 40px;
}

.settle_list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 40px;
	max-width: 1100px;
	width: 100%;
	margin: 0px auto;
}

.settle_list li {
	width: 100%;
	background: #FFF;
	border: 1px solid #242A39;
	border-radius: 20px;
	padding: 30px;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.settle_list li > *:nth-of-type(n+2):not(:last-of-type) {
	margin-top: 20px;
}

.settle_name {
	text-align: center;
	font-size: clamp(20px,3vw,30px);
	font-weight: bold;
	line-height: 1;
}

.settle_midashi {
	text-align: center;
	font-size: clamp(20px,2.2vw,22px);
	font-weight: bold;
	line-height: 130%;
}

.settle_txt {
	text-align: justify;
	font-size: clamp(14px,1.6vw,16px);
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 160%;
	color: #000 !important;
	flex-grow: 1;
}

.settle_btn {
	margin: 30px auto;
	color: #FFF !important;
	text-align: center;
	font-size: clamp(16px,2vw,20px);
	border-radius: 30px;
	width: 100%;
	line-height: 120%;
}

.settle_btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 30px;
}

.settle_btn a::after {
	content: '';
	background: url("../images/common/arrow_white_right.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 9px;
	height: 18px;
	right: 20px;
	position: absolute;
}

.ito > * {
	color: #8EC31F;
}

.ito .settle_btn {
	background: #8EC31F;
}

.international > * {
	color: #233688;
}

.international .settle_btn {
	background: #233688;
}

.kyudai1 > * {
	color: #604524;
}

.kyudai1 .settle_btn {
	background: #604524;
}

.kyudai2 > * {
	color: #385D38;
}

.kyudai2 .settle_btn {
	background: #385D38;
}



@media screen and (max-width: 980px) {
	.production article:nth-of-type(odd)::after {
		border-radius: 30px;
	}
	
	.settle_series li {
		width: calc(96%/2);
	}
	
	.safe_box {
		grid-template-columns: repeat(2,1fr);
	}
}


@media screen and (max-width: 768px) {	
	article.meal .article_inner > div {
		width: 100%;
	}

	.room_ex > dt {
		width: 100%;
	}

	.room_ex > dd {
		width: 90%;
		margin: 0px auto;
	}
	
	section.series {
		padding-top: 70px;
	}
	
	section.series .sec_txt {
		padding-top: 10px;
	}
	
	.settle_logo {
		width: 40%;
	}
	
	.settle_list {
		grid-template-columns: repeat(1,1fr);
	}
}


@media screen and (max-width: 600px) {
	.sec_ttl::before, .sec_ttl::after {
		width: 12px;
		height: 17px;
	}
	
	.sec_ttl_inner {
		margin-top: 30px;
	}

	.production article {
		margin-top: 5vw;
	} 

	.article_txt {
		padding: 30px 15px;
	}
	
	.sub_img {
	    grid-template-columns: repeat(2, 1fr);
	}
}