@charset "utf-8";

@import url('html5reset-1.6.1.css');
@media print{
  body::after{ display:none; }
  #loader-bg,#t-mv:before{ display:none; }
}

:root {
  --head-height:6.5rem;
  --color-red: #d00e28;
  --color-green: #00a34e;
  --color-green2: #7ac177;
  --color-base: #04CDFC;
  --color-base2: #00b2de;
  --color-bg1:#e9ebee;
  --color-bg2:#838a93;
  --color-bg3:#ebe8e5;
  --color-imp: #b76771;

  --ease-out:cubic-bezier(0.33, 1, 0.68, 1);

  --hover-brightness:brightness(1.1) saturate(130%);
  --hover-brightness2:brightness(1.3) saturate(130%);
  --hover-brightness3:brightness(1.02) opacity(85%) saturate(140%);
  --tra1:.5s cubic-bezier(0.33, 1, 0.68, 1);
  --tra2:.8s cubic-bezier(0.33, 1, 0.68, 1);
  --tra-ani:cubic-bezier(0.34, 1.56, 0.64, 1);

  --f-go:"Jost", "Zen Kaku Gothic New", sans-serif;
  --en-go:"Jost", sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gnav-extra-gap: 0px;
}

.f-min{ font-family: var(--f-min); }
.f-min2{ font-family: var(--f-min2); }
.en-min{ font-family: var(--en-min); } 
.en-go{ font-family: var(--en-go); }

@keyframes fadeIn {
    0% { opacity:0; transform:translateY(2rem); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1; }
}
@keyframes fade2 {
  0% {opacity: 0; transform: translateY(8vh);}
  100% {opacity: 1;  transform: translateY(0); }
}
@keyframes tit {
  0% {opacity: 0; transform: scale(1.6);}
  100% {opacity: 1;  transform: scale(1); }
}
@keyframes scale {
  0% {opacity: 0; transform: scale(1.2);}
  100% {opacity: 1;  transform: scale(1); }
}
@keyframes scale-back {
  0% {opacity: 1;  transform: scale(1); }
  100% {opacity: 0; transform: scale(1.2);}
}
@keyframes scale1 {
  0% {opacity: 0; transform: scale(.3); filter: blur(3rem);}
  100% {opacity: 1;  transform: scale(1); filter: blur(0); }
}
@keyframes scale3 {
  0% {opacity: 0; transform: scale(1.4) rotate(-45deg);}
  100% {opacity: 1;  transform: scale(1) rotate(-4deg); }
}
@keyframes scale4 {
  0% { transform: scale(1.5);}
  100% { transform: scale(1); }
}
@keyframes scale-bg1 {
  0% {opacity: 0; transform: scale(.2); }
  100% {opacity: 1;  transform: scale(1); }
}
@keyframes scale-bg2 {
  0% {opacity: 1;  transform: scale(1); }
  100% {opacity: 0; transform: scale(.2);}
}
@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-70px);
  }
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-70px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
@keyframes leftAnime{
  from {
    opacity: 0;
  transform: translateX(-70px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}
@keyframes line{
  0% { left: 0; width: 100%;}
  45% { left: 100%; width: 0;}
  55% { left: 0; width: 0;}
  100% { left: 0; width: 100%; }
}
@keyframes line2{
  0% { right: 0; width: 2rem;}
  45% { right: 0; width: 0;}
  55% { right: 2rem; width: 0;}
  100% { right: 0; width: 2rem; }
}
@keyframes insetWipeIn {
    0% {
        clip-path: inset(0 0 0 100%)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}
@keyframes insetWipeOut {
    0% {
        clip-path: inset(0 0 0 0)
    }
    to {
        clip-path: inset(0 0 0 100%)
    }
}
@keyframes wid1 {
  0% {width: 0;}
  100% {width: 100%; }
}
@keyframes wid2 {
  0% {width: 100%;}
  100% {width: 0; }
}
@keyframes height {
  0% {height: 0; opacity: 0;}
  100% {height: 100lvh; opacity:1; }
}
@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}



*{ box-sizing: border-box; }
html{ height: 100%; }
body{
  font-family: var(--f-go);
  font-weight: 400;
  color: #000;
  line-height: 1.7;
  overflow: visible;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: subpixel-antialiased;
  background: #F4FBFE; 
  background-image: linear-gradient(90deg, #F4FBFE 25%, #D7E8F7);
  word-wrap: break-word;
  min-height: 100lvh;
  text-align: left;
  text-justify: inter-ideograph;
}
body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:#fff; 
      z-index: 9999; 
      pointer-events: none; 
      opacity: 0; 
      transition: 1s .2s;
      z-index: 1000;
}
body.fadeout::after {
      opacity: 1;
      transition: opacity .4s ease;
}
body.stop{ overflow-y:hidden; }

#loader-bg{
  position: fixed;
  z-index: 10;
  background-color: #fff;
  height: 100lvh;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


img{
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  line-height: 0;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}

a{
  text-decoration: none;
  color: var(--color-base);
}
a:hover{
  text-decoration: underline;
}

/*
header.UpMove{
  animation: UpAnime .3s forwards;
  pointer-events: none;
}
header.DownMove{
  animation: DownAnime .3s .3s forwards;
  opacity: 0; transform: translateY(-70px);
}*/


#wrap{ transition: .5s; max-width: 1920px; margin: 0 auto; position: relative; z-index: 1; width: 100%; overflow-x:hidden;}
#wrap.blur{ filter:blur(6px); pointer-events:none; }

.ef{ opacity:0; }
.ef.play{ animation: fade2 .5s forwards; }

header{
  position: relative;
  z-index: 10;
  width: 100%;
}
#rechead{ padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; /*background-image: linear-gradient(90deg, #F4FBFE 25%, #D7E8F7);*/ position:relative; z-index:10; }
#rechead h1 a{ display: flex; align-items: center; justify-content:center; gap:1.5rem; font-weight:600; letter-spacing:0.05em; }
header h1 a{ transition: .5s; color:var(--color-base); }
header h1 a:hover{ opacity:.7; text-decoration:none; }

body > a.entry{ position: fixed; right: calc(2rem + 80px); top: 1.2rem; padding:0 2rem; height: 51px; line-height: 51px; z-index: 15; }
a.entry{ position: relative; width:14rem; padding:1.5rem 2rem; background: #043CA3; background-image: linear-gradient(90deg, #043CA3, var(--color-base)); display:block; text-align: center; font-weight: bold; color:#fff !important; border-radius:100px; transition:.5s; font-size:120%; letter-spacing:0.1em; }
a.entry:hover{ filter:saturate(160%) brightness(1.1); text-decoration:none; }
a.entry:after{ content:""; position:absolute; transform: translateY(-50%); top:50%; right:.5rem; width:2rem; height:2rem; background:url(../img/win.svg) no-repeat center center; }


header #nav{ display: inline-block; position: absolute;  background-color:#F4FBFE; padding:.5rem 2rem 2rem; border-radius:0 0 1.5rem 0; z-index:10; }
header #nav:before,header #nav:after{ content: ""; position:absolute; background:url(../img/radius.svg) no-repeat center center; right:-2rem; top:0; width:2rem; height:2rem; background-size:contain; }
header #nav:after{ right:auto; top:auto; left: 0; bottom:-2rem; }
header #nav > ul{ }
header #nav > ul > li{  }
header #nav > ul > li > a{ padding: .8em; line-height:1.5; color:#000; display:block; font-weight:500; transition:var(--tra1); }
header #nav > ul > li > a:hover{ transform:translateX(.5em); color:var(--color-base); }
header #nav > ul > li:hover ul{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
header #nav > ul > li.contact a:hover{ filter:saturate(140%) brightness(1.05); }
header #nav > ul > li.contact a b{ position:relative; display:flex; justify-content: center; align-items: center; gap:.4em; }
header #nav > ul > li.contact a b:before{ content:""; background:url(../img/icon_mail.png) center center no-repeat; background-size:contain;  width:1em; height:1em; }

header #nav > ul ul{ position:absolute; left:0; top:6em; width:17em; font-size:85%; background-color:rgba(255, 255, 255, .8); padding:1em 1.5em; visibility:hidden; opacity:0; transform:translateY(1rem); transition:var(--tra1); pointer-events:none;  }
header #nav > ul ul li{ margin:0; }
header #nav > ul ul a{ color:#000; transition: .3s; display:block; padding:.4em 0; }
header #nav > ul ul a:hover{ color: var(--color-base); }
header #nav a:hover{ text-decoration:none; }


.menu-trigger,
.menu-trigger span {
  display: block;
  transition: all .3s;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;  right: 2rem; top: 1.2rem;
  width: 70px;
  height: 51px;
  z-index: 100;
  background-color: #000;
  border-radius: 100px;
  z-index: 20;
}
.menu-trigger:hover { background:var(--color-base); }
.menu-trigger.active {  }
.menu-trigger :before{}
.menu-trigger span {
  position: absolute;
  left: 21px;
  width: 28px;
  height: 1px;
  background-color: #fff;
}
header.bk .menu-trigger span{ background-color: #fff; }
.menu-trigger span:nth-of-type(1) {
  top: 20px;
}
.menu-trigger span:nth-of-type(2) {
  top: 25px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 20px;
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(5px) rotate(-32deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-5px) rotate(32deg);
}

@media (min-width: 811px){
	#gnav{
		position: fixed;
		right: 1.2rem;
		top: 10px;
		width: calc(100vw - 2.4rem);
		max-height: calc(100svh - 2.4rem);
		max-width: 960px;
		background: #fff;
		border-radius: 2rem;
		padding: 4rem 5rem 5rem;
		background-size: cover;
		animation: insetWipeOut .3s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both;
		z-index: 19;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#gnav-in{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		height: 90%;
		min-height: 0;
	}
}

@media (max-width: 810px){
	:root{
		--gnav-extra-gap: calc(env(safe-area-inset-bottom, 0px) + 2rem);
	}
	#gnav{
		position: fixed;
		top: max(8px, var(--safe-top));
		bottom: calc(var(--safe-bottom) + 8px);
		right: 1rem;
		left: auto;
		width: calc(100vw - 2rem);
		max-width: 900px;
		background: #fff;
		border-radius: 1.7rem;
		padding: 3.6rem 3rem 4rem;
		background-size: cover;
		animation: insetWipeOut .3s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both;
		z-index: 19;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
	}
	#gnav-in{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		height: auto;
		min-height: 0;
	}
	#gnav-in::after{
		content:"";
		display:block;
		width:100%;
		height: var(--gnav-extra-gap);
		pointer-events:none;
	}
}

#gnav.active #gnav-in{
	animation: fadeIn .8s .3s cubic-bezier(.19, 1, .22, 1) 1 normal both;
}
#gnav-bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100dvh;
	background: #F4FBFE;
	background-image: linear-gradient(90deg, #F4FBFE 25%, #D7E8F7);
	opacity: .7;
	z-index: 18;
	display: none;
}


#gnav.active{  animation: insetWipeIn .6s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both; }
#gnav-in > p{ width:100%; margin-bottom:.5rem; }
#gnav-in > p a{ transition: .5s; font-weight:600; letter-spacing:0.05em; font-size:120%; }
#gnav-in > p a:hover{ color:var(--color-base); }
#gnav-in > div{ width:100%; }
#gnav-in > h3{ width:46%; }
#gnav-in > div ul{ display:flex; gap:.5rem 1.5rem; flex-wrap:wrap; padding-bottom:.5rem; }
#gnav a{ color:#000; }
#gnav a:hover{ text-decoration:none;  }
#gnav h3{  }
#gnav h3 a{ position:relative; margin:1rem 0 .5rem; font-weight:600; border-top:1px solid #ddd; padding-top:1.5rem; display:block; transition:var(--tra1); }
#gnav h3 a:before{ content:""; position: absolute; width: 0; height:1px; top:-1px; left:0; background:var(--color-base); transition:var(--tra1); }
#gnav h3 a:hover{  color:var(--color-base); }
#gnav h3 a:hover span{ color:var(--color-base) }
#gnav h3 a:hover:before{ width:100%; }
#gnav h3 a b{ display:block; font-size:130%; font-weight:600; }
#gnav h3 span{ color:#aaa; transition:var(--tra1); }
#gnav ul li{ margin:.5rem; }
#gnav ul a{ display:inline-block; position:relative; }
#gnav ul a:before{ content:""; position: absolute; width: 0; height:1px; bottom: 0; left:0; background:#000; transition:var(--tra1); }
#gnav ul a:hover:before{ width:100%; }
#gnav a.entry{ margin-top:2.5rem; width:100%; text-align:left; padding: 1.2rem 2rem; }
#gnav a.entry span{ letter-spacing:0; }

div#output {
        position: fixed;
        z-index: 9999;
        background-color: white;
}



footer { background-color: #313131; color: #fff; padding:5rem 0 0; position:relative; z-index:1; font-size:90%; }
footer a{ color:#fff; }
footer p{ line-height:1.8; }
footer a:hover{ text-decoration:none; }
.f1{ max-width:1300px; width:90%; margin: 0 auto; display:flex; justify-content:space-between; }
.f1 .f-left{ width:40%; }
.f1 .f-right{ width:55%; }
.f1 .logo{ margin-bottom:3rem;  }
.f1 .logo img{ filter:brightness(2); }
.f1 .logo a{ display:flex; align-items:center; gap:1.5rem; transition: .5s; color:var(--color-base); font-weight:600; letter-spacing:0.05em; }
.footbtn{ background-color:#fff; border-radius:200px; padding:1rem 3rem 1rem 2rem; color:#313131; font-weight:600; position:relative; overflow:hidden; transition:.5s; }
.footbtn span{ position:relative; z-index:2; }
.footbtn:after{ content:""; position:absolute; transform: translateY(-50%); top:50%; right:1.3rem; width:2rem; height:2rem; background:url(../img/win.svg) no-repeat center center; filter: brightness(0); z-index:2; transition:.5s; } 
.footbtn:hover{ color:#fff; background-color:#043ca3; }
.footbtn:hover:after{ filter: brightness(1); }

.f1 .f-bnr li{ margin-bottom:1rem; }
a.catalog{ background: #7187ae; color:#fff; padding:.8em 2em; font-size:110%; border-radius:100px; display:block; transition:var(--tra1); width:100%; position:relative; text-align:left; text-decoration:none !important; }
a.catalog:hover{ filter:saturate(140%) brightness(1.05); }
a.catalog b{ position:relative; display:flex; align-items: center; gap:.4em; }
a.catalog b:before{ content:""; background:url(../img/icon_cat.svg) center center no-repeat; background-size:contain;  width:2.4em; height:2.4em; }
a.catalog:after{ content:""; position:absolute; top:50%; right:0; width:2rem; height:1px; background:#fff; }
a.catalog:hover:after{ animation:line2 .6s forwards; }
.flink a{ display:inline-block; margin-right:1rem; display:inline-block; font-size:85%; }
.flink a:hover{ text-decoration:underline; }

.f-menu{ display:flex; flex-wrap:wrap; justify-content: right; gap:7%; margin-bottom:2em;  }
.f-menu h3{ font-size: 100%; margin-bottom:.8em; font-weight:600; }
.f-menu h3 b{ display:block; font-size: 130%; font-weight:600; }
.f-menu a{ position:relative; transition: all .3s cubic-bezier(0.33, 1, 0.68, 1); display:block; }
.f-menu a:hover{ color:var(--color-base); }

.f-menu ul li{ margin-bottom:.8em; position:relative; font-size:87%; opacity:0.9; padding-left:1.1em; }
.f-menu ul li:before{ content:""; width:.5em; height:1px; position:absolute; left:0; top:50%; background:#fff; }
.f-menu > div{ margin-bottom:2em;  }
.f-menu > div.wid{ flex:1.2; }
.f1 .en-go{ text-align:right; }
.f1 .en-go a{ display:inline-block; margin:0 .8em; }
.f2{ font-size:80%; padding: 2rem 1rem; margin-top:2em; background:#222; color:#ccc; text-align:center; }


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


#foot-entry{ padding:0 5%; }
#foot-entry-in{ max-width:1200px; margin:0 auto; display:flex; }
#foot-entry-in  .entry{ width:50%; border-radius:3rem 0 0 3rem; background-image: linear-gradient(-90deg, #043CA3, var(--color-base)); display:flex; align-items:center; padding:4rem; font-size:200%; font-weight:500; }
#foot-entry-in  .entry span{ font-size:50%; font-weight:400; letter-spacing:0; }
#foot-entry-in  a.entry::after { width: 2.5rem; height: 2.5rem; right: 3rem; background-size:cover; }

#foot-entry-in #job{ width:50%; border-radius:0 3rem 3rem 0; border:3px solid #043CA3; border-left-width:0; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:3rem 4rem; font-size:130%; }
#foot-entry-in #job h3{ font-weight:500; font-size:130%; color:#333; }
#foot-entry-in #job .linklist{}

.linklist li{ margin:1rem 0; }
.linklist a{ color:#043CA3; position:relative; padding-right:2.5rem; transition: .3s; }
.linklist a:hover{ transform: translateX(1rem); }
.linklist a::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100px;
  border: 1px solid #ccc;
  color: #aaa;
  height: 2rem;
  width: 2rem;
  text-align: center;
  box-sizing: border-box;
  font-size: 90%;
  transition: var(--tra1);
}
.linklist a:hover:after{ background-color:var(--color-base); border-color:var(--color-base); color:#fff; }


#directory{ position:relative; z-index:2; font-size:75%; max-width:1280px; margin: 0 auto 0; padding-top: var(--head-height) ;  width: 95%; color: #777;}
#directory a{ color:#777; transition:.3s; }
#directory a:hover{ color:var(--color-base); text-decoration:none; }
#directory > ul{ display:flex; padding:1em 0; overflow-x:auto; gap:.8em; word-break: keep-all;  white-space: nowrap; }
#directory > ul li{ position:relative; }
#directory > ul li:not(:last-child):after{ content:"―"; margin-left:.8em;  }
.kv-area:not(.type1) #directory,.kv-area:not(.type1) #directory a,.kv-area:not(.type1) #directory a:hover{ color:#fff; }


@media screen and (max-width: 810px) {
  #wrap{ overflow-x:hidden; }
  

}

/* contactエリア */
#contact-aside{ position:relative; z-index:1; background:url(../img/contact_bg.jpg) no-repeat center center; background-size: cover; padding:6rem 0; margin:0 auto; }
#contact-aside .inner{ display:flex; align-items:center; justify-content:space-between; color:#fff; max-width:1200px; width:90%; margin:0 auto; }
#contact-aside .tit h2{ font-size:300%; font-weight:600; letter-spacing:0.05em; }
#contact-aside .tit p{ font-size:90%; margin-top:.2rem; }
#contact-aside a.contact{ text-align:center; }
#contact-aside a.contact{ background: #043ca3; background-image: linear-gradient(90deg, var(--color-base), #029ced); color:#fff; padding:1.4em 2.5em; font-size:110%; border-radius:100px; display:block; transition:var(--tra1); text-shadow:none; }
#contact-aside a.contact:hover{ filter:saturate(140%) brightness(1.05); text-decoration:none; }
#contact-aside a.contact b{ position:relative; display:flex; justify-content: center; align-items: center; gap:.4em; }
#contact-aside a.contact b:before{ content:""; background:url(../img/icon_mail.png) center center no-repeat; background-size:contain;  width:1em; height:1em; }
.nobtn #contact-aside .inner { max-width:900px; }
.nobtn #contact-aside a.contact{ display:none; }
.nobtn #contact-aside .txt { width:60% }
#contact-aside .txt{ width:40%; }
#contact-aside .txt h3{ padding-bottom:.5em; margin-bottom: 1em; border-bottom:1px solid #fff; }
#contact-aside .txt h3 span{ font-weight:400; font-size:80%; }
#contact-aside .txt .telarea{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
#contact-aside .txt .telarea p{ font-size:200%; line-height:1.2; }
#contact-aside .txt .telarea p span{ font-size:40%; display:block; }

#contact-aside h2 span{ font-size:110%; color: #777777; display:block; margin:0 0 2em; font-weight:400; }
#contact-aside a.more{ width:14em; }
#contact-aside + .sns-area{ background: #fff; }





.btn-area{ display:flex; justify-content:center; position: relative; align-items:center; margin-top:2em; gap:1.5em; }
.btn-area a.more.right{ position:absolute; right:0; padding:1em 3em 1em 2em; background-color: #fff; font-size:120%;  border:1px solid #666; transition:var(--tra1); }
.btn-area a.more.right:before{ display:none; }
.btn-area a.more.right:hover::after { right:.5em; }
.btn-area a.more.right:hover{ background-color:#333; color:#fff; border-color:#333; }
.btn-area2{ margin:0 auto; display:flex; flex-wrap:wrap; }
.btn-area2 a{ margin:1em auto; }

#pro-tit .btn-area{ flex-wrap:wrap; justify-content:left; }
#pro-tit .btn-area a{ width:calc(50% - .8em); }


/* モーダル */
.iziModal-overlay{ background:rgba(0, 0, 0, 0.5) !important;  }
.iziModal { max-width:1200px !important; width:90%; max-height:90vh; }
.icon-close{ width:4em; height:4em; background-color:var(--color-bg2); position:fixed; right:-10px; top:-10px; transition:.4s; z-index:10; border:none; }
.icon-close:before,.icon-close:after{ content:""; height:2px; width:2em; position:absolute; left:50%; top:50%; background-color:#fff; display:block; } 
.icon-close:before{ transform:translate(-50%,-50%) rotate(45deg); }
.icon-close:after{ transform:translate(-50%,-50%) rotate(-45deg); }
.icon-close:hover{ cursor:pointer; background-color:#222; } 
.modal-in{ margin: 5%; font-size:110%; background-color:#fff; }
.modal-in h2.t1 b{ font-size: 220%; }
.modal-tit{ display:flex; align-items:center; gap:1em; }
.modal-tit h2.t1{ margin-bottom:1em; }
.modal-tit h3{ margin-bottom:1em; background:var(--color-bg3); padding:.6em 1em; font-weight:400; font-size:110%; display:flex; gap:1em; align-items:center; width:100%; }
.modal-tit h3 b{ font-family:var(--f-min); font-weight:400; font-size:180%; }
.modal-tit h3 b span{ font-size:80%; }
.modal-flex{ display:flex; justify-content:space-between; }
.modal-flex > div{ width:54%; }
.modal-flex > div.phslide{ width:45%; }
.modal-flex > div.ph{ width:29%; }
.modal-flex > div.ph + div{ width:70%; }
.modal-flex .table-spec{  }
.modal-in .splide__pagination__page { background: var(--color-bg3); opacity:1; }
.modal-in .splide__pagination__page.is-active{ border:2px solid #d00e28; background:#fff; }
.modal-in  .splide__pagination li { margin:0 .1em; }

.store-list{ display:flex; margin-top:2em; flex-wrap:wrap; }
.store-list:has(> :nth-child(5)){  }
.store-list li{ width:33%; }
.store-list li a{ display:block; transition:.3s; }
.store-list li a:hover{ opacity:.7; }


 /* 汎用 */
#main-tit{ display:flex; position:relative; align-items: center; width:90%; max-width:1250px; margin: 10em auto 0;}
#main-tit h1{ position:relative; width: 60%; font-family: var(--f-min2); color:#333; padding-bottom: 1.5em; margin-bottom:1.5em; }
#main-tit h1:before{ content:""; width:1px; height:100%; letter-spacing:0.05em; position:absolute; left:-2em; top:0; background-color:#333; }
#main-tit h1 b{ position: relative; font-weight:300; font-size:300%; line-height:1.2; display:block; margin-bottom:.5em; padding:.4em 0; }
#main-tit h1 b:before{ content:""; width:calc(100% + 3em); height:1px; position:absolute; right:0; bottom:0; background-color:#ccc;}
#main-tit h1 span{ font-weight:400; font-size: 120%; display:block; line-height:1.4; font-family:var(--f-go); color:#666; }
#main-tit a.link-btn{ position:absolute; right:0; font-size:130%; width:20em; }


.fig{ text-align:center; margin:3em auto; }
.fig img{ margin:0 auto; }

.cont-section { background: #fff; padding: 15em 5%;}
.cont-section.thin-style { padding: 7.5em 5%; }
.cont-section.thin-style2 { padding: 4em 5%; }
.cont-section.bg {background: var(--color-bg1);}
.cont-section:not(.bg) + footer{ margin-top:5em; }
.section-inner,.cont-inner {max-width: 1250px;margin: auto}
.section-inner.wide,.cont-inner.wide { max-width: 1350px;}
.section-inner.min,.cont-inner.min { max-width: 1000px;}
.cont-inner{ margin:4em auto; }
.cont-inner.wid2 { max-width: 1000px; }
.cont-inner:first-child{ margin-top:0; }
.cont-inner > p{ font-size:130%; margin-bottom:1em; }
.cont-inner ol.kakko{ font-size:130%; margin-bottom:1em; }
.modal-in .cont-inner{ font-size:80%; }


/* news */
#news-list ul{ font-size:100%; border-top:1px solid #ddd; }
#news-list ul li{ border-bottom:1px solid #ddd; }
#news-list ul li a{ display:flex; padding:2em 0; gap: 2em; transition:.3s; position:relative; align-items:center; }
#news-list ul li a .img{ max-width:200px; width:23%;  }
#news-list ul li a .img > div{ width:100%;  padding-top: 56.25%; overflow: hidden; position: relative; } 
#news-list ul li a .txt{ position:relative; width:100%; display: flex; gap:1rem; }
#news-list ul li a .img img{ position: absolute; left: 0;top: 50%; transform: translateY(-50%); width: 100%; }
#news-list ul li a .txt:before{ content:""; position:absolute; right:.8em; top:50%; transition:.3s; transform:translateY(-50%); width:12px; height:12px; background:url(../img/arr2.svg) no-repeat center center; }
#news-list ul li a .txt p{ }
#news-list ul li a:after{ content:""; bottom:-1px; left: 0; width:0; height:1px; background:var(--color-base); position:absolute; transition:.4s; }
#news-list ul li a time{ width:14em; display: flex; justify-content: space-between; font-weight:300; color:#000; }
#news-list ul li a time:after{ text-align:center; width:9em; font-size: 80%; border:1px solid #102565; margin-left:1em; display:inline-block; font-weight: 400; line-height:1; padding:.5em 0 .3em; color:#102565; }
#news-list ul li.n-ctg1 a time:after{ content:"お知らせ"; }
#news-list ul li.n-ctg2 a time:after{ content:"イベント"; }
#news-list ul li.n-ctg3 a time:after{ content:"トピック"; }
#news-list ul li a:hover{ text-decoration:none; color:var(--color-base2); }
#news-list ul li a:hover p:before{ right:-.4em; color: #d00e28; }
#news-list ul li a:hover:after{ width:100%; }
#news-list ul li a:hover .txt:before{ right:0; }


/* サブメニュー */
.sub-menu {
  display: flex;
  justify-content: center;
  padding: 1.5em 0 1.75em;
  border-bottom: 1px solid #cccccc;
  background-color: #fff;
}
.sub-menu dl {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub-menu dl dt {
  font-family: var(--font-EB);
  font-size: 175%;
  color: #222;
  margin-right: 1.5em;
  line-height: 1.5;
}
.sub-menu dl dt a{ color: #222; transition:.4s; }
.sub-menu dl dt a:hover{ color: #999; text-decoration:none; }
.sub-menu dl dd {
  display: flex;
  align-items: flex-end;
}

.sub-menu dl dd .other {
  padding-left: 1.5em;
  position: relative;
  margin-left: 1.5em;
}
.sub-menu dl dd .other:before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  background: #ccc;
  left: 0;
  bottom: 0;
}
.sub-menu dl dd ul {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .7em 2em;
}
.sub-menu dl dd ul li {
  font-size: 113%;
}
.sub-menu dl dd ul li a {
  display: inline-block;
  color: #333;
  text-decoration: none;
  position: relative;
}
.sub-menu dl dd ul li a:before { content:""; width:0; height:1px; background-color:#666; position:absolute; left:50%; bottom:0; transition:var(--tra1); }
.sub-menu dl dd ul li.current a {
  font-weight: bold;
}
.sub-menu dl dd ul li a:hover:before,
.sub-menu dl dd ul li.current a:before { width:100%; left:0; }
.sub-menu dl dd ul li.current a:before{ background-color:var(--color-red); }
.sub-menu dl dd p {
  font-family: 'Roboto Condensed';
  font-size: 96%;
  font-weight: 500;
  color: #aaa;
}
.foot-btn-wrap .squarebtn {
  background: #838a93;
  width: 25em;
  height: 3.75em;
  margin: 5em auto 0;
  font-size: 138%;
}

.btns-wrap {
  display: flex;
  justify-content: center;
}
.squarebtn {
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #fff;
  padding: 1em;
  position: relative;
  font-family: var(--font-mincho);
  transition: .4s;
}
.squarebtn.size2 { width:20em; }
a.squarebtn:before{ content: ""; position:absolute; right: 1em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); filter:brightness(100);  }
a.squarebtn.left:before{right: auto;left: 1em;background:url(../img/arr2.svg) no-repeat center center;transform: rotate(-180deg);}
a.squarebtn:hover{text-decoration:none; background-color: #000;}
a.squarebtn:hover:before{ right:0.4em; }
a.squarebtn.left:hover:before{right: auto;left: 0.4em;}

a.view{ width:18em; padding:1em 2em; position:relative; display:block; margin:0 auto; color:#000; font-weight:700; border-radius:100px; transition:.6s; border:3px solid #000; text-align:center; }
a.view:hover{ background: rgba(255, 255, 255, .9); text-decoration:none; }
a.view:after{ content:""; position:absolute; top:50%; right:0; width:2rem; height:1px; background:#000; }
a.view:hover:after{ animation:line2 .6s forwards; }
a.view.wh{ color:#fff; border-color:#fff; }
a.view.wh:after{ background:#fff; }
a.view.wh:hover{ background: rgba(0, 0, 0, .5); }

.link-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #838a93;
  color: #fff;
  padding: 1em;
  position: relative;
  font-family: var(--f-min);
  font-size: 140%;
  width: 30em;
  max-width: 100%;
  transition: .3s;
}
.link-btn.big{ padding:1.3em 1em; letter-spacing: 0.05em; font-size: 150%; }
.link-btn:before{ content: ""; position:absolute; right: 1em; top:50%; transform: translateY(-50%); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); filter:brightness(100); }
.link-btn:hover{text-decoration:none; background-color: #333;}
.link-btn:hover:before{ right:0.4em; }
#pro-text #pro-tit .txt .btn-area .link-btn{ font-size:130%; }
.link-btn.col1{ background-color:#8d7b62; }
.link-btn.col2{ background-color:#579e54; }
.link-btn.imp{ background-color:var(--color-imp); }
.link-btn.col1:hover,.link-btn.col2:hover,.link-btn.imp:hover{ filter:saturate(130%) brightness(1.1); }
.link-btn.col1:before,.link-btn.col2:before,.link-btn.col3:before{ background-image:url(../img/arr3.svg); width:26px; height:26px; right:.6em;}



.img-link{ display:flex; align-items:center; gap:3em; margin:0 auto; font-size: 120%; max-width:1000px; background-color:var(--color-bg2); color:#fff; transition: .6s cubic-bezier(0.33, 1, 0.68, 1); }
.img-link .img{ width:40%; max-width:450px; overflow:hidden; }
.img-link .img img{ transition:.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
.img-link .text{ width:60%; position:relative; padding-right:3em; }
.img-link .text h3{ font-family: var(--f-min); font-weight:400; font-size:200%; margin-bottom: .3em; line-height: 1.4;}
.img-link .text h3 span{ display:block; font-size:80%; line-height: 1.4; }
.img-link .text p{ opacity:0.8; }
.img-link .text:after{ content: ""; position:absolute; right: 1.5em; top:calc(50% - 6px); width:10px; height:10px; background:url(../img/arr2.svg) no-repeat center center; background-size: contain; transition: .6s cubic-bezier(0.33, 1, 0.68, 1); filter:brightness(100); }
.img-link:hover{ text-decoration:none; background-color:#000; }
.img-link:hover .text:after{ right:0.7em; }
.img-link:hover .img img{ transform:scale(1.1); }

a.win{ position:relative; }
a.win:before{ content: ""; position:absolute; right: 10px; top:10px; width:15px; height:20px; background:url(../img/icon_newwin.svg) no-repeat center center; background-size:contain; }



a.more{ display:block; max-width:17em; letter-spacing: 0.05em; position:relative; text-align: left; padding: 1em 0; font-size: 120%;}
a.more:hover{ text-decoration: none; }
a.more:before{ content: ""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#888; }
a.more:after{ content: ""; position:absolute; right: 1em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); }
a.more:hover:before{ animation: line .6s forwards; }
a.more:hover:after{ right:0; }

a.linkbtn2{ display:block; border:1px solid #fff; background-color:rgba(0, 0, 0, .3); text-align:center; padding:1em 2em; position:relative; border-radius:200px; color:#fff; margin:0 auto; width:90%; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); }
a.linkbtn2:before{ content: ""; position:absolute; right: 1em; top:calc(50% - 4px); width:8px; height:8px; background:url(../img/arr2.svg) no-repeat center center; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); filter:brightness(100); }
a.linkbtn2:hover{ text-decoration:none; background-color:rgba(0, 0, 0, .6);  }
a.linkbtn2:hover:before{ right:0.4em; }

.important{ display:flex; align-items:center; justify-content:space-between; padding: 2em 2em 2em 0; border:1px solid var(--color-imp); background-color:#fff; }
.important.bgno{ background:none; }
.important > h2{ width:20%; text-align:center; color:var(--color-imp); font-size:120%; }
.important > div{ width:80%; border-left:1px solid var(--color-imp); padding-left:3%; }
.section-inner .important{ width:90%; margin:0 auto; }
.important h3{ color:var(--color-imp); font-size:110%;  }
.modal .important > div { border:none; }

.important2{ border:1px solid var(--color-imp); background-color:#fff; padding:1.5em; width:80%; margin:0 auto; }
.important2 > h2{ background-color: var(--color-imp); color:#fff; font-size:120%; padding:.8em 1em; }
.important2 > div{ padding:1em 1em .3em; font-size:120%; }

.important3{ border:1px solid var(--color-imp); background-color:#fff; padding:2em; }
.important3 > h2{ color:var(--color-imp); font-size:120%; padding:0; }
.important3 > div{  font-size:120%; }

ol.kakko { list-style: none; counter-reset: number;}
ol.kakko > li { position: relative; padding-left: 2.5em; }
ol.kakko > li::before {counter-increment: number; content: '（' counter(number) '）'; position: absolute; left: 0; }




@media screen and (max-width: 810px) {

}


#ft-side{ background:#f5f5f5; padding:6em 0; margin-top:10em; }
#ft-side ul{ max-width:1340px; width: 90%; margin:0 auto; display:flex; justify-content:space-between; }
#ft-side ul li{ width:31%; background-color:#fff;  border-radius: .8em; box-shadow: 2px 10px 10px rgba(0, 0, 0, .1); border: 3px solid #fff; transition: .3s;}
#ft-side ul li a{ display:block; height:100%; font-size:110%; font-weight:400; padding:1.5em 2em 2em; }
#ft-side ul li h3{ padding:1em 0; font-size:140%; transition: .3s; color:#333; font-weight:500; }
#ft-side ul li h3:before{ content:""; background:no-repeat center center; background-size:contain; width:2.5em; height:2.5em; display:inline-block; margin-right:.8em; vertical-align:middle; }
#ft-side ul li.contact h3:before{ background-image:url(../img/icon_contact.svg); }
#ft-side ul li.corp h3:before{ background-image:url(../img/icon_corp.svg); }
#ft-side ul li.chat h3:before{ background-image:url(../img/icon_chat.svg); }
#ft-side ul li p{ text-align:left; }
#ft-side ul li:hover{ border-color:#f7062e; }
#ft-side ul li a:hover{ text-decoration:none; }
#ft-side ul li:hover a h3{ color:#f7062e; }


.newWin{ display: inline-block; width: 8px; height: 7px; border: 1px solid #595757; position:relative; top: -2px; margin: 0 5px; }
.newWin:before,.newWin:after{ content: "";  position:absolute; bottom: -4px; right: -4px; background-color: #595757; }
.newWin:before{ width: 1px; height: 7px; }
.newWin:after{ width: 8px; height: 1px; }
.newWin.wh{ border: 1px solid #fff; }
.newWin.wh:before,.newWin.wh:after{ background-color: #fff; }

.newWin2{ position:relative; display: block; }
.newWin2:before,.newWin2:after{ content: "";  position:absolute; width: 7px; height: 5px; right: 13px; top: 10px; border: 1px solid #595757; z-index: 2; }
.newWin2:before{  }
.newWin2:after{ right: 10px; top: 14px; border-width: 0 1px 1px 0;  }

a.alqha{ transition: all .4s cubic-bezier(0.33, 1, 0.68, 1); display: block; }
a.alqha:hover{ opacity:0.5; }

.btn-list{ display:flex; gap:3%; }
.btn-list li{ height:6em; width:48.5%; }
.btn-list li a{ display:flex; align-items: center; justify-content: center; text-align: center; border:1px solid #999; height:100%; width: 100%; color:#333; font-size:120%; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); }
.btn-list li a:hover{ text-decoration:none; background-color:#999; color:#fff; }
.btn-list li a > span{  }
.btn-list li a > span > span{ display:block; letter-spacing:0.1em; font-size:80%; }

.note{ font-size: 90%; color: #888;  }

ul.notes {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes li {
  list-style: none;
  font-size: 85%;
  line-height: 1.6;
  color: #777;
  margin-top: .3em;
}
ul.notes li span:first-child {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 0.2em;
}
ul.notes li span {
  display: table-cell;
  vertical-align: top;
}

ul.list{}
ul.list li{ padding:.2em 0 .2em 1em; position:relative; }
ul.list li:not(.end):before{content: ""; position: absolute; left: .2em; top: .9em; width: 4px; height: 4px; background-color: #666; border-radius: 2px; }
ul.list.bor li{ border-bottom:1px dotted #777; padding:.7em 0 .7em 1em; }
ul.list.bor li:before{ top: 1.4em; }
ul.list.flex2,ul.list.flex3{ display:flex; flex-wrap:wrap; gap:4%; }
ul.list.flex2 li{ width:48%; }
ul.list.flex3 li{ width:30.66%; }


#pagetop{ position: fixed; z-index: 11; right: -100px; bottom: 30px; transition: all .3s; opacity: 0.7; }
body.on #pagetop{ right: 30px;  }
#pagetop:hover{ transform:translate(0,-5px); opacity: 1; }

a[href^="tel:"]:hover { cursor: default; text-decoration: none; }


h2.tit1{ font-size:120%; position:relative; padding-left:.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.5;}
h2.tit1:before,h2.tit1:after{ content:""; position:absolute; left:0; width:4px; }
h2.tit1:before{ background-color:var(--color-base2); top:0; height:.8em; }
h2.tit1:after{ background-color:var(--color-base); top:calc(.8em + 1px); height:.6em; }
h2.tit1 span{ font-weight:300; font-size:70%; color:#555; }

h2.t1,h2.t2{ letter-spacing:0.05em; margin-bottom:2em; }
h2.t1 > span,h2.t2 > span{ font-family:  var(--en-go); color:#aaaaaa;  font-weight: 400; display: block;}
h2.t1 b,h2.t2 b{ font-family: var(--f-min); font-weight: 400; font-size: 280%; color: #333;}
h2.t1 b > span{ font-size:75%; display:inline; }
h2.t2 b{ font-size: 240%;}
h2.t2.type2{ border-bottom:1px solid #ccc; }
h2.t2.fs b{ font-size: 200%;}

h2.t3{ position: relative; padding-left: .8em; margin-bottom: .5em; font-family: var(--f-min); font-weight: 500; font-size: 180%; color: #333; }
h2.t3:before{content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background-color: var(--color-red); border-radius: 3px; }

h3.t1{ position: relative; margin-bottom: .5em; font-family: var(--f-min); font-weight: 500; font-size: 160%; color: #333; }
h3.t1.font1{ font-size:2rem; }
h3.t2 span{ display:inline-block; background-color:#666; color:#fff; font-size: 150%; padding:.4em 1em; margin-bottom:.5em; }

h3.t3{ position: relative; margin-bottom: .8em; padding-left: .5em; font-family: var(--f-min); font-weight: 500; font-size: 220%; color: #333; }
h3.t3:before{content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: var(--color-green2); }
h3.t3.col1:before{ background:#f5a100; }
h3.t3.col2:before{ background:var(--color-red); }


h3.bg{ font-family: var(--f-min2); font-weight: 500; font-size: 140%; margin-bottom:1em;  }
h3.bg.col1{ color: #579e54; }
h3.bg > b{ color:#fff; font-size:160%; font-weight: 400; border-radius:.2em; line-height:1.3; }
h3.bg.col1 > b{ background-color: var(--color-green2); font-style:italic;  }
h3.bg.col2 > b{ background:#f5a100; }
h3.bg > b span{ font-family:  var(--en-go); font-size: 50%; margin-right: .2em; display: inline-block; vertical-align: middle;  }
h3.bg > b.tag{ width:5em; display: inline-block; vertical-align: middle; text-align:center; margin-right:.5em; }
h3.bg > span{ display: inline-block; vertical-align: middle; }
h3.bg > b.normal{ display:block; font-family:var(--f-go); font-size:110%; font-weight:bold; padding:.3em 1em; }

.flex-box{ display:flex; gap:2em; align-items:center; }

.modal-video-body { max-width: 1240px; }
a.mov{ position:relative; }
a.mov:before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; background:url(../img/icon_mov.svg) no-repeat; background-size:cover; z-index:2; transition:.3s; }
a.mov:hover:before{ opacity:.8; }

.table-spec{ margin:0 auto; max-width:1250px; }
.table-spec + .table-spec{ margin-top:3em; }
.table-spec td.img img{ max-width:200px; }
.table-spec th,.table-spec td{ padding:1.2em 2em; border-bottom:1px solid #ccc; }
.table-spec th{ font-weight:500; min-width:14em; color:#888;  }
.table-spec td{ font-size:110%;  min-width:21em; }
.table-spec td.cap{ font-size:100%; color:#888; border-bottom:none; }
.table-spec ol{ padding-left:1.2em; margin-left:0; }


.table-type1{ margin:0 auto; width:100%; letter-spacing:0.01em; }
.table-type1 th,.table-type1 td{ padding:2em 0; vertical-align:middle; }
.table-type1 td{ padding-left:3em; border-bottom:1px solid #899FC7;  }
.table-type1 th{ width:20%; border-bottom:1px solid #ccc; font-size:85%; }
.table-type1 th > p{ background-color:#666; color:#fff; padding:.5em 1.5em; }
.table-type1 th > span{ font-weight:300; font-size:90%; }
.table-type1 td > span{ font-size:90%; }
.table-type1 td > span.en{ display:block; color:#777; font-size:80%; }

.table-normal{ width:100%; border:1px solid #ccc; margin:1em auto; }
.table-normal th,.table-normal td{ border:1px solid #ccc; padding:.3em 1em; background-color:#fff; }
.table-normal th{ background-color:#999; color:#fff; }

.label-area{ text-align:center; max-width:600px; width:100%; margin:0 auto; background:var(--color-bg1); font-size:100%; padding:1.5em 1em; }
.label-area.wh{ background:#fff; }
.label-area h4{}
.label-area p{}
.label-area .notes{ text-align:left; }

.tel-area{ font-size:120%; }
.tel-area h3{  }
.tel-area p.tel{ font-size:250%; }
.tel-area p{ font-size:110%; }

.table-scroll{ overflow-x:auto; overflow-y:hidden; position:relative; }
.table-scroll.type-height{ overflow-y:scroll; max-height:40em; }
.table-scroll table.stock-table{ }
.table-scroll.y-scroll:before{ content: ""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10em; height:8em; background:url(../img/yoko.svg) no-repeat center center; background-size:contain; pointer-events:none; transition:.3s; z-index:5; }
.table-scroll.y-scroll.sc-end:before{ opacity:0; }

.note-box{ border:1px solid #666; display:flex; align-items:center; justify-content:center; gap:2em; max-width:800px; margin:3em auto; font-size:120%; padding:2em; }
.note-box .img{}
.note-box .img + .txt{}

.attention{ border:1px solid #E04C4E; border-radius:3px; color:#E04C4E; line-height:1.8 !important; font-size:90%; padding:1.5em; }


@media screen and (max-width: 1350px) {
  .f1 { display:block; }
  .f1 .f-left { width:100%; margin-bottom:4rem; }
  .f1 .f-right { width: 100%; }
  .f-menu { justify-content:left; }
}

@media screen and (max-width: 1280px) {
  html{ font-size:1.25vw; }
  #rechead h1 a{ justify-content:left; }
  #rechead h1 a img{ width:68%; }
  body > a.entry { top:1rem; }
  .menu-trigger { top:1rem; }

}

@media screen and (min-width: 811px){ .sp{ display: none; } }
@media screen and (max-width: 810px) {
 .sp{ display: block; }
 .pc{ display: none !important; }
 html{ font-size:2vw; }

 #rechead { display:block; width:55%; }
 #rechead h1 a { display:block; }
 #rechead h1 a img { width:100%; }
 #rechead h1 a span{ display:block; margin-left:22%; }
 .menu-trigger { height:41px; width:60px; right: 1rem; }
 .menu-trigger span { left: 20px; width: 20px; }
 .menu-trigger span:nth-of-type(1) { top: 15px; }
 .menu-trigger.active span:nth-of-type(1) { transform: translateY(5px) rotate(-32deg); }
 .menu-trigger.active span:nth-of-type(3) { transform: translateY(0px) rotate(32deg); }
 body > a.entry { right: calc(.5rem + 70px); height: 41px; line-height: 41px; width: 10rem; padding: 0 2.5rem 0 1.5rem; }
 #gnav { right:1rem; top: 1rem; width: calc(100vw - 2rem); max-height: calc(100lvh - 2rem); border-radius: 1.7rem; padding: 4rem 3rem; }
 a.view:not(.wh) { background:#fff; }
 #foot-entry-in { display:block; }
 #foot-entry-in .entry { width: 100%; border-radius: 2rem 2rem 0 0; }
 #foot-entry-in #job { width: 100%; border-radius: 0 0 2rem 2rem ; border-width:0 2px 2px 2px; padding: 2rem 4rem; }





}

@media screen and (min-width: 601px){ .ssp{ display: none; } }
@media screen and (max-width: 600px) {
  :root {
   --head-height:6rem;
  }
 .ssp{ display: block; }
 .spc{ display: none !important; }
  html{ font-size:3vw; }
 
 #rechead { width:58%; }
  body > a.entry { font-size:100%; width: 8rem; }
  #gnav-in > div, #gnav-in > h3 { width:100%; }
  .f1 .logo a { display:block; text-align:center; }
  .f1 .logo a span{ display:block; margin-top:-.5rem; }
  .f1 .f-left { text-align:center; }
  


}




/* ボックス内dloatｖalear */
.cf:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}
.cf {display: inline-block;}
/* Hides from macIE \*/
* html .cf,* html #product .detail,* html #product > dl {height: 1%;}
.cf {display: block;}
/* End hide from macIE */

sup{ font-size: 70%; margin-top: -2em; display: inline-block;}
.fontP-1{ font-size: 90%;}
.fontP-2{ font-size: 80%;}
.fontP-3{ font-size: 70%;}
.fontP1{ font-size: 110%;}
.fontP2{ font-size: 120%;}
.fontP3{ font-size: 130%;}
.fb{ font-weight: bold;}
.fl { float: left !important; }
.fr { float: right !important; }
.tac{ text-align: center !important;}
.tal{ text-align: left !important;}
.tar{ text-align: right !important;}

.fc01{ color:  #006bb5; }
.fc-red{ color: var(--color-red); }
.fc-red a{ color: var(--color-red); }

a.tlink{ text-decoration:underline; }
a.tlink:hover{ text-decoration:none; }


/* margin-top */
.mt0{margin-top: 0px !important;}
.mt1{margin-top: 1px !important;}
.mt2{margin-top: 2px !important;}
.mt3{margin-top: 3px !important;}
.mt4{margin-top: 4px !important;}
.mt5{margin-top: 5px !important;}
.mt7{margin-top: 7px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important; }
.mt50{margin-top: 50px !important; }
.mt100{margin-top: 100px !important; }
.mt150{margin-top: 150px !important; }

.mt1em{margin-top: 1em !important;}
.mt2em{margin-top: 2em !important;}
.mt3em{margin-top: 3em !important;}
.mt4em{margin-top: 4em !important;}
.mt5em{margin-top: 5em !important;}

/* margin-right */
.mr1{margin-right: 1px !important;}
.mr2{margin-right: 2px !important;}
.mr3{margin-right: 3px !important;}
.mr4{margin-right: 4px !important;}
.mr5{margin-right: 5px !important;}
.mr8{margin-right: 8px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr70{margin-right: 70px !important;}

/* margin-bottom */
.mb0{margin-bottom: 0px !important;}
.mb1{margin-bottom: 1px !important;}
.mb2{margin-bottom: 2px !important;}
.mb3{margin-bottom: 3px !important;}
.mb4{margin-bottom: 4px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}
.mb80{margin-bottom: 80px !important;}

.mb1em{margin-bottom: 1em !important;}
.mb2em{margin-bottom: 2em !important;}
.mb3em{margin-bottom: 3em !important;}
.mb4em{margin-bottom: 4em !important;}
.mb5em{margin-bottom: 5em !important;}

/* margin-left */
.ml1{margin-left: 1px !important;}
.ml2{margin-left: 2px !important;}
.ml3{margin-left: 3px !important;}
.ml4{margin-left: 4px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}

/* padding-top */
.pt0{padding-top: 0px !important;}
.pt1{padding-top: 1px !important;}
.pt2{padding-top: 2px !important;}
.pt3{padding-top: 3px !important;}
.pt4{padding-top: 4px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt50{padding-top: 50px !important;}

/* padding-right */
.pr1{padding-right: 1px !important;}
.pr2{padding-right: 2px !important;}
.pr3{padding-right: 3px !important;}
.pr4{padding-right: 4px !important;}
.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr15{padding-right: 15px !important;}
.pr20{padding-right: 20px !important;}

/* padding-bottom */
.pb0{padding-bottom: 0px !important;}
.pb1{padding-bottom: 1px !important;}
.pb2{padding-bottom: 2px !important;}
.pb3{padding-bottom: 3px !important;}
.pb4{padding-bottom: 4px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb80{padding-bottom: 80px !important;}

/* padding-left */
.pl1{padding-left: 1px !important;}
.pl2{padding-left: 2px !important;}
.pl3{padding-left: 3px !important;}
.pl4{padding-left: 4px !important;}
.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl15{padding-left: 15px !important;}
.pl20{padding-left: 20px !important;}