*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #FFF;
    transition: 0.5s;
    cursor: pointer;
}

a:hover{
    opacity: 0.5;
    transition: 0.5s;
}

p{ margin-bottom: 1em; }

html{ scroll-behavior: smooth; }

body{
    width: 100%;
    text-align: center;
    color: #0F3A4C;
    font-size: 28px;
    line-height: 1.25em;
    font-family: serif;
    -webkit-text-size-adjust: 100%;
    background-color: #E1F3FA;
}

#header{
    position: fixed;
    width: 100%;
    height: 88px;
    padding: 12px 0 0;
    z-index: 10;
    background-color: #008FCC;
}

.Tbox{
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

.Rbox{
    width: 1000px;
    text-align: right;
    margin-top: 12px;
    font-size: 24px;
}

#cont{
    width: 1000px;
    margin: 0 auto;
    padding: 112px 20px 10px;
    background-color: #FFF;
}

#foot{
    width: 100%;
    padding: 1em 0 0;
    font-size: 20px;
    line-height: 1.25em;
    color: #FFF;
    background: #008FCC;
}

.blink{
    font-size: 80%;
    animation: blinking 2s ease-in-out infinite alternate;
    transition: 0.5s;
}

@keyframes blinking {
    0% {opacity: 0.5;}
    50% {opacity: 1;}
    100% {opacity: 1;}
}

.accord{
    width: 1000px;
    text-align: left;
    margin: 0 auto 60px;
}

.accord label{
    display: block;
    width: 950px;
    height: 44px;
    margin: 5px 10px;
    padding: 5px 15px;
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    line-height: 44px;
    background: #008FCC;
    cursor: pointer;
}

.accord input{
    appearance: none;
    display: none;
    position: absolute;
    left: 859px;
    width: 90px;
    height: 75px;
    z-index: 10;
    cursor: pointer;
}

.accord li{
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.accord ul{
    margin: 5px 10px;
    list-style: none;
}

.article{
    width: 920px;
    margin: 0;
    padding: 30px 30px 0;
}

.refarence{ position: relative; }

#quest1:checked ~ #answer01 li{
    height: 1000px;
    margin-top: 15px;
    opacity: 1;
}

#quest1:checked{
    display: block;
    top: 930px;
}

#quest2:checked ~ #answer02 li{
    height: 760px;
    margin-top: 15px;
    opacity: 1;
}

#quest2:checked{
    display: block;
    top: 700px;
}

#quest3:checked ~ #answer03 li{
    height: 480px;
    margin-top: 15px;
    opacity: 1;
}

#quest3:checked{
    display: block;
    top: 420px;
}

#quest4:checked ~ #answer04 li{
    height: 400px;
    margin-top: 15px;
    opacity: 1;
}

#quest4:checked{
    display: block;
    top: 335px;
}

#quest5:checked ~ #answer05 li{
    height: 360px;
    margin-top: 15px;
    opacity: 1;
}

#quest5:checked{
    display: block;
    top: 307px;
}

#quest6:checked ~ #answer06 li{
    height: 430px;
    margin-top: 15px;
    opacity: 1;
}

#quest6:checked{
    display: block;
    top: 370px;
}

#quest7:checked ~ #answer07 li{
    height: 440px;
    margin-top: 15px;
    opacity: 1;
}

#quest7:checked{
    display: block;
    top: 404px;
}

#quest8:checked ~ #answer08 li{
    height: 400px;
    margin-top: 15px;
    opacity: 1;
}

#quest8:checked{
    display: block;
    top: 370px;
}

.close_button{
    position: relative;
    left: 845px;
    width: 90px;
    height: 75px;
    margin: 40px 5px 10px;
    text-align: center;
    animation: blinking 2s infinite alternate;
}

.wide{
    display: inline-block;
    color: #008FCC;
    font-size: 32px;
    vertical-align: bottom;
    margin-bottom: 0;
    transform: scale(3,1);
}

.bgblue{
    color: #FFF;
    font-size: 22px;
    font-family: gothic;
    font-weight: bold;
    margin: 0;
    padding: 1.5px 7.5px 4.5px;
    background-color: #008FCC;
}

.price{
    width: 956px;
    margin: 0 auto;
    border-collapse: collapse;
    border: solid 2px #008FCC;
    text-align: center;
}

.price th{
    color: #FFF;
    background-color: #5CBCE6;
}

.price th, td{
    border-collapse: collapse;
    border: solid 2px #008FCC;
}

.note{
    margin: 40px 24px 0 50px;
    text-align: left;
    text-indent: -1em;
    font-size: 26px;
}

.note p{ margin-bottom: 0.2em; }

.emphasis{
    font-size: 30px;
    color: #008ed0;
    font-weight: bold;
}

.sentence{
    width: 900px;
    padding: 6px 50px;
    text-align: left;
}

.diagonal{
    position: relative;
    margin: 0;
}

.diagonal::after{
    content: '';
    transform: rotate(7deg);
    width: 100%;
    border-top: 3px solid #f00;
    position: absolute;
    top: 50%;
    left: 0;
}

.special{
    color: #007DB3;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
    padding: 5px 5px 0;
    background-color: #FFFF99;
}

.yen{ font-size: 25px; }

.special_yen{ font-size: 28px; }

.moji22{ font-size: 22px; }

.moji24{ font-size: 24px; }

.moji32{ font-size: 32px; }

.bgyellow{
    padding-top: 6px;
    color: #007DB3;
    font-weight: bold;
    background-color: #FFFF99;
}

.push20{ height: 20px; }

.push40{ height: 40px; }

.push80{ height: 80px; }

h1{
    color: #FFF;
    font-size: 32px;
    text-align: left;
    font-family: gothic;
    margin: 0;
}

h2{
    color: #008ed0;
    font-size: 38px;
    font-family: gothic;
    text-align: left;
    margin: 40px 10px 12px;
    padding: 12px 6px 6px;
    border-bottom: 3px solid #008ed0;
}

h3{
    color: #008ed0;
    font-size: 32px;
    font-family: gothic;
    text-align: left;
    margin: 30px auto 20px 30px;
}

h4{
    color: #008ed0;
    font-size: 32px;
    margin: 10px 0;
}

@media screen and ( max-width: 767px ){
    body{ width: 1000px; }

    #header{
        width: 960px;
        padding: 12px 20px 0;
    }

    #cont{ padding: 112px 0 0; }

    .Tbox,.Rbox{ width: 960px; }
    
    #foot{
        width: 976px;
        padding: 12px 12px 0;
    }

    .pasocom{ display: none; }

    .smart{ display: block; }
}