/*-------------------------------------------------------------
    Keywords（ASAHIを知ろう）
-------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/* 背景：MVの波と重ならないよう下に広げて開始 */
.keywords_bg_area {
    --keywords-bg-top: clamp(55rem, 45vw, 68rem);
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    isolation: isolate;
}

.child:has(.keywords_content) {
    overflow-x: clip;
    overflow-y: visible;
}

.child:has(.keywords_content) .child_visual {
    overflow: visible;
}

.keywords_bg_area::before {
    content: "";
    position: absolute;
    top: var(--keywords-bg-top);
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 721;
    height: auto;
    background: url(../img/wave_bg_h.png) no-repeat center bottom;
    background-size: 100% auto;
    transform: scaleX(-1);
    pointer-events: none;
}

.keywords_bg_area .top_bg {
    position: absolute;
    top: var(--keywords-bg-top);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: auto;
    pointer-events: none;
}

.keywords_bg_area .top_bg img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 6%, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 6%, #000 14%);
}

.keywords_content .child_body {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: clamp(0rem, calc(20vw - 20rem), 10rem);
    padding-bottom: 0;
}

/* セクション本文・見出しを背景（グラデ／流れる文字）より前面に */
.keywords_section .inner > :not([class*="_bg"]) {
    position: relative;
    z-index: 2;
}

.keywords_global > .inner,
.keywords_initiatives > .inner {
    position: relative;
    z-index: 2;
}

.keywords_section + .keywords_section {
    margin-top: clamp(5rem, 14vw, 19rem);
}

.keywords_global + .keywords_initiatives {
    margin-top: clamp(18rem, 22.3vw, 29rem);
}

/* MV タイトル（ASAHI ロゴ + テキスト） */
.keywords_mv_ttl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(0.2rem, 0.5vw, 0.4rem);
}

.keywords_ttl_logo--mv {
    display: block;
    width: auto;
    height: 0.7em;
    padding-right: 10px;
	transform: translateY(4px);
}

.keywords_mv_ttl_txt {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.keywords_ttl_logo {
    display: block;
    width: auto;
}

.keywords_sec_ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

.keywords_ttl_logo--sec {
    height: clamp(2rem, 3.4vw, 3rem);
}

.keywords_sec_ttl_txt {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* 共通テキスト */
.keywords_lead {
    margin: clamp(2rem, 3vw, 3.2rem) 0 0;
}

/* ==============================
   セクション2：もうすぐ100年企業
   ============================== */
.keywords_history .child_h2 .child_sec_ttl {
    margin-bottom: clamp(4rem, 6.15vw, 8rem);
}

.keywords_history .keywords_num {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(3.6rem, 3.69vw, 4.8rem);
    font-weight: 500;
    line-height: 1.458;
}

.keywords_history_body {
    display: grid;
    grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4.6vw, 6rem);
}

.keywords_history_main .child_tag {
    margin-bottom: clamp(1.2rem, 2vw, 2rem);
}

.keywords_history_year {
    margin: 0;
    line-height: 1;
}

.keywords_history_year_num {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(8rem, 11.5vw, 11rem);
    font-weight: 500;
}

.keywords_history_year_unit {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(3rem, 4.6vw, 5rem);
    font-weight: 500;
}

.keywords_history_gallery {
    margin: 0;
}

.keywords_history_gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==============================
   セクション3：ASAHIブランドの強み
   ============================== */
.keywords_strength .inner {
    position: relative;
}

/* 流れる背景文字（共通） */
.keywords_strength_bg,
.keywords_global_bg,
.keywords_initiatives_bg,
.keywords_future_bg {
    position: absolute;
    top: clamp(0.4rem, 1.5vw, 1.2rem);
    left: 50%;
    z-index: 0;
    width: 100vw;
    margin-left: -50vw;
    pointer-events: none;
    mix-blend-mode: multiply;
    overflow-x: hidden;
    overflow-y: visible;
}

.keywords_strength_bg .flow_marquee_viewport,
.keywords_global_bg .flow_marquee_viewport,
.keywords_initiatives_bg .flow_marquee_viewport,
.keywords_future_bg .flow_marquee_viewport {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-block: 0 clamp(0.6rem, 1.2vw, 1.2rem);
}

.keywords_strength_bg .flow_marquee_item,
.keywords_global_bg .flow_marquee_item,
.keywords_initiatives_bg .flow_marquee_item,
.keywords_future_bg .flow_marquee_item {
    font-size: clamp(4.8rem, 9.2vw, 12rem);
    font-weight: 600;
    line-height: 1.15;
    color: #f4f4f478;
}

/* ==============================
   世界へ
   ============================== */
.keywords_global .inner,
.keywords_initiatives .inner,
.keywords_future .inner {
    position: relative;
}

.keywords_global .child_h2,
.keywords_initiatives .child_h2,
.keywords_future .child_h2 {
    position: relative;
    z-index: 2;
}

.keywords_sec_ttl--global {
    align-items: center;
}

.keywords_global_ttl_lead {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.keywords_global_body {
    position: relative;
    margin-top: clamp(2.4rem, 4vw, 4rem);
}

.keywords_global_earth {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: clamp(32rem, 81.8vw, 157rem);
    max-width: 1570px;
    margin: 0;
    pointer-events: none;
}

.keywords_global_earth img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: 0.4;
}

.keywords_global_content {
    position: relative;
    z-index: 2;
    margin-top: 0;
    text-align: center;
}

.keywords_global_highlight {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(2rem, 6vw, 8rem);
}

.keywords_global_col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.keywords_global_col .child_tag {
    margin-bottom: clamp(1.2rem, 2vw, 2rem);
}

.keywords_global_col:first-child .keywords_global_brand_lead {
    font-size: clamp(16px, 1.5vw, 24px);
	margin: 0;
}

.keywords_global_stat {
    margin: 0;
    line-height: 1;
    text-align: left;
}

.keywords_global_stat .keywords_stat_value {
    font-size: clamp(6rem, 9.2vw, 12rem);
}

.keywords_global_stat .keywords_stat_unit {
    font-size: clamp(2.4rem, 3.8vw, 4.8rem);
}

.keywords_global_brand {
    text-align: left;
}

.keywords_global_brand_lead {
    margin: 0 0 clamp(0.4rem, 1vw, 0.8rem);
    font-size: clamp(1.6rem, 2vw, 3rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.keywords_global_brand_logo {
    display: block;
    width: clamp(18rem, 20.7vw, 27rem);
    max-width: 270px;
    height: auto;
    margin: 0;
}

.keywords_global_txt {
    max-width: 650px;
    margin: clamp(2.4rem, 4vw, 8rem) auto 0;
    text-align: left;
}

/* ==============================
   ASAHIの働きやすさ
   ============================== */
.keywords_initiatives .child_h2 .child_sec_ttl {
    margin-bottom: clamp(4rem, 6.5vw, 8.5rem);
}

.keywords_initiatives_lead {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    font-weight: 600;
    line-height: 2;
}

.keywords_initiatives_list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(2rem, 3vw, 8rem);
    row-gap: clamp(3rem, 5vw, 5rem);
    list-style: none;
    margin: clamp(3rem, 10vw, 12.5rem) auto 0;
    padding: 0;
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

.keywords_initiative {
    grid-column: span 2;
    text-align: center;
}

.keywords_initiative:nth-child(4) {
    grid-column: 2 / span 2;
}

.keywords_initiative:nth-child(5) {
    grid-column: 4 / span 2;
}

.keywords_initiative_ttl {
    margin: 0 0 clamp(1.2rem, 2vw, 1.6rem);
    font-size: clamp(1.6rem, 1.8vw, 2.2rem);
    font-weight: 600;
    line-height: 1.5;
}

.keywords_initiative_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, clamp(160px, 18vw, 220px));
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
}

.keywords_initiative_icon img {
    display: block;
    width: 78%;
    height: auto;
}

.keywords_initiative_txt {
    max-width: 290px;
    margin: clamp(1.2rem, 2vw, 2rem) auto 0;
    font-size: clamp(1.4rem, 1.5vw, 1.5rem);
    line-height: 2;
    text-align: justify;
}

/* ==============================
   旭金属工業のこれから
   ============================== */
.keywords_future {
    position: relative;
    overflow: visible;
    isolation: isolate;
    min-height: calc(100vw * 1966 / 1920);
	background: #dfe9f0;
}

.keywords_future::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 721;
    height: auto;
    background: url(../img/bg_wave.png) no-repeat center bottom;
    background-size: 100% auto;
    pointer-events: none;
}

.keywords_future::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1920 / 1966;
    height: auto;
    background: url(../img/keywords_future_bg.png) no-repeat center top;
    background-size: 100% auto;
    pointer-events: none;
}

.keywords_future > .inner {
    position: relative;
    z-index: 2;
}

.keywords_future .child_h2 .child_sec_ttl {
    margin-bottom: clamp(1.6rem, 2vw, 2rem);
}

.keywords_future > .inner > .keywords_future_bg {
    position: relative;
    top: auto;
    left: 50%;
    z-index: 1;
    display: block;
    width: 100vw;
    margin: 0 0 0 -50vw;
    transform: none;
}

.keywords_future_body {
    position: relative;
    z-index: 2;
    text-align: center;
}

.keywords_future_txt {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    font-weight: 500;
    line-height: 2;
}

.keywords_future_txt + .keywords_future_txt {
    margin-top: clamp(1.6rem, 2.5vw, 2.4rem);
}

.keywords_future_en {
    margin: clamp(4rem, 12.3vw, 16rem) 0 clamp(1.6rem, 2.5vw, 6rem);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 3.5vw, 6rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: #0071BD;
}

.keywords_future_logo {
    margin: 0;
}

.keywords_future_logo img {
    display: block;
    width: clamp(24rem, 41.5vw, 54rem);
    max-width: 540px;
    height: auto;
    margin: 0 auto;
}

.keywords_global,
.keywords_initiatives {
    position: relative;
}

.keywords_strength .child_h2 {
    position: relative;
    z-index: 2;
}

.keywords_strength .child_h2 .child_sec_ttl {
    margin-bottom: clamp(2.4rem, 10vw, 10rem);
}

.keywords_strength_lead {
    position: relative;
    z-index: 2;
    text-align: center;
}

.keywords_products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 2rem);
    list-style: none;
    margin: clamp(3rem, 5vw, 5rem) 0 0;
    padding: 0;
}

.keywords_product {
    overflow: hidden;
    border-radius: 5px;
}

.keywords_product img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==============================
   製品ラインナップ + 3カラム
   ============================== */
.keywords_strength + .keywords_lineup {
    margin-top: clamp(4rem, 6vw, 7rem);
}

.keywords_lineup .keywords_stat {
    text-align: center;
}

.keywords_lineup .keywords_stat .child_tag {
    margin-bottom: clamp(1.2rem, 2vw, 2rem);
}

.keywords_lineup_lead {
    margin-top: clamp(1.6rem, 2.5vw, 2.4rem);
}

.keywords_stat_num {
    margin: 0;
    padding-bottom: clamp(4rem, 6.5vw, 8.5rem);
    line-height: 1;
}

.keywords_stat_value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(6rem, 9.2vw, 11rem);
    font-weight: 500;
}

.keywords_stat_unit {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.4rem, 3.8vw, 5rem);
    font-weight: 500;
}

.keywords_lineup_lead {
    text-align: center;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    font-weight: 500;
    line-height: 2;
}

.keywords_pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 3.2rem);
    list-style: none;
    margin: clamp(3rem, 5vw, 6.0rem) 0 0;
    padding: 0;
}

.keywords_pillar_img {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 0 5px 5px 5px;
}

.keywords_pillar_img .child_tag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
}

.keywords_pillar_img img {
    display: block;
    width: 100%;
    height: auto;
}

.keywords_pillar_txt {
    margin: clamp(1.2rem, 2vw, 1.6rem) 0 0;
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    line-height: 2;
    text-align: justify;
}

@media screen and (max-width: 767px) {
    .keywords_content {
        margin-top: clamp(2rem, 16vw, 3rem);
    }

    .keywords_bg_area {
        --keywords-bg-top: clamp(12rem, 30vw, 20rem);
    }

    .keywords_content .child_body {
        margin-top: 0;
        padding-top: clamp(1.6rem, 4vw, 2.4rem);
        padding-bottom: 0;
    }

    .keywords_future {
        min-height: auto;
    }

    .keywords_future::after {
        inset: 0;
        aspect-ratio: auto;
        height: auto;
        /* background-size: cover; */
        background-position: center bottom;
    }

    figure.keywords_future_logo {
        padding-bottom: 200px;
    }

    .keywords_ttl_logo--sec {
        height: clamp(2rem, 3.4vw, 3rem) !important;
        width: auto;
        max-width: none;
    }

    .keywords_ttl_logo--mv {
        height: clamp(1.7rem, 3.4vw, 3rem) !important;
        width: auto;
        max-width: none;
    }

    .keywords_history_body {
        grid-template-columns: 1fr;
        gap: clamp(2.4rem, 6vw, 3.6rem);
    }

    .keywords_history_gallery {
        order: -1;
    }
	
	.keywords_history_main {
        text-align: center;
    }

    .keywords_strength_bg .flow_marquee_item,
    .keywords_global_bg .flow_marquee_item,
    .keywords_initiatives_bg .flow_marquee_item,
    .keywords_future_bg .flow_marquee_item {
        font-size: clamp(3.2rem, 11vw, 4.8rem);
    }
	
	h2.child_sec_ttl.keywords_sec_ttl.keywords_sec_ttl--global {
        margin: 10px 0 30px;
    }

    .keywords_global_highlight {
        flex-direction: column;
        align-items: center;
        gap: clamp(2rem, 5vw, 3rem);
    }

    .keywords_global_col {
        align-items: center;
    }

    .keywords_global + .keywords_initiatives {
        margin-top: clamp(5rem, 14vw, 19rem);
    }

    .keywords_initiatives_list {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .keywords_initiative,
    .keywords_initiative:nth-child(4),
    .keywords_initiative:nth-child(5) {
        grid-column: auto;
    }

    .keywords_initiative_txt {
        text-align: left;
    }

    .keywords_products,
    .keywords_pillars {
        grid-template-columns: 1fr;
        gap: clamp(1.6rem, 4vw, 2.4rem);
    }
}