/*サブページヘッダー*/
.sub_header{
    max-width: var(--page-width);
    width: 100%;
    min-width: var(--page-min-width);
    padding:var(--section-margin) var(--page-padding) 0;
    margin:0 auto var(--section-margin3);
    position: relative;
    z-index: 1;
}
.sub_header h1{
    padding-left: var(--section-margin);
}
.sub_header h1 img.title{
    width: 500px
}
@media screen and (max-width: 768px) {
  .sub_header{
        margin-top:var(--section-margin6);
    }
    .sub_header h1{
        padding-left: 0;
    }
    .sub_header h1 img.title{
        width: 100%;
    }
}
#about{
  width: 100%;
  min-height: 100vh;
  background:
    linear-gradient(to right, transparent 40%, #fff 40% 100%),
    url('http://test.qder.jp/wp-content/uploads/paralax.png') left center/40% 100% no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  margin-bottom: var(--section-margin);
}
#about .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:var(--section-margin3) var(--page-padding) var(--section-margin) 0;
  margin-top: calc(var(--section-margin6) * -1);
}
#about .box_wrap{
  width: 100%;
  padding: 0 0 0 50%;
  box-sizing: border-box;
}
#about .box_wrap .text_wrap{
  width: 100%;
  margin-bottom: var(--section-margin6);
}
#about .box_wrap .text_wrap:last-child{
  margin-bottom: 0;
}
#about h2.about_title{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--blue-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
  text-align: left;
}
#about p.p01{
  font-size: 100px;
  font-weight: 500;
  font-size: var(--font-x);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin2);
  text-align: left;
}

#about h3.h01{
  width: 100%;
  display: block;
  font-size: var(--font-x);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--primary-color);
}
#about p.p02{
  width: 100%;
  display: block;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin2);
}
#about p.p02:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #about{
    width: 100%;
    min-height: 100vh;
    background:
      linear-gradient(to right, transparent 20%, #fff 40% 100%),
      url('http://test.qder.jp/wp-content/uploads/paralax.png') left center/40% 100% no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin-bottom: var(--section-margin);
  }
  #about .box_wrap{
    width: 100%;
    padding: 0 0 0 20%;
    box-sizing: border-box;
  }

}



#about_message{
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #FFF 0% 300px, var(--about_message-color) 300px 100%);
  padding-bottom: var(--section-margin);
}
#about_message .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
}
#about_message .staff_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
  margin-bottom: var(--section-margin6);
}
#about_message .staff_wrap .staff_item{
  width: 40%;
}
#about_message .staff_wrap .staff_item img.staff_img{
  width: 100%;
  padding-left: 10%;
}
#about_message .staff_wrap .staff_content{
  width: 47%;
  margin-top: 30%;
}
#about_message .staff_wrap .staff_content .staff_title{
  font-size: var(--font-x);
  font-weight: 700;
}
#about_message .staff_wrap .staff_content .staff_name{
  font-size: var(--font-x);
  font-weight: 700;
}
#about_message .staff_wrap .staff_content .staff_name_en{
  font-size: var(--font-m);
  font-weight: 700;
}
#about_message .staff_wrap .staff_content .staf_profile{
  font-size: var(--font-x);
  font-weight: 700;
  color: var(--primary-color);
}
#about_message .staff_wrap .staff_content .staff_text{
  font-size: var(--font-m);
  font-weight: 500;
}
#about_message .staff_message{
  width: 700px;
  margin: 0 auto;
  background-color: #FFF;
  padding: var(--section-margin) var(--section-margin6);
}
#about_message .staff_message .staff_message_title{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--blue-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
  text-align: center;
}
#about_message .staff_message .p01{
  font-size: var(--font-l);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--section-margin4);
}
#about_message .staff_message .h01{
  font-size: var(--font-x);
  font-weight: 700;
  text-align: center;
  color: var(--primary-color);
  line-height: 1.8;
  letter-spacing: 0.1rem;
  margin-bottom: var(--section-margin4);
}
#about_message .staff_message .p02{
  font-size: var(--font-m);
  line-height: 2.0;
  letter-spacing: 0.1rem;
  font-weight: 500;
  text-align: left;
}
@media screen and (max-width: 768px) {
  #about_message{
 
    background: linear-gradient(to bottom, #FFF 0% 80px, var(--about_message-color) 80px 100%);

  }
  #about_message .main_wrap{
    padding:0 var(--page-padding);
  }
  #about_message .staff_wrap .staff_item{
    width: 100%;
  }
  #about_message .staff_wrap .staff_item img.staff_img{
    width: 60%;
    margin: 0 auto;
    display: block;
    padding:0 0 var(--section-margin6) 0;
  }
  #about_message .staff_wrap .staff_content{
    width: 100%;
    margin-top: 0;
    padding:0 var(--section-margin3);
  }
  #about_message .staff_message{
    width: 100%;
    margin: 0 auto;
    background-color: #FFF;
    padding: var(--section-margin) var(--section-margin3);
  }
  #about_message .staff_message .h01{
    font-size: var(--font-l);
  }
}
#company {
  width: 100%;
  height: 200svh;
  background-image: url('http://test.qder.jp/wp-content/uploads/sub_company_back.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  padding: var(--section-margin) 0;
  overflow: hidden;
}
#company .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);

}
#company .company_title{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--blue-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
  text-align: center;
}
#company .p01{
  font-size: var(--font-l);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--section-margin4);
}
#company .company_list{
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: var(--section-margin3);
}
#company .company_list li{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
}
.parallax-bg {
  display: none; /* PCでは非表示 */
}
@media screen and (max-width: 768px) {
  #company {
    background-image: none; /* CSS背景を消す（スマホ時） */
  }
  #company {
    width: 100%;
    height: 150svh;
    position: relative;
    overflow: visible;
  }
  #company .company_list{
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: var(--section-margin3);
  }
  #company .company_list li{
    width: 100%;
    font-size: var(--font-m);
    line-height: 1.5;
    font-weight: 500;
    text-align: left;
  }
  .parallax-bg {
    display: block;
    position: absolute;
    top: 30svh;
    left: 0;
    width: 100%;
    height: 150svh; /* 必要に応じて調整 */
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }
  .parallax-bg img.rellax {
    width: 100%;
    height: 180svh;
    display: block;
    object-fit: cover;
    /* 画像の高さが足りない場合はmin-height:100vh;なども検討 */
  }

}
#history{
  width: 100%;  
  background-color: var(--history-color);
}
#history .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:var(--section-margin) var(--page-padding);
}
#history .history_title{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--accent-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
  text-align: center;
}
#history .p01{
  font-size: var(--font-l);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--section-margin4);
}
#history .history_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--section-margin2);
}
#history .history_list dt{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 500;
  background-color: #EFEFEF;
  text-align: left;
  padding: var(--section-margin1) var(--section-margin3);
}
#history .history_list dd{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  padding: 0 var(--section-margin3);
}
#history .history_list dd ul{
  width: 100%;
  gap: var(--section-margin1);
}
#history .history_list dd ul li{
  margin-bottom: var(--section-margin1);
  line-height: 1.5;
}
#map{
  width: 100%;
  background-color: #FFF;
}
#map .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:var(--section-margin) var(--page-padding);
}
#map .map_title{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--accent-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
  text-align: center;
}
#map .p01{
  font-size: var(--font-l);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--section-margin4);
}
#map .h01{
  font-size: var(--font-x);
  font-weight: 700;
  text-align: center;
  color: var(--primary-color);
  margin-bottom: var(--section-margin4);
  display: flex;
    align-items: center;
    justify-content: center;
}
#map img.map__icon{
  width: 30px;
  margin-right: var(--section-margin1);
}

/*#################################
service
#################################*/
.service_header_wrap{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.service_header_bg{
  width: 100%;
  position: absolute;
  height: 800px;
  top: 0;
  left: 0;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.service_header_wrap img.service_bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service_header_wrap h1{
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  .service_header_bg {
    height: 400px;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
}
#service{
  width: 100%;
  padding-bottom: var(--section-margin);
}
#service .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#service .h01{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--accent-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  margin-bottom: var(--section-margin1);
}
#service p.p01{
  font-size: var(--font-x);
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#service .h02{
  font-size: var(--font-xx);
  font-weight: 700;
  text-align: left;
  color: var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#service p.p02{
  width: 80%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#service p.p02:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #service p.p02{
    width: 100%;
  }
}
/*service_product*/
#service_product{
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--service-color);
}
#service_product .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#service_product .photo_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: var(--section-margin6);
}
#service_product .photo_wrap .box_wrap{
  width: 50%;
}
#service_product .photo_wrap .box_wrap .h01{
  font-size: var(--font-xx);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#service_product .photo_wrap .box_wrap .p01{
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#service_product .photo_wrap .box_wrap .p01:last-of-type{
  margin-bottom: 0;
}
#service_product .photo_wrap .box_wrap img.photo_me{
  width: 100%;
  padding:0 20%;
  margin-top: var(--section-margin4);
  margin-bottom: var(--section-margin3);
}
#service_product .photo_wrap img.kirei{
  max-width: 100%;
  height: auto;
  margin-top: calc(var(--section-margin) * -1 - var(--section-margin5));
  margin-bottom: var(--section-margin3);
  padding-left: 24%;
}
.btn_here{
  display: block;
  width: 100%;
  text-align: center;
}
.btn_here img.btn_img{
  width: 140px;
}
#service_product .juice_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#service_product .juice_wrap .box_wrap{
  width: 50%;
}
#service_product .juice_wrap .box_wrap img.juice_01{
  width: 100%;
  padding-right: 14%;
}
#service_product .juice_wrap .box_wrap .h01{
  font-size: var(--font-xx);
  font-weight: 700;
  color: var(--accent-color);
  margin-top: calc(var(--section-margin) * -1);
  margin-bottom: var(--section-margin2);
}
#service_product .juice_wrap .box_wrap .p01{
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#service_product .juice_wrap .box_wrap img.juice_02{
  width: 100%;
}
@media screen and (max-width: 768px) {
  #service_product .photo_wrap .box_wrap{
    width: 100%;
  }
  #service_product .photo_wrap .box_wrap img.photo_me {
    width: 100%;
    padding: 0 10%;
    margin-top: var(--section-margin4);
    margin-bottom: var(--section-margin3);
}
#service_product .photo_wrap img.kirei {
  max-width: 100%;
  padding: 0 10%;
  height: auto;
  margin-top: var(--section-margin3);
  margin-bottom: var(--section-margin3);

}
  #service_product .juice_wrap .box_wrap{
    width: 100%;  
  }
  #service_product .juice_wrap .box_wrap:nth-child(1){
    order:2;
  }
  #service_product .juice_wrap .box_wrap:nth-child(2){
    order:1;
    margin-top: var(--section-margin6);
  }
  #service_product .juice_wrap .box_wrap .h01 {
      font-size: var(--font-xx);
      font-weight: 700;
      color: var(--accent-color);
      margin-top: 0;
      margin-bottom: var(--section-margin2);
  }
  #service_product .juice_wrap .box_wrap img.juice_01 {
    width: 100%;
    padding: 0 10%;
}
  #service_product .juice_wrap .box_wrap img.juice_02 {
      width: 100%;
      padding: 0 10%;
  }
}

/*step*/
#step{
  width: 100%;
  padding: var(--section-margin) 0;
  background: linear-gradient(to right,
  #F5F5F5 0%,
  #efefef 100%
);
}
#step .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#step .h01{
  font-weight: bold;
  font-size: var(--font-xxx);
  color: var(--primary-color);
  font-family:var(--font-en);
  letter-spacing: 0.4rem;
  text-align: center;
  margin-bottom: var(--section-margin1);
}
#step .p01{
  font-size: var(--font-l);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--section-margin4);
}
#step ul.step_list{
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--section-margin6);
  margin-bottom: var(--section-margin6);
}
#step .step_list li{
  width: 100%;
  position: relative;
  background-color: #FFF;
  padding: var(--section-margin3) var(--section-margin);
}
#step .step_list li .step_num{
  font-size: 64px;
  border: 5px solid #FFF;
  border-radius: 50%;
  position: absolute;
  top:50%;
  left:-50px;
  transform: translateY(-50%);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--section-margin2);
  width: 140px;
  height: 140px;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 1;
}
#step .step_list li .step_text{
  font-size: var(--font-l);
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
}
.viewmore{
  display: block;
  width: 100%;
  text-align: center;
}
.viewmore img.btn_contact{
  width: 400px;
}
@media screen and (max-width: 768px) {
  #step ul.step_list{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-margin6);
    margin-bottom: var(--section-margin6);
  }
  #step .step_list li{
    width: 100%;
    position: relative;
    background-color: #FFF;
    padding: var(--section-margin6) var(--section-margin3);
  }
  #step .step_list li .step_num{
    font-size: 24px;
    border: 3px solid #FFF;
    border-radius: 50%;
    position: absolute;
    top:-20px;
    left:0;
    transform: translateY(0);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--section-margin2);
    width: 40px;
    height: 40px;
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 1;
  }
  #step .step_list li .step_text{
    font-size: var(--font-l);
    line-height: 1.5;
    font-weight: 500;
    text-align: left;
  }
  .viewmore{
    display: block;
    width: 100%;
    text-align: center;
  }
  .viewmore img.btn_contact{
    width: 300px;
  }
}
/*luke*/
#luke{
  width: 100%;
  min-height: 600px;
  height: 80svh;
  position: relative;
}
#luke img.visual{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#luke::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5); /* 半透明の白 */
  z-index: 1;
  pointer-events: none;
}
#luke .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}
#luke .h01{
  font-weight: bold;
  font-size: var(--font-xx);
  color: var(--accent-color);
  text-align: left;
  margin-bottom: var(--section-margin2);
}
#luke .p01{
  width: 80%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#luke .p01:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #luke{
    width: 100%;
    height: 400px;
    min-height: 400px;
    position: relative;
  }
  #luke .h01{
    margin-bottom: var(--section-margin4);
  }
  #luke .p01{
    width: 100%
  }
}
/*luke_message*/
#luke_message{
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--luke-color);
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
  position: relative;
  z-index: 1;
}
#luke_message .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#luke_message .box_wrap{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  
}
#luke_message .box_wrap img.luke_tearoom{
  width: 50%;
  padding:0 10%;
  box-sizing: border-box;
}

#luke_message .box_wrap .text_wrap{
  width: 50%;
}
#luke_message .box_wrap .text_wrap .h01{
  width: 100%;
  margin-bottom: var(--section-margin2);
}
#luke_message .box_wrap .text_wrap .p01{
  width: 100%;
  margin-bottom: var(--section-margin4);
}
#luke_message .box_wrap .text_wrap .viewmore{
  width: 100%;
  text-align: left;
}
#luke_message .box_wrap .text_wrap .viewmore img.btn_recruit{
  width: 300px;
}
@media screen and (max-width: 768px) {
  #luke_message .box_wrap img.luke_tearoom{
    width: 100%;
    padding:0 20%;
    margin-bottom: var(--section-margin6);
  }
  
  #luke_message .box_wrap .text_wrap{
    width:100%;
  }
  #luke_message .box_wrap .text_wrap .h01{
    width: 80%;
    margin: 0 auto var(--section-margin2);
  }

  
}
#luke_message .thumb_wrap{
  margin: var(--section-margin) 0 0;
}
/*sns*/
#sns{           
  width: 100%;
  background-color: var(--luke-color);
  padding: 0 0 var(--section-margin) 0;
}
#sns .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#sns .sns_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; /* アイテム間のスペースを追加（必要に応じて調整） */
}
#sns .sns_list li{
  width: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#sns .sns_list li img.sns_img{
  width: 100%;
  margin-bottom: var(--section-margin2);
}
#sns .sns_list li img.qr_img{
  width: 100%;
  margin-bottom: var(--section-margin2);
}
#sns .sns_list li p.p01 {
  font-size: var(--font-m);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
#sns .sns_list li p.p01 span.icon_img {
  display: flex;
  align-items: center;
  width: 20px;
  margin-right: 0;
}
#sns .sns_list li p.p01 span.icon_img img {
  width: 100%;
  height: auto;
  display: block;
}
/*###################################
product
###################################*/
/*product　serviceと共有*/
#service .h01.product{
  color:var(--blue-color);
}
#service .h02.product{
  color:var(--accent-color);
}
/*product*/
#product{
  width:100%;
  width: 100%;
  height: 100svh;
  min-height: 800px;
  position: relative;
  background-image: url('http://test.qder.jp/wp-content/uploads/product_paralax.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: calc(var(--section-margin));
}
#product .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  z-index: 2;
  top:calc(var(--section-margin) * -1.5);
  display: flex;
  flex-wrap: wrap;
}
#product h2{
  width: 200px;
  display: block;
  padding:var(--section-margin6) var(--section-margin3) 0;
  box-sizing: border-box;
}
#product .text_wrap{
  width: calc(100% - 200px);
  padding-inline: var(--section-margin);
}
#product .text_wrap .p01{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.4rem;
  color:var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#product .text_wrap .h01{
  width: 100%;
  font-size: var(--font-x);
  font-weight: 700;
  color:var(--blue-color);
  margin-bottom: var(--section-margin1);
}
#product .text_wrap .p02{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 500;
  margin-bottom: var(--section-margin4);
}
#product .text_wrap .p02:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #product{
    width:100%;
    
    height: auto;
    min-height: initial;
    position: initial;
    background-image: none;
    margin-top: 0;

  }
  #product .main_wrap{
    max-width: var(--page-width);
    width: 100%;
    min-width: var(--page-min-width);
    padding:0 var(--page-padding);
    position: initial;
    left:initial;
    transform: initial;
    z-index: 2;
    top:initial;
    display: flex;
    flex-wrap: wrap;
  }
  #product h2{
    width: 140px;
    display: block;
    padding: var(--section-margin6) var(--section-margin3) 0;
    box-sizing: border-box;
    margin: 0 auto var(--section-margin6);
  }
  #product .text_wrap{
    width: 100%;
    padding-inline: 0;
    margin-bottom: var(--section-margin4);
  }
  #product .text_wrap .p01{
    width: 100%;
    font-size: var(--font-m);
    font-weight: 700;
    font-family: var(--font-en);
    letter-spacing: 0.4rem;
    color:var(--primary-color);
    margin-bottom: var(--section-margin2);
  }

}
/*product02*/
#product02{
  width:100%;
  padding: var(--section-margin) 0;
}
#product02 .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#product02 .box_wrap{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch
}
#product02 .box_wrap img.product_img{
  width: 40%;
  height: auto;
}
#product02 .box_wrap .text_wrap{
  width: 60%;
  padding-left: 5%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#product02 .box_wrap .text_wrap .h01{
  width: 100%;
  font-size: var(--font-x);
  line-height: 1.5;
  font-weight: 700;
  color:var(--primary-color);
  margin-bottom: var(--section-margin1);
}
#product02 .box_wrap .text_wrap .p01{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 500;
  margin-bottom: var(--section-margin4);
}
#product02 .box_wrap .text_wrap .p01:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #product02 .box_wrap img.product_img{
    width: 100%;
    height: auto;
    margin-bottom: var(--section-margin4);
  }
  #product02 .box_wrap .text_wrap{
    width: 100%;
    padding-left: 0;
  }
}
/*product03*/
#product03{
  width:100%;
  padding: 0 0 var(--section-margin) 0;
}
#product03 .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#product03 .box_wrap{
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--section-margin);
}
#product03 .sns_wrap{
  width: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#product03 .sns_wrap img.sns_img{
  width: 100%;
  margin-bottom: var(--section-margin1);
}
#product03 .sns_wrap img.qr_img{
  width: 100%;
  margin-bottom: var(--section-margin1);
}
#product03 .sns_wrap p.p01 {
  font-size: var(--font-m);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
#product03 .sns_wrap p.p01 span.icon_img {
  display: flex;
  align-items: center;
  width: 20px;
  margin-right: 0;
}
#product03 .sns_wrap p.p01 span.icon_img img {
  width: 100%;
  height: auto;
  display: block;
}

#product03 .viewmore{
  display: block;
  width: 400px;
  text-align: center;
}
.viewmore img.btn_loglog{
  width: 400px;
}
@media screen and (max-width: 768px) {
  #product03 .box_wrap{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--section-margin);
  }
  #product03 .sns_wrap{
    width: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #product03 .viewmore{
    display: block;
    width: 300px;
    text-align: center;
    margin: 0 auto;
  }
  .viewmore img.btn_loglog{
    width: 100%;
  }
}
/*coming_soon*/
#coming_soon{
  width:100%;
  position: relative;
  height: 100svh;
  min-height: 800px;
}
#coming_soon img.comingsoon_bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#coming_soon .box_wrap{
  width: 1000px;
  padding:0 var(--page-padding);
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#coming_soon .p01{
  width: 100%;
  font-size: var(--font-m);
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.4rem;
  color:var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#coming_soon .h01{
  width: 100%;
  font-size: var(--font-x);
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.4rem;
  color:var(--blue-color);
  margin-bottom: var(--section-margin1);
}
@media screen and (max-width: 768px) {
  #coming_soon{
    height: 60svh;
    min-height: initial;
  }
  #coming_soon .box_wrap{
      width: 100%;
  }
}

/*##############################
CONTACT
##############################*/
#contact{
  width:100%;
  padding: 0 0 var(--section-margin) 0;
}

#contact .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
.contact_wrap{
  max-width: 1000px;
  min-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: var(--contact-color);
  padding:var(--section-margin6) ;
  }
  @media screen and (max-width: 768px) {
    .contact_wrap{
      min-width: var(--page-min-width);
      padding:var(--section-margin3) var(--section-margin2) ;
    }
  }
  .contact_wrap h2{
  color:var(--brand-color);
  padding-bottom: 10px;
  font-size:calc(var(--title-font-size) * 1.2);
  border-bottom:4px dotted var(--brand-color);
  margin-bottom: calc(var(--section-margin) / 2);
  }
 
  .wpcf7-not-valid-tip {
    color: #dc3232 !important;
  
  }

  
  .contact_wrap ul.menu{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin:0 0 30px
  }
  
  .contact_wrap ul.menu li:nth-child(2n-1){
  width:30%;
  font-weight: 500;
  font-size: var(--font-m);
  margin:0 0 var(--section-margin6)
  }
 
  .contact_wrap ul.menu li:nth-child(2n){
  width:70%;
  padding-left: 10%;
  font-weight: 500;
  font-size: var(--font-m);
  margin:0 0 var(--section-margin6);
  box-sizing: border-box;
  }
  @media screen and (max-width: 768px) {
    .contact_wrap ul.menu li:nth-child(2n-1){
      width:100%;
      font-weight: 500;
      font-size: var(--font-m);
      margin:0 0 var(--section-margin1);
      }
     
      .contact_wrap ul.menu li:nth-child(2n){
      width:100%;
      padding-left: 0%;
      font-weight: 500;
      font-size: var(--font-m);
      margin:0 0 var(--section-margin);
      box-sizing: border-box;
      }
  }
  .contact_wrap ul.menu li:last-child{
  margin-bottom:0;
  }
  .contact_wrap ul.menu li p{
    width:100%;
    font-weight: 600;
    font-size: var(--font-m);
    margin:0;
  }
  .contact_wrap ul.menu span.must{
    font-size: var(--font-s);
    font-weight: 500;
    padding: 2px 10px 4px;
    background-color: var(--primary-color);
    color:#FFF;
    margin-left: var(--section-margin1);
    display: inline;
  }

  .contact_wrap input[type="checkbox"] {
  width: 30px;
  height: 30px;
  border: #CCC;
  border-radius: 0;
  }
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color: var(--primary-color);
        border: 0;
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        margin: 0 auto;
        width: auto;
        display: block;
        padding: 20px 60px;
        border-radius: 10px;
}
/*##############################
NEWS
##############################*/


.news_header_wrap{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.news_header_bg{
  width: 100%;
  position: absolute;
  height: 800px;
  top: 0;
  left: 0;
  z-index: -1;
}
.news_header_wrap img.news_bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news_header_wrap h1{
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  .news_header_bg {
    height: 400px;
  }
}


#news{
  width:100%;
  padding: 0 0 var(--section-margin) 0;
}
#news .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
#news .h02{
  font-size: var(--font-xx);
  font-weight: 700;
  text-align: left;
  color: var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#news p.p01{
  width: 80%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#news p.p01:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #news p.p01{
    width: 100%;
  }
  #news p.p02{
    width: 100%;
  }
}
#news_content{
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--news-color);
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
  position: relative;
  z-index: 1;
}
#news_content .main_wrap {
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding: 0 var(--page-padding);
}
#news_content ul.news_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--section-margin3);
}
#news_content ul.news_list li{
  width:calc((100% - var(--section-margin3) * 2) / 3); 
}
#news_content ul.news_list li img.news_img{
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  margin-bottom: var(--section-margin1);
}
#news_content ul.news_list li .date{
  font-size: var(--font-s);
  font-weight: 500;
  color:var(--primary-color);
  margin-bottom: var(--section-margin1);
}
@media screen and (max-width: 768px) {
  .sub_header.news_header h1 img.title{
    width: 150px;
  }
  #news_content ul.news_list{

    gap: var(--section-margin6);
  }
  #news_content ul.news_list li{
    width: 80%;
    margin: 0 auto;
  }
}
/* ページネーション全体 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--section-margin3) 0;
  font-family: var(--font-jp);
}

/* ページ番号リンク */
.pagination .nav-links {
  display: flex;
  gap: 0.5rem;
}

/* 各ページ番号 */
.pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 0.5em 1em;
  margin: 0 0.2em;
  background: #fff;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-size: var(--font-m);
}

/* 現在のページ */
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  outline: none;
}

/* 前・次ボタン */
.pagination .prev,
.pagination .next {
  font-weight: bold;
}

/* アクセシビリティ: フォーカス時 */
.pagination .page-numbers:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .pagination .page-numbers {
    min-width: 32px;
    padding: 0.3em 0.6em;
    font-size: var(--font-s);
  }
}

/*##############################
NEWS記事ページ
##############################*/
#news_detail{
  width: 100%;
  padding: var(--section-margin) 0;
  background-color: var(--news-color);
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4vw;
  position: relative;
  z-index: 1;
}
#news_detail .main_wrap{
  max-width: 1000px;
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
  margin: 0 auto;
}
#news_detail .date{
  font-size: var(--font-s);
  font-weight: 500;
  margin-bottom: var(--section-margin1);
}
#news_detail .h01{
  width: 100%;
  font-size: var(--font-x);
  font-weight: 700;
  letter-spacing: 0.4rem;
  line-height: 1.5;
  color:var(--blue-color);
  margin-bottom: var(--section-margin3);
}

/*==============================
NEWS記事ページ 前後記事ナビゲーション
==============================*/
.news-detail__post-nav {
  width: 100%;
  margin: var(--section-margin6) 0 0 0;
  display: flex;
  justify-content: center;
}
.news-detail__post-nav-list {
  display: flex;
  gap: var(--section-margin2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-detail__post-nav-item {
  font-size: var(--font-m);
}
.news-detail__post-nav-link {
  display: inline-block;
  padding: 0.7em 1.5em;
  background: #fff;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-weight: 600;
}
.news-detail__post-nav-link:hover,
.news-detail__post-nav-link:focus {
  background: var(--primary-color);
  color: #fff;
  outline: none;
}
.news-detail__post-nav-item--prev {
  text-align: left;
}
.news-detail__post-nav-item--next {
  text-align: right;
}
@media (max-width: 768px) {
  .news-detail__post-nav-list {
    flex-direction: column;
    gap: var(--section-margin1);
    align-items: stretch;
  }
  .news-detail__post-nav-link {
    width: 100%;
    font-size: var(--font-s);
    padding: 0.7em 1em;
    width: auto;
  }
}
/*##############################
RECRUIT
##############################*/
#recruit{
  width: 100%;
  padding-bottom: var(--section-margin);
}
#recruit .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
}
.recruit_header_wrap{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.recruit_header_bg{
  width: 100%;
  position: absolute;
  height: 800px;
  top: 0;
  left: 0;
  z-index: -1;
}
.recruit_header_wrap img.recruit_bg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit_header_wrap h1{
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  .recruit_header_bg {
    height: 400px;
  }
}

#recruit .h02{
  font-size: var(--font-xx);
  font-weight: 700;
  text-align: left;
  color: var(--primary-color);
  margin-bottom: var(--section-margin2);
}
#recruit p.p01{
  width: 80%;
  font-size: var(--font-m);
  font-weight: 500;
  text-align: left;
  margin-bottom: var(--section-margin4);
}
#recruit p.p01:last-of-type{
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #recruit p.p01{
    width: 100%;
  }
  #recruit p.p02{
    width: 100%;
  }
}
#recruit_content {
  width: 100%;
    padding: var(--section-margin) 0;
    background-color: var(--recruit-color);
    clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
    margin-top: -4vw;
    position: relative;
    z-index: 1;
}
#recruit_content .main_wrap{
  max-width: var(--page-width);
  width: 100%;
  min-width: var(--page-min-width);
  padding:0 var(--page-padding);
  margin: 0 auto;
}



/*==============================
RECRUIT JOB SECTION
==============================*/
.recruit-job {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  padding: var(--section-margin3) var(--section-margin4);
  margin: var(--section-margin4) 0;
}
.recruit-job__title {
  font-size: var(--font-xx);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--section-margin2);
  letter-spacing: 0.1em;
  font-family: var(--font-en);
}
.recruit-job__lead {
  font-size: var(--font-l);
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: var(--section-margin3);
  line-height: 1.6;
}
.recruit-job__list {
  width: 100%;
  margin-bottom: var(--section-margin3);
}
.recruit-job__item-title {
  font-size: var(--font-m);
  font-weight: 700;
  color: var(--blue-color);
  margin-top: var(--section-margin2);
  margin-bottom: var(--section-margin1);
  letter-spacing: 0.05em;
}
.recruit-job__item-desc {
  font-size: var(--font-m);
  color: var(--basic-color);
  margin-bottom: var(--section-margin2);
  line-height: 1.8;
}
.recruit-job__desc-list {
  padding-left: 1.2em;
  margin: 0 0 var(--section-margin1) 0;
}
.recruit-job__desc-list li {

  list-style: disc;
}
.recruit-job__desc-list--sub {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}
.recruit-job__desc-list--sub li {
  list-style: circle;
  font-size: var(--font-m);
}
.recruit-job__message {
  background: var(--recruit-color);
  border-radius: 12px;
  padding: var(--section-margin2) var(--section-margin3);
  margin: var(--section-margin3) 0;
}
.recruit-job__message-title {
  font-size: var(--font-x);
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: var(--section-margin1);
  letter-spacing: 0.08em;
}
.recruit-job__message-text {
  font-size: var(--font-m);
  color: var(--basic-color);
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .recruit-job {
    padding: var(--section-margin4) var(--section-margin4);
    margin: var(--section-margin3) 0;
  }
  .recruit-job__title {
    font-size: var(--font-x);
  }
  .recruit-job__lead {
    font-size: var(--font-m);
  }
  .recruit-job__message {
    padding: var(--section-margin4) var(--section-margin4);
  }
}