@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    ※ Water blue → Green conversion version
*/

/* ==============================
   背景グラデーション（ブルー → グリーン）
============================== */
.bg-right, .bg-left, .bg-gra {
    position: relative;
}
.bg-right::before {
    content: "";
    display: block;
    width: 92vw;
    right: 0;
    z-index: -2;
    background: linear-gradient(60deg, #f6fafc, #e9f7e9); /* #e8f0f8 → 淡いグリーン */
    top: 0;
    height: 100%;
    position: absolute;
}
.bg-left::before {
    content: "";
    display: block;
    width: 92vw;
    left: 0;
    z-index: -2;
    background: linear-gradient(-60deg, #f6fafc, #e9f7e9);
    top: 0;
    height: 100%;
    position: absolute;
}

.bg-gra:before {
    content: "";
    display: block;
    width: 100vw;
    right: 0;
    z-index: -2;
    background: linear-gradient(0deg, #ffffff, #e9f7e9);
    top: 0;
    height: 100%;
    position: absolute;
}
@media (max-width: 781px) {
    .bg-right::before, .bg-left::before {
        width: 100vw;
    }
}

/* ==============================
   MV（メインビジュアル配置）
============================== */
@media (min-width: 960px) {
    #main_visual picture.p-mainVisual__imgLayer.c-filterLayer__img {
        padding-left: 33vw;
    }
    #main_visual .p-mainVisual__textLayer {
        max-width: 35vw;
        left: 0;
        top: 30px;
        transform: unset;
    }
    .p-mainVisual__textLayer>.p-blogParts {
        display: none;
    }
}

@media (max-width: 959px) {
    .p-mainVisual__imgLayer.c-filterLayer__img {
        display: none;
    }
   .mv-text {
    writing-mode: vertical-rl;
    text-align: left;
    padding-bottom: 20px;
   }
    .p-mainVisual__slideTitle, .p-mainVisual__slideText {
        display: none;
    }
    .sp-mv .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
        justify-content: center;
        display: flex;
    }
    .p-mainVisual__textLayer>.p-blogParts {
        margin-top: 0;
    }
}

/* ==============================
   グローバルナビ（青 → グリーン系）
============================== */
.c-gnav > li:hover > a, .c-gnav > .-current > a {
    background: transparent;
}
.c-gnav > li:not(:last-child):hover > a {
    color: #4FB96A; /* 旧 #4b8fcf */
    transition: all .25s;
}
.c-gnav > li:last-child:hover > a {
    color: #ffffff;
    transition: all .25s;
}

/* ==============================
   見出しグラデーション（緑版）
============================== */
.gradient-text span {
    background: linear-gradient(to right, #26763A, #7AD65A); /* 旧 #0D79BE → グリーン */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2.wp-block-heading.title-line, h3.wp-block-heading.title-line {
    position: relative;
    padding: 0.25em 0;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

h2.wp-block-heading.title-line::after,
h3.wp-block-heading.title-line::after {
    content: "";
    display: block;
    height: 2px;
    width: calc(100% + 0.5em);
    margin-left: -0.25em;
    background: linear-gradient(to right, #26763A, #7AD65A); /* 旧 #0D79BE → #57C9F7 */
    margin-top: 0.2em;
}

/* ==============================
   ボタン（青グラデ → グリーングラデ）
============================== */
@media (max-width: 781px) {
    a.swell-block-button__link {
        width: 80%;
    }
}

input[type="submit"] {
  background: linear-gradient(90deg, #2E9E4A, #7AD65A); /* 旧 #3b8edc → #64b5f6 */
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 14px 60px;
  font-size: 16px;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(56,160,85,0.25); /* 旧 rgba(59,142,220 */
}
input[type="submit"]:hover {
  background: linear-gradient(90deg, #7AD65A, #2E9E4A);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56,160,85,0.3);
}

/* ==============================
   固定ヘッダー（そのまま）
============================== */
@media (min-width: 960px) {
  .l-header {
    position: fixed!important;
  }
  .p-breadcrumb {
    margin-top: calc(var(--logo_size_pc) + 32px);
  }
  .l-header .l-container {
    max-width: 100%!important;
  }
  body {
    padding-top: calc(var(--logo_size_pc) + 32px);
  }
}

/* ==============================
   section-about（画像背景そのまま）
============================== */
.kansai-map {
    position: relative;
}
.kansai-map::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 50px;
    width: 100%;
    height: 100%;
    background-image: url("../swell_child/img/kansai-bg.webp");
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: -99;
    pointer-events: none;
    opacity: 0.5;
}

@media (max-width: 781px) {
    .kansai-map::after {
        top: 70%;
        right: 0;
        width: 50%;
        height: 50%;
        opacity: 0.4;
    }
}

/* ==============================
   導入実績（円枠のまま）
============================== */
.section-case-record .wp-block-group {
    border-radius: 50%;
    height: 19rem;
    width: 19rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.section-case-record .wp-block-columns {
    justify-content: center;
}

/* ==============================
   SSW コラムのスライダー（色変更）
============================== */
.section-ssw-column .swiper-pagination-bullet-active {
    background: #7AD65A; /* 旧 #57C9F7 */
}

/* ==============================
   FAQ（色そのまま）
============================== */
.faq_q {
    cursor: pointer;
    position: relative;
    padding-right: 30px;
}

.faq_q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: bold;
}

.faq_q.active::after {
    content: '-';
    font-size: 2em;
    font-weight: bold;
}

/* ==============================
   沿革カード（青 → 緑系変換）
============================== */
.card:nth-of-type(4n+1) {
    background-color: #26763A; /* 旧 #005F9E */
}
.card:nth-of-type(4n+2) {
    background-color: #2E9E4A; /* 旧 #2e8bc8 */
}
.card:nth-of-type(4n+3) {
    background-color: #7AD65A; /* 旧 #6eb1d5 */
}
.card:nth-of-type(4n+4) {
    background-color: #A6EFA0; /* 旧 #6ed5af */
}

/* 矢印の色変換 */
.card:nth-of-type(4n+1) .head::after {
    border-color: #26763A;
}
.card:nth-of-type(4n+2) .head::after {
    border-color: #2E9E4A;
}
.card:nth-of-type(4n+3) .head::after {
    border-color: #7AD65A;
}
.card:nth-of-type(4n+4) .head::after {
    border-color: #A6EFA0;
}

/* ==============================
   リッチカラム（ブルー → グリーン）
============================== */
.rich-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  border: 7px solid transparent;
  background-image: linear-gradient(#fff, #fff),
                    linear-gradient(90deg, #DAFF91, #7BE08C); /* 旧 #007BFF, #00D4FF */
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  min-height: 180px;
}

.rich-col:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* チェックアイコン（青 → 緑） */
.rich-col::before {
  content: "✔";
  position: absolute;
  top: -16px;
  left: 13px;
  background: #7BE08C; /* 旧 #007BFF */
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .rich-col {
    border-width: 4px;
    border-radius: 12px;
    min-height: 100px;
  }
}

/* ==============================
   point テキスト（影濃淡そのまま）
============================== */
.point {
  color: #fff;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: .02em;
  text-shadow:
    0 3px 14px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.45),
    0 0 3px rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}

/* ==============================
   お問い合わせフォーム（青→緑）
============================== */

.table {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 48px;
  box-shadow: 0 8px 20px rgba(56,160,85,0.08); /* 旧 rgba(0,110,180 */
  border: 1px solid #d8ead9; /* 優しい淡緑枠 */
}

.th {
  width: 180px;
  font-weight: 700;
  color: #2F5E39; /* 旧 #285c8f */
  font-size: 16px;
  letter-spacing: .02em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  font-size: 15px;
  color: #1e2f3f;
  background: #f4fbf4; /* 青み白 → 緑み白へ */
  border: 1px solid #bcdcc0;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all .3s ease;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #2E9E4A;
  box-shadow: 0 0 0 3px rgba(46,158,74,0.15);
  background: #ffffff;
  outline: none;
}

.button {
  text-align: center;
  margin-top: 30px;
}

/* ==============================
   top-icon 位置調整（色変更なし）
============================== */
.top-icon {
  gap: 0;
  padding-right: 40px;
  z-index: 1;
}

/* ヘッダー */

 @media screen and (min-width: 960px) {
  .l-header__menuBtn {
    display: block !important;
    position: absolute;     /* 絶対配置でヘッダー内に固定 */
    top: 50%;               /* 縦方向の中央 */
    right: 20px;            /* 右端からの距離 */
    transform: translateY(-50%); /* 完全に中央に合わせる */
  }

  .p-spMenu {
    display: block !important;
  }

  .p-spMenu__inner {
    max-width: 50%;
  }
}