html,body{
    margin:0;
    padding:0;
    scroll-behavior: smooth;
    font-size:20px;
    background-color:#fff;
}

header{
    background-color: #003a7c; /*ヘッダーの色*/
    color:#fff;
    width:100%;
    height:100px;
    position:fixed; /*ヘッダーの追従を実現*/
    top:0;
    z-index: 10;
}

header a{
    color:#fff;
}

header h1 {
    display: inline-block;
    position: absolute;
    font-size: 30px;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    white-space: nowrap; /* メッセージが途中で改行されないようにする */

}

.header-right{
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    display:flex;
    justify-content: center;
    gap:5%;

}

.header-contact{
    text-align: center;
    position: static;
    white-space: nowrap;
}

.header-search{
    position: static;
    display:flex;
    gap:10px;
}

/*スライダー以外の入力欄*/
.form-box{
    border: none;
    outline: 1px solid #000;
    border-radius: 3px;
}
.form-box:focus{
    /*outlineは周囲の配置に影響を与えない*/
    /*outlineの太さ・色の変化でフォーカスかどうかを表現*/
    outline: 3px solid #0067dd;
    border-radius: 3px;
}

main{
    width:100%;
}

.items{
    width:60%;
}

.form{
    width:60%;
}

.input-box{
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.input-box-wrapper{
    width:66%;
    display: flex;
}

/*入力欄の左側に入る文字*/
/*姓, 名, 〒, etc...*/
.box-text{
    position: absolute; /*文書フローから外すことで、入力欄の左揃えを実現*/
    left:0;
    top:50%;
    transform: translate(-200%, -50%);
    white-space: nowrap;
}
.box-explain{
    margin-left:20px;
    margin-right:40px;
}


section{
    padding-top:130px;
    width:75%;
    margin:0 auto;
}

.item{
    position:relative;
    text-align:center;
    margin:20px auto;
    width:80%;
}

.item img{
    width:100%;
    border:1px solid #aaa;
}

/*画像右下の値段表記*/
.price{
    margin:0;
    position:absolute;
    bottom:20px;
    right:20px;
    font-size:50px;
    font-weight:bold;
    color:#fff;
}

/*スクロールボタン・送信ボタンの設定*/
.btn{
    background-color:#003a7c;
    aspect-ratio: 5/1;
    width:450px;
    height:90px;
    border-radius: 10px;
    line-height:90px;
    text-align:center;
    color:#fff;
    text-decoration: none;
    font-size: 30px;
    display:inline-block;
    margin:10px 0;
    box-shadow:0 7px #002249; /*ボタンの影*/
    cursor: pointer;
}
/*沈み込みの動作*/
.btn:active,.pushing{
    position:relative;
    top:7px;
    box-shadow:none !important;
}

.pushing{
    cursor:not-allowed;
}

h2{
    text-align:center;
    font-size:40px;
}

h3{
    font-size:30px;
    border:3px solid #003a7c;
    padding:10px;
}

.telephone-wrapper{
    display:flex;
    justify-content: center;
    gap: 30%;
}

.form-item-wrapper{
    margin-top:30px;
    border-top: 2px solid #003a7c;
}

.form-item{
    margin-top:30px;
    display:flex;
    justify-content: left;
    align-items: center;
    width:100%;
}

input[type="text"] {
    /* 高さを出す */
    padding: 8px 16px;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 4px;
}

textarea{
    padding:8px 16px;
    width:100%;
    height:100px;
    font-size:16px;
}


.short-box{
    width:180px;
}

.middle-box{
    width:300px;
}

.long-box{
    width:400px;
}

select{
    padding:8px 16px;
    font-size:16px;
}

.quantity{
    padding:8px 8px;
}


.name-left{
    margin-right: 100px;
}

.pc-only{
    display:inline;
}
.limit-text{
    position: absolute;
    left:102%;
    top:100%;
    transform: translate(0%, -100%);
    white-space: nowrap;
}

/*送料＆合計金額*/
.fee{
    color:#0067dd;
    font-size:23px;
    font-weight:bold;
    margin-left: 30px;
    position: absolute;
    left:100%;
    top:50%;
    transform: translate(0%, -50%);
    white-space: nowrap;
}

.age{
    white-space: nowrap;
}

/*スライダー*/
input[type="range"] {
    width: 400px;
    background-color:#003a7c;
}

.slider-value{
    display:none;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,-100%);
}

input[type="range"]:hover + .slider-value{
    display:block;
}

.textarea-wrapper{
    width:85%;
}

.slider-negative{
    margin-right:20px;
    width:10%;
}

.slider-positive{
    margin-left:20px;
    width:10%;
}

/*入力項目名*/
/*氏名, 郵便番号, 都道府県, etc...*/
.form-title-wrapper{
    width:33%;
}

.required{
    color:#f00;
}

.submit-btn-wrapper{
    width:300px;
    height:60px;
    margin:120px auto;
    display: flex;
    justify-content: center;
}
.submit-btn{
    font-size:38px;
    font-weight: bold;
    border:none;
    border-radius: 10px;
    box-shadow:0 7px #002249;
}


footer{
    margin:0 auto;
    padding-bottom: 30px;
    text-align:center;
    width:75%;
    font-size:16px;
}

.top-btn{
    position: fixed;
    right:10px;
    bottom:10px;
    z-index:15;
    text-decoration: none;
    opacity:0;
    pointer-events: none;
    background-color: #003a7c;
    color:#fff;
    border-radius:100%;
    width:90px;
    height:90px;
    line-height:90px;
    text-align: center;
    transition: all 1s;
}

.top-btn-active{
    pointer-events: all;
    opacity:1;
}

/*サイト内検索時のハイライト*/
.highlight{
    background-color: #ff0; /*背景色を黄色に(仕様書)*/
    color:#000; /*ハイライト時のみ、文字色を強制的に黒にする*/
}

/*エラーメッセージの書式*/
.error-msg {
    display:block;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 5px;
    color: red; /*赤いメッセージを表示(仕様書)*/
    font-size: 0.8em;
    white-space: nowrap; /* メッセージが途中で改行されないようにする */
}

/* フェードイン */
body {
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}