@charset "UTF-8";
.font-so {
  font-family: "Source Sans Pro", sans-serif;
}

.purpose-white {
  background-color: #fff;
}
.purpose-black {
  background-color: #222222;
}

.purpose-white .purpose-box {
  margin-top: 4.2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4rem;
}
@media (max-width: 767.98px) {
  .purpose-white .purpose-box {
    flex-direction: column;
    align-items: center;
  }
}
.purpose-white .purpose-box .purpose-img {
  position: relative;
  width: calc(50% - 4rem);
  z-index: 2;
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .purpose-white .purpose-box .purpose-img {
    width: 90%;
  }
}
.purpose-white .purpose-box .purpose-img img {
  width: 100%;
}
.purpose-white .purpose-box .purpose-img::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 100%;
  height: 100%;
  background-color: #00A8EC;
  z-index: -1;
}
.purpose-black .purpose-box .purpose-textBox {
  color: white;
  width: calc(50% - 4rem);
}
@media (max-width: 767.98px) {
  .purpose-black .purpose-box .purpose-textBox {
    width: 100%;
  }
}
.purpose-white .purpose-box .purpose-textBox .purpose-title {
  font-size: 2.2rem;
  font-weight: bold;
  padding-top: 5em;
  line-height: 1.8;
  color: #222;
}
.purpose-brand__en, .purpose-brand__catch {
  color: #fff;
}
.purpose-brand__catch {
    font-size: 8em;
    font-weight: 900;
    margin-top: 50px;
    text-align: center;
    line-height: 1.5em;
}
.purpose-brand__en, .purpose-brand__catch_bottom {
  color: #fff;
}
.purpose-brand__catch_bottom {
    font-size: 5em;
    font-weight: 900;
    margin-top: 0px;
    text-align: center;
    line-height: 1.5em;
}
.purpose-black .purpose-box .purpose-textBox .purpose-text {
  font-size: 1.5rem;
  margin-top: 3.2rem;
  line-height: 2.2;
}
.purpose-black .purpose-box .purpose-textBox .purpose-signature {
  margin-top: 3rem;
  text-align: right;
}
.purpose-black .purpose-box .purpose-textBox .purpose-signature .purpose-name {
  font-size: 1.3rem;
}
.purpose-black .purpose-box .purpose-textBox .purpose-signature .purpose-name strong {
  margin-left: 1rem;
  font-size: 1.8rem;
}
.purpose-black .purpose-box .purpose-textBox .purpose-signature img {
  margin-top: 2.4rem;
}

.purpose-content {
  padding: 10rem 0 !important;
}
.purpose-content .content-container {
  margin-top: 4.2rem;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  .purpose-content .content-container .desc-company {
    gap: 1.5rem;
  }
}
.purpose-content .content-container .desc-company .desc-company-label {
  border-bottom: 1px solid #00A8EC;
}
@media (max-width: 575.98px) {
  .purpose-content .content-container .desc-company .desc-company-label {
    width: 100px;
    padding: 1.6rem 0;
  }
}
.purpose-content .content-container .desc-company .desc-company-value {
  border-bottom: 1px solid #D5D5D5;
  line-height: 2.1;
}
.purpose-content .content-container .desc-company .desc-company-value li {
  color: #00A8EC;
}
.purpose-content .content-container .desc-company .desc-company-value a {
  color: #00A8EC;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.purpose-content .content-container .desc-company .desc-company-value a:hover {
  opacity: 0.7;
}
@media (max-width: 575.98px) {
  .purpose-content .content-container .desc-company .desc-company-value {
    width: calc(100% - 100px + 1.5rem);
    padding: 1.6rem 0;
  }
}
.purpose-content .content-container .desc-company:nth-of-type(1) .desc-company-label {
  border-top: 1px solid #00A8EC;
}
.purpose-content .content-container .desc-company:nth-of-type(1) .desc-company-value {
  border-top: 1px solid #D5D5D5;
}

.company-history {
  background-color: #222222;
}
.company-history .history-container .desc-history {
  align-items: start;
}
@media (max-width: 575.98px) {
  .company-history .history-container .desc-history {
    flex-direction: column;
  }
}
.company-history .history-container .desc-history .desc-history-label {
  font-size: 5rem;
  font-weight: bold;
  color: #00A8EC;
  padding: 0;
  line-height: 1;
}
.company-history .history-container .desc-history .desc-history-value {
  font-size: 1.5rem;
  padding: 4.4rem 4.4rem calc(4.4rem - 1.5em) 4.4rem;
  color: white;
  border-top: 1px solid #E0E0E0;
  margin-top: 1.5em;
  position: relative;
}
.company-history .history-container .desc-history .desc-history-value::before {
  content: "";
  position: absolute;
  top: -0.5em;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #00A8EC;
}
@media (max-width: 575.98px) {
  .company-history .history-container .desc-history .desc-history-value {
    width: 100%;
  }
}

.company-group .group-container {
  margin-top: 4.2rem;
}
.company-group .group-container .desc-group {
  border-bottom: 1px solid #D5D5D5;
  gap: 8rem;
}
@media (max-width: 767.98px) {
  .company-group .group-container .desc-group {
    flex-direction: column;
    gap: 0;
  }
}
.company-group .group-container .desc-group:first-of-type {
  border-top: 1px solid #D5D5D5;
}
.company-group .group-container .desc-group .desc-group-label {
  width: 300px;
}
@media (max-width: 767.98px) {
  .company-group .group-container .desc-group .desc-group-label {
    width: 100%;
    padding: 1.6rem 0;
  }
}
.company-group .group-container .desc-group .desc-group-label a {
  font-weight: bold;
  color: #00A8EC;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  transition: opacity 0.3s ease;
}
.company-group .group-container .desc-group .desc-group-label a:hover {
  opacity: 0.7;
}
.company-group .group-container .desc-group .desc-group-value {
  width: calc(100% - 380px);
  line-height: 2.1;
}
.company-group .group-container .desc-group .desc-group-value span {
  font-weight: bold;
  position: relative;
}
.company-group .group-container .desc-group .desc-group-value span::before {
  content: "■";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -4em;
  font-size: 0.2em;
  color: #00A8EC;
}
@media (max-width: 767.98px) {
  .company-group .group-container .desc-group .desc-group-value {
    width: 100%;
    padding: 1.6rem 0;
  }
}
/*# sourceMappingURL=map/company.css.map */

/* --- 表示制御 --- */
.pc-only { display: block !important; }
.sp-only { display: none !important; }
@media (max-width: 1200px) {
    .pc-only { display: none !important; }
    .sp-only { display: block !important; }
}

/* ==========================================
   1. PC版（現状を維持）
========================================== */
@media (min-width: 1201px) {
    .purpose-content .container { max-width: 100%; padding: 0; }
    .purpose-diagram { margin: 80px auto; width: 100%; }
    .diagram-timeline { text-align: center; margin-bottom: 60px; }
    .timeline-inline-wrap { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 900px; }
    .timeline-label { font-size: 1.8rem; font-weight: bold; }
    .timeline-arrow { flex-grow: 1; height: 1px; background: #000; margin: 0 15px; position: relative; }
    .timeline-arrow::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 10px solid #000; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
    .diagram-row { position: relative; width: 100%; }
    .row-bg { width: 65%;max-width: 1240px; height: 230px; display: flex; margin: 0 auto; align-items: center; justify-content: center; }
    .diagram-row._functional .row-bg { background-color: transparent; }
    .diagram-row._emotional .row-bg { background-color: transparent; }
    .row-label { font-size: 3rem; font-weight: bold; color: #222; }
    .card-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 1200px; display: flex; justify-content: space-between; pointer-events: none; z-index: 5; }
    .card-unit { width: 37%; display: flex; align-items: center; }
    .diagram-card { width: 100%; background: #fff; border: 3px solid #000; padding: 25px; pointer-events: auto; position: relative; min-height: 190px;}
    .card-title { font-size: 2.5rem; margin-bottom: 1.5rem; font-weight: bold; }
    .l-corner { position: absolute; width: 45px; height: 45px; }
    .l-corner::before, .l-corner span { content: ""; position: absolute; width: 100%; height: 100%; border: 4px solid #000; }
    ._br { right: -35px; bottom: -35px; } ._br::before, ._br span { border-left: none; border-top: none; } ._br span { transform: translate(8px, 8px); }
    ._bl { left: -35px; bottom: -35px; } ._bl::before, ._bl span { border-right: none; border-top: none; } ._bl span { transform: translate(-8px, 8px); }
    ._tr { right: -35px; top: -35px; } ._tr::before, ._tr span { border-left: none; border-bottom: none; } ._tr span { transform: translate(8px, -8px); }
    ._tl { left: -35px; top: -35px; } ._tl::before, ._tl span { border-right: none; border-bottom: none; } ._tl span { transform: translate(-8px, -8px); }
    .diagram-center { height: 120px; position: relative; z-index: 10; }
    .center-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: #fff; border: 6px solid #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 2.2rem; font-weight: bold; line-height: 1.4; }
}

/* ==========================================
   2. スマホ版（1200px以下）：完全矯正
========================================= */
@media (max-width: 1200px) {
.purpose-brand__catch {
  font-size: 3em;
  font-weight: 900;
  margin-top: 50px;
  text-align: center;
  line-height: 1.6em;
}
.purpose-white .purpose-box .purpose-textBox .purpose-title {
  font-size: 2.2rem;
  font-weight: bold;
  padding-top: 1em;
  line-height: 1.8;
  color: #222;
max-width: 340px;
}
.card-title {
	font-size: 2rem;
	margin-bottom: 1.5rem;
	font-weight: bold;
}
.purpose-brand__catch_bottom {
  font-size: 2em;
  font-weight: 900;
  margin-top: 0px;
  text-align: center;
  line-height: 1.6em;
}
    /* コンテナ幅を80%に絞り、左右の白地を広げる */
    .purpose-content .container { 
        max-width: 80% !important; 
        margin: 0 auto !important; 
        padding: 0 !important; 
        position: relative !important;
    }

    .diagram-row { width: 100% !important; position: relative !important; margin-bottom: 0px; }
    
    .row-bg { 
        width: 100% !important; height: auto !important; 
        padding: 50px 0 !important; display: flex !important;
        flex-direction: column !important; align-items: center !important;
        position: relative !important; z-index: 1;
    }
    .diagram-row._functional .row-bg { background-color: transparent !important; }
    .diagram-row._emotional .row-bg { background-color: transparent !important; }

    .row-label { font-size: 2.2rem !important; font-weight: bold; margin-bottom: 25px !important; display: block !important; text-align: center !important; }

    .card-container { position: static !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; }
    .card-unit { width: 100% !important; display: flex !important; justify-content: center !important; }

    /* 【解決】「現在↓未来」を白地エリアに縦書きで配置 */
    .sp-timeline.sp-only {
        position: absolute !important;
        left: -12.5% !important; /* コンテナの外側、白地部分に配置 */
        top: 20px !important;
        bottom: 20px !important;
        width: 30px !important;
        display: flex !important;
        z-index: 20;
    }
    /* 縦書きの指定 */
    .sp-timeline.sp-only::before { 
        content: "現在"; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        font-size: 1.4rem; font-weight: bold; color: #000;
        writing-mode: vertical-rl; text-orientation: upright;
    }
    .sp-timeline.sp-only::after { 
        content: "未来"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        font-size: 1.4rem; font-weight: bold; color: #000;
        writing-mode: vertical-rl; text-orientation: upright;
    }

    /* 長い縦線 */
    .sp-timeline.sp-only .line-drawing {
        position: absolute;
        top: 55px; bottom: 55px; /* 文字と被らないよう調整 */
        left: 50%; transform: translateX(-50%);
        width: 1.5px; background: #000;
    }
    /* 矢印の先端 */
    .sp-timeline.sp-only .line-drawing::after {
        content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        border-left: 5px solid transparent; border-right: 5px solid transparent;
        border-top: 8px solid #000;
    }

    .diagram-card { width: 90% !important; max-width: 320px; background: #fff !important; border: 2px solid #000 !important; padding: 15px !important; position: relative !important; }
    .l-corner { display: none !important; }

    /* 中央エリア */
    .diagram-center { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 20px 0 !important; }
    .center-circle { order: 2 !important; width: 170px !important; height: 170px !important; border: 4px solid #000 !important; border-radius: 50% !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0px 0 !important; font-size: 2rem !important; font-weight: bold; }
    .sp-arrow._down { order: 1 !important; display: block !important; font-size: 4rem; }
    .sp-arrow._up { order: 3 !important; display: block !important; font-size: 4rem; }
    ._down::after { content: "︾"; }
    ._up::after { content: "︽"; }
}

@media (max-width: 1200px) {
    /* コンテナ幅の設定（前回同様） */
    .purpose-content .container { 
        max-width: 100% !important; 
        margin: 0 auto !important; 
        position: relative !important;
    }

    /* 【ここが重要】親要素に背景色を適用し、カードごと包む */
    .diagram-row { 
        width: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        padding-bottom: 0px !important; /* 背景の下端の余白 */
    }
    
    /* クラスに応じて背景色を親に持たせる */
    .diagram-row._functional { background-color: transparent !important; }
    .diagram-row._emotional { background-color: transparent !important; }

    /* 元の背景要素は透明にして、位置合わせだけに使う */
    .row-bg { 
        background-color: transparent !important; /* 背景を消す */
        width: 100% !important;
        height: auto !important;
        padding: 0px 0 20px !important;
        display: block !important;
        text-align: center !important;
    }

    /* カードコンテナ：絶対配置を解除して親（背景色付きのrow）の中に置く */
    .card-container { 
        position: static !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding-bottom: 20px !important;
    }

    /* カード本体：横幅を少し広げてバランスを調整 */
    .diagram-card {
        width: 100% !important; 
        max-width: 360px;
        background: #fff !important; 
        border: 2px solid #000 !important;
        padding: 20px !important;
        margin: 0 auto !important;
    }

    /* 矢印（現在↓未来）の位置調整 */
    .sp-timeline.sp-only {
        position: absolute !important;
        left: -10.5% !important; /* 80%のコンテナの外、白い余白に配置 */
        top: 0 !important;
        bottom: 0 !important;
        z-index: 20;
    }

    /* ...（縦書きや線のコードは前回のものを維持）... */
}