@charset "UTF-8";
/* =====
 * ABOUT US
=================================================================== */
/* ===== ALL ===== */
#Billboard {background-image: url("../img/aboutus/bg_billboard.webp");}

/* block-aboutus-01：MESSAGE */
#Main .block-aboutus-01 {padding: 2.625em 0 6.625em;background: var(--green-pale);}
#Main .block-aboutus-01 header {margin-bottom: 2.75em;}
#Main .block-aboutus-01 header h2,
#Main .block-aboutus-01 header h2 + p,
#Main .block-aboutus-01 header h2 + p + p {color: #39604a;}
#Main .block-aboutus-01 section {display: flex;border: 1.5px solid var(--ink);border-radius: .375em;background: #fff;}
#Main .block-aboutus-01 section > div {flex: 1;padding: 2.625em 3.25em 2em 2.375em;}
#Main .block-aboutus-01 section h3 {margin-bottom: 1.1em;color: var(--orange);font-size: 143.75%;letter-spacing: .1em;line-height: 1.5;}
#Main .block-aboutus-01 section p {margin-bottom: 1.72em;font-weight: 700;letter-spacing: .1em;line-height: 1.72;}
#Main .block-aboutus-01 section figure {flex: none;width: 33.5em;margin: 1.125em 1.125em 1.125em 0;}
#Main .block-aboutus-01 section figure img {height: 100%;object-fit: cover;}

/* block-aboutus-02：MISSION ＋ VALUE */
#Main .block-aboutus-02 {padding: 3.9375em 0 5.5em;}
#Main .block-aboutus-02 header {margin-bottom: 2.875em;}
#Main .block-aboutus-02 header h2 + p {color: var(--green);}
#Main .block-aboutus-02 .container > ul {display: flex;gap: 1.625em;margin: 0;}
#Main .block-aboutus-02 .container > ul li {width: calc((100% - 1.625em * 2) / 3);margin: 0;padding: 1.0625em 1.25em 1.5em;border: 1.5px solid var(--ink);border-radius: .375em;background: var(--green-pale);text-align: center;}
#Main .block-aboutus-02 .container > ul li figure {display: flex;align-items: center;justify-content: center;width: 8.5em;height: 8.5em;margin: 0 auto;border-radius: 50%;background: #fff;}
#Main .block-aboutus-02 .container > ul li figure img {width: auto;height: 5.75em;}
#Main .block-aboutus-02 .container > ul li h3 {margin-top: .375em;padding-bottom: .3em;border-bottom: 1px solid #799987;color: var(--green);font-size: 143.75%;letter-spacing: .1em;line-height: 1.5;}
#Main .block-aboutus-02 .container > ul li p {margin-top: 1em;font-weight: 700;letter-spacing: 0;line-height: 1.72;}
#Main .block-aboutus-02 dl {display: flex;align-items: stretch;min-height: 7.28125em;margin: 1.6875em 0 0;border: 1.5px solid var(--orange);border-radius: .375em;background: #fff;overflow: hidden;}
#Main .block-aboutus-02 dl dt {display: flex;flex: none;align-items: center;justify-content: center;width: 10.5625em;padding-right: 1.5em;background: var(--orange);clip-path: polygon(0 0, 100% 0, calc(100% - 1.5em) 100%, 0 100%);color: #fff;font-family: var(--font-en);font-size: 131.25%;font-weight: 600;letter-spacing: .05em;}
#Main .block-aboutus-02 dl dd {display: flex;flex: 1;align-items: center;min-width: 0;margin: 0;padding: 1em 1.5em 1em 1.3125em;font-weight: 700;letter-spacing: 0;line-height: 1.72;}   /* nowrap を解除し dd 内で折り返す（幅超過対策 2026-09-24） */

/* block-aboutus-03：LINK */
#Main .block-aboutus-03 {padding: 4.5em 0 8.5625em;background: var(--green-pale);}
#Main .block-aboutus-03 header {margin-bottom: 3.375em;}
#Main .block-aboutus-03 header h2 + p {color: var(--green);}
#Main .block-aboutus-03 header h2 + p + p {font-weight: 700;}
#Main .block-aboutus-03 .container > ul {display: flex;gap: 1.5em;margin: 0;}
#Main .block-aboutus-03 .container > ul li {position: relative;width: calc((100% - 1.5em) / 2);margin: 0;padding-bottom: 1.9375em;border-radius: .375em;background: #fff;box-shadow: 0 .25em 1em rgba(0, 0, 0, .08);overflow: hidden;}
#Main .block-aboutus-03 .container > ul li figure {position: relative;overflow: hidden;margin: 0;aspect-ratio: 541.5 / 301;background: var(--green-pale);}
#Main .block-aboutus-03 .container > ul li figure img {height: 100%;object-fit: cover;}
#Main .block-aboutus-03 .container > ul li figure figcaption {position: absolute;top: .75em;left: .625em;display: inline-flex;align-items: center;height: 1.9375em;padding: 0 .9375em;border-radius: 100em;background: var(--green);color: #fff;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#Main .block-aboutus-03 .container > ul li p {margin: 1em 0 0;padding: 0 1em;font-size: 87.5%;font-weight: 700;letter-spacing: 0;line-height: 1.72;}
#Main .block-aboutus-03 .container > ul li .btn-area {margin-top: 1.5em;padding: 0;}
#Main .block-aboutus-03 .container > ul li .btn-area a {transition: background .6s ease, color .6s ease;}
#Main .block-aboutus-03 .container > ul li .btn-area a::before {content: "";position: absolute;inset: 0;z-index: 1;}
#Main .block-aboutus-03 .container > ul li .btn-area a::after {transition: border-color .6s ease;}
#Main .block-aboutus-03 .container > ul li figure img {transition: transform .6s ease;}
#Main .block-aboutus-03 .container > ul li:has(a:focus-visible) {outline: 2px solid var(--green);outline-offset: 2px;}
@media (hover: hover) {
  #Main .block-aboutus-03 .container > ul li:hover figure img {transform: scale(1.04);}
  #Main .block-aboutus-03 .container > ul li:hover .btn-area a {background-color: var(--green);color: #fff;}
  #Main .block-aboutus-03 .container > ul li:hover .btn-area a::after {border-color: #fff;}
}

/* ===== SP ===== */
@media (width < 769px) {
  #Main .block-aboutus-01,
  #Main .block-aboutus-02,
  #Main .block-aboutus-03 {padding: 3em 0 3.5em;}
  #Main .block-aboutus-01 header,
  #Main .block-aboutus-02 header,
  #Main .block-aboutus-03 header {margin-bottom: 1.75em;}
  #Main .block-aboutus-01 section {flex-direction: column-reverse;}
  #Main .block-aboutus-01 section > div {padding: 1.25em 1.25em 1.5em;}
  #Main .block-aboutus-01 section h3 {font-size: 118.75%;}
  #Main .block-aboutus-01 section p {margin-bottom: 1em;font-size: 100%;letter-spacing: .03em;}
  #Main .block-aboutus-01 section figure {width: auto;margin: .75em .75em 0;}
  #Main .block-aboutus-02 .container > ul {display: block;}
  #Main .block-aboutus-02 .container > ul li {width: 100%;margin-bottom: 1em;padding: 1em 1.25em 1.25em;}
  #Main .block-aboutus-02 .container > ul li figure {width: 6em;height: 6em;}
  #Main .block-aboutus-02 .container > ul li figure img {height: 4em;}
  #Main .block-aboutus-02 .container > ul li h3 {font-size: 118.75%;}
  #Main .block-aboutus-02 .container > ul li p {margin-top: .75em;font-size: 100%;}
  #Main .block-aboutus-02 dl {display: block;min-height: 0;margin-top: 1.5em;}
  #Main .block-aboutus-02 dl dt {width: 100%;height: 2.75em;padding: 0;clip-path: none;font-size: 112.5%;}
  #Main .block-aboutus-02 dl dd {padding: 1em 1.25em;font-size: 100%;}
  #Main .block-aboutus-03 .container > ul {display: block;}
  #Main .block-aboutus-03 .container > ul li {width: 100%;margin-bottom: 1.25em;padding-bottom: 1.5em;}
  #Main .block-aboutus-03 .container > ul li p {padding: 0 1.25em;}
  #Main .block-aboutus-03 .container > ul li .btn-area {margin-top: 1.25em;}
}