@charset "UTF-8";

/* =================================================================
voices
=================================================================*/
/*  コンテンツ
-------------------------------------------------------------*/
.voice-list {width: 96rem;}
.voice-list__inner{font-size: 1.75rem; border-bottom: solid 1px #000; padding: 1.2rem 0;}
.voice-list__link {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.32rem 1rem; cursor: pointer; color: #000; transition: opacity 0.2s;}
.voice-list__link svg {transform: translateX(0); transition: 0.2s;}

.voice{font-family: 'Noto Serif JP', serif; padding-top: 70px; padding-bottom: 100px;}
.voice img{display: block; width: 100%;}

.voice__main-image{height: 100vh; width: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
.voice__main-image + .voice__block{margin-top: 6rem;}
.voice__main-image img{object-fit: cover; height: 100%; position: absolute;}

.voice__main__text{color: #fff; z-index: 1; width: 320px; height: 152px; position: absolute; right: 17%; top: 20%;}
.voice__main__text img {width: auto; height: auto; object-fit: contain; position: static;}

.voice__breadcrumb{margin-top: 1rem;}
.voice__breadcrumb ul{display: flex; align-items: center; padding: 0; margin: 0; list-style: none;}
.voice__breadcrumb ul li{font-size: 12px;}
.voice__breadcrumb ul li + li{margin-left: 10px;}
.voice__breadcrumb ul li a{color: #646464;}

.voice__block{margin: auto; margin-top: 6rem; width: 70%;}
.voice__block h3{font-size: 3rem;}
.voice__block p{font-size: 1.6rem; margin-top: 1rem; line-height: 1.8;}

.voice__block--flex{display: flex; align-items: center;}
.voice__block--flex .voice__image{width: 40%; margin-right: 5%; flex-shrink: 0;}
.voice__block--flex .voice__text{width: 55%;}
.voice__block--flex p{margin-top: 0rem;}

.voice__block--imagecut{height: 80vh; margin: auto; margin-top: 6rem;}
.voice__block--imagecut img{object-fit: cover; height: 100%;}

.voice-buy{max-width: 500px; margin: 0 auto 15rem;}
.voice-buy .item-image{margin-bottom: 2rem;}
.voice-buy h3{font-size: 2rem;}
.voice-buy .button{display: flex; justify-content: center;}

@media screen and (max-width: 767px){
    .voice__main-image img{object-position: 35% 0;}
    .voice__main__text{width: 170px; height: auto; position: absolute; right: 3%; top: 49%;}
    .voice__main__text img {width: 100%;}
    .voice-list {width: 100%;}
    .voice-list__inner { padding: 2.1rem 1.3rem; line-height: 1.6; font-size: 1.47rem;}
    .voice-list__link {padding: 1.3rem 0.7rem 1rem 0.8rem; width: 100%; font-size: 1.45rem;}
  .voice{padding-top: 20px;}
  .voice__main__text h2{font-size: 3rem;}
  .voice__block{width: 100%;}
  .voice__block h3{font-size: 2.4rem;}

  .voice__block--flex{flex-direction: column;}
  .voice__block--flex .voice__image{width: 100%; margin-right: 0%;}
  .voice__block--flex .voice__text{width: 100%;}
  .voice__block--flex .voice__image + .voice__text{margin-top: 6rem;}
  .voice__block--flex .voice__image + p{margin-top: 6rem;}
}