@charset "UTF-8";
img{width: 100%; height: auto;}
html{scroll-behavior: smooth;}
br.pc{display: none;}
.btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}
a{color: #333;}
a:hover{opacity: 0.8;}


header{position: relative; text-align: center; margin: 0 auto; max-width: 900px; padding: }
header .fixedbox{position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 10000; height: 60px;  left: 50%; transform: translate(-50%, 0); padding: 20px 3%;}

h1{display: flex; justify-content: left; align-items: center;}
h1 #logo{width: 150px; z-index: 10;}
.recruit_bn{width: 70px; margin-left: 10px;}

/* チェックボックスは非表示に */
.drawer{position: absolute; right: 0;top: -3px;}
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 30px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(0, 0, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(35deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-35deg);
}
  
/* メニューのデザイン*/
.drawer-content {z-index: 100; padding: 8% 5%;
  width: 100%; font-size: 24px;
  height: auto;
  position: fixed;
  top: 60px;
  left: 100%;
  z-index: 99;
  background: #fff;
  transition: .5s;
}
.drawer-content ul li{margin-bottom: 20px;}
.drawer-content a{text-decoration: none;}
/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}
.entry{width: 220px; margin: 25px auto 0 auto;}

body{background: #fff; margin: 0 auto;   font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; color: #333;}
.wid1200{max-width: 1000px; margin: 0 auto;}
.gnavi__wrap{display: none;}
.h_entry{display: none;}

@media only screen and (min-width:768px) {
br.pc{display: inherit;}
br.sp{display: none;}
header .fixedbox{height: 70px; }
h1 #logo{width: 250px; z-index: 10;}
.h_entry{width: 109px; display: inherit; position: absolute;top: 0; right: 0;}
.drawer{display: none;}
.gnavi__wrap{display: inherit;}
.gnavi__wrap {margin: -40px 30px 0 auto;
    width: 220px;
}
.gnavi__lists {
    display: flex;
}
.gnavi__list {
    width: 100%;
    height: 60px;
    position: relative;
    transition: all .3s;
}
.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #333;
}
ul.dropdown__lists {
    display: none;/*デフォルトでは非表示の状態にしておく*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}

.gnavi__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #fff;
    height: 60px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #eee;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

}

/*===========
inview
===========*/

.fadeIn {
  opacity: 0;
  transition: 3s;}
.fadeIn.is-show {  opacity: 1;}


h3{font-size: clamp(2rem, 2rem + 2.06vw, 3.5rem);  text-align: center;}
.eng{max-width: 140px; margin: 0 auto;}

#fv{ text-align: left;
background: #A9B6B8; 
background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%);
color: #fff;  padding: 70px 5% 5% 5%; width: 100%;}
#fv .eng{width: 31vw; max-width: 180px; margin-left: 0;}
h2{font-size: clamp(2.5rem, 1.471rem + 5.15vw, 4.688rem); margin-bottom: 20px;}
#fv p{font-size: clamp(0.875rem, 0.728rem + 0.74vw, 1.188rem); margin-bottom: 20px; line-height: 1.7;}

@media only screen and (min-width:768px) {
.eng{max-width: 180px; margin: 0 auto;}
#fv{text-align: center; padding: 100px 5% 60px 5%;}
#fv .eng{width: 31vw; max-width: 180px; margin-left: auto;}
#fv h2{margin-bottom: 50px;}
#fv h2 br{display: none;}
.sp{display: none;}
#fv p{margin-bottom: 30px;}
}

#selection{background: #A9B6B8; padding: 10px 0px;
background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%);
}
#selection ul li{margin: 10px 0; position: relative;}
#selection ul li .txt{position: absolute; color: #fff; font-weight: 600; top: 50%; transform: translate(10%, -50%);  font-size: clamp(1.563rem, 1.121rem + 2.21vw, 2.5rem);}
#selection ul li br{display: none;}

@media only screen and (min-width:768px) {
#selection {padding: 0;}
#selection ul{ display: flex; text-align: center;}
#selection ul li{margin: 0;}

#selection ul li br{display: inherit;}

#selection ul li .txt{position: absolute; color: #fff; font-weight: 600; bottom: 2vw;top: auto; margin: auto; right: 0; left: 0; transform: none;  font-size: clamp(1.563rem, 1.121rem + 2.21vw, 1.5rem); text-align: center; letter-spacing: 0;line-height: 1.1; font-size: clamp(1.5rem, -0.569rem + 4.31vw, 2.125rem);}
#selection ul li .txt span{font-size: clamp(1rem, -0.655rem + 3.45vw, 1.5rem); }
}





#advantage{background: #A9B6B8; padding: 8% 5%; color: #fff;
background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%);}
#advantage h4{ font-size: clamp(1.8rem, 1.2rem + 1.75vw, 2.875rem); border-left: 5px solid #fff; padding-left: 15px; line-height: 1; margin-top: 8%;}
#advantage h4 span{font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);}
#advantage p{font-size: 14px; margin-top: 5%; line-height: 1.7;}
#advantage ul{display: flex; gap: 4%; margin-top: 5%;}

@media only screen and (min-width:768px) {
#advantage{padding: 50px 5%;}
#advantage .pointbox{display: flex; max-width: 1000px; margin: 0 auto;}
#advantage .point{width: 50%;}
#advantage ul{width: 48%; margin-left: 2%; gap: 2%; margin-top: 30px;}
}

#philosophy{background: #dde0da; padding: 8% 5%; color: #666666;}
#philosophy ul{display: flex; gap: 3%; margin-top: 8%; flex-wrap: wrap; justify-content: center;}
#philosophy ul li{width: 31% ; margin-top: 3%;}
#philosophy p{font-size: 16px; text-align: center; margin-top: 8%; line-height: 2;}
#philosophy p span{font-size: 21px; font-weight: 600;}

@media only screen and (min-width:500px) {
#philosophy p{font-size: 18px; text-align: center; margin-top: 5%;}
#philosophy p span{font-size: 24px; font-weight: 600;}
}

@media only screen and (min-width:768px) {
#philosophy{padding: 50px 5%;}
#philosophy ul{max-width: 1000px; margin: 0 auto;display: flex; gap: 2%; margin-top: 50px; flex-wrap: wrap; justify-content: center;}
#philosophy ul li{width: 18% ; margin-top: 0;}
#philosophy p{font-size: 20px; text-align: center; margin-top: 40px;}
#philosophy p span{font-size: 29px; font-weight: 600;}

}

#about{background: #A9B6B8; padding: 8% 0; color: #fff;
background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%);}
#about h3{ font-weight: bold; text-align: center;
  margin:0 auto 5%; font-size: clamp(2.375rem, 1.384rem + 4.29vw, 4.063rem);
  background: linear-gradient(45deg,rgba(255, 242, 31, 1) 0%, rgba(237, 192, 113, 1) 18%, rgba(220, 148, 134, 1) 60%, rgba(207, 105, 139, 1) 89%, rgba(192, 58, 176, 1) 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#about .aboutbox01, #about .aboutbox02{position: relative;}
#about .comment{position: absolute;  top: 11vw; left: 5%;}
#about .comment h4{font-size: clamp(1.6rem, 0.7rem + 4vw, 3rem);; line-height: 1.3; letter-spacing: 0;}
#about .comment p.pc{display: none;}
#about p{font-size: 14px; padding: 5%; line-height: 1.6;}

@media only screen and (min-width:450px) {
#about .comment{top: 13vw; left: 5%;}
}
@media only screen and (min-width:768px) {
#about{padding: 80px 0 50px 0;}
#about .aboutbox01, #about .aboutbox02{position: relative;}
#about .aboutbox01 .comment{top: 10vw; left: 5%;}
#about .aboutbox02 .comment{top: 10vw; right: 5%;}
#about .comment p.pc{display: inherit;}
#about .aboutbox01{margin-right: 8%;}
#about .aboutbox02{margin-left: 8%; margin-top: 30px;}
#about .aboutbox01 p{font-size: 16px; padding: 10px 30px 0 0; line-height: 1.6;}
#about .aboutbox02 p{font-size: 16px; padding: 10px 0 0 0; line-height: 1.6; text-align: right;}
#about .aboutbox02 .comment h4{text-align: right;}

}
@media only screen and (min-width:1000px) {
#about .aboutbox01 .comment{  top: 50%;
  transform: translateY(-50%);
 margin: auto; left: 10%;}
#about .aboutbox02 .comment{  top: 50%;
  transform: translateY(-50%);
 right: 10%;}
#about img {width: 100%; height: 500px; object-fit: cover;}

#philosophy p{font-size: 18px; }
#about .aboutbox01 p{font-size: 18px;}
#about .aboutbox02 p{font-size: 18px;}
}

#entrybtn{background: #dde0da; padding: 7% 5%; }
#entrybtn ul {display: flex; gap: 5px; margin: 0 auto; width: 96%;}

@media only screen and (min-width:1000px) {
#entrybtn ul{max-width: 800px; margin: 0 auto; gap: 10px;}
}

/*footer*/

footer{padding:5% 5% 35% 5%; background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%); margin: 0 auto;  text-align: center ; color: #fff;}
footer p{font-size: 10px; line-height: 2; max-width: 1000px; margin: 0 auto;}

@media only screen and (min-width:768px) {
footer{padding:50px 5% 100px 5%;}
footer .copyright{font-size: 14px;}
}


#maincontainer #d_fv{background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%); margin: 0 auto; margin-top: 70px; padding-bottom: 10%;  text-align: left ; color: #fff;}
#maincontainer .d_eng{max-width: 150px; margin: -35% auto 0 5%;}
#maincontainer .d_eng02{max-width: 170px; margin: 0 0 10px 0;}
#maincontainer h2{padding:5px 5%; margin-bottom:0;}
#maincontainer h2 span{font-size: 0.6em;}
#maincontainer p{line-height: 1.5;}
#maincontainer #d_fv h3{text-align: left; font-size: clamp(1rem, 0.655rem + 3.45vw, 1.5rem); margin: 0 ; padding: 0 5%;}
#maincontainer #d_fv p{padding: 20px 5%; font-size: 14px;}
#maincontainer #comment01{background: #C1BCAE;
background: linear-gradient(45deg,rgba(193, 188, 174, 1) 0%, rgba(142, 153, 154, 1) 99%);
color: #fff; padding: 15% 5%;}
#maincontainer #comment01 h3{text-align: left; font-size: 18px; margin: 0 ;}
#maincontainer #comment01 p{font-size: 14px; padding: 20px 0;}

#maincontainer #comment02{background: linear-gradient(45deg,rgba(169, 182, 184, 1) 0%, rgba(231, 225, 207, 1) 100%);
color: #fff; padding: 15% 5%;}
#maincontainer #comment02 h3{text-align: left; font-size: 18px; margin: 0 ;}
#maincontainer #comment02 p{font-size: 14px; padding: 20px 0;}
#maincontainer #requipment{text-align: center; background: #dde0da; color: #666666;  padding: 15% 5%;}
#maincontainer #requipment .d_eng02{max-width: 130px; margin: 0 auto; text-align: center;}


#maincontainer .tab-2 {margin-top: 20px;
    display: flex; 
    flex-wrap: wrap;
    gap: 0 5px;
    max-width: 1000px; justify-content: center; flex-wrap: wrap;
}

#maincontainer .tab-2 > label {
    order: -1;
    width: calc(33.3% - 4px);
    padding: .6em 1em;
    background-color: #bdbfba;
    color: #fff; margin-bottom: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

#maincontainer .tab-2 > label:hover {
    background-color: #7e7e7e;
}

#maincontainer .tab-2 input {
    display: none;
}

#maincontainer .tab-2 > div {
    display: none; font-size: 14px; text-align: left;
    width: 100%;
    background-color: #fff; margin-top: 20px;
}

#maincontainer .tab-2 table th, #maincontainer .tab-2 table td{padding: 5% 2%; font-size: 14px; line-height: 1.5;}
#maincontainer .tab-2 table th{background: #bdbfba; color: #fff; width: 100px; text-align: center; border-bottom: 1px solid #ccc;}
#maincontainer .tab-2 table td{color: #666; width: calc(100% -100px); text-align: left; border-bottom: 1px solid #ccc;}

#maincontainer .tab-2 label:has(:checked) { background: #7e7e7e;}
#maincontainer .tab-2 label:has(:checked) + div {display: block;}
#maincontainer .tab-2 a{color: #aa1606; text-decoration: underline;}
#entrybox{width: 70%; max-width: 380px; margin: 30px auto; }

@media only screen and (min-width:768px) {
#maincontainer #d_fv{ margin: 0 auto; margin-top: 70px; padding-bottom: 70px;}
#maincontainer .d_eng{max-width: 220px; margin: -15% auto 0 5%;}
#maincontainer .d_eng02{max-width: 150px; margin: 0 0 10px 0;}
#maincontainer h2{padding:5px 5%; margin-bottom:0;}
#maincontainer p{line-height: 1.5;}
#maincontainer #d_fv h3{text-align: left; font-size: 38px; padding: 0 5%; margin:5px 0 20px 0;}
#maincontainer #d_fv p{padding: 10px 5%; font-size: 16px;}

#maincontainer #comment01{ padding: 70px 5%;}
#maincontainer #comment01 h3{font-size: 38px; margin: 0 ;}
#maincontainer #comment01 p{font-size: 16px; padding: 20px 0;}

#maincontainer #comment02{padding: 70px 5%;}
#maincontainer #comment02 h3{text-align: left; font-size: 38px; margin: 0 ;}
#maincontainer #comment02 .flexbox p{font-size: 16px; padding:0 0  40px 0;}
#maincontainer .flexbox{display: flex; flex-direction:row-reverse; margin-top: 30px;}
#maincontainer .flexbox .leftbox{width: 30%; margin-right: 30px;}


#maincontainer #requipment{padding: 70px 5%;}
#maincontainer #requipment .d_eng02{max-width: 130px; margin: 0 auto; text-align: center;}


#maincontainer .tab-2 {margin-top: 20px;
    display: flex; 
    flex-wrap: wrap;
    gap: 0 5px;
    max-width: 1000px; justify-content: center; flex-wrap: wrap;
}

#maincontainer .tab-2 > label {
    order: -1;
    width: auto;
    color: #fff; margin-bottom: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}


#maincontainer .tab-2 > div {
    display: none; font-size: 14px; text-align: left;
 margin-top: 20px;
}

#maincontainer .tab-2 table th, #maincontainer .tab-2 table td{padding: 20px 2%; font-size: 16px; line-height: 1.5;}
#maincontainer .tab-2 table th{width: 150px;}
#maincontainer .tab-2 table td{color: #666; width: 80%; }
#entrybox{width: 70%; max-width: 380px; margin: 50px auto 0 auto;}
}


@media only screen and (min-width:1100px) {
#maincontainer .d_eng{max-width: 240px; margin: -20% auto 3px 3px;}
#maincontainer .d_eng02{max-width: 220px;}
#maincontainer #requipment .d_eng02{max-width: 180px;}

#maincontainer h2{ padding: 0 ;}
#maincontainer #d_fv h3{ padding: 0 ;}
#maincontainer #d_fv p{padding: 10px 0;}
#maincontainer .d_fv_main{ margin: -5% 0 0 auto;}
#maincontainer .tab-2 > label {font-size: 18px;}
#maincontainer #d_fv p{font-size: 18px;}
#maincontainer #comment01 p{font-size: 18px;}
#maincontainer #comment02 .flexbox p{font-size: 18px;}
#maincontainer #d_fv h3{font-size: 45px;}
#maincontainer #comment01 h3{font-size: 45px;}
#maincontainer #comment02 h3{font-size: 45px;}
}

@media only screen and (min-width:1500px) {
#maincontainer .d_eng{ margin: -25% auto 0 0;}
}
@media only screen and (min-width:2000px) {
#maincontainer .d_eng{ margin: -30% auto 0 0;}
}


h2.font_ym{margin: 70px 0 0 10px;}
@media only screen and (min-width:768px) {
h2.font_ym{padding-top: 80px; max-width: 1000px; margin: 70px auto 0 auto;}
}

section .detail_btn{
display: block;
    border: none;
    padding: 20px;
    background-color: #aa1606;
    text-align: center;
    letter-spacing: -0.05em;
    font-size: 20px;
    color: #fff;
}

section .back_btn{display: block;
    border: none;
    padding: 20px;
    background-color: #666;
    text-align: center;
    letter-spacing: -0.05em;
    font-size: 20px;
    color: #fff;
}

@media only screen and (min-width:768px) {
section .detail_btn{width: 50%;}
section .back_btn{width: 50%;}

}


html {
  scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}

.header-navFixed {
display: none;
position: fixed; /* 固定 */
transition: bottom .5s; /* アニメーション効果を追加 */
width: 80%; margin: 0 auto; left: 0; right: 0;
}

#js-header.is-show {display: inherit; bottom: 10px; z-index: 10;}

@media only screen and (min-width:768px) {
.header-navFixed {display: none;}

}