@charset 'utf-8';

/*----------------------------------------
	このCSSファイルには全ページ共通して使用されるCSSを記載する
----------------------------------------*/

/*----------------------------------------
	base ベースルール
----------------------------------------*/

/* 標準的なフォント（本文などに使用） */
html {
    font-size: 62.5%;
    font-family: "Noto Sans JP", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #505050;
}

/* 全体の背景色 */
body {
    background-color: #fefdfc;
}

/* 画像が荒くならないように対策 */
img {
    max-width: 100%;
    height: auto;
}

/* ヘッダー下のフォントサイズ */
header * {
    font-size: 1.8rem;
}

/* フッター下のフォントサイズ */
footer * {
    font-size: 1.4rem;
}

/*----------------------------------------
	layout レイアウトルール
----------------------------------------*/

/* wrapper（ページ内全体） */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* main */
.main {
    width: 100%;
    margin-top: 120px; /* 固定ヘッダーに隠れないように高さを確保 */
    margin-bottom: 70px;
    flex: 1; /* コンテンツが少なくて余白ができてしまう場合はmainで埋める */
}

/* main内のコンテンツに使用するinnerクラス */
.main-inner {
    max-width: 1140px;
    width: 90%; /* .main内のうち幅90%の領域で表現する */
    padding-left: 5px;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
}


/* ▼ スマホ（大） / 小型タブレット向け (540px以上） */
@media (min-width: 540px) {
    .main {
        margin-top: 130px;
    }
}

/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    .main {
        margin-top: 150px;
        margin-bottom: 90px;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .main {
        margin-top: 200px;
        margin-bottom: 130px;
    }
}

/* ▼ フルサイズ用（1140px以上） */
@media (min-width: 1140px) {
    .main {
        margin-top: 155px;
    }
}

/*----------------------------------------
	h2 のデザイン
----------------------------------------*/

/* h2の装飾 */
h2.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fefdfc;
    background-color: #5aa5bd;
    border-radius: 50px;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 25px;
}

.request-section h2.section-title {
    background-color: #868686;
}


/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    h2.section-title,
    .request-section h2.section-title {
        font-size: 2rem;
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 30px;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    h2.section-title,
    .request-section h2.section-title {
        font-size: 2.2rem;
        padding-top: 12px;
        padding-bottom: 14px;
        padding-left: 40px;
    }
}

/*----------------------------------------
	header ヘッダー
----------------------------------------*/

.header {
    width: 100%;
    background-color:#e6e7eb;
    position: fixed; /* ヘッダーを上部に固定 */
    z-index: 80;
}

.header-inner {
    height: 90px;
    max-width: 1140px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    margin-right: 75px; /* 最小幅の320pxになったときにメニューと接触しないように */
}

.header-logo img {
    width: 260px;
}


/* ▼ スマホ（大） / 小型タブレット向け (540px以上） */
@media (min-width: 540px) {
    .header-inner {
        height: 100px;
    }

    .header-logo {
        margin-right: 0px; /* 接触することはないので解除しておく */
    }

    .header-logo img {
        width: 300px;
        margin-left: 5px;
    }
}

/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    .header-inner {
        height: 110px;
    }

    .header-logo img {
        width: 355px;
        margin-left: 10px;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .header-inner {
        height: 150px;
    }

    .header-logo img {
        width: 580px;
    }
}

/* ▼ フルサイズ用（1140px以上） */
@media (min-width: 1140px) {
    .header-inner {
        height: 110px;
    }

    .header-logo img {
        width: 490px;
        margin-left: 0px; /* 解除 */
    }
}

/*----------------------------------------
	hamburger ハンバーガーメニュー
----------------------------------------*/

.g-nav {
    /* position:fixed;にし、z-indexの数値を大きくして前面へ */
    position: fixed;
    z-index: 90;
    /* ナビのスタート位置と形状 */
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh; /* ナビの高さ */
    background: #e6e7eb;
    transition: all 0.6s; /* スライドイン・アウト */
}

/* アクティブクラスがついたら位置を0に */
.g-nav.panelactive {
    right: 0;
}

/* ナビゲーション */
.g-nav-inner {
    /* ナビゲーション天地中央揃え */
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-menu {
    padding-right: 30px;
    padding-left: 30px;
}

.g-nav li a {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #268793;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    position: relative;
    transition: color 0.3s ease; /* hoverアクション用 */
}

.g-nav li.sub-menu a {
    color: #9b9b9a;
}

.menu-area {
    display: flex;
    align-items: center;
    flex: 1; /* 左側が残りの幅を占める */
}

/* 下線（実線） */
.main-menu::after {
    content: "";
    display: block;
    background-color: #268793;
    height: 2px; /* 線幅 */
    border-radius: 1px; /* 線幅の半分を設定する */
}

/* 区切り線（点線） */
.sub-menu::before {
    content: "";
    display: block;
    border-top: 2px dotted #9b9b9a;
}

/* ● 装飾 */
.round-decoration {
    display: inline-block;
    flex-shrink: 0; /* ●が潰れないように */
    width: 6px;
    height: 6px;
    background-color: #868686;
    border-radius: 50%;
    margin-right: 8px; /* テキストとの余白調整 */
}

/* サブメニュー（最初は隠しておく） */
.sub-menu-list {
    display: none;
}

/* SP版では非表示にする */
.en-label,
.mail-icon {
    display: none;
}


/* ▼ スマホ（大） / 小型タブレット向け (540px以上） */
@media (min-width: 540px) {
    .g-nav-inner {
        /* 横に広がりすぎるため、左右に余白を追加 */
        padding-left: 10%;
        padding-right: 10%;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .g-nav {
        position: relative;
        /* ナビのスタート位置と形状 */
        right: 0; /* navを表に出す */
        height: 100px; /* navの高さ */
        background: none; /* 背景削除 */
        transition: none; /* 動き削除 */
    }

    .g-nav-inner {
        position: relative;
        padding-left: 0px;
        padding-right: 0px;
    }

    /* メールアイコンを表示する */
    .mail-icon {
        display: block;
        width: 35px;
        height: auto;
        margin-right: 12px;
    }

    /* header-upperの調整 */
    .header-upper {
        display: flex;
        justify-content: flex-end; /* 右寄せ */
    }

    .header-upper .main-menu {
        width: 200px; /* お問い合わせボタンの大きさ調整 */
        padding-right: 0px;
        padding-left: 0px;
        margin-right: 10px;
    }

    .header-upper .menu-area {
        justify-content: center;
        flex-direction: row; /* flex-direction: columnを解除して横並びに戻す */
    }

    .header-upper .main-menu a {
        color: #fefdfc;
        background-color:#5aa5bd;
        border-radius: 50px;
        padding-top: 3px;
        padding-bottom: 5px;
        padding-left: 0px;
        padding-right: 0px;
        transition: background-color 0.2s ease;
    }

    .contact-menu .jp-label {
        font-size: 1.6rem;
    }

    .header-upper .main-menu a:hover {
        background-color: #669e31;
    }

    /* header-lowerの調整 */
    .header-lower {
        display: flex; /* 横並びに */
        justify-content: flex-end; /* 右寄せ */
        align-items: center; /* 水平中央揃え */
        gap: 8px;
        margin-top: 10px;
    }

    .header-lower .main-menu {
        padding-right: 0px;
        padding-left: 0px;
    }

    .header-lower .main-menu a {
        position: relative;
        overflow: hidden; /* はみ出し防止 */
        padding-top: 5px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* SP版で使用した下線（実線）を非表示にする */
    .main-menu::after {
        display: none;
    }

    /* ホバーしたときに下線を表示 */
    .header-lower .main-menu a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0; /* ホバー前は見えないように */
        height: 2px;
        background-color: #669e31;
        border-radius: 1px;
        transition: width 0.4s ease;
    }

    .header-lower .main-menu a:hover::after {
        width: 80%;
    }

    /* PC版では表示する */
    .en-label {
        display: block;
        font-size: 1.25rem;
        letter-spacing: 0;
        color: #6AACB4;
    }

    .main-menu a:hover .en-label {
        color: #a0b46a;
    }

    /* en-label と jp-labelを縦並びにする */
    .menu-area {
        flex-direction: column; /* 縦並びに */
    }

    /* sub-menuの中は横並びのまま */
    .sub-menu .menu-area {
        flex-direction: row; /* flex-direction: columnを解除して横並びに戻す */
    }

    /* アコーディオンメニューのクリック可能範囲の調整 */
    .g-nav li.sub-menu a {
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 35px;
        padding-right: 35px;
    }

    /* SP版で使用した区切り線（点線）を非表示にする */
    .sub-menu::before {
        display: none;
    }

    /* ● 装飾 */
    .round-decoration {
        width: 5px;
        height: 5px;
        margin-right: 10px; /* テキストとの余白調整 */
    }
}

/* ▼ フルサイズ用（1140px以上） */
@media (min-width: 1140px) {
    .mail-icon {
        width: 45px;
        height: auto;
        margin-right: 0px;
    }

    /* header-upperは使わない */
    .header-upper {
        display: none;
    }

    .contact-menu .jp-label {
        font-size: 1.3rem;
        letter-spacing: 0.04em;
        margin-top: -5px;
    }

    .header-lower .contact-menu a {
        color: #fefcfc;
        background-color:#5aa5bd;
        border-radius: 8px;
        padding-top: 1px;
        padding-bottom: 9px;
        padding-left: 10px;
        padding-right: 8px;
        transition: background-color 0.2s ease;
        margin-left: 12px;
        margin-right: 10px;
    }

    .header-lower .contact-menu a:hover {
        background-color: #669e31;
    }

    .header-lower {
        margin-top: 0px;
    }

   /* contact-menuは下線を表示しない */
    .header-lower .contact-menu a::after {
        display: none;
    }
}


/*========= 「>」アイコン =========*/

/* 丸背景 */
.arrow-icon {
    position: relative;
    width: 25px;
    height: 25px;
    background: #268793;
    border-radius: 50%;
    flex-shrink: 0; /* 縮まないように */
    margin-left: 15px;
    transition: background-color 0.2s ease; /* hoverアクション用 */
}

/* 矢印1 */
.arrow-icon::before,
.arrow-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    background-color: #fefdfc;
    border-radius: 1px;
    top: 45%; /* 丸背景に収まるように微調整 */
    left: 34.5%;
    transform-origin: right center;
}

.arrow-icon::before {
    transform: rotate(45deg) translateY(25%);
}

.arrow-icon::after {
    transform: rotate(-45deg) translateY(-25%);
}

.sub-menu .arrow-icon {
    background: #9b9b9a;
}


/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .g-nav .arrow-icon {
        display: none; /* PC版はg-navの「>」アイコンを非表示にする */
    }
}


/*========= アコーディオンメニュー用（+/-） =========*/

.with-sub > a .arrow-icon::before,
.with-sub > a .arrow-icon::after {
    content: "";
    position: absolute;
    background-color: #fefdfc;
    border-radius: 1px;
}

/* 横棒（+の横線） */
.with-sub > a .arrow-icon::before {
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 縦棒（+の縦線） */
.with-sub > a .arrow-icon::after {
    width: 2px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* アコーディオンが開いたとき（-） */
.with-sub.open > a .arrow-icon::after {
    display: none;
}

/* アコーディオンアイコン（+ / -）のアニメーション */
.with-sub > a .arrow-icon {
    transition: transform 0.5s ease;
}

/* 開いたときに回転（+ → −） */
.with-sub.open > a .arrow-icon {
    transform: rotate(360deg);
}

/* メニュー（ホバー時） */
.main-menu a:hover,
.g-nav li.sub-menu a:hover {
    color: #669e31;
}

.main-menu a:hover .arrow-icon,
.sub-menu a:hover .arrow-icon {
    background-color: #669e31;
}


/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .with-sub {
        position: relative; /* 親として基準 */
    }

    .with-sub .sub-menu-list {
        display: block; /* display: noneを解除 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background-color: #e6e7eb; /* ヘッダーの背景色と合わせる */
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1); /* ぼかし無し */
        opacity: 0;
        visibility: hidden;
        z-index: 99;
        white-space: nowrap; /* 折り返さないように */

        /* アコーディオンメニューの動き */
        max-height: 0; /* 高さゼロにして見えないように */
        overflow: hidden; /* はみ出た内容は非表示に */
        opacity: 0; /* 透明にする */
        visibility: hidden; /* 完全に見えないように */
        padding-top: 0;
        padding-bottom: 0;
    }

    .with-sub:hover .sub-menu-list {
        max-height: 300px; /* 中身に応じて調整 */
        opacity: 1; /* 透明度を戻す */
        visibility: visible; /* 見えるように */
        transform: translateX(-50%) translateY(30%);
        padding-bottom: 10px;
    }

    /* メニュー（ホバー時） */
    .header-upper .main-menu a:hover {
        color: #fefdfc; /* 文字色は変わらないように */
    }
}

/* transitionは hover できる端末だけに適用する */
@media (min-width: 992px) and (hover: hover) {
    .with-sub .sub-menu-list {
        transition: all 0.3s ease, padding 0.3s ease;
    }
}

/* ▼ フルサイズ用（1140px以上） */
@media (min-width: 1140px) {
    /* メニュー（ホバー時） */
    .header-lower .contact-menu a:hover {
        color: #fefdfc; /* 文字色は変わらないように */
    }
}


/*========= ボタンのためのCSS =========*/

.hamburger-label {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #fefdfc;
    margin-top: 30px;
}

.hamburger-menu {
    background-color: #5aa5bd;
    border-radius: 8px;
    position: fixed;
    z-index: 100; /* ボタンを最前面に */
    right: 20px;
    width: 55px;
    height: 55px;
}

.hamburger-inner {
    display: flex;
    justify-content: center;
}

/*×に変化*/
.hamburger-menu span.line {
    position: absolute;
    display: block;
    transition: transform 0.4s, opacity 0.4s;
    width: 50%; /* 線の長さ */
    height: 3px; /* 線の太さ */
    border-radius: 10px;
    background-color: #fefdfc;
}

.hamburger-menu span.line:nth-of-type(1) {
    top: 10px;
}

.hamburger-menu span.line:nth-of-type(2) {
    top: 20px;
}

.hamburger-menu span.line:nth-of-type(3) {
    top: 30px;
}

.hamburger-inner.active span.line:nth-of-type(1) {
    transform: translate(0px, 10px) rotate(45deg);
}

.hamburger-inner.active span.line:nth-of-type(2) {
    opacity: 0;
}

.hamburger-inner.active span.line:nth-of-type(3) {
    transform: translate(0px, -10px) rotate(-45deg);
}


/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    .hamburger-label {
        font-size: 1.2rem;
    }

    .hamburger-menu {
        right: 25px;
        width: 62px;
        height: 62px;
    }

    .hamburger-menu span.line {
        width: 52%; /* 線の長さ */
    }

    .hamburger-menu span.line:nth-of-type(1) {
        top: 12px;
    }

    .hamburger-menu span.line:nth-of-type(2) {
        top: 22px;
    }

    .hamburger-menu span.line:nth-of-type(3) {
        top: 32px;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .hamburger-menu {
        display: none; /* PC版はハンバーガーメニューを非表示にする */
    }
}

/*----------------------------------------
	footer フッター
----------------------------------------*/

.footer {
    margin-top: auto;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    color: #fefdfc;
    background-color: #5aa5bd;
}

.center-name {
    font-weight: 600;
}

.center-info {
    margin-top: 8px;
}

.center-info p {
    font-size: 1.2rem;
}

.center-note{
    font-size: 1.2rem;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* copyrightのサイズ */
small {
    font-size: 1.1rem;
}


/* ▼ タブレット / 小型ノートPC向け （768px以上） */
@media (min-width: 768px) {
    .center-info p,
    .center-note {
        font-size: 1.3rem;
    }

    .center-info {
        display: flex;
        justify-content: center;
    }

    .center-info p {
        position: relative;
        padding-left: 20px; /* 縦線からの余白 */
        padding-right: 20px; /* 縦線からの余白 */
    }

    /* 縦線（区切り） */
    .center-info p+p::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10%;
        bottom: 10%;
        width: 2px;
        background-color: #fefdfc;
        border-radius: 10px;
    }

    /* copyrightのサイズ */
    small {
        font-size: 1.2rem;
    }
}

/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .footer p {
        font-size: 1.4rem;
    }
}

/*----------------------------------------
	ページトップへ戻る
----------------------------------------*/

/* ボタンをページ右下に固定 */
.page-top {
    position: fixed;
    right: 8%;
    bottom: 30px; /* ここの数値を変更するときはjs内の数値も一緒に変更すること */
    width: 65px; /* ボタン背景の円の大きさ */
    height: 65px; /* ボタン背景の円の大きさ */
    border-radius: 100px;
    background: rgba(90, 164, 189, 0.6);
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* はじめは非表示にしておく */
    opacity: 0;
    transform: translateY(100px);
}

/* 矢印の調整 */
.arrow {
    position: relative;
    width: 20px;
}

.arrow span {
    position: absolute;
    width: 2.5px; /* 線の太さ */
    height: 13px; /* 線の長さ */
    background-color: #fefdfc;
    border-radius: 2px;
}

.arrow span:nth-of-type(1) {
    transform: rotate(45deg);
    left: 5px;
}

.arrow span:nth-of-type(2) {
    transform: rotate(-45deg);
    right: 5px;
}

/* 文字の調整 */
.top-label {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: #fefdfc;
    text-align: center;
    margin-top: 15px;
}

/* 上に上がる動き */
.page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 下に下がる動き */
.page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0; /* 下がったら非表示にする */
        transform: translateY(100px);
    }
}

/* トップへ戻る（ホバー時） */
.page-top:hover {
    background: rgba(102, 158, 49, 0.6);
}


/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .page-top {
        bottom: 65px;
    }
}

/*----------------------------------------
    パンくず
----------------------------------------*/

/* ハンバーガーメニューを表示しているサイズ帯は、パンくずを非表示にする */
.breadcrumb-area {
    display: none;
}


/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    .breadcrumb-area {
        display: block;
        font-size: 1.3rem;
        margin-top: 10px;
        margin-bottom: 18px;
        padding-left: 15px;
    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
    }

    .breadcrumb li {
        position: relative;
        padding-left: 22px;
        margin-right: 12px;
    }

    /* 1個目以外に 「>」をつける */
    .breadcrumb li:first-child {
        padding-left: 0px;
    }

    .breadcrumb li:not(:first-child)::before,
    .breadcrumb li:not(:first-child)::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 1px;
        background-color: #9b9b9a;
        border-radius: 0.5px;
        top: 50%;
        left: 0;
        transform-origin: right center;
    }

    .breadcrumb li:not(:first-child)::before {
        transform: rotate(45deg) translateY(50%);
    }

    .breadcrumb li:not(:first-child)::after {
        transform: rotate(-45deg) translateY(-50%);
    }

    .breadcrumb li a {
        color: #0082aa;
        transition: color 0.2s ease;
    }

    .breadcrumb li a:hover {
        color: #669e31;
    }
}

/*----------------------------------------
    メニューのカレント表示
----------------------------------------*/

/* メニュー内の a に current が付いたときの視覚確認 */
.g-nav li a.current {
    color: #669e31;
}

.g-nav li a.current .en-label {
    color: #a0b46a;
}


/* ▼ デスクトップPC向け (992px以上) */
@media (min-width: 992px) {
    /* 下線の表示 */
    .g-nav li a.current::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        height: 2px;
        background-color: #669e31;
        border-radius: 1px;
        width: 80%;
        transition: none;
    }
}


/* 確認OK（2025.8.9_10:51） */