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

:root {
--width-max:100%;
--width-full: clamp(480px, 90vw, 100vw);
--large-inner: clamp(360px, 90vw, 1600px);
--medium-inner:clamp(360px, 90vw, 1200px);
--small-inner:clamp(360px, 90vw, 1000px);
/*font-family*/
--gs:"Zen Kaku Gothic New", sans-serif;
--maru:"Zen Maru Gothic", sans-serif;
--en:"Albert Sans", sans-serif;
/*color*/
--red:#c62828;
--white:#fff;
--black:#222;
--blue:#77a3ba;
--orange:#F39700;
--gray:#e1e1e1;
--green:#6eb82b;
--darkgray:#333;
--lightgray:#f2f2f2;
--darkblue:#0b77dc;
--aqua:#0071bc;
--pink:#e75959;
--brown:#754c24;
--beige:#f7f8ec;
--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:rgba(255,255,255,0.9);

--opa-black01:rgba(0,0,0,0.08);
--opa-black02:rgba(0,0,0,0.2);
--opa-black05:rgba(0,0,0,0.5);
--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*/beiub
--font-mc:clamp(0.75rem, 3vw, 0.8rem);
--font-em:clamp(0.85rem, 3vw, 1rem);
--font-h6:clamp(0.95rem, 3vw, 1.2rem);
--font-h5:clamp(1.2rem, 3vw, 1.4rem);
--font-h4:clamp(1.3rem, 3vw, 1.5rem);
--font-h3:clamp(1.3rem, 3vw, 2.0rem);
--font-h2:clamp(1.8rem, 3vw, 2.8rem);
--font-h1:clamp(3rem, 4vw, 5rem);

/*flex-basis*/
--flex-10:10%;
--flex-15:15%;	
--flex-20:20%;
--flex-25:25%;
--flex-30:30%;
--flex-33:33%;	
--flex-35:35%;
--flex-40:40%;
--flex-45:45%;
--flex-50:50%;
--flex-55:55%;
--flex-60:60%;
--flex-65:65%;
--flex-70:70%;
--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:1.8;
--lh-mc:1.1;	

/*font-weight*/
--wght-100:100;
--wght-300:300;
--wght-500:500;
--wght-600:600;
--wght-700:700;		
--wght-800:800;	
--wght-900:900;	
}

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

/*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-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-blue {background: var(--blue) !important;}

.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);}

/*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-400 {font-weight: 400;}
.wght-500 {font-weight: 500;}
.wght-600 {font-weight: 600;}
.wght-700 {font-weight: 700;}
.wght-800 {font-weight: 800;}
.wght-900 {font-weight: 900;}

/*text-decoration*/
.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: 15px;}
.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-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-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);}

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

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

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

.view-up1 {
opacity: 0;
transform: translate(0, 10px);
 -webkit-transform: translate(0, 10px);	
transition: .7s;
transition-delay:0.7s;
}

.view-up2 {
opacity: 0;
transform: translate(0, 10px);
-webkit-transform: translate(0, 10px);		
transition: .8s;
transition-delay:0.8s;	
}

.mv-up {
opacity: 1.0;
transform: translate(0, 0px);	
}