.cnt-body .page-ttl{
  background-color: #fff;
  padding-block: 60px;
}

.page-ttl h1{
  border-top: 3px solid #004EA2;
  border-bottom: 3px solid #004EA2;
  max-width: 1100px;
  margin-inline: auto;
  padding-block: 0.75em;
  font-size: 28px;
  font-weight: 500;
  line-height: calc(42/28);
  text-align: center;
}

.page-body{
  background-color: #fff;
  padding-block-start: 0;
  padding-block-end: 0;
}

.page-body-inner{
  max-width: 1100px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: calc(26/16);
}

@media screen and (max-width: 480px){
  .cnt-body{
    width: calc(650px*var(--per));
    margin-inline: auto;
  }

  .cnt-body .page-ttl{
    padding-block: calc(50px*var(--per));
    border-bottom: none;
  }

  .page-ttl h1{
    border-top: calc(3px*var(--per)) solid #004EA2;
    border-bottom: calc(3px*var(--per)) solid #004EA2;
    font-size: calc(30px*var(--per));
    line-height: calc(45/30);
  }

  .page-body{
    padding-block-end: calc(140px*var(--per));
  }

  .page-body-inner{
    font-size: calc(22px*var(--per));
    line-height: calc(45/22);
  }
}

section{
  margin-block: 40px;
}

h3{
  margin-block-end: 0.75em;
  font-size: 16px;
  font-weight: 400;
}

p:not(:first-child){
  margin-block-start: 30px;
}

p:not(:last-child){
  margin-block-end: 30px;
}

h3 + p:not(:first-child){
  margin-block-start: 0px;
}

@media screen and (max-width: 480px){
  section{
    margin-block: calc(40px*var(--per));
  }

  section:first-child{
    margin-block-start: 0;
  }

  section:last-child{
    margin-block-end: 0;
  }

  h3{
    font-size: calc(22px*var(--per));
  }

  p:not(:first-child){
    margin-block-start: calc(25px*var(--per));
  }

  p:not(:last-child){
    margin-block-end: calc(25px*var(--per));
  }

  h3 + p:not(:first-child){
    margin-block-start: 0px;
  }
}

.introduction-headline{
  margin-block-end: 30px;
}

.introduction-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media screen and (max-width: 480px){
  #introduction{
    margin-block-end: calc(80px*var(--per));
  }

  .introduction-headline{
    margin-block-end: calc(25px*var(--per));
  }

  .introduction-wrap{
    grid-template-columns: 1fr;
    gap: calc(15px*var(--per));
  }
}

#interview,
#interview section:not(:last-child){
  margin-block-end: 80px;
}

#interview h3{
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

.interview-headline{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #004EA2;
  width: 100%;
  height: 50px;
  margin-block-end: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1;
}

.interview-wrap{
  display: grid;
  grid-template-columns: repeat(2, 545px);
  gap: 10px;
  width: 100%;
}

p.interview-sup{
  margin-block-start: 0.5em;
}

@media screen and (max-width: 480px){
  #interview,
  #interview section:not(:last-child){
    margin-block-end: calc(80px*var(--per));
  }

  .interview-headline{
    height: calc(65px*var(--per));
    margin-block-end: calc(50px*var(--per));
    font-size: calc(24px*var(--per));
  }

  .interview-wrap{
    grid-template-columns: 100%;
    gap: calc(15px*var(--per));
  }

  .interview-item{
    width: 100%;
  }
}

#product{
  margin-block-end: 220px;
}

#product section:not(:last-child){
  margin-block-end: 60px;
}

#product h3{
  margin-block-end: 0.5em;
}

#product h3:before{
  content: "■";
}

#product h3 span{
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

#product h3 span a{
  color: #000;
}

#product p{
  padding-inline: 1.0em;
}

.product-image{
  aspect-ratio: 1/1;
  width: 508px;
  margin-block-end: 30px;
  margin-inline: 60px;
}

.product-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-link{
  margin-block-start: 40px;
  text-align: center;
}

.product-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 60px;
    border: 1px solid #004ea2;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background: #004ea2;
    text-decoration: none;
}

@media screen and (max-width: 480px){
  #product{
    margin-block-end: calc(130px*var(--per));
  }

  #product section:not(:last-child){
    margin-block-end: calc(70px*var(--per));
  }

  .product-image{
    width: calc(448/650*100%);
    margin-block-end: calc(20px*var(--per));
    margin-inline: 0px;
  }

  .product-link{
    margin-block-start: calc(40px*var(--per));
  }

  .product-link a {
    width: 100%;
      height: 48px;
      font-size: calc(22px*var(--per));
  }
}

.slide1,
.slide2{
  position: relative;
}

.slide1-thumbnail,
.slide2-thumbnail{
  margin-block-start: 15px;
}

.slide1-thumbnail figure.swiper-slide-thumb-active,
.slide2-thumbnail figure.swiper-slide-thumb-active{
  opacity: 0.5;
}

.slide1-thumbnail figure:not(.swiper-slide-thumb-active),
.slide2-thumbnail figure:not(.swiper-slide-thumb-active){
  cursor: pointer;
}

#product .swiper-button-next{
  right: 0;
}

#product .swiper-button-prev{
  left: 0;
}

#product .swiper-button-next,
#product .swiper-button-prev{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4646461A;
  width: 40px;
  height: 100%;
  margin-top: 0;
  top: 0;
  z-index: 10;
  transform: translate(0, 0);
}

#product .swiper-button-next svg,
#product .swiper-button-prev svg{
  display: none;
}

#product .swiper-button-next:before,
#product .swiper-button-prev:before{
  content: "";
  background: url(../img/arrow.svg) no-repeat center/contain;
  width: 20px;
  height: 52px;
  opacity: 1;
}

#product .swiper-button-prev:before{
  transform: rotate(180deg);
}

@media screen and (max-width: 480px){
  .slide1-thumbnail,
  .slide2-thumbnail{
    margin-block-start: calc(10px*var(--per));
  }

  #product .swiper-button-next,
  #product .swiper-button-prev{
    width: calc(76px*var(--per));
  }

  #product .swiper-button-next:before,
  #product .swiper-button-prev:before{
    width: calc(18px*var(--per));
    height: calc(48px*var(--per));
  }
}

@media screen and (max-width: 480px){
  #link a{
    display: flex;
    justify-content: center;
  }

  #link a img{
    display: block;
    width: 100vw;
    max-width: inherit;
  }
}