@charset "UTF-8";
/*--------------------------------------------
voiceHead
---------------------------------------------*/
#voiceHead {
  background: #e5d8e5;
}
#voiceHead .ttl:before {
  content: "";
  background: url(/voice/img/icn_voice.png) no-repeat 0 0;
  background-size: 100% auto;
  display: inline-block;
  vertical-align: text-top;
}
@media screen and (max-width: 768px) {
  #voiceHead {
    padding: calc(40 * 100vw / 750);
    padding-top: calc(101 * 100vw / 750);
    padding-bottom: calc(108 * 100vw / 750);
  }
  #voiceHead .ttl {
    font-size: calc(60 * 100vw / 750);
    font-weight: 700;
  }
  #voiceHead .ttl:before {
    width: calc(91 * 100vw / 750);
    height: calc(91 * 100vw / 750);
    margin-right: calc(33 * 100vw / 750);
  }
}
@media print, screen and (min-width: 769px) {
  #voiceHead {
    padding: calc(73 * 100vw / 1366);
  }
  #voiceHead .ttl {
    font-size: calc(36 * 100vw / 1366);
    font-weight: 700;
  }
  #voiceHead .ttl:before {
    width: calc(54 * 100vw / 1366);
    height: calc(54 * 100vw / 1366);
    margin-right: calc(17 * 100vw / 1366);
  }
}

/*--------------------------------------------
voiceMovie
---------------------------------------------*/
.voicePage .voiceMovieTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.voicePage .voiceMovieTitle::before,
.voicePage .voiceMovieTitle::after {
  display: block;
  content: '';
  background-color: #000;
}
.voicePage .voiceMovieTitle::before {
  transform: rotate(-30deg);
}
.voicePage .voiceMovieTitle::after {
  transform: rotate(30deg);
}
.voicePage .voiceMovieTitle span {
  display: block;
}
.voicePage .voiceMovieWrapper video {
  width: 100%;
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .voicePage .voiceMovie {
    padding: calc(80 * 100vw / 750) calc(20 * 100vw / 750) 0;
    font-size: calc(40 * 100vw / 750);
  }
  .voicePage .voiceMovieTitle {
    font-size: calc(40 * 100vw / 750);
    
  }
  .voicePage .voiceMovieTitle::before,
  .voicePage .voiceMovieTitle::after {
    width: calc(5 * 100vw / 1366);
    height: calc(40 * 100vw / 750);
  }
  .voicePage .voiceMovieTitle span {
    font-size: inherit;
    margin: 0 calc(20 * 100vw / 750);
  }
  .voicePage .voiceMovieWrapper {
    margin: calc(40 * 100vw / 750) 0 0;
  }
}

@media print, screen and (min-width: 769px) {
  .voicePage .voiceMovie {
    padding: calc(60 * 100vw / 1366) calc(40 * 100vw / 1366) 0;
  }
  .voicePage .voiceMovieTitle {
    font-size: calc(32 * 100vw / 1366);
  }
  .voicePage .voiceMovieTitle::before,
  .voicePage .voiceMovieTitle::after {
    width: calc(4 * 100vw / 1366);
    height: calc(32 * 100vw / 1366);
  }
  .voicePage .voiceMovieTitle span {
    margin: 0 calc(16 * 100vw / 1366);
  }
  .voicePage .voiceMovieWrapper {
    width: calc(980 * 100vw / 1366);
    margin: calc(32 * 100vw / 1366) auto 0;
  }
}

/*--------------------------------------------
voicePage
---------------------------------------------*/

.voicePage .areaTitle {
  color: #802077;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 2;
}
.voicePage .voiceAnchorTitle {
  text-align: center;
  font-weight: 700;
}
.voicePage .voiceCatBtns {
  display: flex;
  justify-content: space-between;
}
.voicePage .voiceCatBtns li .btn {
  background: #ededed;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.voicePage .voiceCatBtns li.current .btn {
  background: #802077;
  color: #fff;
}
.voicePage .voiceCatBtns li.current .btn::after {
  content: "";
  border-style: solid;
  border-color: #802077 transparent transparent transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.voicePage .voiceNav2 .voiceAnchorBtns {
  justify-content: center;
}
.voicePage .voiceAnchorBtns {
  display: flex;
  flex-wrap: wrap;
}
.voicePage .voiceAnchorBtns li {
  background-color: #ffd800;
  box-shadow: 3px 3px 3px rgb(0 0 0 / 30%);
}
.voicePage .voiceAnchorBtns li.wide {
  background-color: #ff6699;
}
.voicePage .voiceAnchorBtns a {
  display: flex;
  align-items: center;
  height: 100%;
  background-image: url(/voice/img/arw_b_gy.png);
  background-repeat: no-repeat;
  backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 0.3s ease-in;
  text-align: center;
}
.voicePage .voiceAnchorBtns a .txt {
  font-weight: 700;
  line-height: 1.2;
}

/* voiceBlock */
.voicePage .voiceBlock {
  border: solid 1px #333;
}
.voicePage .voiceBlock .col-img img {
  width: 100%;
  max-width: 100%;
}
.voicePage .voiceBlock .ttl {
  font-weight: bold;
}
.voicePage .voiceBlock .ttl .marker {
  background: linear-gradient(#fff 70%, #e5d8e5 60%);
}
.voicePage .voiceBlock .data {
  position: relative;
}
.voicePage .voiceBlock .data .name {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.voicePage .voiceBlock .data .name::before {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223px%22%20height%3D%2225px%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22Filter_0%22%3E%20%3CfeFlood%20flood-color%3D%22rgb(250%2C%20104%2C%20154)%22%20flood-opacity%3D%221%22%20result%3D%22floodOut%22%20%2F%3E%20%3CfeComposite%20operator%3D%22atop%22%20in%3D%22floodOut%22%20in2%3D%22SourceGraphic%22%20result%3D%22compOut%22%20%2F%3E%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22compOut%22%20in2%3D%22SourceGraphic%22%20%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23Filter_0)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(51%2C%2051%2C%2051)%22%20d%3D%22M0.714%2C24.1000%20C0.714%2C19.005%205.512%2C14.146%2011.430%2C14.146%20C17.349%2C14.146%2022.147%2C19.005%2022.147%2C24.1000%20L0.714%2C24.1000%20ZM11.430%2C12.978%20C8.138%2C12.978%205.470%2C10.275%205.470%2C6.941%20C5.470%2C3.606%208.138%2C0.903%2011.430%2C0.903%20C14.722%2C0.903%2017.391%2C3.606%2017.391%2C6.941%20C17.391%2C10.275%2014.722%2C12.978%2011.430%2C12.978%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
  background-size: auto 100%;
}
.voicePage .voiceBlock .data .history {
  background: #fff099;
}
.voicePage .voiceBlock .data .history span {
  font-weight: 700;
}
.voicePage .voiceBlock .data .benefit {
  display: flex;
  align-items: center;
}
.voicePage .voiceBlock .data .benefit.mb0 {
  margin-bottom: 0;
}
.voicePage .voiceBlock .data .tag {
  border: solid 1px #802077;
  color: #802077;
  text-align: center;
  display: inline-block;
}
.voicePage .voiceBlock .data .before {
  display: inline-block;
}
.voicePage .voiceBlock .data .arw {
  display: inline-block;
}
.voicePage .voiceBlock .data .after {
  font-weight: bold;
  display: inline-block;
}
.voicePage .voiceBlock .data .diff {
  background: linear-gradient(#fff 50%, #fff099 60%);
  color: #802077;
  font-weight: bold;
  display: inline-block;
}
.voicePage .voiceBlock .txt.m0 {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .voicePage {
    padding-bottom: calc(200 * 100vw / 750);
  }
  .voicePage .areaTitle {
    background: url(/voice/img/area_ttl_bg_sp.png) no-repeat center center;
    background-size: cover;
    font-size: calc(40 * 100vw / 750);
    padding: calc(40 * 100vw / 750) calc(40 * 100vw / 750) calc(70 * 100vw / 750);
  }
  .voicePage .voiceNav2 + .areaTitle {
    margin-top: calc(160 * 100vw / 750);
  }
  .voicePage .areaTitle .age {
    font-size: calc(50 * 100vw / 750);
  }
  .voicePage .voiceNav {
    padding: calc(80 * 100vw / 750) 0 calc(120 * 100vw / 750);
  }
  .voicePage .voiceCatBtns li {
    width: 50%;
  }
  .voicePage .voiceCatBtns li .btn {
    font-size: calc(40 * 100vw / 750);
    height: calc(143 * 100vw / 750);
    flex-wrap: wrap;
    flex-direction: column;
  }
  .voicePage .voiceCatBtns li.current .btn::after {
    border-width: calc(23 * 100vw / 750);
    bottom: calc(-46 * 100vw / 750);
  }
  .voicePage .voiceCatBtns li .btn .sml {
    font-size: calc(27 * 100vw / 750);
    line-height: 1.4;
    width: 100%;
  }
  .voicePage .voiceCatBtns li:nth-child(2) a .sml {
    font-size: calc(24 * 100vw / 750);
  }
  .voicePage .voiceAnchorTitle {
    margin-top: calc(84 * 100vw / 750);
    font-size: calc(40 * 100vw / 750);
  }
  .voicePage .voiceAnchorBtns {
    gap: calc(20 * 100vw / 750);
    margin-top: calc(50 * 100vw / 750);
    padding: 0 calc(40 * 100vw / 750);
  }
  .voicePage .voiceAnchorBtns li {
    width: calc((100% - calc(40 * 100vw / 750)) / 3);
    height: calc(90 * 100vw / 750);
    border-radius: calc(45 * 100vw / 750);
  }
  .voicePage .voiceAnchorBtns li.wide {
    height: calc(160 * 100vw / 750);
  }
  .voicePage .voiceAnchorBtns a {
    justify-content: flex-start;
    padding-left: calc(35 * 100vw / 750);
    background-position: right calc(35 * 100vw / 750) center;
    background-size: calc(30 * 100vw / 750) auto;
  }
  .voicePage .voiceAnchorBtns li.wide a {
    justify-content: center;
    padding: 0;
    background: none;
  }
  .voicePage .voiceAnchorBtns a .txt {
    font-size: calc(40 * 100vw / 750);
  }
  .voicePage .voiceAnchorBtns a .txt .sml { 
    font-size: calc(27 * 100vw / 750);
  }
  .voicePage .voiceWrap {
    padding: calc(40 * 100vw / 750) calc(40 * 100vw / 750) calc(160 * 100vw / 750);
  }
  .voicePage .voiceBlock {
    padding-bottom: calc(50 * 100vw / 750);
  }
  .voicePage .voiceBlock + .voiceBlock {
    margin-top: calc(40 * 100vw / 750);
  }
  .voicePage .voiceBlock .ttl {
    font-size: calc(48 * 100vw / 750);
    line-height: 1.6;
    padding: calc(25 * 100vw / 750) calc(30 * 100vw / 750) 0;
  }
  .voicePage .voiceBlock .data .name {
    padding: calc(30 * 100vw / 750) calc(28 * 100vw / 750);
    font-size: calc(32 * 100vw / 750);
    line-height: 1;
  }
  .voicePage .voiceBlock .data .name::before {
    width: calc(36 * 100vw / 750);
    height: calc(40 * 100vw / 750);
    margin-right: calc(18 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .history {
    height: calc(77 * 100vw / 750);
    padding-left: calc(28 * 100vw / 750);
    font-size: calc(30 * 100vw / 750);
    line-height: calc(77 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .history span {
    font-size: calc(40 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .benefit {
    margin-top: calc(40 * 100vw / 750);
    padding-left: calc(28 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .benefit + .benefit {
    margin-top: calc(20 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .tag {
    width: calc(155 * 100vw / 750);
    height: calc(68 * 100vw / 750);
    margin-right: calc(10 * 100vw / 750);
    border-radius: calc(34 * 100vw / 750);
    font-size: calc(30 * 100vw / 750);
    line-height: calc(66 * 100vw / 750);
    font-feature-settings: "palt";
  }
  .voicePage .voiceBlock .data .before {
    font-size: calc(30 * 100vw / 750);
    width: calc(110 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .arw {
    font-size: calc(30 * 100vw / 750);
    width: calc(35 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .after {
    font-size: calc(30 * 100vw / 750);
    width: calc(125 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .diff {
    font-size: calc(36 * 100vw / 750);
  }
  .voicePage .voiceBlock .data .note {
    font-size: calc(24 * 100vw / 750);
    line-height: 1.53;
    padding-right: calc(20 * 100vw / 750);
  }
  .voicePage .voiceBlock .txt {
    margin-top: calc(35 * 100vw / 750);
    padding: 0 calc(30 * 100vw / 750);
    font-size: calc(30 * 100vw / 750);
    line-height: 1.53;
  }
  .voicePage .VoiceTxt {
    margin-top: calc(30 * 100vw / 750);
    font-size: calc(30 * 100vw / 750);
    line-height: 1.5;
  }
}
@media print, screen and (min-width: 769px) {
  .voicePage {
    padding-bottom: calc(160 * 100vw / 1366);
  }
  .voicePage .areaTitle {
    background: url(/voice/img/area_ttl_bg.png) no-repeat center center;
    background-size: cover;
    font-size: calc(24 * 100vw / 1366);
    padding: calc(32 * 100vw / 1366) calc(40 * 100vw / 1366) calc(48 * 100vw / 1366);
  }
  .voicePage .areaTitle .age {
    font-size: calc(30 * 100vw / 1366);
  }
  .voicePage .voiceNav {
    padding: calc(60 * 100vw / 1366) 0 calc(80 * 100vw / 1366);
  }
  .voicePage .voiceNav2 {
    padding: 0 0 calc(80 * 100vw / 1366);
  }
  .voicePage .voiceCatBtns {
    padding: 0 calc(40 * 100vw / 1366);
  }
  .voicePage .voiceCatBtns li .btn {
    border-radius: 10px;
    border-radius: calc(10 * 100vw / 1366);
    font-size: calc(32 * 100vw / 1366);
    width: calc(623 * 100vw / 1366);
    height: calc(90 * 100vw / 1366);
  }
  .voicePage .voiceCatBtns li.current .btn::after {
    border-width: calc(12 * 100vw / 1366);
    bottom: calc(-24 * 100vw / 1366);
  }
  .voicePage .voiceCatBtns li .btn .sml {
    font-size: calc(20 * 100vw / 1366);
    position: relative;
    bottom: calc(-5 * 100vw / 1366);
  }
  .voicePage .voiceAnchorTitle {
    margin-top: calc(35 * 100vw / 1366);
    font-size: calc(24 * 100vw / 1366);
  }
  .voicePage .voiceAnchorBtns {
    justify-content: center;
    gap: calc(40 * 100vw / 1366);
    margin: calc(50 * 100vw / 1366) 0 0;
  }
  .voicePage .voiceAnchorBtns li {
    width: calc(240 * 100vw / 1366);
    height: calc(70 * 100vw / 1366);
    border-radius: calc(35 * 100vw / 1366);
    font-size: calc(24 * 100vw / 1366);
  }
  .voicePage .voiceAnchorBtns li.wide {
    width: calc(280 * 100vw / 1366);
  }
  .voicePage .voiceAnchorBtns a {
    justify-content: center;
    background-size: calc(20 * 100vw / 1366) calc(13 * 100vw / 1366);
    background-position: right calc(30 * 100vw / 1366) center;
  }
  .voicePage .voiceAnchorBtns a .txt {
    font-size: calc(24 * 100vw / 1366);
  }
  .voicePage .voiceAnchorBtns a .txt .sml {
    font-size: calc(16 * 100vw / 1366);
  }
  .voicePage .voiceNav2 .voiceAnchorBtns a {
    width: calc(480 * 100vw / 1366);
    background-position-x: calc(430 * 100vw / 1366);
  }
  .voicePage .voiceWrap {
    padding-bottom: calc(136 * 100vw / 1366);
  }
  .voicePage .voiceBlock {
    display: flex;
    flex-wrap: wrap;
    width: calc(980 * 100vw / 1366);
    margin: calc(40 * 100vw / 1366) auto 0;
    padding: calc(20 * 100vw / 1366);
  }
  .voicePage .voiceBlock + .voiceBlock {
    margin-top: calc(40 * 100vw / 1366);
  }
  .voicePage .voiceBlock .col-img {
    width: calc(300 * 100vw / 1366);
  }
  .voicePage .voiceBlock .col-txt {
    width: calc(100% - (300 * 100vw / 1366));
  }
  .voicePage .voiceBlock .ttl {
    font-size: calc(24 * 100vw / 1366);
    line-height: 1.5;
    padding: calc(14 * 100vw / 1366) calc(20 * 100vw / 1366) 0;
  }
  .voicePage .voiceBlock .data .name {
    padding: calc(10 * 100vw / 1366) calc(20 * 100vw / 1366) calc(20 * 100vw / 1366);
    font-size: calc(16 * 100vw / 1366);
    line-height: 1;
  }
  .voicePage .voiceBlock .data .name::before {
    width: calc(21 * 100vw / 1366);
    height: calc(24 * 100vw / 1366);
    margin-right: calc(10 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .history {
    height: calc(50 * 100vw / 1366);
    padding-left: calc(63 * 100vw / 1366);
    font-size: calc(16 * 100vw / 1366);
    line-height: calc(50 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .history span {
    font-size: calc(20 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .benefit {
    margin-top: calc(21 * 100vw / 1366);
    padding-left: calc(63 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .tag {
    border-radius: calc(17 * 100vw / 1366);
    font-size: calc(16 * 100vw / 1366);
    line-height: calc(32 * 100vw / 1366);
    width: calc(112 * 100vw / 1366);
    height: calc(34 * 100vw / 1366);
    margin-right: calc(19 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .before {
    font-size: calc(24 * 100vw / 1366);
    width: calc(104 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .arw {
    font-size: calc(24 * 100vw / 1366);
    width: calc(40 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .after {
    font-size: calc(24 * 100vw / 1366);
    width: calc(110 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .diff {
    font-size: calc(28 * 100vw / 1366);
  }
  .voicePage .voiceBlock .data .note {
    font-size: calc(16 * 100vw / 1366);
    line-height: 1.5;
  }
  .voicePage .voiceBlock .txt {
    margin-top: calc(35 * 100vw / 1366);
    padding: 0 calc(20 * 100vw / 1366);
    font-size: calc(16 * 100vw / 1366);
    line-height: 1.5;
  }
  .voicePage .VoiceTxt {
    width: calc(980 * 100vw / 1366);
    margin: 0 auto;
    font-size: calc(16 * 100vw / 1366);
    line-height: 1.5;
  }
}
.voicePage .bnr-top {
  text-align: center;
}
.voicePage .bnr-top img {
  max-width: 100%;
}
@media print,screen and (max-width: 768px) {
  .voicePage .bnr-top {
    margin: calc( 80 * 100vw / 750 ) calc(40 * 100% / 750) 0;
  }
  .voicePage .is-pc {
    display: none;
  }
}
@media print,screen and (min-width: 769px) {
  .voicePage .bnr-top {
    width: calc(750 * 100vw / 1366);
    margin: calc( 70 * 100vw / 1366 ) auto 0;
    text-align: center;
  }
  .voicePage .is-sp {
    display: none;
  }
}