body
    {
        box-sizing: border-box;
        color: #000000;
        font-size: 16px;
        font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        line-height: 1.8;
        margin: 0;
        padding: 0;
        width: 100vw;
        min-height: 100vh;
        text-align: center;
        height: 100%;
        background-image: url(../img/benefit-bg.png);
        background-position: center;
        background-repeat: repeat-y;
        background-size: 100%;
        overflow-x: hidden;
    }
    html, body {
    overscroll-behavior-x: none; /* 横方向のバウンスを禁止 */
    overscroll-behavior-y: none; /* 縦方向も禁止したい場合 */
    }
    main
    {
        box-sizing: border-box;
    }
    section
    {
        width: 940px;
        margin: 55px auto;
    }
    html
    {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }
    h2
    {   
        font-size: 32px;
        color: #754c24;
        margin: 0;
    }
    section h2
    {
        margin: 40px auto;
        position: relative;
    }
    h3
    {
        font-size: 24px;
        margin: 0;
    }
    h4
    {   
        font-size: 18px;
        margin: 0;
    }
    p{margin: 0;}
    img
    {
        max-width: 100%
    }

    .pc
    {
        display: block;
    }
    .sp
    {
        display: none;
    }
    p.font-34
    {
        font-size: 34px;
    }
    p.font-32
    {
        font-size: 32px;
    }
    p.font-30
    {
        font-size: 30px;
    }
    p.font-24
    {
        font-size: 24px;
    }
    p.font-22
    {
        font-size: 22px;
    }
    p.font-18
    {
        font-size: 18px;
    }
    p.font-16
    {
        font-size: 16px;
    }
    .red
    {
        color: #9b003f;
    }
    .contents
    {
        max-width: 1080px;
        margin: 0 auto;
        /* background-image: url(../img/body-bg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: cover; */
        height: 100%;
    }
    .top
    {
        width: 100%;
        position: relative;
    }
    .top>img
    {
        width: 100%;
    }
    .top>p
    {
        font-size: 24px;
        width: 100%;
        font-weight: bold;
        margin: -40px 0 0;
        padding: 0;
    }
    .benefit
    {
        margin-bottom: 120px;
    }
    .benefit>h2
    {
        background-image: url(../img/benefit-h2-bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        max-width: 265px;
        aspect-ratio: 265/60;
    }
    
    .benefit-flex
    {
        max-width: 940px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .benefit-flex>div
    {
        width: 48.5%;
        background-image: url(../img/benefit-box-bg.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        text-align: left;
        padding: 5% 3%;
        box-sizing: border-box;
        font-weight: bold;
        aspect-ratio: 450/205;
        outline: 2px solid #754c24;
        outline-offset: -15px;
        position: relative;
        border-radius: 0 0 5px;
    }
    .benefit-flex>div:before
    {
        content: "";
        display: inline-block;
        width: 100%;
        height: 10px;
        position: absolute;
        top: -9.5px;
        left: 0;
        border-radius: 5px 5px 0 0;
        background-image: url(../img/benefit-box-bg.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .benefit-flex>div h3
    {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../img/benefit-box-bg.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        padding: 0 10px;
        text-align: center;
        color: #9b003f;
        text-wrap: nowrap;
    }
    .benefit-flex>div h3::before
    {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        border-left: 2px solid #754c24;
        transform:rotate(-24deg);
        transform-origin:center;
        margin-right: -12px;
    }

    .benefit-flex>div h3::after{
        content:"";
        display:inline-block;
        width:20px;
        height:20px;
        border-right:2px solid #754c24;
        transform:rotate(24deg);
        transform-origin:center;
        margin-left: -20px;
    }
    .benefit-flex-goods-1>.font-22
    {
        margin-bottom: 10px;
    }
    .benefit-flex-goods-1>.font-16
    {
        margin-top: 20px;
    }
    .benefit-text-top
    {
        font-weight: bold;
        text-align: center;
    }
    .benefit-inline-box
    {
        display: flex;
        justify-content: space-between;
    }
    .benefit-inline-box>.goods-1
    {
        width: 40%;
        position: relative;
    }
    .goods-1>img
    {
        position: absolute;
        top: 0;
        left: -10px;
        height: 110%;
    }
    .goods-1-text
    {
        width: 60%;
        line-height: 1.4;
        text-align: justify;
        text-wrap: nowrap;
    }
    .benefit-flex>div>.shadow
    {
        position: absolute;
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        top: 5px;
        left: 5px;
        z-index: -1;
    }
    .benefit-flex-goods-2
    {
        line-height: 1.45;
    }
    .goods_2
    {
        position: absolute;
        top: -15px;
        right: -40px;
        width: 50%;
    }
    .contents-bg
    {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        background-image: url(../img/body-bg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: contain;
        position: relative;
    }
    .contents-bg::before
    {
        position: absolute;
        content: "";
        width: 100%;
        aspect-ratio: 4324/357;
        background-image: url(../img/bg-before.png);
        background-repeat: no-repeat;
        background-size: cover;
        left: 0;
        top: -88px;
    }

    .info
    {
        text-align: left;
        margin-top: 0;
    }

    .info dl {
      margin: 0;
      padding: 0;
    }

    .info dt {
      display: inline-block;
      background: #fff;
      border: 2px solid #d12c25;
      color: black;
      font-weight: bold;
      padding: 4px 12px;
      border-radius: 20px;
      margin-top: 2em;
    }

    .info dd {
      margin: 0.8em 0;
      padding-left: 1.2em;
      font-weight: bold;
      line-height: 1.8;
    }

    .info dd ul {
      padding-left: 1.2em;
      margin: 0.5em 0;
    }

    .info dd li {
      list-style-type: '● ';
      margin-bottom: 0.3em;
    }

    .info dd ul ul li {
      list-style-type: '・ ';
    }
    .action-box
    {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 35px 0;
        align-items: stretch;
    }
    .action-img
    {
        width: 48%;
        
        aspect-ratio: 442/268;
    }
    .action-img>img
    {
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
    .action-text
    {
        width: 48%;
        border: 2px dashed #754c24;
        position: relative;
    }
    .action-text::before
    {
        content: "";
        position: absolute;
        top: 50%;
        left: -25px;
        transform: translateY(-50%);
        width: 45px;
        height: 5px;
        background-color: #754c24;
        border-radius: 25px;
    }
    .action-text h3
    {
        padding: 2.5% 0;
        text-align: center;
        background-color: #ffe200;
        margin: 0;
        font-size: 32px;
    }
    .action-text>ul
    {
        display: inline-flex;
        flex-flow: column;
        justify-content: center;
        width: 100%;
        height: calc(100% - 80px);
        padding: 0 10% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .action-text ul li
    {
        list-style: none;
        font-size: 24px;
    }
    .action-text p
    {
        text-align: center;
    }
    .action-text>div
    {
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    .action-text>div>div
    {
        margin-top: 20px;
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon
    {
        width: 50px;
        aspect-ratio: 1/1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    .icon:hover
    {
        opacity: 0.8;
    }
    .icon>a
    {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .x
    {
        background-image: url(../img/x.png);
    }
    .insta
    {
        background-image: url(../img/insta.png);
    }
    .action-more
    {
        background-color: #fff;
        width: 100%;
        border-radius: 20px;
        padding: 2.5%;
        box-sizing: border-box;
    }
    .action-more>p
    {
        text-align: center;
    }

    .formrun-embed iframe
    {
        border-radius: 30px;
    }
    .footer>h4
    {
        margin: 30px;
    }
    .footer
    {
        padding-bottom: 100px;
        font-weight: bold;
    }

    /*応募完了ページ*/
    .result.contents
    {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        background-image: url(../img/body-bg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: 100%;
        position: relative;
        min-height: 100vh;
    }
    .result-top
    {
        width: 100%;
        margin:80px auto 35px; 
    }
    .result-top>img
    {
        width: 60%;
    }
    .message
    {
        width: 90%;
        max-width: 940px;
        background-color: #fff;
        padding: 5%;
        box-sizing: border-box;
        font-weight: bold;
        line-height: 1.5;
        border-radius: 20px;
    }
    .message-inline-box
    {
        width: 70%;
        margin: 30px auto;
    }
    .message-inline-box>p
    {
        text-align: left;
    }
    .message-box
    {
        width: 100%;
        padding: 5%;
        box-sizing: border-box;
        background-color: #fbf0a6;
        margin: 35px auto;
    }
    .message-box>h5
    {
        padding: 2px 15px;
        background-color: #fff;
        width: fit-content;
        margin: 0 auto 35px;
        font-size: 18px;
        border-radius: 25px;
        border: 2px solid #000000;
    }
    .message-box>ul
    {
        padding: 0;
        text-align: left;
        font-size: 18px;
        width: 90%;
        margin: 0 auto;
        list-style: none;
    }
    .message-box>ul>li
    {
        margin-bottom: 10px;
    }
    .note-red
    {
        color: #ff0000;
    }
    @media screen and (max-width:1079px) 
    {
        body
        {
            font-size: 16px;
        }
        .pc
        {
            display: none;
        }
        .sp
        {
            display: block;
        }
        h2
        {
            font-size: 28px;
        }
        .top>p
        {
            position: relative;
            width: 100%;
            font-size: 16px;
        }
        .contents
        {
            width: 100%;
        }
        section
        {
            width: 90%;
        }
        .benefit
        {
            margin-bottom: 80px;
        }
        .benefit-flex
        {
            flex-flow: column;
            align-items: center;
        }
        .benefit-flex>div
        {
            width: 60%;
            min-width: 320px;
            margin: 25px;
        }
        .contents-bg::before
        {
            height: 8vw;
            top: -8vw;
        }
        
        .info dt
        {
            margin-top: 1em;
        }
        .goods-1-text
        {
            text-wrap: wrap;
        }
    }
    @media screen and (max-width:768px) {
        body
        {
            background-size: contain;
        }
        body,
        .top>p
        {
            font-size: 14px;
            margin: 0;
            width: 100%;
        }
        h2
        {
            font-size: 26px;
        }
        .contents-bg
        {
            background-size: contain;
        }
        section h2
        {
            margin: 0 auto;
        }
        .benefit>h2
        {
            aspect-ratio: 0;
        }
        p.font-34
        {
            font-size: 30px;
        }
        p.font-32
        {
            font-size: 28px;
        }
        p.font-30
        {
            font-size: 26px;
        }
        p.font-24
        {
            font-size: 22px;
        }
        p.font-22
        {
            font-size: 20px;
        }
        p.font-18
        {
            font-size: 16px;
        }
        p.font-16
        {
            font-size: 14px;
        }

        .benefit-flex>div
        {
            padding: 10% 5%;
            background-size: 100% 100%;
        }
        .benefit-inline-box
        {
            display: block;
        }
        .benefit-inline-box>.goods-1
        {
            width: 80%;
            aspect-ratio: 204/243;
            margin: 5px auto;
        }
        .goods-1>img
        {
            position: relative;
            object-fit: contain;
        }
        .goods-1-text
        {
            width: 90%;
            text-wrap: wrap;
            margin: 10px auto;
            line-height: 1.5;
        }
        .goods-1-text .font-18:nth-child(1),
        .goods-1-text .font-34
        {
            text-align: center;
        }
        .benefit-flex-goods-1>.font-16
        {
            width: 90%;
            margin: 0 auto;
        }
        .benefit-flex-goods-2>p
        {
            width: 90%;
            margin: 5px auto;
            line-height: 1.5;
        }
        .goods_2
        {
            width: 35%;
            top: 0;
            right: -15px;
        }
        .info dd
        {
            padding: 0;
        }
        .action-box
        {
            flex-flow: column;
        }
        .action-img
        {
            width: 100%;
        }
        .action-text
        {
            width: 100%;
            margin-top: 25px;
        }
        .action-text::before {
            content: "";
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 35px;
            background-color: #754c24;
            border-radius: 25px;
        }
        .action-text ul 
        {
            padding: 10px !important;
            box-sizing: border-box;
        }
        .action-text h3
        {
            font-size: 26px;
        }
        .action-text ul li
        {   
            font-size: 22px;
        }
        .action-text>div
        {
            height: auto;
            padding: 5%;
            box-sizing: border-box;
        }

        /*応募完了ページ*/

        .result-top
        {
            width: 100%;
            margin:50px auto 35px; 
        }
        .result-top>img
        {
            width: 90%;
        }
        .message
        {
            width: 90%;
            max-width: 940px;
            background-color: #fff;
            padding: 5%;
            box-sizing: border-box;
            font-weight: bold;
            line-height: 1.5;
            border-radius: 20px;
            text-align: left;
        }
        .message-inline-box
        {
            width: 100%;
            margin: 30px auto;
        }
        .message-inline-box>p
        {
            text-align: left;
        }
        .message-box
        {
            width: 100%;
            padding: 5%;
            box-sizing: border-box;
            background-color: #fbf0a6;
            margin: 35px auto;
        }
        .message-box>p
        {
            text-align: center;
        }
        .message-box>h5
        {
            padding: 2px 15px;
            background-color: #fff;
            width: fit-content;
            margin: 0 auto 35px;
            font-size: 16px;
            border-radius: 25px;
            border: 2px solid #000000;
        }
        .message-box>ul
        {
            padding: 0;
            text-align: left;
            font-size: 16px;
            width: 90%;
            margin: 0 auto;
            list-style: none;
        }
        .message-box>ul>li
        {
            margin-bottom: 10px;
        }
    }