@charset "utf-8";

/* Theme Name: 
original */

.h_bar,
#beltbnr {
  display: none;
}
/* === 
全共通 
==== */
html {
  font-size: 62.5%;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
/* ====
ここ不要 
=======
img {
  width: 100%;
  height: auto;
  vertical-align: middle;
} */
/* ====
ここ不要 
======= 
.center {
  text-align: center;
} */

.f-014 {
  color: #333333;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: .04em;
  line-height: 1.8;
}
.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 75px;
}
/* ==========
ここは変更しない
============= */
.wrap-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ==========
ここは変更しない
============= */
.column {
  display: flex;
  flex-direction: column;
}
a.btn {
  color: #FFFFFF;
  font-size: 1.4rem;
  letter-spacing: .04em;
  line-height: 1.8;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
}
/* ============
スターレーティング
=============== */
.star5-rating {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: #E5E5E5;
  font-size: 16px;
}
.star5-rating::before,
.star5-rating::after {
  content: '★ ★ ★ ★ ★';
}
.star5-rating:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #d5820b;
}
.star5-rating[data-rate="5"]:after {
  width: 100%;
}
.star5-rating[data-rate="4.5"]:after {
  width: 90%;
}
.star5-rating[data-rate="4"]:after {
  width: 80%;
}
.star5-rating[data-rate="3.5"]:after {
  width: 70%;
}
.star5-rating[data-rate="3"]:after {
  width: 60%;
}
.star5-rating[data-rate="2.5"]:after {
  width: 50%;
}
.star5-rating[data-rate="2"]:after {
  width: 40%;
}
.star5-rating[data-rate="1.5"]:after {
  width: 30%;
}
.star5-rating[data-rate="1"]:after {
  width: 20%;
}
.star5-rating[data-rate="0.5"]:after {
  width: 10%;
}
.star5-rating[data-rate="0"]:after {
  width: 0%;
}

/* =====
contents
======== */
.pc-img {
  display: block;
}
.sp-img {
  display: none;
}
.l-content--header,
.l-container {
  width: 878px;
  margin-inline: auto;
}
.p-article--header {
  width: 75%;
  margin-inline: auto;
  padding-top: 75px;
}
.p-article--circle {
  margin-inline: auto;
}
.p-article--circle {
  clip-path: circle(35%);
}
.p-article--circle img {
  display: block;
  width: 95%;
  max-width: 95%;
  margin-inline: auto;
}
.f-014 span {
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 700;
  font-style: normal;
}
.p-article--header .p-article--right > div {
  background: #E5E5E5;
  border-radius: 1px;
  padding: 30px 30px 30px 30px;
  position: relative;
}
.p-article--header .p-article--right > div::before,
.p-article--header .p-article--right > div::after {
  content: "";
  border-radius: 50%;
  width: 0;
  height: 0;
  transform: rotate(45deg);
  position: absolute;
}
.p-article--header .p-article--right > div::before {
  background: #E5E5E5;
  border-top: 50px solid #E5E5E5;
  border-left: 50px solid #E5E5E5;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  position: absolute;
  top: -25px;
  left: 15px;
  z-index: -1;
}
.p-article--header .p-article--right > div::after {
  border-left: 40px solid #FFFFFF;
  border-top: 40px solid #FFFFFF;
  border-bottom: 40px solid transparent;
  border-right: 40px solid transparent;
  top: -40px;
  left: 40px;
}
.sec {
  position: relative;
  margin-top: 96px;
}
.heading {
  font-family: "linotype-sabon", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 80px;
}
.heading::before,
.heading::after {
  content: "";
  display: block;
  position: absolute;
}
.heading::before {
  background: #E5E5E5;
  width: 80px;
  height: 1px;
  top: 80px;
  left: 48.5%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
}
.heading::after {
  color: #E5E5E5;
  content: attr(data-label);
  font-family: "linotype-sabon", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 72px;
  top: 75px;
  left: 52%;
}
.sec .column {
  width: 80%;
  margin-inline: auto;
}
.item-img {
  width: 65%;
  margin-top: 96px;
  margin-inline: auto;
}
.star-rating {
  width: 50%;
  margin-inline: auto;
  padding-top: 20px;
}
.l-content--body .p-article--left,
.l-content--body .p-article--right {
  width: 46%;
}
.sec h3.f-014::first-letter {
  font-size: 3.6rem;
  font-weight: 700;
  font-style: normal;
  float: left;
  line-height: 1.15;
  padding-right: 5px;
}
.sec h3.f-014 {
  line-height: 1.5;
}
#sec01 h3.f-014,
#sec03 h3.f-014 {
  padding-right: 30px;
}
.l-content--body .p-article--right .f-014 {
  padding: 12px 0;
}
a.txt-link {
  color: #333333;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: underline;
}
.credit-item {
  margin-top: 10px;
}
.credit-item .f-014 {
  display: inline-block;
}
.credit-item .f-014:first-of-type {
  width: 84%;
}
.credit-item a.btn {
  background: #d5820b;
  border: 1px solid #d5820b;
  border-radius: 1px;
  padding: 2px 10px;
  transition: all .3s;
}
.credit-item a.btn:hover,
.all-items a.btn:hover {
  background: #FFFFFF;
  color: #d5820b;
}
.all-items {
  margin-top: 12.8%;
  margin-bottom: 21.3%;
}
.all-items a.btn {
  background: #d5820b;
  border: 1px solid #d5820b;
  border-radius: 1px;
  display: block;
  transition: all .3s;
  padding: 12px 0;
  width: 480px;
  margin-inline: auto;
}
/* ===========
swiper カスタム 
============== */
.swiper-slide {
  height: auto;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.swiper-content {
  position: relative;
}
.swiper {
  position: static;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -30px;
}
/* ================
fraction カスタマイズ
=================== */
.swiper-pagination-fraction {
  font-size: 12px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  z-index: 1;
  bottom: -20px;
}
/* =======================
ラインアニメーションをcssで表現
========================== */
.swiper-pagination-fraction .border {
  width: 100px;
  height: 2.5px;
  margin: 0 0 0 8px;
  background-color: #E5E5E5;
  position: relative;
}
.swiper-pagination-fraction .border span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #1a1b1b;
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: linear;
}
.swiper-pagination.is-active .border span {
  transform: scaleX(1);
  transition: transform 3.85s linear;
}
.swiper-pagination-current,
.swiper-pagination-total {
  display: none;
}

@media(max-width: 768px) {
  /* ===
  全共通
  ===== */
  .wrap {
    display: block;
  }
  .wrap {
    padding-top: 35px;
  }

  /* =====
  コンテンツ
  ======== */
  .pc-img {
    display: none;
  }
  .sp-img {
    display: block;
  }
  .l-content--header,
  .l-container {
    width: 100%;
    margin-inline: auto;
  }
  .p-article--header {
    width: 89.5%;
    padding-top: 35px;
  }
  .p-article--header .center {
    text-align: left;
  }
  .p-article--header .column .p-article--left {
    margin-top: 35px;
    margin-bottom: 20px;
  }
  .p-article--circle {
    clip-path: circle(40%);
  }
  .column .p-article--left .f-014 {
    font-size: 1.2rem;
  }
  .p-article--header .p-article--right > div {
    padding: 15px 10px;
  }
  .p-article--header .p-article--right > div::before {
    border-top: 40px solid #E5E5E5;
    border-left: 40px solid #E5E5E5;
    border-bottom: 40px solid transparent;
    border-right: 40px solid transparent;
    top: -20px;
    left: 10px;
  }
  .p-article--header .p-article--right > div::after {
    border-left: 25px solid #FFFFFF;
    border-top: 25px solid #FFFFFF;
    border-bottom: 25px solid transparent;
    border-right: 25px solid transparent;
    top: -25px;
    left: 35px;
  }
  .sec {
    margin-top: 60px;
  }
  .heading {
    font-size: 4.8rem;
  }
  .heading::before {
    top: 45px;
    left: 44%;
  }
  .heading::after {
    font-size: 3.6rem;
    top: 45px;
    left: 54%;
  }
  .sec .column {
    width: 89.5%;
  }
  .item-img {
    width: 91.5%;
    margin-top: 48px;
  }
  .star-rating {
    width: 75%;
  }
  .l-content--body .p-article--left, .l-content--body .p-article--left,
  .l-content--body .p-article--left, .l-content--body .p-article--right {
    width: 89.5%;
  }
  .l-content--body .p-article--left, .l-content--body .p-article--right {
    margin-inline: auto;
  }
  .l-content--body .p-article--right {
    margin-top: 28px;
  }
  .l-content--body .p-article--right > div {
    text-align: center;
    display: block;
  }
  .l-content--body .p-article--right > div h3.f-014 {
    text-align: left;
    display: inline-block;
    white-space: nowrap;
  }
  .credit-item .f-014:first-of-type {
    width: 82%;
  }
  .all-items {
    margin-top: 12.8%;
    margin-bottom: 21.3%;
  }

  .all-items a.btn {
    width: 89.5%;
    padding: 6px 0;
  }
}