@charset "UTF-8";
html {
  scroll-padding-top: 80px;
}
.under_mv{
  background: url("../img/mv.png") no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.hd_item.hd_item--service {
    color: #e7001c;
    border-bottom: 2px solid #e7001c;
}
.pankuzu_list{
}
h1,h2,h3,h4{
  margin: 0;
}
figure{
  margin: 0;
}
figcaption{
  width: 100%;
  text-align: center;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%
}
.detail{
  p{
    line-height: 2;
    /*@media screen and (max-width: 767px) {line-height: 1.5;}*/
  }
  /*ユーティリティ*/
  .left{text-align: left;}
  .right{text-align: right;}
  
  .normal{font-weight: normal;}
  
  .fs_10{font-size: 1rem;}
  .fs_12{font-size: 1.2rem;}
  .fs_14{font-size: 1.4rem;}
  .fs_18{font-size: 1.8rem;}
  .fs_20{font-size: 2rem;}
  .fs_24{font-size: 2.4rem;}
  .fs_28{font-size: 2.8rem;}
  .fs_32{font-size: 3.2rem;}
  
  .blue{color: #009CEC;}
  
  a.link_txt{
    color: #000;
    text-decoration: underline;
  }
  .lh_1{
    line-height: 1.5;
  }
}
.detail_outer {
  max-width: 1024px;
  width: 90%;
  margin: 40px auto 100px;
}
.detail_title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap:0 60px;
  font-size: 3.2rem;
  font-weight: bold;
  color: #006BB4;
  letter-spacing: 6px;
  white-space: nowrap;
  &::before{
    content: '';
    display: inline-block;
    height: 1px;
    width: auto;
    width: 50%;
    background: #006BB4;
  }
  &::after{
    content: '';
    display: inline-block;
    height: 1px;
    width: auto;
    width: 50%;
    background: #006BB4;
  }
  @media screen and (max-width: 767px) {
    letter-spacing: 0;
    font-size: 2.8rem;
    white-space: wrap;
    gap:0 10px;
    justify-content: space-between;
    &::before{
      max-width: 10%
    }
    &::after{
      max-width: 10%
    }
  }
}
.detail_intro {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  padding: 20px 30px;
  font-size: 2rem;
  font-weight: bold;
  background: #006BB4;
  color: #fff;
  line-height: 2;
  @media screen and (max-width: 767px) {
    padding: 20px 5%;
    text-align: left;
    font-size: 1.8rem;
  }
}
.detail_intro--left{
  text-align: left;
}
.anchor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
  @media screen and (max-width: 767px){
    gap: 10px;
  }
}
.anchor_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(25% - (60px / 4));
  background: #000;
  min-height: 55px;
  color: #fff;
  font-weight: bold;
  position: relative;
  padding: 5px 40px;
  &::after{
    content: '';
    display: block;
    background: url("../../common/img/arrow_white.svg") no-repeat center;
    -webkit-background-size: contain;
    background-size: contain;
    width: 17px;
    height: 10px;
    position: absolute;
    right: 23px;
  }
  @media screen and (max-width: 767px){
    width: calc(50% - 5px);
    padding: 5px 25px 5px 10px;
    font-size:1.2rem;
    &::after{
      width: 12px;
      height: 10px;
      right: 13px;
    }
  }
}
.anchor--triple{
  @media screen and (max-width: 767px){
    justify-content: flex-start;
  }
}
.anchor--triple .anchor_btn{
  width: calc((100% / 3) - (40px / 3));
  @media screen and (max-width: 767px){
    width: calc(50% - 5px);
  }
}
.anchor--double .anchor_btn{
  max-width: 328px;
  width: calc(50% - 10px);
  @media screen and (max-width: 767px){
    width: calc(50% - 5px);
  }
}
.detail_part{
  margin-top: 60px;
}
.detail_fig{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:10px;
  figcaption{
    color: #000;
  }
}
.detail_topics {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  @media screen and (max-width: 767px) {
    gap:10px;
  }
}
a.topics_card {
  max-width: 328px;
  width: calc(50% - 5px);
}
.topics_plate{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #000;
  color: #fff;
  min-height: 60px;
  padding: 2px 15px;
  line-height: 1.25!important;
  font-weight: bold;
}

.detail_color{
  background: #DBF3FD;
  padding: 30px 15px;
  @media screen and (max-width: 767px) {padding: 30px 2.5%;}
}
.color_head{
  font-size: 3.2rem;
  text-align: center;
  color: #009CE0;
  font-weight: bold;
  padding-bottom: 25px;
  @media screen and (max-width: 767px) {font-size: 2.4rem;}
}
.detail_color--gray{
  background: #E8E8E8;
  .color_head{
    color: #000;
  }
}
.detail_inner{
  background: #fff;
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  gap:60px;
  @media screen and (max-width: 767px) {padding: 30px 2.5%;}
}
.inner_head{
  font-size: 2.4rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #707070;
  margin-bottom: 20px;
  @media screen and (max-width: 767px) {font-size: 2rem;}
}
.inner_flex{
  display: flex;
  gap:30px;
  justify-content: center;
  flex-wrap: wrap;
}
.inner_half{
  width: calc(50% - 15px);
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}
.inner_flex--top{
  align-items: flex-start;
}
.inner_flex--short{
  gap:10px 20px;
  .inner_half{
    width: calc(50% - 10px);
    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}
.inner_flex--close{
  gap:10px 0px;
}

.detail_table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  th{
    background: #000;
    color: #fff;
    padding: 15px 10px;
    @media screen and (max-width: 767px) {padding: 10px 5px;font-size:1.2rem;}
    p{
      line-height: 1;
    }
  }
  td{
    padding: 15px 10px;
    background: #E8E8E8;
    @media screen and (max-width: 767px) {padding: 10px 5px;}
    .cell{
      display: flex;
      flex-direction: column;
      width: auto;
      margin: auto;
    }
    p{
      line-height: 1.5;
    }
  }
  tbody{
    th{
      background: #666;
    }
  }
}
a.btn_more {
  max-width: 502px;
  width: 100%;
  height: 70px;
  position: relative;
  &::after{
    content: '';
    display: block;
    background: url("../../common/img/arrow_white_right.svg") no-repeat center;
    background-size: contain;
    width: 10px;
    height: 17px;
    position: absolute;
    right: 15px;
  }
  @media screen and (max-width: 767px) {
    padding-right: 20px;
    &::after{
      right: 10px;
    }
  }
}
.dummy{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #E8E8E8;
  font-weight: bold;
}
.link_cata{
  @media screen and (max-width: 767px) {
    width:calc(50% - 15px);
  }
}
@media screen and (max-width: 767px) {}
@media print {

}