@charset "UTF-8";


/* ===================================================
   基本設定
   =================================================== */

html {

    /* grid.cssのfont-size: 62.5%;（1rem=10px基準）を引き継ぐ。
       この行がないと、サイト内のrem指定がすべて1.6倍になってしまう */
    font-size: 62.5%;

    scroll-behavior: smooth;

}


:root {

    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;

}


/* ===================================================
   全体リセット & 共通設定
   =================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}


body {

    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

    font-feature-settings: "palt";

    margin: 0;
    padding: 0;

}


/* 背景アニメーション：ウインドウ全面に固定表示（縦横比は維持しない） */
.site-bg-wrap {

    position: fixed;

    inset: 0;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    z-index: -1;

    pointer-events: none;

    opacity: 0.6;

    animation: bgFadeIn 3.0s ease-in both;

}


@keyframes bgFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 0.6;
    }

}


/* ウインドウ幅＝画像の幅、ウインドウ高さ＝画像の高さになるよう、そのまま伸縮させる */
.site-bg-lottie {

    display: block;

    width: 100%;
    height: 100%;

}


@keyframes markFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* mark01.svg：常にウインドウの中央に固定表示（背景アニメーションの上に重ねる） */
.site-mark {

    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

    animation: markFadeIn 3.0s ease-in both;

    pointer-events: none;

}


.site-mark img {

    display: block;

    width: 36vw;

    height: auto;

}


img {

    max-width: 100%;
    height: auto;

}


a {

    display: block;

    color: var(--link-color);

    text-decoration-line: none;

}


a:hover {

    color: var(--linkhover-color);

}


/* ===================================================
   コンテナ
   =================================================== */

.container {

    max-width: 100%;
    width: 100%;

    padding-left: 14%;
    padding-right: 14%;

    margin: 0 auto;

    box-sizing: border-box;

}


/* ===================================================
   ヘッダー
   =================================================== */

header {

    position: sticky;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background-color: rgba(255, 255, 255, 0.85);

}


.header {

    display: flex;

    flex-direction: row;

    align-items: center;

    padding-top: 3.8rem;
    padding-bottom: 1.4rem;

}


/* h1のデフォルト余白・行送りをリセットして、ロゴとボタンの天地を揃える */
.header h1 {

    margin: 0;

    line-height: 0;

}


.header-logo {

    display: block;

    height: 26.5px;

    width: auto;

}


.header-box {

    margin-left: auto;

}


.contact-button {

    padding: 1.0rem 2.5rem;

    display: inline-block;

    background-color: #aaaaaa;

    color: #ffffff;

    border: none;

    border-radius: 30px;

    font-size: 1.0rem;

    font-weight: normal;

    letter-spacing: 0.1em;

    transition: background-color 0.3s ease;

}


.contact-button:hover {

    background-color: #888888;

    color: #ffffff;

}


nav ul {

    display: flex;

    flex-direction: row;

    justify-content: space-around;

    list-style: none;

    margin: 1rem 0 0 0;
    padding: 0;

}


nav li {

    flex: 1 0 auto;

}


nav li a {

    text-decoration: none;

    text-align: center;

    width: 100%;

    padding: 0.5rem;

}


nav a:hover {

    background-color: var(--back-color);

}


/* ===================================================
   メインコンテンツ & タイトル
   =================================================== */

main {

    margin-top: 4rem;

}


section {

    margin: 4rem 0;

    padding: 3rem 0 0 0;

    scroll-margin-top: 100px;

}


h2 {

    text-align: center;

    font-size: 2.3rem;

    margin-bottom: 2rem;

}


.sub-text {

    font-size: 0.45em;

    display: block;

    font-weight: normal;

    margin-bottom: 5px;

    letter-spacing: 0.3em;

    color: #666;

}


.main-text {

    font-size: 1.3em;

    font-weight: normal;

    font-family: "Shippori Mincho", serif;

    font-feature-settings: "palt";

    text-spacing-trim: space-all;

    letter-spacing: 0.03em;

    color: #666;

}


/* SUN-AI PRIDE「愛のある広告」を。→ 画像置き換え */
.catch-image {

    display: inline-block;

    width: 352px;

    max-width: 100%;

    height: auto;

    margin-top: 5.5rem;
    margin-bottom: 2rem;

}


.under {

    display: inline-block;

    font-size: 85%;

    border-bottom: 0.1rem solid var(--base-color);

    padding: 0 0.0rem 0.2rem 0.0rem;

    font-weight: 500;

    -webkit-text-stroke: 0.5px var(--base-color);

    letter-spacing: 0.05em;

}


p,
main p {

    padding: 0;

    margin: 0 0 1.5rem 0;

    width: 100%;

    color: #666;

    font-family: "Shippori Mincho", serif;

    font-size: 1.8rem;

    text-align: justify;

    text-align-last: left;

    text-justify: inter-character;

    font-feature-settings: "palt";

    text-spacing-trim: space-all;

    letter-spacing: -0.04em;

    word-break: break-word;

    line-break: strict;

    line-height: 1.9;

}


/* 「愛のある広告を。」直下の本文：文字詰めを強化（括弧・句読点まわりの余白を詰める） */
.catch p {

    font-feature-settings: "palt" 1, "kern" 1, "halt" 1;

    font-variant-east-asian: proportional-width;

    letter-spacing: -0.03em;

}


/* ---------------------------------------------------
   括弧・句読点を個別に詰める（JSでspan化した対象）
   括弧は「外側」だけを詰め、内側の余白はそのまま残します。
   --------------------------------------------------- */

/* 開き括弧「『（：外側＝左側だけを詰める */
.catch p .kern-open {

    margin-left: -0.40em;

    margin-right: 0;

}


/* 閉じ括弧」』）：外側＝右側だけを詰める */
.catch p .kern-close {

    margin-left: 0;

    margin-right: -0.40em;

}


/* 読点（、）：右側の余白を詰める */
.catch p .kern-touten {

    margin-left: 0;

    margin-right: -0.30em;

}


/* 句点（。）：右側の余白を詰める */
.catch p .kern-kuten {

    margin-left: 0;

    margin-right: -0.30em;

}


/* 行頭に開き括弧が来た場合、左にはみ出さないよう調整 */
.catch p .kern-open:first-child {

    margin-left: 0;

}


/* Aboutセクションはフォント変更前の元のゴシック体を維持 */
#sec2 p {

    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

    font-size: 1.5rem;

    letter-spacing: 0.02em;

}


/* Aboutは英字フォントのため、他の見出しと同じpaddingでも余白が広く見える。詰めて揃える */
#sec2 .under {

    padding-bottom: 0.05rem;

}


/* ===================================================
   About & 画像切替
   =================================================== */

.about-bottom-content {

    margin-top: 4rem;

}


.about-logo {

    text-align: center;

    margin-top: 5rem;
    margin-bottom: 3rem;

}


.about-logo img {

    max-width: 100%;

    height: auto;

    width: 85%;

}


.service-single-img {

    text-align: center;

    width: 100%;

}


.service-single-img img {

    width: 100%;

    height: auto;

}


.sp-only {

    display: none !important;

}


.pc-only {

    display: block !important;

}


/* ===================================================
   会社概要
   =================================================== */

#sec4 {

}


.company-list {

    width: 100%;

    margin: 0;

    padding: 0;

}


.company-item {

    padding: 1.8rem 0;

    border-bottom: 1px solid var(--border-color, #ccc);

    display: flex;

    flex-direction: column;

    gap: 0.1rem;

}


.company-dt {

    font-weight: 500;

    color: var(--base-color, #000);

    font-size: 1.2rem;

    letter-spacing: 0.05em;

    margin-bottom: 0;

}


.company-dd {

    color: #333;

    font-size: 1.5rem;

    line-height: 1.5;

    margin: 0;

}


.company-map {

    width: 100%;

    margin-top: 3rem;

    border-radius: 12px;

    overflow: hidden;

}


.company-map iframe {

    display: block;

    border-radius: 12px;

}


/* ===================================================
   お問い合わせ
   =================================================== */

#sec5 {

    width: 100% !important;

}


#sec5 .contact-inner {

    width: 100% !important;

    max-width: 900px !important;

    margin: 0 auto !important;

}


#sec5 .contact-form {

    width: 100% !important;

    margin: 0 auto !important;

}


#sec5 .form-group {

    width: 100% !important;

    margin-bottom: 2.2rem !important;

}


/* 項目名 */

#sec5 .form-group label {

    display: block !important;

    width: 100% !important;

    margin-bottom: 0.8rem !important;

    font-size: 1.2rem !important;

    font-weight: 500 !important;

    color: #333 !important;

    letter-spacing: 0.05em !important;

}


/* 入力領域 */

#sec5 input[type="text"],
#sec5 input[type="email"],
#sec5 input[type="tel"],
#sec5 textarea,
#sec5 .form-group input,
#sec5 .form-group textarea {

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 100% !important;

    box-sizing: border-box !important;

    padding: 12px 15px !important;

    border: none !important;

    border-radius: 8px !important;

    background-color: rgba(255, 255, 255, 0.8) !important;

    font-size: 16px !important;

    color: #333 !important;

    appearance: none !important;

    -webkit-appearance: none !important;

}


#sec5 input[type="text"],
#sec5 input[type="email"],
#sec5 input[type="tel"] {

    height: 50px !important;

}


#sec5 textarea {

    height: 220px !important;

    resize: vertical !important;

}


/* プレースホルダーの文字色を少し薄く */
#sec5 input::placeholder,
#sec5 textarea::placeholder {

    color: #aaaaaa !important;

    opacity: 1 !important;

}


/* ===================================================
   送信ボタン（背景・角丸・白抜き文字・ホバー）
   =================================================== */

#sec5 .button-area {

    width: 100% !important;

    text-align: center !important;

    margin-top: 3rem !important;

}


/* ===================================================
   個人情報の取り扱いについて（同意チェック）
   =================================================== */

#sec5 .privacy-box {

    background-color: transparent !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    padding: 0 !important;

    margin-bottom: 1.2rem !important;

}


#sec5 .privacy-box-title {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    list-style: none !important;

    cursor: pointer !important;

    background-color: #aaaaaa !important;

    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif !important;

    font-weight: 500 !important;

    font-size: 1.4rem !important;

    color: #ffffff !important;

    padding: 1.1rem 1.8rem !important;

    margin: 0 !important;

}


/* Safari/Chrome標準の三角マーカーを消して、自前の矢印アイコンに差し替える */
#sec5 .privacy-box-title::-webkit-details-marker {

    display: none !important;

}

#sec5 .privacy-box-title::marker {

    content: "" !important;

}


#sec5 .privacy-box-title::after {

    content: "";

    flex-shrink: 0;

    width: 0.7rem;
    height: 0.7rem;

    margin-left: 1rem;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    transform: rotate(45deg);

    transition: transform 0.3s ease;

}


/* 開いている時は矢印を上向きに */
#sec5 .privacy-box[open] .privacy-box-title::after {

    transform: rotate(-135deg);

}


#sec5 .privacy-box-body {

    background-color: #ffffff !important;

    border-radius: 0 !important;

    padding: 1.4rem 1.8rem !important;

    margin: 0 !important;

}


#sec5 .privacy-box-body p,
#sec5 .privacy-box-body li {

    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif !important;

    font-size: 1.3rem !important;

    letter-spacing: 0.02em !important;

    text-align: left !important;

    text-align-last: left !important;

    line-height: 1.7 !important;

    color: #555 !important;

}


#sec5 .privacy-box-body p {

    margin: 0 0 1rem 0 !important;

}


#sec5 .privacy-box-body ul {

    margin: 0 !important;

    padding-left: 1.4rem !important;

}


#sec5 .privacy-box-body li {

    margin-bottom: 0.8rem !important;

}


#sec5 .privacy-box-body li:last-child {

    margin-bottom: 0 !important;

}


#sec5 .privacy-check-label {

    display: flex !important;

    align-items: flex-start !important;

    gap: 0.6rem !important;

    font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif !important;

    font-size: 1.3rem !important;

    line-height: 1.6 !important;

    color: #333 !important;

    cursor: pointer !important;

}


#sec5 .privacy-check-label input[type="checkbox"] {

    flex-shrink: 0 !important;

    width: 1.6rem !important;

    height: 1.6rem !important;

    margin-top: 0.2rem !important;

}


/* リセットCSSの強力な上書きを防ぐため、セレクタの強さを最大化しています */
html body #sec5 form.contact-form div.button-area button.submit-btn {

    display: inline-block !important;

    width: 128px !important;

    max-width: 128px !important;

    height: 43px !important;

    background: #aaaaaa !important; /* リセットCSSを打ち消すため background を指定 */

    background-color: #aaaaaa !important;

    color: #ffffff !important; /* 白抜き文字 */

    border: none !important; /* 枠線を完全に消去 */

    outline: none !important;

    border-radius: 30px !important; /* 角丸 */

    font-size: 14px !important;

    font-weight: normal !important;

    letter-spacing: 0.1em !important;

    cursor: pointer !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    transition: background-color 0.3s ease !important;

}


html body #sec5 form.contact-form div.button-area button.submit-btn:hover {

    background: #888888 !important;

    background-color: #888888 !important; /* ホバー時: 濃いグレー */

    color: #ffffff !important;

}


/* ===================================================
   フッター
   =================================================== */

.copyright {

    text-align: center;

    padding: 1.5rem 0;

    background-color: rgba(255, 255, 255, 0);

    margin-top: 5rem;

    color: #888888;

    font-family: "Shippori Mincho", serif;

    font-weight: 400;

    font-size: 85%;

}


/* ===================================================
   PC
   =================================================== */

@media screen and (min-width: 769px) {


    .company-item {

        flex-direction: row;

    }


    .company-dt {

        width: 120px;

        flex-shrink: 0;

    }


}


/* ===================================================
   スマートフォン
   =================================================== */

@media screen and (max-width: 768px) {


    .catch-image {

        width: 66vw;

    }


    .container {

        padding-left: 5%;

        padding-right: 5%;

    }


    .pc-only {

        display: none !important;

    }


    .sp-only {

        display: block !important;

    }


    #sec5 .contact-inner {

        max-width: 100% !important;

    }


    #sec5 .form-group {

        margin-bottom: 1.5rem !important;

    }


    #sec5 .form-group label {

        font-size: 1.1rem !important;

    }


    #sec5 textarea {

        height: 180px !important;

    }


    html body #sec5 form.contact-form div.button-area button.submit-btn {

        width: 170px !important;

    }


}

/* ===================================================
   ふわっと表示アニメーション（読み込み時・スクロール時共通）
   =================================================== */

.fade-in {

    opacity: 0;

    transform: translateY(28px);

    transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);

}


/* ページを開いた瞬間に表示するキャッチコピー部分は、さらにゆっくり・ふわりと大きめに */
.fade-in.fade-in-onload {

    transform: translateY(40px);

    transition: opacity 3.2s cubic-bezier(0.19, 1, 0.22, 1), transform 3.2s cubic-bezier(0.19, 1, 0.22, 1);

}


.fade-in.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* 複数要素を少しずつ時間差で表示したい場合に使う */
.fade-in.delay-1 { transition-delay: 0.15s; }
.fade-in.delay-2 { transition-delay: 0.3s; }
.fade-in.delay-3 { transition-delay: 0.45s; }


/* ===================================================
   ロード画面（開いた瞬間のロゴアニメーション）
   =================================================== */

#loading-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background-color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: opacity 1.3s cubic-bezier(0.19, 1, 0.22, 1);

}


#loading-screen.is-hidden {

    opacity: 0;

    pointer-events: none;

}


.loading-lottie {

    width: 400px;

    height: auto;

    margin-left: 30px;
    margin-top: -80px;

}