@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap';

html {
    width: 100%;
    font-size: 100%;
    line-height: 1.68;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    line-break:strict;
    word-break: normal;
    word-wrap: break-word;
}

body {
    width: 100%;
    font-family: YakuHanJP, 'Noto Sans JP', 'ヒラギノUD丸ゴ W3 JIS2004', 'Hiragino UD Sans Rd W3 JIS2004',
        'Hiragino UD Sans F W5 JIS2004', 'ヒラギノUD角ゴF W5 JIS2004', sans-serif;
    font-feature-settings: “pkna”;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* @group Reset */
* {
    margin: 0;
    padding: 0;
    word-break: break-word;
}

/* 通常 */
a:link {
    color: #000000;
    text-decoration: none;
    padding-right: 1px;
    padding-left: 1px;
}

/* 閲覧済み */
a:visited {
    color: #000000;
    text-decoration: none;
}

/* マウスオン */
a:hover {
    color: #000000;
    padding-right: 1px;
    padding-left: 1px;
}

/* クリック中 */
a:active {
    color: #000000;
    text-decoration: none;
    background-color: transparent;
}

/* クリック時の枠線 */
a {
    padding: 0;
    outline: none;
	transition: .3s;
}

ul,
ol {
    list-style: none;
}

img {
    vertical-align: middle;
    max-width: none;
    width: auto;
}

/* @end */
div,
p {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: normal !important;
}

#container {
    height: auto;
    display: block;
}

#container.top{
    animation-name: fade_in;
    animation-duration: 1.2s;
}
#container.soon{
	animation:none;
}

@keyframes fade_in{
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

header {
    margin: 0 auto 0;
    display: block;
    position: relative;
    z-index: 5;
}

header .inner,
footer .inner {
    margin: 0 auto;
}

header .inner{
    padding: 25px 30px 12px;
}
header::after{
    content:"";
    background:url(../parts/top_sky.png) no-repeat;
    background-size:100% 100%;
    background-position: top center;
    display:block;
    width:100%;
    height:287px;
    position: absolute;
    top:0;
    z-index: -1;
}
p.page{
    position: absolute;
    right: 0;
    top: 0;
    background: #006dbf;
    color: #fff;
    padding: 5px 10px 5px 24px;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 8% 100%);
}

header h1 > picture{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#top_box{
    position: relative;
    margin-top: -94px;
}

ul.main{
    display: flex;
    height: clamp(55.625rem, 50.615rem + 7.82vw, 60rem);
}

ul.main li{
    width: 100%;
    position: relative;
    overflow: hidden;
}

ul.main li img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    overflow: hidden;
}

/* ul.main li:nth-child(1) img{
	object-position: 100% 100%
}
ul.main li:nth-child(2) img{
	object-position: 0 100%
} */
ul.sub{
    display: flex;
    margin: 20px 25px 0;
    padding: 0 0 207px;
    justify-content: space-between;
}

ul.sub li{
    height: 62px;
}

ul.sub li img{
    display: block;
    max-height: 100%;
}

#container:not(.soon) picture.catch{
    display: block;
    height: 649px;
    position: absolute;
    bottom: 0;
    left: clamp(-2.313rem, -34.069rem + 37.61vw, 11.063rem);
    margin: 0 auto 0px;
    animation-name: fade_down;
    animation-duration: 1.5s;
    z-index: 5;
}
#container:not(.soon) picture.catch img{
    display: block;
    width: auto;
    height: 100%;
}
#container:not(.soon) img.sub{
    position: absolute;
    top: 22em;
    right: 0px;
}

@keyframes fade_down{
    0%{
        opacity: 0;
        transform: translateY(220px);
    }

    40%{
        opacity: 0;
    }

    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

nav{
    background: #fcffc0;
    padding: 18px 0 15px;
    position: relative;
    z-index: 5;
}

nav ul{
    display: flex;
    justify-content: center;
    gap: 0 40px;
}

nav ul li{
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 13px;
}

nav li a{
    letter-spacing: -.39px;
    line-height: 26px;
    font-size: 16px;
    font-weight: bold;
}
nav li a:hover{
	opacity:0.6;
}

nav ul li::before{
    content: '';
    background: url('../parts/icon_nav_arrow.svg') no-repeat;
    width: 9px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 0;
    display: block;
    margin: auto 4px auto 0;
}

nav a{
    font-size: 16px;
    letter-spacing: -.48px;
    line-height: 28px;
}

/* 概要 */
#about{
    background: #006dbf;
    color: #ffffff;
    padding: 55px 0 50px;
}

#about dt img{
    display: block;
    margin: 0 auto;
    padding: 0 0 15px;
}

#about dd{
    max-width: 795px;
    margin: 0 auto 0;
    font-size: 25px;
    font-weight: 900;
    padding: 0 0 0px 0px;
    position: relative;
    left: 48px;
    white-space: nowrap;
}
#about dd p{
    display: flex;
    align-items: center;
}
#about dd span{
    font-size: 37px;
}
#about dd span::after{
    content: "！";
    transform: rotate(20deg);
    display: inline-block;
    position: relative;
    top: 3px;
    font-size: 115%;
    line-height: 0.5;
}

/* 応募方法 */
#howto{
    padding: 86px 0 84px;
    position: relative;
    overflow: hidden;
}

#howto::before{
    content: '';
    background: url('../parts/howto_chara_a.svg') no-repeat;
    background-size: contain;
    height: 670px;
    width: 290px;
    position: absolute;
    left: -2em;
    top: 198px;
    z-index: -1;
}

#howto::after{
    content: '';
    background: url('../parts/howto_chara_b.svg') no-repeat;
    background-size: contain;
    height: 409px;
    width: 337px;
    position: absolute;
    right: -20px;
    bottom: -11.7em;
    z-index: -1;
}

.contents h2{
    text-align: center;
}

#howto h2{
    margin: 0 0 52px;
}

#howto ul{
    display: flex;
    justify-content: center;
    gap: 0 50px;
}

#howto ul li{
    width: 200px;
    position: relative;
}

#howto ul li::after{
    content: url('../parts/icon_howto_arrow.svg');
    display: block;
    position: absolute;
    top: 7.8em;
    right: -31px;
}

#howto ul li:last-child::after{
    content: none;
}

#howto ul li p{
    font-size: 15px;
    line-height: 25px;
}

#howto h3{
    font-size: 22px;
    letter-spacing: 1.1px;
    line-height: 32px;
    color: #006dbf;
    margin: 14px 0 12px;
    text-align: center;
}

/* 応募フォーム */
#entry{
    background: #fdfbdb;
    padding: 62px 0 101px;
    position: relative;
}

#entry h2{
    margin: 0 0 20px;
}

#entry h2 + p{
    font-size: 15px;
    line-height: 21px;
    color: #006dbf;
    text-align: center;
    margin: 0 0 44px;
}

#entry div p.error{
    position: absolute;
    font-size: 18px;
    margin: 0;
    bottom: -20px;
    line-height: 1.3;
}
#entry .upload p.error{
    bottom: -53px;
    left: 0;
}

#entry .check p.error{
    bottom: 10px;
    font-weight: 500;
}

form{
    max-width: 770px;
    margin: 0 auto;
}

form dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 27px 0;
}

form dt{
    font-size: 18px;
    line-height: 43px;
    width: 200px;
}

form dd{
    max-width: 540px;
    width: 100%;
}

form input{
    border: 1px solid #006dbf;
    height: 40px;
    border-radius: 4px;
    width: 100%;
    padding: 5px 8px;
}

form input[type='file']{
    display: none;
}

form input[type='checkbox']{
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    appearance: none;
    appearance: none;
    appearance: none;
    position: relative;
}

form input[type='checkbox']::before{
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid #006dbf;
    background: #ffffff;
    border-radius: 2px;
    display: block;
	cursor: pointer;
}

form input[type='checkbox']::after{
    content: '';
    display: block;
    position: absolute;
    border-bottom: 3px solid #006dbf;/* チェックの太さ */
    border-left: 3px solid #006dbf;/* チェックの太さ */
    opacity: 0;/* チェック前は非表示 */
    height: 6px;/* チェックの高さ */
    width: 11px;/* チェックの横幅 */
    transform: rotate(-45deg);
    top: 5px;/* チェック時の位置調整 */
    left: 4px;/* チェック時の位置調整 */
	cursor: pointer;
}

form input[type='checkbox']:checked::after{
    opacity: 1;
}
form input#warranty_number{
    max-width: 230px;
}

form select{
    width: 230px;
    height: 40px;
    border: 1px solid #006dbf;
    background: #ffffff;
    border-radius: 4px;
    padding: 6px 11px;
	cursor: pointer;
}

form dd label:not(label[for='accept'],label[for='purchase'],label#type_label){
    width: 160px;
    height: 40px;
    background: #006dbf;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin: 37px 0 0;
    position: relative;
	cursor: pointer;
}

form dd label span{
	transition:.3s;
}
form dd label:hover span{
	opacity:0.6;
}
form dd .product{
    max-width: 303px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 0;
}
form dd .product:first-of-type{
    margin-bottom: 40px;
}
form dd .product:last-of-type{
    margin-bottom: 23px;
}
form .sample{
    margin: 1em 0 0;
}
form .sample p{
    font-size: 14px;
    font-weight: 400;
    display: flex;
}
form .upload p{
    display: flex;
}
form .upload p + p{
    margin-top: 0!important;
}
form .sample p::before,
form .upload p::before{
    content:"※";
}
form .sample img{
    max-width: 340px;
    display: block;
    margin: 1em 0;
}
div:has(input#warranty_number),
form dd .product{
    position: relative;
}

.check{
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 23px 0 28px;
    color: #006dbf;
    font-weight: bold;
    position: relative;
}

#confirm img{
    display: block;
    width: 150px;
}

p.caution{
    font-size: 12px;
    margin: 4px 0 0;
}

dt.up_ttl{
    padding: 33px 0 0;
}

dd.upload{
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
}

dd.upload p:not(.error){
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    margin: 20px 0 0;
    word-break: break-word;
}

dd .privacy_txt{
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

dd .privacy_txt ul{
    counter-reset: count 0;
}

dd .privacy_txt ul:nth-child(2){
    margin: 1em 0;
}

dd .privacy_txt li{
    position: relative;
    padding-left: 1em;
}

dd .privacy_txt li::before{
    content: counter(count) '. ';
    counter-increment: count 1;
    position: absolute;
    left: 0;
}

dd .privacy_txt a{
    color: #006dbf;
    word-break: break-all;
}
dd .privacy_txt a:hover{
	opacity:0.6;
}

dt.privacy{
    margin: -8px 0 0;
}

form dl + div{
    color: #006dbf;
    text-align: center;
    line-height: 26px;
    font-weight: 500;
    margin: 0 0 30px;
}

form button{
    max-width: 430px;
    width: 100%;
    height: 90px;
    background: #006dbf;
    border: 1px solid #006dbf;
    border-radius: 5px;
    color: #ffffff;
    margin: 0 auto;
    display: block;
    font-weight: bold;
    font-size: 23px;
    position: relative;
}

form button::after{
    content: '';
    background: url('../parts/icon_form_arrow_r.svg') no-repeat;
    width: 12px;
    height: 30px;
    background-size: contain;
    display: block;
    position: absolute;
    right: 38px;
    top: 31px;
}

p.error{
    font-size: 18px;
    color: #b12a34;
}

/* 注意事項 */
#notes{
    padding: 83px 0 90px;
    background: #f8f8ed;
}

#notes h2{
    margin: 0 0 30px;
}

.note_box{
    max-width: 960px;
    background: #fffff4;
    display: block;
    margin: 0 auto;
    border: 1px solid #d1d1c1;
    padding: 60px 70px;
}

/*.note_box > p{
    margin: 0 0 1em;
}

.note_box dt{
    font-size: 15px;
    line-height: 25px;
    margin: 0 0 2px 5px;
    font-weight: bold;
}
*/

.note_box dd{
    font-size: 13px;
    line-height: 25px;
    margin: 0 0 25px;
    font-weight: 500;
}

.note_box dl:last-child dd{
    margin-bottom: 0;
}

.note_box ul{
	counter-reset: count 0;
}
.note_box li{
    display: flex;
}
.note_box li:before{
    content: counter(count) '）';
    counter-increment: count 1;
	padding-right: 0.5em;
}

/* シェアボタン */
.share{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap: 0 10px;
    padding: 40px 0 62px;
}
.share a{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}
.share p{
    font-size: 20px;
    transition: .3s;
    font-weight: 700;
    margin-left: 5px;
}
.share a p:hover{
	opacity:0.6;
}

footer{
    color: #fff;
    background: #006dbf;
}

footer .inner{
    padding: 30px 40px 30px 30px;
    display: flex;
    justify-content: space-between;
}

footer p{
    margin: 14px 0 0;
    font-size: 12px;
    letter-spacing: -.24px;
    line-height: 17px;
    font-weight: 500;
}

#page-top {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 50px;
    left: 50%;
    margin-left: 445px;
    z-index: 9999999;
    cursor: pointer;
    display: none!important;
}

#page-top a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 90px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    transition: 1s;
    background: url('../parts/pagetop.png') no-repeat 0 0;
}

/* 確認画面 */
header.subpage{
    height: 180px;
    border-bottom: 5px solid #006dbf;
}

header img.sub{
    display: block;
    margin: 35px auto 0;
    z-index: 3;
}

header img.chara{
    display: block;
    position: absolute;
    right: 20px;
    max-width: 486px;
    left: auto;
    top: 10px;
}

.subpage::after{
    content:none;
}
.subpage h1 picture{
    height: 110px;
    margin: 0;
}
.subpage .inner > picture{
    position: absolute;
    right: 20px;
    height: 220px;
    left: auto;
}
.subpage .inner > picture img{
    display: block;
    height: 100%;
}

.confirm_p #box{
    background: #f7f7f7;
    padding: 0 0 90px;
}

.confirm_p #box h1{
    position: relative;
    z-index: 5;
    padding: 40px 0;
}

.confirm_p #box h1 img{
    display: block;
    margin: 0 auto;
}

section{
    background: #ffffff;
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    padding: 62px 50px 80px;
}

section dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 67px;
    margin: 0 0 40px;
}

section dt{
    max-width: 113px;
    width: 100%;
    line-height: 28px;
}

section dd{
    width: calc(100% - 180px);
    white-space: nowrap;
    font-size: 18px;
    line-height: 28px;
    font-weight: bold;
}

section dd img{
    display: block;
    max-width: 300px;
}

section dt.img,
section dt.img + dd{
    margin: 30px 0;
}

section dd small{
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    white-space: normal;
    margin-top: 10px;
    display: block;
    max-width: 580px;
}

section .txt p{
    color: #006dbf;
    text-align: center;
    margin: 0 10px 50px;
    line-height: 26px;
}

.button_area{
    display: flex;
    justify-content: center;
    gap: 0 20px;
}

.button_area button{
    max-width: 370px;
    width: 100%;
}

button.back{
    background: #ffffff;
    color: #808080;
    border-color: #808080;
}

button.back::after{
    content: none;
}

button.back::before{
    content: '';
    background: url('../parts/icon_form_arrow_l.svg') no-repeat;
    width: 12px;
    height: 30px;
    background-size: contain;
    display: block;
    position: absolute;
    left: 39px;
    top: 32px;
}

button span, a.next span{
	transition:.3s;
	display: flex;
    justify-content: center;
    align-items: center;
	height: 100%;
	width:100%;
}
button span:hover, a.next span:hover{
	opacity:0.6;
}

/* 完了ページ */
.complete_p #box{
    background: #006dbf;
    padding: 36px 20px 90px;
}

.complete_p main h1{
    text-align: center;
    margin: 0 0 30px;
}

.complete_p .form{
    max-width: 900px;
    width: 100%;
    background: #ffffff;
    margin: 0 auto;
    padding: 50px 66px 80px 64px;
}

.complete{
    margin: 0 0 50px;
}

.complete p{
    font-size: 18px;
    line-height: 32px;
    text-align: center;
}

.complete p:first-child{
    margin-bottom: 1em;
}

.complete span{
    color: #006dbf;
}

a.next{
    max-width: 380px;
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #006dbf;
    border: 1px solid #006dbf;
    border-radius: 5px;
    font-size: 24px;
    letter-spacing: -.48px;
    line-height: 60px;
    position: relative;
}

a.next::before{
    content: '';
    background: url('../parts/icon_form_arrow_blue.svg') no-repeat;
    width: 12px;
    height: 30px;
    background-size: contain;
    display: block;
    position: absolute;
    left: 39px;
    top: 32px;
}

/* 準備ページ */
.soon, .closed{
    background: #97c3eb;
    min-height: 100vh;
}
.soon header, .closed header{
    max-width: 1115px;
}
.soon header::after, .closed header::after{
    content:none;
}
.soon header .inner, .closed header .inner{
    padding: 50px 50px 100px;
}
.soon #top_box, .closed #top_box{
    position: relative;
}
.soon #top_box > p, .closed #top_box h1{
    margin: 0 auto;
    text-align: center;
    max-width: 336px;
    font-size: 48px;
    font-weight: bold;
    color: #005bac;
    font-family: "IBM Plex Sans JP";
    font-weight: 900;
    font-style: normal;
    line-height: 1.4;
}
.soon .catch, .closed .catch{
    position: absolute;
    right: 0;
    top: 70px;
    width: 100%;
    animation: none;
    max-width: 1115px;
    width: auto;
    left: 0;
    margin: 0 auto;
    text-align: right;
    padding: 0 40px;
    box-sizing: content-box;
    z-index: -1;
}
.soon footer, .closed footer{
    display: none;
}

/* 終了ページ */
.closed{
    overflow: hidden;
}
.closed #top_box{
    background: #fff;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 40px;
}
.closed .catch{
    top: 270px;
    z-index: 1;
}
.closed #top_box h1{
    max-width: none;
}
.closed #top_box p{
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}

/* エラーページ */
#container:has(.error_page){
    background: #97c3eb;
}
#container:has(.error_page) header img.sub,
#container:has(.error_page) header img.chara,
#container:has(.error_page) footer {
    display: none;
}
#container:has(.error_page) header.subpage{
    border: none;
}
.error_page {
    margin: 50px 25px 150px;
    text-align: center;
    font-family: "IBM Plex Sans JP";
    font-weight: 700;
    font-style: normal;
}
.error_page h1{
    font-size: 50px;
}
.error_page p {
    text-align: center;
    font-size: 20px;
}

@media screen and (max-width: 1350px) and (min-width:1025px) {
    #container:not(.soon) picture.catch{
        height: clamp(31.25rem, 11.538rem + 30.77vw, 37.5rem);
        left: -20px;
    }
}

@media screen and (max-width: 1024px) {

    header::after{
        height: 207px;
    }
    #container:not(.soon) picture.catch{
        height: 417px;
        left: -13px;
    }
    #container:not(.soon) img.sub{
        bottom: 30px;
        top: auto;
        width: 300px;
    }

    ul.main{
        flex-direction: column;
        height: auto;
        gap: 93px 0;
        margin: 0 0 290px;
    }

    #container:not(.soon) ul.main{
        margin: 0;
        padding: 0 0 30vw;
    }

    ul.main li{
        width: auto;
        height: 640px;
    }

    ul.sub{
        position: absolute;
        top: 496px;
        width: 100%;
        padding: 0 10px;
        margin: 0;
    }

    ul.sub li:last-child img{
        margin-top: 20px;
    }

    #container:not(.soon) ul.main{
        padding: 0;
    }

    .contents{
        padding-right: 40px;
        padding-left: 40px;
    }

    #about dd{
        padding-left: 0;
        left: 0;
    }

    #howto{
        padding: 86px 20px 84px;
    }

    #howto ul li{
        width: 20%;
    }

    #howto ul li img{
        display: block;
        max-width: 100%;
    }
    #howto::before{
        background-image: url(../parts/howto_chara_a_sp.svg);
        top: 10px;
        left: 5px;
        width: 300px;
        height: 230px;
    }
    #howto::after{
        content:none;
    }

    #notes{
        padding: 83px 20px 90px;
    }

    header img.chara{
        max-width: 380px;
    }

    .confirm_p #box{
        padding: 0 20px 90px;
    }

    /* 準備ページ */
    .soon header{
        margin-bottom: 40px;
    }
    .soon header .inner{
        padding-bottom: 0px;
    }
    .soon h1 img{
        margin: 0 auto;
        width: 70px;
        height: 70px;
    }
    .soon #top_box{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        min-height: 100vh;
        gap: 40px 0;
        margin-bottom: 40px;
    }
    .soon .catch{
        top: 0;
        bottom: 0;
        right: 0;
        margin: 0 auto;
        position: relative;
        max-width: 193px;
        display: block;
    }
    .soon #top_box >p{
        margin: 0 40px;
        max-width: 240px;
        font-size: 34px;
    }
    .soon #top_box >p img{
        width: 100%;
    }

}

/* 896px以下 */
@media screen and (max-width: 896px) {
    html {
        min-width: 320px;
        overflow-x: scroll;
    }

    body,
    header .inner,
    footer .inner,
    #container {
        width: 100%;
    }

    footer .footer_menu {
        display: none;
    }

    img {
        max-width: 100%;
    }

    #sbox,
    #box,
    #container #main {
        width: 100%;
    }

    header{
        height: auto;
    }

    header .inner{
        padding: 12px 15px 13px;
    }

    header h1{
        display: flex;
        align-items: center;
    }

    header h2 img{
        height: 36px;
    }

    header .inner > img{
        width: 210px;
    }
    header::after{
        background-image: url(/parts/top_sky_sp.png);
        height: 260px;
        background-size: 100% 100%;
    }
    header h1 > picture{
        top: 55px;
        height: 160px;
    }
    header h1 picture img{
        width: 100%;
    }
    p.page{
        width: 180px;
        height: 40px;
        font-size: 14px;
        display: flex;
        align-items: center;
        letter-spacing: -1px;
    }

    ul.main{
        gap: 55px 0;
        margin: 0;
    }
    ul.main li{
        height: auto;
        margin-top: -21vw;
    }
    ul.main li img{
        object-position: unset;
    }

    ul.sub{
        top: 186px;
    }

    ul.sub li{
        height: 29px;
    }
    
    ul.sub li:last-child img{
        margin-top: 14px;
    }

    footer .inner{
        padding: 20px 20px 15px;
        align-items: flex-start;
    }

    footer h1 img{
        width: 50px;
    }

    .soon footer{
        margin: 12px 0 0;
    }

    footer p{
        font-size: 10px;
        letter-spacing: -.2px;
        line-height: 15px;
        font-weight: 500;
    }

    #container:not(.soon) #top_box{
        padding-bottom: 0;
        margin-top: 130px;
    }
    #container:not(.soon) picture.catch{
        right: auto;
        left: -25px;
        width: 64%;
        height: auto;
    }
    #container:not(.soon) picture.catch img{
        width: 100%;
    }
    #container:not(.soon) img.sub{
        max-width: 300px;
        width: 49vw;
    }

    nav{
        padding: 20px 0;
    }

    nav ul{
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0 35px;
        max-width: 328px;
        margin: 0 auto;
    }

    nav ul li{
        width: 100%;
        align-items: flex-start;
        max-width: 145px;
        padding-left: 15px;
    }

    nav li a{
        font-size: 13px;
        font-weight: bold;
    }

    nav ul li::before {
        height: 7.5px;
        top: 0;
    }

    #about{
        padding: 50px 25px 40px;
    }

    #about dt img{
        padding: 0 0 20px;
        max-width: 500px;
        width: 100%;
    }
    #about dd{
        padding: 0;
        max-width: 500px;
        font-size: clamp(1.438rem, 1.293rem + 0.48vw, 1.563rem);
        white-space: inherit;
    }
    #about dd > br{
        display: none;
    }
    #about dd p, #about dd span{
        font-size: clamp(2rem, 1.638rem + 1.2vw, 2.313rem);
        display: block;
    }
    #about dd span{
        display: block;
    }

    #howto{
        padding: 70px 30px 60px;
    }

    #howto::before{
        top: 26px;
        width: 110px;
        height: 155px;
        left: clamp(2.5rem, -12.5rem + 50vw, 15.5rem);
    }

    #howto::after{
        top: 30px;
        width: 130px;
        height: 167px;
    }

    #howto h2{
        margin: 0 auto 60px;
        max-width: 220px;
    }

    #howto ul{
        flex-wrap: wrap;
        gap: 34px 0;
    }

    #howto ul li{
        width: 100%;
    }

    #howto ul li::after {
        content: '';
        background: url('../parts/icon_howto_arrow.svg') no-repeat;
        width: 7px;
        height: 18px;
        background-size: contain;
        inset: auto 0 -30px;
        margin: 0 auto;
        transform: rotate(90deg);
    }

    #howto ul li img{
        max-width: 110px;
        margin-right: 20px;
        float: left;
    }

    #howto h3{
        font-size: 17px;
        letter-spacing: .85px;
        line-height: 33px;
        margin: 12px 0 7px;
    }

    #howto ul li p{
        font-size: 13px;
        line-height: 20px;
        letter-spacing: -0.7px;
    }

    #entry{
        padding: 60px 40px 80px;
    }

    #entry h2{
        display: block;
        margin: 0 auto 15px;
        width: 175px;
    }

    #entry h2 + p{
        font-size: 12px;
        margin: 0 0 25px;
        line-height: 20px;
    }

    form dl{
        gap: 0;
    }

    form dt{
        font-weight: 700;
        font-size: 14px;
        color: #006dbf;
        line-height: normal;
        margin: 0 0 8px;
    }

    dt.up_ttl{
        padding: 0;
    }

    form dd label:not(label[for='accept']){
        margin: 0;
        max-width: 140px;
        font-size: 15px;
        height: 34px;
    }

    dd.upload{
        gap: 0 25px;
    }

    form dd{
        margin: 0 0 20px;
    }

    form input{
        height: 34px;
    }

    form select{
        font-size: 15px;
    }

    p.caution{
        margin: 5px 0 0;
    }

    #entry div p.error{
        bottom: -22px;
        letter-spacing: -.5px;
    }

    confirm{
        margin: 0;
    }

    #confirm img{
        max-width: 100%;
    }

    dt.privacy{
        margin: 0 0 8px;
    }

    dd .privacy_txt{
        font-size: 13px;
        line-height: 20px;
    }

    dd.upload p:not(.error){
        font-size: 13px;
        line-height: 20px;
        margin: 10px 0 0;
    }

    .check{
        padding: 25px 0 0;
        font-size: 14px;
        flex-wrap: wrap;
    }

    #confirm{
        width: calc(100% - 165px);
    }

    #entry .check p.error{
        bottom: 0;
        position: relative;
        width: 100%;
        text-align: left;
    }

    .subpage h1 picture{
        top: 25px;
        height: 74px;
        left: 18px;
    }

    form dl + div{
        font-size: 14px;
        line-height: normal;
        text-align: left;
        font-weight: 500;
    }

    form button{
        max-width: 320px;
        height: 80px;
        font-size: 18px;
        letter-spacing: -.36px;
        line-height: 50px;
    }

    form button::after{
        height: 14px;
        font-size: 18px;
        letter-spacing: -.36px;
        line-height: 50px;
        width: 8px;
        top: 32px;
        right: 30px;
    }

    #notes{
        padding: 55px 30px 50px;
    }

    #notes h2{
        margin: 0 0 25px;
    }

    #notes h2 img{
        display: block;
        margin: 0 auto;
        width: 83px;
    }

    .note_box{
        padding: 30px 20px;
    }

    .note_box dt{
        font-size: 13px;
        line-height: 20px;
        margin: 0 0 0 5px;
    }

    .note_box dd{
        font-size: 12px;
        line-height: 20px;
        margin: 0 0 15px;
    }
	
	/* シェアボタン */
    .share{
        padding: 25px 0;
    }
	.share a{
		gap:0 15px;
	    padding: 0px 0;
	}
	.share img{
		display:block;
		width:32px;
	}
	.share p{
		font-size: 16px;
	}

    /* 確認画面 */
    header img.sub{
        max-width: 170px;
        width: 100%;
        margin-top: 20px;
    }

    header img.chara{
        display: none;
    }

    header.subpage{
        height: 118px;
        margin: -1px;
    }
    .subpage .inner > picture{
        height: 170px;
    }

    .confirm_p #box h1{
        padding: 33px 0 35px;
    }

    .confirm_p #box h1 img{
        max-width: 188px;
        width: 100%;
    }

    section{
        padding: 30px 25px 50px;
    }

    section dl{
        gap: 0;
        margin: 0 0 10px;
    }

    section dt{
        font-size: 14px;
        line-height: 20px;
        max-width: none;
        margin: 0 0 8px;
    }

    section dd{
        font-size: 16px;
        margin: 0 0 20px;
        width: auto;
    }

    section dd small{
        font-size: 13px;
        line-height: 20px;
        margin-top: 9px;
    }

    section dt.img, section dt.img + dd{
        margin: 0 0 15px;
    }

    section dt.img + dd{
        margin: 0 0 30px;
    }

    section .txt p{
        line-height: 24px;
        margin: 0 0 40px;
        text-align: left;
    }

    .button_area{
        flex-direction: column-reverse;
        gap: 25px 0;
    }

    .button_area button{
        max-width: 320px;
    }

    button.back::before {
        width: 8px;
        height: 14px;
        left: 30px;
        top: 32px;
    }

    /* 完了画面 */
    .complete_p #box{
        padding: 30px 20px 50px;
    }

    .complete_p main h1 img{
        max-width: 210px;
    }

    .complete{
        margin: 0 0 40px;
    }

    .complete_p .form{
        padding: 35px 25px 50px;
    }

    .complete p{
        font-size: 14px;
        line-height: 28px;
        text-align: left;
    }

    .complete_p .button_area{
        align-items: center;
    }

    a.next{
        max-width: 320px;
        height: 80px;
        font-size: 18px;
        letter-spacing: -.36px;
        line-height: 50px;
    }

    a.next::before{
        width: 7px;
        height: 16px;
        left: 34px;
    }

    /* 終了ページ */
    #container.closed #top_box{
        margin-top: 0;
        padding-bottom: 40px;
    }
    .closed .catch{
        display: flex;
        justify-content: center;
    }
    .closed #top_box h1{
        font-size: clamp(1.063rem, -0.014rem + 5.38vw, 3rem);
    }
    .closed #top_box p{
        font-size: clamp(1rem, 0.861rem + 0.69vw, 1.25rem);
    }
    .closed .catch{
        top: clamp(14.375rem, 8.819rem + 27.78vw, 24.375rem);
    }

}

@media screen and (max-width: 480px) {

    header::after{
        height: clamp(13.75rem, 10rem + 18.75vw, 15.625rem);
    }
    header h1 picture{
        top: 60px;
        width: 90%;
        height: auto;
    }

    #about dd{
        font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.313rem);
    }
    #about dd p, #about dd span{
        font-size: clamp(1.313rem, -0.188rem + 7.5vw, 2.063rem);
        letter-spacing: -1px;
    }

    #howto::before{
        left: clamp(0rem, -5rem + 25vw, 2.5rem);
    }
    #howto h3{
        text-align-last: left;
    }

    .subpage h2 > picture{
        width: auto;
        height: 66px;
    }
    .subpage .inner > picture{
        height: 90px;
        right: 5px;
        width: auto;
    }
    section dd img{
        width: 100%;
    }
    #container:not(.soon) picture.catch{
        left: -15px;
    }

    /* フォーム */
    form .sample img{
        width: 100%;
    }
    form dd .product{
        display: block;
    }
    form dd .product label{
        display: block;
    }
    form dd label:has(input#image){
        margin-top: 0;
    }

    /* 終了ページ */
    #container.closed #top_box{
        padding: 20px;
    }
    .closed .catch{
        width: 150px;
    }

}

/* 印刷 */
@page {
    margin: 12mm 7mm;
}

@media print {
    body {
        zoom: 95%;
    }

    #page-top {
        display: none !important;
    }
}