@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: var(--serif);color: #fff;letter-spacing: 0.15em;line-height: 0.58;text-align: center;white-space: nowrap;}
#Billboard h2 + p {position: absolute;top: calc(50% + 1.5em);left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 125%;font-weight: normal;font-family: var(--serif);color: #fff;text-align: center;letter-spacing: 0.25em;line-height: 2;white-space: nowrap;}
#Billboard img {mix-blend-mode: screen;}
#Billboard::before {content: "image";position: absolute;bottom: 0;right: 0;padding: 1em;z-index: 2;font-family: var(--serif);font-size: 10px;color: #fff;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: slategray;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-zehm-01 {position: relative;background-color: #fff;}
#Main .block-zehm-01 h3 img {width: auto;height: 5em;margin: 0 auto 2em;}
#Main .block-zehm-01 h4 {border: 1px solid #00813e;border-radius: 3em;margin: 2em 0 1.5em;padding: 0.5em;text-align: center;font-size: 125%;font-family: var(--serif);color: #00813e;}
#Main .block-zehm-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-zehm-01 .grid-list {justify-content: space-between;margin-top: 1em;}
#Main .block-zehm-01 .grid-list > div {background-color: #e5f2ea;margin: 0;padding: 1.5em;border-radius: 1em;box-sizing: border-box;text-align: center;font-size: 100%;font-family: var(--serif);color: #545251;}
#Main .block-zehm-01 .grid-list > div strong {display: block;font-weight: normal;font-size: 150%;color: #00813e;}
#Main .block-zehm-01 .grid-list > div small {font-family: var(--sans-serif);font-size: 62.5%;}
#Main .block-zehm-01 .lead {max-width: 44em;margin: 0 auto;color: #595757;}
#Main .block-zehm-01 .container {padding-bottom: 2em;}

#Main .block-zehm-02 {position: relative;background-color: #fff;}
#Main .block-zehm-02 h4 {border: 1px solid #00813e;border-radius: 3em;margin: 2em 0 1.5em;padding: 0.5em;text-align: center;font-size: 125%;font-family: var(--serif);color: #00813e;}
#Main .block-zehm-02 figure figcaption {font-family: var(--serif);font-size: 200%;line-height: 1.5;color: #00813e;}
#Main .block-zehm-02 figure figcaption small {display: block;font-family: var(--sans-serif);font-size: 31.25%;color: #595757;}
#Main .block-zehm-02 .swiper {margin-top: -2em;}
#Main .block-zehm-02 .swiper-wrapper {transition-timing-function: linear;}
#Main .block-zehm-02 .swiper-slide {width: auto;}
#Main .block-zehm-02 .swiper-slide img {width: auto;height: 12.5em;}
#Main .block-zehm-02 .container {position: relative;padding: 0 2em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-zehm-01 .grid-list > div {width: calc(50% - 0.5em);margin-top: 1em;display: flex;flex-direction: column;justify-content: center;}

  #Main .block-zehm-02 {padding-bottom: 5em;}
  #Main .block-zehm-02 figure {max-width: 840px;margin: 0 auto;}
  #Main .block-zehm-02 figure figcaption {position: absolute;left: 1em;bottom: 1.5em;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {bottom: calc(50% + 1em);font-size: 280%;letter-spacing: 0.1em;}
  #Billboard h2 + p {top: calc(50% + -1.5em);font-size: 100%;letter-spacing: 0.1em;}

  #Main .block-zehm-01 h3 img {height: 3em;}
  #Main .block-zehm-01 h4 {font-size: 112.5%;line-height: 1.25;}
  #Main .block-zehm-01 figure { margin: 0 1.5em;}
  #Main .block-zehm-01 .grid-list {margin: 1.5em 0.5em 0;}
  #Main .block-zehm-01 .grid-list > div {margin-top: 1em;padding: 1em 0;line-height: 1.35;}
  #Main .block-zehm-01 .grid-list > div strong {font-size: 137.5%;}

  #Main .block-zehm-02 {padding-bottom: 2.5em;}
  #Main .block-zehm-02 figure {display: flex;flex-direction: column-reverse;margin: 0 -2.5em;}
  #Main .block-zehm-02 figure figcaption {font-size: 175%;text-align: center;}
  #Main .block-zehm-02 .swiper-slide img {height: 30vw;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}