/* hulft30th TOP CSS */

.ribbon {
  position: absolute;
  pointer-events: none;
}
.ribbon.is-hide {
  width: 0 !important;
}
.ribbon svg {
  height: auto;
  width: 100%;
}
.ribbon svg path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 2800;
  stroke-dashoffset: 2800;
  fill-opacity: 0;
}

.ribbon svg.done path {
  fill-opacity: 1;
  stroke-miterlimit: 100;
  stroke-width: 80px
}


/* keyvisual
------------------------------------------------------------ */
.keyvisual {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/kv_bg.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  position: relative;
  /*z-index: 1;*/
}
.keyvisual:before,
.keyvisual:after {
  content: "";
  position: absolute;
}
.keyvisual:before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/kv_decoration.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  height: 100%;
  margin: 0 auto;
  width: 1016px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.keyvisual:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/kv_gradation.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  height: 90px;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.keyvisual-inner {
  height: calc(100vh - 60px);
  max-height: 1000px;
  margin-left: auto;
  margin-right: auto;
  max-width: 990px;
  position: relative;
}
.keyvisual h1 {
  margin: -20px auto 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 517px;
  z-index: 1;
}

/* キャンペーン終了
--------------------------------------------- */
.keyvisual.campaign-close h1 {
  margin-top: -30px;
  width: 585px;
  z-index: 2;
}
/* ------------------------------------------ */

.keyvisual h1 img {
  width: 100%;
}
.keyvisual .text-catch {
  position: absolute;
  margin: 0 auto;
  top: calc(50% + 180px);
  left: 0;
  right: 0;
  max-width: 460px;
  z-index: 1;
}

/* キャンペーン終了
--------------------------------------------- */
.keyvisual.campaign-close .text-catch {
  top: calc(50% + 190px);
}
/* ------------------------------------------ */

.keyvisual .ribbon1 {
  top: 10px;
  left: 50%;
  width: 1647px;
  transform: translateX(-50%);
  z-index: 0;
}

.keyvisual .list-comment {
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 1044px;
  min-width: 100%;
  z-index: 2;
}
.keyvisual .list-comment .comment-item {
  background-color: rgba(255,255,255,0.9);
  border: 2px solid #F57300;
  border-radius: 7px;
  padding: 25px 15px;
  color: #F57300;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.keyvisual .list-comment .comment-item.comment3,
.keyvisual .list-comment .comment-item.comment4,
.keyvisual .list-comment .comment-item.comment7,
.keyvisual .list-comment .comment-item.comment8,
.keyvisual .list-comment .comment-item.comment11,
.keyvisual .list-comment .comment-item.comment12,
.keyvisual .list-comment .comment-item.comment13 {
  border-color: #EB4600;
  color: #EB4600;
}
.keyvisual .list-comment .comment-item.active {
  opacity: 1;
}

/* PC */
@media only screen and (min-width: 768px) {
  .keyvisual .list-comment .comment-item {
    animation: fade 30s infinite ease-in-out;
    max-width: 300px;
  }
  @keyframes fade {
    0% {
      opacity: 0;
    }
    3% {
      opacity: 1;
    }
    9% {
      opacity: 1;
    }
    15% {
      opacity: 1;
    }
    21% {
      opacity: 1;
    }
    27% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  .keyvisual .list-comment .comment-item.comment1 {
    top: 12vh;
    left: 40px;
    animation-delay: 3s;
  }
  .keyvisual .list-comment .comment-item.comment2 {
    top: 30vh;
    right: 0;
    animation-delay: 5s;
  }
  .keyvisual .list-comment .comment-item.comment3 {
    top: 31vh;
    left: 0;
    animation-delay: 7s;
  }
  .keyvisual .list-comment .comment-item.comment4 {
    top: 10vh;
    right: 50px;
    animation-delay: 9s;
  }
  .keyvisual .list-comment .comment-item.comment5 {
    top: 13.333vh;
    left: 35px;
    animation-delay: 11s;
  }
  .keyvisual .list-comment .comment-item.comment6 {
    top: 40vh;
    right: 10px;
    animation-delay: 13s;
  }
  .keyvisual .list-comment .comment-item.comment7 {
    top: 40vh;
    left: 0;
    animation-delay: 15s;
  }
  .keyvisual .list-comment .comment-item.comment8 {
    top: 20vh;
    right: 20px;
    animation-delay: 17s;
  }
  .keyvisual .list-comment .comment-item.comment9 {
    top: 15.333vh;
    left: 70px;
    animation-delay: 19s;
  }
  .keyvisual .list-comment .comment-item.comment10 {
    top: 45vh;
    right: -20px; 
    animation-delay: 21s;
  }
  .keyvisual .list-comment .comment-item.comment11 {
    top: 42vh;
    left: 20px;
    animation-delay: 23s;
  }
  .keyvisual .list-comment .comment-item.comment12 {
    top: 22vh;
    right: 10px;
    animation-delay: 25s;
  }
  .keyvisual .list-comment .comment-item.comment13 {
    top: 23vh;
    left: -40px;
    animation-delay: 27s;
  }
  .keyvisual .list-comment .comment-item.comment14 {
    top: 52vh;
    right: -100px;
    animation-delay: 29s;
  }
  .keyvisual .list-comment .comment-item.comment15 {
    top: 50vh;
    left: -100px;
    animation-delay: 31s;
  }
}

/* TAB */
@media only screen and (max-width: 900px) {
  .keyvisual-inner {
    max-height: inherit;
  }
  .keyvisual:before {
    width: 915px;
  }
  .keyvisual h1 {
    width: 465px !important;
  }
  .keyvisual .text-catch {
    top: calc(50% + 170px);
    max-width: 415px;
  }
  .keyvisual .ribbon1 {
    top: 15vh;
    width: 149.69vw;
    max-width: 1482px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .keyvisual:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/kv_decoration_sp.png);
    width: 615px;
  }
  .keyvisual h1 {
    width: 265px !important;
  }
  .keyvisual .text-catch {
    top: calc(50% + 110px);
    max-width: 300px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .keyvisual.campaign-close .text-catch {
    top: calc(50% + 120px);
    max-width: 320px;
  }
  /* ------------------------------------------ */
  
  .keyvisual .ribbon1 {
    top: 10vh;
    max-width: inherit;
    transform: rotate(-20deg) translateX(-53%);
    transform-origin: left;
    width: 1040px;
  }

  .keyvisual .list-comment .comment-item {
    border-width: 1.5px;
    animation: fade 29s infinite ease-in-out;
    border-radius: 4px;
    max-width: 250px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 8px;
  }
  @keyframes fade {
    0% {
      opacity: 0;
    }
    3% {
      opacity: 1;
    }
    9% {
      opacity: 1;
    }
    15% {
      opacity: 1;
    }
    21% {
      opacity: 0;
    }
    27% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  .keyvisual .list-comment .comment-item.comment1 {
    top: 10vh;
    left: 6.66vw;
    animation-delay: 3s;
  }
  .keyvisual .list-comment .comment-item.comment2 {
    bottom: 6vh;
    left: 3.33vw;
    animation-delay: 3s;
  }
  .keyvisual .list-comment .comment-item.comment3 {
    top: 40vh;
    right: 3.33vw;
    animation-delay: 6s;
  }
  .keyvisual .list-comment .comment-item.comment4 {
    top: 10vh;
    left: 9vw;
    animation-delay: 9s;
  }
  .keyvisual .list-comment .comment-item.comment5 {
    bottom: 12vh;
    left: 7vw;
    animation-delay: 9s;
  }
  .keyvisual .list-comment .comment-item.comment6 {
    top: 24vh;
    right: 5vw;
    animation-delay: 12s;
  }
  .keyvisual .list-comment .comment-item.comment7 {
    top: 10vh;
    left: 15vw;
    animation-delay: 15s;
  }
  .keyvisual .list-comment .comment-item.comment8 {
    bottom: 15vh;
    left: 15vw;
    animation-delay: 15s;
  }
  .keyvisual .list-comment .comment-item.comment9 {
    top: 44vh;
    right: 3.33vw;
    animation-delay: 18s;
  }
  .keyvisual .list-comment .comment-item.comment10 {
    top: 15vh;
    left: 6.66vw;
    animation-delay: 21s;
  }
  .keyvisual .list-comment .comment-item.comment11 {
    bottom: 12vh;
    left: 3.33vw;
    animation-delay: 21s;
  }
  .keyvisual .list-comment .comment-item.comment12 {
    top: 43vh;
    right: 4vw;
    animation-delay: 24s;
  }
  .keyvisual .list-comment .comment-item.comment13 {
    top: 10vh;
    left: 6.66vw;
    animation-delay: 27s;
  }
  .keyvisual .list-comment .comment-item.comment14 {
    bottom: 31vh;
    left: 4vw;
    animation-delay: 27s;
  }
  .keyvisual .list-comment .comment-item.comment15 {
    top: 24vh;
    right: 8vw;
    animation-delay: 30s;
  }
  
}


/* section
------------------------------------------------------------ */
.section-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 990px;
  position: relative;
}
.section-title {
  font-weight: 700;
  text-align: center;
}
.section-title .subtext {
  display: block;
  font-size: 2.6rem;
  margin-top: 30px;
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-title .subtext {
    font-size: 2.3rem;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-title .subtext {
    font-size: 2rem;
  }
}

.ribbon2 {
  top: 60vh;
  right: calc(50vw + 40px);
  width: 984px;
  z-index: 1;
}
.button-campaign {
  background-color: #fff;
  border-radius: 50%;
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 126px;
  z-index: 11;
}
/* TAB */
@media only screen and (max-width: 900px) {
  .ribbon2 {
    top: 65vh;
    right: calc(50vw + 55px);
    width: 885px;
  }
  .button-campaign {
    right: 20px;
    bottom: 20px;
    width: 113px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .button-campaign {
    right: 10px;
    bottom: 10px;
    width: 95px;
  }
  .ribbon2 {
    top: 62vh;
    right: -35vw;
    width: 740px;
  }
}



/* section-intro
------------------------------------------------------------ */
.section-intro {
  background: linear-gradient(to bottom, #3c2882 0%, #f57300 60%);
  position: relative;
  /*z-index: 0;*/
}
.section-intro .section-inner {
  padding-top: 200px;
  padding-bottom: 130px;
}
.section-intro .text-message > p {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 3.2;
  text-align: center;
  position: relative;
  z-index: 10;
}
.section-intro .ribbon3 {
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  width: 1428px;
  z-index: 0;
}
.section-intro .ribbon4 {
  bottom: 0;
  right: calc(50vw + 190px);
  width: 1530px;
  z-index: 0;
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-intro .section-inner {
    padding-top: 150px;
    padding-bottom: 80px;
  }
  .section-intro .text-message > p {
    font-size: 2rem;
  }
  .section-intro .ribbon3 {
    width: 1285px;
  }
  .section-intro .ribbon4 {
    width: 1377px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-intro .section-inner {
    padding-bottom: 20px;
  }
  .section-intro .text-message > p {
    font-size: 1.3rem;
    letter-spacing: 0.03rem;
  }
  .section-intro .ribbon3 {
    bottom: 180px;
    transform: translateX(-45%);
    width: 865px;
  }
  .section-intro .ribbon4 {
    left: 20vw;
    right: inherit;
    bottom: -370px;
    width: 1070px;
  }
}


/* section-history
------------------------------------------------------------ */
.section-history {
  background: linear-gradient(to bottom, #F57300, #fff);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.section-history .section-inner {
  padding-top: 90px;
  padding-bottom: 165px;
}
.section-history .section-title img {
  max-width: 395px;
}
.section-history .section-title .subtext {
  color: #fff;
  font-size: 2rem;
}

.section-history .history-content-item .item-detail {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  position: relative;
  z-index: 0;
}
.section-history .history-content-item .item-detail .text-lead {
  color: #F57300;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
}
.section-history .history-content-item .item-detail .text-lead.border {
  border-bottom: 1px solid #707070;
  margin-bottom: 18px;
  padding-bottom: 15px;
}
.section-history .history-content-item .item-detail .text-lead + .text-lead {
  border-top: 1px solid #707070;
  margin-top: 18px;
  padding-top: 15px;
}
.section-history .item18 {
  padding-top: 120px;
}
.section-history .item18 .item-detail:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_fukidashi_white_02.svg) !important;
  background-position: left top !important;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  position: absolute;
  top: -25px !important;
  right: 116px !important;
  height: 61px !important;
  width: 77px !important;
}
.section-history .item18 .item-detail .logo + p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.9;
}
.section-history .history-content-item .text-event {
  background-color: #F57300;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 0.03em;
  padding: 10px 11px;
  width: 185px;
}
.section-history .history-content-item .text-event:before {
  background-repeat: no-repeat;
  background-position: left top;
  content: "";
  height: 47px;
  position: absolute;
  top: 2px;
  left: -25px;
  width: 25px;
}
.section-history .history-content-item .text-event p {
  line-height: 1.5;
}
.section-history .history-content .accordion-trigger {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_icon_arrow.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  color: transparent;
  font-size: 0;
  height: 49px;
  width: 49px;
}
.section-history .history-content.is-open .accordion-trigger,
.section-history .history-content .accordion-trigger.is-open {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_icon_arrow_close.svg);
}
.section-history .block-notice {
  margin-top: 100px;
}
.section-history .block-notice .update {
  margin: 0 auto;
  max-width: 534px;
}
.section-history .block-mailmagazine {
  margin-top: 150px;
}
.section-history .block-mailmagazine .text-lead {
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 90px;
  position: relative;
  text-align: center;
}
.section-history .block-mailmagazine .text-lead:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_mail.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  content: "";
  height: 60px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 87px;
}
.section-history .block-mailmagazine .button-link {
  margin: 45px auto 0;
  width: 245px;
}
.section-history .block-mailmagazine .button-link a {
  background-color: #F57300;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 60px;
  position: relative;
  text-align: center;
}

.section-history .ribbon5 {
  top: 280px;
  left: calc(50vw - 150px);
  width: 1030px;
  z-index: -1;
}
.section-history .ribbon6 {
  top: 1600px;
  right: calc(50vw + 170px);
  width: 1297px;
  z-index: -1;
}
.section-history .ribbon7 {
  top: 1640px;
  left: calc(50vw + 150px);
  width: 619px;
  z-index: -1;
}
.section-history .ribbon8 {
  top: 2800px;
  right: calc(50vw + 90px);
  width: 1152px;
  z-index: -1;
}
.section-history .ribbon9 {
  top: 3210px;
  margin: 0 auto;
  right: -210px;
  width: 1210px;
  z-index: -1;
}
.section-history .ribbon10 {
  top: 4510px;
  margin: 0 auto;
  left: -415px;
  width: 1550px;
  z-index: -1;
}
.section-history .ribbon11 {
  top: 5170px;
  margin: 0 auto;
  right: -285px;
  width: 1294px;
  z-index: -1;
}
/* PC */
@media only screen and (min-width: 768px) {
  .section-history .history-content {
    margin: 60px auto 0;
    max-width: 750px;
    position: relative;
    z-index: 0;
  }
  .section-history .history-content:before,
  .section-history .history-content:after {
    background-position: left top;
    background-size: 100% auto;
    content: "";
    position: absolute;
  }
  .section-history .history-content:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_bdr.png);
    background-repeat: repeat-y;
    height: calc(100% - 445px);
    top: 105px;
    right: 260px;
    width: 4px;
    z-index: -1;
  }
  .section-history .history-content:after {
    background-color: #F99841;
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_shortening.svg);
    background-repeat: no-repeat;
    height: 27px;
    bottom: 380px;
    right: 221px;
    width: 86px;
    z-index: 1;
  }
  .section-history .history-content.is-open:after {
    display: none;
  }
  .section-history .history-content .accordion-trigger {
    cursor: pointer;
    position: absolute;
    bottom: 500px;
    right: 238px;
    z-index: 5;
  }
  .section-history .history-content.is-open .accordion-trigger {
    bottom: 400px;
  }
  .section-history .history-content .accordion-content {
    display: none;
    padding-bottom: 120px;
    position: relative;
  }
  .section-history .history-content-item {
    position: relative;
  }
  .section-history .accordion-content .history-content-item {
    opacity: 0;
    transition: all 0.5s;
  }
  .section-history .accordion-content .history-content-item.is-active {
    opacity: 1;
  }
  .section-history .history-content .accordion-content,
  .section-history .history-content-item:nth-of-type(n+2) {
    margin-top: 45px;
  }
  .section-history .history-content-item .item-detail {
    width: 53.333%;
  }
  .section-history .item2 .item-detail {
    margin-left: auto;
    margin-left: auto;
    margin-right: 46.667%;
    text-align: center;
    width: 220px;
  }
  .section-history .history-content-item .item-detail:after {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_fukidashi_white.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% auto;
    content: "";
    height: 35px;
    position: absolute;
    right: -28px;
    width: 54px;
    z-index: -1;
  }
  .section-history .item1 .item-detail:after {
    top: 65px;
  }
  .section-history .item2 .item-detail:after,
  .section-history .item8 .item-detail:after,
  .section-history .item10 .item-detail:after,
  .section-history .item15 .item-detail:after,
  .section-history .item17 .item-detail:after {
    top: 50%;
    transform: translateY(-50%);
  }
  .section-history .item3 .item-detail:after,
  .section-history .item4 .item-detail:after {
    top: 10px;
  }
  .section-history .item5 .item-detail:after,
  .section-history .item6 .item-detail:after,
  .section-history .item9 .item-detail:after,
  .section-history .item11 .item-detail:after,
  .section-history .item12 .item-detail:after,
  .section-history .item16 .item-detail:after {
    top: 90px;
  }
  .section-history .item7 .item-detail:after {
    top: 30px;
  }
  .section-history .item13 .item-detail:after {
    top: 20px;
  }
  .section-history .item14 .item-detail:after {
    top: 60px;
  }
  .section-history .history-content-item .item-detail .text-lead ~ * {
    margin-top: 10px;
  }
  .section-history .history-content-item .item-detail .block-flex:after {
    clear: both;
    content: "";
    display: block;
  }
  .section-history .history-content-item .item-detail .block-flex > figure {
    float: left;
    margin-right: 15px;
  }
  .section-history .history-content-item .item-detail .block-flex > figure ~ * {
    overflow: hidden;
  }
  .section-history .history-content-item .item-detail .block-flex.align-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .section-history .history-content-item .item-detail .block-flex.align-center > figure {
    float: none;
  }
  .section-history .history-content-item .text-year {
    position: absolute;
    right: 213px;
    width: 100px;
  }
  .section-history .item2 .text-year img,
  .section-history .item7 .text-year img,
  .section-history .item8 .text-year img,
  .section-history .item10 .text-year img,
  .section-history .item15 .text-year img,
  .section-history .item17 .text-year img {
    display: block;
    margin: 0 auto;
    width: 72px;
  }
  .section-history .item1 figure {
    margin-left: auto;
    margin-right: auto;
    width: 65.37%
  }
  .section-history .item3 figure {
    width: 30%;
  }
  .section-history .item4 figure {
    width: 35%;
  }
  .section-history .item5 figure {
    width: 52.5%;
  }
  .section-history .item5 figure ~ * {
    overflow: inherit !important;
  }
  .section-history .item6 figure {
    width: 33%;
  }
  .section-history .item9 figure {
    width: 27%;
  }
  .section-history .item12 figure {
    width: 37%;
  }
  .section-history .item13 figure {
    width: 32%;
  }
  .section-history .item13 figure + p {
    width: calc(68% - 15px);
  }
  .section-history .item14 * + .text-lead {
    border-top: 1px solid #707070;
    margin-top: 30px;
    padding-top: 18px;
  }
  .section-history .item16 figure {
    width: 50%;
  }
  .section-history .item1 .text-year {
    top: 62px;
  }
  .section-history .item2 .text-year,
  .section-history .item8 .text-year,
  .section-history .item10 .text-year,
  .section-history .item15 .text-year,
  .section-history .item17 .text-year {
    top: 50%;
    transform: translateY(-50%);
  }
  .section-history .item3 .text-year,
  .section-history .item4 .text-year {
    top: 7px;
  }
  .section-history .item5 .text-year,
  .section-history .item6 .text-year,
  .section-history .item9 .text-year,
  .section-history .item11 .text-year,
  .section-history .item12 .text-year,
  .section-history .item16 .text-year {
    top: 85px;
  }
  .section-history .item7 .text-year {
    top: 35px;
  }
  .section-history .item13 .text-year {
    top: 15px;
  }
  .section-history .item14 .text-year {
    top: 55px;
  }
  .section-history .item18 .text-year {
    top: 0px;
  }
  .section-history .item18 .item-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 45px;
    width: 534px;
  }
  .section-history .item18 .item-detail .logo {
    width: 38%;
  }
  .section-history .item18 .item-detail .logo + p {
    letter-spacing: 0.03em;
    width: 56%;
  }
  .section-history .history-content-item .text-event {
    position: absolute;
    top: 0;
    right: 0;
  }
  .section-history .history-content-item .text-event:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_fukidashi_orange.svg);
    background-size: auto 100%;
  }
  .section-history .item2 .text-event {
    top: 50%;
    transform: translateY(-50%);
  }
  .section-history .item2 .text-event:before {
    top: 50%;
    transform: translateY(-50%);
  }
  .section-history .item5 .text-event,
  .section-history .item6 .text-event,
  .section-history .item9 .text-event,
  .section-history .item11 .text-event,
  .section-history .item16 .text-event {
    top: 80px;
  }
  .section-history .item7 .text-event {
    top: 23px;
  }
  .section-history .item10 .text-event {
    top: 15px;
  }
  .section-history .item11 .text-event {
    right: -20px;
    width: 205px;
  }
  .section-history .item13 .text-event {
    right: -15px;
    top: 10px;
    width: 200px;
  }
  .section-history .item14 .text-event {
    top: 50px;
  }
  .section-history .item17 .text-event {
    right: -15px;
    top: 0;
    width: 200px;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-history .section-inner {
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .section-history .section-title img {
    max-width: 355px;
  }
  .section-history .history-content.is-open .accordion-trigger {
    bottom: 400px;
  }
  .section-history .ribbon5 {
    width: 927px;
  }
  .section-history .ribbon6 {
    width: 1167px;
  }
  .section-history .ribbon7 {
    width: 557px;
  }
  .section-history .ribbon8 {
    width: 1036px;
  }
  .section-history .ribbon9 {
    width: 1089px;
  }
  .section-history .ribbon10 {
    width: 1395px;
  }
  .section-history .ribbon11 {
    width: 1165px;
  }
  .section-history .block-mailmagazine {
    margin-top: 130px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-history .section-inner {
    padding: 50px 20px 200px;
  }
  .section-history .section-title img {
    max-width: 270px;
  }
  .section-history .section-title .subtext {
    font-size: 1.6rem;
    margin-top: 20px;
  }
  .section-history .ribbon5,
  .section-history .ribbon6,
  .section-history .ribbon7,
  .section-history .ribbon8,
  .section-history .ribbon9,
  .section-history .ribbon10,
  .section-history .ribbon11 {
    display: none;
  }
  .section-history .block-mailmagazine {
    margin-top: 150px;
  }
  .section-history .block-mailmagazine .text-lead {
    font-size: 1.6rem;
    padding-bottom: 90px;
  }
  .section-history .block-mailmagazine .text-lead:after {
    height: 58px;
    width: 84px;
  }
  .section-history .block-mailmagazine .button-link {
    margin-top: 70px;
    width: 235px;
  }
  .section-history .block-mailmagazine .button-link a {
    font-size: 1.7rem;
    line-height: 55px;
  }

  .section-history .history-content {
    margin-top: 90px;
    position: relative;
  }
  .section-history .history-content:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_bdr.png);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    content: "";
    height: calc(100% - 400px);
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 7px;
    z-index: -1;
  }
  
  .section-history .history-content .text-year {
    margin: 0 auto;
    width: 97px;
  }
  .section-history .text-year.year-1995,
  .section-history .text-year.year-2005,
  .section-history .text-year.year-2007,
  .section-history .text-year.year-2010,
  .section-history .text-year.year-2017,
  .section-history .text-year.year-2020 {
    width: 78px;
  }
  .section-history .history-content .accordion-content {
    display: none;
  }
  .section-history .history-content .accordion-trigger {
    margin: 60px auto;
    position: relative;
    width: 42px;
    z-index: 1;
  }
  .section-history .history-content .accordion-trigger.is-open {
  }

  .section-history .history-content-item {
    margin-top: 40px;
  }
  .section-history .history-content-item .item-detail {
    padding: 15px 20px 20px;
  }
  .section-history .history-content-item .item-detail:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_fukidashi_white_03.svg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    content: "";
    height: 40px;
    margin: 0 auto;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    width: 78px;
    z-index: -1;
  }
  .section-history .history-content-item .item-detail .text-lead {
    font-size: 1.8rem;
    line-height: 1.4;
    text-align: center;
  }
  .section-history .history-content-item .item-detail > figure {
    margin: 10px auto 0;
  }
  .section-history .history-content-item .item-detail > p:not([class]) {
    margin-top: 15px;
  }
  .section-history .history-content-item + .text-year {
    margin-top: 55px;
  }
  .section-history .history-content-item .text-event {
    margin: 35px auto 0;
    padding: 10px 25px;
    position: relative;
    width: auto;
  }
  .section-history .history-content-item .text-event:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/history_fukidashi_orange_02.svg);
    background-size: 100% auto;
    height: 17px;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -17px;
    width: 78px;
  }

  .section-history .item2 .item-detail {
    margin-left: auto;
    margin-right: auto;
    padding: 12px 15px;
    width: 190px;
  }
  .section-history .item2 .text-event {
    min-width: 205px;
    padding: 15px 15px;
    width: 70%;
  }
  .section-history .item3 .item-detail > figure {
    width: 109px;
  }
  .section-history .item6 .item-detail > figure {
    width: 146px;
  }
  .section-history .item8 .item-detail {
    margin-left: auto;
    margin-right: auto;
    width: 230px;
  }
  .section-history .item9 .item-detail > figure {
    width: 120px;
  }
  .section-history .item10 .item-detail {
    padding-left: 5px;
    padding-right: 5px;
  }
  .section-history .item12 .item-detail > figure {
    width: 137px;
  }
  .section-history .item13 .item-detail > figure {
    width: 158px;
  }
  .section-history .item14 .item-detail * + .text-lead {
    border-top: 1px solid #707070;
    margin-top: 18px;
    padding-top: 15px;
  }
  .section-history .item18 {
    margin-top: 60px;
    padding-top: 0;
  }
  .section-history .item18 .item-detail {
    padding: 25px 20px 30px;
  }
  .section-history .item18 .item-detail:before {
    display: none;
  }
  .section-history .item18 .item-detail:after {
    margin: 0 auto;
    left: 0 !important;
    right: 0 !important;
    height: 30px !important;
  }
  .section-history .item18 .item-detail .logo {
    margin: 0 auto;
    width: 210px;
  }
  .section-history .item18 .item-detail .logo + p {
    line-height: 2.5;
    display: table;
    margin: 25px auto 0;
  }
  .section-history .item7 .item-detail .text-lead:nth-of-type(1) {
    font-size: 1.4rem;
  }
}








/* section-talk
------------------------------------------------------------ */
.section-talk {
  background-color: #fff;
}
.section-talk .section-inner {
  padding-top: 180px;
  padding-bottom: 180px;
}
.section-talk .section-title img {
  max-width: 613px;
}
.section-talk .section-title .subtext {
  color: #EB4600;
}
.section-talk .text-lead {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.9;
  margin-top: 20px;
  text-align: center;
}
.section-talk .talk-content {
  margin: 50px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 750px;
}
.section-talk .talk-content-item {
  width: 25%;
}
.section-talk .talk-content-item .item-text {
  margin-top: 10px;
  position: relative;
  text-align: center;
}
.section-talk .talk-content-item .text-belong {
  font-size: 1.4rem;
  line-height: 1.5;
  height: 42px;
}
.section-talk .talk-content-item .text-belong span:not([class]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
.section-talk .talk-content-item .text-name {
  font-size: 2rem;
  margin-top: 0;
}
.section-talk .button-link {
  margin: 100px auto 0;
  width: 245px;
}
.section-talk .button-link a {
  background-color: #F57300;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 60px;
  position: relative;
  text-align: center;
}
.section-talk .button-link a:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_arrow_r.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  content: "";
  height: 23px;
  position: absolute;
  width: 20px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.section-talk .banner {
  margin: 130px auto 0;
  max-width: 900px;
}
/* PC */
@media only screen and (min-width: 768px) {
  .section-talk .talk-content-item:nth-of-type(n+2) .item-text:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_cross.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    content: "";
    height: 50px;
    position: absolute;
    width: 50px;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-talk .section-inner {
    padding-top: 100px;
    padding-bottom: 130px;
  }
  .section-talk .section-title img {
    max-width: 550px;
  }
  .section-talk .text-lead {
    font-size: 1.9rem;
    margin-top: 15px;
  }
  .section-talk .button-link {
    margin-top: 80px;
  }
  .section-talk .banner {
    margin-top: 100px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-talk .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .section-talk .section-title img {
    max-width: 263px;
  }
  .section-talk .text-lead {
    font-size: 1.6rem;
    line-height: 2.5;
  }
  .section-talk .talk-content {
    margin-left: auto;
    margin-right: auto;
    max-width: inherit;
    justify-content: space-between;
    position: relative;
    width: 90%;
  }
  .section-talk .talk-content:before {
    background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_cross.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    content: "";
    height: 66px;
    position: absolute;
    width: 66px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .section-talk .talk-content-item {
    width: 47.22%;
  }
  .section-talk .talk-content-item:nth-of-type(n+3) {
    margin-top: 120px;
  }
  .section-talk .talk-content-item .text-belong {
    font-size: 1.2rem;
    height: 35px;
  }
  .section-talk .talk-content-item .text-name {
    font-size: 1.8rem;
  }
  .section-talk .button-link {
    margin-top: 120px;
  }
  .section-talk .banner {
    margin: 130px auto 0;
    max-width: 500px;
  }
}




/* section-fact
------------------------------------------------------------ */
.section-fact {
  background-color: #e6e6e6;
}
.section-fact .section-inner {
  padding-top: 90px;
  padding-bottom: 130px;
}
.section-fact .section-title img {
  max-width: 220px; 
}
.section-fact .section-title .subtext {
  color: #f57300;
}
.section-fact .text-lead {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.9;
  margin-top: 40px;
  text-align: center;
}
.section-fact .fact-content-item:nth-of-type(n+2) {
  margin-top: 35px;
}
.section-fact .fact-content-item .text-note {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.666;
  margin-top: 10px;
}
.section-fact .fact-content-item.fact1 .text-note {
  color: #F5BE00;
}
.section-fact .fact-content-item.fact2 .text-note {
  color: #F5A000;
}
/* PC */
@media only screen and (min-width: 768px) {
  .section-fact .fact-content {
    margin: 40px auto 0;
    max-width: 750px;
  }
  .section-fact .fact-content-item.fact4 {
    margin-top: 60px;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-fact .section-inner {
    padding-bottom: 100px;
  }
  .section-fact .section-title img {
    max-width: 200px;
  }
  .section-fact .text-lead {
    font-size: 1.9rem;
    margin-top: 30px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-fact .section-inner {
    padding: 150px 20px;
  }
  .section-fact .text-lead {
    font-size: 1.6rem;
    margin-top: 25px;
  }
  .section-fact .fact-content {
    margin-top: 80px;
  }
  .section-fact .fact-content-item:nth-of-type(n+2) {
    margin-top: 80px;
  }
}




/* section-project
------------------------------------------------------------ */
.section-project {
  position: relative;
  z-index: 0;
}
.section-project .section-inner {
  padding-top: 120px;
  padding-bottom: 120px;
}
.section-project .section-title img {
  max-width: 606px;
}
.section-project .block-summary {
  margin-top: 50px;
  text-align: center;
}
.section-project .block-summary .text-lead {
  font-size: 2rem;
  font-weight: 700;
}
.section-project .block-summary .text-lead span:not([class]) {
  color: #F57300;
  display: block;
  font-size: 2.7rem;
  margin-top: 10px;
}
.section-project .block-summary .text-period {
  margin: 20px auto 0;
  max-width: 610px;
}
.section-project .block-summary .text-period img {
  width: 100%;
}
.section-project .block-summary .text-period + .text-note {
  margin-top: 15px;
}
.section-project .block-summary .text-period + .text-note a {
  color: #f00;
}

/* キャンペーン終了
--------------------------------------------- */
.section-project .block-summary .text-close {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 15px;
  padding: 30px;
  position: relative;
  text-align: center;
}
.section-project .block-summary .text-close:before {
  background-color: #F47300;
  content: "";
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100vw;
  z-index: -1;
}
/* ------------------------------------------ */

.section-project .block-campaign {
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 50px 100px;
  max-width: 645px;
}
/* キャンペーン終了
--------------------------------------------- */
.section-project.campaign-close .block-campaign {
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 85px 60px;
  position: relative;
  max-width: 730px;
}
/* ------------------------------------------ */

.section-project .block-campaign > h3 + .text-lead {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 30px;
  text-align: center;
}
.section-project .block-campaign > h3 ~ .text-hint {
  color: #F5BE00;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 15px;
  text-align: center;
}
.section-project .block-campaign .campaign-summary {
  margin-top: 45px;
  margin-left: auto;
  margin-right: auto;
}
.section-project .block-campaign .campaign-summary .text-catch {
  text-align: center;
}
.section-project .block-campaign .campaign-summary > *:nth-child(n+2) {
  margin-top: 15px;
}
.section-project .block-campaign .campaign-application {
  margin-top: 60px;
}
.section-project .block-campaign .campaign-application h4 {
  color: #fff;
  font-size: 2.9rem;
  font-weight: 700;
  text-align: center;
}
.section-project .block-campaign .campaign-application .flow-list {
  margin-top: 15px;
}
.section-project .block-campaign .campaign-application .flow-list li {
  background-color: #fff;
  border-radius: 7px;
  color: #F5A000;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 15px 25px;
  position: relative;
  text-align: center;
}
.section-project .block-campaign .campaign-application .flow-list li:nth-of-type(n+2) {
  margin-top: 50px;
}
.section-project .block-campaign .campaign-application .flow-list li:nth-of-type(n+2):before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/project_campaign_arrow.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  content: "";
  height: 19px;
  margin: 0 auto;
  position: absolute;
  width: 46px;
  left: 0;
  right: 0;
  top: -33px;
}
.section-project .block-campaign .campaign-application .flow-list li b {
  color: #EB4600;
  vertical-align: baseline;
}
.section-project .block-campaign .campaign-application .flow-list li a {
  color: #EB4600;
  display: inline-block;
  text-decoration: underline;
  vertical-align: top;
}
.section-project .block-campaign .campaign-summary .text-note {
  font-size: 1.2rem;
  font-weight: 700;
}

.section-project .block-campaign.comment {
  background-color: #F5A000;
  margin-top: 110px;
}
.section-project .block-campaign.comment > h3 {
  margin-left: -40px;
  text-align: center;
}
.section-project .block-campaign.comment > h3 img {
  max-width: 575px;
}
.section-project .block-campaign.comment .campaign-summary {
  max-width: 500px;
}
.section-project .block-campaign.comment .campaign-summary .text-catch img {
  max-width: 482px;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product dt {
  color: #F57300;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product dd {
  margin-top: 10px;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product dd > p {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product dd .img-example {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product + p {
  margin-top: 5px;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product + p a {
  color: #FF0000;
}
.section-project .block-campaign.comment .campaign-summary .catalog-product ~ .text-note {
  text-align: center;
}
.section-project .block-campaign.comment .button-link {
  margin: 90px auto 0;
  width: 315px;
}
.section-project .block-campaign.comment .button-link a {
  background-color: #EB4600;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 60px;
  position: relative;
  text-align: center;
}
.section-project .block-campaign.comment .button-link a:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_arrow_r.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  content: "";
  height: 23px;
  position: absolute;
  width: 20px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.section-project .block-campaign.comment .block-comment {
  margin-top: 30px;
}
.section-project .block-campaign.comment .block-comment .text-lead {
  color: #fff;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
}
.section-project .block-campaign.comment .block-comment .comment-items {
  margin-top: 60px;
}
.section-project .block-campaign.comment .block-comment .comment-item {
  margin-top: 20px;
	transition: 0.2s ease-in-out;
  width: 76.25%;
}
.section-project .block-campaign.comment .block-comment .comment-item.is-hidden,
.section-project .block-campaign.comment .block-comment .comment-item.is-hidden * {
	overflow: hidden;
	opacity: 0;
	height: 0;
	margin-top: 0 !important;
	padding: 0 !important;
	position: relative;
	z-index: -1;
}
.section-project .block-campaign.comment .block-comment .comment-item:nth-of-type(even) {
  margin-left: auto;
}
.section-project .block-campaign.comment .block-comment .comment-item.product {
  margin-top: 30px;
}
.section-project .block-campaign.comment .block-comment .comment-item:nth-of-type(1) {
  margin-top: 0 !important;
}
.section-project .block-campaign.comment .block-comment .comment-item .text-comment {
  background-color: #fff;
  border: 3px solid #F57300;
  border-radius: 25px;
  color: #F57300;
  padding: 25px;
  position: relative;
  z-index: 1;
}
.section-project .block-campaign.comment .block-comment .comment-item.product .text-comment {
  border-color: #EB4600;
  color: #EB4600;
}
.section-project .block-campaign.comment .block-comment .comment-item .text-comment:before {
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
  height: 49px;
  position: absolute;
  right: -36px;
  width: 36px;
  top: 50%;
  transform: translateY(-50%);
}
.section-project .block-campaign.comment .block-comment .comment-item:nth-of-type(odd) .text-comment:before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/comment_balloon_r.png);
  background-position: right top;
}
.section-project .block-campaign.comment .block-comment .comment-item:nth-of-type(even) .text-comment:before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/comment_balloon_l.png);
  background-position: left top;
  left: -36px;
  right: inherit;
}
.section-project .block-campaign.comment .block-comment .comment-item.product:nth-of-type(odd) .text-comment:before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/comment_balloon_r_red.png);
  background-position: right top;
}
.section-project .block-campaign.comment .block-comment .comment-item.product:nth-of-type(even) .text-comment:before {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/comment_balloon_l_red.png);
  background-position: left top;
}
.section-project .block-campaign.comment .block-comment .comment-item .tag-product {
  background-color: #EB4600;
  border-radius: 50px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  height: 44px;
  min-width: 90px;
  padding: 0 10px;
  position: absolute;
  top: -25px;
  right: -20px;
  text-align: center;
  z-index: 1;
}
.section-project .block-campaign.comment .block-comment .comment-item .tag-product span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1.14;
  height: 100%;
}
.section-project .block-campaign.comment .block-comment .comment-item .text-comment .tx {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.875;
}
.section-project .block-campaign.comment .block-comment .more-view {
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 60px;
  padding-bottom: 40px;
  position: relative;
  text-align: center;
}
.section-project .block-campaign.comment .block-comment .more-view:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_arrow_b.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  content: "";
  height: 28px;
  margin: 0 auto;
  position: absolute;
  width: 45px;
  left: 0;
  right: 0;
  bottom: 0;
}

.section-project .block-campaign.quiz {
  background-color: #F5BE00;
  margin-top: 170px;
  padding-bottom: 80px;
}

/* キャンペーン終了
--------------------------------------------- */
.section-project.campaign-close .block-campaign.quiz {
  padding-top: 70px;
  padding-bottom: 160px;
}
/* --------------------------------------------- */


.section-project .block-campaign.quiz > h3 {
  margin-left: -55px;
  text-align: center;
}
.section-project .block-campaign.quiz > h3 img {
  max-width: 463px;
}
.section-project .block-campaign.quiz .campaign-summary {
  max-width: 500px;
}
.section-project .block-campaign.quiz .box-quiz {
  background-color: #fff;
  border: 4px solid #F57300;
  border-radius: 15px;
  height: 300px;
  margin-top: 100px;
  overflow: hidden;
  position: relative;
  transition: none;
}
/* キャンペーン終了
--------------------------------------------- */
.section-project .block-campaign.quiz .box-quiz {
  margin-top: 70px;
}
/* --------------------------------------------- */

.section-project .block-campaign.quiz .box-quiz-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.section-project .block-campaign.quiz .box-quiz-content:nth-of-type(n+2) {
  display: none;
}
.section-project .block-campaign.quiz .box-quiz-content .box-head {
  background-color: #F57300;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  font-weight: 700;
  height: 84px;
  position: relative;
  z-index: 2;
}
.section-project .block-campaign.quiz .box-quiz-content .text-question {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 90%;
}
.section-project .block-campaign.quiz .box-quiz-content .text-question > span {
  display: inline-block;
}
.section-project .block-campaign.quiz .box-quiz-content .text-question .number {
  margin-right: 20px;
  width: 70px;
}
.section-project .block-campaign.quiz .box-quiz-content .text-question .text {
  line-height: 1.4;
  width: calc(100% - 90px);
}
.section-project .block-campaign.quiz .box-quiz-content .box-head .text-pager {
  font-size: 1.8rem;
  position: absolute;
  top: 0;
  right: 8px;
}
.section-project .block-campaign.quiz .box-quiz-content .box-inner {
  background-color: #fff;
  height: 210px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.section-project .block-campaign.quiz .box-quiz-content.start .button-start {
  background-color: #F57300;
  border-radius: 55px;
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  transition: 0.2s all;
  width: 205px;
  z-index: 2;
}
.section-project .block-campaign.quiz .box-quiz-content.start .box-head img {
  max-width: 222px;
}
.section-project .block-campaign.quiz .box-quiz-content.start .button-start:hover {
  opacity: 0.7;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 2;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li .text-alphabet {
  color: #F5BE00;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  transition: 0.2s all;
  width: 35px;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li .button {
  background-color: #F5BE00;
  border-radius: 6px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  height: 55px;
  text-align: center;
  transition: 0.2s all;
  width: calc(100% - 35px);
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li .button span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  line-height: 1.3;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li a:hover {
  opacity: 1;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li a:hover .text-alphabet,
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li.is-choice .text-alphabet {
  color: #F57300;
}
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li a:hover .button,
.section-project .block-campaign.quiz .box-quiz-content .list-choice > li.is-choice .button {
  background-color: #F57300;
}
.section-project .block-campaign.quiz .box-quiz-content .text-hint {
  color: #ADADAD;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.section-project .block-campaign.quiz .box-quiz-content .text-hint a {
  color: #ADADAD !important;
  text-decoration: underline;
  vertical-align: baseline;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager > li {
  cursor: pointer;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .prev,
.section-project .block-campaign.quiz .box-quiz-content .button-pager .next {
  width: 18px;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .next {
  pointer-events: none;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .next.is-active {
  pointer-events: inherit;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .result {
  opacity: 0;
  position: absolute;
  bottom: 15px;
  right: 20px;
  transition: 0.2s all;
  z-index: 2;
  width: 95px;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .result a {
  pointer-events: none;
  background-color: #EB4600;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .result.is-active {
  opacity: 1;
}
.section-project .block-campaign.quiz .box-quiz-content .button-pager .result.is-active a {
  pointer-events: inherit;
}
.section-project .block-campaign.quiz .text-close {
  background-color: #F47300;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 30px -85px 0;
  padding: 30px;
  position: relative;
  text-align: center;
}

/* PC */
@media only screen and (min-width: 768px) {
  .section-project .block-campaign.comment .campaign-summary .summary-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .section-project .block-campaign.comment .campaign-summary .summary-detail .illust {
    width: 30%;
  }
  .section-project .block-campaign.comment .campaign-summary .summary-detail .text {
    width: 67%;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product dd .img-example figure {
    width: 49%;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% - 60px);
    margin-left: auto;
    margin-right: auto;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice > li {
    width: 47.28%;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice > li:nth-of-type(n+3) {
    margin-top: 24px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .prev,
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .prev {
    left: 10px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .next {
    right: 10px;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-project .section-inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .section-project .section-title img {
    max-width: 545px;
  }
  .section-project .block-summary {
    margin-top: 40px;
  }
  .section-project .block-summary .text-lead {
    font-size: 1.9rem;
  }
  .section-project .block-summary .text-lead span:not([class]) {
    font-size: 2.4rem;
    margin-top: 5px;
  }
  .section-project .block-summary .text-period {
    max-width: 550px;
  }
  .section-project .block-campaign {
    padding: 20px 40px 80px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .section-project.campaign-close .block-campaign {
    padding: 30px 85px 80px;
  }
  /* --------------------------------------------- */

  .section-project .block-campaign.comment {
    margin-top: 100px;
  }
  .section-project .block-campaign.comment > h3 img {
    max-width: 517px;
  }
  .section-project .block-campaign > h3 + .text-lead {
    font-size: 1.9rem;
    margin-top: 20px;
  }
  .section-project .block-campaign > h3 ~ .text-hint {
    margin-top: 10px;
  }
  .section-project .block-campaign .campaign-summary {
    margin-top: 40px;
  }
  .section-project .block-campaign.comment .campaign-summary .text-catch img {
    max-width: 434px;
  }
  .section-project .block-campaign .campaign-application {
    margin-top: 40px;
  }
  .section-project .block-campaign .campaign-application h4 {
    font-size: 2.6rem;
  }
  .section-project .block-campaign.comment .button-link {
    margin-top: 80px;
  }
  .section-project .block-campaign.quiz {
    margin-top: 120px;
    padding-bottom: 40px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .section-project.campaign-close .block-campaign.quiz {
    padding-bottom: 100px;
  }
  /* --------------------------------------------- */

  .section-project .block-campaign.quiz > h3 img {
    max-width: 416px;
  }
  .section-project .block-campaign.quiz .box-quiz {
    margin-top: 40px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-project .section-title img {
    max-width: 290px;
  }
  .section-project .section-inner {
    padding: 120px 20px;
  }
  .section-project .block-summary .text-lead {
    font-size: 1.6rem;
    line-height: 2.25;
    margin-top: 50px;
  }
  .section-project .block-summary .text-lead span:not([class]) {
    line-height: 1.7;
  }
  .section-project .block-summary .text-period {
    max-width: 264px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .section-project .block-summary .text-close {
    font-size: 1.6rem;
    line-height: 2.15;
    letter-spacing: 0.06em;
    margin-top: 20px;
    padding: 25px 0;
  }
  /* ------------------------------------------ */

  .section-project .block-campaign {
    border-radius: 20px;
  }
  .section-project .block-campaign.comment {
    margin-top: 60px;
    padding: 20px 15px 90px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .section-project.campaign-close .block-campaign.comment {
    padding: 20px 15px;
  }
  /* ------------------------------------------ */

  .section-project .block-campaign.comment > h3 {
    margin-left: -20px;
  }
  .section-project .block-campaign.comment > h3 img {
    max-width: 210px;
  }
  .section-project .block-campaign > h3 + .text-lead {
    font-size: 1.6rem;
  }
  .section-project .block-campaign > h3 ~ .text-hint {
    margin-top: 30px;
  }
  .section-project .block-campaign.comment .campaign-summary .text-catch img {
    max-width: 230px;
  }
  .section-project .block-campaign.comment .campaign-summary .summary-detail {
    background-color: #fff;
    border-radius: 14px;
    margin-top: 35px;
    padding: 15px 15px 25px;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product dd {
    margin-top: 15px;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product dd > p {
    line-height: 1.8;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product dd .img-example {
    display: block;
    margin-top: 0;
    margin-left: 2%;
    width: 50%;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product dd .img-example figure + figure {
    margin-top: 10px;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product + p {
    font-size: 1.5rem;
  }
  .section-project .block-campaign.comment .campaign-summary .catalog-product ~ .text-note {
    margin-top: 0;
  }
  .section-project .block-campaign.comment .campaign-summary .summary-detail .block-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
  }
  .section-project .block-campaign.comment .campaign-summary .summary-detail .illust {
    margin-right: 2%;
    width: 40%;
  }
  .section-project .block-campaign .campaign-application {
    margin-top: 60px;
  }
  .section-project .block-campaign .campaign-application h4 {
    font-size: 2.4rem;
  }
  .section-project .block-campaign .campaign-application .flow-list li {
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 15px;
  }
  .section-project .block-campaign .campaign-application .flow-list li:nth-of-type(n+2) {
    margin-top: 70px;
  }
  .section-project .block-campaign .campaign-application .flow-list li:nth-of-type(n+2):before {
    height: 29px;
    width: 66px;
    top: -47px;
  }
  .section-project .block-campaign.comment .button-link {
    margin-top: 70px;
    width: 200px;
  }
  .section-project .block-campaign.comment .button-link a {
    font-size: 1.6rem;
    line-height: 1.25;
    padding: 13px 36px 13px 24px;
    text-align: left;
  }
  .section-project .block-campaign.comment .button-link a:after {
    right: 12px;
  }
  .section-project .block-campaign.comment .block-comment {
    margin-top: 20px;
  }
  .section-project .block-campaign.comment .block-comment .text-lead {
    font-size: 1.6rem;
    margin-left: 0;
    margin-right: 0;
  }
  .section-project .block-campaign.comment .block-comment .comment-items {
    margin-top: 30px;
  }
  .section-project .block-campaign.comment .block-comment .comment-item {
    margin-top: 15px;
    width: calc(100% - 15px);
  }
  .section-project .block-campaign.comment .block-comment .comment-item.product {
    margin-top: 20px;
  }
  .section-project .block-campaign.comment .block-comment .comment-item .text-comment {
    border-width: 1.5px;
    border-radius: 15px;
    padding: 15px;
  }
  .section-project .block-campaign.comment .block-comment .comment-item .text-comment:before {
    height: 22px;
    right: -18px;
    width: 18px;
    top: 20px;
    transform: translateY(0);
  }
  .section-project .block-campaign.comment .block-comment .comment-item:nth-of-type(even) .text-comment:before {
    left: -18px;
  }
  .section-project .block-campaign.comment .block-comment .comment-item .tag-product {
    font-size: 1rem;
    height: 24px;
    min-width: inherit;
    top: -13px;
    right: -10px;
  }
  .section-project .block-campaign.comment .block-comment .comment-item .tag-product span {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    line-height: 1.14;
    height: 100%;
  }
  .section-project .block-campaign.comment .block-comment .comment-item .text-comment .tx {
    font-size: 1.4rem;
    line-height: 1.4 !important;
  }
  .section-project .block-campaign.comment .block-comment .more-view {
    font-size: 1.4rem;
    margin-top: 25px;
    padding-bottom: 20px;
  }
  .section-project .block-campaign.comment .block-comment .more-view:after {
    height: 16px;
    width: 26px;
  }
  .section-project .block-campaign.quiz {
    padding: 35px 15px 70px;
  }
  .section-project .block-campaign.quiz > h3 {
    margin-left: 0;
  }
  .section-project .block-campaign.quiz > h3 img {
    max-width: 191px;
  }
  .section-project .block-campaign.quiz .text-close {
    font-size: 1.6rem;
    margin: 25px -15px 0;
    padding: 15px;
  }
  .section-project .block-campaign.quiz .campaign-summary {
    margin-top: 20px;
    max-width: inherit;
  }
  .section-project .block-campaign .campaign-summary .text-catch {
    margin-top: 40px;
  }
  .section-project .block-campaign .campaign-summary .text-note {
    font-size: 1rem;
    margin-top: 15px;
  }
  .section-project .block-campaign.quiz .box-quiz {
    border-radius: 20px;
    height: 480px;
    margin-top: 50px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .box-head {
    font-size: 1.6rem;
    height: 138px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .box-inner {
    height: 340px;
    padding: 15px;
  }
  .section-project .block-campaign.quiz .box-quiz-content.start .button-start {
    font-size: 1.6rem;
    line-height: 1.2;
    padding: 10px;
    width: 150px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .text-question {
    display: block;
    height: 100%;
    padding-top: 10px;
    width: calc(100% - 20px);
  }
  .section-project .block-campaign.quiz .box-quiz-content .text-question .number {
    display: block;
    margin-right: 0;
    width: 54px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .text-question .text {
    line-height: 1.4;
    width: auto;
    margin-top: 15px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice {
    width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice li:nth-of-type(n+2) {
    margin-top: 10px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice > li .button {
    font-size: 1.6rem;
    height: 45px;
  }
  .section-project .block-campaign.quiz .box-quiz-content .list-choice > li .button span {
    line-height: 1.2;
  }
  .section-project .block-campaign.quiz .box-quiz-content .text-hint {
    font-size: 1.3rem;
    margin-top: 15px;
    max-width: inherit;
    text-align: center;
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    width: calc(100% - 20px);
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .next {
    margin-left: auto;
  }
  .section-project .block-campaign.quiz .box-quiz-content .button-pager .result {
    bottom: 3px;
    right: 0;
  }
}


.quiz-result {
  background-color: #F5BE00;
  border-radius: 27px;
  height: 100%;
  padding: 25px 10px;
}
.quiz-result-inner {
  scrollbar-width: thin;
  scrollbar-color: #F57300 #fff;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 30px;
}
.quiz-result-inner::-webkit-scrollbar{
  width: 4px;
}
.quiz-result-inner::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 50px;
}
.quiz-result-inner::-webkit-scrollbar-thumb {
  background: #F57300;
  border-radius: 50px;
}

.quiz-result .button-share > * {
  background-color: #EB4600;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 12px 45px 12px 20px;
  position: relative;
  text-decoration: none !important;
  text-align: center;
  width: 100%;
}
.quiz-result .button-share > *:after {
  background-image: url(/packages/theme_hulft30th/themes/hulft30th/assets/images/top/icon_arrow_r.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  content: "";
  height: 23px;
  position: absolute;
  width: 20px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.quiz-result .box-head {
  background-color: #fff;
  border-radius: 18px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 24px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.quiz-result .box-head .text-number {
  background-color: #F5A000;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 10px;
  width: 105px;
}
.quiz-result .box-head .text-number > span {
  display: table;
  margin: 0 auto;
  font-size: 4.5rem;
  line-height: 1.2;
}
.quiz-result .box-head .text-number .result {
  display: inline-block;
  vertical-align: baseline;
}
.quiz-result .box-head .text-score {
  color: #F5A000;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 20px;
  width: 170px;
}
/* キャンペーン終了
--------------------------------------------- */
.quiz-result.campaign-close .box-head .text-score {
  width: calc(100% - 125px);
}

/* --------------------------------------------- */
.quiz-result .box-head .text-score > span {
  display: table;
  font-size: 4rem;
  margin: 0 auto;
}
.quiz-result .box-head .text-score .result {
  font-size: 7rem;
  display: inline-block;
  vertical-align: baseline;
}
.quiz-result .box-head .button-share {
  max-width: calc(100% - 295px);
  width: 190px;
}
.quiz-result .box-head .button-share > * {
  text-align: left;
}
.quiz-result .box-commentary {
  margin-top: 30px;
}
.quiz-result .box-commentary > h2 {
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  text-align: center;
}
.quiz-result .box-commentary .commentary-item {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 25px 20px 20px;
}
.quiz-result .box-commentary .commentary-item:nth-of-type(odd) {
  background-color: #F5A000;
}
.quiz-result .box-commentary .commentary-item .icon-result {
  width: 70px;
}
.quiz-result .box-commentary .commentary-item .icon-result .incorrect,
.quiz-result .box-commentary .commentary-item.result-wrong .icon-result .correct {
  display: none;
}
.quiz-result .box-commentary .commentary-item.result-wrong .icon-result .incorrect {
  display: block;
}
.quiz-result .box-commentary .commentary-item .item-detail {
  margin-left: 25px;
  width: calc(100% - 95px);
}
.quiz-result .box-commentary .commentary-item .text-question {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  padding-left: 48px;
  position: relative;
}
.quiz-result .box-commentary .commentary-item .text-question .number {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.quiz-result .box-commentary .commentary-item .text-question .number img {
  max-height: 21px;
}
.quiz-result .box-commentary .commentary-item .text-answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.quiz-result .box-commentary .commentary-item .wrong-answer {
  background-color: #FF0000;
  color: #fff;
  display: none;
  font-size: 1.4rem;
  margin-bottom: 10px;
  padding: 4px 15px;
  text-align: center;
}
.quiz-result .box-commentary .commentary-item.result-wrong .wrong-answer {
  display: block;
}
.quiz-result .box-commentary .commentary-item .wrong-answer span {
  display: inline-block;
  vertical-align: baseline;
  font-weight: 700;
}
.quiz-result .box-commentary .commentary-item .correct-answer {
  border-bottom: 2px dotted #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-left: auto;
  padding-bottom: 2px;
  text-align: right;
}
.quiz-result .box-commentary .commentary-item .correct-answer .text-alphabet {
  display: inline-block;
  font-size: 2.2rem;
  margin-right: 5px;
  vertical-align: baseline;
}
.quiz-result .box-commentary .commentary-item .text-description {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 15px;
}
.quiz-result .box-commentary + .button-share {
  margin: 45px auto 0;
  width: 330px;
}
.quiz-result .box-commentary + .button-share > * {
  font-size: 1.8rem;
  padding: 18px 40px 18px 30px;
}
/* PC */
@media only screen and (min-width: 768px) {
  .quiz-result .box-commentary .commentary-item.q1 .text-description figure {
    width: 240px;
  }
  .quiz-result .box-commentary .commentary-item.q1 .text-description p {
    max-width: calc(100% - 255px);
  }
  .quiz-result .box-commentary .commentary-item.q2 .text-description figure {
    width: 150px;
  }
  .quiz-result .box-commentary .commentary-item.q2 .text-description p {
    max-width: calc(100% - 165px);
  }
  .quiz-result .box-commentary .commentary-item.q3 .text-description figure {
    width: 174px;
  }
  .quiz-result .box-commentary .commentary-item.q3 .text-description p {
    max-width: calc(100% - 189px);
  }
  .quiz-result .box-commentary .commentary-item.q4 .text-description figure {
    width: 183px;
  }
  .quiz-result .box-commentary .commentary-item.q4 .text-description p {
    max-width: calc(100% - 198px);
  }
  .quiz-result .box-commentary .commentary-item.q5 .text-description {
    flex-direction: inherit;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
}
/* SP */
@media only screen and (max-width: 767px) {
  .quiz-result {
    height: 90%;
    padding: 20px 5px;
  }
  .quiz-result-inner {
    padding-bottom: 20px;
  }
  .quiz-result .box-head {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 65px;
    padding: 12px;
    position: relative;
  }
  .quiz-result .box-head .text-number {
    border-radius: 10px;
    font-size: 1.2rem;
    padding: 10px;
    width: 80px;
  }
  .quiz-result .box-head .text-number > span {
    font-size: 3.4rem;
  }
  .quiz-result .box-head .text-score {
    font-size: 1.1rem;
    margin-left: 15px;
    width: calc(100% - 95px);
  }
  .quiz-result .box-head .text-score > span {
    font-size: 3rem;
  }
  .quiz-result .box-head .text-score .result {
    font-size: 5.5rem;
  }
  .quiz-result .box-head .button-share {
    margin: 0 auto;
    max-width: inherit;
    position: absolute;
    bottom: -65px;
    left: 0;
    right: 0;
    width: 140px;
  }
  .quiz-result .box-head .button-share > * {
    font-size: 1rem;
    padding: 10px 30px 10px 20px;
  }
  .quiz-result .button-share > *:after {
    height: 17px;
    right: 10px;
    width: 15px;
  }
  .quiz-result .box-commentary {
    margin-top: 100px;
  }
  .quiz-result .box-commentary > h2 {
    font-size: 2.7rem;
    margin-bottom: 10px;
  }
  .quiz-result .box-commentary .commentary-item {
    display: block;
    padding: 20px;
  }
  .quiz-result .box-commentary .commentary-item .icon-result {
    width: 50px;
    margin: 0 auto;
  }
  .quiz-result .box-commentary .commentary-item .item-detail {
    margin-left: 0;
    width: auto;
    margin-top: 15px;
  }
  .quiz-result .box-commentary .commentary-item .text-question {
    font-size: 1.6rem;
  }
  .quiz-result .box-commentary .commentary-item .text-question .number {
    top: 2px;
    transform: translateY(0%);
  }
  .quiz-result .box-commentary .commentary-item .text-question .number img {
    max-height: 19px;
  }
  .quiz-result .box-commentary .commentary-item .text-answer {
    margin-top: 15px;
  }
  .quiz-result .box-commentary .commentary-item .wrong-answer {
    margin: 0 0 15px;
    padding: 4px 10px;
    width: 100%;
  }
  .quiz-result .box-commentary .commentary-item .correct-answer {
    font-size: 1.8rem;
  }
  .quiz-result .box-commentary .commentary-item .correct-answer .text-alphabet {
    font-size: 2rem;
  }
  .quiz-result .box-commentary .commentary-item .text-description {
    display: block;
  }
  .quiz-result .box-commentary .commentary-item .text-description p {
    max-width: inherit;
    margin-top: 10px;
  }
  .quiz-result .box-commentary + .button-share {
    margin-top: 40px;
    width: 220px;
  }
  .quiz-result .box-commentary + .button-share > * {
    font-size: 1.2rem;
    padding: 15px 30px 15px 20px;
  }
  .quiz-result .button-popup-close {
    bottom: 0 !important;
  }
}


.section-project .block-terms {
  margin-top: 150px;
}
/* キャンペーン終了
--------------------------------------------- */
.section-project.campaign-close .block-terms {
  margin-top: 190px;
}
/* --------------------------------------------- */

.section-project .block-terms .accordion-head {
  border: 2px solid #ADADAD;
  color: #ADADAD;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 65px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  width: 375px;
}
.section-project .block-terms .accordion-head:before,
.section-project .block-terms .accordion-head:after {
  background-color: #ADADAD;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.section-project .block-terms .accordion-head:before {
  right: 21px;
  height: 3px;
  width: 13px;
}
.section-project .block-terms .accordion-head:after {
  right: 26px;
  height: 13px;
  width: 3px;
}
.section-project .block-terms .accordion-head.is-open:after {
  height: 0;
}
.section-project .block-terms .accordion-content {
  border: 1px solid #ADADAD;
  scrollbar-width: thin;
  scrollbar-color: #F57300 #F5BE00;
  display: none;
  margin-top: 30px;
  max-height: 400px;
  overflow-y: auto;
}
.section-project .block-terms .accordion-content::-webkit-scrollbar{
  width: 4px;
}
.section-project .block-terms .accordion-content::-webkit-scrollbar-track {
  background: #F5BE00;
  border-radius: 50px;
}
.section-project .block-terms .accordion-content::-webkit-scrollbar-thumb {
  background: #F57300;
  border-radius: 50px;
}
.section-project .block-terms .accordion-content-inner {
  padding: 30px;
}
.section-project .block-terms .accordion-content h2 {
  font-size: 1.8rem;
  font-weight: 700;
}
.section-project .block-terms .accordion-content * + h2 {
  margin-top: 25px;
}
.section-project .block-terms .accordion-content h3 {
  font-weight: 700;
  margin-top: 15px;
}
.section-project .block-terms .accordion-content p + p {
  margin-top: 1em;
}
.section-project .block-terms .accordion-content ol li {
  padding-left: 2em;
  text-indent: -2em;
}
.section-project .ribbon12 {
  top: -50px;
  left: calc(50vw + 187px);
  width: 1151px;
  z-index: -1;
}
.section-project .ribbon13 {
  top: 1255px;
  right: calc(50vw - 310px);
  width: 880px;
  z-index: 1;
}
.section-project .ribbon14 {
  top: 3170px;
  left: calc(50vw - 22px);
  width: 933px;
  z-index: 1;
}
/* キャンペーン終了
--------------------------------------------- */
.section-project.campaign-close .ribbon13 {
  top: inherit;
  bottom: -230px;
  right: calc(50% - 200px);
  width: 880px;
  z-index: 1;
}
.section-project.campaign-close .ribbon14 {
  top: inherit;
  bottom: -140px;
  left: 50%;
  width: 933px;
  z-index: 1;
}
/* --------------------------------------------- */


/* PC */
@media only screen and (min-width: 901px) {
  .section-project .block-campaign.quiz .box-quiz-content.start .button:hover,
  .section-project .block-terms .accordion-head:hover {
    opacity: 0.7;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-project .ribbon12 {
    width: 1035px;
  }
  .section-project .ribbon13 {
    top: 1110px;
    right: calc(50vw - 290px);
    width: 792px;
  }
  .section-project .ribbon14 {
    top: 2855px;
    left: calc(50vw + 80px);
    width: 840px;
  }
  /* キャンペーン終了
  --------------------------------------------- */
  .section-project.campaign-close .ribbon13 {
    top: inherit;
    /*top: 1110px;
    right: calc(50vw - 290px);*/
    bottom: -180px;
    width: 792px;
  }
  .section-project.campaign-close .ribbon14 {
    top: inherit;
    /*top: 2855px;
    left: calc(50vw + 80px);*/
    bottom: -120px;
    width: 840px;
  }
  /* --------------------------------------------- */

}
/* SP */
@media only screen and (max-width: 767px) {
  .section-project .block-terms .accordion-head {
    margin: 0 10px;
    width: auto;
  }

  .section-project .block-terms .accordion-content {
    margin-top: 15px;
  }
  .section-project .block-terms .accordion-content-inner {
    padding: 15px;
  }
  .section-project .block-terms .accordion-content h2 {
    font-size: 1.6rem;
  }
  .section-project .block-terms .accordion-content * + h2 {
    margin-top: 20px;
  }
  .section-project .block-terms .accordion-content h3 {
    margin-top: 10px;
  }
  .section-project .ribbon12,
  .section-project .ribbon13,
  .section-project .ribbon14 {
    display: none;
  }
}




/* section-download
------------------------------------------------------------ */
.section-download {
  background-color: #F57300;
}
.section-download .section-inner {
  padding-top: 75px;
  padding-bottom: 135px;
}
.section-download .section-title img {
  max-width: 430px;
}
.section-download .text-lead {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 30px;
  line-height: 1.9;
  text-align: center;
}
.section-download .download-content-item .button-link {
  margin: 60px auto 0;
  width: 215px;
}
.section-download .download-content-item .button-link a {
  background-color: #F5BE00;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 46px;
  text-align: center;
}
.section-download .link-share {
  margin-top: 140px;
}
.section-download .link-share > dt {
  color: #fff;
}
/* PC */
@media only screen and (min-width: 768px) {
  .section-download .download-content {
    margin: 50px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 750px;
  }
  .section-download .download-content-item {
    width: 48.38%;
  }
  .section-download .link-share {
    margin-top: 100px;
  }
}
/* TAB */
@media only screen and (max-width: 900px) {
  .section-download .section-inner {
    padding-bottom: 120px;
  }
  .section-download .section-title img {
    max-width: 390px;
  }
  .section-download .text-lead {
    font-size: 1.9rem;
    margin-top: 20px;
  }
  .section-download .download-content {
    margin-top: 35px;
  }
  .section-download .download-content-item .button-link {
    margin-top: 40px;
    width: 190px;
  }
  .section-download .download-content-item .button-link a {
    font-size: 1.6rem;
    line-height: 42px;
  }
}
/* SP */
@media only screen and (max-width: 767px) {
  .section-download .section-inner {
    padding: 90px 20px 150px;
  }
  .section-download .section-title img {
    max-width: 273px;
  }
  .section-download .text-lead {
    font-size: 1.6rem;
    margin-top: 40px;
  }
  .section-download .download-content {
    margin-top: 50px;
  }
  .section-download .download-content-item:nth-of-type(n+2) {
    margin-top: 60px;
  }
  .section-download .download-content-item .button-link {
    width: 165px;
  }
  .section-download .download-content-item .button-link a {
    font-size: 1.3rem;
    line-height: 36px;
  }
  .section-download .link-share {
    margin-top: 150px;
  }
}

.cboxIframe {
  border-radius: 27px;
  overflow: auto;
}
/* SP */
@media only screen and (max-width: 450px) {
  .cboxIframe {
    border-radius: 37px;
  }
}
.box-popup {
  display: none;
}
.button-popup-close,
.button-popup-close-iframe {
  background-color: #F5A000;
  border-radius: 50px;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  position: absolute;
  line-height: 33px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 95px;
  text-align: center;
  bottom: -60px;
}