/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  position: relative;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
:where(ul, ol) {
  list-style: none;
  list-style-type: '';
  padding: unset;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
img, svg {
  display: block;
  width: 100%;
  max-width: 100%;
}
/*input*/
input, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  border: none;
  color: inherit;
  font-family: inherit;
}
button, input[type="submit"], input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: none;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  padding: 0;
  outline: none;
  background: transparent;
  width: 100%;
  max-width: 100%;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
  outline-offset: -2px;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
}
input[type="radio"], input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
*:focus {
  outline: none;
}
:where(button, [type='button'], [type='reset'], [type='submit']) {
  touch-action: manipulation;
}
:where( :any-link, button, [type='button'], [type='reset'], [type='submit'], label[for], select, summary, [role='tab'], [role='button']) {
  cursor: pointer;
}
/*base ++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ :root {
  --fnt-base: "Zen Kaku Gothic New", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /*400-500-700*/
  --fc-base: #4A4A4A;
  --wblue: #2AADEA;
  --green: #72C972;
  --lgreen:#D7FFCF;
  --blue: #0050C0;
  --fnt-carme: "Carme", var(--fnt-base);
  --gra-type01: linear-gradient(rgba(238, 250, 255, 1) 5%, rgba(230, 255, 224, .4)40%, rgba(195, 236, 255, 0)55%);
  --gra-tylpe02: linear-gradient(rgba(233, 245, 255, 1)0%, rgba(230, 255, 224, .1) 70%, rgba(175, 230, 255, .1) 80%);
  --gra-type03_r: linear-gradient(-90deg, rgba(193, 246, 255, 1), rgba(218, 243, 255, 0)40%);
  --gra-type03_l: linear-gradient(90deg, rgba(193, 246, 255, 1), rgba(218, 243, 255, 0)40%);
  --wall-wblue: #DAF9FF;
  --wall-pale-wblue: #F2FDFF;
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .4s var(--easing);
  --box-sdw: 0 0px min(40px, 5vw) rgba(222, 240, 248, .7);
  --pd_wid: max(calc((100vw - 1240px)/2), 4vw);
}
body {
  font-family: var(--fnt-base);
  font-size: min(16px, 3.6vw);
  color: var(--fc-base);
  font-weight: 400;
  background: linear-gradient(45deg, #EDFCFF 3%, #DDF9FF 25%, #D5F7FF 50%, #FEFFFF 60%, #ECFBFF 84%, #fff 95%, #E2FAFF 100%);
}
.fnt-carme {
  font-family: var(--fnt-carme);
}
/*container ++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
}
.inner {
  width: min(1300px, 100%);
  padding-left: min(50px, 5vw);
  padding-right: min(50px, 5vw);
  margin-left: auto;
  margin-right: auto;
}
/*header +++++++++++++++++++++++++++++++++++*/
header {
  position: fixed;
  width: 100%;
  background: #fff;
  z-index: 10;
}
.head_inner {
  padding: 0 0 min(15px, 2vw) min(24px, 4vw);
  display: grid;
  grid-template-columns: min(320px, 25vw) auto;
  -ms-align-items: center;
  align-items: center;
}
.head_logo {
  width: min(442px, 40vw);
}
.head_links {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto min(88px, 15vw);
  gap: min(20px, 5vw);
}
.entry-buttons {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}
.entry-buttons a {
  width: min(150px, 25vw);
  height: min(60px, 15vw);
  display: grid;
  place-items: center;
  place-content: center;
  color: #fff;
  background: var(--btn-clr);
  font-size: min(18px, 4vw);
  font-weight: 600;
  gap:5px;
  transition:background var(--transit),color var(--transit);
}
.entry-buttons a.blue {
  --btn-clr: var(--wblue);
  --hvr-clr:#98D8F5;
}
.entry-buttons a.green {
  --btn-clr: var(--green);
  --hvr-clr:var(--lgreen);
}
.head_links .entry-buttons a {
  border-radius: 0 0 6px 6px;
}
@media(hover){
  .entry-buttons a:hover{
    background: var(--hvr-clr);
    color: var(--btn-clr);
  }
}
#hum-button {
  width: min(60px, 15vw);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  grid-template-columns: 60%;
  z-index: 100;
}
#hum-button button {
  height: 4px;
  background: var(--fc-base);
  position: relative;
  transition: rotate var(--transit);
}
#hum-button button::before, #hum-button button::after {
  content: "";
  width: 100%;
  height: 4px;
  background: currentColor;
  position: absolute;
  left: 0;
  transition: rotate var(--transit);
}
#hum-button button::before {
  top: min(15px, 2.5vw);
}
#hum-button button::after {
  top: max(-15px, -2.5vw);
}
#hum-button.open button {
  rotate: 45deg;
}
#hum-button.open button::before, #hum-button.open button::after {
  rotate: 90deg;
  top: 50%;
  translate: 0 -50%;
}
#l-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(700px, 100vw);
  background: #E7F7FF;
  height: 100dvh;
  overflow-y: scroll;
  translate: 100% 0;
  transition: translate var(--transit);
}
#l-nav.is-view {
  translate: 0 0;
}
.l-nav_inner {
  padding: min(100px, 15vw) min(50px, 4vw) min(50px, 10vw);
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: min(50px, 10vw);
}
.l-nav_menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: min(30px, 5vw);
}
.l-nav_menu > li {
  display: grid;
  place-content: center;
}
.l-nav_menu > li a {
  display: flex;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  color: var(--blue);
}
.l-nav_menu > li a .en {
  font-family: var(--fnt-carme);
  font-size: min(18px, 4vw);
  padding-bottom: min(20px, 5vw);
  white-space: nowrap; 
}
.l-nav_menu > li a .en:before {
  content: "";
  width: 4em;
  height: 3px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
}
.l-nav_menu > li a .ja {
  font-weight: 500;
  padding-top: min(20px, 5vw);
  font-size: min(27px, calc(100vw/21));
  letter-spacing: .05em;
}
.l-nav_button.entry-buttons {
  justify-content: center;
}
.l-nav_button.entry-buttons a {
  border-radius: 8px;
}
.l-nav_button.entry-buttons a {
  width: min(262px, 40vw);
}
/*main +++++++++++++++++++++++++++++++++++++*/
main {
  flex: 1;
}
/*hero +++++++++++++++++++*/
#hero::before {
  content: "";
  width: 100%;
  clip-path: polygon(0 0, 100% 0%, 100% 65%, 0% 100%);
  aspect-ratio: 1/1.2243;
  max-height: 1763px;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gra-type01);
  z-index: -1;
}
#hero {
  padding: min(40px, 4vw) min(30px,4vw) 0;
  
}
#hero .wall {
  height: 100%;
}
#hero .wall img {
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.hero_inner {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 min(50px, 4vw) min(40px, 5vw);
  height: calc(100vh - min(100px, 15vw));
  max-height: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-end;
  align-items: flex-end;
  justify-content: flex-start;
}
.hero-title {
  font-size: min(22px, calc(100vw/28));
  font-weight: 600;
}
.hero-title .title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
}
.hero-title .min {
  color: var(--blue);
  background: #fff;
  padding: min(20px, 3vw) min(25px, 2vw) min(10px, 1.5vw) min(35px, 3vw);
  border-radius: 8px 8px 0 0;
}
.hero-title .main {
  font-size: min(50px, calc(100vw/18));
  letter-spacing: .05em;
  background: #fff;
  padding: min(15px, 1.5vw) min(25px, 2vw) min(20px, 3vw) min(35px, 3vw);
  border-radius: 0 8px 8px 5px;
}
.hero-title .main span {
  font-size: .7em;
}
.hero-title .sub {
  margin-top: min(16px, 3vw);
  padding-left: min(35px, 3vw);
}
/*content ++++++++++++++++++++++++++++++++++*/
#contant {
  padding-top: min(150px, 25vw);
}
.sec-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: min(20px, 3vw);
  color: var(--blue);
}
.sec-title .en {
  font-family: var(--fnt-carme);
  font-size: min(32px, calc(100vw/28));
  padding-bottom: min(15px, 3vw);
}
.sec-title .en::before {
  content: "";
  width: 3em;
  height: min(3px,.55vw);;
  background: CurrentColor;
  position: absolute;
  bottom: 0;
  left: 0;
}
.sec-title .main {
  font-size: min(40px, calc(100vw/16));
  font-weight: 600;
  letter-spacing: .05em;
  padding-bottom: min(20px, 5vw);
}
.sec-title .main::before {
  content: "";
  width: 100vw;
  height: min(4px,.75vw);
  position: absolute;
  bottom: 0;
  background: CurrentColor;
}
.sec-title.right .main::before {
  left: 0;
}
.sec-title.left .main::before {
  right: 0;
}
.box-title {
  font-size: min(26px, calc(100vw/28));
  font-weight: 500;
  line-height: calc(30/26);
}
.box-title.wid {
  font-size: min(48px, calc(100vw/18));
}
.in-text {
  line-height: calc(28/16);
}
.in-text.mid {
  font-size: min(20px, 4vw);
}
.line-grn {
  background: linear-gradient(rgba(215, 255, 207, 0) 60%, rgba(215, 255, 207, 1) 60%)
}
/*about us*/
.sec-aboutus_intro {
  padding-right: var(--pd_wid);
  display: grid;
  grid-template-columns: min(700px, 45vw) auto;
  gap: min(30px, 5vw) min(50px, 5vw);
}
.sec-aboutus_intro .thumb figure {
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}
.sec-aboutus_intro .box-title {
  margin-top: min(30px, 4vw);
  line-height: calc(70/48);
  font-weight: 600;
}
.sec-aboutus_intro .in-text {
  margin-top: min(50px, 6vw);
}
.sec-aboutus__detail {
  padding-top: min(150px, 15vw);
  padding-bottom: min(150px, 15vw);
}
.sec-aboutus__detail::before {
  content: "";
  width: 100vw;
  height: 90%;
/*  background: var(--gra-tylpe02);*/
  background: url("../img/gra_wall.png") no-repeat center bottom/cover;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  clip-path: polygon(0 46%, 100% 0%, 100% 100%, 0% 100%);
}
.aboutus-list {
  padding: min(100px, 10vw) min(40px, 4vw);
  background: #fff;
  display: grid;
  grid-template-columns: min(960px, 100%);
  justify-content: center;
  border-radius: 20px;
  box-shadow: var(--box-sdw);
  gap: min(100px, 5vw);
}
.aboutus-list > li {
  display: grid;
  grid-template-columns: 40% auto;
  -ms-align-items: flex-start;
  align-items: flex-start;
  gap: min(100px, 5vw);
}
.aboutus-list > li .thumb {
  overflow: hidden;
  border-radius: 15px;
}
.aboutus-list > li .comment .in-text {
  margin-top: min(30px, 5vw);
}
/*about job ++++++++++++++++*/
.sec-job-blc {
  padding-top: min(100px, 12vw);
  padding-bottom: min(150px, 15vw);
}
.sec-job-box {
  filter: drop-shadow(0 0 min(10px, 1.5vw) rgba(222, 240, 248, .8));
  margin-top: min(80px, 10vw);
}
.tab-switch {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.tab-switch > li {
  background: #F2FBFF;
  color: var(--blue);
  height: min(115px, 12vw);
  display: grid;
  place-content: center;
  border-radius: min(15px, 4vw) min(15px, 4vw) 0 0;
  border: .8px solid #DEF0F8;
  cursor: pointer;
}
.tab-switch > li.active {
  background: #DEF0F8;
}
.tab-switch > li p {
  text-align: center;
  font-size: min(18px, 3vw);
  font-weight: 600;
  line-height: calc(32/19);
}
.panel-wrapper {
  border-top: 2px solid #DEF0F8;
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: min(60px, 5vw) min(60px, 4vw);
}
.job-panel-item {
  display: grid;
  grid-template-columns: min(460px, 30%) auto;
  grid-template-areas: auto auto;
  gap: min(80px, 5vw);
}
.job-panel-item .thumb {
  grid-area: 1 / 1 / 2 / 2;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}
.job-panel-item .comment {
  grid-area: 1 / 2 / 2 / 3;
}
.job-panel-item .comment .box-title{
  color: var(--blue);
  font-size: min(32px,calc(100vw/28));
  padding-bottom: min(15px,3vw);
  border-bottom: 3px solid currentColor;
}
.job-panel-item .comment .in-text{
  margin-top: min(20px,4vw);
  font-weight: 500;
}
.job-panel-item .button-wrap {
  grid-area: 2 / 1 / 3 / 3;
}
.button-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.round-button {
  width: min(400px, 100%);
  height: 56px;
}
.round-button a {
  width: 100%;
  height: 100%;
  border-radius: 100vmax;
  display: grid;
  place-content: center;
  background: var(--lgreen);
  color: var(--green);
  font-weight: 600;
  font-size: min(18px, 4vw);
  transition:color var(--transit),background var(--transit);
}
.round-button a span {
  padding-right: 2.5em;
}
.round-button a span::after {
  content: "";
  width: 1.5em;
  background: url("../img/icon/arrow.svg") no-repeat center/cover;
  aspect-ratio: 1/0.6333;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  transition:translate var(--transit),background var(--transit);
}
@media(hover){
  .round-button a:hover{
/*
    background: var(--green);
    color: #fff;
*/
  }
  .round-button a:hover span::after{
    translate: 50% -50%;
/*    background-image: url("../img/icon/arrow_hvr.svg");*/
  }
}
/*environment +++++++++++++++++*/
.sec-env-blc{ 
}
.sec-env_feature{
  padding-top: min(150px,15vw);
  padding-bottom: min(120px,12vw);
}
.sec-env_feature::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate:-50% 0;
  width: 100vw;
  height: 100%;
  background-image: var(--gra-type03_r),var(--gra-type03_l);
  background-position: right top,bottom left;
  background-repeat: no-repeat;
  background-size:auto calc((100% - min(360px,20vw))/2);
  background-color: var(--wall-pale-wblue);
}
.env-feature-list{
  margin-top: min(130px,15vw);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:min(65px,5vw) min(25px,3vw);
}
.env-item{
  background: #fff;
  display: grid;
  grid-template-rows: subgrid;
  grid-area: span 2;
  gap:0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
}
.env-item dt{
  background: linear-gradient(90deg,#DEF0F8 82%,#E6FFE0 100%);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  gap:10px;
  padding: min(10px,2vw) min(20px,2vw);
  -ms-align-items: center;
  align-items: center;
  font-weight: 600;
  font-size: min(18px,3.6vw);
}
.env-item dt .tag{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  gap:min(10px,1.25vw);
}
.env-item dt .tag p{
  border-radius: 100vw;
  width: 1.5em;
  aspect-ratio:1;
  color: #fff;
  display: grid;
  place-content:center;
}
.env-item dt .tag p.by{
  background: var(--wblue);
}
.env-item dt .tag p.ep{
  background: var(--green);
}
.env-item dt .in-title{
  color: var(--blue);
  line-height: 1.2;
  word-break: keep-all;
  text-align: right;
}
.env-item dd{
  padding: min(30px,4vw);
}
.env-item dd .num{
  
}
.env-item dd .num p{
  font-size: min(40px,calc(100vw/28));
  font-weight: 700;
  text-align: center;
}
.env-item dd .num span{
  font-size: min(130px,calc(100vw/10));
}
.env-item dd .icon{
  display: grid;
 
  grid-template-columns: min(174px,38%);
  place-content:center;
}
.env-item dd .icon figure{
  aspect-ratio:1;
}
.env-item dd .icon figure img{
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.env-item dd .comment{
/*  padding: 0  min(30px,4vw) min(30px,4vw);*/
   padding-top: min(30px,4vw);
}

.sec-env_voice .box-title{
  font-size: min(44px, calc(100vw/24));
  font-weight: 600;
  padding-bottom: min(60px,10vw);
  text-align: center;
  color: var(--wblue);
}
.sec-env_voice .box-title::before{
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  translate:-50% 0;
  background-image: var(--gra-type03_l);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left center;
  background-color: var(--wall-pale-wblue);
}
.voice-slide-wrap{
 
}
#voice-slide{
   padding-top: min(50px,8vw);
  padding-bottom: min(30px,5vw);
}
#voice-slide::before{
  content: "";
  width: 100vw;
  height: 100%;
  background: var(--wall-wblue);
  position: absolute;
  top: 0;
  left: 50%;
  translate:-50% 0;
}
.voice-item .icon{
  width: min(170px,20vw);
  aspect-ratio:1;
  border-radius: 100vmax;
  background: #fff;
  overflow: hidden;
  margin-top: max(-50px,-4vw)
}
.voice-item .icon img{
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.voice-item .comment{
  background: #fff;
  width: calc(100% - min(100px,12vw));
  margin-left: auto;
  border-radius: 20px;
  padding: 0 min(40px,3vw) min(40px,5vw);
  font-size: min(18px,3.6vw);
}
.voice-item .comment::after{
  content: "";
  width: min(70px,8vw);
  aspect-ratio:1/.65;
  clip-path: polygon(25% 0, 0% 100%, 100% 0);
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 1px;
  translate:min(100px,15vw) 100%;
}
.voice-item .comment p.in-text{
  padding-top: min(40px,8vw);
  padding-bottom: min(40px,8vw);
  display: grid;
  place-content:center;
}
.voice-item .comment .data{
  color: var(--blue);
  padding-top: min(20px,4vw);
  border-top: 1px solid currentColor;
}
.swiper-slide:nth-child(odd) .voice-item{
  padding-bottom: min(80px,10vw);
}
.swiper-slide:nth-child(even) .voice-item{
  padding-top: min(80px,10vw);
}
.slide-navigation{
  display: flex;
  justify-content: center;
  gap:min(20px,3vw);
  position: absolute;
  bottom: max(-20px,-5vw);
  width: 100%;
  left: 0;
  translate:0 100%;
  z-index: 1;
}
.slide-navigation button{
  width: min(50px,15vw);
  aspect-ratio:1;
  position: relative;
}
.slide-navigation button::before{
  content: "";
  width: 8px;
  aspect-ratio:1;
  border: 3px solid;
  border-color: var(--wblue) var(--wblue) transparent transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate:45deg;
  translate:-50% -50%;
}
.slide-navigation button.voice-button-prev::before{
  scale:-1 -1;
}

/*search　++++++++++++++++++++*/
.sec-search-blc{
  padding-top: min(200px,25vw);
  padding-bottom: min(150px,15vw);
  background: linear-gradient(rgba(255,255,255,1),rgba(215,248,255,1));
}
.search-list{
  display: grid;
  grid-template-columns: min(456px,45vw) min(456px,45vw);
  justify-content: center;
  gap:min(50px,5vw);
  margin-top: min(80px,10vw);
  transition:height var(--transit);
}
.search-list> div.is-open{
  transition:all var(--transit);
}
.search-list dt {
  height: min(70px,20vw);
  background: var(--wall-clr);
  color: var(--item-clr);
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transition:all var(--transit);
  padding-right: min(30px,4vw);
  z-index: 1;
}
.search-list dt p{
  font-size: min(18px,calc(100vw/24));
  font-weight: 700;
  width: 100%;
  height: 100%;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  padding-left: 1.5em;
}
.search-list dt::after
,.search-list dt p::after{
   content: "";
  pointer-events: none;
  aspect-ratio:1;
  position: absolute;
  transition:all var(--transit);
  width: min(30px,6vw);
  right: 0;
  top: 50%;
  border-radius: 100vmax;
}
.search-list dt::after{
  background-color: var(--item-clr);
  translate:max(-30px,-4vw) -50%;
}
.search-list dt p::after{
  background-color: var(--wall-clr);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.105 15.958'%3E%3Cpolygon points='11.552 15.958 0 2.619 3.023 0 11.552 9.849 20.082 0 23.105 2.619 11.552 15.958'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 45%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.105 15.958'%3E%3Cpolygon points='11.552 15.958 0 2.619 3.023 0 11.552 9.849 20.082 0 23.105 2.619 11.552 15.958'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 45%;
  translate:0 -45%;
  z-index: 1;
} 
.item-btn.blue{
  --item-clr:#fff;
   --wall-clr:var(--wblue);
}
.item-btn.green{
  --item-clr:#fff;
   --wall-clr:var(--green);
}
.search-list dd{
  background: #fff;
  display: none;
  border-radius: 0 0 15px 15px;
  padding: min(40px,7vw) min(30px,4vw) min(30px,7vw);
  translate: 0 -10px;
}
.search-list dd .child li{
  font-weight: 500;
  font-size: min(18px,4vw);
}
.search-list dd .child li a{
  display: block;
  transition:color .2s var(--easing);
}
.search-list dd .child li:nth-child(n+2){
  margin-top: 1.5em;
}

@media(hover){
  .search-list dt:hover::after{
    translate: max(-30px, -4vw) -30%;
  }
  .search-list dt:hover p::after{
    translate: 0 -25%;
  }
  .search-list dd .child li a:hover{
    color: var(--wall-clr);
  }
}
/*footer +++++++++++++++++++++++++++++++++++*/
footer {
  background: #84D8FF;
  color: #fff;
  padding: min(50px, 5vw) min(20px, 4vw);
}
.foot-nav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px 2em;
  font-weight: 600;
}
footer .copy {
  margin-top: min(20px, 3vw);
  text-align: center;
  font-size: min(14px, 3.4vw);
}

/*responsive ++++++++++++++++++++++++++++++++++++++++++++*/

@media(max-width:768px){
  .head_links .entry-buttons{
    display: none;
  }
  .head_links{
    grid-template-columns: 1fr;
  }
  .sec-aboutus_intro{
    grid-template-columns:1fr;
  }
  .sec-aboutus_intro .detail{
    padding-left: min(50px,4vw);
  }
  .tab-switch{
    grid-template-columns: repeat(3, 1fr);
  }
  .tab-switch > li{
    border-radius: 0;
  }
  .env-feature-list{
    grid-template-columns: repeat(2, 1fr);
  }
  .search-list{
    grid-template-columns: min(456px, 85vw);
  }
}
@media(max-width:600px){
  #hero .wall{
    width: 100%;
  }
  #hero .wall img{
/*    object-fit: cover;*/
    object-position: top center;
  }
  #hero{
    height: calc(100svh - min(75px,20vw));
  }
  .hero_inner{
    -ms-align-items: center;
    align-items: center;
    height: 100%;
  }
  .hero-title{
    position: absolute;
    left: 50%;
    translate:-50% 0;
    width: calc(100% - min(100px,6vw));
    bottom: 0;
  }
  .hero-title .main{
    font-size: min(50px, calc(100vw / 17));
  }
}
@media(max-width:480px){
  .inner {
    padding-left: min(50px, 4vw);
    padding-right: min(50px, 4vw);
}
  .head_logo{
    width: min(442px, 55vw);
  }
  .sec-title.left .main::before
  ,.sec-title.right .main::before{
    left: max(-50px,-4vw);
    right: auto;
    translate:0 0;
  }
  .aboutus-list > li{
    grid-template-columns: 1fr;
  }
  .job-panel-item{
    grid-template-columns:1fr;
  }
  .job-panel-item .thumb{
    grid-area: 1 / 1 / 2 / 2;
  }
  .job-panel-item .comment {
    grid-area: 2 / 1 / 3 / 2; 
  }
  .job-panel-item .button-wrap{
    grid-area: 3 / 1 / 4 / 2;
  }
  .job-panel-item .comment .box-title{
    font-size: min(32px, calc(100vw / 22));
  }
}