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

:root {
--full-inner: min(100%,90%);
--large-inner: min(95%, 1400px);
--medium-inner:min(95%, 1200px);
--small-inner:min(90%, 1000px);
--width-inner:min(95%, 800px);	
	
/*font-family*/
--gs:"Zen Kaku Gothic New", sans-serif;
--mn:"Noto Serif JP", serif;
--en:"Inter", sans-serif;
--engs:"Marcellus", serif;
	
/*color*/
--red:#ea9196;
--white:#fff;
--black:#222;
--blue:#458ed3;
--orange:#ea985b; /*薄め#edb14f*/
--gray:#e1e1e1;
--green:#6eb82b /*薄め#b5dd91*/;
--darkgray:#333;
--lightgray:#f7f7f7;
--darkblue:#e59bc7;
--khaki:#A8AA49 /*薄め#c2c388*/;
--aqua:#4fa0d6 /*薄め#7abae5*/;
--pink:#e59bc7; /*薄め#edc0db;*/
--brown:#604f3e;
--beige:#F3F4EB;
--yellow:#f5ce32;
--purple:#ad85ba /*薄め#d9b6e5*/;
--lightyellow:#fff799;
--lightblue:#f1f9fb;	
--lightpink:#f9cdc6/*#f9e6e3*/;
--lightgreen:#c7dbc3/*#deebdc*/;
--lightorange:rgba(248, 183, 74, 0.1); /*#f8b74a*/
--darkblue:#0656a1;

--site-color-grade:linear-gradient(180deg, transparent,#f3e0bc);
--site-color-grade02:linear-gradient(-180deg, #fff4df, transparent);
    
--site-color-base:#fef8ed;
--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:rgba(255,255,255,0.9);

--opa-black01:rgba(0,0,0,0.03);
--opa-black02:rgba(0,0,0,0.2);
--opa-black05:rgba(0,0,0,0.5);
--opa-blue01 :rgba(11, 96, 176,0.05);
	
--opa-orange01:#fbf7ec;
--opa-orange03:rgba(243, 151, 0,0.2);
	
--opa-red01:rgba(234, 145, 150,0.1);
	
/*fontsize*/
--font-mc:clamp(0.5rem, 3vw, 0.75rem);/*810*/
--font-em:clamp(0.6rem, 3vw, 0.95rem);/*1013*/
--font-h6:clamp(0.95rem, 3vw, 1.1rem);/*1316*/
--font-h5:clamp(1rem, 0.963rem + 0.19vw, 1.2rem);/*1618*/
--font-h4:clamp(1.1rem, 3vw, 1.4rem);/*1824*/
--font-h3:clamp(1.3rem, 3vw, 2.3rem);/*2428*/
--font-h2:clamp(1.5rem, 3vw,2.8rem);/*2832*/
--font-h1:clamp(2rem, 1.481rem + 2.59vw, 3.75rem); /*3260*/

/*flex-basis*/
--flex-10:10%;
--flex-15:15%;	
--flex-20:20%;
--flex-25:25%;
--flex-28:28%;
--flex-30:30%;
--flex-33:33%;	
--flex-35:35%;
--flex-40:40%;
--flex-45:45%;
--flex-47:47%;	
--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;	

/*line height*/
--lh-lg:3.3;
--lh-md:2.5;
--lh-sm:1.8;
--lh-em:1.2;	

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

[site-color="dejima"]{
    --site-color: var(--orange);
    --site-color-opa:var(--lightorange);
}    
    
[data-color="pink"] {
  --sub-color: var(--pink);	
}
[data-color="green"] {
  --sub-color: var(--green);	
}	
[data-color="aqua"] {
  --sub-color: var(--aqua);	
}	
[data-color="purple"] {
  --sub-color: var(--purple);	
}	
[data-color="khaki"] {
  --sub-color: var(--khaki);	
}		
[data-color="orange"] {
  --sub-color: var(--orange);	
}		
	
}

/*font-family*/
.gs {font-family: var(--gs);}
.mn {font-family: var(--mn);}
.en {font-family: var(--en);}
.engs {
	font-family: var(--engs); 
	letter-spacing: 1px;
	text-transform:capitalize;
}


/*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-em {line-height: var(--lh-em) !important;}
.lh-sm {line-height: var(--lh-sm);}
.lh-md {line-height: var(--lh-sm);}
.lh-lg {line-height:var(--lh-md);}

/*color*/
.red {color: var(--red);}
.black {color: var(--black) !important;}
.white {color: var(--white);}
.blue {color: var(--blue);}
.navy {color: var(--navy);}
.gray {color: var(--gray);}
.lightgray {color: var(--lightgray);}
.darkgray {color: var(--darkgray);}
.darkblue {color: var(--darkblue);}
.aqua {color: var(--aqua);}
.pink {color: var(--pink);}
.brown {color: var(--brown);}

.orange {color: var(--orange);}
.yellow {color: var(--yellow);}
.green {color: var(--green);}
.purple {color: var(--purple);}
.grade {background-image: var(--grade);}

.site-color {color: var(--site-color);}

/*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-pink {background: var(--pink);}
.bg-yellow {background: var(--yellow);}

.site-color-opa {color: var(--site-color-opa);}

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

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


/*weight*/
.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*/
.under-white {border-bottom: 1px solid var(--opa-white05); padding: 0 0 10px;}
.under-white:hover {border-bottom: 1px solid transparent;}

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

/*flex*/
.flex {display: flex;}
.grid {display: grid;}
.column-2 {grid-template-columns: repeat(1,1fr) !important;}
.column-3 {grid-template-columns: repeat(2,1fr) !important;}
.column-4 {grid-template-columns: repeat(2,1fr) !important;}
.column-5 {grid-template-columns: repeat(5,1fr) !important;}


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

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

/*padding*/
.pa-10 {padding: clamp(5px,3vw,10px);}
.pa-20 {padding: clamp(10px,3vw,20px);}
.pa-30 {padding: clamp(15px,3vw,30px);}
.pa-50 {padding: clamp(25px,3vw,50px); box-sizing: border-box;}
.pa-80 {padding: clamp(40px,3vw,80px); box-sizing: border-box;}
.pa-100 {padding:clamp(50px,3vw,100px);}

.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-30 {padding: 0 0 15px;}
.pb-50 {padding: 0 0 25px;}
.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-5 {margin-bottom: clamp(5px, 1vw, 5px);}
.mb-10 {margin-bottom: clamp(5px, 1vw, 10px);}
.mb-20 {margin-bottom: clamp(10px, 3vw, 20px);}
.mb-30 {margin-bottom: clamp(15px, 3vw, 30px);}
.mb-50 {margin-bottom: clamp(20px, 3vw, 50px);}
.mb-80 {margin-bottom: clamp(40px, 5vw, 80px);}
.mb-150 {margin-bottom:clamp(70px, 8vw, 150px);}	
.mb-200 {margin-bottom:clamp(100px, 8vw, 200px);}	

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

/*category*/
.center {display: block; margin: auto; text-align: center;}

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

html {
	scroll-behavior: smooth;	
}

body {
	font-family: var(--gs);
	font-weight: var(--wght-400);
	overflow-x: hidden;
	font-size: var(--font-h6);
}

body.on:before {
	content:"";
	background: var(--opa-black05);
	position: fixed;
	width: var(--flex-100);
	height: var(--flex-100);
	top: 0;
	z-index: 10;
}

#wrapper {
    overflow: hidden;
}

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

a {color: var(--blue);}
span a{text-decoration: none;}
a:hover {text-decoration: none;}
.none {text-decoration: none;}

.max-content {max-width: max-content;}

.item-center {display: flex;  align-items: center;}
.between {justify-content: space-between;}

.pos-re {position: relative; z-index:2;}

/*++++++++++++++
inview
+++++++++++++++*/

.up {
    opacity: 0;
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
    transition: 1s;
    transition-delay: .3s
}

.up2 {
    opacity: 0;
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
    transition: 1.2s;
    transition-delay: .4s
}

.up3 {
    opacity: 0;
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
    transition: 1.4s;
    transition-delay: .5s
}

.mv-up {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transform: translate(0,0)
}
/*++++++++++++++
tnav
+++++++++++++++*/
.tnav {
	position: relative;
	margin: 0 auto 50px;
	z-index: 1;
    background: var(--site-color-base);
    padding:60px 0 10rem;
}
.tnav ol{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	/*box-shadow: 0px 20px 40px rgba(44, 23, 3, 0.1);*/
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
.tnav li {
	background: var(--white);
	border-right: 1px solid var(--lightgray);
	border-bottom: 1px solid var(--lightgray);
}
.tnav li figure {
	max-width: 100px;
	margin: 0 auto 5px;
	height: 100px;
	display: flex;
	z-index: 10;
	padding: 0;
	border-radius:100px;
	position: relative;
	box-sizing: border-box;
}
.tnav li figure svg{
	fill: var(--sub-color);
	position: relative;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}
.tnav li a {
	color:inherit;
	text-decoration:none;
	padding: 15px 5px;
	display:block;
	transition: .9s;
	transform:scale(1);
	position: relative;
	overflow: hidden;
}

.tnav li a figure:after {
	content:"";
	transition: .9s;
	background:var(--site-color-opa);
	border-radius:100px;
	position:absolute;
	top:0;
	bottom:0;
	width: 100px;
	height: 100px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
}
.tnav li a figure:before {
	content:"";
	transform:scale(1);
	position: absolute;
	transition: .5s;
	top: 0;
	left:0;
	width: 130px;
	height: 130px;
	z-index: -1;
	border-radius: 100px;
}

.tnav li a .engs {
	color: var(--sub-color);
	transition:.5s;
}


.tnav_text * {
	position: relative;
	z-index: 10;
	transition:.5s;
	letter-spacing: -1px;
}

@media screen and (min-width: 1024px) {
.tnav_text * {
	letter-spacing: 0;
}	
/*+++++++++++++++
root
++++++++++++++++*/

.column-2 {grid-template-columns: repeat(2,1fr) !important;}
.column-3 {grid-template-columns: repeat(3,1fr) !important;}
.column-4 {grid-template-columns: repeat(4,1fr) !important;}
.column-5 {grid-template-columns: repeat(5,1fr) !important;}

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