/*+++++++++++++++
root
++++++++++++++++*/

:root {
--width-max:100%;
--width-full: clamp(480px, 90vw, 100vw);
--large-inner: clamp(360px, 90vw, 1400px);
--medium-inner:clamp(360px, 90vw, 1200px);
--small-inner:clamp(360px, 90vw, 1000px);
/*font-family*/
--gs: "Noto Sans JP", sans-serif;;
--en:"Cormorant", serif;
--engs:"Catamaran", sans-serif;
	
/*color*/
--red:#e7000d;
--white:#fff;
--black:#222;
--blue:#155dac;
--orange:#F39700;
--gray:#e1e1e1;
--green:#6eb82b;
--darkgray:#333;
--lightgray:#f2f2f2;
--darkblue:#0b77dc;
--aqua:#0071bc;
--pink:#e75959;
--brown:#754c24;
--navy:#0c0c34;
--beige:#F3F4EB;
--yellow:#f5ce32;
--purple:#ad85ba;
--lightyellow:#fff799;
--lightblue:#f1f9fb;	
--lightpink:#f9cdc6/*#f9e6e3*/;
--lightgreen:#c7dbc3/*#deebdc*/;
--lightorange:#f8b74a;
    
--darkblue:#0656a1;

--grade:linear-gradient(var(--lightblue) 5%, var(--lightyellow));

/*opacity*/
--opa-white01:rgba(255,255,255,0.05);
--opa-white02:rgba(255,255,255,0.2);
--opa-white05:rgba(255,255,255,0.5);
--opa-white07:rgba(255,255,255,0.7);
--opa-white09:rgb6a(255,255,255,0.9);

--opa-black01:rgba(0,0,0,0.03);
--opa-black02:rgba(0,0,0,0.1);
--opa-black03:rgba(0,0,0,0.2);	
--opa-black05:rgba(0,0,0,0.5);
--opa-black08:rgba(0,0,0,0.8);	
--opa-black09:rgba(0,0,0,0.95);		
--opa-blue01:rgba(0, 79, 175, 0.05);	
--opa-blue02:rgba(0, 79, 175, 0.2);	
	
--opa-red01 :rgba(231, 0, 13,0.05);
	
--opa-orange01:#fbf7ec;
--opa-orange03:rgba(243, 151, 0,0.2);
	
/*fontsize*/
--font-mc:clamp(0.75rem, 3vw, 0.8rem);
--font-em:clamp(0.85rem, 3vw, 0.95rem);
--font-h6:clamp(0.95rem, 2vw, 1.1rem);
--font-h5:clamp(1.1rem, 3vw, 1.4rem);
--font-h4:clamp(1.2rem, 3vw, 1.5rem);
--font-h3:clamp(1.5rem, 3vw, 1.8rem);
--font-h2:clamp(1.8rem, 3vw, 2.2rem);
--font-h1:clamp(2.2rem, 3vw, 3rem);

/*flex-basis*/
--flex-10:10%;
--flex-12:12%;	
--flex-15:15%;	
--flex-20:20%;
--flex-22:22%;
--flex-25:24.5%;
--flex-28:28%;
--flex-30:30%;
--flex-32:32%;
--flex-33:32.99%;	
--flex-35:35%;
--flex-40:40%;
--flex-42:42%;	
--flex-45:45%;
--flex-47:47%;	
--flex-48:48%;
--flex-49:49%;	
--flex-50:50%;
--flex-55:55%;
--flex-60:60%;
--flex-65:65%;
--flex-70:70%;
--flex-72:72%;	
--flex-75:75%;
--flex-80:80%;
--flex-85:85%;	
--flex-90:90%;
--flex-95:95%;	
--flex-100:100%;	


/*width*/
--width180:180px;
--width240:240px;
--width360:360px;
--width400:400px;	
--width480:480px;
--width640:640px;	
--width800:800px;
	
/*line height*/
--lh-lg:3.3;
--lh-md:2.5;
--lh-sm:2;
--lh-mc:1.1;	

/*font-weight*/
--wght-100:100;
--wght-300:300;
--wght-500:500;
--wght-600:600;
--wght-700:bold;	

	
[data-color="01"] {
  --sub-color: var(--pink);	
}
[data-color="02"] {
  --sub-color: var(--green);	
}	
[data-color="03"] {
  --sub-color: var(--yellow);	
}	
[data-color="04"] {
  --sub-color: var(--purple);	
}	
[data-color="05"] {
  --sub-color: var(--blue);	
}		
[data-color="06"] {
  --sub-color: var(--orange);	
}		
	
}

/*font-family*/
.gs {font-family: var(--gs);}
.en {font-family: var(--en);}
.engs {font-family: var(--engs); }


/*font-size*/
.h1-title {font-size: var(--font-h1) !important;}
.h2-title {font-size: var(--font-h2) !important;}
.h3-title {font-size: var(--font-h3) !important;}
.h4-title {font-size: var(--font-h4);}
.h5-title {font-size: var(--font-h5) !important;}
.h6-title {font-size: var(--font-h6) !important;}
.em-title {font-size: var(--font-em) !important;}
.mc-title {font-size: var(--font-mc) !important;}

/*line-height*/
.lh-mc {line-height: var(--lh-mc) !important;}
.lh-sm {line-height: var(--lh-sm);}
.lh-md {line-height: var(--lh-md);}
.lh-lg {line-height:var(--lh-lg);}

/*color*/
.red {color: var(--red);}
.black {color: var(--black) !important;}
.white {color: var(--white);}
.blue {color: var(--blue);}
.navy {color: var(--navy);}
.lightgray {color: var(--lightgray);}
.dgray {color: var(--darkgray);}
.darkblue {color: var(--darkblue);}
.aqua {color: var(--aqua);}
.pink {color: var(--pink);}
.orange {color: var(--orange);}
.yellow {color: var(--yellow);}
.green {color: var(--green);}
.purple {color: var(--purple);}

.grade {background-image: var(--grade);}

/*background*/
.bg-lightgray {background: var(--lightgray);}
.bg-navy {background: var(--navy);}
.bg-darkblue {background: var(--darkblue) !important;}
.bg-white {background: var(--white) !important;}
.bg-lightblue {background:var(--lightblue);}
.bg-lightyellow {background:var(--lightyellow);}
.bg-beige {background:var(--beige);}
.bg-black {background: var(--black) !important;}
.bg-darkblue {background: var(--darkblue);}
.bg-orange {background: var(--orange) !important;}
.bg-pink {background: var(--pink);}
.bg-green {background: var(--green);}
.bg-purple {background: var(--purple);}
.bg-yellow {background: var(--yellow);}

/*width*/
.width240 {max-width: var(--width240);}
.width360 {max-width: var(--width240);}
.width480 {max-width: var(--width480) !important;}
.width640 {max-width: var(--width640);}
.width800 {max-width: var(--width800);}

.flex-100,.flex-100 img {width:var(--flex-100);}

/*inner*/
.small-inner {max-width:var(--small-inner);}
.medium-inner {max-width: var(--medium-inner);}
.large-inner{max-width: var(--large-inner);}
.m-auto {margin: auto !important;}


/*weight*/
.wght-100 {font-weight: 100;}
.wght-300 {font-weight: 300;}
.wght-400 {font-weight: 400;}
.wght-500 {font-weight: 500;}
.wght-600 {font-weight: 600;}
.wght-700 {font-weight: bold;}

/*text-decoration*/
.underline {text-decoration: underline;}
.under-white {border-bottom: 1px solid var(--opa-white05); padding: 0 0 10px;}
.under-white:hover {border-bottom: 1px solid transparent;}

/*flex*/
.flex {display: flex;}

/*gap*/
.gap-10 {gap:5px;}
.gap-20 {gap: clamp(10px, 3vw, 20px);}
.gap-30 {gap: clamp(15px, 3vw, 30px);}
.gap-50 {gap: clamp(25px, 3vw, 50px);}
.gap-80 {gap: clamp(40px, 3vw, 80px);}

/*radius*/
.radius-10 {border-radius:10px;}
.radius-20 {border-radius:20px;}
.radius-30 {border-radius:30px;}

/*padding*/
/*0.739rem + 0.68vw 320-1200*/
.pa-10 {padding: 5px;}
.pa-20 {padding: 10px;}
.pa-30 {padding: clamp(15px, 10vw, 30px);}
.pa-50 {padding: clamp(1.563rem, 0.827rem + 3.68vw, 3.125rem); box-sizing: border-box;} /*25/50*/
.pa-80 {padding: clamp(40px, 0.668rem + 1.03vw, 80px); box-sizing: border-box;}
.pa-100 {padding: 30px;}

.pt-50{padding-top:clamp(25px, 10vw, 50px);}
.pt-100{padding-top:clamp(50px, 10vw, 100px);}

.ptb-30 {padding: 15px 0;}
.ptb-50 {padding:clamp(25px, 10vw,50px) 0;}
.ptb-80 {padding:clamp(40px, 10vw,80px) 0;}
.ptb-100 {padding:clamp(50px, 10vw,100px) 0;}
.ptb-150 {padding:clamp(75px, 10vw,150px) 0;}

.pb-10 {padding: 0 0 5px;}
.pb-20 {padding-bottom:clamp(10px, 10vw, 20px);}
.pb-50 {padding-bottom:clamp(25px, 10vw, 50px);}
.pb-80 {padding-bottom:clamp(40px, 10vw, 80px);}

.pb-100 {padding-bottom:clamp(50px, 10vw, 100px);}
.pb-150 {padding-bottom:clamp(70px, 10vw, 150px);}
.pb-300 {padding-bottom:clamp(70px, 10vw, 300px);}

/*margin*/
.mb-10 {margin-bottom: clamp(5px, 1vw, 10px);}
.mb-20 {margin-bottom: clamp(10px, 10vw, 20px);}
.mb-30 {margin-bottom: clamp(15px, 10vw, 30px);}
.mb-50 {margin-bottom: clamp(20px, 3vw, 50px);}
.mb-80 {margin-bottom: clamp(40px, 5vw, 80px);}
.mb-150 {margin-bottom:clamp(80px, 10vw, 150px);}	

.mt-30 {margin-top: clamp(15px, 10vw, 30px);}
.mt-50 {margin-top: clamp(25px, 10vw, 50px);}

.space-1 {letter-spacing: 1px;}

body {
	overflow-x: hidden;
	font-family: var(--gs);
}
a {text-decoration: none;color: inherit;}

img {
	max-width: var(--flex-100);
	vertical-align: bottom;
}

#wrapper {
	background: var(--white);
	position: relative;
	overflow: hidden;
}

section {
background: var(--white);	
position: relative;
}

.br {display: none;}
.br2 {display: block;}

.grid {display: grid;}
.items-center {align-items: center !important;}
.column-2 {grid-template-columns: repeat(2,1fr);}
.column-3 {grid-template-columns: repeat(3,1fr);}
.column-3 {grid-template-columns: repeat(3,1fr);}



/*z-index*/
.zindex {z-index: 1; position: relative;}
/*category*/
.center {display: block; margin: auto; text-align: center;}

::before {
font-family: "Font Awesome 6 Free";
font-weight: 600;
}

.scale {transform: scale(1.0); transition: .3s;}
.scale:hover {transform: scale(1.1); transition: .3s;}

.zoom-out {
	opacity: 0;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transition: .8s;
	transition-delay: 0.8s;
}
.mv-zoom {
	opacity: 1.0;
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
}

/*+++++++++++++++++++
/*各種ご案内
+++++++++++++++++++*/
#guidence {
	/* right: 0; */
	position: fixed;
	max-width: 92%;
	width: 100%;
	z-index: 102;
	height: auto;
	padding: 0;
	overflow: hidden;
	left: 0;
	border-radius:5px;
	bottom: 0;
	margin: 1rem;
	box-sizing: border-box;
	box-shadow: 0 0 6px rgba(0,0,0,0.2);
	transition: .3s;
}
#guidence.on {
	/* height: 600px; */
	transition: .3s;
}
#guidence.off {
	transition: .3s;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	height:68px;
	margin: 1rem 1rem;
}
#guidence.off dl {
	height:auto;
}
#guidence dl{
	height: auto;
	overflow: hidden;
}
#guidence dt{
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 20px 63px 20px 20px;
    box-sizing: border-box;
    cursor: pointer;
    justify-content: center;
    font-size: var(--font-h4);
    font-weight: 600;
    background: var(--orange);
    color: var(--white);
    transition: .6s;
    z-index: 100;
}
#guidence dt:before{
    content: "\f0e0";
    background: var(--white);
    position: absolute;
    width: 30px;
    height: 30px;
    background-size: 22px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 1rem;
    color: var(--orange);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#guidence.off dt:after {
}
#guidence dt:after {
}

#guidence dd{
	padding: 0;
	box-sizing: border-box;
	background: var(--black);
	border-radius: 0;
}
#guidence .gd_sub_navi {
	flex-wrap: wrap;
	gap: 10px;
}

#guidence .gd_sub_navi a{
	width: auto;
	display: flex;
	align-items: center;
}
#guidence .gd_sub_navi a i,#guidence .gd_sub_navi a img {
	border-radius: 100%;
	width: 20px;
	padding: 10px;
	height: 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1em;
	margin: 0 10px 0 0;
	transition:.3s;
	transform:scale(1);
}
#guidence .gd_sub_navi a i:before {
}

#guidence ul.gd_navi {
	display: grid;
	gap: 10px;
	padding: 15px;
}
#guidence ul.gd_navi li{
}
#guidence ul.gd_navi li a > i,#guidence ul.gd_navi li a > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	left: 0.5rem;
	padding: 0;
	opacity: 1;
	width: 30px;
	height: 30px;
	color: var(--black);
}
#guidence ul.gd_navi li a > i:before {
	color: var(--black);
}
#guidence ul.gd_navi li a{
	display: block;
	padding: 10px 10px 10px 40px;
	font-size: var(--font-h6);
	font-weight: 500;
	position: relative;
	background: var(--white);
}


@media screen and (min-width: 600px) {
/*+++++++++++++++++++
/*各種ご案内
+++++++++++++++++++*/
#guidence {
	max-width: max-content;
}
#guidence.off dl{
	height: auto;
}	
#guidence dl {
	height: auto;
}	
#guidence.on {
	/* height: 600px; */
	transition: .3s;
}

#guidence dt{
    padding: 20px 80px 22px 30px;
}
#guidence dt:before{
    width: 40px;
    height: 40px;
}

#guidence .gd_sub_navi a{
	width: auto;
	display: flex;
	align-items: center;
}
#guidence .gd_sub_navi a i,#guidence .gd_sub_navi a img {
	border-radius: 100%;
	width: 20px;
	padding: 10px;
	height: 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1em;
	margin: 0 10px 0 0;
	transition:.3s;
	transform:scale(1);
}
#guidence .gd_sub_navi a i:before {
}

#guidence ul.gd_navi {
}
#guidence ul.gd_navi li{
}
#guidence ul.gd_navi li a > i,#guidence ul.gd_navi li a > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	left: 0.5rem;
	padding: 0;
	opacity: 1;
	width: 30px;
	height: 30px;
	color: var(--black);
}
#guidence ul.gd_navi li a > i:before {
	color: var(--black);
}
#guidence ul.gd_navi li a{
	padding: 15px 10px 15px 45px;
}
}

@media screen and (min-width: 1024px) {

	
/*+++++++++++++++++++
/*各種ご案内
+++++++++++++++++++*/
#guidence.off {
	height: 77px;
}
#guidence .gd_sub_navi a{
	width: auto;
	display: flex;
	align-items: center;
}
#guidence .gd_sub_navi a i,#guidence .gd_sub_navi a img {
	border-radius: 100%;
	width: 20px;
	padding: 10px;
	height: 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1em;
	margin: 0 10px 0 0;
	transition:.3s;
	transform:scale(1);
}
#guidence .gd_sub_navi a i:before {
}


#guidence ul.gd_navi li a > i,#guidence ul.gd_navi li a > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	left: 0.5rem;
	padding: 0;
	opacity: 1;
	width: 30px;
	height: 30px;
	color: var(--black);
}
#guidence ul.gd_navi li a > i:before {
	color: var(--black);
}
#guidence ul.gd_navi li a{
}
}

@media screen and (min-width: 1200px) {
.br {display: block;}
.br2 {display: none;}	
/*+++++++++++++++++++
/*各種ご案内
+++++++++++++++++++*/

#guidence dt:before{
    width: 40px;
    height: 40px;
}

#guidence.off dt:after {
}
#guidence dt:after {
}

#guidence dd{
	padding: 0;
	box-sizing: border-box;
	background: var(--black);
	border-radius: 0;
}
#guidence .gd_sub_navi {
}

#guidence .gd_sub_navi a{
	width: auto;
	display: flex;
	align-items: center;
}
#guidence .gd_sub_navi a i,#guidence .gd_sub_navi a img {
	border-radius: 100%;
	width: 20px;
	padding: 10px;
	height: 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1em;
	margin: 0 10px 0 0;
	transition:.3s;
	transform:scale(1);
}
#guidence .gd_sub_navi a i:before {
}

#guidence ul.gd_navi {
}
#guidence ul.gd_navi li{
}
#guidence ul.gd_navi li a > i,#guidence ul.gd_navi li a > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	left: 0.5rem;
	padding: 0;
	opacity: 1;
	width: 30px;
	height: 30px;
	color: var(--black);
}
#guidence ul.gd_navi li a > i:before {
	color: var(--black);
}
#guidence ul.gd_navi li a{
	display: block;
	padding: 15px 10px 15px 45px;
	font-weight: 500;
	position: relative;
	background: var(--white);
}
}
@media screen and (min-width: 1500px) {
/*+++++++++++++++++++
/*各種ご案内
+++++++++++++++++++*/

#guidence.on {
	/* height: 600px; */
	transition: .3s;
}



#guidence.off dt:after {
}
#guidence dt:after {
}

#guidence dd{
	padding: 0;
	box-sizing: border-box;
	background: var(--black);
	border-radius: 0;
}
#guidence .gd_sub_navi {
}

#guidence .gd_sub_navi a{
	width: auto;
	display: flex;
	align-items: center;
}
#guidence .gd_sub_navi a i,#guidence .gd_sub_navi a img {
	border-radius: 100%;
	width: 20px;
	padding: 10px;
	height: 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 1em;
	margin: 0 10px 0 0;
	transition:.3s;
	transform:scale(1);
}
#guidence .gd_sub_navi a i:before {
}

#guidence ul.gd_navi {
}
#guidence ul.gd_navi li{
}
#guidence ul.gd_navi li a > i,#guidence ul.gd_navi li a > img {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	left: 0.5rem;
	padding: 0;
	opacity: 1;
	width: 30px;
	height: 30px;
	color: var(--black);
}
#guidence ul.gd_navi li a > i:before {
	color: var(--black);
}
#guidence ul.gd_navi li a{
	padding: 15px 10px 15px 45px;
}
}