@charset "UTF-8";

:root {
  --media_pc: 1680; /* VW計算用 calc(vw / var(--media_pc)) */
  --media_sp: 750;
}

p,span{color:#1e1e1e;}
picture{display:block;}
.img{position:relative;font-size:0;}
p {
  font-family: YakuHanMP,'Zen Old Mincho', serif;
}

.kv-wrap{
  width: 100%;
  margin-top:122px;
}
.kv-wrap{
  display:block;
  position:relative;
}
.kv-wrap .kv-ttl{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-family: "OptimaLTPro-Roman";
  font-size:100px;
  color:#fff;
  white-space: nowrap;
}
.kv-wrap .kv-cap{
  position:absolute;
  bottom:0;
  right:0;
  margin:5px;
  font-size:12px;
  color:#fff;
  text-shadow: 1px 1px 20px #333;
}

.img .cap {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 5px;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 20px #333;
  /*font-family: 'Noto Sans JP', sans-serif;*/
}

@media screen and (max-width: 1366px) {
  .kv-wrap{
    margin-top:8.931vw;
  }
  .kv-wrap .kv-ttl{
    font-size:7.321vw;
  }
  .kv-wrap .kv-cap{
    margin:0.366vw;
    font-size:0.878vw;
  }
}

@media screen and (max-width: 768px) {
  .kv-wrap{
    margin-top:16.276vw;
  }
  .kv-wrap .kv-ttl{
    font-size:11.467vw;
  }
  .kv-wrap .kv-cap{
    margin:0.667vw 1.333vw;
    font-size:2.667vw;
  }
  .img .cap {
    font-size: 2.666vw; 
  }
}

.bg_wrap{
  background: url("../img/voice/bg_voice_pc.png")no-repeat top right;
  background-size: 100%;
  width:100%;
  padding:134px 0 140px;
}
.intro_wrap{
  text-align: center;
  margin-bottom:144px;
}
.i_ttl{
  font-size:36px;
  line-height: 1.889;
  letter-spacing: 0;
}
.caption-wrap{
  display: none;
}

@media screen and (max-width: 768px) {
  .bg_wrap{
    background: url("../img/voice/bg_voice_sp.png")no-repeat top right;
    background-size: 100%;
    padding: calc(145 / var(--media_sp) * 100vw) 0 calc(175 / var(--media_sp) * 100vw);
  }
  .intro_wrap{
    margin-bottom: calc(120 / var(--media_sp) * 100vw);
  }
  .i_ttl{
    font-size: calc(44 / var(--media_sp) * 100vw);
    line-height: 1.832;
    letter-spacing: 0.145em;
  }
}

.voice_wrap{
  width:100%;
}
.voice_box{
  width: calc(50% + 640px);
  position: relative;
}
.voice_box.rev{
  margin-left:auto;
}
.voice_box::before{
  content:'';
  display:block;
  width:calc(100% - 375px);
  height:100%;
  position: absolute;
  top:0;
  left:0;
}
.voice_box.box01::before{
  background: url("../img/voice/bg_voice01_pc.png")no-repeat bottom right;
  background-size: cover;
}
.voice_box.box02::before{
  background: url("../img/voice/bg_voice02_pc.png")no-repeat bottom left;
  background-size: cover;
}
.voice_box.box03::before{
  background: url("../img/voice/bg_voice03_pc.png")no-repeat bottom right;
  background-size: cover;
}
.voice_box.rev::before{
  left:auto;
  right:0;
}
.voice_box:nth-child(n+2){
  margin-top:100px;
}
.voice_box .inner_voice_box{
  width:1280px;
  margin-left:auto;
  position: relative;
  display:flex;
  align-items: flex-start;
  padding:110px 0;
}
.voice_box.rev .inner_voice_box{
  margin-left:0;
  margin-right:auto;
  flex-direction: row-reverse;
}
.voice_box .inner_voice_box .num{
  position: absolute;
  top:-57px;
  left:0;
  font-size:166px;
  font-family: "OptimaLTPro-Roman";
  color:rgba(179,152,114,.25);
  letter-spacing: 0.02em;
}
.voice_box.rev .inner_voice_box .num{
  left:auto;
  right:0;
}
.voice_box .inner_voice_box .txt_wrap{
  width:589px;
  position: relative;
}
.voice_box .inner_voice_box .txt_wrap .prof_wrap{
  position: relative;
  width:597px;
  height:204px;
  margin-bottom:26px;
  padding: 28px 0 0 43px;
  box-sizing: border-box;
}
.voice_box .inner_voice_box .txt_wrap .prof_wrap::after{
  content:'';
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/voice/flame_pc.png")no-repeat top left;
  background-size: cover;
  width:100%;
  height:100%;
}
.voice_box .inner_voice_box .txt_wrap .prof_wrap.lar{
  height:256px;
}
.voice_box .inner_voice_box .txt_wrap .prof_wrap.lar::after{
  background: url("../img/voice/flame_l_pc.png")no-repeat top left;
  background-size: cover;
}
.voice_box.rev .inner_voice_box .txt_wrap .prof_wrap::after{
  transform: scaleX(-1);
  margin-left:-16px;
}
.voice_box .inner_voice_box .txt_wrap .prof_ttl{
  font-size:28px;
  line-height: 1.929;
  letter-spacing: 0;
  margin-bottom: 15px;
}
.voice_box .inner_voice_box .txt_wrap .prof_ttl.ls02{
  letter-spacing: -0.02em;
}
.voice_box .inner_voice_box .txt_wrap .prof_note{
  font-size:16px;
  line-height: 1;
  color:#b39872;
  letter-spacing: 0.16em;
}
.voice_box .inner_voice_box .txt_wrap .txt{
  font-size:16px;
  line-height: 2.25;
  letter-spacing: 0.06em;
}
.voice_box .inner_voice_box .img{
  width:637px;
  margin-left:54px;
  border-radius: 0 60px 0 0;
  box-sizing: border-box;
  overflow: hidden;
}
.voice_box.rev .inner_voice_box .img{
  margin-left:0;
  margin-right:54px;
  border-radius: 60px 0 0 0;
}

@media screen and (max-width: 768px) {
  .voice_box{
    width: 100%;
  }
  .voice_box::before{
    width:100%;
  }
  .voice_box.box01::before{
    background: url("../img/voice/bg_voice01_sp.png")no-repeat top right;
    background-size: cover;
  }
  .voice_box.box02::before{
    background: url("../img/voice/bg_voice02_sp.png")no-repeat top right;
    background-size: cover;
  }
  .voice_box.box03::before{
    background: url("../img/voice/bg_voice03_sp.png")no-repeat top right;
    background-size: cover;
  }
  .voice_box.rev::before{
    left:0;
    right:auto;
  }
  .voice_box:nth-child(n+2){
    margin-top: calc(150 / var(--media_sp) * 100vw);
  }
  .voice_box .inner_voice_box{
    width:86.667%;
    margin:0 auto;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    padding: calc(378 / var(--media_sp) * 100vw) 0 calc(75 / var(--media_sp) * 100vw);
  }
  .voice_box.box01 .inner_voice_box{
    padding: calc(434 / var(--media_sp) * 100vw) 0 calc(75 / var(--media_sp) * 100vw);
  }
  .voice_box.rev .inner_voice_box{
    margin:0 auto;
    flex-direction: column-reverse;
  }
  .voice_box .inner_voice_box .num{
    top: calc(-80 / var(--media_sp) * 100vw);
    left:0;
    font-size: calc(166 / var(--media_sp) * 100vw);
  }
  .voice_box.rev .inner_voice_box .num{
    left:0;
    right:auto;
  }
  .voice_box .inner_voice_box .txt_wrap{
    width:100%;
    position: static;
  }
  .voice_box .inner_voice_box .txt_wrap .prof_wrap{
    width:100%;
    height:auto;
    aspect-ratio: 653 / 255;
    margin-bottom:0;
    padding: calc(40 / var(--media_sp) * 100vw) 0 0 calc(45 / var(--media_sp) * 100vw);
    position: absolute;
    top: calc(95 / var(--media_sp) * 100vw);
    left:0;
  }
  .voice_box .inner_voice_box .txt_wrap .prof_wrap::after{
    background: url("../img/voice/flame_sp.png")no-repeat top left;
    background-size: cover;
  }
  .voice_box .inner_voice_box .txt_wrap .prof_wrap.lar{
    height:auto;
    aspect-ratio: 653 / 312;
  }
  .voice_box .inner_voice_box .txt_wrap .prof_wrap.lar::after{
    background: url("../img/voice/flame_l_sp.png")no-repeat top left;
    background-size: cover;
  }
  .voice_box.rev .inner_voice_box .txt_wrap .prof_wrap::after{
    transform: scaleX(1);
    margin-left:0;
  }
  .voice_box .inner_voice_box .txt_wrap .prof_ttl{
    font-size: calc(32 / var(--media_sp) * 100vw);
    line-height: 1.893;
    letter-spacing: -0.015;
    margin-bottom: calc(15 / var(--media_sp) * 100vw);
  }
  .voice_box .inner_voice_box .txt_wrap .prof_note{
    font-size: calc(24 / var(--media_sp) * 100vw);;
    letter-spacing: 0.16em;
  }
  .voice_box .inner_voice_box .txt_wrap .txt{
    font-size: calc(26 / var(--media_sp) * 100vw);
    line-height: 2;
  }
  .voice_box .inner_voice_box .img{
    width:100%;
    margin-left:0;
    margin-bottom: calc(30 / var(--media_sp) * 100vw);
    border-radius: calc(62 / var(--media_sp) * 100vw) 0 0 0;
  }
  .voice_box.rev .inner_voice_box .img{
    margin-left:0;
    margin-right:0;
    border-radius: calc(62 / var(--media_sp) * 100vw) 0 0 0;
  }
}

.remodal-overlay {
  background: rgba(0, 0, 0, 0.81);
  opacity:0;
  transition-duration: .25s;
}
.remodal-overlay.remodal-is-opened{
  opacity:1;
  transition-duration: .25s;
}
.remodal-wrapper{
  padding:0;
  opacity:0;
  transition-duration: .25s;
}
.remodal-wrapper.remodal-is-opened{
  opacity:1;
  transition-duration: .25s;
}
.remodal{
  width:1000px;
  margin:0 auto;
  height:auto;
  padding-top:0;
}
.remodal .vBox{
  width:100%;
  position: relative;
  margin-top:0;
  cursor: pointer;
  transition-duration: .5s;
}
/* .remodal .vBox:hover{
  opacity:.75;
  transition-duration: .5s;
} */
.remodal .vBox video{
  width:100%;
}
.remodal .vBox .ico_play{
  width:100px;
  pointer-events: none;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  opacity:1;
  transition-duration: .3s;
}
.remodal .vBox .ico_play.off{
  opacity:0;
  transition-duration: .3s;
}
.vBox + .movClose{
  position: fixed;
  top:33px;
  right:33px;
  width:60px;
  cursor: pointer;
  opacity:0;
}
.remodal-is-opened .vBox + .movClose{
  opacity:1;
  transition-duration: .1s;
}

@media screen and (max-width: 768px) {
  .remodal-wrapper{
    padding:0;
  }
  .remodal{
    width:100%;
    padding-top:0;
  }
  .remodal .vBox{
    width:86.667%;
    margin:0 auto;
  }
  .remodal .vBox:has(video.sp-landscape) {
    width: 100%;
  }
  .remodal .vBox video.sp-landscape {
    width: 100vw;
    aspect-ratio: 16 / 9;
    height: auto;
    z-index: 9999;
    background: #000;
  }
  .remodal .vBox .ico_play{
    width: calc(65 / var(--media_sp) * 100vw);
  }
  .vBox + .movClose{
    top: calc(24 / var(--media_sp) * 100vw);
    right: calc(24 / var(--media_sp) * 100vw);
    width: calc(60 / var(--media_sp) * 100vw);
  }
}