@import "breakpoint";
.page-ttl {
  display: none;
}
.reason__inner {
  max-width: 1080px;
  padding: 0 40px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 1024px) {
  .reason__inner {
    padding: 0 4%;
  }
}
@media (max-width: 767px) {
  .reason__inner {
    padding: 0 5.33%;
  }
}
.reason-history-fv {
  max-width: 1920px;
  height: 400px;
  text-align: center;
  background: url(../../../../images/history/fv_bg_pc.jpg) no-repeat center / cover;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .reason-history-fv {
    height: 40vw;
  }
}
.reason-history-fv .reason__inner {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .reason-history-fv {
    height: 69.33vw;
    background-image: url(../../../../images/history/fv_bg_sp.jpg);
  }
}
.reason-history-fv__catch {
  padding-right: 20px;
}
@media (max-width: 1024px) {
  .reason-history-fv__catch {
    padding-right: 2%;
  }
}
@media (max-width: 767px) {
  .reason-history-fv__catch {
    padding-right: 0;
    padding-top: 9%;
    margin-left: 24%;
  }
}
@media (max-width: 1024px) {
  .reason-history-fv__catch img {
    width: 30.9vw;
  }
}
@media (max-width: 767px) {
  .reason-history-fv__catch img {
    width: 57.73vw;
  }
}
.reason-history-fv__ttl {
  position: absolute;
  top: 35%;
  left: 46.6%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
}
@media (max-width: 767px) {
  .reason-history-fv__ttl {
    width: 90vw;
    top: 33%;
  }
}
@media (min-width: 1025px) {
  .reason-history-fv__ttl {
    top: 55px;
    left: 240px;
    transform: initial;
  }
}
@media (max-width: 1024px) {
  .reason-history-fv__ttl img {
    width: 46.7vw;
  }
}
@media (max-width: 767px) {
  .reason-history-fv__ttl img {
    width: 100%;
  }
}
.reason-history-fv__medal {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translate(-50%, 0);
}
@media (max-width: 767px) {
  .reason-history-fv__medal {
    width: 90vw;
    bottom: 14%;
  }
}
@media (max-width: 1024px) {
  .reason-history-fv__medal img {
    width: 46.1vw;
  }
}
@media (max-width: 767px) {
  .reason-history-fv__medal img {
    width: 100%;
  }
}
.reason-history-intro {
  background: url(../../../../images/history/intro_bg_01_pc.png) right 5% bottom -63px / 473px 467px no-repeat, #ce7e25;
  padding: 40px 0 60px;
  position: relative;
}
@media (max-width: 1024px) {
  .reason-history-intro {
    padding: 4% 0 6%;
    background-size: 47.3vw 46.7vw;
  }
}
@media (max-width: 767px) {
  .reason-history-intro {
    padding: 40% 0 13%;
    background-image: url(../../../../images/history/intro_bg_01_sp.png);
    background-size: 43.2vw 62.27vw;
    background-position: top -10px right 0;
  }
}
.reason-history-intro .reason__inner {
  display: flex;
  justify-content: center;
}
@media (max-width: 767px) {
  .reason-history-intro .reason__inner {
    display: block;
  }
}
@media (max-width: 767px) {
}
.reason-history-intro__img--01, .reason-history-intro__img--02 {
  position: absolute;
}
@media (max-width: 767px) {
  .reason-history-intro__img--01 img, .reason-history-intro__img--02 img {
    width: 52vw;
  }
}
.reason-history-intro__img--01 {
  top: -60px;
  left: -480px;
}
@media (max-width: 1024px) {
  .reason-history-intro__img--01 {
    top: -6vw;
    left: -44vw;
    width: 39.216vw;
  }
}
@media (max-width: 767px) {
  .reason-history-intro__img--01 {
    top: -46vw;
    left: auto;
    right: -5.3vw;
    width: 38.667vw;
  }
}
.reason-history-intro__img--02 {
  top: -120px;
  right: -550px;
}
@media (max-width: 1024px) {
  .reason-history-intro__img--02 {
    top: -12vw;
    right: -39vw;
    width: 33.204vw;
  }
}
@media (max-width: 767px) {
  .reason-history-intro__img--02 {
    top: -37vw;
    right: 0;
    left: -5.3vw;
    width: 48vw;
  }
}
.reason-history-intro__txt {
  position: relative;
  font-size: 1.6rem;
  line-height: 4.6rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
}
@media (max-width: 1024px) {
  .reason-history-intro__txt {
    font-size: 1.55vw;
    line-height: 4.6vw;
  }
}
@media (max-width: 767px) {
  .reason-history-intro__txt {
    text-align: center;
    font-size: 3.6vw;
    line-height: 1.8;
  }
}
.reason-history-intro__txt .display-sp {
  display: none;
}
@media (max-width: 767px) {
  .reason-history-intro__txt .display-sp {
    display: block;
  }
}
.reason-history-intro__txt--01, .reason-history-intro__txt--02 {
  text-align: center;
}
@media (max-width: 767px) {
  .reason-history-intro__txt--01 {
    padding-bottom: 7vw;
  }
}
.reason-history-intro__imgsp {
  display: none;
}
@media (max-width: 767px) {
  .reason-history-intro__imgsp {
    display: block;
  }
}
.reason-history-history {
  background: url(../../../../images/history/history_bg_02_pc.png) no-repeat bottom center / cover;
  padding-bottom: 122px;
}
@media (max-width: 1024px) {
  .reason-history-history {
    padding-bottom: 12.2%;
  }
}
.reason-history-history__head {
  max-width: 1920px;
  background: url(../../../../images/history/history_head_bg_pc.jpg) no-repeat center / cover;
  margin: 0 auto;
  padding: 80px 0 75px;
  margin-bottom: 88px;
}
@media (max-width: 1024px) {
  .reason-history-history__head {
    padding: 8% 0 7.5%;
    margin-bottom: 8.8%;
  }
}
@media (max-width: 767px) {
  .reason-history-history__head {
    padding-bottom: 13%;
    background-image: url(../../../../images/history/history_head_bg_sp.jpg);
  }
}
.reason-history-history__head .reason__inner {
  max-width: 840px;
  margin: 0 auto;
}
.reason-history-history__head__catch {
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0;
  font-weight: 700;
  text-align: center;
  background-color: #231714;
  padding: 18px;
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .reason-history-history__head__catch {
    margin-bottom: 6%;
  }
}
@media (max-width: 767px) {
  .reason-history-history__head__catch {
    font-size: 1.5rem;
    padding: 3%;
    margin: 9% 0 3%;
  }
}
.reason-history-history__head__ttl {
  text-align: center;
  padding-bottom: 62px;
  margin-bottom: 38px;
  border-bottom: 1px solid #231714;
}
@media (max-width: 1024px) {
  .reason-history-history__head__ttl {
    padding-bottom: 6.2%;
    margin-bottom: 3.8%;
  }
}
@media (max-width: 767px) {
  .reason-history-history__head__ttl {
    border-bottom: none;
  }
}
.reason-history-history__head__txt {
  font-size: 2.2rem;
  line-height: 5.2rem;
  letter-spacing: 0;
  text-align: center;
  color: #231714;
  font-weight: 500;
}
@media (max-width: 767px) {
  .reason-history-history__head__txt {
    font-size: 1.5rem;
    line-height: 1.8;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1);
  }
}
.reason-history-history__head__txt .display-sp {
  display: none;
}
@media (max-width: 767px) {
  .reason-history-history__head__txt .display-sp {
    display: block;
  }
}
.reason-history-history__person {
  display: flex;
  align-items: flex-end;
  margin-bottom: 80px;
}
@media (max-width: 1024px) {
  .reason-history-history__person {
    margin-bottom: 8%;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person {
    display: block;
  }
}
.reason-history-history__person__main {
  display: flex;
  margin-right: 80px;
  margin-left: -150px;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main {
    margin-right: 5%;
    margin-left: -20%;
    float: left;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main {
    margin-right: 0;
    margin-left: -6%;
    margin-bottom: 8%;
  }
}
.reason-history-history__person__main__img {
  width: 600px;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__img {
    width: 60vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__img {
    width: 90vw;
  }
}
.reason-history-history__person__main__blk {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  margin: 90px 0 0 -90px;
  position: relative;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk {
    margin: 9vw 0 0 -14vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk {
    margin: 4vw 0 0 -34vw;
  }
}
.reason-history-history__person__main__blk__chapter {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  background-color: #231714;
  padding: 10px;
  display: inline-block;
  margin-left: 15px;
  position: relative;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__chapter {
    padding: 1vw;
    margin-left: 1.5vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__chapter {
    font-size: 1.2rem;
    padding: 1vw;
  }
}
.reason-history-history__person__main__blk__chapter::before {
  content: "";
  width: 10px;
  height: 10px;
  background: url(../../../../images/history/history_icon_01_pc.png) no-repeat center / contain;
  display: inline-block;
  margin: 5px 0 10px;
}
.reason-history-history__person__main__blk__chapter strong {
  font-size: 2.8rem;
  position: relative;
  font-weight: 900;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__chapter strong {
    font-size: 2.3rem;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__chapter strong {
    font-size: 1.8rem;
  }
}
.reason-history-history__person__main__blk__chapter strong::before {
  content: "";
  width: 28px;
  height: 1px;
  background-color: #fff;
  display: inline-block;
  margin: 20px 0;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__chapter strong::before {
    width: 2.8vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__chapter strong::before {
    width: 20px;
    margin: 15px 0;
  }
}
.reason-history-history__person__main__blk__chapter strong::after {
  content: "";
  width: 28px;
  height: 1px;
  background-color: #fff;
  display: inline-block;
  margin: 20px 0;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__chapter strong::after {
    width: 2.8vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__chapter strong::after {
    width: 20px;
    margin: 15px 0;
  }
}
.reason-history-history__person__main__blk__ttl {
  font-size: 2.6rem;
  line-height: 5rem;
  font-weight: 700;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  background-color: #fff;
  padding: 30px 20px;
  position: relative;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__ttl {
    padding: 3vw 2vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__ttl {
    font-size: 1.8rem;
    line-height: 1.8;
    padding: 5vw 4vw 0 3vw;
    box-shadow: 0 0 1vw rgba(0, 0, 0, .4);
  }
}
.reason-history-history__person__main__blk__ttl strong {
  font-size: 4rem;
  font-weight: 900;
}
@media (max-width: 1024px) {
  .reason-history-history__person__main__blk__ttl strong {
    font-size: 3.5rem;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__ttl strong {
    font-size: 2.2rem;
  }
}
.reason-history-history__person__main__blk__ttl span {
  position: relative;
  font-weight: 900;
}
.reason-history-history__person__main__blk__ttl span::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #231714;
  position: absolute;
  top: 0;
  transform: translateX(1px);
}
.reason-history-history__person__main__blk__ttl .display-sp {
  display: none;
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__ttl .display-sp {
    display: block;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person__main__blk__ttl .hide-sp {
    display: none;
  }
}
.reason-history-history__person__txt {
  font-size: 1.8rem;
  line-height: 4.2rem;
  font-weight: 500;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .reason-history-history__person__txt {
    font-size: 1.4rem;
    line-height: 1.8;
    clear: both;
  }
}
.reason-history-history__person__txt strong {
  color: #eb6100;
}
.reason-history-history__person:nth-of-type(2n) {
  flex-direction: row-reverse;
}
.reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main {
  margin-right: -150px;
  margin-left: 80px;
  flex-direction: row-reverse;
}
@media (max-width: 1024px) {
  .reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main {
    margin-right: -20%;
    margin-left: 5%;
    float: right;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main {
    margin-right: -6%;
    margin-left: 0;
  }
}
.reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main__blk {
  margin-left: 0;
  margin-right: -90px;
}
@media (max-width: 1024px) {
  .reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main__blk {
    margin-right: -15vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__person:nth-of-type(2n) .reason-history-history__person__main__blk {
    margin-right: -32vw;
  }
}
.reason-history-history__person.person-02 .reason-history-history__person__main__blk__chapter {
  background-color: #81511c;
}
.reason-history-history__person.person-03 .reason-history-history__person__main__blk__chapter {
  background-color: #d87a12;
}
.reason-history-history__txt {
  font-size: 1.8rem;
  line-height: 4.2rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 90px;
}
@media (max-width: 1024px) {
  .reason-history-history__txt {
    margin-bottom: 9%;
  }
}
@media (max-width: 767px) {
  .reason-history-history__txt {
    font-size: 1.4rem;
    line-height: 1.8;
  }
}
.reason-history-history__txt strong {
  color: #eb6100;
}
.reason-history-history__img {
  text-align: center;
  margin-bottom: 90px;
}
@media (max-width: 1024px) {
  .reason-history-history__img {
    margin-bottom: 9%;
  }
}
@media (max-width: 767px) {
  .reason-history-history__img {
    margin-bottom: 13%;
  }
}
.reason-history-history__flex {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin-bottom: 90px;
}
@media (max-width: 1024px) {
  .reason-history-history__flex {
    display: block;
    margin-bottom: 9%;
  }
}
.reason-history-history__flex .reason-history-history__img {
  width: 700px;
  min-width: 700px;
  margin-right: -290px;
  margin-left: 135px;
}
@media (max-width: 1024px) {
  .reason-history-history__flex .reason-history-history__img {
    width: 70vw;
    min-width: 70vw;
    margin-right: -29%;
    margin-left: 13.5%;
    float: right;
  }
}
@media (max-width: 767px) {
  .reason-history-history__flex .reason-history-history__img {
    width: auto;
    float: none;
    margin: 0 -6% 13% 0;
  }
}
.reason-history-history__flex .reason-history-history__txt {
  margin-bottom: 0;
}
.reason-history-history__btm {
  max-width: 1200px;
}
.reason-history-history__btm__movie {
  margin: 0 auto 50px;
  text-align: center;
}
@media (max-width: 1024px) {
  .reason-history-history__btm__movie {
    margin: 0 auto 5vw;
  }
}
@media (max-width: 767px) {
  .reason-history-history__btm__movie {
    margin: 0 auto 10vw;
  }
}
.reason-history-history__btm__movie iframe {
  aspect-ratio: 1.77778;
  width: 100%;
  height: 100%;
  margin: auto;
}
.reason-history-history__btm__txt {
  font-size: 2rem;
  line-height: 5.2rem;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
  margin: 0 auto;
  background: url(../../../../images/history/history_bg_01_pc.png) left 5% bottom -33px / 224px 222px no-repeat, #fff;
  border: 1px solid #c9c9c9;
  padding: 68px 0;
}
@media (max-width: 1024px) {
  .reason-history-history__btm__txt {
    font-size: 1.8rem;
    background-size: 22.4vw 22.2vw;
    padding: 6.8% 0;
  }
}
@media (max-width: 767px) {
  .reason-history-history__btm__txt {
    font-size: 1.6rem;
    line-height: 2.3;
    background-position: bottom -5vw left -1vw;
    padding: 14% 0;
  }
}
.reason-history-history__btm__txt strong {
  color: #eb6100;
}
.reason-history-history__btm .display-tb {
  display: none;
}
@media (max-width: 1024px) {
  .reason-history-history__btm .display-tb {
    display: block;
  }
}
.reason-history-history__btm .display-sp {
  display: none;
}
@media (max-width: 767px) {
  .reason-history-history__btm .display-sp {
    display: block;
  }
}
.reason-history-history__sub {
  font-size: 2.8rem;
  line-height: 1.6em;
  position: relative;
  text-align: center;
  display: inline-block;
  font-weight: 800;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .reason-history-history__sub {
    font-size: 4.8vw;
  }
}
.reason-history-history__sub::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #000;
}
.reason-history-history__center {
  text-align: center;
}
img {
  min-width: 1px;
  min-height: 1px;
}
/* style.css */
/* サムネイルのスタイル */
.video-thumbnail-area {
  position: relative;
  aspect-ratio: 1.77778;
  width: 100%;
  height: 100%;
  cursor: pointer;
  max-width: 800px;
  margin: auto;
}
.video-thumbnail {
  width: 100%;
  height: 100%;
  display: block;
}
/* 再生ボタンのスタイル */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  pointer-events: none;
  /* サムネイルクリックを妨げない */
  transition: background-color 0.3s;
}
.video-thumbnail-area:hover .play-button {
  background-color: rgba(255, 0, 0, 0.8);
}
/* モーダルの基本的なスタイル (初期は非表示) */
.modal {
  display: none;
  /* デフォルトは非表示 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* モーダルの背景（オーバーレイ） */
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* 半透明の黒 */
}
/* モーダルのコンテンツ (iFrameを中央に配置) */
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 要素の中心を画面の中心に持ってくるための設定 */
  transform: translate(-50%, -50%);
  /* iFrameのサイズ + 少しの余白 */
  background-color: #000;
  /* iFrameの背景 */
  padding: 10px;
  border-radius: 5px;
  width: 90%;
  height: 82%;
}
/* 閉じるボタン */
.close-button {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: -30px;
  right: 0px;
  cursor: pointer;
  z-index: 1001;
  /* iFrameより手前に表示 */
}
/* iFrameのスタイル */
#video-iframe {
  display: block;
}