@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:8rem;
  --color-red: #d00e28;
  --color-green: #00a34e;
  --color-green2: #7ac177;
  --color-base: #043ca3;
  --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);

  --f-go:"Jost", "Noto Sans JP", sans-serif;
  --f-noto:"Noto Sans JP", sans-serif;
  --en-go:"Jost", sans-serif;
}

.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 fadeIn2 {
    0% { opacity:0; transform:translateY(-1rem); }
    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 scale {
  0% {opacity: 0; transform: scale(1.2);}
  100% {opacity: 1;  transform: scale(1); }
}
@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 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 100% 0 0)
    }
    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 slideIn {
  0% {
    transform: translateX(3rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



*{ 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-color: #fff;
  word-wrap: break-word;
  min-height: 100svh;
  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;
}
.lock{ overflow:hidden !important; height: 100svh;  }


#loader-bg{
  position: fixed;
  z-index: 100;
  background-color: #fff;
  height: 100svh;
  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{
  padding: 1rem 0;
  position: fixed; top: 0; left: 0;
  display: flex; align-items: center;
  justify-content: space-between;
  z-index: 10;
  width: 100%;
}
header:before{ position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color: rgba(0, 0, 0, 0); transition:.3s; z-index:-1; }
header.bg.DownMove:before{ background-color: rgba(0, 0, 0, .6);  }
header.bg.DownMove #nav:before{ width:0; }

header h1{ font-weight:500; /*background-color:#fff; border-radius:0 100px 100px 0;*/ padding:1rem 3rem; display:flex; align-items:center; gap:1rem; color:#56595c; position:relative; }
header h1 .bk{ position:absolute; left:0; top:0; opacity:0; }
header h1 a{ transition: .3s; color:#56595c; display:block; position:relative; }
header h1 a:hover{ opacity:.7; text-decoration:none; }
header #nav{  padding-right:2rem; position: relative; }
header #nav:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#fff; transition:.3s; }
header #nav > ul{
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; gap: 1.5em; 
}
header #nav > ul > li{  }
header #nav > ul > li:not(.contact){ position:relative; }
header #nav > ul > li b{ display:block; font-weight:500; font-size:135%; }
header #nav > ul > li > a{ font-size:78%; padding: 1.5em 1em; line-height:1.5; color:#fff; text-shadow:0 0 10px rgba(0, 0, 0, 1); display:block; transition:.5s; }
header #nav > ul > li > a.newwin{ padding-right:2em; }
header #nav > ul > li > a.newwin:after{ content:""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width:2em; height:2em; background:url(../img/win.svg) no-repeat center center; background-size:contain; filter: brightness(0) invert(1); transition:.5s filter; }
header #nav > ul > li > a.newwin:hover:after{ filter: brightness(0) saturate(100%) invert(66%) sepia(86%) saturate(3515%) hue-rotate(152deg) brightness(92%) contrast(101%); }
header #nav > ul > li > a:hover{ color:var(--color-base2) !important; }
header #nav > ul > li:hover ul{ visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto; }
header #nav > ul > li.contact{ text-align:center; }
header #nav > ul > li.contact a{ background: #043ca3; background-image: linear-gradient(90deg, var(--color-base), #029ced); color:#fff; padding:1.4em 2.5em; font-size:70%; border-radius:100px; display:block; transition:var(--tra1); text-shadow:none; }
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; }

header.wh{ border-bottom:1px solid #ccc; transition:.3s; }
header.wh:before{ background:#fff; }
header.wh #nav:before{ display:none; }
header.wh h1:after{ content:""; transition:.3s; position:absolute; right:0; top:-1rem; height:calc(100% + 2rem); width:1px; background:#ccc; }
header.wh.bg{ border-bottom:none; }
header.wh.bg h1:after{ background:none; }
header.wh h1 .bk,header.wh.bg h1 img:not(.bk){ opacity:1; }
header.wh h1 img:not(.bk),header.wh.bg h1 .bk{ opacity:0; }

@media screen and (min-width: 811px) {
  header.wh:not(.bg) #nav > ul > li:not(.contact) > a{ color:#000; text-shadow:none; }
}


#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):not(.news) #directory,.kv-area:not(.type1):not(.news) #directory a,.kv-area:not(.type1):not(.news) #directory a:hover{ color:#fff; }


.menu-trigger,
.menu-trigger span {
  display: block;
  transition: all .3s;
  box-sizing: border-box;
}
.menu-trigger {
  position: absolute;  right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 51px;
  z-index: 100;
  display: none;
  background:var(--color-base);
  border-radius: 3px;
}
.menu-trigger.active { background:var(--color-base2); }
.menu-trigger :before{}
.menu-trigger span {
  position: absolute;
  left: 13px;
  width: 24px;
  height: 1px;
  background-color: #fff;
}
header.bk .menu-trigger span{ background-color: #fff; }
.menu-trigger span:nth-of-type(1) {
  top: 18px;
}
.menu-trigger span:nth-of-type(2) {
  top: 25px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 18px;
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(7px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-7px) rotate(45deg);
}


#gnav{ position:fixed; left:0; top:0; width:100%; height:100svh; background:url(../img/gnav_bg.jpg) no-repeat center center; background-size:cover; z-index:7; display:flex; justify-content: center; align-items:center; animation: insetWipeOut .6s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both; }
#gnav.active{  animation: insetWipeIn .6s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both; }
#gnav.height0{ height: 0; }
#gnav p{ line-height:1.8; }
#gnav a:hover{ text-decoration:none; }
#gnav > div{  }
.g-menu{ display:flex; gap:4%; margin-bottom:2em; width:85%; max-width:1200px; }
.g-menu h3{ font-family: var(--en-min); font-size: 180%; font-weight:300; letter-spacing:0.1em; margin:1em 0 .6em; padding-bottom: .4em; border-bottom:1px solid #777; }
.g-menu h3 a{ color:#fff; transition: all .3s cubic-bezier(0.33, 1, 0.68, 1); display:block; }
.g-menu h3 a:hover{ opacity:0.4; }
.g-menu h3 a span{ font-family: var(--f-min); font-size:60%; display:block; font-weight:300; }
.g-menu ul li a{ position:relative; transition: all .3s cubic-bezier(0.33, 1, 0.68, 1); color:#ccc; font-size:95%; display:inline-block; }
.g-menu ul li a:before{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background-color:#ccc; transition: all .6s cubic-bezier(0.33, 1, 0.68, 1); }
.g-menu ul li a:hover{ color:#fff; }
.g-menu ul li a:hover:before{ width: 100%; }
.g-menu1{ width:34%; }
.g-menu2{ width:20%; }
.g-menu3{ width:20%; }
.g-menu ul li{ margin-bottom:1em; position:relative; }
.g-menu1 ul{ display:flex; gap:4%; flex-wrap:wrap; }
.g-menu1 ul li{ width:48%; }

@media screen and (max-width: 810px) {
  #wrap{ overflow-x:hidden; }
#gnav{ background-image:url(../img/gnav_bg_sp.jpg); overflow-y:auto;  display: block;}
.g-menu{ flex-wrap:wrap; padding: 6em 0 4em; margin: 0 auto; }
.g-menu h3{ font-size:150%; }
.g-menu h3 a span{ font-size:70%; }
.g-menu1{ width:100%; margin-bottom:1em; }
.g-menu2{ width:48%; margin-bottom:1em; }
.g-menu3{ width:100%; }
.g-menu3 ul { display: flex; gap: 4%; flex-wrap: wrap; }
.g-menu3 ul li{ width:48%; }
.g-menu ul li{ margin-bottom:1.5em; }
.g-menu ul li a{ display:block; }
.g-menu ul li a:before{ display:none; }
#directory > ul{ padding:1em 2em; }
#directory.type-bg{ position:absolute; left:0; top:0; width:100%; }

}

/* 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; }


footer { background-color: #fff; padding:10rem 0 0; position:relative; z-index:1; font-size:90%; }
footer a{ color:#000; }
footer p{ line-height:1.8; }
footer a:hover{ text-decoration:none; }
.f1{ max-width:1200px; width:90%; margin: 0 auto; display:flex; justify-content:space-between; flex-direction:row-reverse; }
.f1 .f-left{ width:30%; }
.f1 .f-right{ width:62%; }
.f1 .logo{ margin-bottom:1rem; }
.f1 .logo a{ display:inline-block; }
.f1 p.tel b{ display:inline-block; font-weight:400; margin:0 1rem 0 .3rem; font-size:130%; }
.f1 .f-bnr{ margin-top:2rem; }
.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; gap:5%; margin-bottom:2em;  }
.f-menu h3{ font-size: 80%; margin-bottom:.8em; font-weight:400; border-bottom:1px solid #aaa; padding-bottom:.7em; }
.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 a.newwin:after{ content:""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width:2em; height:2em; background:url(../img/win.svg) no-repeat center center; background-size:contain; }

.f-menu ul li{ margin-bottom:.8em; position:relative; font-size:90%; }
.f-menu > div{ margin-bottom:2em; flex:1; }
.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; }


.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; border:2px solid #899FC7; }
.icon-close{ width:2.4em; height:2.4em; background-color:#899FC7; position:fixed; right:-1em; top:-1em; transition:.4s; z-index:10; border:none; border-radius:200px; }
.icon-close:before,.icon-close:after{ content:""; height:2px; width:1.4em; 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:var(--color-base); } 
.modal-in{ margin: 5%; background-color:#fff; display:flex; justify-content:space-between; gap:5%; }
.modal-txt{ flex:1; }
.modal-txt h3{ color:var(--color-base); border-bottom:1px solid var(--color-base); font-size:140%; padding-bottom:.5rem; margin-bottom:1rem; line-height:1.3; }
.modal-txt .txt{ margin-bottom:1rem; }
.modal-txt .protag{ margin-bottom:1rem; font-size: 90%;}
.modal-txt .maker{ font-size: 90%; }
.modal-ph{ width:50%; display:flex; flex-wrap:wrap; gap:1rem; }
.modal-ph > div{ width:100%; }


 /* 汎用 */
#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; max-width:1000px; margin:0 auto; }
#news-list ul li{ border-bottom:1px solid #ddd; }
#news-list ul li a{ display:flex; padding:2em 0; transition:.3s; position:relative; justify-content:space-between; align-items:center; }
#news-list ul li a .img{ width:26%;  }
#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:70%; }
#news-list ul li a:not(.nolink) .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.newwin .txt:before{ background-image: url(../img/win.svg); width:22px; height:22px; }
#news-list ul li a.nolink .txt p{ color:#000; }
#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,.newstit time{ width:6em; display: block; font-weight:300; color:#000; margin-bottom:1rem; position:relative; }
#news-list ul li a time:after,.newstit time:after{ text-align:center; position: absolute; left: 100%; top: 0; 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,.newstit.n-ctg1 time:after,#mv-news ul li.n-ctg1 time:after{ content:"お知らせ"; }
#news-list ul li.n-ctg2 a time:after,.newstit.n-ctg2 time:after,#mv-news ul li.n-ctg2 time:after{ content:"イベント"; }
#news-list ul li.n-ctg3 a time:after,.newstit.n-ctg3 time:after,#mv-news ul li.n-ctg3 time:after{ content:"採用"; }
#news-list ul li a{ text-decoration:none; }
#news-list ul li a:not(.nolink):hover{  color:var(--color-base2); }
#news-list ul li a:not(.nolink):hover p:before{ right:-.4em; color: #d00e28; }
#news-list ul li a:not(.nolink):hover:after{ width:100%; }
#news-list ul li a:not(.nolink):hover .txt:before{ right:0; }

.newstit{ margin:2em 0 1em; font-size:110%; }
.newstit h1{ font-size:160%; line-height:1.3; }
.newscont{ margin-bottom:2em; }
.newscont p{ margin-bottom:1em; }
.newscont .ph{ margin:2em auto; }
.cont.news .img{ margin:1em 0; }

#news-list .more{ text-align:center; margin-top:2rem; }



/* サブメニュー */
.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,a.linkbtn,.openbtn{ width:13em; padding:1em 2em; position:relative; background: #112464; background-image: linear-gradient(90deg, var(--color-base), #112464); display:block; margin:0 auto; color:#fff; font-weight:500; border-radius:100px; transition:.6s; }
a.view:hover,a.linkbtn:hover,.openbtn:hover{ filter:saturate(160%) brightness(1.1); text-decoration:none; }
a.view:not(.win):after,a.linkbtn:after{ content:""; position:absolute; top:50%; right:0; width:2rem; height:1px; background:#fff; }
a.view:not(.win):hover:after,a.linkbtn:not(.win):hover:after{ animation:line2 .6s forwards; }
a.view.win:after,a.linkbtn.win:after{ display:block; position:absolute; right:5%; top:50%; transform:translateY(-50%); filter:brightness(0) invert(1); }

a.linkbtn{ width:auto; display:inline-block; padding:1em 4em 1em 2em; }
a.linkbtn.min{ min-width:20rem; }
a.linkbtn.max{ max-width: 20rem; width: 90%; margin-left: auto; margin-right: auto; display:block; } 

.openbtn{ width:20em; text-align:center; cursor:pointer; }
.openbtn:before{ content: "＋"; position: absolute; right:1rem; top:50%; transform: translateY(-50%); font-weight:normal; font-size:150%; opacity:0.6; transition:.6s; }
.openbtn:hover:before{ opacity:1; } 
.openbtn.on:before{ content: "―"; }

.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,b.win{ position:relative; /*padding-right:1.3rem*/ }
b.win{ font-weight: 700; }
a.win:after,b.win:after{ content: ""; display: inline-block; width:1.2rem; height:1.2rem; background:url(../img/win.svg) no-repeat center center; background-size:contain; transform:translateY(.3rem); }
b.win:after{ width:1.5rem; height:1.5rem; }



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) {
  :root {
   --head-height:8rem;
  }
  .icon-close{ width:3em; height:3em;  }
  .modal-in{ padding:3%; display:block; }
  .modal-ph { width:100%; margin-top:1.5rem; }

  

  .important{ display:block; padding: 2em; font-size:110%; }
  .important > h2{ width:100%;}
  .important > div{ width:100%;  border-left:none;  border-top:1px solid var(--color-imp); padding:1em 0 0 0; margin-top:1em; }


  .modal-tit{ display:block; }
  .modal-tit h2.t1{ }
  .modal-tit h3 { font-size:100%; }
  .modal-tit h3 b { font-size:160%; }
  .modal-flex { display:block; }
  .modal-flex > div { width:100%; }
  .modal-flex > div.phslide{ width:100%; }
  .modal-flex .table-spec{ width:100%; margin-top:2em; }
  .modal-flex .table-spec th { min-width:1em; padding: 1.2em 1em; }
  .modal-flex .table-spec td { min-width:1em; padding: 1.2em 1em; }
  .store-list { flex-wrap:wrap; }
  .store-list li { width:50%; }

  .c-cookie__box .c-container { display:block; }
  .c-cookie__text { width:100%; margin-left:0; margin-bottom:1em; }
  .c-cookie__btn { justify-content:center; }
  .c-cookie__btn--consent { margin-right:0; }
  .c-cookie__btn--consent a { width:14em; height:3.5em; }

}


#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; }

.bgB{ background:#E5EAF3; padding:8rem 0; }

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.tit2{ font-size:200%; position:relative; font-weight: 500; letter-spacing: 0.05em; line-height: 1.5; text-align: center; padding-bottom: .5em; margin-bottom: 4rem;}
h2.tit2:before{ content:""; position:absolute; left:calc(50% - 3rem); bottom: 0; width:6rem; height:3px; background-color:var(--color-base2); }

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.tit1{ font-weight: 500; font-size: 140%; margin-bottom:.8em; padding-bottom: .3em; border-bottom:1px solid #000;  }
h3.tit1 span{ display: inline-block; margin-right: .3em; color: var(--color-base); }
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; }

.bbox{ border:1px solid var(--color-base); padding:0 1rem 1rem; }
.bbox h4{ background:#fff; font-size: 110%; color:var(--color-base); display:inline-block; transform:translateY(-.8em); padding:0 .8em; }

.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%; margin:1em auto; box-sizing: border-box; border-collapse: separate; }
.table-normal th,.table-normal td{ border:1px solid #E5EAF3; box-sizing: border-box; padding:.3em 1em; background-color:#fff; vertical-align:middle; }
.table-normal thead th{ background-color: #029CED; color:#fff; text-align:center; }

table caption{ text-align:left; font-weight:500; margin-bottom:2px; font-size:110%; }

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

dl.numList dt {
  float: left;
  width: 1.5em;
}
dl.numList dd {
  margin: 0 0 0 2em;
}


@media screen and (max-width: 1440px) {
  header h1 { width:35%; padding: 1rem 2rem; }
  header #nav { padding-right:1rem; }
  header #nav > ul { gap:.6rem; }
}

@media screen and (max-width: 1280px) {
  html{ font-size:1.25vw; }
}

@media screen and (min-width: 811px){ .sp{ display: none; } header #nav,header #nav > ul ul{ display:block !important; } }
@media screen and (max-width: 810px) {
 .sp{ display: block; }
 .pc{ display: none !important; }
 html{ font-size:2vw; }
 header{  }
 header:not(.wh):before{  }
 header h1 { width:75%; max-width: 500px; padding: 1rem 1rem; }
 .menu-trigger { display:block; }
 header #nav { position:fixed; left:0; top:0; padding:0; display: none; width:100%; height: 100svh; overflow-y:auto; font-size:120%; }
 header #nav:before{ display:none; }
 header #nav:after{ content:""; width:100%; height: 100svh; position:fixed; z-index:-1; top:0; left:0; background-color:rgba(0, 0, 0, .8); opacity:0; }
 header #nav > ul { flex-wrap:wrap; gap:0; opacity: 0; align-items:flex-start; width:80%; max-width: 500px; margin:5rem auto 0; padding-bottom:3rem; }
 header #nav > ul > li{ width:100%; }
 header #nav > ul > li > a span{ display: block; width: 3em; height: 3em; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:2; color:#fff; background-color:var(--color-base); border-radius:100px; }
header #nav > ul > li > a span:before{ content:""; position:absolute; left:calc(50% - .3em); top:calc(50% - .5em); transform:rotate(-135deg); width: .6em; height: .6em; border-top: 1px solid #fff; border-left: 1px solid #fff; transition:.3s;  }
header #nav > ul > li > a span.active:before{ transform:rotate(45deg); top:calc(50% - .2em); }
 header #nav > ul > li > a { border-bottom:1px solid #ccc; padding: 1em 0; position:relative;  }
 header #nav > ul > li.contact > a { border:none; margin-top:1.5rem; }
 header #nav > ul ul { position:static; visibility:visible; display: none; opacity:1; background:none; padding:.5em 0 1em; width:100%; pointer-events:auto; transform: translateY(0); transition:none; }
 header #nav > ul ul li{  }
 header #nav > ul ul a{ color:#fff; }

 header #nav.active { display:block; }
 header #nav.active:after { animation: fadeIn var(--tra1) forwards; }
 header #nav.active > ul { animation: fadeIn .5s .3s forwards; }
 header.wh h1::after { display:none; }



 footer { padding: 5rem 0 0; font-size: 100%; }
 .f1 { display:block; }
 .f1 .f-left,.f1 .f-right { width:100%; }
 .f1 .f-left{ margin-bottom:3rem; text-align:center; }
 .f1 a.catalog { max-width:22em; margin:0 auto; }

 #contact-aside { padding:4rem 0; }
 #contact-aside .inner { flex-wrap:wrap; }
 #contact-aside .txt { width:100% !important; margin-top:2rem; }
 #contact-aside .txt .telarea p { width:48%; }

 .table-type1, .table-type1 tbody,.table-type1 tr,.table-type1 th,.table-type1 td{ display:block; width:100%; }
 .table-type1 th{ border:none; padding-bottom:0; }
 .table-type1 td{ padding-left:1em; }
 



}

@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; }
  .f1 { width:85%; }
  .f2{ margin-top:4rem; }
  .f-menu { display:block; font-size:110%; margin-bottom:3em; }
  .f-menu ul{ display:flex; justify-content:space-between; flex-wrap:wrap; }
  .f-menu ul li{ width:48%; }
  .f-menu h3 { margin-bottom: 2em; }
  a.view { width:12em; }
  #news-list ul li a .txt { display:block; }
  #news-list ul li a time { margin-bottom:.5rem; }
  #contact-aside .inner { display:block; font-size:110%; width:85%; }
  #contact-aside .tit{ text-align:center; margin-bottom:1.5rem; }

  .bgB { padding:5rem 0; }

  ul.list.flex2, ul.list.flex3 { display:block; }
  ul.list.flex2 li,ul.list.flex3 li { width: 100%; }
  


}




/* ボックス内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); }

ol{ padding-left:1.5rem; }
ol > li{ margin-bottom: .3em; }

.radius1{ border-radius:1rem; }
.radius2{ border-radius:2rem; }

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