@charset "UTF-8";
@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role=list], ol[role=list] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

img, picture {
  max-width: 100%;
  display: block;
}

/*----------------------------------
カラー
----------------------------------*/
/*----------------------------------
初期化
----------------------------------*/
* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, ul, li, ol {
  margin: 0;
  padding: 0;
}

ul, li, ol {
  list-style: none;
}

/*----------------------------------
スムーズスクロールとフォント指定
----------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 8.7rem;
}
@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 6.2rem;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  color: #865e2c;
}
body * {
  font-feature-settings: "palt";
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}

/*----------------------------------
リンク
----------------------------------*/
a {
  text-decoration: none;
  transition: all 0.3s ease-in;
}

/*----------------------------------
画像
----------------------------------*/
img {
  vertical-align: bottom;
  display: block;
}

/*----------------------------------
ヘッダーエリアの調整
----------------------------------*/
.khcl__header .khcl__nav__item__cat a,
.khcl__header .khcl__nav__item {
  color: #5a8c19;
}
.khcl__header .khcl__nav__item__cat:before {
  background: url("../images/common/icon_hop.svg") no-repeat top center/contain !important;
  -webkit-mask-image: unset !important;
          mask-image: unset !important;
}
@media screen and (min-width: 768px) {
  .khcl__header .khcl__nav__item__cat,
  .khcl__header .khcl__nav__item__cat a {
    font-size: min(18px, 1.4vw);
  }
}
.khcl__header .khcl__nav__item__cat:hover,
.khcl__header .khcl__nav__item__cat a:hover {
  color: #e2a025;
}
.khcl__header .khcl__nav__sub__item__link:before {
  color: #e2a025;
}
@media screen and (min-width: 768px) {
  .khcl__header .khcl__nav__sub {
    margin-left: unset !important;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

/*----------------------------------
SNSエリアの調整
----------------------------------*/
@media screen and (max-width: 767px) {
  .mod-box-share-sns {
    padding-top: 18vw;
    margin-bottom: 2vw !important;
  }
  .mod-box-share-sns .mod-box-share-sns__inner {
    flex-direction: column;
  }
  .mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__list {
    gap: 3vw;
  }
  .mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__text {
    font-size: 4vw;
    margin-bottom: 0;
  }
  .mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__item {
    width: 13vw !important;
    height: 13vw !important;
  }
}

/*----------------------------------
ヘッダー・フッターエリアの調整
----------------------------------*/
@media screen and (min-width: 768px) {
  .khcl__footer {
    background: url("../images/common/bg_khcl_footer_pc.png") repeat-x top center/200.4rem auto;
  }
}
@media screen and (max-width: 767px) {
  .khcl__footer {
    background: url("../images/common/bg_khcl_footer_sp.png") repeat-x top center/121vw auto;
  }
  .khcl__footer .khcl__nav__item._story, .khcl__footer .khcl__nav__item._lang {
    width: 100%;
  }
}
.khcl__footer .khcl__nav {
  color: #5a8c19;
  background: unset;
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav .khcl__nav__list {
    gap: 13vw !important;
    padding-bottom: 46vw;
  }
}
@media screen and (min-width: 768px) {
  .khcl__footer .khcl__nav {
    padding: min(116px, 8.7vw) 0 0;
  }
  .khcl__footer .khcl__nav .khcl__nav__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav .khcl__nav__list {
    padding: 16vw 6vw 46vw;
  }
}
.khcl__footer .khcl__nav .khcl__nav__sub__item__label {
  padding: 0;
  background: unset;
  font-weight: 700;
}
.khcl__footer .khcl__nav ._development {
  grid-area: 2/1/1/1;
}
.khcl__footer .khcl__nav a {
  color: #5a8c19;
  text-decoration: none;
  font-weight: 700;
  position: relative;
}
.khcl__footer .khcl__nav a:after {
  content: "";
  display: block;
  border-top: 2px solid #5a8c19;
  border-right: 2px solid #5a8c19;
  transform: translate(0, -50%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: -20px;
}
@media screen and (min-width: 768px) {
  .khcl__footer .khcl__nav a:after {
    width: min(12px, 0.9vw);
    height: min(12px, 0.9vw);
  }
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav a:after {
    width: 3vw;
    height: 3vw;
    right: 2vw;
  }
}
@media screen and (min-width: 768px) {
  .khcl__footer .khcl__nav a:hover {
    text-decoration: underline;
  }
}
.khcl__footer .khcl__nav__sub__list__title {
  background-image: radial-gradient(#5a8c19 1px, transparent 1px);
}
@media screen and (min-width: 768px) {
  .khcl__footer .khcl__nav__sub__list__title {
    font-size: min(18px, 1.4vw);
  }
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav__sub__list__title {
    height: 13vw;
    margin-bottom: 0 !important;
  }
  .khcl__footer .khcl__nav__sub__list__title + .khcl__nav__sub__list, .khcl__footer .khcl__nav__sub__list__title + .khcl__nav__sub__list__wrap {
    margin-top: 4vw !important;
  }
  .khcl__footer .khcl__nav__sub__list__title a {
    font-weight: 500;
    font-size: 4.5vw;
  }
}
.khcl__footer .khcl__nav__sub__list__title a {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .khcl__footer .khcl__nav__sub__list__title a {
    font-size: min(18px, 1.4vw);
  }
}
.khcl__footer .khcl__nav__sub__list__title a:after {
  right: 0;
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav__sub__list__title a:after {
    right: 2vw;
  }
}
.khcl__footer .khcl__nav__item {
  border: none;
}
.khcl__footer .khcl__nav__item._left .khcl__nav__sub:not(:last-of-type), .khcl__footer .khcl__nav__item._worries .khcl__nav__sub:not(:last-of-type) {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav__item._left .khcl__nav__sub:not(:last-of-type), .khcl__footer .khcl__nav__item._worries .khcl__nav__sub:not(:last-of-type) {
    margin-bottom: 12vw;
  }
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav__item._left {
    width: 100%;
  }
}
.khcl__footer .khcl__nav__sub {
  border-top: 1px solid #5a8c19;
}
.khcl__footer .khcl__nav__sub__item__label,
.khcl__footer .khcl__nav__sub__item__link {
  align-items: unset;
  font-size: min(16px, 1.2vw);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__nav__sub__item__label,
  .khcl__footer .khcl__nav__sub__item__link {
    font-size: 4.5vw;
  }
}
.khcl__footer .khcl__nav__sub__item__link:before {
  color: #e2a025;
  padding-top: min(2px, 0.15vw);
}
.khcl__footer .khcl__footer__contact {
  color: #000;
}
.khcl__footer .khcl__footer__contact__title,
.khcl__footer .khcl__footer__contact__tel {
  border-width: 2px;
}
.khcl__footer .khcl__footer__contact {
  background-color: #eef0d2;
}
.khcl__footer .khcl__footer__contact__tel__num {
  letter-spacing: 3px;
}
.khcl__footer .khcl__footer__contact__inner {
  padding: 4rem 3rem;
}
@media screen and (max-width: 767px) {
  .khcl__footer .khcl__footer__contact__inner {
    padding: 7vw 6vw;
  }
}
.khcl__footer .khcl__nav__item._lang {
  grid-area: unset !important;
}
.khcl__footer .khcl__nav__item._worries .khcl__nav__sub__list__wrap {
  display: unset !important;
}

@media screen and (min-width: 768px) {
  .khcl__header .khcl__nav__sub__list__title {
    display: none;
  }
  .khcl__header .khcl__nav__sub:before,
  .khcl__header .khcl__nav__sub__inner {
    background-color: #eef0d2 !important;
  }
  .khcl__header .khcl__nav__item._worries .khcl__nav__sub {
    width: 38rem;
  }
  .khcl__header .khcl__nav__sub__inner {
    border-radius: 16px !important;
    padding: 20px;
    width: 38rem;
  }
  .khcl__header .khcl__nav__sub__list li:not(:last-of-type) {
    border-bottom: 0.23rem dotted #5a8c19;
  }
  .khcl__header .khcl__nav__sub__list li:hover {
    text-decoration: none !important;
  }
  .khcl__header .khcl__nav__sub__list li:hover a {
    text-decoration: none !important;
  }
  .khcl__header .khcl__nav__sub__list li:hover a span {
    text-decoration: none !important;
  }
  .khcl__header .khcl__nav__sub__list li a {
    font-size: 16px !important;
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    line-height: 40px !important;
    color: #5a8c19 !important;
    position: relative;
  }
  .khcl__header .khcl__nav__sub__list li a:after {
    content: "";
    display: block;
    border-top: 2px solid #5a8c19;
    border-right: 2px solid #5a8c19;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0.8rem;
    width: 1.2rem;
    height: 1.2rem;
  }
  .khcl__header .khcl__nav__sub__list li a:hover {
    background-color: #fff;
    text-decoration: none !important;
  }
  .khcl__header .khcl__nav__sub__item__label {
    background: unset !important;
    padding: 0 !important;
    font-size: 1.6rem !important;
    line-height: 4rem !important;
  }
  .khcl__header .khcl__nav__sub__list {
    gap: unset !important;
  }
  .khcl__header .khcl__nav__sub__item._label {
    margin: unset !important;
  }
  .khcl__header .khcl__nav__item._worries .khcl__nav__sub__list__wrap {
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: unset !important;
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .khcl__nav__item._worries .khcl__nav__sub__list._brain {
    margin-top: 6vw !important;
  }
  .khcl__header .khcl__nav__icon .bar, .khcl__header .khcl__nav__icon .bar:before, .khcl__header .khcl__nav__icon .bar:after {
    background-color: #f10000;
  }
  .khcl__nav__icon.open .bar:before, .khcl__nav__icon.open .bar:after {
    background-color: #5a8c19;
  }
  .khcl__nav__item._worries .khcl__nav__sub__list__wrap {
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: unset;
    display: block;
  }
  .khcl__header .khcl__nav__wrap {
    background: url("../images/common/bg_sp_menu.png") repeat top center/cover;
  }
  .khcl__header .khcl__nav__item {
    border: none;
  }
  .khcl__header .khcl__nav__sub__item__link {
    position: relative;
    padding-left: 4vw;
  }
  .khcl__header .khcl__nav__sub__item__link:before {
    top: 1vw;
    position: absolute;
    left: 0;
  }
  .khcl__nav__sub__item__link {
    font-size: 4.5vw;
    color: #5a8c19;
    line-height: 1.3;
    position: relative;
  }
  .khcl__nav__sub__item__link:after {
    content: "";
    display: block;
    border-top: 2px solid #5a8c19;
    border-right: 2px solid #5a8c19;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: -20px;
    width: 3vw;
    height: 3vw;
    right: 2vw;
  }
  .khcl__nav__sub__item__label {
    background: unset;
    color: #5a8c19;
    font-size: 4.5vw;
  }
  ._thafirst {
    margin-bottom: 12vw !important;
  }
  .khcl__nav__sub__list__title {
    height: unset;
    border-top: 0.4vw solid #5a8c19;
    background-image: radial-gradient(#5a8c19 1px, transparent 1px);
    position: relative;
    width: 100%;
    display: block;
  }
  .khcl__nav__sub__list__title:after {
    content: "";
    display: block;
    border-top: 2px solid #5a8c19;
    border-right: 2px solid #5a8c19;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: -20px;
    width: 3vw;
    height: 3vw;
    right: 2vw;
  }
  .khcl__nav__sub__list__title a {
    color: #5a8c19;
    text-decoration: none;
    font-size: 4.5vw;
    display: block;
    display: block;
    line-height: 13vw;
  }
}
.str-main {
  overflow-y: hidden;
}

/*----------------------------------
共通
----------------------------------*/
.img-center {
  margin: 0 auto;
}

.dflex {
  display: flex;
}

.dflex-rowreverse {
  flex-direction: row-reverse;
}

.dblock {
  display: block;
}

.dgrid {
  display: grid;
}

.dnone {
  display: none;
}

.txt-italic {
  font-style: italic;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-narrow {
  font-weight: 100;
}

.txt-bold {
  font-weight: 700;
}

.txt-italic {
  font-style: italic;
}

.txt-white {
  color: #fff;
}

.txt-black {
  color: #000;
}

.txt-lightgreen {
  color: #eef0d2;
}

.txt-green {
  color: #96c800;
}

.txt-darkgreen {
  color: #5a8c19;
}

.txt-lightblue {
  color: #50bec8;
}

.txt-darkorange {
  color: #865e2c;
}

.txt-zenmarugothic {
  font-family: "Zen Maru Gothic", serif;
}

.txt-ptsans {
  font-family: "PT Sans", sans-serif;
  font-optical-sizing: auto;
}

.txt-outfit {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
}

.txt-open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
}

.bg-white {
  background-color: #fff;
}

.btn a {
  display: block;
  text-align: center;
  text-decoration: none;
}

.btn-darkorange-b a {
  background-color: #fff;
  border: 0.1rem solid #865e2c;
  color: #865e2c;
}
@media screen and (max-width: 767px) {
  .btn-darkorange-b a {
    border: 0.3rem solid #865e2c;
  }
}

.inner {
  width: 100%;
  max-width: 140rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .inner {
    padding: 0 6vw;
  }
}

.mod-box-share-sns {
  margin-bottom: 7rem;
  color: #000;
}
.mod-box-share-sns .mod-box-share-sns__inner {
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}
.mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__list {
  margin: 0;
}
.mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__item {
  width: 4.4rem;
  height: 4.4rem;
}
.mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__item img {
  width: 100%;
  height: unset;
}
.mod-box-share-sns .mod-box-share-sns__inner .mod-box-share-sns__item:not(:first-of-type) {
  margin-left: 1.6rem;
}

.mod-box-share-sns.pc-only .mod-box-share-sns__item--line {
  display: block;
}

.box {
  max-width: 98rem;
  margin: 0 auto;
}
.box .box_ttl {
  font-size: 2.4rem;
  margin-bottom: 4rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .box .box_ttl {
    font-size: 7vw;
    margin-bottom: 6vw;
    color: #865e2c;
    font-weight: 500;
    line-height: 1.3;
  }
  .box .box_ttl .pc-kakko {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .box .box_ttl:before, .box .box_ttl:after {
    content: "";
    display: block;
    width: 33.5%;
    height: 0.6rem;
    border-top: 0.1rem solid #5a8c19;
    border-bottom: 0.1rem solid #5a8c19;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .box_ttl:before {
    left: 0;
  }
  .box .box_ttl:after {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .box .box_ttl.ksphuge {
    margin-bottom: 8vw;
  }
  .box .box_ttl.ksphuge:before, .box .box_ttl.ksphuge:after {
    content: "";
    display: block;
    width: 8vw !important;
    height: 20vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .box_ttl.ksphuge:before {
    background: url("../images/common/k_sp_left_huge.svg") no-repeat left center/auto 100%;
    left: 0;
  }
  .box .box_ttl.ksphuge:after {
    background: url("../images/common/k_sp_right_huge.svg") no-repeat left center/auto 100%;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .box .box_ttl.kspsmall {
    line-height: 1;
    margin-bottom: 12vw;
  }
  .box .box_ttl.kspsmall:before, .box .box_ttl.kspsmall:after {
    content: "";
    display: block;
    width: 8vw !important;
    height: 16vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .box .box_ttl.kspsmall:before {
    background: url("../images/common/k_sp_left_small.svg") no-repeat left center/auto 100%;
    left: 0;
  }
  .box .box_ttl.kspsmall:after {
    background: url("../images/common/k_sp_right_small.svg") no-repeat left center/auto 100%;
    right: 0;
  }
}
.box .txt {
  font-size: 1.8rem;
  line-height: 2;
}
.box:not(:first-of-type) {
  margin-top: 8rem;
}
.box:first-of-type .box_ttl:before, .box:first-of-type .box_ttl:after {
  width: 30.5%;
}
.box:last-of-type .box_ttl:before, .box:last-of-type .box_ttl:after {
  width: 33%;
}

.wave-upper {
  height: 6.2rem;
  background: url("../images/common/bg_wave_upper_pc.png") repeat-x top center/auto 6.2rem;
}
@media screen and (max-width: 767px) {
  .wave-upper {
    background: url("../images/common/bg_wave_upper_sp.png") repeat-x top center/100% auto;
  }
}

.wave-bottom {
  height: 6.5rem;
  background: url("../images/common/bg_wave_bottom_pc.png") repeat-x bottom center/auto 6.5rem;
}
@media screen and (max-width: 767px) {
  .wave-bottom {
    background: url("../images/common/bg_wave_bottom_sp.png") repeat-x bottom center/100% auto;
  }
}

.cardwrap {
  justify-content: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .cardwrap {
    flex-direction: column;
    gap: 4vw;
  }
}

.card {
  width: 30.6%;
  position: relative;
  box-shadow: 1rem 1rem 1.6rem rgba(0, 0, 0, 0.1);
  border-radius: 2.4rem;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .card {
    display: flex;
    width: 100%;
    border-radius: 5vw;
    box-shadow: unset;
  }
}
.card .img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .card .img {
    width: 35%;
  }
}
.card > .bg-white {
  padding: 4rem 2.4rem;
  border-radius: 0 0 2.4rem 2.4rem;
}
@media screen and (max-width: 767px) {
  .card > .bg-white {
    padding: 2.5vw 5vw;
    width: 65%;
    border-radius: 5vw;
  }
}
.card > .bg-white > .txt {
  font-size: 2.2rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
}
@media screen and (max-width: 767px) {
  .card > .bg-white > .txt {
    font-size: 5.4vw !important;
    margin-bottom: 5vw !important;
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  .card .link {
    position: absolute;
    right: 4vw;
    bottom: 4.4vw;
  }
}
.card .link a {
  text-decoration: underline;
  position: relative;
}
@media screen and (max-width: 767px) {
  .card .link a {
    font-size: 4vw;
  }
}
.card .link a:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: 0.8rem solid transparent;
  border-left: 1.2rem solid #865e2c;
  margin-left: 0.2rem;
  vertical-align: -0.2rem;
}
@media screen and (max-width: 767px) {
  .card .link a:after {
    border: 2vw solid transparent;
    border-left: 3.5vw solid #865e2c;
  }
}
@media screen and (min-width: 768px) {
  .card .link a:hover {
    text-decoration: none;
  }
}
.card .icon {
  background-color: #e2a025;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  top: 14rem;
}
@media screen and (max-width: 767px) {
  .card .icon {
    width: 11vw;
    height: 11vw;
    top: -3.5vw;
    left: 1.4vw;
    font-size: 4.5vw;
  }
}

/*----------------------------------
下層ページ共通
----------------------------------*/
.l-page .kv {
  position: relative;
  margin-bottom: 7rem;
}
@media screen and (max-width: 767px) {
  .l-page .kv {
    margin-bottom: 7vw;
  }
}
.l-page .kv .txtarea {
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 7vw;
}
@media screen and (max-width: 767px) {
  .l-page .kv .txtarea {
    width: 100%;
    top: 9vw;
  }
}
.l-page .kv .txtarea .icon {
  width: 2.3vw;
}
@media screen and (max-width: 767px) {
  .l-page .kv .txtarea .icon {
    width: 7.5vw;
    margin-bottom: 1vw;
  }
}
.l-page .kv .sec_ttl {
  width: 100%;
}
.l-page .kv .sec_ttl span {
  width: 100%;
  display: block;
}
.l-page .kv .sec_ttl span.txt-zenmarugothic {
  font-size: 2.6vw;
}
@media screen and (max-width: 767px) {
  .l-page .kv .sec_ttl span.txt-zenmarugothic {
    font-size: 8vw;
  }
}
.l-page .kv .sec_ttl span.txt-ptsans {
  font-size: 1.3vw;
}
@media screen and (max-width: 767px) {
  .l-page .kv .sec_ttl span.txt-ptsans {
    font-size: 4vw;
  }
}
.l-page .kv + .inner > .lead {
  font-size: 1.8rem;
  line-height: 2;
  margin-bottom: 5.6rem;
}
@media screen and (max-width: 767px) {
  .l-page .kv + .inner > .lead {
    font-size: 4vw;
    margin-bottom: 12vw;
    text-align: left;
  }
}
.l-page .nav {
  width: 98rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5.5rem;
}
@media screen and (max-width: 767px) {
  .l-page .nav {
    margin-bottom: 13vw;
    padding: 0 6vw;
    max-width: unset;
    width: 100%;
  }
}
.l-page .nav .nav_list {
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem 0;
}
@media screen and (max-width: 767px) {
  .l-page .nav .nav_list {
    flex-direction: column;
    gap: unset;
  }
}
.l-page .nav .nav_list .nav_list_item {
  border-left: 0.2rem solid #ead7b0;
}
@media screen and (max-width: 767px) {
  .l-page .nav .nav_list .nav_list_item {
    border-left: unset;
    border-bottom: 0.7vw solid #ead7b0;
  }
}
.l-page .nav .nav_list .nav_list_item:nth-child(3), .l-page .nav .nav_list .nav_list_item:last-of-type {
  border-right: 0.2rem solid #ead7b0;
}
@media screen and (max-width: 767px) {
  .l-page .nav .nav_list .nav_list_item:nth-child(3), .l-page .nav .nav_list .nav_list_item:last-of-type {
    border-right: unset;
  }
}
.l-page .nav .nav_list .nav_list_item a {
  display: block;
  padding: 0 1.2rem;
  position: relative;
  color: #865e2c;
  text-decoration: none;
  height: 5.2rem;
  font-size: 2rem;
  font-weight: 700;
  padding-top: 0.4rem;
}
@media screen and (max-width: 767px) {
  .l-page .nav .nav_list .nav_list_item a {
    font-size: 5vw;
    padding: 6vw 0 2vw;
    height: unset;
  }
}
@media screen and (min-width: 768px) {
  .l-page .nav .nav_list .nav_list_item a:hover:after {
    bottom: -0.4rem;
  }
}
.l-page .nav .nav_list .nav_list_item a:after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  background: url("../images/columns/icon_arrow_nav.svg") no-repeat center center/contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .l-page .nav .nav_list .nav_list_item a:after {
    width: 4.5vw;
    height: 4.5vw;
    left: unset;
    right: 2vw;
    transform: unset;
    bottom: 3vw;
  }
}
.l-page .sec {
  margin-bottom: 6.5rem;
}
.l-page .sec .sec_ttl {
  font-size: 3.2rem;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .l-page .sec .sec_ttl {
    font-size: 6.5vw;
    margin-bottom: 4vw;
  }
}
.l-page .sec .sec_txt {
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.03rem;
}
@media screen and (max-width: 767px) {
  .l-page .sec .sec_txt {
    font-size: 4.2vw;
  }
}
.l-page .sec .sec_txt:not(:last-child) {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .l-page .sec .sec_txt:not(:last-child) {
    margin-bottom: 8vw;
  }
}
.l-page .wall {
  background: url("../images/common/bg_cream_wall.png") repeat top center/199.6rem auto;
  padding: 6rem 0;
}

/* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}

/* フェードインの遅延バリエーション */
.fade-in-delay-1 {
  transition-delay: 0.1s;
}

.fade-in-delay-2 {
  transition-delay: 0.2s;
}

.fade-in-delay-3 {
  transition-delay: 0.3s;
}

.fade-in-delay-4 {
  transition-delay: 0.4s;
}

.fade-in-delay-5 {
  transition-delay: 0.5s;
}

/* 左からフェードイン */
.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.fade-in-active {
  opacity: 1;
  transform: translateX(0);
}

/* 右からフェードイン */
.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.fade-in-active {
  opacity: 1;
  transform: translateX(0);
}

/* スケールフェードイン */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-scale.fade-in-active {
  opacity: 1;
  transform: scale(1);
}

.bannar {
  margin: 4rem auto 7rem;
}
@media screen and (min-width: 768px) {
  .bannar {
    width: 40rem;
  }
  .bannar a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px) {
  .bannar {
    margin: 12vw 8vw 16vw;
  }
}

/*----------------------------------
トップページ
----------------------------------*/
.l-top .btn-darkorange-b {
  width: 20rem;
}
@media screen and (max-width: 767px) {
  .l-top .btn-darkorange-b {
    width: 55vw;
    margin: 0 auto;
  }
}
.l-top .btn-darkorange-b a {
  line-height: 4.8rem;
  font-size: 1.6rem;
  border-radius: 2.5rem;
}
@media screen and (max-width: 767px) {
  .l-top .btn-darkorange-b a {
    line-height: 12vw;
    font-size: 4vw;
    border-radius: 6vw;
  }
}
.l-top .sec .sec_header.dflex {
  flex-direction: column-reverse;
}
.l-top .sec .sec_header .sec_ttl span {
  display: block;
}
.l-top .sec .sec_header .sec_ttl span.txt-zenmarugothic {
  font-size: 3.6rem;
  margin-bottom: 0.4rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec .sec_header .sec_ttl span.txt-zenmarugothic {
    font-size: 8vw;
    margin-bottom: 0.6vw;
  }
}
.l-top .sec .sec_header .sec_ttl span.txt-ptsans {
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec .sec_header .sec_ttl span.txt-ptsans {
    font-size: 4vw;
  }
}
.l-top .sec .sec_header .icon {
  width: 3.4rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-top .sec .sec_header .icon {
    width: 7.5vw;
  }
}
.l-top .sec .txt {
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .l-top .sec .txt {
    font-size: 4.2vw;
    line-height: 1.8;
  }
}
.l-top .sec .btn {
  margin-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec .btn {
    margin-top: 6vw;
  }
}
.l-top .kv {
  position: relative;
  height: 50.5vw;
}
@media screen and (max-width: 767px) {
  .l-top .kv {
    height: 110vw;
  }
}
.l-top .kv .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.l-top .kv .kv_ttl,
.l-top .kv .kv_copy {
  opacity: 0;
  animation-fill-mode: forwards;
}
.l-top .kv .kv_ttl img,
.l-top .kv .kv_copy img {
  width: 100%;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.l-top .kv .fade-in {
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}
.l-top .kv .kv_ttl {
  position: relative;
  z-index: 1;
  top: 3.2vw;
  width: 36.5vw;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
@media screen and (max-width: 767px) {
  .l-top .kv .kv_ttl {
    width: 74vw;
    top: 2.5vw;
    left: 3vw;
    transform: unset;
  }
}
.l-top .kv .kv_copy {
  position: absolute;
  z-index: 1;
  top: 17.8vw;
  left: 50%;
  transform: translateX(-50%);
  width: 44vw;
  animation-delay: 1s;
}
@media screen and (max-width: 767px) {
  .l-top .kv .kv_copy {
    left: 3vw;
    transform: unset;
    top: 38vw;
    width: 68vw;
  }
}
.l-top .sec-feature {
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-feature {
    padding-bottom: 14vw;
  }
}
.l-top .sec-feature .dflex-rowreverse {
  justify-content: center;
  gap: 8rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-feature .dflex-rowreverse {
    flex-direction: column-reverse;
    gap: 6vw;
    margin-top: 8vw;
  }
}
.l-top .sec-feature .img {
  width: 44.4rem;
  position: relative;
  top: -2.4rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-feature .img {
    width: 70vw;
    margin: 0 auto;
    top: 0;
  }
}
.l-top .sec-feature .contents {
  width: 39rem;
  padding-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-feature .contents {
    width: 100%;
    padding-top: 0;
  }
}
.l-top .sec-results {
  background: url("../images/top/bg_results_pc.png") repeat-x top center/200rem auto;
  padding-bottom: 12rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-results {
    background: url("../images/top/bg_results_sp.png") repeat-x top center/132vw auto;
    padding-bottom: 34vw;
  }
}
.l-top .sec-results .sec_header {
  padding-top: 7vw;
  margin-bottom: 3.2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-results .sec_header {
    padding-top: 9vw;
    margin-bottom: 8vw;
  }
}
.l-top .sec-results .imgarea {
  width: 100%;
  max-width: 126rem;
  margin: 0 auto 7rem;
  position: relative;
}
@media screen and (min-width: 768px) {
  .l-top .sec-results .imgarea .txtarea {
    width: 37.4rem;
    border-radius: 2.4rem;
    padding: 2.4rem 3.2rem;
    background: rgba(0, 0, 0, 0.4);
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.4rem;
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .l-top .sec-results .imgarea .txtarea {
    margin-top: 4vw;
  }
}
.l-top .sec-results .box .txt {
  font-size: 2.2rem;
  line-height: 2;
}
.l-top .sec-results .box:not(:first-of-type) {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-results .box:not(:first-of-type) {
    margin-top: 20vw;
  }
}
.l-top .sec-results .box:first-of-type .box_ttl:before, .l-top .sec-results .box:first-of-type .box_ttl:after {
  width: 30.5%;
}
.l-top .sec-results .box:last-of-type .box_ttl:before, .l-top .sec-results .box:last-of-type .box_ttl:after {
  width: 33%;
}
@media screen and (max-width: 767px) {
  .l-top .sec-results .box:first-of-type .cardwrap .card:first-of-type .txt {
    padding-top: 0 !important;
    margin-bottom: 2vw !important;
  }
  .l-top .sec-results .box .cardwrap .card .txt {
    padding-top: 4vw !important;
    margin-bottom: 5.5vw !important;
  }
  .l-top .sec-results .box .cardwrap .card .link {
    text-align: right;
  }
}
@media screen and (max-width: 767px) {
  .l-top .sec-story {
    padding-bottom: 12vw;
  }
}
.l-top .sec-story .inner {
  position: relative;
}
.l-top .sec-story .dflex-rowreverse {
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .dflex-rowreverse {
    flex-direction: column-reverse;
  }
}
.l-top .sec-story .img {
  width: 72rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .img {
    width: 103vw;
    margin: 0 calc(50% - 50vw);
  }
}
.l-top .sec-story .contents {
  width: 38rem;
  padding-top: 3.2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .contents {
    width: 100%;
    padding-top: 0;
    margin-top: -4vw;
  }
}
.l-top .sec-story .contents .btn {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .contents .btn {
    margin-top: 8vw;
    position: relative;
    z-index: 10;
  }
}
.l-top .sec-story .iconp {
  position: absolute;
}
.l-top .sec-story .iconp-left {
  left: 12rem;
  top: -28rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .iconp-left {
    display: none;
  }
}
.l-top .sec-story .iconp-left img {
  width: 31rem;
}
.l-top .sec-story .iconp-right {
  right: 5rem;
  bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .iconp-right {
    bottom: 4vw;
    right: 3vw;
  }
}
.l-top .sec-story .iconp-right img {
  width: 20.2rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-story .iconp-right img {
    width: 32vw;
  }
}
.l-top .sec-columns {
  background: url("../images/top/bg_columns_pc.png") repeat-x top center/200rem auto;
  padding: 7rem 0 8rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-columns {
    padding: 12vw 0 20vw;
    background: url("../images/top/bg_columns_sp.png") repeat-x top center/110vw auto;
  }
}
.l-top .sec-columns .sec_header {
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-columns .sec_header {
    margin-bottom: 4vw;
  }
}
.l-top .sec-columns .lead {
  margin-bottom: 3.2rem;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-columns .lead {
    font-size: 4.2vw;
    line-height: 1.6;
    margin-bottom: 8vw;
  }
}
.l-top .sec-columns .cardwrap {
  width: 98rem;
  margin: 0 auto;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .l-top .sec-columns .cardwrap {
    width: 100%;
  }
  .l-top .sec-columns .cardwrap .card:nth-of-type(4) .txt {
    padding-top: 4vw !important;
  }
}
.l-top .sec-presentations {
  padding: 7rem 0 1rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations {
    padding: 12vw 0 20vw;
  }
}
.l-top .sec-presentations .inner {
  position: relative;
}
.l-top .sec-presentations .sec_header {
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .sec_header {
    margin-bottom: 4vw;
  }
}
.l-top .sec-presentations .btn {
  position: relative;
  z-index: 4;
}
.l-top .sec-presentations .img {
  width: 72rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .img {
    width: 103vw;
    margin: 0 calc(50% - 50vw);
  }
}
.l-top .sec-presentations .dflex-rowreverse {
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .dflex-rowreverse {
    flex-direction: column-reverse;
  }
}
.l-top .sec-presentations .contents {
  width: 49rem;
  padding: 13rem 10rem 0 0;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .contents {
    width: 100%;
    padding: 0;
    margin-top: -5vw;
  }
}
.l-top .sec-presentations .iconp {
  position: absolute;
}
.l-top .sec-presentations .iconp-right {
  top: 1rem;
  right: 5rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .iconp-right {
    right: unset;
    left: 4vw;
    top: unset;
    bottom: -16vw;
  }
}
.l-top .sec-presentations .iconp-right img {
  width: 29.6rem;
}
@media screen and (max-width: 767px) {
  .l-top .sec-presentations .iconp-right img {
    width: 40vw;
  }
}

/*----------------------------------
熟成ホップの特徴
----------------------------------*/
.l-features .sec-list {
  max-width: 82rem;
  margin-left: auto;
  margin-right: auto;
}
.l-features .sec-list .sec-list__inner {
  border-radius: 3rem;
  overflow: hidden;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .sec-list__inner {
    margin-bottom: 8vw;
  }
}
.l-features .sec-list .sec_header {
  background-color: #5a8c19;
  padding: 2.2rem 0;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .sec_header {
    padding: 3vw 0;
  }
}
.l-features .sec-list .sec_header .sec_ttl {
  font-size: 2.6rem;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .sec_header .sec_ttl {
    font-size: 5vw;
  }
}
.l-features .sec-list .container {
  background-color: #f8f8ed;
  padding: 4rem 6rem 4.4rem;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .container {
    padding: 8vw 4vw;
  }
}
.l-features .sec-list .container .list .item {
  gap: 2rem;
  position: relative;
}
.l-features .sec-list .container .list .item .img {
  position: absolute;
  width: 13.8rem;
  right: 0;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .container .list .item .img {
    width: 24vw;
    top: -1vw;
  }
}
.l-features .sec-list .container .list .item .icon {
  width: 4rem;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .container .list .item .icon {
    width: 6vw;
  }
}
.l-features .sec-list .container .list .item .icon img {
  width: 100%;
}
.l-features .sec-list .container .list .item .txt {
  font-size: 2.2rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .container .list .item .txt {
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 500;
    width: calc(100% - 6vw);
  }
}
.l-features .sec-list .container .list .item:not(:last-child) {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 0.2rem dotted #865e2c;
}
@media screen and (max-width: 767px) {
  .l-features .sec-list .container .list .item:not(:last-child) {
    padding-bottom: 6vw;
    margin-bottom: 6vw;
    border-bottom: 0.6vw dotted #865e2c;
  }
}
@media screen and (max-width: 767px) {
  .l-features .stxt {
    font-size: 3.2vw;
    line-height: 1.5;
    display: block;
    margin-top: 2vw;
  }
}
.l-features .sec_reduction .inner {
  max-width: 82rem;
}
.l-features .sec_reduction .inner > .img {
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .l-features .sec_reduction .inner > .img {
    margin-bottom: 6vw;
  }
}
.l-features .sec_better .inner {
  max-width: 82rem;
}
.l-features .sec_better .img {
  position: relative;
  margin-bottom: 5rem;
}
.l-features .sec_better .img .icon {
  position: absolute;
  width: 25rem;
  top: -3rem;
  left: -4.4rem;
}
.l-features .sec_better .img .caption {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .l-features .box:not(:last-of-type) {
    margin-bottom: 21vw;
  }
}
.l-features .box .cardwrap a {
  display: block;
  width: 30.6%;
  text-decoration: none;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-features .box .cardwrap a {
    width: 100%;
  }
}
.l-features .box .cardwrap a:before, .l-features .box .cardwrap a:after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 0.2rem solid #5a8c19;
  border-right: 0.2rem solid #5a8c19;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  right: 2rem;
}
@media screen and (max-width: 767px) {
  .l-features .box .cardwrap a:before, .l-features .box .cardwrap a:after {
    border-top: 0.8vw solid #5a8c19;
    border-right: 0.8vw solid #5a8c19;
    width: 3vw;
    height: 3vw;
    right: 6vw;
  }
}
.l-features .box .card {
  display: flex;
  border-radius: unset;
  box-shadow: unset;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .l-features .box .card {
    align-items: center;
    background-color: #f8f8ed;
  }
}
.l-features .box .card .icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  left: -0.8rem;
  top: -0.8rem;
  transform: unset;
}
@media screen and (max-width: 767px) {
  .l-features .box .card .icon {
    width: 10vw;
    height: 10vw;
    font-size: 4.4vw;
    left: -3vw;
    top: -3vw;
  }
}
.l-features .box .card .img {
  width: 9rem;
}
@media screen and (max-width: 767px) {
  .l-features .box .card .img {
    width: 28vw;
  }
}
.l-features .box .card .bg-white {
  width: calc(100% - 9rem);
  background-color: #f8f8ed;
  border-radius: unset;
  padding: 0;
  display: flex;
  align-items: center;
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .l-features .box .card .bg-white {
    width: calc(100% - 28vw);
    padding: 4vw 8vw;
  }
}
.l-features .box .card .bg-white .txt {
  font-size: 2rem !important;
  margin-bottom: 0 !important;
}
@media screen and (max-width: 767px) {
  .l-features .box .card .bg-white .txt {
    font-size: 5.5vw !important;
  }
}
.l-features .box-work01 .box_ttl:before, .l-features .box-work01 .box_ttl:after {
  width: 30%;
}
.l-features .box-work02 {
  margin-bottom: 12rem;
}
.l-features .box-work02 .box_ttl {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .l-features .box-work02 .box_ttl {
    margin-bottom: 12vw;
  }
}

/*----------------------------------
学術報告・学会発表
----------------------------------*/
@media screen and (min-width: 768px) {
  .l-presentation .nav .nav_list .nav_list_item a {
    padding: 0 3.8rem;
  }
  .l-presentation .nav .nav_list .nav_list_item:nth-child(3) {
    border-right: unset;
  }
}
.l-presentation .inner {
  max-width: 98rem;
}
.l-presentation .presentations .presentation .sec_ttl {
  line-height: 5rem;
  border-radius: 0.8rem;
  background-color: #f7f0e2;
  padding: 0 1.6rem;
  font-size: 2.3rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation .sec_ttl {
    line-height: 12vw;
    border-radius: 2vw;
    text-align: center;
    font-size: 5vw;
    margin-bottom: 4vw;
  }
}
.l-presentation .presentations .presentation .sec_txt {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation .sec_txt {
    font-size: 4vw;
  }
}
.l-presentation .presentations .presentation .sec_txt > .dflex .ttl {
  width: 7rem;
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation .sec_txt > .dflex .ttl {
    width: 16vw;
    line-height: 1.4;
  }
}
.l-presentation .presentations .presentation .sec_txt > .dflex .txt {
  width: calc(100% - 7rem);
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation .sec_txt > .dflex .txt {
    width: calc(100% - 16vw);
    line-height: 1.4;
  }
}
.l-presentation .presentations .presentation_list {
  counter-reset: listnum;
  list-style: none;
}
.l-presentation .presentations .presentation_list .presentation_list_item {
  line-height: 2;
  padding-left: 4rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation_list .presentation_list_item {
    padding-left: 8vw;
    line-height: 1.4;
  }
}
.l-presentation .presentations .presentation_list .presentation_list_item:before {
  counter-increment: listnum;
  content: counter(listnum) ".";
  display: block;
  width: 4rem;
  position: absolute;
  left: 0;
  top: 0.2rem;
}
@media screen and (max-width: 767px) {
  .l-presentation .presentations .presentation_list .presentation_list_item:before {
    width: 8vw;
  }
}

/*----------------------------------
熟成ホップの研究成果
----------------------------------*/
.l-result .inner {
  max-width: 98rem;
}
.l-result .inner > .dflex {
  justify-content: space-between;
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .l-result .inner > .dflex {
    flex-direction: column;
    margin-bottom: 8vw;
  }
}
.l-result .inner > .dflex > .contents, .l-result .inner > .dflex > .img {
  width: 47.5%;
}
@media screen and (max-width: 767px) {
  .l-result .inner > .dflex > .contents, .l-result .inner > .dflex > .img {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .l-result .inner .sec_ttl {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 4vw;
  }
  .l-result .inner .sec_ttl + .sp-only {
    margin-bottom: 8vw;
  }
}
.l-result .inner .marker {
  background: linear-gradient(transparent 50%, rgb(255, 255, 255) 70%);
  padding: 0 0.8rem;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  .l-result .inner .marker {
    padding: 0 4vw;
  }
}
.l-result .inner .marker.on {
  background-size: 100% 100%;
}
.l-result .inner .marker-green {
  background: linear-gradient(transparent 50%, rgb(229, 245, 193) 70%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s;
}
.l-result .inner .marker-green.on {
  background-size: 100% 100%;
}
.l-result .inner .box:not(:last-of-type) {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .l-result .inner .box:not(:last-of-type) {
    margin-bottom: 10vw;
  }
}
.l-result .inner .box:not(:first-of-type) {
  margin-top: 0;
}
.l-result .inner .box_header {
  background-color: #e5f5c1;
  padding: 2rem 0.8rem 1.8rem;
  border-radius: 3rem 3rem 0 0;
}
@media screen and (max-width: 767px) {
  .l-result .inner .box_header {
    border-radius: 4vw 4vw 0 0;
    padding: 3vw 2vw 2.5vw;
  }
}
.l-result .inner .box_header .box_ttl {
  margin-bottom: 0;
}
.l-result .inner .box_header .box_ttl:before, .l-result .inner .box_header .box_ttl:after {
  display: none;
}
.l-result .inner .box_header .box_ttl span {
  display: block;
}
.l-result .inner .box_header .box_ttl span.main {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .l-result .inner .box_header .box_ttl span.main {
    font-size: 5vw;
  }
}
.l-result .inner .box_header .box_ttl span.sub {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .l-result .inner .box_header .box_ttl span.sub {
    font-size: 2.9vw;
  }
}
.l-result .inner .box-graph .bg-white {
  border-radius: 0 0 3rem 3rem;
  padding: 5.6rem 1rem 8rem;
}
@media screen and (max-width: 767px) {
  .l-result .inner .box-graph .bg-white {
    border-radius: 0 0 4vw 4vw;
  }
}
.l-result .inner .box-graph .bg-white img {
  display: block;
  margin: 0 auto;
}
.l-result .box-graph01 img {
  max-width: 70.5rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph01 img {
    max-width: 90%;
  }
}
.l-result .box-graph02 img {
  max-width: 70.5rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph02 img {
    max-width: 90%;
  }
}
.l-result .box-graph03 img {
  max-width: 61.5rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph03 img {
    max-width: 90%;
  }
}
.l-result .box-graph04 img {
  max-width: 72.5rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph04 img {
    max-width: 90%;
  }
}
.l-result .box-graph04 .bg-white {
  background-color: #f8f8ed;
}
.l-result .box-graph05 img {
  max-width: 65rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph05 img {
    max-width: 85%;
  }
}
.l-result .box-graph06 img {
  max-width: 72rem;
}
@media screen and (max-width: 767px) {
  .l-result .box-graph06 img {
    max-width: 95%;
  }
}
.l-result .sec04 .img img {
  border-radius: 2rem;
}
.l-result .sec04 .box {
  background-color: #f8f8ed;
  border-radius: 2rem;
  padding: 5rem;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .box {
    padding: 0;
    border-radius: 4vw 4vw 0 0;
    overflow: hidden;
  }
}
.l-result .sec04 .box img {
  border-radius: unset !important;
}
.l-result .sec04 .box .box_ttl {
  background-color: #e5f5c1;
  line-height: 5rem;
  border-radius: 0.8rem;
  font-size: 2rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .box .box_ttl {
    font-size: 5vw;
    line-height: 14.5vw;
    margin-bottom: 4vw;
    border-radius: unset;
    margin: unset;
  }
}
.l-result .sec04 .box .box_ttl:before, .l-result .sec04 .box .box_ttl:after {
  display: none;
}
.l-result .sec04 .box .box_ttl:not(:first-of-type) {
  margin-top: 5.6rem;
}
.l-result .sec04 .box .box_ttl + .dflex {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .box .box_ttl + .dflex {
    flex-direction: column;
  }
}
.l-result .sec04 .box .box_ttl + .dflex .img {
  width: 54%;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .box .box_ttl + .dflex .img {
    width: 85%;
    margin: 8vw auto 0;
  }
}
.l-result .sec04 .box .box_ttl + .dflex .img img {
  width: 100%;
}
.l-result .sec04 .box .box_ttl + .dflex .contents {
  width: 42%;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .box .box_ttl + .dflex .contents {
    width: 100%;
    padding: 6vw;
  }
  .l-result .sec04 .box .box_ttl + .dflex .contents .txt {
    font-size: 3.8vw;
    line-height: 1.5;
  }
}
.l-result .sec04 .img01 img {
  max-width: 80rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-result .sec04 .img01 img {
    max-width: 85%;
    margin: 8vw auto 10vw;
  }
}

/*----------------------------------
コラム
----------------------------------*/
.l-columns .columns {
  margin-bottom: 10rem;
}
.l-columns .sec {
  padding: 8rem 0.8rem;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .l-columns .sec {
    padding: 10vw 5vw;
  }
}
.l-columns .sec:nth-child(even) {
  background-color: #fff;
}
.l-columns .sec:nth-child(odd) {
  background-color: #faf7f0;
}
.l-columns .sec .inner {
  max-width: 68rem;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .inner {
    padding: 0;
    max-width: unset;
  }
}
.l-columns .sec .inner .img {
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .inner .img {
    margin-bottom: 6vw;
  }
}
.l-columns .sec .inner .img img {
  width: 100%;
  height: auto;
}
.l-columns .sec .column_header {
  position: relative;
  padding-top: 5.6rem;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .column_header {
    padding-top: 10vw;
  }
}
.l-columns .sec .column_header .sec_ttl {
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .column_header .sec_ttl {
    margin-bottom: 5vw;
  }
}
.l-columns .sec .column_header .icon {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: #e2a025;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .column_header .icon {
    width: 10vw;
    height: 10vw;
    font-size: 5.5vw;
  }
}
.l-columns .sec .column_header .icon span {
  display: block;
  line-height: 1;
  position: relative;
  top: -0.2rem;
}
.l-columns .sec .stxt {
  font-size: 1.58rem;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .l-columns .sec .stxt {
    font-size: 3.2vw;
  }
}

/*----------------------------------
熟成ホップの開発物語
----------------------------------*/
.l-story {
  background-color: #fbf7ef;
  position: relative;
}
.l-story + .khcl__footer {
  position: relative;
}
.l-story + .khcl__footer:after {
  content: "";
  display: block;
  width: 100%;
  height: 10rem;
  background-color: #fbf7ef;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.l-story .inner {
  max-width: 68rem;
}
@media screen and (max-width: 767px) {
  .l-story .inner {
    max-width: unset;
  }
}
.l-story .inner .img {
  margin-bottom: 4rem;
}
.l-story .inner .sec:not(:last-of-type) {
  margin-bottom: 8rem;
}
@media screen and (min-width: 768px) {
  .l-story + .bannar {
    margin-top: 10rem;
  }
}/*# sourceMappingURL=style.css.map */