/* Service
-------------------------------------------*/

.service_bg{ background: url(../img/header/bg_service.jpg) no-repeat center / cover; }

.service_head{
  width: var(--page);
  padding: var(--sec-margin) 0 calc(var(--sec-margin)*2);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  column-gap: 3rem;
  text-align: justify;
  font-weight: 500;
}
.head_nav{
  width: min(320px,100%);
  display: flex;
  flex-flow: column;
  gap: .5rem;
}
.head_nav .tit p{
  padding: .7rem 1rem .55rem;
  border-radius: 4px;
  line-height: 1;
  color: #fff;
  font-family: var(--font-en);
  font-size: clamp(12px,1.846vw,14px);
  background: rgba(var(--black-rgb),.6);
}
.service_index ul{
  display: flex;
  flex-flow: column;
}
.service_index ul li a{
  display: block;
  padding: .75rem 0;
  border-bottom: 1px solid var(--black);
  font-size: clamp(12px,1.846vw,15px);
  font-weight: bold;
}
.service_index ul li a span.num{
  margin-right: .75rem;
  font-weight: 500;
  letter-spacing: .075em;
  color: var(--orange);
  font-family: var(--font-en);
}
.service_index ul li a span.small{
  font-size: 80%;
}
.service_head .read{
  width: 60%;
  line-height: 2.25;
  letter-spacing: .075em;
  font-size: clamp(12px,1.846vw,16px);
}

/* ----------------------------------------
 タブメニュー
---------------------------------------- */

.tab_content{
  display: none;
}
.tab_content.active{
  display: block;
}
#tab_area{
  scroll-margin-top: 120px; /* ヘッダーの高さ分 */
}
.tab_nav .tab_nav__list{
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  column-gap: clamp(.5rem,2vw,2rem);
}
.tab_nav .tab_btn{
  border: none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width: min(280px,33,33%);
  padding: .5rem 2.5rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: .075em;
  font-size: clamp(12px,1.846vw,17px);
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.tab_nav .tab_btn.active{
  box-shadow: none;
  color: #fff;
  background-color: #19a7de;
}
.tab_nav .tab_btn span.num{
  font-weight: 500;
  color: var(--orange);
  font-family: var(--font-en);
}
.tab_nav .tab_btn.active span.num{
  color: #fff;
}
.tab_nav .tab_btn span.small{
  font-size: 60%;
}

/* ----------------------------------------
 SP
---------------------------------------- */

@media screen and (max-width: 650px){
  
  .service_head{
    flex-direction: column;
    gap: 2rem;
  }
  .head_nav,
  .service_head .read{
    width: 100%;
  }
  .service_head .read{
    line-height: 2;
  }
  
  /* タブ */
  
  .tab_nav .tab_nav__list{
    width: 100%;
    margin: 0 auto;
  }
  .tab_nav .tab_btn{
    padding: .5rem 1rem;
    border-radius: 8px 8px 0 0;
  }
  .tab_nav .tab_btn span.small{
    font-size: 10px;
  }
}


/* ----------------------------------------
 Service / cmn
---------------------------------------- */

.service_contents{
  color: #fff;
  font-weight: 500;
  background-color: #19a7de;
}
.tab_content{
  padding-top: calc(var(--sec-margin)*1.5);
}
.service_contents .service_intro{
  display: flex;
  flex-direction: column;
  row-gap: 14rem;
}
.service_intro{
  width: var(--page);
  margin: 0 auto;
}
.intro{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  text-align: justify;
}
.intro_text{
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem,2vw,2rem);
  width: 50%;
  line-height: 1.75;
}
.intro_text .num img{
  width: auto;
  height: 64px;
  object-fit: cover;
}
.intro_text .tit{
  font-size: clamp(24px,3.692vw,36px);
  font-weight: bold;
  line-height: 1.5;
}
.intro_text .tit span.small{
  font-size: min(20px,60%);
  margin-left: -.75em;
}
.intro_text .text{
  padding-top: 1rem;
}
.intro_thumb{
  width: min(450px,50%);
}
.intro_thumb img{
  border-radius: 20px;
}

/* ----------------------------------------
 5つのチェックポイント
---------------------------------------- */

.checkpoint .h2_tit span{
  font-size: 180%;
  font-weight: bold;
  line-height: 1.25;
  padding-right: 3px;
}
.checkpoint > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.checkpoint > ul > li{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.6rem 2.75rem;
  font-size: clamp(12px,1.846vw,14px);
  width: calc((100% - 3rem) / 3);
  border: 1px solid #fff;
  border-radius: 30px;
}
.checkpoint > ul > li .thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 100px;
  margin-inline: auto;
}
.checkpoint > ul > li .thumb img{
  width: 100%;
  height: auto;
}
.checkpoint > ul > li .num{
  font-weight: 500;
  letter-spacing: .1em;
  font-family: var(--font-en);
  font-size: 19px;
}
.checkpoint > ul > li .heading{
  font-weight: bold;
  letter-spacing: .1em;
  line-height: 1.5;
  font-size: clamp(15px,2.308vw,18px);
}
.checkpoint > ul > li .text{
  line-height: 1.75;
  text-align: justify;
  font-weight: normal;
}

/* ----------------------------------------
 モーダル
---------------------------------------- */

.modal a{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.5rem .6rem 1rem;
  border-radius: 999px;
  color: var(--black);
  background: #fff;
  font-size: clamp(12px,1.846vw,13px);
  font-weight: bold;
  transition: .2s ease;
}
.modal a::before{
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background:  url(../img/cmn/ic_morelink.svg) no-repeat center / cover;
  transition: .2s ease;
}
.modal a:hover::before{
  transform: translateX(2px);
}
.modal a:hover{
  background-color: #eee;
}

/* モーダルコンテンツ */

.modal_window{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem,2vw,3rem);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease;
  pointer-events: none;
  z-index: 9999;
  background: rgba(0,0,0,.8);
}
.modal_window.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal_window h3{
  font-size: clamp(16px,2.462vw,21px);
  padding-bottom: 2rem;
}
.modal_inner{
  position: relative;
  width: min(98%,1200px);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(3rem,5vw,6rem) clamp(1rem,2vw,3rem);
  border-radius: 30px;
  color: var(--black);
  background: #fdf5ee;
  transform: translateY(15px);
  transition: .3s ease;
}
.modal_window.active .modal_inner{
  transform: translateY(0);
}
.modal_close{
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px,6vw,70px);
  height: clamp(40px,6vw,70px);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity .2s ease;
}
.modal_close img{
  display: block;
  width: 100%;
  height: auto;
}
.modal_close:hover{
  opacity: var(--hover);
}

/* モーダル用テーブル */

.modal_tbl{
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: min(900px,100%);
  margin: 0 auto;
}
.performance_tbl{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.performance_tbl th,
.performance_tbl td{
  padding: .75rem .5rem;
  border: 1px solid var(--black);
  text-align: center;
  vertical-align: middle;
}
.performance_tbl thead th{
  color: #fff;
  background: #6d727a;
  line-height: 1.25;
  padding: .5rem .25rem;
}
.performance_tbl tbody tr:nth-child(even){
  background:#fff;
}
.high{ background:#bcd2e4; }
.normal{ background:#f1cfb6; }
.easy{ background:#fcecbd; }
.none{ background:#ccc; }

.modal_tbl p{
  text-align: right;
}

.modal_tbl .note{
  display: flex;
  flex-direction: column;
  text-align: left;
}
.modal_tbl .note li{
  position: relative;
}
.note li::before{
  background: rgba(var(--black-rgb), .3);
}
.note li span{
  font-size: 85%;
}
.note li::first-letter{
  color: #b8b8b8;
  margin-right: 2px;
}
.performance_tbl{
  min-width: 900px; /* 好きな幅 */
}
.table_wrap{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll_mouse{
  position: absolute;
  top: 4px;
  right: 0px;
  width: 80px;
  opacity: 0;
  pointer-events: none;
}
.scroll_mouse img{
  width: 100%;
}

/* ----------------------------------------
 SP
---------------------------------------- */

@media (min-width:991px){
  .scroll_mouse{
    display:none;
  }
}

@media screen and (max-width: 650px){
  
  .service_contents .service_intro{
    row-gap: 8rem;
  }
  .intro{
    flex-direction: column;
    gap: 2rem;
  }
  .intro_text{
    width: 100%;
    line-height: 1.75;
  }
  .intro_text .num img{
    height: 50px;
  }
  .intro_text .tit{
    padding-top: .5rem;
  }
  .intro_text .text{
    padding-top: 2rem;
  }
  .intro_thumb{
    width: 100%;
  }
  
  /* checkpoint --------------------------*/
  
  .checkpoint > ul{
    flex-direction: column;
  }
  .checkpoint > ul > li{
    padding: 1rem 1.6rem 2rem;
    width: 100%;
    border-radius: 20px;
  }
  
  /* モーダル中身 */
  .modal_window h3{
    padding-bottom: 1.5rem;
  }
  
  /* モーダル用テーブル */
  .performance_tbl th,
  .performance_tbl td{
    padding: .5rem .25rem;
  }
  .performance_tbl thead th{
    padding: .25rem .25rem;
  }
  .modal_tbl p{
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    letter-spacing: .1em;
    padding-bottom: .5rem;
  }
  .modal_tbl .note{
    font-size: 12px;
  }
  .note li span{
    font-size: 100%;
  }
}


/* ----------------------------------------
 Flow
---------------------------------------- */

.service_second{
  margin-top: calc(var(--sec-margin)*2.5);
  padding: calc(var(--sec-margin)*1.5) 0;
  background: url(../img/service/bg_flow.jpg) repeat left top;
  color: var(--black);
}
:root{
  --roof: 3%;
}
.service_second{
  clip-path: polygon(
    0 var(--roof),
    50% 0,
    100% var(--roof),
    100% 100%,
    0 100%
  );
}
@media (max-width: 990px){
  :root{
    --roof: 2%;
  }
}
@media (max-width: 650px){
  :root{
    --roof: 1%;
  }
}
.flow{
  padding: var(--sec-margin) 0;
}
.flow_wrap{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(2rem,5vw,6rem);
  align-items: start;
  width: var(--page-narrow);
  margin: 0 auto;
}
.flow_list{
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.flow_item{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0rem;
  align-items: start;
}
:root{
  --beige-flow: #c8b8aa;
}
.flow_step{
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 50%;
  line-height: 1.15;
  letter-spacing: .05em;
  font-family: var(--font-en);
  font-size: clamp(11px,1.692vw,14px);
  background: var(--beige-flow);
  padding-top: 7px;
}
.flow_step::after{
  content: "";
  position:absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 120px;
  background: var(--beige-flow);
  transform: translateX(-50%);
}
.flow_step strong{
  font-size: 200%;
  font-weight: 500;
}
.flow_item:last-child .flow_step::after{ /* 最後の線消す */
  display:none;
}
.flow_item:nth-child(n+5) .flow_step{
  background: var(--orange);
}
.flow_body{
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
  text-align: justify;
}
.flow_body h3{
  letter-spacing: .1em;
}
.flow_body p{
  font-weight: normal;
  letter-spacing: .05em;
  font-size: clamp(12px,1.846vw,16px);
}
.flow_gallery{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flow_gallery img{
  display: block;
  width: 100%;
  border-radius: 6px;
}
.flow_note{
  width: var(--page-narrow);
  margin: calc(var(--sec-margin) * 1.5) auto;
  padding: clamp(1.5rem,3vw,3rem);
  border: 1px solid var(--black);
  border-radius: 30px;
}
.flow_note ul{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.flow_note li{
  position: relative;
  padding-left: 1.2em;
  line-height: 2;
  text-align: left;
  letter-spacing: .075em;
}
.flow_note li::before{
  content: "-";
  position: absolute;
  left: 0;
}
.flow_note span{
  display: block;
  font-size: 90%;
}

/* ----------------------------------------
 Price
---------------------------------------- */

.price{
  width: var(--page-sp);
  margin: 0 auto;
  padding: calc(var(--sec-margin)*1.25) 0;
  background-color: #fff;
  border-radius: 80px;
}
.price_wrap{
  width: var(--page-narrow);
  margin: 0 auto;
}
.price_wrap h2 span{
  font-size: 70%;
}
.price_tit{
  text-align: left;
  font-weight: bold;
  font-size: var(--large-font-size);
  padding-bottom: 1rem;
  margin-top: -1.5rem;
}
.price .performance_tbl{
  font-size: clamp(13px,2.0vw,16px);
}
.price .performance_tbl th,
.price .performance_tbl td{
  padding: 1rem .25rem;
}
.price .performance_tbl td{
  background:#ffeed9;
}
.price_note{
  padding-top: 1rem;
  line-height: 1.75;
  text-align: justify;
  font-size: clamp(11px,1.692vw,13px);
}

@media (max-width: 650px){
  
  .price_note{
    letter-spacing: .075em;
  }
}


/* ----------------------------------------
 other service
---------------------------------------- */

.other_service_list{
  padding-top: var(--sec-margin);
  width: min(1100px,90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
}
.other_service{
  display: flex;
}
.other_service a{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1rem 1rem 2rem;
  border: 1px solid var(--black);
  border-radius: 20px;
}
.other_service_text{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-align: left;
}
.other_service_text .num img{
  width: auto;
  height: 30px;
  object-fit: cover;
}
.other_service_text h2{
  line-height: 1.5;
  font-size: clamp(14px,2.154vw,19px);
}
.other_service_text h2 span.small{
  font-size: 70%;
}
.other_service_thumb{
  width: 200px;
  height: 160px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
}
.other_service_thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .3s;
}
.other_service a:hover .other_service_thumb img{
  transform: scale(1.05);
}
.other_service a:hover img{
  opacity: 1;
}
.other_service a:hover{
  background:#fff;
}


/* ----------------------------------------
 SP
---------------------------------------- */

@media screen and (max-width: 650px){
  
  .flow_wrap{
    display: flex;
    flex-direction: column;
  }
  .flow_item{
    grid-template-columns: 90px 1fr;
  }
  .flow_step{
    width: 70px;
    height: 70px;
  }
  .flow_gallery{
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
  }
  .flow_gallery img{
    width: calc(50% - .5rem);
  }
  .flow_note{
    border-radius: 20px;
  }
  .flow_note ul{
    gap: 1rem;
  }
  
  /* price --------------------------*/
  
  .price{
    width: 100%;
    padding: calc(var(--sec-margin)*1.5) 0;
    border-radius: 50px;
  }
  .price_tit{
    margin-top: -1rem;
  }
  
  /* other service --------------------------*/
  
  .other_service_list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .other_service a{
    gap: 2rem;
    padding: .75rem .75rem .75rem 1.5rem;
    border-radius: 20px;
  }
  .other_service_text{
    gap: 1rem;
  }
  .other_service_text h2{
    line-height: 2;
    gap: 1rem;
  }
  .other_service_thumb{
    width: 150px;
    height: auto;
  }
}