@charset "UTF-8";

:root {
	--brown-red:#811919;
	--light-brown-red:#d67676;
	--ex-light-brown-red:#e6bfbf;
}

svg {
	position: absolute;
}

.body {
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
}

.wrapper {
	width: 100%;
	min-width: 1200px;
	margin: 0 auto;
	background: url(../img/main_bg01_02.jpg);
/*	background-size: 100%;*/
	overflow-x: hidden;
}

.fv {
	position: relative;
	/*padding-top: 76.25%;*/
	height: 1249px;
	background: url(../img/mv_bg02.jpg) no-repeat;
	background-position: center top;
	background-size: 2700px;
}

.fv::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding-top: 8.22%;
	background: url(../img/point_ttl_bg.png) no-repeat;
	/*z-index: 1;*/
	background-position: center top;
}

.fv_deco {
	position: absolute;
	top: 0.5%;
	width: 230px;
}

.fv_deco01 {
	left: 0.5%;
}

.fv_deco02 {
	right: 0.5%;
}

.fv_catch {
	position: absolute;
	top: 0;
	left: 50%;
	max-width: 400px;
	width: 400px;
	transform: translate(-50%,0);
}

.fv_ttl {
	position: absolute;
	top: 34.5%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 960px;
	/*width: 57.1%;*/
	z-index: 2;
	margin-left: 8px;
}

.fv_inner {
	position: absolute;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	bottom: 14%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 2;
}

.fv_icon {
	position: absolute;
	right: calc(50% - 734px);
    top: 625px;
    width: 280px;
	z-index: 2;
}

.intro {
	position: absolute;
	bottom: 33px;
	width: 100%;
	z-index: 1;
	/*padding: 20px 0 50px;*/
	margin: 0 auto; 
}

/*
.intro:after {
	position: absolute;
	top: 18%;
	right: 3%;
	content: "";
	width: 23%;
	height: 130%;
	z-index: -1;
	background: url(../img/intro_bg.png) no-repeat;
	background-position: center top;
	background-size: 100%;
}
*/

a:hover, button:hover {
    opacity: 1;
    filter: brightness(1.1);
}

.intro h2 {
	max-width: 898px;
	margin: 0 auto;
}

.point {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}


.deco-back-item-point {
	position: absolute;
			width: 100%;
			height: 100%;
/*	z-index: -1;*/
	&::before,&::after {
		position: absolute;
		content: "";
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	}
/*
	&::before {
		left: -60%;
	}
	&::after {
		right: -77%;
	}
*/
}

#content03 {
	& .deco-back-item-point {
		width: 1280px;
		height: 540px;
		left: 50%;
		transform: translateX(-50%);
		&::before,&::after {
			width: 100%;
			height: 100%;
		}
		&:before {
			top: 0;
			left: -70%;
		}
		&:after {
			right: -62.5%;
		}
		&:nth-of-type(1) {
			top: -11%;
			&::before {
				background-image: url(../img/point_bg01.png);
			}
			&::after {
				top: 115%;
				background-image: url(../img/point_bg02.png);
			}
		}
		&:nth-of-type(2) {
			top: 59%;
			&::before {
				background-image: url(../img/point_bg03.png);
			}
			&::after {
				top: 17%;
				background-image: url(../img/point_bg04.png);
			}
		}
	}
}

.point li {
	&:nth-child(2n) {
		& .deco-back-item-point {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			&::before,&::after {
				position: absolute;
				content: "";
				background-position: center top;
				background-size: contain;
				background-repeat: no-repeat;
				width: 142.36%;
				padding-top: 60.2%;
			}
			&::before {
				top: -127%;
				left: -127%;
			}
			&::after {
				bottom: -70%;
				right: -116%;
			}
		}
	}
	&:nth-child(2) {
		& .deco-back-item-point {
			&::before {
				background-image: url(../img/point_bg01.png);
			}
			&::after {
				background-image: url(../img/point_bg02.png);
			}
		}
	}
	&:nth-child(4) {
		& .deco-back-item-point {
			&::before {
				background-image: url(../img/point_bg03.png);
			}
			&::after {
				background-image: url(../img/point_bg04.png);
			}
		}
	}
}

.point_ttl {
/*	max-width: 1070px;*/
	margin: 0 auto 50px;
/*	background-image: url("../img/point_ttl_bg.png");
	background-size: contain;
	background-repeat: repeat-x;
	background-position: center top;*/
	/*height: 13.2%;*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-width: 1200px;
	padding-top: 32px;
	position: relative;
	z-index: 1;
	& img {
		max-width: 1070px;
	}
}

.point_list {
	position: relative;
	margin-bottom: 10%;
	padding: 0 13.56% 28%;
	z-index: 1;
}

.point_list li {
	position: relative;
	margin-bottom: 4%;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	background-color: rgba(255, 246, 226, .7);
	box-shadow: 0 0 21px #e3b966;
/*	z-index: 3;*/
}

.point_list li {
	& .point_inner {
		position: relative;
		z-index: 2;
		&::before,&::after {
			display: inline-block;
			content: "";
			width: 100%;
			background-size: 100%;
			vertical-align: bottom;
		}
		&::before {
			padding-top: 100px;
			background: url(../img/deco_bg_top.png) no-repeat;
			background-position: center 1px;
		}
		&::after {
			padding-top: 95px;
			background: url(../img/deco_bg_btm.png) no-repeat;
			background-position: center bottom;
		}
	}
}

.point_list li .point_icon {
	display: block;
	margin-left: auto;
	width: 22%;
	margin-right: 7%;
}

.point_cap {
	position: absolute;
	top: 50%;
	left: -98px;
	width: 160px;
	transform: translate(0,-50%);
	z-index: 3;
}

.point_subttl {
	width: 100%;
	margin-top: -6.5%;
	padding: 0 100px 8px;
	text-align: center;
}

.point_flex {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

.point_list li .point_flex p {
	padding: 0 0 0 100px;
}

.point_list li .point_inner {
	min-height: 108px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
.point_list li .point_inner:after {
	position: absolute;
	left: -24px;
	top: 50%;
	content: "";
	width: 12px;
	height: 120%;
	background-image: url(../img/point_border.png);
	background-position: center top;
	background-size: 100%;
	z-index: -1;
}
*/

/*
.point_list li:last-child .point_inner:after {
	display: none;
}
*/

.point_list li p {
	position: relative;
	margin-bottom: -5%;
	padding: 0 75px 0 100px;
	font-size: 16px;
	line-height: 1.8;
}

.point_last {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,0);
	width: 117.9%;
	max-width: 1297px;
	padding: 3% 14% 8%;
	background-image: url("../img/point_last_deco.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.content02 {
	position: relative;
	background-image: url(../img/editor_bg01.png);
	background-repeat: no-repeat;
	background-color: #ae772a;
	background-position: center top;
	background-size: cover;
	-webkit-clip-path:url(#cpath1); /*Safari, iOS Safari 用*/
	clip-path:url(#cpath1);
	&::before {
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 17.02%;
		background-image: url("../img/editor-bg-deco-top.png");
		background-size: contain;
		background-position: center top;
	}
}

.editor {
	margin-bottom: -120px;
	padding: 100px 4% 240px;
}

.editor_ttl {
	width: 28%;
	max-width: 335px;
	margin: 0 auto 50px;
}

.editer_flex {
	display: flex;align-items: center;
	max-width: 1320px;
	margin: 0 auto;
}

.editer_left {
	width: 55%;
	padding-right: 6%;
}

.editer_right {
	width: 45%;
}

.editor_img {
	margin: 0 auto 4%;
}

.editor_img span img {
	display: block;
	width: 42%;
	margin: 0 auto;
}

.editor_img figcaption {
	display: block;
	margin: 4% auto 0;
	max-width: 590px;
	text-align: center;
}

.editor_txt {
	color: #fff;
}

.editor_media_ttl {
	display: block;
	width: 35.6%;
	margin: 0 auto 4%;
}

.editor_txt p {
	    text-shadow: 0 0 8px rgb(8 20 69);
}

.editor_deco {
	display: block;
	width: 51%;
	max-width: 260px;
	margin: 6% auto;
	text-align: center;
	& img {
		width: auto;
	}
}

.editor_media_txt {
	text-align: center;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: -0.05em;
	color: #fff;
	text-shadow: 0 0 8px rgb(8 20 69);
}

.editor_media_cap {
	width: 100%;
	margin: 0 0 3% -3%;
}

.editor_media_detail {
	padding: 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
}

.content03 {
	position: relative;
	-webkit-clip-path:url(#cpath2); /*Safari, iOS Safari 用*/
	clip-path:url(#cpath2);
	background: url(../img/main_bg01_02.jpg);
	background-position: center top;
/*	background-size: 100%;*/
}

/*
.content03 {
	&::before,&::after {
		position: absolute;
		top: 28%;
		left: -7%;
		content: "";
		width: 26%;
		height: 50%;
		z-index: -1;
		background: url(../img/point_bg02.png) no-repeat;
		background-position: center top;
		background-size: 100%;
	}
}
*/

.form {
	position: relative;
	max-width: 997px;
	margin: 0 auto;
	padding: 150px 0;
}

.second .form {
	padding: 50px 0 70px;
}

.form_inner {
	position: relative;
	box-shadow: 0 0 21px #e3b966;
	background-color: rgba(255, 255, 255, .85);
	&::before,&::after {
		display: inline-block;
		content: "";
		width: 100%;
		padding-top: 182px;
		background-position: center bottom;
		background-size: 100%;
		vertical-align: bottom;
		background-repeat: no-repeat;
	}
	&::before {
		background: url(../img/deco_bg_top_form.png);
	}
	&::after {
		background: url(../img/deco_bg_btm_form.png);
	}
}

.form_complete {
	min-height: calc(100vh - 153px);
}

.form_ttl {
	position: absolute;
	top: 70px;
	left: 50%;
	width: 74%;
	transform: translate(-50%, 0);
}

.form_txt {
	padding: 140px 100px 50px;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

.form_txt.complete {
	padding: 210px 100px 0;
}

.form_txt.complete h2 {
	margin-bottom: 20px;
}

.form_txt_btm {
	padding: 40px 0 50px;
	font-size: 16px;
	line-height: 1.6;
	font-size: 16px;
	text-align: center;
}

.form_txt_btm a {
	text-decoration: underline;
}

.form_item {
	padding: 15px 0 15px 0;
	vertical-align: middle;
}

.form_item img {
	width: 200px;
	box-shadow: 0 0 5px 2px rgba(128,64,0,0.3);
}

.form_input {
	position: relative;
	width: 60%;
	padding: 15px 0 15px 0;
	vertical-align: middle;
	text-align: left;
}

.form_input i {
	font-style: normal;
}

.form_input input[type="radio"] {
	font-size: 16px;
}

.form_btn button {
	display: block;
	width: 80%;
	max-width: 443px;
	margin: 0 auto -20px;
}

.form_btn a {
	display: block;
	width: 80%;
	margin: 0 auto;
}

.form_btn small {
	display: block;
	text-align: center;
	font-size: min(3vw,20px);
}

.form_main {
	width: 100%;
	padding: 0 170px;
	& table {
		width: 100%;
	}
}

.form_main .ui-li-divider {
	padding: 4% 0 1%;
	border: 0;
	font-size: 16px;
	font-weight: 400;
}

.form_main ul[class^="sm"] {
	margin: 0;
}

.form_main ul.sm li {
	width: 50%;
	font-weight: 400;
}

.form_main ul[class^="sm"] li label {
	border-radius: 0;
	height: 42px;
	line-height: 30px;
	font-weight: 400;
	font-size: 16px;
}

.form_main ul[class^="sm"] input[type="radio"] {
	width: 100%;
	left: 0;
}

.form_main ul[class^="sm"] li label {
	background: var(--ex-light-brown-red);
	border: 1px solid var(--light-brown-red);
}

.form_main ul[class^="sm"] li label {
	border-right: 0;
}

.form_main ul[class^="sm"] li:last-child label {
	border-right: 1px solid var(--light-brown-red);
}

.form_main ul[class^="sm"] input[type="radio"]:checked + label {
	background: var(--brown-red);
	border: 1px solid var(--light-brown-red);
}

.form_main ul[class^="sm"],
.form_main .select,
.form_main .input {
	margin-bottom: 0;
	width: 100%;
}

.form_main ul.sm2 li {
	width: 25%;
}

.form_main .select {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
}

.form_main .select select {
	width: 100%;
	font-size: 16px;
	border: 1px solid #d8deec;
}

.form_main .select select[name="select-by"] {
	width: 38%;
}

.form_main .select select[name="select-bm"],
.form_main .select select[name="select-bd"] {
	width: 20%;
}

.form_main .input input[type="text"] {
	width: 100%;
	border: 1px solid var(--ex-light-brown-red);
	border-radius: 0;
	height: 42px;
	padding: 0 12px;
	font-size: 16px;
	text-align: left;
}

.form_main .input small {
	position: absolute;
	right: 0;
	display: block;
	margin-top: 6px;
	text-align: right;
	font-size: 14px;
}

.form_main .select select {
    width: 100%;
    border: 1px solid var(--ex-light-brown-red);
    background: url(../img/select_icon.png) no-repeat;
    background-size: 10px;
    background-position: calc(100% - 8px) center;
}

.form_sec {
	margin-top: 10%;
}

.form_sec > h4 {
	margin-bottom: 4%;
	padding-bottom: 4%;
	font-weight: 700;
	font-size: 16px;
	color: #000;
	border-bottom: 1px solid #ccc;
}

.form_sec p {
	padding-bottom: 2%;
	font-size: 16px;
	line-height: 1.6;
}

.form_sec p u {
	font-weight: bold;
	text-decoration: none;
}

.form_art {
	margin-top: 6%;
	padding: 4%;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.form_art > h4 {
	margin-bottom: 4%;
	font-size: 16px;
	font-weight: bold;
}

.form_art > p {
	margin-bottom: 2%;
	font-size: 16px;
}

.form_domain {
	margin-top: 6%;
}

.form_domain ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form_domain ul li {
	width: 100%;
}

.footer {
	margin: 0 auto;
	padding: 40px 4%;
	background: var(--brown-red);
	color: #fff;
	text-align: center;
}

.footer_list {
	display: flex;
	justify-content: center;
	gap: 36px;
}

.footer_item {
	position: relative;
}

.footer_item:after {
	position: absolute;
	right: -16px;
	top: 0;
	content: "";
	width: 1px;
	height: 100%;
	background: #fff;
}

.footer_item a {
	display: block;
	padding: 1px 0;
	font-size: 14px;
}

.footer_copy {
	display: block;
	padding: 40px 4% 0;
	font-size: 14px;
}

.fixed_btn {
	position: fixed;
	bottom: 1%;
	right: 2%;
	z-index: 3;
	width: 32%;
	max-width: 200px;
	opacity: 0;
	transition: opacity .5s ease;
	&.is-active {
		opacity: 1;
	}
}

.fixed_btn a {
	position: relative;
	display: block;
}

.fixed_btn a:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	background: #fff;
	background: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.1) 70%);
	background-size: 600% 100%;
	animation: shine 20s infinite;
	animation-delay: 0s;
	animation-timing-function: linear;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

@keyframes shine {
	0% {
		background-position-x: 400%;
	}
	50% {
		background-position-x: 0%;
	}
	100% {
		background-position-x: -400%;
	}
}

.txt_inner {
	position: relative;
	padding: 50px 100px 70px;
	max-width: 1100px;
	min-height: calc(100vh - 153px);
	margin: 0 auto;
}

/*.txt_inner:before {
	display: inline-block;
	content: "";
	width: 100%;
	padding-top: 110px;
	background: url(../img/deco_bg_top.png) no-repeat;
	background-position: center bottom;
	background-size: 100%;
	vertical-align: bottom;
}*/

/*.txt_inner:after {
	display: inline-block;
	content: "";
	width: 100%;
	padding-top: 95px;
	background: url(../img/deco_bg_btm.png) no-repeat;
	background-position: center top;
	background-size: 100%;
	vertical-align: bottom;
}*/

.txt_content {
	position: relative;
	padding: 0 8%;
	background-color: #fff;
	/*background-image: url(../img/deco_bg_mdl.png);
	background-position: center top;
	background-size: 100%;*/
	vertical-align: middle;
	font-size: 16px;
	line-height: 1.8;
	&::before,&::after {
		display: inline-block;
		content: "";
		width: 116%;
		margin-left: -8%;
		vertical-align: bottom;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	&::before {
		padding-top: 110px;
		background-image: url(../img/deco_bg_top.png);
		background-position: center bottom;
	}
	&::after {
		padding-top: 95px;
		background-image: url(../img/deco_bg_btm.png);
		background-position: center top;
	}
}

.txt_ttl {
	position: absolute;
	top: 16.2vw;
	left: 50%;
	width: 85%;
	transform: translate(-50%, 0);
}

@media screen and (min-width: 750px) {
  .txt_ttl {
  	top: 120px;
  }
}

.second .txt_ttl {
    position: static;
    margin: -30px auto 30px;
    width: 100%;
    text-align: center;
    transform: translate(0, 0);
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 40px;
    color: var(--brown-red);
}

.ryokin dl {
	display: flex;
	align-items: center;
	gap: 2%;
}

.ryokin .attenton {
	margin-top: 5%;
}

.form_second:before {
	display: inline-block;
	content: "";
	width: 100%;
	padding-top: 32%;
	background: url(../img/deco_bg_top.png) no-repeat;
	background-position: center bottom;
	background-size: 100%;
	vertical-align: bottom;
}

.form_second:after {
	display: inline-block;
	content: "";
	width: 100%;
	padding-top: 24%;
	background: url(../img/deco_bg_btm.png) no-repeat;
	background-position: center top;
	background-size: 100%;
	vertical-align: bottom;
}

.form_second .form_main {
	padding-top: 11%;
}

.form_second .form_last {
	padding-top: 2%;
} 

.form_index {
	margin-top: 11%;
}

.form_index p {
	margin-bottom: 5%;
	text-align: center;
}

.form_index ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form_index ul li a {
	position: relative;
	display: block;
	padding: 4% 5%;
	color: #fff;
	background: #6396b4;
	font-size: min(3.4vw,24px);
}

.form_index ul li a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 12px;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translate(-50%, -60%);
}

#s_txt h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	padding-bottom: 4px;
	color: var(--brown-red);
	font-weight: bold;
	font-size: 20px;
	border-bottom: 1px solid var(--brown-red);
}

#s_txt h3 .mark_clr {
	font-size: 0;
}

#s_txt p a {
	text-decoration: underline;
}

.back_btn {
	display: block;
	max-width: 160px;
	margin: 50px auto -20px;
	padding: 0;
}

.back_btn img {
	width: 100%;
}

.form_main ul[class^="sm"].twocol {
    display: flex;
    gap: 12px;
}

.form_main ul[class^="sm"].twocol li {
	width: 50%;
}

.form_main ul[class^="sm"].twocol:after {
	display: none;
}