@charset "UTF-8";
/* CSS Document */
/*---------------------------------

  common

---------------------------------*/
body {
  background-image: url("../images/s-herb_bg.webp");
  background-image: url("../images/s-herb_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
:root {
  --pink: #F9DAE9;
  --red: #F48E8E;
  --blue: #477298;
  --green: #00684D;
  --base: #5F5046;
  --white: #fff;
  --off-white: #FCFAF5;
  --black: #0D0A0A;
  --mincho: "Zen Old Mincho", serif;
  --gothic: "Zen Kaku Gothic Antique", sans-serif;
}
#globalContainer {
  background: var(--off-white);
  max-width: 39rem;
  margin: auto;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {}
@media screen and (max-width: 480px) {
  #globalContainer {
    max-width: none;
  }
}
/*---------------------------------

  header

---------------------------------*/
header {
  position: relative;
}
header .outer_head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 5%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
header #logo {
  max-width: 16rem;
}
header .copy {
  max-width: 5.6rem;
  margin-top: 2.8rem;
  margin-right: 5%;
}
header .pageTitle {
  max-width: 24rem;
  margin: auto;
  position: absolute;
  bottom: 4.2rem;
  left: 0;
  right: 0;
  transition-delay: 1s;
}
header .mainImg {}
header .mainImg img {}
/*---------------------------------

  footer

---------------------------------*/
footer {
  padding-bottom: 9rem;
}
footer .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 2.1rem 5% 4.3rem;
}
footer .wrapper .logo {
  width: 12rem;
}
footer .wrapper .copylight {}
/*---------------------------------

  共通スタイル

---------------------------------*/
.l-inner {
  max-width: 31rem;
  margin: 0 auto;
  width: 90%;
}
.title_serif_l {
  font: 2.4rem/4rem var(--mincho);
  letter-spacing: 0.05em;
}
.title_serif_m {
  font: 2rem/3.2rem var(--mincho);
  letter-spacing: 0.05em;
}
.title_serif_s {
  font: 1.8rem/3.2rem var(--mincho);
  letter-spacing: 0.05em;
}
.title_sans_s {
  font: 500 1.5rem/2.4rem var(--gothic);
  letter-spacing: 0.025em;
}
.body_serif_m {
  font: 1.4rem/2.8rem var(--mincho);
  letter-spacing: 0.025em;
}
.body_sans_m {
  font: 1.3rem/2.6rem var(--gothic);
  letter-spacing: 0.025em;
}
.body_sans_s {
  font: 1.2rem/2.4rem var(--gothic);
  letter-spacing: 0.025em;
}
.body_sans_xs {
  font: 1.0rem/1.6rem var(--gothic);
  letter-spacing: 0rem;
}
section .ttlBox, section h2 {
  text-align: center;
}
section .ttlBox h2 {
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  position: relative;
}
section .ttlBox h2::before {
  background: var(--black);
  content: '';
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 4rem;
  height: .1rem;
}
section .ttlBox p {}
/*---------------------------------
  flotingBunner
---------------------------------*/
#flotingBunner {
  margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 39rem;
  width: 100%;
  z-index: 10;
}
#flotingBunner a {
  display: block;
}
#flotingBunner a img {
  width: 100%;
}
/*---------------------------------
  CTA
---------------------------------*/
.CTAblock {
  background: var(--off-white);
  padding-bottom: 3rem;
}
.CTAblock ._details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.CTAblock ._details img:not(.__proImg) {
  max-width: 23.8rem;
}
.CTAblock ._details img.__proImg {
  filter: drop-shadow(0 0 1.2rem rgba(0, 0, 0, 0.16));
  max-width: 5.2rem;
}
.CTAblock ._btn {
  margin: 1.5rem auto;
  transform: scale(1.05);
}
.CTAblock ._btn a {
  background: #fff;
  border-radius: 5rem;
  box-shadow: 0 .3rem .8rem rgba(244, 142, 142, 0.75);
  color: var(--black);
  display: block;
  padding: 1.7rem;
  text-align: center;
}
.CTAblock ._btn a span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.CTAblock ._btn a span::after {
  background: url("../images/arr.png") no-repeat center/contain;
  content: '';
  display: block;
  width: 2.2rem;
  height: .5rem;
}
.CTAblock aside {
  color: var(--base);
  font: 400 .8rem/1.4rem var(--gothic);
}
.CTAblock aside p {}
/*---------------------------------
	inview
---------------------------------*/
.fadeIn {
  opacity: 0;
  transition: 2s;
  transition-delay: .5s;
}
.fadeIn.is-show {
  opacity: 1;
}