@charset "UTF-8";


#feature-journal .feature-journal-guest-item {
  background: #fdf8da;
}

.bg_none::before {
  display: none !important;
}
#feature-journal .bg {
  position: relative;
}
#feature-journal .bg::before {
  position: absolute;
  display: block;
  content: "";
  background: #fdf8da;
  z-index: -1;
}

#feature-journal .hacobune-app-container {
  padding: 0;
}
#feature-journal .hacobune-unit-video-outline {
  padding: 0;
}

/*vol3_2*/
#feature-journal.vol3_2 .hacobune-video-js .hacobune-vjs-big-play-button {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto !important;
  width: 4em;
  height: 2em;
}
#feature-journal.vol3_2 .hacobune-app-container .hacobune-video-js,
#feature-journal.vol3_2 .hacobune-app-container .hacobune-video-js *,
#feature-journal.vol3_2 .hacobune-dialog-mask .hacobune-video-js,
#feature-journal.vol3_2 .hacobune-dialog-mask .hacobune-video-js * {
  color: #fff !important;
}
#feature-journal.vol3_2 .imgsec05 figcaption {
  position: absolute;
}

/*vol3_3*/
#feature-journal.vol3_3 .imgsec05 figcaption {
  position: absolute;
}

/*vol3_4*/
#feature-journal.vol3_4 .hacobune-app-container .hacobune-video-js,
#feature-journal.vol3_4 .hacobune-app-container .hacobune-video-js *,
#feature-journal.vol3_4 .hacobune-dialog-mask .hacobune-video-js,
#feature-journal.vol3_4 .hacobune-dialog-mask .hacobune-video-js * {
  color: #fff !important;
}

/*pc*/
@media screen and (min-width: 768px) {
  #feature-journal .feature-journal-guest-item::before {
    background: #fdf8da;
  }
  #feature-journal .bg_left01::before ,
  #feature-journal .bg_left02::before {
    left: 50%;
    right: auto !important;
    transform: translateX(-50vw) !important;
  }
  #feature-journal .bg_right01::before ,
  #feature-journal .bg_right02::before {
    right: 50%;
    left: auto !important;
    transform: translateX(50vw) !important;
  }
  #feature-journal .bg_left01::before {
    top: -105px;
    height: 295px;
    width: calc(50vw + 600px);
  }
  #feature-journal .bg_left02::before {
    height: 315px;
    width: calc(50vw + 180px);
    bottom: -140px;
  }
  #feature-journal .bg_right01::before {
    height: 315px;
    width: calc(50vw + 230px);
    bottom: -140px;
  }
  #feature-journal .bg_right02::before {
    height: 315px;
    width: calc(50vw + 230px);
    bottom: -140px;
  }
  /*vol3_2*/
  /*hacobune-univideo*/
  #feature-journal.vol3_2 .hacobune-univideo {
    width: 680px;
  }
  #feature-journal.vol3_2 .hacobune-video-js .hacobune-vjs-progress-control {
    bottom: 60px;
  }
  #feature-journal.vol3_2 .bg_right01::before {
    width: calc(50vw + 50px);
    bottom: -50px;
    height: 460px;
  }
  #feature-journal.vol3_2 .bg_right01 figcaption {
    position: absolute;
    right: 260px;
    bottom: 0;
  }
  #feature-journal.vol3_2 .bg_right02::before {
    height: 360px;
    width: calc(50vw + 600px);
    top: -330px;
  }
  #feature-journal.vol3_2 .bg_left02::before {
    bottom: -40px;
  }
  #feature-journal.vol3_2 .bg_left02 figcaption {
    position: absolute;
    right: 160px;
    bottom: 160px;
  }
  #feature-journal.vol3_2 .imgsec05 .cap01 {
    top: 50px;
    right: 70px;
  }
  #feature-journal.vol3_2 .imgsec05 .cap02 {
    text-align: right;
    bottom: 30px;
    left: 40px;
  }

  /*vol3_3*/
  #feature-journal.vol3_3 .bg_left01::before {
    top: -100px;
    height: 320px;
    width: calc(50vw + 600px);
  }
  #feature-journal.vol3_3 .bg_right01,
  #feature-journal.vol3_3 .bg_left01{
    margin: 63px 0 0;
    padding: 0;
    position: relative;
  }
  #feature-journal.vol3_3 .feature-journal-article-img figcaption{
    color: #006450;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-center{
    margin-left: auto;
    margin-right: auto;
    margin-top: 140px;
    padding: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img{
    margin-bottom: 75px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left1{
    margin-left: 0;
    margin-right: auto;
    padding: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right1{
    margin-left: auto;
    margin-right: 0;
    padding: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left2{
    margin-left: 0;
    margin-right: auto;
    padding: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right2{
    margin-left: auto;
    margin-right: 0;
    padding: 0;
    margin-top: 140px;
  }
  #feature-journal .feature-journal-article-headline.img_sec04_title{
    padding-top: 167px;
  }
  #feature-journal.vol3_3 .bg_right01::before {
    top: -90px;
    height: 320px;
    width: calc(50vw + 600px);
    left: auto;
  }
  #feature-journal.vol3_3 .bg_right02::before {
    height: 360px;
    width: calc(50vw + 600px);
    top: -330px;
  }
  #feature-journal.vol3_3 .bg_left02::before {
    bottom: -40px;
  }
  #feature-journal.vol3_3 .bg_left02 figcaption {
    position: absolute;
    right: 160px;
    bottom: 160px;
  }
  #feature-journal.vol3_3 .imgsec05 .cap01 {
    top: 50px;
    right: 70px;
  }
  #feature-journal.vol3_3 .imgsec05 .cap02 {
    text-align: right;
    bottom: 30px;
    left: 40px;
  }
  #feature-journal.vol3_3 .feature-journal-article-yokoku{
    margin-top: 115px;
  }
  #feature-journal.vol3_3 .feature-journal-article-yokoku p{
    margin: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-sec p{
    margin-top: 0;
  }

  /*vol3_4*/
  #feature-journal.vol3_4 .bg_right01::before {
    height: 200px;
    width: calc(50vw + 600px);
    top: -140px;
  }
  #feature-journal.vol3_4 .bg_left02::before {
    height: 415px;
    width: calc(50vw + 180px);
    top: 170px;
  }
  #feature-journal.vol3_4 .bg_left02 figcaption {
    position: absolute;
    bottom: 175px;
  }
  /*vol3_4 hacobune-univideo*/
  #feature-journal.vol3_4 .video_area .hacobune-univideo {
    width: 500px;
    margin: auto;
  }
  #feature-journal.vol3_4 .story-media {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    margin-block: 21px 23px;
  }
  #feature-journal.vol3_4 .hacobune-vjs-big-play-button {
    width: 86px;
    height: 86px;
    top: 50%;
    left: 50%;
    background: #b6001f;
    border: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  #feature-journal.vol3_4 .hacobune-vjs-big-play-button .hacobune-vjs-icon-placeholder:before {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    left: 2px;
  }
  #feature-journal.vol3_4 .hacobune-app-container .hacobune-video-js,
  #feature-journal.vol3_4 .hacobune-app-container .hacobune-video-js *,
  #feature-journal.vol3_4 .hacobune-dialog-mask .hacobune-video-js,
  #feature-journal.vol3_4 .hacobune-dialog-mask .hacobune-video-js * {
    font-size: 12px;
    line-height: 2;
  }
  #feature-journal.vol3_4 .hacobune-video-js .hacobune-vjs-fullscreen-control {
    margin-left: auto !important;
  }
  #feature-journal.vol3_4 .hacobune-video-js .hacobune-vjs-play-progress:before {
    top: -.8em;
  }

  /*vol3_5*/
  #feature-journal.vol3_5 .bg_left01::before {
    height: 180px;
  }
  #feature-journal.vol3_5 .bg_right01::before {
    height: 180px;
    width: calc(50vw + 600px);
    top: -105px;
  }
  #feature-journal.vol3_5 .img_sec04 img {
    width: 480px;
    margin: auto;
    display: block;
  }
  #feature-journal.vol3_5 .img_sec04 figcaption {
    text-align: center;
  }

  /*vol3_6*/
  #feature-journal.vol3_6 .bg_left01::before {
    top: 100px;
    height: 160px;
  }
  #feature-journal.vol3_6 .bg_left02::before {
    top: 160px;
    height: 160px;
    width: calc(50vw + 600px);
  }
  #feature-journal.vol3_6 .bg_left02 h2 {
    white-space: nowrap;
  }
  #feature-journal.vol3_6 .bg_right01::before {
    top: 160px;
    height: 160px;
    width: calc(50vw + 600px);
  }
  #feature-journal.vol3_6 .txt_sec04 {
    margin-left: 100px;
  }

  /*vol3_7*/
  #feature-journal.vol3_7 .bg_left01::before {
    top: 100px;
    height: 160px;
  }
  #feature-journal.vol3_7 .bg_left02::before {
    top: 160px;
    height: 160px;
    width: calc(50vw + 600px);
  }
  #feature-journal.vol3_7 .bg_left02 h2 {
    white-space: nowrap;
  }
  #feature-journal.vol3_7 .bg_right01::before {
    top: 160px;
    height: 160px;
    width: calc(50vw + 600px);
  }
  #feature-journal.vol3_7 .txt_sec04 {
    margin-left: 100px;
  }

  /*vol3_8*/
  #feature-journal.vol3_8 .bg_left01::before {
    top: 110px;
    height: 251px;
  }
  #feature-journal.vol3_8 .bg_left01 .feature-journal-article-ttl {
    white-space: nowrap;
  }
  #feature-journal.vol3_8 .bg_right01::before {
    height: 250px;
    width: calc(50vw + 600px);
    top: 110px;
  }
  #feature-journal.vol3_8 .img-left01 {
    position: relative;
  }
  #feature-journal.vol3_8 .img-left01 figcaption {
    position: absolute;
    bottom: 15px;
}
}
/*sp*/
@media screen and (max-width: 767px) {
  #feature-journal {
    overflow: hidden;
  }
  #feature-journal .bg_left01::before ,
  #feature-journal .bg_left02::before {
    left: -30px;
  }
  #feature-journal .bg_right01::before {
    right: -30px;
  }
  #feature-journal .bg_left01::before {
    height: 110px;
    width: calc(100% + 40px);
    top: -50px;
  }
  #feature-journal .bg_left02::before {
    height: 160px;
    width: calc(100% + 10px);
    bottom: 0;
  }
  #feature-journal .bg_right01::before {
    height: 215px;
    width: calc(100% + 10px);
    top: 30px;
  }
  #feature-journal .bg_right01 figcaption {
    position: absolute;
    top: 60px;
    width: 35vw;
    right: 0;
  }

  /*hacobune-univideo*/
  #feature-journal .hacobune-app-container .hacobune-video-js,
  #feature-journal .hacobune-app-container .hacobune-video-js *,
  #feature-journal .hacobune-dialog-mask .hacobune-video-js,
  #feature-journal .hacobune-dialog-mask .hacobune-video-js * {
    font-size: 12px;
    line-height: 2;
  }
  #feature-journal .hacobune-video-js .hacobune-vjs-fullscreen-control {
    margin-left: auto !important;
  }
  #feature-journal .hacobune-video-js .hacobune-vjs-play-progress:before {
    top: -.8em;
  }

  /*vol3_2*/
  #feature-journal.vol3_2 .video_area {
    width: 92%;
  }
  #feature-journal.vol3_2 .hacobune-video-js .hacobune-vjs-progress-control {
    bottom: 40px;
  }
  #feature-journal.vol3_2 .hacobune-app-container {
    width: 100% !important;
  }
  #feature-journal.vol3_2 .bg_right01 {
    margin-left: -15px;
    width: 105%;
  }
  #feature-journal.vol3_2 .bg_right01::before {
    width: 90vw;
    top: 100px;
    height: 230px;
  }
  #feature-journal.vol3_2 .bg_right01 figcaption {
    position: absolute;
    width: auto;
    right: auto;
    top: auto;
    bottom: 40px;
    left: 15px;
    text-align: right;
  }
  #feature-journal.vol3_2 .imgsec03 {
    width: 100%;
  }
  #feature-journal.vol3_2 .imgsec03 img {
    margin-left: -30px;
  }
  #feature-journal.vol3_2 .bg_left02 {
    width: 105%;
    margin-right: -15px;
  }
  #feature-journal.vol3_2 .bg_left02::before {
    height: 200px;
    width: 80vw;
    bottom: 40px;
  }
  #feature-journal.vol3_2 .bg_left02 figcaption {
    position: absolute;
    top: 0;
    left: 50vw;
  }
  #feature-journal.vol3_2 .imgsec05 {
    width: 100%;
    margin-bottom: 80px;
  }
  #feature-journal.vol3_2 .imgsec05 .cap01 {
    top: 0;
    right: 0;
    width: 35vw;
  }
  #feature-journal.vol3_2 .imgsec05 .cap02 {
    left: 17vw;
  }
  #feature-journal.vol3_2 .bg_right02 {
    width: 100%;
    margin-left: -15px;
  }
  #feature-journal.vol3_2 .bg_right02::before {
    width: 95vw;
    top: -260px;
    height: 140px;
    right: -30px;
  }
  #feature-journal.vol3_2 .bg_right02 figcaption {
    width: 92%;
    margin-inline: auto;
  }
  #feature-journal.vol3_2 .imgsec07 {
    width: 100%;
    margin-right: -15px;
  }

  /*vol3_3*/
  #feature-journal.vol3_3 .bg_right01 {
    margin-left: -15px;
    width: 105%;
  }
  #feature-journal.vol3_3 .bg_right01::before {
    width: 90vw;
    top: 100px;
    height: 230px;
  }
  #feature-journal.vol3_3 .bg_right01 figcaption {
    position: absolute;
    width: auto;
    right: auto;
    top: auto;
    bottom: 40px;
    left: 15px;
    text-align: right;
  }
  #feature-journal.vol3_3 .imgsec03 {
    width: 100%;
  }
  #feature-journal.vol3_3 .imgsec03 img {
    margin-left: -30px;
  }
  #feature-journal.vol3_3 .bg_left02 {
    width: 105%;
    margin-right: -15px;
  }
  #feature-journal.vol3_3 .bg_left02::before {
    height: 200px;
    width: 80vw;
    bottom: 40px;
  }
  #feature-journal.vol3_3 .bg_left02 figcaption {
    position: absolute;
    top: 0;
    left: 50vw;
  }
  #feature-journal.vol3_3 .imgsec05 {
    width: 100%;
    margin-bottom: 80px;
  }
  #feature-journal.vol3_3 .imgsec05 .cap01 {
    top: 0;
    right: 0;
    width: 35vw;
  }
  #feature-journal.vol3_3 .imgsec05 .cap02 {
    left: 17vw;
  }
  #feature-journal.vol3_3 .bg_right02 {
    width: 100%;
    margin-left: -15px;
  }
  #feature-journal.vol3_3 .bg_right02::before {
    width: 95vw;
    top: -260px;
    height: 140px;
    right: -30px;
  }
  #feature-journal.vol3_3 figure img{
    vertical-align: bottom;
  }
  #feature-journal.vol3_3 figcaption{
    color: #006450;
    margin-top: 15px;
  }
  #feature-journal.vol3_3 .bg_right02 figcaption {
    width: 92%;
    margin-inline: auto;
  }
  #feature-journal.vol3_3 .imgsec07 {
    width: 100%;
    margin-right: -15px;
  }
  #feature-journal.vol3_3 .img_sec04_title{
    margin-left: 6px;
    padding-top: 90px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img{
    margin-bottom: 25px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left1{
    width: calc((100% + 30px) - 52px);
    margin-left: -15px;
    margin-top: 57px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left1 figcaption{
    margin-left: 15px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right1{
    width: calc((100% + 30px));
    margin-left: 15px;
    margin-top: 50px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left2{
    width: calc(100% + 6px);
    margin-left: -15px;
    margin-top: 53px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-left2 figcaption{
    margin-left: 15px;
    margin-right: 15px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right2{
    width: calc(100% + 30px);
    margin-left: 0px;
    margin-top: 82px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right2 img{
    margin-left: 12px;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-right2 figcaption{
    margin-left: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-center{
    width: calc((100% + 15px));
    margin-left: 0;
    margin-top: 63px;
    position: relative;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-center figcaption{
    display: block;
    position: absolute;
    bottom: 10px;
    left: 0;
    margin: 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-img.img-center + p{
    margin-top: 45px;
  }
  #feature-journal.vol3_3 .bg_left01::before,
  #feature-journal.vol3_3 .bg_left02::before{
    left: unset;
    right: 0;
    width: calc(100% + 40px);
    height: 120px;
    top: -77px;
  }
  #feature-journal.vol3_3 .bg_right01{
    width: unset;
    margin: 0 16px;
  }
  #feature-journal.vol3_3 .bg_right01::before{
    left: unset;
    right: -30px;
    width: calc(100% + 40px);
    height: 147px;
    top: -45px;
  }
  #feature-journal.vol3_3 .bg{
    text-align: left;
  }
  #feature-journal.vol3_3 .feature-journal-article-ttl{
    margin-bottom: 30px;
  }
  #feature-journal.vol3_3 .feature-journal-article-yokoku{
    margin: 50px 0 0 0;
  }
  #feature-journal.vol3_3 .feature-journal-article-yokoku p{
    margin: 0;
  }

  /*vol3_4*/
  #feature-journal.vol3_4 .bg_right01 {
    width: 105%;
    margin-left: -20px;
  }
  #feature-journal.vol3_4 .bg_right01::before {
    height: 90px;
    width: calc(100% + 45px);
    top: -60px;
  }
  #feature-journal.vol3_4 .bg_right01 figcaption {
    position: absolute;
    top: 30px;
    width: 35vw;
    right: 0;
  }
  #feature-journal.vol3_4 .bg_left02 {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  #feature-journal.vol3_4 .bg_left02::before {
    height: 310px;
    width: calc(70% + 10px);
    bottom: 140px;
  }
  #feature-journal.vol3_4 .bg_left02 figcaption {
    position: absolute;
    top: 65vw;
    right: 10px;
    width: 40vw;
  }
  /*vol3_4 hacobune-univideo*/
  #feature-journal.vol3_4 .video_area {
    margin-inline: auto;
    max-width: 280px;
    width: 100%;
  }
  #feature-journal.vol3_4 .hacobune-app-container {
    padding: unset;
    width: 100%;
  }
  #feature-journal.vol3_4 .hacobune-app-main {
    aspect-ratio: 9 / 16;
  }
  #feature-journal.vol3_4 .hacobune-unit-video-outline,
  #feature-journal.vol3_4 .hacobune-vjs-control-text {
    display: none;
  }
  #feature-journal.vol3_4 .hacobune-video-js.videojs-default-skin {
    aspect-ratio: 9 / 16;
    height: 100%;
  }
  #feature-journal.vol3_4 .hacobune-unit-video {
    margin: unset;
  }
  #feature-journal.vol3_4 .hacobune-vjs-poster {
    filter: brightness(0.5);
  }
  #feature-journal.vol3_4 .hacobune-vjs-big-play-button {
    width: 72px;
    height: 72px;
    top: 50%;
    left: 50%;
    background: #b6001f;
    border: none;
    border-radius: 50%;
    transform: translate(-50%,-50%);
  }
  #feature-journal.vol3_4 .hacobune-vjs-big-play-button .hacobune-vjs-icon-placeholder:before {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    left: 2px;
    top: 1px;
  }

  /*vol3_5*/
  #feature-journal.vol3_5 .bg_left01::before {
    width: calc(100% + 30px);
    top: -75px;
  }
  #feature-journal.vol3_5 .bg_right01::before {
    height: 110px;
    width: calc(100% + 30px);
    top: -75px;
  }
  #feature-journal.vol3_5 .img-center02 {
    width: 100%;
  }
  #feature-journal.vol3_5 .img-center02 img {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  #feature-journal.vol3_5 .img_sec04 img {
    width: 70%;
  }
  /*vol3_6*/
  #feature-journal.vol3_6 .bg_left01::before {
    width: calc(100% + 10px);
    top: 50px;
  }
  #feature-journal.vol3_6 .img-right1 {
    width: 100%;
    margin-right: -15px;
  }
  #feature-journal.vol3_6 .img-right1 figcaption {
    padding-right: 1em;
  }
  #feature-journal.vol3_6 .bg_right01::before {
    width: 95vw;
    top: 70px;
    height: 110px;
    right: -15px;
    left: auto !important;
  }
  #feature-journal.vol3_6 .img-left1 {
    width: 100%;
    margin-left: -15px;
  }
  #feature-journal.vol3_6 .img-left1 figcaption {
    padding-left: 1em;
  }
  #feature-journal.vol3_6 .bg_left02::before {
    height: 110px;
    width: calc(100% + 10px);
    top: 70px;
  }
  #feature-journal.vol3_6 .img-center2 {
    width: 85%;
  }
  /*vol3_7*/
  #feature-journal.vol3_7 .bg_left01::before {
    width: calc(100% + 10px);
    top: 50px;
  }
  #feature-journal.vol3_7 .img-right1 {
    width: 100%;
    margin-right: -15px;
  }
  #feature-journal.vol3_7 .img-right1 figcaption {
    padding-right: 1em;
  }
  #feature-journal.vol3_7 .bg_right01::before {
    width: 95vw;
    top: 70px;
    height: 110px;
    right: -15px;
    left: auto !important;
  }
  #feature-journal.vol3_7 .img-left1 {
    width: 100%;
    margin-left: -15px;
  }
  #feature-journal.vol3_7 .img-left1 figcaption {
    padding-left: 1em;
  }
  #feature-journal.vol3_7 .bg_left02::before {
    height: 110px;
    width: calc(100% + 10px);
    top: 70px;
  }
  #feature-journal.vol3_7 .img-center {
    width: 100%;
  }

  /*vol3_8*/
  #feature-journal.vol3_8 .bg_left01::before {
    height: 200px;
    width: calc(100% + 40px);
    top: 45px;
  }
  #feature-journal.vol3_8 .img-center02 {
    width: 100%;
  }
  #feature-journal.vol3_8 .img-center02 img {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  #feature-journal.vol3_8 .img-left1 {
    width: 100%;
    margin-left: -15px;
  }
  #feature-journal.vol3_8 .img-left1 figcaption {
    padding-left: 1em;
  }
  #feature-journal.vol3_8 .bg_right01::before {
    width: 95vw;
    top: 50px;
    height: 110px;
    right: -15px;
    left: auto !important;
  }
}