:root {
    --base: #e50013;
    --text: #333333;
    --white: #ffffff;
    --border: #989898a6;
    --pap-header-h:96px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-header,.site-header *,.site-menu,.site-menu * {
    box-sizing:border-box;
}

ul,dl,ol {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    font-family: "Noto Sans JP", sans-serif;
}

.site-header-nav a,
.site-menu-nav a {
    font-family: "Roboto Condensed", sans-serif;
}

p {
    color: var(--text);
}

/*------------------------------ここからヘッダー------------------------------*/
.site-header {
    position:relative;
    z-index:1100;
    background:var(--white);
}
.site-header-inner {
    /* max-width:1600px; */
    width: 100%;
    min-height:var(--pap-header-h);
    padding:14px clamp(20px,4.5vw,80px);
    margin:auto;
    display:flex;
    align-items:center;
    gap:clamp(16px,2vw,36px);
    position: fixed;
}

/*---------------------------
ロゴ
---------------------------*/
.site-header-logo {
    display:block;
    flex-shrink:0;
    line-height:0;
}
.site-header-logo img {
    display:block;
    width:clamp(145px,14vw,215px);
    height:auto;
}

.logo-area {
    position: relative;
}

.logo-area::before {
    content: "";
    /* width: 180px;
    height: 50px; */
    width: clamp(212px, 20vw, 330px);
    height: 100%;
    background-image: url(../img/pg-logo-low-min.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;

    position: absolute;
    top: 100%;
    left: 0;

    transform: translateY(0);
    
    transition: transform .3s ease,
                opacity .3s ease;
}

.site-header.is-scrolled .logo-area::before {
    transform: translateY(10px);
    opacity: 0;
}

/*---------------------------
グローバルナビゲーション
---------------------------*/
.site-header-nav {
    margin-left:auto;
}
.site-header-nav ul {
    display:flex;
    align-items:center;
    gap:clamp(18px,2.3vw,38px);
    padding:0;
    margin:0;
    list-style:none;
}
.site-header-nav a {
    display:block;
    position:relative;
    padding:12px 0;
    color:var(--text);
    font-size: clamp(14px, 1.1vw, 19px);
    font-weight:800;
    text-decoration:none;    
}

/* ページ作成次第解除していく */
.site-header-nav li:nth-child(n+4) a {
    pointer-events: none;
    cursor: default;
}

.site-header-nav a::after {
    content:"";
    position:absolute;
    bottom:6px;
    left:0;
    width:100%;
    height:2px;
    background:var(--base);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s;
}
.site-header-nav a:hover::after,.site-header-nav a[aria-current="page"]::after {
    transform:scaleX(1)
}

/*---------------------------
CTA
---------------------------*/
.site-header-cta {
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto
}
.site-header-cta>a {
    min-width:140px;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:5px 6px 5px 24px;
    border-radius:100px;
    background:var(--base);
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:800;
    transition:transform .25s
}
.site-header-cta>a:hover {
    transform:translateY(-2px)
}
.site-header-cta span {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff
}
.site-header-cta img {
    width:20px;
    height:20px;
    object-fit:contain
}

/*---------------------------
ハンバーガーアイコン
---------------------------*/
.site-header-toggle {
    display:none;
    position:relative;
    z-index:1200;
    flex-shrink:0;
    width:60px;
    height:60px;
    border:2px solid var(--base);
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    box-shadow:0 4px 0 rgba(235,0,24,.08);
    transform: rotate(0deg);
    transition:transform .25s,background-color .25s
}
@media (hover: hover) and (pointer: fine) {
    .site-header-toggle:hover {
        transform: rotate(-7deg);
    }
}
/* メニューを開いている間は回転させない */
.site-header-toggle[aria-expanded="true"] {
    transform: rotate(0deg);
}
.site-header-toggle:focus-visible,.site-menu a:focus-visible {
    outline:3px solid #0a74d7;
    outline-offset:4px
}
.site-header-toggle-lines {
    display:block;
    position:relative;
    width:26px;
    height:22px;
    margin:auto;
}
.site-header-toggle-lines>span {
    position:absolute;
    left:0;
    width:26px;
    height:3px;
    border-radius:2px;
    background:var(--base);
    transform-origin:center;
    transition:transform .35s,top .35s,opacity .2s;
}
.site-header-toggle-lines>span:nth-child(1) {
    top:2px;
}
.site-header-toggle-lines>span:nth-child(2) {
    top:10px;
}
.site-header-toggle-lines>span:nth-child(3) {
    top:18px;
}
.site-header-toggle[aria-expanded="true"] .site-header-toggle-lines>span:nth-child(1) 
{
    top:10px;
    transform:rotate(45deg);
}
.site-header-toggle[aria-expanded="true"] .site-header-toggle-lines>span:nth-child(2) {
    opacity:0;
}
.site-header-toggle[aria-expanded="true"] .site-header-toggle-lines>span:nth-child(3) {
    top:10px;
    transform:rotate(-45deg);
}

/*---------------------------
ハンバーガーメニュー
---------------------------*/
.site-menu {
    position: fixed;
    z-index: 1050;
    inset: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background: #fff;

    overflow: hidden;
    isolation: isolate;

    visibility: hidden;
    opacity: 0;
    transform: translateX(5%);
    pointer-events: none;

    transition:
        visibility .4s,
        opacity .4s,
        transform .5s cubic-bezier(.2,.7,.2,1);
}

.site-menu.is-open {
    visibility:visible;
    opacity:1;
    transform:none;
    pointer-events:auto;
    background: #3333339c;
}

.site-menu-white {
    width:min(60%,1300px);
    height:100%;
    min-height: 0;
    padding:clamp(110px,22vh,180px) 0 clamp(110px,14vh,150px) clamp(24px,9vw,145px);
    margin:0 0 0 auto;
    background: #fff;
    overflow: hidden;
}

.site-menu-inner {
    position:relative;
    z-index:2;    
}

.site-menu-eyebrow {
    margin:0 0 24px;
    color:var(--base);
    font-size:13px;
    font-weight:900;
    letter-spacing:.24em;
}

.site-menu-nav ul {
    list-style:none;
    margin:0;
    padding:0;
}

.site-menu-nav li {
    opacity:0;
    transform:translateY(20px);
    transition:opacity .4s,transform .4s;transition-delay:0s;
}

.site-menu.is-open .site-menu-nav li {
    opacity:1;
    transform:none;
    transition-delay:calc(.12s + var(--item-index)*.065s);
}

.site-menu-nav a {
    display:flex;
    align-items:center;
    gap:24px;
    width:max-content;
    max-width:100%;
    padding:3px 0;
    color:var(--text);
    text-decoration:none;
    font-size:clamp(38px,5vw,78px);
    font-weight:950;
    line-height:1.15;
    letter-spacing:-.045em;
    transition:color .2s;
}

/* 下層ページ作成次第解除 */
.site-menu-nav li:nth-child(n+4) {
    pointer-events: none;
    cursor: default;
}

.site-menu-nav a:hover,.site-menu-nav a[aria-current="page"] {
    color:var(--base);
}

.site-menu-line {
    display:block;
    width:clamp(45px,8vw,130px);
    height:7px;
    background:linear-gradient(90deg,var(--base),#ffb7be);
    clip-path:polygon(0 30%,86% 30%,86% 0,90% 0,90% 100%,93% 100%,93% 0,97% 0,97% 100%,100% 100%,100% 0,0 0);
    transform:scaleX(.6);
    transform-origin:left;
    opacity:.7;
    transition:transform .3s,opacity .3s;
}

.site-menu-nav a:hover .site-menu-line {
    transform:scaleX(1);
    opacity:1;
}

.site-menu-bottom {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:38px;
}

.site-menu-pill {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    min-width:150px;
    padding:12px 18px;
    border-radius:100px;
    background:var(--base);
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:850;
}

.site-menu-pill span {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#fff;
    color:var(--base);
}

.site-menu-pill span img {
    display: block;
    width: 50%;
}

.site-menu-watermark {
    position: absolute;
    right: 0;
    top: 50%;
    width: 30%;
    z-index: 0;

    pointer-events: none;
    user-select: none;

    transform: translateY(-50%);
}

.site-menu-watermark img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

    opacity: 0.1;
}
.site-menu-decoration {
    position:absolute;
    z-index:1;
    width:min(56vw,800px);
    aspect-ratio:1.65;
    background-image:url('../img/menu-splash.webp');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events:none;
}
.site-menu-decoration-top {
    right:-12%;
    top:-25%;
    transform:rotate(-14deg);
}
.site-menu-decoration-bottom {
    right:-12%;
    bottom:-28%;
    transform:rotate(15deg);
}

html:has(body.site-menu-open),
body.site-menu-open {
    overflow: hidden;
}

/*---------------------------
ハンバーガー開閉用
---------------------------*/
@media(max-width:1350px) {
    .site-header-nav,.site-header-cta {
        display:none;
    }
    .site-header-toggle {
        display:block;
        margin-left:auto;
    }
}

/*---------------------------
レスポンシブ
---------------------------*/
@media(max-width:700px) {
    :root {
        --pap-header-h:76px;
    }
    .site-header-inner {
        position: relative;
        padding:8px 20px 0;
    }
    .site-header-logo img {
        width:155px;
    }
    .site-header-toggle {
        width:52px;
        height:52px;
    }
    .site-menu-inner {
        padding:125px 30px 50px;
    }
    .site-menu-nav a {
        font-size:clamp(35px,10vw,56px);
        gap:14px;
        padding:8px 0;
    }
    .site-menu-line {
        height:5px;
        width:52px;
    }
    .site-menu-decoration {
        width:75vw;
    }
    .site-menu-decoration-top {
        top:-10%;
        right:-25%;
    }
    .site-menu-decoration-bottom {
        bottom:-10%;
        right:-25%;
    }
    .site-menu-bottom {
        margin-top:30px;
    }
}

@media(max-width:440px) {
    .site-menu-white {
        width: 100%;
        padding: 50px 10px;
    }
    .site-menu-inner {
        padding: 50px 10px;
    }
    .site-menu-bottom {
        flex-direction: column;
    }
    .site-menu-watermark {
        right: -10%;
        width: 90%;
    }

    .site-menu-open .logo-area::before {
        opacity: 0;
    }
}

/*---------------------------
アクセシビリティ対応
---------------------------*/
@media(prefers-reduced-motion:reduce) {
    .site-menu,.site-menu *,.site-header-toggle,.site-header-toggle * {
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
    }
}


/*------------------------------ここからフッター------------------------------*/

footer#footer {
    width: 100%;
    padding: 35px clamp(20px, 5.5vw, 90px) 25px;
    background: #fff;
    border-top: 1px solid #ddd;
}

/* ========================================
   上段
======================================== */

.fotter-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: clamp(25px, 3vw, 50px);
}

/* ロゴ */
.foot-logo {
    flex-shrink: 0;
    width: 100px;
}

.foot-logo a {
    display: block;
}

.foot-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   ナビゲーション
======================================== */

.foot-nav {
    flex: 1;
    min-width: 0;
}

.foot-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(15px, 1.8vw, 30px);

    margin: 0;
    padding: 0;
    list-style: none;
}

.foot-nav a {
    color: #666;
    font-family: "Roboto Condensed", sans-serif;
    font-size: clamp(15px, 1.3vw, 20px);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;

    transition: color 0.3s ease;
}

/* 下層ページを作成次第解除 */
.foot-nav li:nth-child(n+4) a {
    pointer-events: none;
    cursor: default;
}

.foot-nav a:hover,
.foot-nav a[aria-current="page"] {
    color: var(--base);
}

/* ========================================
   SNSアイコン
======================================== */

.foot-sns {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

.foot-sns a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(32px, 2.7vw, 42px);
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    background: var(--base);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* パプリカ公式のSNSリンクを挿入してから解除 */
.foot-sns a {
    pointer-events: none;
    cursor: default;
}

.foot-sns a:hover {
    transform: translateY(-4px);
    opacity: 0.8;
}

.foot-sns img {
    display: block;
    width: 55%;
    height: 55%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ========================================
   TOPへ戻るボタン
======================================== */

.back-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 82px;
    height: 82px;

    border: 1px solid var(--base);
    border-radius: 50%;

    background-color: #fff;
    color: var(--base);

    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.back-btn a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.back-btn a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition: filter 0.3s ease;
}

/* ホバー時だけ赤 */
@media (hover: hover) {
    .back-btn a:hover {
        background-color: var(--base);
        color: #fff;
    }

    .back-btn a:hover img {
        filter: brightness(0) invert(1);
    }
}

/* キーボード操作時のフォーカス表示 */
.back-btn a:focus-visible {
    outline: 2px solid var(--base);
    outline-offset: 4px;
}

/* ========================================
   下段
======================================== */

.foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 55px;
}

.foot-copy {
    margin: 0;
}

.foot-copy small {
    color: #888;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.foot-b-link {
    display: flex;
    align-items: center;
    gap: 0;
}

.foot-b-link a {
    color: #888;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;

    transition: color 0.3s ease;
}

.foot-b-link a + a {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #aaa;
}

.foot-b-link a:hover {
    color: var(--base);
}

/* ========================================
   タブレット
======================================== */

@media (max-width: 1100px) {

    .foot-nav {
        flex: 1 1 calc(100% - 130px);
    }

    .foot-sns {
        margin-left: 0;
    }

    .back-btn {
        margin-left: auto;
    }

    .foot-bottom {
        margin-top: 40px;
    }
}

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

@media (max-width: 767px) {
    .fotter-inner {
        flex-wrap: wrap;
        gap: 25px;
    }

    footer#footer {
        padding: 40px 5% 25px;
    }

    .fotter-inner {
        align-items: flex-start;
        gap: 30px 20px;
    }

    .foot-logo {
        width: 75px;
    }

    .foot-nav {
        flex: 1 1 calc(100% - 100px);
    }

    .foot-nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        place-items: center;
        gap: 15px;
    }

    .foot-nav a {
        font-size: 16px;
    }

    .foot-sns {
        gap: 15px;
    }

    .foot-sns a {
        width: 38px;
    }

    .back-btn a {
        width: 70px;
        height: 70px;
        font-size: 13px;
    }

    .foot-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 25px;
        margin-top: -40px;
    }

    .foot-copy small,
    .foot-b-link a {
        font-size: 12px;
    }
}


/*------------------------------ここから固定CTA------------------------------*/
#fix-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-around;

    gap: 3px;

    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        visibility 0.4s;

    z-index: 500;
}

#fix-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#fix-cta a {
    padding: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: var(--base);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    flex: 1;

    color: var(--white);
    font-size: clamp(16px, 1.2vw, 24px);
    font-weight: 900;
    border: solid 1px var(--white);
}

#fix-cta span {
    /* display: block;
    width: 2vw;
    height: 100%; */
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;

    transform: translateY(0);
    transition: transform .3s ease;
}

#fix-cta a:hover span {
    transform: translateY(-5px);
}


#fix-cta span img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    /* display: block;
    width: 100%;
    filter: brightness(0) invert(1); */
}
/* ========================================
   レスポンシブ
======================================== */
/*---------------------------
スマホ
---------------------------*/
@media (max-width: 440px) {
    #fix-cta a {
        padding: 10px 5px 20px;
    }
}