/* header */
.header-logo {
    width: 200px;
}

/* hooter */
.hooter-logo {
    width: 200px;
    margin: 0 auto;
}

/* index_page */
.text_bold {
    font-weight: bold;
}
@media screen and (max-width: 480px) {
    .project_bottom {
     padding-bottom: 48px;
    }
    }

/* confirm_page */
@media screen and (max-width: 480px) {
.btn-bottom {
 margin-bottom: 10px;
}
}
/* thanks_page */
.thanks_text {
 text-align: center;
}

/* 20240724追加 */

/* 「・」が行の先頭に来るようにする */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.custom-list li {
    position: relative;
    padding-left: 1.5em;
    /* text-indent: -1.5em; */
}
.custom-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

/* 背景グラデーション */
.background_gradient {
    background: linear-gradient(90deg, rgba(251, 213, 251, 1), rgba(149, 233, 243, 1));
}
.project_bottom {
    padding-bottom: 48px;
}

.marker {
    background: linear-gradient(90deg, rgba(251, 213, 251, 1) , rgba(149, 233, 243, 1) );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 95% 50%;
}

/* 画像回り込ませる */
.float-image {
    float: left; /* 画像を左に浮かせる */
    margin: 0 20px 20px 0; /* 画像とテキストの間に余白を設定 */
}

.float-image img {
    max-width: 100%; /* 画像の最大幅を親要素に合わせる */
    height: auto; /* 画像の高さを自動調整 */
}

/* センター配置 */

@media screen and (max-width: 768px) {
    .mobile-center {
        text-align: left; /* 画面幅が768px以下の場合にセンター揃え */
    }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc-break { display: block !important; }
.sp-break { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc-break { display: none !important; }
    .sp-break { display: block !important; }
}

/* br デフォルトでは非表示 */
.mobile-break {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-break {
        display: inline;
    }
}
/* about 画像向け */
    .content-container-lpimg {
        overflow: hidden;
    }
    
    .fs-lg {
        margin: 0 0 20px 0;
    }
    
    .right-image {
        float: right;
        max-width: 200px;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .eclogo-image {
        max-width: 50%;
    }
    
    /* スマホ表示のためのメディアクエリ */
    @media (max-width: 767px) {
        .right-image {
            float: none;
            display: block;
            margin: 0 auto 20px auto; /* 上下にスペースを追加 */
        }
        .eclogo-image {
            max-width: 80%;
        }
    
        
    }

/* ここからIllustrators & Artistsページ */
.image-grid-ai {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* 画像間のスペースを調整 */
    padding-top: 1rem; /* 上部に余白を追加 */
    padding-bottom: 1rem;
}

.square-image-ai {
    width: calc(25% - 1rem); /* PC時の画像の幅を調整（gapに合わせて調整） */
    height: auto; /* 画像の縦横比を保つ */
}

@media (max-width: 768px) { /* 768px以下のデバイス（スマホ）向けのスタイル */
    .square-image-ai {
        width: calc(50% - 0.5rem); /* スマホ時の画像の幅を調整 */
    }
}

.img-radius {
    border-radius: 16px;
}

/* Support Pack Section styles */
.support-pack-section {
    background-color: #f9f9f9;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-radius: 16px;
}

.support-pack-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-pack-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
}

.support-pack-title {
    font-size: 1.35rem;
    font-weight: 700;
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.support-pack-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background-color: #007bff; /* accent */
    border-radius: 2px;
}

.support-pack-title-pink::after {
    background-color: #e5005a;
}

.support-pack-list {
    margin-left: 0;
}
.support-pack-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .5rem;
}
.support-pack-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    color: #6c757d;
}

/* Custom button colors for Support Pack Section */
.btn-after-support {
    background-color: #3178be;
    border-color: #3178be;
}
.btn-after-support:hover,
.btn-after-support:focus {
    background-color: #2a69a6;
    border-color: #2a69a6;
}

.btn-safety-pack {
    background-color: #e5005a;
    border-color: #e5005a;
}
.btn-safety-pack:hover,
.btn-safety-pack:focus {
    background-color: #c4004d;
    border-color: #c4004d;
}


/* ================================
   Flow Chart (Project)
   ================================ */
.flow-chart {
    margin-top: 1rem;
}

.flow-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    position: relative;
    padding-left: .5rem;
}

.flow-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.25em;
    border-radius: 4px;
    background: #007bff;
}

.flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}

.flow-step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    padding: 1rem .75rem;
    background: rgba(0, 123, 255, .06);
    border: 1px solid rgba(0, 123, 255, .25);
    border-radius: 12px;
    color: #212529;
    box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

/* Arrow (PC: rightwards) */
.flow-step::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px; /* half of gap + arrow width */
    transform: translateY(-50%);
    width: 24px;
    height: 2px;
    background: #007bff;
}

.flow-step::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    transform: translateY(-50%);
    border-left: 8px solid #007bff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.flow-step:last-child::after,
.flow-step:last-child::before {
    display: none;
}
/* ================================
   Flow Chart text alignment fix
   ================================ */
.flow-step {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦中央揃え */
  align-items: center;     /* 横中央揃え */
  line-height: 1.6;
  min-height: 140px;       /* 高さを一定にして安定させる */
  word-break: keep-all;    /* 日本語の不自然な改行防止 */
}

/* Responsive: stack vertically on small screens */
@media screen and (max-width: 768px) {
    .flow-steps {
        flex-direction: column;
        gap: .75rem;
    }
    .flow-step {
        text-align: left;
        padding: .875rem .875rem;
    }
    /* Arrow (SP: downwards) */
    .flow-step::after {
        top: auto;
        bottom: -24px;
        left: calc(50% - 1px);
        right: auto;
        transform: none;
        width: 2px;
        height: 20px;
        background: #007bff;
    }
    .flow-step::before {
        top: auto;
        bottom: -24px;
        left: calc(50% - 6px);
        right: auto;
        transform: none;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid #007bff;
        border-bottom: 0;
    }

    .flow-step {
    display: block;
    min-height: auto;
  }
}

/* =====================================
   LPページ用: ヘッダーナビ文字色の統一
   対象: /lp/aftersupport, /lp/safetypack
   要件: 通常時は白、ホバーは現状維持（緑）
   ===================================== */
body.lp-after-support .navbar .nav-link,
body.lp-anshin .navbar .nav-link {
    color: #fff !important;
    opacity: 1 !important;
}
body.lp-after-support .navbar .nav-link:hover,
body.lp-after-support .navbar .nav-link:focus,
body.lp-anshin .navbar .nav-link:hover,
body.lp-anshin .navbar .nav-link:focus {
    color: var(--ar-nav-link-hover-color) !important;
}