@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:wght@300;400;500;700&display=swap');
/* =========================================================
   Modern base (2026)
   - modern reset
   - responsive container
   - accessibility (focus-visible)
   - utility set (minimum)
========================================================= */

/* -----------------------------
   CSS Variables / Theme
----------------------------- */
:root{
    --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS P明朝", serif;

    --text: #0f172a;
    --muted: #475569;
    --bg: #ffffff;
    --border: #e2e8f0;

    --link: #2563eb;
    --link-hover: #1d4ed8;

    --radius: 12px;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);

    --container: 1200px;
    --gutter: 16px;

    --focus: 2px solid rgba(37, 99, 235, .9);
    --focus-offset: 3px;
}

/* -----------------------------
   Modern Reset
----------------------------- */
*,
*::before,
*::after{
    box-sizing: border-box;
}

html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
    min-height: 100svh;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    /*letter-spacing: .02em;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

html.auto,
html.auto body {
    overflow-x: visible;
}



/* Headings: “勝手にデカい余白”は付けない（余白はレイアウト側で管理） */
h1,h2,h3,h4,h5,h6{
    margin: 0;
    font: inherit;
}

/* block elements */
p,ul,ol,dl,dd,figure,blockquote{
    margin: 0;
    padding: 0;
}

ul,ol{
    list-style: none;
}

/* media */
svg,video,canvas{
    display: block;
    max-width: 100%;
    height: auto;
}

img{
    max-width: 100%;
    height: auto;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}

/* form controls */
input,button,textarea,select{
    font: inherit;
    color: inherit;
}

button{
    cursor: pointer;
}

textarea{
    resize: vertical;
}

/* links */
a{
    color: var(--link);
    text-decoration: none;
    text-underline-offset: .2em;
}
/*
a:hover{
	text-decoration: underline;
}
*/
/* ✅ outline を消さない。キーボード操作のときだけ見せる */
:focus{
    outline: none;
}
:focus-visible{
    outline: var(--focus);
    outline-offset: var(--focus-offset);
}

/* selection */
::selection{
    background: rgba(37, 99, 235, .2);
}

body p{
    fill: var(--text-gray_5, #282B33);
}


/* -----------------------------
   Layout helpers
----------------------------- */
.container{
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 旧 #wrapper 互換（必要ならHTML側で置き換え）
   既存で #wrapper が残ってても崩れにくくする */
#wrapper{
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* -----------------------------
   Utility (minimum)
----------------------------- */
.u-hidden{
    display: none !important;
}

.u-visually-hidden{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.u-text-left{ text-align: left !important; }
.u-text-center{ text-align: center !important; }
.u-text-right{ text-align: right !important; }

.u-flex{ display: flex !important; }
.u-inline-flex{ display: inline-flex !important; }
.u-items-center{ align-items: center !important; }
.u-justify-center{ justify-content: center !important; }
.u-justify-between{ justify-content: space-between !important; }
.u-flex-col{ flex-direction: column !important; }
.u-gap-8{ gap: 8px !important; }
.u-gap-12{ gap: 12px !important; }
.u-gap-16{ gap: 16px !important; }

.u-relative{ position: relative !important; }
.u-absolute{ position: absolute !important; }

/* hover helper (必要なときだけ使う) */
.u-hover{
    transition: opacity .2s ease;
}
.u-hover:hover{
    opacity: .8;
}

.font-r{
    font-family: "Roboto", sans-serif;
}

/* -----------------------------
   Optional: Card base
----------------------------- */
.card{
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
}

/* -----------------------------
   header
----------------------------- */

/* font（読み込み自体は別途必要：Google Fonts等） */
:root{
    --font-sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

.site-header{
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: 80px;
    transition: background-color .3s ease, box-shadow .3s ease;
}



.site-header h1{
    line-height: 1;
}

.site-header__inner{
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0px;
}

/* Brand */
.brand{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    min-width: 220px;
}

.brand:hover{
    text-decoration: none;
}

.brand__mark{
    display: grid;
    place-items: center;
    width: 66px;
    height: 30px;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-weight: 800;
    font-size: 16px;
}

.brand__text{
    display: grid;
    line-height: normal;
    font-weight: 500;
}

.brand__title{
    font-size: 15px;
    font-weight: 600;
    opacity: .95;
}

.site-header .brand__text svg path{
    fill: #FFF;
    transition: all 0.4s;
}

.site-header.active .brand__text svg path,
.site-header.sub  .brand__text svg path{
    fill: #282B33;
}

.brand__year{
    font-size: 15px;
    font-weight: 700;
    opacity: .95;
}

/* Nav */
.gnav{
    justify-self: right;
    display: flex;
    align-items: center;
    gap: 0px;
    white-space: nowrap;
    margin-right: 28px;
}

.gnav__link{
    position: relative;
    text-decoration: none;
    font-size: 15px;
    color: var(--text-gray_100, #FFF);
    padding: 10px 12px;
    transition: all 0.4s;
}

.gnav__link:hover{
    opacity:0.7;
}

span.gnav__link:hover{
    opacity:1;
}

.site-header.active .gnav__link:hover,
.site-header.sub .gnav__link:hover{
    opacity:1;
    color: #8E8E8E;
}

/*
.gnav__link::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: rgba(255,255,255,.8);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.gnav__link:hover::after{
	transform: scaleX(1);
}
*/

.gnav__link ul{
    border-radius: 12px;
    border: 1px solid var(--primary-corporate_blue, #5666BE);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(2px);
    padding: 16px;
    position: absolute;
    left: -40px;
    bottom: -135px;
    display: none;;
}

.gnav__link:hover ul{
    display: block;
}

.gnav__link ul li{
    margin-bottom: 16px;
}

.gnav__link ul li:last-child{
    margin-bottom: 0;
}

.gnav__link ul li a{
    color: #282B33;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%; /* 21px */
    letter-spacing: 0.28px;
}

/* CTA */

._hover{
    opacity:1;
    transition: all 0.4s;
}

._hover:hover{
    opacity:0.7;
}
._hover._hover2:hover{
    opacity:0.1;
}

.site-header__cta{
    justify-self: end;
}

.btn-entry{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 48px;
    border-radius: 999px;
    background: var(--text-gray_5, #282B33);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.4s;
}

.btn-entry:hover{
    background: #5666BE;
}

/* Focus */
.gnav__link:focus-visible,
.btn-entry:focus-visible,
.brand:focus-visible{
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: 3px;
    border-radius: 8px;
}

.site-header.active,
.site-header.sub{
    background: #FFF;
}

.site-header.active .brand,
.site-header.active .gnav__link,
.site-header.sub .brand,
.site-header.sub .gnav__link{
    color: #282B33;
}

.sp{
    display: none;
}
.pc{
    display: block;
}
/* Responsive: ナビが潰れ始めたら隠してハンバーガー等に差し替え想定 */
@media (max-width: 1050px){
    .site-header__inner{
        padding: 0 10px;
    }

    .gnav__link{
        padding: 10px 6px;
    }

    .gnav{
        margin-right: 10px;
    }

    .btn-entry{
        padding: 0 24px;
    }
}

@media (max-width: 900px){

    .gnav__link{
        padding: 10px 3px;
        font-size: 13px;
    }

    .gnav__link ul{
        bottom: -95px;
        padding: 10px;
    }

    .gnav__link ul li{
        margin-bottom: 10px;
    }

    .gnav__link ul li:last-child{
        margin-bottom: 0;
    }

    .gnav__link ul li a{
        font-size: 13px;
    }

    .gnav{
        margin-right: 10px;
    }

    .btn-entry{
        padding: 0 24px;
    }
}
@media (max-width: 768px){

    .site-header .brand__text svg path{
        fill: #282B33;
    }

    .brand{ min-width: auto; }
    .site-header__inner{
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    body,
    html{
        width: 100%;
        overflow-x: hidden;
    }
    .sp{
        display: block;
    }
    br.sp{
        height: 1px;
        line-height: 1;
        font-size: 1px;
    }
    .pc{
        display: none;
    }

    .site-header{
        background: #FFF;
        height: 54px;
    }

    .site-header h1 svg{
        width: 57px;
        height: auto;
    }

    .site-header__inner{
        height: 100%;
        max-width: 100%;
        padding: 1px 0px 0 16px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0px;
    }

    /* Brand */
    .site-header  .brand__text svg{
        width: 92px;
        height: auto;
    }

    .site-header.sub  .brand__text svg path{
        fill: #282B33;
    }
    .brand{
        gap: 12px;
        color: #282B33;
        text-decoration: none;
        min-width: 240px;
        font-size: 12px;
    }

    .brand:hover{
        text-decoration: none;
    }

    .brand__mark{
        display: grid;
        place-items: center;
        width: 66px;
        height: 30px;
        border-radius: 6px;
        background: #fff;
        color: #111;
        font-weight: 800;
        font-size: 16px;
    }

    .brand__text{
        display: grid;
        line-height: normal;
        font-weight: 500;
    }

    .brand__title{
        font-size: 12px;
        font-weight: 600;
        opacity: .95;
    }

    .brand__year{
        font-size: 12px;
        font-weight: 700;
        opacity: .95;
    }

    /* Nav */
    .gnav{
        display: block;
        width: 100%;
        background: #FFF;
        position: absolute;
        left: 0;
        top: 54px;
        padding: 20px;
        height: calc(100vh - 54px);
        overflow-y: scroll;
        display: none;
    }

    .gnav__link{
        position: relative;
        color: rgba(255,255,255,.9);
        text-decoration: none;
        font-size: 15px;
        color: var(--text-gray_100, #FFF);
        padding: 0 12px;
    }

    /*
    .gnav__link::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 2px;
        background: rgba(255,255,255,.8);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .18s ease;
    }

    .gnav__link:hover::after{
        transform: scaleX(1);
    }
    */
    /* CTA */
    .site-header__cta{
        position: absolute;
        right: 54px;
        top: 0;
    }

    .btn-entry{
        display: flex;
        width: 74px;
        height: 54px;
        padding: 2px 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: none;
        border-radius: 0;
        font-size: 12px;

    }


    /* Focus */
    .gnav__link:focus-visible,
    .btn-entry:focus-visible,
    .brand:focus-visible{
        outline: 2px solid rgba(255,255,255,.9);
        outline-offset: 3px;
        border-radius: 8px;
    }

    #btn_menu{
        position: absolute;
        right: 0;
        top: 0;
        width: 54px;
        height: 54px;
    }

    #btn_menu:before,
    #btn_menu:after{
        content: "";
        display: block;
        width: 24px;
        height: 2px;
        background: #5666BE;
        position: absolute;
        top: 50%;
        left: 50%;
        /* ベースの配置（下の個別指定で回転も合体させます） */
        transform: translate(-50%, -50%);
        transition: all 0.2s;
        margin-top: -3px;
    }

    #btn_menu:after{
        margin-top: 3px;
    }

    #btn_menu.active:before{
        /* 配置の -50% と 45度回転をセットで書く！ */
        transform: translate(-50%, -50%) rotate(45deg);
        margin-top: 0;
    }

    #btn_menu.active:after{
        /* こちらもセットで！ */
        transform: translate(-50%, -50%) rotate(-45deg);
        margin-top: 0;
    }

}


/* -----------------------------
   footer
----------------------------- */
.site-footer{
    background: #f3f4f6; /* 薄いグレー */
}

.site-footer__inner{
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 80px 56px;
}

.site-footer__top{
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 56px;
    align-items: start;
}

/* left */
.f-brand__logo{
    display: flex;
    align-items: center;
}
.f-brand__logo > svg{
    display: block;            /* ベースライン隙間対策 */
    width: 105px;
    height: auto;
}

.f-brand__logo > span{
    margin-left: 15px;
}

.f-archive{
    margin-top: 35px;
}
.f-archive__title{
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 15px;

    position: relative;
}

.f-archive__title:after{
    width: 2px;
    height: 16px;
    right: 15px;
    top: 50%;
}

.f-archive__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.f-archive__list a{
    color: #282B33;
    text-decoration: none;
    font-size: 14px;
}

/* sitemap */
.f-sitemap{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 648px;
}

.f-col__head{
    color: var(--text-gray_25, #8E8E8E);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 14px;
}
.f-col__list{
    list-style: none;
    margin: 0 0 38px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.f-col__list a{
    color: #282B33;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    transition: all 0.2s;
}

.f-archive__list a,
.f-links a,
.f-links a svg path,
.f-legal a{
    transition: all 0.2s;
}

.f-archive__list a:hover,
.f-col__list a:hover,
.f-links a:hover,
.f-legal a:hover{
    color: #8E8E8E;
}

.f-links a:hover svg path{
    stroke: #8E8E8E;
}

.f-col__list a::before{
    content: "- ";
    color: #111827;
}

/* divider */
.site-footer__rule{
    border: 0;
    border-top: 1px solid rgba(17,24,39,.12);
    margin: 80px 0 28px;
}

/* bottom row */
.site-footer__bottom{
    margin-top: 80px;
    border-top: 1px solid var(--text-gray_50, #D4D4D4);
    border-bottom: 1px solid var(--text-gray_50, #D4D4D4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.f-links{
    grid-area: links;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.f-links a{
    color: #282B33;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.f-links a svg{
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.f-social{
    grid-area: social;
    display: inline-flex;
    gap: 30px;
    justify-self: end;
}

/* ひとまず文字アイコン（本番はSVG/アイコンフォント差し替え推奨） */
.f-social__btn{
    display: grid;
    place-items: center;
    border-radius: 999px;
    text-decoration: none;
}
.site-footer__last{
    display: flex;
    justify-content: space-between;
    padding: 20px 0 80px;
}
.f-legal{
    grid-area: legal;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    color: #111827;
}
.f-legal a{
    color: #1D1C1A;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}

.f-legal__sep{
    color: #D4D4D4;
}

.f-copy{
    grid-area: copy;
    justify-self: end;
    color: var(--Text-Main, #282B33);
    text-align: right;
    font-size: 12px;
    font-weight: 400;
}

/* responsive */

@media (max-width: 1050px) {
    .site-footer__inner{
        padding: 80px 40px 56px;
    }
    .site-footer__top{
        grid-template-columns: 200px 1fr;
        gap: 26px;
    }
}

@media (max-width: 768px){
    .site-footer{
        background: #f3f4f6; /* 薄いグレー */
    }

    .site-footer__inner{
        max-width: 100%;
        margin: 0 auto;
        padding: 64px 20px;
    }

    .site-footer__top{
        display: block;
        gap: 0px;
    }

    /* left */

    .f-brand__logo > svg{
        display: block;            /* ベースライン隙間対策 */
        width: 81px;
        height: auto;
    }

    .f-brand__logo > span{
        margin-left: 11px;
    }

    .f-brand__logo > span svg{
        width: 106px;
        height: auto;
    }

    .f-archive{
        margin-top: 35px;

        border-top: solid 1px #D4D4D4;
        border-bottom: solid 1px #D4D4D4;
        padding: 0 0;
    }
    .f-archive__title{
        font-weight: 500;
        font-size: 15px;
        margin-bottom: 0;
        color: #1D1C1A;
        padding: 24px 0;
    }

    .f-archive__title:before,
    .f-archive__title:after{
        content: "";
        display: block;
        width: 16px;
        height: 2px;
        background: #282B33;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    .f-archive__title:after{
        transition: all 0.2s;
        transform: translateY(-50%) rotate(90deg);
    }

    .f-archive__title.active:after{
        height: 0px;
    }

    .f-archive__list{
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px;
        margin-top: 0px;
        display: none;
        padding-bottom: 24px;
    }

    .f-archive__list li{
        padding-bottom: 4px;
    }

    .f-archive__list a{
        color: #282B33;
        text-decoration: none;
        font-size: 14px;
    }

    /* sitemap */
    .f-sitemap{
        display: block;
        width: 100%;
        max-width: 100%;
        padding-top: 10px;
    }

    .f-col__head{
        font-size: 12px;
        margin-top: 10px;
        margin-bottom: 4px;
    }
    .f-col__list{
        list-style: none;
        margin: 0 0 0px;
        padding: 0;
        display: grid;
        gap: 0px;
    }
    .f-col__list a{
        font-size: 15px;
        font-weight: 500;
        line-height: 220%; /* 33px */
        letter-spacing: 0.3px;

    }

    .f-col__list a:hover{
        text-decoration: none;
    }

    /* divider */
    .site-footer__rule{
        border: 0;
        border-top: none;
        margin:0px ;
    }

    /* bottom row */
    .site-footer__bottom{
        margin-top: 30px;
        border-top: none;
        display: block;
        justify-content: space-between;
        align-items: center;
        height: auto;
    }

    .f-links{
        grid-area: links;
        display: block;
        gap: 0;
    }
    .f-links a{
        font-size: 14px;
        margin-top: 13px;
    }

    .f-links a svg,
    .f-archive__list a svg{
        margin-left: 10px;
        display: inline-block;
    }

    .f-links a:hover{ text-decoration: none; }

    .f-social{
        margin-top: 30px;
        grid-area: social;
        display: inline-flex;
        gap: 24px;
        justify-self: end;
        margin-bottom: 40px;
    }

    .site-footer__last{

        padding: 20px 0 50px;
        display: block;
    }
    .f-legal{
        grid-area: legal;
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
        align-items: center;
        color: #111827;
        white-space: nowrap;;
    }
    .f-legal a{
        font-size: 12px;

    }
    .f-legal a:hover{ text-decoration: underline; }
    .f-legal__sep{
        color: #D4D4D4;
    }

    .f-copy{
        grid-area: copy;
        justify-self: auto;
        text-align: left;
        font-size: 12px;
        margin-top: 40px;
    }
}