:root {
    --font-scale: 1;
}
section
{
    scroll-margin-top: calc(200px * var(--font-scale));
}
/* =========================
   body
========================= */
body {
    background-color: #ffee00;
    background-image: conic-gradient(
        from 90deg,
        rgba(255, 255, 0, 0.5) 25%,
        transparent 0 50%,
        rgba(255, 255, 0, 0.5) 0 75%,
        transparent 0
    );
    background-size: 100px 100px;
    padding-top: calc(200px * var(--font-scale));
    position: relative;
    
}
.side-line {
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    gap: calc(20px * var(--font-scale));
    z-index: 1;
    pointer-events: none;
    
}

.side-line-left {
    left: calc(30px * var(--font-scale));
}

.side-line-right {
    right: calc(30px * var(--font-scale));
}

.line-red,
.line-blue {
    display: block;

    width: calc(30px * var(--font-scale));
    height: 100%;
    flex-shrink: 0;
}

.line-red {
    background-color: #d70000;
}

.line-blue {
    background-color: #0044b7;
}
/* =========================
   Header
========================= */

.header {
    width: 100%;
    height: calc(200px * var(--font-scale));
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.header .inner {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0 5%;
}

/* =========================
   Logo
========================= */

.header-logo {
    position: relative;
    display: inline-flex;
    /* width: 100%; */
    height: 100%;
    max-width: 596px;
    bottom: 0;
}

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


/* =========================
   Hamburger button
========================= */

.menu-button {
    position: relative;
    z-index: 1100;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 60px;
    height: 60px;
    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-button span {
    display: block;

    width: 100%;
    height: 3px;

    background-color: #000;

    border-radius: 10px;

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


/* =========================
   Hamburger animation
========================= */

.menu-button.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-button.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-button.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* =========================
   Navigation
========================= */

.global-nav {
    position: fixed;
    top: 0;
    right: 0;

    z-index: 1050;

    width: min(85%, 800px);
    height: 100dvh;

    padding: calc(200px * var(--font-scale)) 5% 5%;

    background-color: #fff;

    transform: translateX(100%);
    visibility: hidden;

    transition:
        transform 0.35s ease,
        visibility 0.35s;
}

.global-nav.is-open {
    transform: translateX(0);
    visibility: visible;
}


/* =========================
   Navigation list
========================= */

.global-nav-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.global-nav-list li {
    border-bottom: 1px solid #ddd;
}

.global-nav-list a {
    display: block;

    padding: calc(25px * var(--font-scale)) calc(5px * var(--font-scale));

    color: #000;
    font-size: calc(25px * var(--font-scale));
    font-weight: bolder;
    text-decoration: none;
    transition: opacity 0.2s ease;
    
}

.global-nav-list a:hover {
    opacity: 0.6;
}


/* =========================
   Overlay
========================= */

.menu-overlay {
    position: fixed;
    inset: 0;

    z-index: 1000;

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

    opacity: 0;
    visibility: hidden;

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

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


/* =========================
   Menu open
========================= */

body.menu-open {
    overflow: hidden;
}

/* =========================
   First View
========================= */

.fv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: visible;
    margin-bottom: calc(350px * var(--font-scale));
}

/* 放射背景 */
.fv::before {
    content: "";
    position: absolute;
    top: 80%;
    left: 50%;
    width: 160vw;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background-image: url("../img/fv_bg_front.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.fv .inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.fv_logo
{
    width: 70%;
    max-width: 800px;
}

.fv_center
{
    position: relative;
    
}

.fv_title
{
    position: absolute;
    bottom: calc(-220px * var(--font-scale));
    width: 75%;
    left: 50%;
    transform: translateX(-50%);
}
/* =========================
   Section Title
========================= */

.section-title {
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 80%;
    margin: 0 auto;
}
.section-title--red{--title-line-color: #e83828;}
.section-title--red_2{--title-line-color:#ff0000;}
.section-title--blue{--title-line-color: #2e3192;}
.section-title--green{--title-line-color: #009245;}
/* 見出し画像 */
.section-title__img {
    display: block;
    flex-shrink: 0;
    height: calc(90px * var(--font-scale));
    width: auto;
}
.global-nav-list .section-title__img 
{
    height: calc(50px * var(--font-scale));
}
.section-title__img_h3
{
    display: block;
    flex-shrink: 0;
    height: calc(77px * var(--font-scale));
    width: auto;
}
.section-title__img_h3_2
{
    display: block;
    flex-shrink: 0;
    height: calc(157px * var(--font-scale));
    width: auto;
}
/* 左右のライン */
.section-title__line {
    position: relative;
    flex: 1;
    max-width: 100%;
    height: calc(33px * var(--font-scale));
    flex-shrink: 1;
}


/* 2本線 */
.section-title__line::before,
.section-title__line::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(3px * var(--font-scale));
    background-color: var(--title-line-color);
}


/* 上の線 */
.section-title__line::before {
    top: 1px;
    height:calc(11px * var(--font-scale));
}


/* 下の線 */
.section-title__line::after {
    bottom: 1px;
}
 
.section .inner
{
    margin-top: calc(100px * var(--font-scale));
}
.inner>p
{
    font-size: calc(42px * var(--font-scale));
}
/* =========================
   event_period
========================= */

.project_overview
{
    margin: calc(100px * var(--font-scale)) auto 0;
    background-color: #fff;
    padding: calc(100px * var(--font-scale)) 10% ;
    border-radius: calc(63px * var(--font-scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(80px * var(--font-scale));
}
.project_overview p
{
    font-size: calc(45px * var(--font-scale));
}

/* =========================
   prize
========================= */

.prize .inner
{
    display: flex;
    flex-direction: column;
    gap: calc(50px * var(--font-scale));
}
.prize .inner>div
{
    position: relative;
}
.prize_photo
{
    position: absolute;
    z-index: 2;
}
.prize_1_photo
{
    height: calc(120% * var(--font-scale));
    max-width: 300px;
    /* top: -50px; */
    bottom: 0;
    right: 0;
}
.prize_2_photo
{
    height: calc(120% * var(--font-scale));
    max-width: 500px;
    /* top: -50px; */
    bottom: 0;
    right: calc(-150px * var(--font-scale));
}

/* =========================
   procedure
========================= */


/* フロー全体 */
.procedure_flow {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* 各項目 */
.procedure_item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: calc(150px * var(--font-scale));
}
/* 最後だけ矢印分の余白なし */
.procedure_item:last-child {
    padding-bottom: 0;
}
/* 白いボックス */
.procedure_box {
    width: 100%;
    padding: calc(30px * var(--font-scale)) 5%;
    background-color: #fff;
    border-radius: 9999px;
    text-align: center;
    font-size: calc(63px * var(--font-scale));
}
/* #カルコレ */
.procedure_box span {
    color: #ff0000;
}


/* =========================
   Arrow
========================= */

.procedure_item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(45px * var(--font-scale));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: calc(44px * var(--font-scale)) solid transparent;
    border-right: calc(44px * var(--font-scale)) solid transparent;
    border-top: calc(44px * var(--font-scale)) solid #003990;
}

/* =========================
   application
========================= */

.application .inner {
    display: flex;
    flex-direction: column;
    gap: calc(100px * var(--font-scale));
}

.app_goods {
    position: relative;
    padding: calc(80px * var(--font-scale)) 5% calc(50px * var(--font-scale));
    display: flex;
    justify-content: center;
}


/* 背景だけを別レイヤーにする */
.app_goods::before {
    content: "";

    position: absolute;
    inset: 0;

    background-color: #ffd600;
    border-radius: 200px;

    mix-blend-mode: multiply;

    z-index: 0;
}


/* 中身を背景より前に出す */
.app_goods_name,
.app_goods > p {
    position: relative;
    z-index: 1;
}


/* 景品名 */
.app_goods_name {
    display: block;
    flex-shrink: 0;

    height: calc(94px * var(--font-scale));
    width: auto;

    position: absolute;

    top: calc(-40px * var(--font-scale));;
    left: 50%;

    transform: translateX(-50%);
}


/* テキスト */
.app_goods > p {
    font-size: calc(40px * var(--font-scale));
}

.app_goods > p > span {
    text-decoration: underline;
}
/* =========================
   spot
========================= */
.spot_list
{
    text-align: center;
}
.spot_list>h3
{
    font-size: calc(63px * var(--font-scale));
}
.spot_list>ul
{
    font-size: calc(50px * var(--font-scale));
}
/* =========================
   Footer
========================= */

.footer {
    margin-top:  calc(200px * var(--font-scale));
    padding: calc(100px * var(--font-scale)) 0 calc(200px * var(--font-scale));
}

.footer .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100px * var(--font-scale));
}


/* バナー */
.footer_banner {
    display: block;
    width:90%;
    transition: opacity 0.3s ease;
}

.footer_banner img {
    display: block;

    width: 100%;
    height: auto;
}
.footer-contact
{
    text-align: center;
    color: #003990;
}
.footer-contact h3
{
    font-size: calc(60px * var(--font-scale));
}
.footer-contact p
{
    font-size: calc(52px * var(--font-scale));
    
}

/* =========================
   Responsive
========================= */

@media screen and (min-width:768px) {
    /* hover */
    .footer_banner:hover {
        opacity: 0.8;
    }
}

@media screen and (max-width: 1700px) {
    :root {
        --font-scale: 0.9;
    }
}
@media screen and (max-width: 1500px) {
    :root {
        --font-scale: 0.8;
    }
    .prize_1_photo
    {
        bottom: 30px;
    }
    .prize_2_photo
    {
        bottom: 30px;
    }
}
@media screen and (max-width: 1300px) {
    :root {
        --font-scale: 0.65;
    }
}
@media screen and (max-width: 1000px) {
    :root {
        --font-scale: 0.6;
    }
    .prize_1_photo
    {
        height: calc(150% * var(--font-scale));
    }
    .prize_2_photo
    {
        height: calc(160% * var(--font-scale));
        bottom: 15px;
        right: calc(-100px * var(--font-scale));
    }
}

@media screen and (max-width: 767px) {
    :root {
        --font-scale: 0.5;
    }
    .section {
        padding: calc(100px * var(--font-scale)) 0;
    }
    .side-line
    {
        gap: calc(15px * var(--font-scale));
    }
    .line-red, .line-blue 
    {
        width: calc(20px * var(--font-scale));
    }
    .side-line-left
    {
        left: calc(20px * var(--font-scale));
    }
    .side-line-right
    {
        right: calc(20px * var(--font-scale));
    }
    .fv
    {
        min-height: auto;
        margin-bottom: calc(300px * var(--font-scale));
    }
    .fv_logo
    {
        width: 50%;
    }
    .menu-button
    {
        gap: 4px;
        width: 40px;
        height: 40px;
    }
    
    /* =========================
    Hamburger animation
    ========================= */

    .menu-button.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-button.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}
@media screen and (max-width: 767px) {

    /* =========================
       Header
    ========================= */

    body {
        padding-top: 80px;
    }

    .header {
        height: 80px;
    }

    .header .inner {
        width: 100%;
        height: 100%;

        padding: 0 20px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    /* ロゴ */
    .header-logo {
        display: flex;
        align-items: flex-end;

        width: auto;
        height: 100%;

        max-width: none;
    }

    .header-logo img {
        display: block;

        width: auto;
        height: 72px;

        max-width: 75vw;

        object-fit: contain;
        object-position: left bottom;
    }


    /* ハンバーガー */
    .menu-button {
        flex-shrink: 0;

        width: 40px;
        height: 40px;

        padding: 5px;
    }
}
@media screen and (max-width: 500px) {
    :root {
        --font-scale: 0.3;
    }
    .fv_title
    {
        bottom: -50px;
    }
    .spot_list>ul,.procedure_box
    {
            font-size: calc(45px * var(--font-scale));
    }
    .prize_1_photo
    {
        height: calc(300% * var(--font-scale));
        bottom: 15px;
    }
    .prize_2_photo
    {
        height: calc(300% * var(--font-scale));
        bottom: 15px;
        right: calc(-100px * var(--font-scale));
    }
    .section-title
    {
        gap: calc(25px * var(--font-scale));
    }
}