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

body{

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

    background:#fff;

    color:#222;

}


.header-inner{

    max-width:1980px;

    margin:0 auto;

    height:80px;

    display:flex;

    align-items:center;

    padding:0 30px;

}

.company-logo img{

    height:50px;

    display:block;

}

.top-line{

    width:100%;

    height:5px;

    background:#d60000;

}

.container{

    width:100%;

    max-width:900px;

    margin:auto;

    padding:50px 40px 80px;

}

.content{

    opacity:0;

    transform:translateY(-15px);

    animation:contentFade .4s ease forwards;

    animation-delay:.3s;

}

.title{

    width:100%;
    max-width:560px;

    height:auto;

    display:block;

    margin:0 auto;

    opacity:0;

    animation:logoFade .4s ease-out forwards;

}

.red-line{

    width:900px;

    max-width:100%;

    height:4px;

    background:#d60000;

    margin:20px auto 60px;

    transform:scaleX(0);

    transform-origin:center;

    animation:lineOpen .3s ease forwards;

    animation-delay:.1s;

}

h1{

    font-size:40px;

    font-weight:700;

    line-height:1.4;

    text-align:left;

    margin:60px 0;

}

.h1-blue {
    color: blue;
}

.deadline{

    margin-top:50px;

    padding-left:30px;

    border-left:8px solid #d60000;

}

.deadline-title{

    font-size:20px;

    font-weight:700;

}

.deadline-date{

    margin-top:15px;

    font-size:30px;

    font-weight:700;

    color:#d60000;

}

.message{

    margin-top:60px;

    padding-top:40px;

    border-top:2px dashed #d60000;

    line-height:2;

    font-size:22px;

}

.button{

    display:block;

    margin-top:50px;

    transition:transform .25s ease, filter .25s ease;

}

.button img{

    width:100%;

    display:block;

}

.button:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 8px 15px rgba(0,0,0,.2));

}

.buttonsmall{

    display:block;

    width:85%;

    margin-top:20px;
    margin-left:auto;
    margin-right:0;

    transition:transform .25s ease, filter .25s ease;

}

.buttonsmall img{

    width:100%;

    display:block;

}

.buttonsmall:hover{

    transform:scale(1.02);

    filter:drop-shadow(0 8px 15px rgba(0,0,0,.2));

}

.bottom-line{

    width:100%;

    height:5px;

    background:#d60000;

    margin-top:80px;

}


@keyframes logoFade{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes lineOpen {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}

@keyframes contentFade{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mailform{

    max-width:700px;

    margin:60px auto 0;

}

.form-group{

    margin-bottom:30px;

}

.form-group label{

    display:block;

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.required{

    color:#d60000;

}

.form-group input{

    width:100%;

    padding:15px;

    border:1px solid #ccc;

    border-radius:4px;

    font-size:16px;

    transition:.2s;

}

.form-group input:focus{

    border-color:#d60000;

    outline:none;

    box-shadow:0 0 0 4px rgba(214,0,0,.12);

}

.submit-button{

    display:block;

    margin:50px auto 0;

    width:320px;

    height:60px;

    background:#d60000;

    color:#fff;

    border:none;

    border-radius:4px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.submit-button:hover{

    background:#b40000;

    transform:scale(1.02);

}

/* 案内文ボックス（親の .content の中で中央に配置） */
.info-box {
    max-width: 650px;
    width: 100%;
    margin: 40px auto 0;
    padding: 18px 24px;
    border-top: 3px solid #d60000;
    border-bottom: 3px solid #d60000;
    background-color: #fff2f2;
    box-sizing: border-box;
}

/* テキストのスタイル */
.info-box p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    text-align: left; /* 左寄せ */
	font-weight: 600;
}

/* 2行目以降のテキストに上方向の微細な余白を追加 */
.info-box p + p {
    margin-top: 4px;
}

/* メールのリンク部分 */
.info-box a {
    color: #1a0dab;
    text-decoration: underline;
}

.info-box a:hover {
    text-decoration: none;
}

/* 全体を囲む薄グレーのボックス */
.manual-section {
    max-width: 700px; /* フォームの幅（700px）と統一 */
    width: 100%;
    margin: 60px auto 0;
    padding: 35px 40px;
    background-color: #fcfcfc; /* 高級感のある極めて薄いグレー */
    border: 1px solid #eeeeee; /* 繊細な細い枠線 */
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left; /* 基本は左寄せ */
}

/* 見出し（左側にオレンジのアクセント線） */
.manual-title {
    font-size: 22px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 15px 0;
    padding-left: 12px;
    border-left: 5px solid #e66f15; /* ボタンと同じオレンジ */
    line-height: 1.3;
}

/* 補足説明テキスト（文字を少し小さく、色を優しく） */
.manual-text {
    font-size: 14px;
    color: #555555; /* 真っ黒ではなく少しグレーにして洗練された印象に */
    line-height: 1.6;
    margin: 0 0 30px 0;
}

/* ボタン（中央配置・横幅を少しスマートに） */
.manual-button {
    display: block;
    max-width: 420px; /* 幅を少し絞ることで引き締まった印象に */
    width: 100%;
    margin: 0 auto; /* 左右中央配置 */
    padding: 16px 24px;
    background-color: #e66f15;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    box-sizing: border-box;
    transition: transform .25s ease, filter .25s ease; /* 元の設定に戻しました */
}

/* ホバー時のエフェクト（既存のボタンと完全一致） */
.manual-button:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 8px 15px rgba(0,0,0,.2));
    color: #ffffff;
}