:root{
  --mainColor:#005DB9;
  --subColor:#023364;
  --btnColor:#006BD6;
  --accentColor:#82BFFC;
  --brightColor:#389AFB;
  --bgColor:linear-gradient(-210deg,#f7fff3 0%, #cce9f1 27.62%, #cceefb 70.71%, #c0dffb 100%);
  --enfont: "Jost", sans-serif;
  --breakWidth:1400 * 100vw;
  --kvHeight:70vh;
}
:root {
  --wp--style--unstable-gallery-gap: 20px; /* 例: ギャップを20pxに設定 */
}
#top_service,
#top_group,
#top_recruit,
#corp-policy,
#operation,
#outline,
#contact-form,
#post,
#privacy section{
  position: relative;
  padding: max(60px,5%) 0;
}


/*//////////////////////////////
   common style
////////////////////////////////*/
.inline-block{
  display: inline-block;
}
.blue{
  color:var(--mainColor);
}
/*/// loading /////*/

#loading {
  background-color: white;
  position: fixed;
  top: 0%;
  left: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 10000;

  }

  /* ローディング画面の下端にプログレスバーを表示 */

  #loading #bar {
    position: relative;
    width:min(70px,20vw);
    aspect-ratio: 1;
  }
  #loading #bar .mask{
    width:100%;
    height: 10%;
    display: block;
    mask-image : url(../img/logo-mask.svg) ;
    mask-mode: luminance;
    mask-repeat: no-repeat;
    mask-position: top;
    mask-size : 100% auto;
  }
  #loading #bar .bg{
    display: block;
    background-image: linear-gradient(#e867d3 0%,#a2ecaa 25%, #9ac5ff 60%, #84baf2 90%);    width:100%;
    height: 100%;
  }
  .loading-circle {
    display: block;
    width:30px;
    aspect-ratio: 1;
    margin:20px auto;
    border: 4px rgba(136, 136, 136,0.25) solid;
    border-top: 4px rgb(136, 136, 136) solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .6s infinite linear;
    animation: spCircRot .6s infinite linear;
  }
  @-webkit-keyframes spCircRot {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
  }
  @keyframes spCircRot {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
  }


#wrapper {
  width:100%;
  overflow-x: hidden;
}


.inner{
  max-width: 1300px;
  margin:auto;
  padding:0 min(40px,4%);
  position: relative;

}
.mini{
  font-size: .8rem;
}
.flex{
  display: flex;
}
.large{
  font-size:clamp(15px,1.7vw,18px);
  line-height: 1.6;
}
.content{
  padding:clamp(80px,15vw,170px) 0;
}
.disnone{
  display: none;
}
[class*="modal-"],
.close_btn{
  display: inline-block;
  cursor: pointer;
}


/*--------- btn ---------*/
/*//////////////////////////////
   header
////////////////////////////////*/

/*-------- header -----------*/

header {
  position: fixed;
  top: min(30px,3vh);
  left:0%;
  z-index: 999;
  width:100%;
}
#header {
  padding: 0 4%;
}
#header .header {
  width:min(1200px,100%);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content:space-between;
  border-radius: 100px;
  margin:auto;

  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  --webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .4);
  filter:brightness(1.1);
}
#header .header hgroup{
  display: flex;
  align-items: center;
  width:min(456px,50%);
  padding-left:min(40px, 3%);
  gap:5%;
}
#header .header hgroup h1{
  font-size:clamp(13px,calc(16 / var(--breakWidth)) 16px);
  color:var(--subColor);
}
header .header .logoarea {
  width: min(155px,45%);
}
header .header .logoarea  a{
  display: flex;
  align-items:center;
  width: 100%;
 }
header .header .logoarea .logo{
  flex: 0 0 30%;
}
header .header .logoarea .text{
  padding-left:8%;
  flex:0 1 auto;
}
header .header .logotext{
  width:55%;
}

/*------- globalmenu -------*/

#globalmenu {
  width:60%;
  padding-right: 30px;
}
#globalmenu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(100%, 500px);
  margin: 0 0 0 auto;
}
#globalmenu ul li a{
  display: block;
  font-size:clamp(13px,calc(16 / var(--breakWidth)) 16px);
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  color:var(--subColor);
  padding:.5em 1em;
  position: relative;
}
#globalmenu ul li a span{
  position: relative;
  z-index: 5;
}
#globalmenu ul li a:after{
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  background: var(--mainColor);
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  transition:.2s ease all;
}
#globalmenu ul li a:hover::after {
  width: 100%;
}

/*------- contents -------------*/

#contents{
  position: relative;
  background:url(../img/footer_bg.jpg) no-repeat center bottom  white;
  background-size:contain;
}
#contents.toppage{
  padding-top:30vh;
}
#contents main{
  display: block;
  position: relative;
  width: 100%;
  z-index: 20;
}
/* #contents main:after{
  content:"";
  display: block;
  position: absolute;
  bottom:0;
  left:50%;
  translate: -50% 0;
  background:url(../img/footer_bg.jpg) no-repeat center bottom  white;
} */

/*------- keyvisual -------------*/

#keyvisual{
  position: relative;
  width:100%;
  height: var(--kvHeight);
  z-index: -1;
}


#keyvisual .keyvisual_image{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:  var(--kvHeight);
}

#keyvisual .keyvisual_image img{
  width:100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0;
  left:0;

  /* animation : bgAnime 20s infinite;  */  /* 4画像 × 各5s = 20s */
}

#keyvisual .keyvisual_image .kv01,
#keyvisual .keyvisual_image .ky02,
#keyvisual .keyvisual_image .ky03,
#keyvisual .keyvisual_image .ky04  {
  width:100%;
  height: 100%;
}

/* #keyvisual .keyvisual_image .kv02 {
  animation-delay  : 5s;
}
#keyvisual .keyvisual_image .kv03 {
  animation-delay  : 10s;
}
#keyvisual .keyvisual_image .kv04 {
  animation-delay  : 15s;
}
@keyframes bgAnime {
  0% { opacity: 0; scale:1; }
  5% { opacity: 1; }
 25% { opacity: 1; }
 30% { opacity: 0; }
100% { opacity: 0; scale:1.2;}
} */

#contents .main_title_cont{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0%;
  left:50%;
  translate:-50% -55%;
  z-index: 10;
}
#contents .main_title_cont:before{
  content:"";
  width:150%;
  height: 150%;
  background:#ffffff;
  border-radius: 50%;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -30%;
}

#contents .main_title{
  position: relative;
  z-index: 100;
  padding-top: 10%;
  opacity:0;
}

#contents .main_title h2{
  font-size:clamp(25px,calc(43 / var(--breakWidth)),43px);
  text-align:center;
  color:var(--btnColor);
  font-weight: 600;
  margin-bottom: min(30px, 4%);
}

#contents .main_title p {
  font-size:clamp(15px,calc(20 / var(--breakWidth)),20px);
  text-align: center;
  font-weight: 600;
}
.scroll{
  position: absolute;
  top:0;
  left:50%;
  translate:-50% -50%;
  color:var(--brightColor);
  height:max(50px,20vh);
  width: 50px;
  overflow:hidden;
  z-index: 11;
}
.scroll:before{
  content:"";
  display: block;
  width:1px ;
  height: 100%;
  background: var(--brightColor);
  position: absolute;
  bottom:0;
  left:50%;
  translate:-100% 0;
}
.scroll:after{
  content:"";
  display: block;
  width:4px ;
  height: 20%;
  background: var(--brightColor);
  position: absolute;
  left:50%;
  translate:-50% 0;
  animation: 5s ease-out infinite running slidein;
}
@keyframes slidein {
  0%{
    top:0%;
  }
  100%{
    top:100%;
  }
}

.scroll span{
  display: inline-block;
  position: absolute;
  top:0;
  left:50%;
  translate:-50% 0%;
  line-height: 1;
  background:white;
  padding-bottom: 5px;
  z-index: 50;
}


 /*-----------------------------------*/
 .sprite{
  display: none;
 }
 .btn a{
  display: block;
  border-radius:150px;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  text-align: center;
  padding:0.9em 2.3em 1em 1.8em;
  font-size:clamp(16px,calc(20 / var(--breakWidth)),20px);
  position: relative;
 }
 .btn a:after{
  content:"";
  display: block;
  aspect-ratio: 1;
  width: min(10px,5%);
  border-top:1px solid var(--btnColor);
  border-left:1px solid var(--btnColor);
  position: absolute;
  right:30px;
  top:50%;
  translate:0% -50%;
  rotate:135deg;

 }
 .white_btn a{
  background:white;
  color:var(--btnColor);
 }
 .white_btn a:after{
  border-top-color:var(--btnColor);
  border-left-color:var(--btnColor);
 }
 .white_btn a:hover{
  background:var(--subColor);
  color:white;
 }
 .white_btn a:hover:after{
  border-top-color:white;
  border-left-color:white;
 }

 .blue_btn a{
  background:var(--btnColor);
  color:white;
 }
 .blue_btn a:after{
  border-top-color:white;
  border-left-color:white;
 }
 .blue_btn a:hover{
  background:var(--subColor);
  color:white;
 }
 .blue_btn a:hover:after{
  border-top-color:white;
  border-left-color:white;
 }

 .green_btn a{
  background:#06C755;
  color:white;
 }
 .green_btn a:after{
  border-top-color:white;
  border-left-color:white;
 }
 .green_btn a:hover{
  filter:brightness(1.07);
 }
 .green_btn a:hover:after{
  border-top-color:white;
  border-left-color:white;
 }
 
/*------------ top contents ------------*/
.section_title{
  margin-bottom: min(40px,6%);
}
.section_title h3{
  font-size: clamp(20px,calc(33 / 1600 * 100vw), 33px);
  line-height: 1.6;
  color:var(--subColor);
  font-weight: 600;
  width: max-content;
  white-space: nowrap;
}
.service_content .flex{
  display: flex;
  align-items: center;
}
.section_title .sub{
  color:var(--mainColor);
  font-family: var(--enfont);
  font-size:16px;
  letter-spacing: 0.1em;
  font-weight: normal;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  width: max-content;
  white-space: nowrap;
}
.section_title .sub::before{
  content:url(../img/arrow-right.svg);
  margin-right:.5em;
}
.scroll + section{
  padding-top:calc(max(50px,20vh) / 2);
}

#top_service{
  margin-bottom: max(60px,5%);
}

#top_service:after {
  content:"";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background-image:var(--bgColor);
}
#top_service .inner{
  z-index: 50;
}
.service_content .btn {
  width:min(250px ,50%);
  margin:min(40px,5%) 0;
}
.service_content .textarea .text{
  border-left:4px solid white;
  padding-left:min(75px,8%);
}
.service_content .textarea .text p {
  font-size:clamp(14px, calc(18 / var(--breakWidth)),18px);
  line-height: 2;
}
.service_content .textarea{
  flex: 0 0 53%;
}
.service_content .photoarea{
  flex: 0 0 63%;
  position: relative;
}
.service_content .photoarea .circle_ph{
  position: absolute;
  top:50%;
  right:auto;
}
.service_content .photoarea .circle_ph .ph{
  position: relative;
  z-index: 50;
  translate: 0 -60%;
}
.circles{
  display: block;
  width: min(800px, calc(1200px * 0.60));
  height: 100%;
  position: absolute;
  top:0%;
  left: 50%;
  translate: 0% 0%;
  mix-blend-mode: multiply;
  z-index: 2;
}
.circles .wa01{
  display: block;
  width: clamp(480px,55vw,600px);
  aspect-ratio: 1;
  background: linear-gradient(#e1ddf5 0%, #d2fee0 100%);
  filter:blur(15px);
  border-radius:50%;
  position: absolute;
  top: -15%;
  right: -10%;
  }
.circles .wa02{
  display: block;
  width: clamp(320px,30vw,415px);
  aspect-ratio: 1;
  background: linear-gradient(#ffd6f3 0%, #f2f8e4 100%);
  filter:blur(5px);
  border-radius:50%;
  position: absolute;
  top: -7%;
  left: -1%;
  }
.circles .wa03{
  display: block;
  width: clamp(200px,20vw,256px);

  aspect-ratio: 1;
  background: linear-gradient(#b5cbe1 0%, #d2f6dd 100%);
  filter:blur(10px);
  border-radius:50%;
  position: absolute;
  bottom: -1%;
  left: 2%;
  }

/* --------- news ---------------/*/
#top_service{
  margin-bottom:0;
}
#news{
  padding-block:max(60px,5%) ;
  background-image:linear-gradient(35deg,#f7fff3 0%, #d4e0e3 27.62%, #b0c8dc 70.71%, #e9e9e9 100%);
}
#news .inner{
  padding:0;
}
#news .section_title{
   padding-left:min(40px,4%);
}
#news .news-content{
  padding: min(40px,8%) 0 min(20px,4%);
}
#news .news_slider {
  border-radius: 15px;
  background:rgba(255,255,255,0.88);
  position: relative;
  z-index: 100;
  padding: min(40px,8%) 0 min(20px,4%);
  padding-bottom: 50px;
}

.news_slider .swiper-window{
  overflow: hidden;
  margin-inline:min(60px,6vw);
}
.news_slider .next-arrow {
  background:url(../img/arrow.png) no-repeat center center;
  background-size:contain;
  width:40px;
  height: 40px;
  position: absolute;
  right:10px;
  top:50%;
  z-index: 100;
  cursor: pointer;
  translate: 0 -50%;
}
.news_slider .prev-arrow {
  background:url(../img/arrow.png) no-repeat center center;
  background-size:contain;
  width:40px;
  height: 40px;
  scale:-1 1;
  translate: 0 -50%;
  position: absolute;
  left:10px;
  top:50%;
  z-index: 100;
  cursor: pointer;
}
.news_swiper .swiper-pagination{
  bottom:20px !important;
}
.news_slider .news {
  width:280px;
  height: 300px;
  padding:10px;
}
.news_slider .news a{
  display: grid;
  grid-template-rows: 1fr .8fr;
  height: 100%;
  width: 100%;
  overflow:hidden;
  border-radius: 10px;
  background:white;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
}
.news_slider .news .thumbs{
  width:100%;
  height: auto;
  aspect-ratio: 275/170;
  overflow: hidden;
}
.news_slider .news .thumbs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
   transition:.3s ease all;
}
.news_slider .news a:hover .thumbs img{
  scale:1.05;
  filter:brightness(1.1);
}
.news_slider .news .textarea{
  padding:20px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.news_slider .news .ti{
  font-size:clamp(15px,calc(17 / var(--breakWidth)),17px);
  overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient:vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   text-overflow: ellipsis;
   max-height: 3.5em;
}
.news_slider .news .meta{
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.news_slider .news .meta time{
  color:#807335;
  font-size:clamp(12px,calc(12 / var(--breakWidth)),13px);
}
#news .btnarea {
  margin:30px auto 0;
}
#news .btnarea a{
  max-width: 336px;
  margin:auto;
}
.group_content .shop_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:8%;
}

.shop_area .elem{
  flex:1 0 46%;
  padding: min(50px,15%) 0;
}
.shop_area .elem.long{
  display: flex;
  gap:5%;
}
.shop_area .elem.long .thumbs{
  flex: 0 1 50%;
}
.shop_area .elem.long .shop_detail{
  flex: 0 1 45%;
}
.shop_area .thumbs {
  display: grid;
  grid-template-columns: 60% 50%;
}
.shop_area .thumbs .imgs{
  display: block;
  background:#888;
  position: relative;
  width:100%;
  aspect-ratio: 5/4;
}
.shop_area .thumbs .imgs img{
  position: relative;
  z-index: 5;
  display: block;
  background:#a0a7bd;
  width: 100%;
  height: 100%;
}
.shop_area .thumbs .imgs:after{
  content:"";
  display: block;
  width: 100%;
  height: 100%;
  border:1px solid var(--accentColor);
  position: absolute;
  top:6px;
  left:6px;
  z-index: 0;
}
.shop_area .thumbs .imgs:first-child{
  z-index: 1;
  box-shadow: 0 3px 6px rgba(0,0,0,.16) ;
}
.shop_area .thumbs .imgs:last-child{
  margin-top:20%;
  margin-left:-20%;
  background:#aaa;
  z-index: 0;
}
.shop_area .thumbs .imgs .mark{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  right:0;
  color:white;
  font-family: var(--enfont);
  width:80px;
  height: 30px;
  border-radius:10px 0 0 0;
  font-size:14px;
  background:#1FC5A3;
  text-transform: uppercase;
  text-align: center;
  z-index: 20;
  translate:20px -10px;
}
.shop_area .thumbs .imgs .mark:after{
  content:"";
  display: block;
  width:20px;
  height: 10px;
  clip-path:polygon(0% 0%, 100% 0, 0% 100%);
  background-color: var(--subColor);
  position: absolute;
  bottom:0;
  right:0;
  translate:0 100%;
}
.shop_area .thumbs .imgs .mark.new{
  background:#389AFB;
}
.shop_area .shop_detail {
  display: grid;
  grid-template-columns: 62% 35%;
  margin-top:30px;
  column-gap:2%;
}
.shop_area .shop_detail dl dt .sub{
  color:var(--mainColor);
  font-size:clamp(15px,calc(18 / var(--breakWidth)),18px);
  display: block;
}
.shop_area .shop_detail dl dt .shop_name{
  color:var(--subColor);
  font-size:clamp(20px,calc(26 / var(--breakWidth)),26px);
  display: block;
  position: relative;
  width:max-content;
  white-space: nowrap;
  padding:.3em .3em;
  margin-bottom: 30px;
}
.shop_area .shop_detail dl dt .shop_name:before{
  content:"";
  display: block;
  width: 100%;
  height: 4px;
  background:#C5C5C5;
  position: absolute;
  bottom:0;
  left:0;
  z-index: 1;
}
.shop_area .shop_detail dl dt .shop_name:after{
  content:"";
  display: block;
  width: min(30px,15%);
  height: 4px;
  background:var(--mainColor);
  position: absolute;
  bottom:0;
  left:0;
  z-index: 2;
}
.shop_detail .googlemap iframe{
  aspect-ratio: unset;
  height: 300px;
}
.shop_area .shop_detail .textarea{
  position: relative;
}
.shop_area .shop_detail .textarea .sns_icon{
  position: absolute;
  top:0;
  right:0;
}
#top_recruit {
  background:url(../img/top_recruit_bg.jpg);
  background-size:cover;
}

#top_recruit .section_title{
  margin-bottom: min(20px,5%);
}
#top_recruit .section_title h3{
  margin:auto;
  text-align: center;
}

#top_recruit .section_title p{
  margin:0 auto 20px;
}
#top_recruit .read{
  text-align: center;
  margin:0 auto 2.5em ;
}
#top_recruit .btnarea{
  width:min(300px,85%);
  margin:36px auto;
}

.blur-box {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(40px);
  --webkit-backdrop-filter: blur(40px);
  background-color: rgba(255, 255, 255, .4);
  filter:brightness(1.1);
  border-radius:min(10px,4vw);
  padding: min(60px, 10%) min(60px, 6%);
}
.works {
  display: flex;
  justify-content: center;
  gap:5%;
}
.works li{
  flex:0 1 320px;
  background:white;
  padding:10px;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}
.works li a{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius:5px;
}
.works li a .ti{
  display: flex;
  justify-content: center;
  align-items:center;
  background:rgba(44,44,44,.44);
  border:1px solid white;
  border-radius:100px;
  color:white;
  text-align: center;
  width:max-content;
  padding:.3em 1em .45em 1em;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  font-size:clamp(19px,calc(23 / var(--breakWidth)),23px);
}
.works li a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works li a:hover img{
  scale:1.1;
}
/*--------------------------------------------*/
#keyvisual-second{
  height: clamp(400px,40vw,500px);
  position: relative;
  z-index: -1;
}
#keyvisual-second .keyvisual_image{
  width:100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  height: clamp(400px,40vw,500px);
}

#keyvisual-second .keyvisual_image img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
  position: absolute;
  top:0;
  left:0;
}
.page_title{
  position: absolute;
  bottom:0;
  left:50%;
  translate:-50% 0;
  width: clamp(275px,calc(36% - 20px),485px);
}
.page_title:before{
  content:"";
  display: block;
  border-radius:100px 100px 0 0;
  width: calc(100% + 10px);
  height: 100%;
  position: absolute;
  bottom:0;
  left:50%;
  translate:-50% 0;
  background:var(--mainColor);
  z-index: 2;
}
.page_title:after{
  content:"";
  display: block;
  border-radius:100px 100px 0 0;
  width: calc(100% + 25px);
  height: 100%;
  position: absolute;
  bottom:0;
  left:50%;
  translate:-50% 0;
  background:#C5C5C5;
  z-index: 0;
}
.page_title hgroup{
  display: block;
  background:var(--subColor);
  border-radius:100px 100px 0 0;
  width: calc(100% - 20px);
  padding:clamp(15px,calc(20 / var(--breakWidth)),20px) 0;
  text-align: center;
  position: relative;
  z-index: 3;
  margin:auto;
}
.page_title h2{
  font-size:clamp(20px,calc(32 / var(--breakWidth) ),32px);
  letter-spacing: 0.1em;
  color:white;
  text-align: center;
  font-weight: 600;
}
.page_title p.en{
  color:#D2E8FE;
  text-align: center;
  font-weight: 400;
  font-family: var(--enfont);
  letter-spacing: 0.1em;
}

#message{
  background:var(--bgColor);
}
#message .inner{
  padding:clamp(40px,calc(55 / var(--breakWidth)),55px) 40px;
}
#message .message_content.flex{
  display:flex;
}
#message .message_content.flex .photoarea{
  flex : 0 0 230px;
}
#message .message_content.flex .textarea{
  flex : 1 1 auto;
  padding-left:min(40px,6%);
}
.message_content{
  position: relative;
  border-left:1px solid white;
  border-bottom:1px solid white;
  padding:clamp(30px, calc(66 / var(--breakWidth)),66px)  clamp(30px, calc(100 / var(--breakWidth)),100px) ;
}
.message_content:before{
  content:"";
  width:3px;
  height:90%;
  position: absolute;
  left:0;
  top:0;
  background:white;
}
.message_content .photoarea .imgs{
  position: relative;
  width:150px;
  aspect-ratio: 150 / 205;

  margin:auto;
}
.message_content .photoarea .imgs:after{
  content:"";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient( to bottom ,#82bffc 0%, #6278ce 100%);
  position: absolute;
  top:8px;
  left:8px;
}
.message_content .photoarea .imgs span{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}
.message_content .photoarea .imgs span img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #ddd;
  display: block;
}
.message_content .photoarea .parson {
  margin:30px auto;
  color:var(--subColor);
}
.message_content .photoarea .parson p.section{
  text-align: center;
  font-size:clamp(13px, calc(15 / var(--breakWidth)),15px);
  margin:1em auto;
  font-weight: 600;
}
.message_content .photoarea .parson p.name{
  text-align: center;
  font-size:clamp(17px, calc(21 / var(--breakWidth)),21px);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.sp-headerarea{
  display: none;
}
.corp-policy_content{
  position: relative;
  margin:8% 0 0 0;
  z-index: 100;
}
.corp-policy_content:before{
  content:"";
  display: block;
  width:80%;
  height:100%;
  background:url(../../img/policy_bg.jpg) no-repeat center center;
  background-size:cover;
  position: absolute;
  top:50%;
  left:0%;
  translate:0 -50%;
  z-index: 0;
}
.corp-policy_content:after{
  content:"";
  display: block;
  width:20%;
  height: 100%;
  position: absolute;
  right:calc(20% - 2px);
  top:50%;
  translate:0 -50%;
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, white 100%);
}
.corp-policy_content .textarea{
  position: relative;
  z-index: 10;
}
.corp-policy_title {
  position: absolute;
  top:50%;
  right:20%;
  translate:-50% -50%;
}
.corp-policy_title h4{
  color:white;
  font-size:clamp(21px,calc(30 / var(--breakWidth)),30px);
  text-align: center;
  font-weight: 600;
  line-height: 1.8;
}
.rinen{
  position: relative;
  height: clamp(400px , calc(500 / var(--breakWidth)),500px);
  width:100%;
}
.rinen li {
  width:clamp(350px , calc(440 / 1300 * 100vw),440px);
 aspect-ratio: 1;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rinen li dl{
  position: relative;
  z-index: 15;
  width: 62%;
  translate: 0 -20px;
}
.rinen li:before {
  content:"";
  display: block;
  background:white;
  border-radius:50%;
  width:100%;
  aspect-ratio: 1;
  position: absolute;
  top:50%;
  left:50%;
  translate: -50% -50%;
  z-index: 1;
}
.rinen li:after {
  content:"";
  display: block;
  background:white;
  border-radius:50%;
  width:101%;
  aspect-ratio: 1;
  position: absolute;
  top:50%;
  left:50%;
  translate: -50% -50%;
  filter:blur(10px);
  z-index: 0;
  opacity:0.7;
}
.rinen li.elem01:after {  background: linear-gradient(#e1ddf5 0%, #d2fee0 100%);}
.rinen li.elem02:after {  background: linear-gradient(#ffd6f3 0%, #f2f8e4 100%);}
.rinen li.elem03:after {  background: linear-gradient(#b5cbe1 0%, #d2f6dd 100%);}
.rinen li.elem01 {
  position: absolute;
  top: -77%;
  left: 63%;
  translate: -50% 00%;
}
.rinen li.elem02 {
  position: absolute;
  top: 38%;
  left: 84%;
  translate: -50% -50%;
}
.rinen li.elem03 {
  position: absolute;
  top: 80%;
  left: 70%;
  translate: -50% 0%;
}
.rinen li dl dt{
  margin-bottom: 30px;
}
.rinen li dl dt .en{
  display: block;
  font-size:clamp(22px,calc(35 / var(--breakWidth)),35px);
  color:var(--mainColor);
  font-weight: 600;
  text-align: center;
  margin-bottom: 5px;
}
.rinen li dl dt .ti{
  display: inline-block;
  font-size:clamp(15px,calc(19 / var(--breakWidth)),19px);
  color:var(--subColor);
  font-weight: 600;
  line-height: 1;
  padding:.2em 1em;
  text-align: center;
  position: relative;
}
.rinen li dl dt .ti:before{
  content:"";
  height: 100%;
  width:8px;
  border:1px solid var(--brightColor);
  border-right:0;
  position: absolute;
  left:0;
  top:50%;
  translate:0 -50%;
}
.rinen li dl dt .ti:after{
  content:"";
  height: 100%;
  width:8px;
  border:1px solid var(--brightColor);
  border-left:0;
  position: absolute;
  right:0;
  top:50%;
  translate:0 -50%;
}
.rinen li dl dd p{
  font-size:.95rem;
}
#operation{
  margin-top:8%;
}
.operate {
  max-width:1100px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;

}
.operate li{
  flex:0 1 24%;
  margin:0 3% 8% 3% ;
  text-align: center;
}
.operate li .imgs{
  margin:8% auto 8%;
}
.operate li .imgs img{
  width: min(110px,45%);
}
.operate li dl dt{
 font-size:clamp(16px,calc(23 / var(--breakWidth)),23px);
 color:var(--subColor);
 margin: 0 auto 1rem ;
 text-align: center;
}
.operate li dl dd p{
  text-align: left;
}
#outline{
  padding-bottom: 0;
}
#outline .grid{
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  grid-template-rows: 0.5fr 1fr; 
  gap : 20px 40px;
}
#outline .grid .photoarea{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
#outline .grid .titlearea{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

#outline .grid .detailarea{
  grid-column : 2 / 3 ;
  grid-row : 2 / 3  ;
}
#outline .grid .photoarea .imgs{
  position: relative;
  width: 100%;
  height: 100%;
}
#outline .grid .photoarea .imgs img{
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#outline .grid .photoarea .imgs:after{
  content:"";
  z-index: 5;
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  left:8px;
  top:8px;
  background-image:linear-gradient(#82bffc 0%, #6278ce 100%);

}
.outline table{
  border-collapse:collapse;
  width: 100%;
}
.outline table tr th,
.outline table tr td{
  border-bottom:1px solid #C5C5C5;
  padding:.7em 1em;
  text-align: left;
  font-weight: 500;
  border-collapse:collapse;
  text-align: left;
}
.outline table tr th{
  border-bottom-color:var(--brightColor);
}
#outline .outline table tr th{
  width:6em;
  text-align: right;
}
#outline .googlemap {
  margin:clamp(40px,10%,60px) 10px 0;
}
#outline .googlemap iframe{
  aspect-ratio: unset;
  height: 300px;
}
/* .recruit_nav {
  background:#F2F2F2;
  padding:min(30px,4%);  
  max-width: 856px;
  margin:auto;
}
.recruit_nav ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;

}
.recruit_nav ul li a{
  display: block;
  color:white;
  text-align: center;
  padding:.4em 1em .5em 1em;
  border-radius:10px;
  background:var(--mainColor);
  font-size:clamp(17px,calc(20 / var(--breakWidth)),20px);
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}
.recruit_nav ul li a:hover{
  filter:brightness(1.1);
} */
.title2 span{
  font-size:clamp(20px,calc(23 / var(--breakWidth)),23px);
  text-align:center;
  background:white;
  padding:.3em 2em;
  position: relative;
  z-index: 10;
  display: block;
  width:max-content;
  margin:auto;
  white-space: nowrap;
}
.title2 span:before{
  content:"";
  display: block;
  background:url(../../img/maru.svg) no-repeat center center;
  background-size:cover;
  width:17px;
  aspect-ratio: 1;
  position: absolute;
  left:0;
  top:50%;
  translate:50% -50%;
  z-index: 12;
}
.title2 span:after{
  content:"";
  display: block;
  background:url(../../img/maru.svg) no-repeat center center;
  background-size:cover;
  width:17px;
  aspect-ratio: 1;
  position: absolute;
  right:0;
  top:50%;
  translate:-50% -50%;
  z-index: 11;
}
.title2 {
  position: relative;
  margin:min(80px,8%) auto 20px;
  max-width: 640px;
}
.title2:after {
  content:"";
  display: block;
  width:100%;
  height: 3px;
  background: linear-gradient(to left,#fff 0%, #389afb 52.3%, #fff 100%);
  position: absolute;
  top:50%;
  left:0%;
  translate:0% -50%;

}
#recruit{
padding-block: min(60px,8%);
}
#recruit .job{
  border:1px solid var(--brightColor);
  position: relative;
  padding:min(40px,4%);
  max-width: 1060px;
  margin:auto;
  
}
#recruit .job:before{
  content:"";
  display: block;
  width:100px;
  height: 4px;
  background:var(--brightColor);
  position: absolute;
  top:0;
  left:50%;
  translate:-50% 0;
}

#recruit hgroup:not(.section_title){
  margin-bottom: 2em;
  border-left: 3px solid var(--accentColor);
  padding-left: 1em;
}

#recruit hgroup .entry-date{
  font-size:11px;
  color:#807335;
}
#recruit hgroup .entry-recruit-title{
  font-size: 1.5em;
  color: var(--mainColor);
}
#recruit .pr_text{
  display: flex;
  gap:25px;
  margin-bottom:min(30px,5%);  
}
#recruit .pr_text .textarea{
  flex:1 1 60%;
}
#recruit .pr_text .imagearea{
  flex:0 1 430px;
}
#recruit .pr_text .imagearea .imgs{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
}
#recruit .pr_text .imagearea .imgs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#recruit .pr_text h3{
  color:var(--mainColor);
  font-size:clamp(18px,calc(22 / var(--breakWidth)),22px);
  margin-bottom: 1em;
}
#recruit .pr_text p{
  margin-block:1.5em;
}
#recruit .recruit_post {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap:15px;
}
#recruit .recruit_post .flex{
  gap:20px;
  display: flex !important;
}
#recruit .element {
  border:1px solid var(--accentColor);
  padding:min(20px,4%);
}
#recruit .element .thumbs{
  width:min(111px,35%);
  height: auto;
  aspect-ratio: 1;
  border-radius:16px;
  overflow: hidden;
}
#recruit .element .thumbs .imgs{
  width: 100%;
  height: 100%;
}
#recruit .element .thumbs .imgs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s ease all;
}
#recruit .element .thumbs .imgs a:hover img{
  scale: 1.05;
}
#recruit .element h4{
  font-size:clamp(18px,calc(23 / var(--breakWidth)),23px);
  color:var(--subColor);
}
#recruit .element h4 a{
  color:inherit;
}
#recruit .element h4 a:hover{
  text-decoration: underline;
}
#recruit .tag {
  font-size:1rem;
  margin:20px auto 0;
  max-width: 1000px;
  line-height: 1.4;
}
#recruit .tag a{
  display: inline-block;
}
#recruit table.outline tr th{
  width:8em;
}
#recruit table.outline tr td p{
  margin-bottom: 1em;
}
#recruit table.outline tr td p:last-child{
  margin-bottom: 0;
}

.recruit_btnarea {
  /* position: fixed;
  bottom:0;
  left:50%;
  translate:-50% 0; */
  z-index: 889;
  width:min(600px,100%) ;
  height: auto;
  padding: 1em;
  margin:min(60px,8%) auto;
}
.recruit_btnarea .recruit_btn a{
  background:#807335;
  color:white;
  border-radius: 10px  ;
  padding:1em;
}
.recruit_btnarea .recruit_btn a:hover{
  background:#9c8e44;
}


/*--------- modal ----------*/
.modal-info{
  text-align: center;
  width: 100%;
}
.modal-info p.ti{
  text-align: center;
  margin:1em auto;
}
.modal-info p.name{
  text-align: center;
  font-size:20px;
  font-weight: 600;
  color:var(--subColor);
  margin:1em auto;
}
.modal-info p.txc{
  text-align: center;
  margin:0 auto 40px;
}
.modal-info .qr{
  margin:40px auto;
}
.modal-info .btnarea{
  margin:30px auto;
  width:min(350px,85%);
}
.modal-info .btnarea .btn a{
  font-size:clamp(18px, calc(23 / var(--breakWidth)), 23px);
  font-weight: 600;
  padding: 0.5em 1.5em .4em 1.5em;
}
.modal-info .btnarea .btn a:after{
  display: none;
}
/*--------------------------------------------*/
#footer_contact{
  position: relative;
  padding:160px 0 clamp(40px, calc(60 / var(--breakWidth)), 60px) ;
}
#footer_contact:before{
  content:"";
  display: block;
  width:1px;
  height: 80px;
  background:var(--brightColor);
  position: absolute;
  top:0;
  left:50%;
  translate: -50% 0;
}
#footer_contact:after{
  content:"";
  display: block;
  width:3px;
  height: 30px;
  background:var(--brightColor);
  position: absolute;
  top:0;
  left:50%;
  translate: 0% 0;
}
#footer_contact p.read{
  text-align: center;
  margin:1rem auto;
}
#footer_contact .section_title h3{
  margin:auto;
}
#footer_contact .section_title .sub{
  margin:0 auto 20px;
}
#footer_contact .box-content{
  background:rgba(255,255,255,.4);
  border:1px solid white;
  padding:min(40px,5%);
}
#footer_contact .inner{
  width: min(100%,950px);
}

#footer_contact .flex{
  display: flex;
  margin:1.5em 0 0 0;
  justify-content: center;
  align-items: center;
}

#footer_contact .telfax {
  border-right:1px solid  var(--brightColor);
  padding-right:5%;
  margin-right:5%;
  flex: 0 0 50%;
}
#footer_contact .telfax p{
  font-family: var(--enfont);
  font-weight: 500;
  letter-spacing: 0.025em;
  font-size:33px;
  color:var(--mainColor);
  white-space: nowrap;
}
#footer_contact .telfax p:before{
  content:"TEL";
  color:white;
  background:var(--accentColor);
  padding:.4em 1.5em .3em;
  text-align: center;
  font-family: var(--enfont);
  margin-right:1em;
  font-size:16px;
  vertical-align: .4em;
}
#footer_contact .telfax p.faxno:before{
  content:"FAX";
}
#footer_contact .btnarea{
 flex: 0 1 43%;
}
.contact_btn img{
  margin-right:.5em;
}
.contact_btn{
  margin:1em ;
}
.contact_btn a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width:100%;
  background: #0b88ab;
  border: 1px solid #fff;
  border-radius:10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  color:white;
  font-size:clamp(15px, calc(18 / 1300 * 100vw),18px);
}

/*--------------- contact form ------------------*/

#contact-form .btm_border{
  border-bottom:1px solid var(--accentColor);
  margin-bottom: 20px;
  padding-bottom: 20px;

}
#contact-form .for-recruit p:first-child{
  margin:1.5em;
}
.green{
  color: var(--mainColor);
}
.red{
  color:red;
}
#contact-form{
  font-size:clamp(14px,calc(16 / 1200 * 100vw),16px);
}
.cform_content .read{
  font-weight: 500;
}
.cform_content .formarea{
  margin:min(40px,6%) auto ;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
  border-radius: 10px;
  padding:min(40px,5%) min(40px,4%) ;
}
#select_sekoubukken{
  opacity:.3;
  pointer-events: none;
}
/*////////// footer /////////////*/
#footer{
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  --webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .4);
  filter:brightness(1.1);
  padding: min(40px,10%) 0 30px;
  position: relative;
}
#footer .corp_name {
  font-size:clamp(16px,calc(20 / var(--breakWidth)),20px);
  font-weight: 600;
  color: var(--subColor);
  margin-bottom: 1rem;
}
#footer .corp_address {
  font-size:13px;
  font-weight: 600;
}
#footer .corp_telno {
  font-size:1.2rem;
  font-weight: 600;
  color: var(--subColor);
}
#footer .footerlink{
  display: flex;
  margin-top:min(80px,8%);
}
#footer .footerlink li{
  padding: 0 1rem;
  border-right:1px solid var(--brightColor);
}
#footer .footerlink li:last-child{
 border:0;
}

#footer .footerlink li a{
  color:var(--subColor);
}
#footer .footerlink li a:hover{
  color: var(--mainColor);
}
#footer .copyrignt{
  max-width:var(--innerWidth);
  margin:auto;
}
#footer .copyrignt p{
  font-size:11px;
  text-align: left;
  letter-spacing: .1em;
  font-family: var(--enfont-reg);
  margin:1rem 0 ;
}
.gototop {
  position: fixed;
  width:45px;
  height: 45px;
  bottom:30px;
  right:30px;
  z-index: 100;
  cursor: pointer;

}
.gototop {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(50px);
  --webkit-backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .4);
  filter:brightness(1.1);
  border-radius:100%;
  border:1px solid #AFC2D5;
  transition: .5s ease all;
}
.gototop span:after{
  content:"";
  display: block;
  aspect-ratio: 1;
  width: 10px;
  border-top:1px solid var(--btnColor);
  border-left:1px solid var(--btnColor);
  position: absolute;
  right:50%;
  top:50%;
  translate:50% -25%;
  rotate:45deg;
}
.gototop:hover {
  translate:0 -5px ;
}
/*------------- privacy -------------*/

#privacy h4{
  font-size:clamp(17px,calc(20 / var(--breakWidth)),20px);
  margin: 50px 0 15px;
  color:var(--btnColor);
  font-weight: 600;
}
#privacy p{
  font-size:clamp(13px,1.4vw,14px);
  margin-bottom: 1em;
}

/*-------------postcontents---------------*/
#post {
  padding-inline: min(30px,5%);
}
#post .element{
  background:white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.20);
  margin:min(35px,8%) 0;
}
#post .section_title i.icon{
  margin-right:5px;
  color:var(--accentColor);
}
#post .element h3{
  margin:1.5em auto;
  
}
#post .element h3,
#post .postlist h4{
  font-size:clamp(18px,calc(25 / var(--breakWidth)),25px);
  font-weight: 600;
  color:var(--mainColor);
}
#post .postlist h4{
   font-size:clamp(17px,calc(20 / var(--breakWidth)),20px);
   margin-block: 1.2em;
  overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient:vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   text-overflow: ellipsis;
   max-height: 3em;
  }
#post .element .thumbs .imgs,
#post .element .thumbs .imgs a{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
#post .element .thumbs .imgs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#post .element .thumbs .imgs a:hover img{
  scale:1.1;
  filter:brightness(1.1);
}
#post .postlist .meta{
  padding-block:1em ;
}
.post-categories{
 display: flex;
}
.post-categories:before{
  content:"\e94d";
  font-family: "icomoon" , serif;
  color:var(--brightColor);
  margin-right:5px;
  vertical-align: middle;
  translate:0 .1em;
}
.tag{
  position: relative;
  font-size:12px;
}
.tag:before{
  content:"\e954";
  font-family: "icomoon" , serif;
  color:var(--brightColor);
  margin-right:5px;
  vertical-align: middle;

}
#post .element .postcontents{
  padding:min(60px,5%);
}



/*----- post style-----------*/
#post .element .postcontents h2{
  color: #d271d1;
  font-size: clamp(20px,calc(26 / var(--breakWidth)),26px);
  margin: 1.5em 0 1em;
  border-bottom: 2px dotted #d0c2c9;
  padding-bottom: .3em;
}
#post .element .postcontents h3{
  margin:1.5em 0 1em;
}
#post .element .postcontents h4{
  border-left: 5px solid var(--accentColor);
  font-size: 20px;
  padding-left: .5em;
  margin:1.5em 0 1em;
}
#post .element .postcontents h5{
  font-size: 18px;
  background: #C7DAEE;
  padding: .3em 1em;
  width: fit-content;
  min-width: 0;
  margin:1.5em 0 1em;
}
#post .element .postcontents h6{
  font-size:1em;
  margin:1.5em 0 1em;
}
#post .element .postcontents h6:before{
  content:"●";
  color:#d271d1;
  margin-right:.3em;
}
#post .element .postcontents　.wp-block-group {
  gap:1.5em;
}

/*// gutenberg //*/
.wp-block-table{
  border-width:1px;
}
.wp-block-table thead{
  border-bottom-width:1px;
}

.postlist .thumbs{
  flex:1 0 40%;
  max-width: 400px;
}

#post .textarea{
  padding:min(30px,5%) min(50px,5%);
}
#post .postlist .textarea{
  flex:1 1 auto;
  padding:min(30px,5%) min(50px,5%);
}
#post .postlist .element .flex{
  align-content:center ;
}
#post .postcontents p {
  font-size:clamp(14px, calc(16 / var(--breakWidth)),16px);
  margin-block:1.5em;
}
.postlist .post_excerpt {
  border-bottom:1px solid var(--brightColor);
  position: relative;
  padding-bottom: 2em;
}
.postlist .post_excerpt p{
  overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient:vertical;
   -webkit-line-clamp: 2;
   line-clamp: 3;
   text-overflow: ellipsis;
   max-height: 6em;
}
.postlist .post_excerpt .more_link a{
  display: inline-block;
  line-height: 1;
  color:white;
  background:var(--btnColor);
  border-radius: 50px;
  font-size:15px;
  padding:.3em 1em .5em;
  position: absolute;
  right:0;
  bottom:0;
  translate:0 50%;
}
.postlist .post_excerpt .more_link a:hover{
  background:var(--brightColor);
}

/*--- pager ---*/

.pager{
	display: flex;
	align-items: center;
	justify-content: center;
	margin:60px auto;
  font-family: var(--enfont);
}
.pager a,
.pager span{
	display: block;
	text-align: center;
	padding:.3em 1em;
	margin:10px;
	border-radius: 100px;
	width:fit-content;
	position: relative;
}
.pager a{
	background:var(--brightColor);
	color:white;
}
.pager span{
	background:var(--mainColor);
	color:white;
}

.pager.single a{
	width:100%;
	max-width: 150px;
	margin:0 .5em ;
	font-size:16px;
}
.pager.single a.prev{
	padding:.3em .3em .3em 1.8em ;
}
.pager.single a.next{
	padding:.3em 1.8em .3em .3em ;
}
.pager.single a.prev:after{
	content:"\e917";
	font-family: "icomoon";
	position: absolute;
	left:1em;
	top:50%;
	transform:translate(0,-50%);
}
.pager.single a.next:before{
	content:"\e918";
	font-family: "icomoon";
	position: absolute;
	right:1em;
	top:50%;
	transform:translate(0,-50%);
}
.pager a.home{
	background:var(--mainColor);
}

.pager a:hover{
	background:var(--subColor);
}
/*----------- wp-block --------*/

.wp-block-embed iframe{
  width:min(600px,100%);
  height: auto;
  aspect-ratio: 16/9;
}