@charset "utf-8";
:root {
/* Colors: */
--primary: #a32f33;
--green: #004c46;
--light_green: #00aa89;
--pink: #ffd7dc;
--brown: #231815;
--brown2: #1f1715;
--white: #FFFFFF;
--black: #000000;
--gold: #cc9b46;
--body: var(--green);
--border: #959596;
--gray: #aaa;

/* Font/text values */
--font-size-base: clamp(1.5rem, 3.6vw, 2.0rem);
--font-size-35: clamp(3.6rem, 5.5vw, 4.65rem);
--font-size-30: clamp(2.6rem, 5.3vw, 3.3rem);
--font-size-25: clamp(2.58rem, 5.2vw, 3.0rem);
--font-size-23: clamp(2.37rem, 5.15vw, 2.9rem);
--font-size-20: clamp(2.10rem, 5.1vw, 2.6rem);
--font-size-18: clamp(1.75rem, 4vw, 2.4rem);
--font-size-15: clamp(1.5rem, 4.5vw, 2.0rem);
--font-size-14: clamp(1.4rem, 2.5vw, 1.85rem);
--font-size-13: clamp(1.35rem, 3vw, 1.7rem);
--font-size-12: clamp(1.25rem, 2.8vw, 1.6rem);
--font-size-10: clamp(0.1rem, 2.49vw, 1.3rem);
--letter-spacing-13: 0.06em;
--letter-spacing-wide: 0.13em;
--font-family: "Zen Kaku Gothic New", "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

/* spacer */
--spacer:10px;
}
@media screen and (min-width: 769px) {
	:root{
		--font-size-base: 1.5rem;
		--font-size-35: 3.5rem;
		--font-size-30: 3rem;
		--font-size-25: 2.5rem;
		--font-size-23: 2.3rem;
		--font-size-20: 2rem;
		--font-size-18: 1.8rem;
		--font-size-15: 1.5rem;
		--font-size-14: 1.4rem;
		--font-size-13: 1.3rem;
		--font-size-12: 1.2rem;
		--font-size-10: 1rem;
	}
}



/*--------------cmn setting--------------*/
html{
    font-size: 60.5%;
}
* {
	margin: 0;
	padding: 0;
	list-style:none;
	outline:0;
	vertical-align: baseline;
	background:transparent;
	text-decoration: none;
	box-sizing: border-box;
}
i{
	font-style: normal;
}
img,
a img {
	border: 0;
	vertical-align: top;
}
img{
	max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering:auto;
}
img[height]{
	height: auto;
}
figure.ob-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
article, dialog, figure, footer, header,
hgroup, menu, nav, section {
	display:block;
}
a,
input,
button{
	outline: 0;
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner{
	border: 0;
}
a{
	text-decoration: none;
	/* color: var(--primary); */
	transition: .2s ease-in-out;
}
a:hover{
    /* color:color-mix(in srgb, var(--primary) 70%, black); */
}
a object{
	pointer-events: none;
	vertical-align:bottom;
}
@media screen and (min-width: 769px) {
	html{
		font-size: 62.5%;
	}
}

/*--------------user setting--------------*/
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
iframe{
	display: block;
}
ins {
	background-color:var(--gray);
	color:var(--body);
	text-decoration:none;
}
mark {
	background-color:var(--primary);
	color:var(--body);
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted var(--gray);
	cursor:help;
}
sup{
    font-size:calc(var(--font-size-base)*.77);
    vertical-align: top;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid var(--border);
    margin:1em 0;
    padding:0;
}
input, select {
	vertical-align:middle;
}

/*-------------------body-----------------------*/
body {
	margin: 0;
	padding: 0;
	color: var(--body);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04rem;
	-webkit-text-size-adjust: 100%;
	font-family: var(--font-family);
	position: relative;
}



/*----------------Layout--------------------------*/
.text-start{
	text-align: left!important;
}
.text-center{
	text-align: center!important;
}
.text-end{
	text-align: right!important;
}
.wrapper{
	padding-inline: 8.5%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.wrapper.middle{
	padding-inline: 7%;
}
.wrapper.wide{
	padding-inline: 3.3%;
}
section{
	padding: 65px 0;
}
.d-pc{
    display: none;
}
.d-sp{
    display: block;
}
@media screen and (min-width: 769px){
	.d-pc{
		display: block;
	}
	.d-sp{
		display: none;
	}
}

/*----------------余白--------------------------*/
.mb-0{
	margin-bottom: 0px!important;
}
.mb-10{
	margin-bottom: 10px!important;
}
.mb-20{
	margin-bottom: 20px!important;
}
.mb-30{
	margin-bottom: 30px!important;
}
.mb-40{
	margin-bottom: 40px!important;
}
.mb-50{
	margin-bottom: 50px!important;
}
.mt-10{
	margin-top: 10px!important;
}
.mt-20{
	margin-top: 20px!important;
}
.mt-30{
	margin-top: 30px!important;
}
.mt-40{
	margin-top: 40px!important;
}
.mt-50{
	margin-top: 50px!important;
}
.mt-60{
	margin-top: 60px!important;
}
/*--------------Typography----------------------------*/
p{
    font-size: var(--font-size-base);
}
.fw-normal{
    font-weight: 500 !important;
}
.fw-bold{
    font-weight: 600 !important;
}
.fs-base{
	font-size: var(--font-size-base)!important;
}
.fs-35{
	font-size: var(--font-size-35)!important;
}
.fs-30{
	font-size: var(--font-size-30)!important;
}
.fs-25{
	font-size: var(--font-size-25)!important;
}
.fs-23{
	font-size: var(--font-size-23)!important;
}
.fs-20{
	font-size: var(--font-size-20)!important;
}
.fs-18{
	font-size: var(--font-size-18)!important;
}
.fs-15{
	font-size: var(--font-size-15)!important;
}
.fs-14{
	font-size: var(--font-size-14)!important;
}
.fs-13{
	font-size: var(--font-size-13)!important;
}
.fs-12{
	font-size: var(--font-size-12)!important;
}
.fs-10{
	font-size: var(--font-size-10)!important;
}
.lh-15{
	line-height: 1.5!important;
}
.lh-22{
	line-height: 2.2!important;
}
.color-white{
	color: #fff!important
}
.color-light-green{
	color: var(--light_green)!important
}
.color-brown2{
	color: var(--brown2)!important
}

/*--------------Parts----------------------------*/

.btn{
	text-align: center;
	position:relative;
}
.btn a,
form input[type=submit],
input[type=button],
form input[type=reset]{
	display: inline-block;
	text-align: center;
	font-weight: 600;
	color: #fff;
	background: var(--brown);
	border-radius: 5px;
	padding: 3px 20px;
	min-width: 225px;
	transition: 0.2s;
	font-size:var(--font-size-base);
	border: 1px solid var(--brown);
    cursor: pointer;
	position: relative;
	z-index: 2;
}

.btn a:hover,
form input[type=submit]:hover,
form input[type=reset]:hover,
input[type=button]:hover{
	background: #fff;
	color: var(--brown);
}
.btn.sm a{
	min-width: 0;
}
button:focus-visible,
a:focus-visible {
	outline: 3px solid --primary;
	outline-offset: 2px;
}
.btn.arrow a{
	padding-right: 40px;
}

.btn.arrow.sm a{
	padding-right: 45px;
}

.btn.arrow span::after{
	content: "\2192";
	color: inherit;
	pointer-events: none;
	font-weight: inherit;
	transition: .2s ease-in-out;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	vertical-align: middle;
}

/* --- list --- */
ul li{
	list-style: none;
}
ul.ul li{
	position:relative;
	padding-left: 15px;
	list-style: none;
}
ul.ul li:before{
	position:absolute;
	content:"";
    width: 4px;
    height: 4px;
    border-top: 1px solid var(--primary);
    border-right: 41px solid var(--primary);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	left:0;
	top:calc(50% - 2px);
}
/* --- table --- */
table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: center;
	font-size: 1.4rem;
	word-wrap: break-word;
	word-break: break-all;
	table-layout: fixed;
	line-height: 1.4;
}
table th,
table td{
	padding: 8px 10px;
	background: #fff;
	vertical-align: middle;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}
table th:first-child{
	border-left: 1px solid var(--border);
}
table th{
	background:  var(--lightgray);
	text-align: center !important;
}
table td{
}
table thead th{
	color: #fff;
	padding-top: 13px;
	padding-bottom: 13px;
	background: var(--primary);
	border-bottom: 1px solid var(--body);
	border-right: 1px solid var(--body);
}
table tr:first-child th,
table tr:first-child td{
	border-top: 1px solid var(--body);
}
@media screen and (max-width: 768px){
	table th,
	table td{
		padding: 8px 5px;
	}
}

/* 枠線なし */
table.noborder{
	table-layout: auto;
	font-size: var(--font-size-base);
}
table.noborder th,
table.noborder td{
	border: none!important;
	background: none;
	padding: 6px 0;
	text-align: left!important;
}
table.noborder th{
	white-space: nowrap;
}
table.noborder td{
	padding-left: 10px;
}
/*------------------------------------------*/
body{
	width: 100vw;
	position: relative;
}
body::before{
	display: block;
	content: "";
	width: calc(100vw + 1px);
	height: 100vh;
	background: url(/img/cmn/bg_body.webp) no-repeat center / cover;
	position: fixed;
	top: 0px;
	left: -1px;
	z-index: -1;
	pointer-events: none;
}
#main_contents{
	width: 100%;
	background: #fff;
	overflow: hidden;
}


@media screen and (min-width: 769px){
	.wrap{
		width: 100%;
		max-width: 1120px;
		min-width: 450px;
		margin: 0 auto;
		padding: 50px 20px;
		position: relative;
		align-items: center;
	}
	#main_contents{
		width: 450px;
		border-radius: 20px;
		border: 1px solid var(--black);
		height: calc(100vh - 100px);
		overflow-y: auto;
		overflow-x: hidden;
		margin: 0 auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	#main_contents::-webkit-scrollbar {
		display: none;
	}
}

/*---------------header---------------------------*/
header.open{
	top: 0;
	overflow-y: auto;
	max-height: 100dvh;
	max-width: none;
}
header .inner{
	padding-right: 10px;
}
header nav li{
	opacity: 0;
}
header nav li.active{
	animation: openNavi 0.3s ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: .5s;
}
header nav .gnavi li.active:nth-of-type(2){
	animation-delay: .6s;
}
header nav .gnavi li.active:nth-of-type(3){
	animation-delay: .7s;
}
header nav .gnavi li.active:nth-of-type(4){
	animation-delay: 0.8s;
}
header nav .gnavi li.active:nth-of-type(5){
	animation-delay: 0.9s;
}

header .gnavi a{
	font-size: var(--font-size-base);
	font-weight: 500;
	letter-spacing: 0rem;
	display: block;
	text-align: center;
	background: #fff;
	border: 1px solid var(--green);
	border-radius: 99px;
	padding: 5px 5px 5px 0;
	position: relative;
	color: var(--body);
}
header .gnavi a.thin{
	letter-spacing: -0.02rem;
}
header .gnavi a::after{
	content: "\2192";
	color: inherit;
	pointer-events: none;
	font-weight: inherit;
	transition: .2s ease-in-out;
	position: absolute;
	right: 10px;
	font-size: var(--font-size-12);
	vertical-align: middle;
}
header .gnavi a:hover{
	background: var(--green);
	color: #fff;
}
header .gnavi li+li{
	margin-top: 17px
}

@keyframes openNavi {
	0% {
		transform: translateY(-10px);
		filter: blur(5px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		filter: blur(0px);
		opacity: 1;
	}
}
@media screen and (max-width: 1080px) {
	header{
		background: rgb(163, 47, 51, 0.85);
		width: 100vw;
		margin-inline: calc(50% - 50cqi);
		position: fixed;
		top: -150%;
		left: 0;
		padding: 70px 3%;
		border-bottom: 1px solid var(--black);
		transition: .7s ease-in-out;
		z-index: 999;
	}
	header .inner{
		max-width: 768px;
		margin-inline: auto;
	}
	header .logo{
		filter: invert(1) brightness(2);
		width: 58.8%;
		margin: 0 auto 40px;
	}
	header .gnavi .d-sp{
		display: block;
	}
}
@media screen and (min-width: 769px) {
	header .gnavi a{
		font-size: var(--font-size-20);
	}
}

@media screen and (min-width: 1081px){
	.wrap{
		position: relative;
	}
	header{
		width: 26.8%;
		position: absolute;
		max-height: calc(100vh - 100px);
		top: 50vh;
		left: 20px;
		transform: translateY(-50%);
	}
	header .logo{
		width: 75.3%;
		margin: 0 auto 40px;
	}
	header nav{
		overflow-y: auto;
	}
	header nav li{
		opacity: 1;
	}
	header nav li a{
		font-size: var(--font-size-base)!important;
	}
	header .gnavi li+li{
		margin-top: 11px
	}

}

/* バーガーメニュー */
#bm{
	position: fixed;
	top: 20px;
	right: 3%;
	z-index: 99999;
	display: inline-block;
	width: 56px;
	aspect-ratio: 1;
	cursor: pointer;
}
#bm a{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: var(--gold);
	border-radius: 50%;
	box-shadow: 0 4px 0 rgba(0,0,0,.2);

}
#bm a i{
	text-indent: -999999px;
	font-size: 1px;
	color: transparent;
}
#bm a i,
#bm a i::before,
#bm a i::after{
	width: 24px;
	height: 1px;
	background: #fff;;
	position: absolute;
	top: 45%;
	left: calc(50% - 12px);
	display: inline-block;
	transition: .2s;
}
#bm a i::before,
#bm a i::after{
	position: absolute;
	content: "";
}
#bm a i::before{
	top: -7px;
}
#bm a i::after{
	top: 7px;
}

header.open #bm a i::before{
	transform: rotate(220deg);
	top: 0px;
}
header.open #bm a i::after{
	transform: rotate(-220deg);
	top: 0;
}
header.open #bm a i{
	background: transparent;
}

@media screen and (min-width:1081px) {
	#bm{
		display: none;
	}
}
@media screen and (min-width: 769px) and (orientation: landscape) and (max-height: 600px) {
	#bm{
		display: inline-block;
	}
}


/*------------------------------------------
フッター
--------------------------------------------*/
#partner{

}
#partner h2{
	font-weight: 500;
	font-size: var(--font-size-15);
	display: flex;
	align-items: center;
	color: var(--black);
	gap: 0 0.8em;
	margin-bottom: 20px;
}
#partner h2::after{
	content: "";
	height: 1px;
	background: var(--border);
	flex: 1;
	pointer-events: none;
}

#partner .inner{
	padding: 0 0 20px;
}

#partner ul{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 7%;
	justify-content: center;
	align-items: center;
}
#partner ul li{
	max-width: 46.5%;
	min-width: 33%;
	text-align: center;
}
#partner ul li img{
	max-height: 36px;
	vertical-align: middle;
}
#partner ul li a{
	display: block;
}
#partner ul li a p{
	font-size: var(--font-size-10);
	color: var(--brown2);
}
#partner ul li a:hover{
	opacity: 0.7;
}
footer .cp{
	padding: 20px;
	font-style: var(--font-size-14);
	color: var(--black);
}

/*------------------------------------------
アニメーション
--------------------------------------------*/

.fadeInUp,
.fadeInUp_parent>*{
    visibility:hidden;
}
.ani-fadeInUp {
    -webkit-animation: ani-fadeInUp 0.5s ease 0s both 1 normal;
    animation: ani-fadeInUp 0.5s ease 0s both 1 normal;
    visibility: visible !important;
}
@keyframes ani-fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
  100% {
		opacity: 1;
		transform: none;
	}
}


.fadeInDown,
.fadeInDown_parent>*{
    visibility:hidden;
}
.ani-fadeInDown {
    animation: ani-fadeInDown 0.5s ease 0s both 1 normal;
    visibility: visible !important;
}
@keyframes ani-fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}
  100% {
		opacity: 1;
		transform: none;
	}
}


.fadeIn,
.fadeIn_parent>*{
    opacity: 0;
}

.ani-fadeIn {
    -webkit-animation: ani-fadeIn 1s cubic-bezier(0.42, 0, 1, 1) forwards 0.25s;
    animation: ani-fadeIn 1s cubic-bezier(0.42, 0, 1, 1) forwards 0.25s;
    animation-fill-mode:forwards;
}

@-webkit-keyframes ani-fadeIn {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-filter: blur(5px);
            filter: blur(5px); }
  to {
    opacity: 1;
    -webkit-filter: none;
            filter: none;
    visibility: visible; } }

@keyframes ani-fadeIn {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-filter: blur(5px);
            filter: blur(5px); }
  to {
    opacity: 1;
    -webkit-filter: none;
            filter: none;
    visibility: visible; }
}



.scaleUp{
    opacity: 0;
	pointer-events: none;
	transform: scale(0) rotate(0.0001deg);
	transform-origin: 50% 100%;
	will-change: transform, opacity;
}
.ani-scaleUp {
    animation: ani-scaleUp .5s cubic-bezier(.37,.49,.35,1.28) 0s both 1 normal;
	pointer-events: auto;
}
@keyframes ani-scaleUp {
	0% {
		opacity: 0;
		transform: scale(0) rotate(0.0001deg);
	}
  100% {
		opacity: 1;
		transform: scale(1) rotate(0.0001deg);
	}
}

.scaleUpDown{
    opacity: 0;
    transform: scale(0.01) rotate(-6deg);
	pointer-events: none;
	transform-origin: 50% 100%;
	will-change: transform, opacity;
}
.ani-scaleUpDown {
    animation: ani-scaleUpDown .7s cubic-bezier(.175,.885,.32,1.275) both;
    pointer-events: auto;
}
@keyframes ani-scaleUpDown {
	0% {
		opacity: 0;
		transform: scale(0.01) rotate(-6deg);
	}

	70% {
		opacity: 1;
		transform: scale(1.4) rotate(5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

.zoomUp{
	visibility:hidden;
	clip-path: inset(100%);
}
.ani-zoomUp{
	animation: ani-zoomUp 0.8s ease forwards;
}
@keyframes ani-zoomUp {
	0% {
		clip-path: inset(100%);
	}
	100% {
		visibility:visible;
		clip-path: inset(0);
	}
}

.rollDown{
	visibility:hidden;
	clip-path:  inset(0 0 100% 0);
}
.ani-rollDown{
	animation: ani-rollDown 0.6s ease forwards;
}
@keyframes ani-rollDown {
	0% {
		clip-path: inset(0 0 100% 0);
	}
	100% {
		visibility:visible;
		clip-path: inset(0);
	}
}

.showTtl{
    opacity: 0;
	mask-image: linear-gradient(90deg, #fff 24%, transparent 33%);
	mask-position: 100% 0%;
	mask-size: 400% 400%;
}
.ani-showTtl{
    animation: showTtl 3s forwards;
}
.showTtl+.showTtl,
.showTtl+br+.showTtl{
	animation-delay: 0.5s;
}

@keyframes showTtl{
    from {
		opacity: 0;
		mask-position: 100% 0%;
    }
    to {
		opacity: 1;
		mask-position: 0% 0%;
    }
}


@keyframes toLeft {
	0% {
		transform: translateX(30px);
		opacity: 0;
	}
	50% {
		transform: translateX(0px);
	}
	100% {
		opacity: 1;
	}
}
@keyframes toRight {
	0% {
		transform: translateX(-30px);
		opacity: 0;
	}
	50% {
		transform: translateX(0px);
	}
	100% {
		opacity: 1;
	}
}
@keyframes twinkle{
	0%, 100% {
		opacity: 0.25;
		transform: scale(0.999);
	}
	45%{
		opacity: 1;
		transform: scale(1.001);
	}
	60%{
		opacity: 0.85;
		transform: scale(0.997);
	}

}


/*---------------swiperスライド---------------------------*/

.swiper{
	padding-bottom: 25px;
	margin-bottom: 20px;
}
.swiper:has(.swiper-pagination-lock){
	padding-bottom: 0px;
}
.swiper-wrapper{
	padding-top: 20px;
}

.swiper-button-next svg,
.swiper-button-prev svg{
	display: none;
}
.swiper-horizontal .swiper-button-next,
.swiper-horizontal .swiper-button-prev{
	margin-top: calc(0px - var(--swiper-navigation-size)/2 - 12px);
}
.swiper-button-next::before,
.swiper-button-prev::after{
	display: inline;
	content: "\2192";
	font-size: var(--font-size-20);
	color: #fff;
	position:absolute;
	top: 0px;
	right: 0px;
	z-index:0;
	pointer-events: none;
	border: none;
}
.swiper-button-prev::after{
	transform: rotate(180deg);
	right: auto;
	left: 0px;
	border: none;
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible,
.swiper-pagination-bullet:focus-visible{
	outline: 3px solid #1379ff;
	outline-offset: 2px;
}
.swiper-horizontal > .swiper-pagination-bullets{
	bottom: 0px;
	display: flex;
	justify-content: center;
	gap: 5px;
}
.swiper-pagination-bullet{
	flex: 1;
	background: #c2c3c3;
	height: 5px;
	border-radius: 2.5px;
	opacity: 1;
}
.swiper-pagination-bullet-active{
	background: var(--brown2);
}