body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 16px;
    /*line-height: normal;*/
}
p {
    margin-bottom: 10px;
}
a, a:visited {
    color: #0170B5;
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    color: black;
}


.main {
    width: 100%;
    margin: auto;
}
.clear {
    clear: both;
}
.header {
    width: 100%;
    padding: 10px 0 0 0;
    border-bottom: 8px solid #FCBE00;
    border-top: 4px solid #FCBE00;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    background: rgba(255,255,255,0.9);
}
.inner {
    width: 960px;
    margin: auto;
    position: relative;
}
.header ul li {
    text-align: center;
    vertical-align: middle;
    margin-top: 12px;
    border: 1px solid #B3A367;
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
    margin-left: 5px;
}
.header ul li>span {
    border-radius: 5px 5px 0px 0px;
    display: table-cell;
    font-size: 13px;
    font-weight: 700;
    height: 31px;
    padding: 0 10px;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.05);
    vertical-align: middle;
    background: transparent linear-gradient(to bottom, #F3EEDC 1%, #FFFEFE 60%) repeat scroll 0% 0%;
}
.header ul li:last-child, .btn{
    border: 2px solid #D65206;
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    box-shadow: 0px -2px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFF inset;
    text-align: center;
    cursor: pointer;
}
.header ul li:last-child > span, .btn > span {
    background: transparent linear-gradient(to bottom, #FCBE00 0px, #FCBE00 100%) repeat scroll 0% 0%;
    border: 1px solid #FFF;
    border-bottom: none;
    border-radius: 4px 4px 0px 0px;
    color: #333;
    display: table-cell;
    font-size: 17px;
    font-weight: 700;
    height: 41px;
    padding: 0 29px;
    text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.5);
    vertical-align: middle;
}
.btn {
    display: inline-block;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
    margin: 40px 5px 0 5px;
}
.btn > span {
    border-bottom: 1px solid #FFF;;
    border-radius: 4px;
}
.btn.pri > span  {
    background: red;
    color: white;
}
a.h_link {
    display: inline-block;
    padding: 0 10px;
    border-right: 1px dotted black;
    font-size: 12px;
    color: black;
    font-weight: bold;
}
a.h_link:last-child {
    border: none;
    padding-right: 0;
}
.intro {
    height: 100vh;
    position: relative;
}
.intro .fade li{
    background-size: 100vw auto;
    height: 100vh;
    position: absolute;
    width: 100%;
    opacity: 0;
}
.intro .fade li:first-child {
    background: url('/img/book/pics/50Plus_1_1400x1050.jpg') no-repeat top center;
    -webkit-animation: fade_1 20s infinite;
    animation: fade_1 20s infinite;
}
.intro .fade li:nth-child(2) {
    background: url('/img/book/pics/50Plus_2_1400x1050.jpg') no-repeat top center;
    -webkit-animation: fade_2 20s infinite;
    animation: fade_2 20s infinite;
}
.intro .fade li:nth-child(3) {
    background: url('/img/book/pics/50Plus_3_1400x1050.jpg') no-repeat top center;
    -webkit-animation: fade_3 20s infinite;
    animation: fade_3 20s infinite;
}
.intro .fade li:nth-child(4) {
    background: url('/img/book/pics/50Plus_4_1400x1050.jpg') no-repeat top center;
    -webkit-animation: fade_4 20s infinite;
    animation: fade_4 20s infinite;
}
.intro .inner > div {
    height: calc(100vh - 50px);
}
.intro .int {
    text-align: center;
    margin-top: 97px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px gray, 0 0 15px gray;
    border: 3px double white;
    padding: 50px 20px;
    background: rgba(255,255,255,0.8);
}
.inner > div {
    padding: 25px;
}
/*.intro img.b_prev {
    width: 300px!important;
    height: auto;
}
.intro .inner >div>div {
    width: 580px;
    margin-left: 25px;
}*/
.sub_tit {
    font-size: 30px;
}
.sub_tit:first-child {
    margin-bottom: 20px;
}
.tit {
    font-size: 50px;
    color: #B69105;
    text-shadow: 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white, 0 0 5px gray;
    padding: 0 0 20px 0;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
.tit span {
    font-size: 55px;
}
.section .inner {
    /*text-align: justify;*/
}
.title {
    text-align: center;
}
.title> span {
    font-size: 20px;
    display: inline-block;
    border-bottom: 5px solid black;
    margin-bottom: 5px;
    color: black;
    font-weight: bold;
    padding-bottom: 15px;
}
.title h2 {
    font-size: 40px;
    color: black;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-weight: bold;
    margin: 20px 0;
    text-transform: uppercase;
}
.spec {
    border: 1px solid #FCBE00;
    background: #FFFACD;
    padding: 20px;
    margin: 40px 0;
}
.spec h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.iframe {
    width: 100%;
    margin: auto;
    margin-bottom: 30px;
}
.box {
    width: 280px;
    margin-bottom: 20px;
    border: 1px solid #B3A367;
    position: relative;
    border-radius: 5px;
    font-size: 13px;
    margin-top: 30px;
}
.box.form {
    width: 100%;
}
.box>div {
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.05);
    background: transparent linear-gradient(to bottom, #F3EEDC 1%, #FFFEFE 60%) repeat scroll 0% 0%;
    position: relative;
    border-radius: 5px;
    padding: 50px 20px 10px;
}
.box h3 {
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}
.box li {
    list-style: circle;
    margin-top: 10px;
}
.box li:first-child {
    margin-top: 0;
}
.box > div:before {
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 50px;
    position: absolute;
    top: -40px;
    left: 100px;
    border: 1px solid #B3A367;
}
.box:first-child > div:before {
    background: url('/img/book/icon_price_25x30.png') no-repeat center center #FCBE00;
}
.box:nth-child(2) > div:before {
    background: url('/img/book/icon_form_23x30.png') no-repeat center center #FCBE00;
}
.box:nth-child(3) > div:before {
    background: url('/img/book/icon_time_30x30.png') no-repeat center center #FCBE00;
}
.box .icon {
    width: 70px;
    height: 70px;
    border-radius: 50px;
    background: #FCBE00;
    display: table;
    text-align: center;
}
.box .icon img {
    display: table-cell;
    vertical-align: middle;
}
/*.btn {
    padding: 15px 20px;
    background: #FFDF2C;
    color: black;
    text-transform: uppercase;
    *//*font-size: 25px;*//*
    margin-top: 20px;
    display: inline-block;
    position:relative;
    cursor: pointer;
    box-shadow: 1px 1px 1px black;
    border-radius: 2px 0 0 2px;
    font-weight: bold;
}
.btn:after {
    content: "";
    background: #B68F05 url('../img/icon_arrow_30x30.png') no-repeat center center;
    color: white;
    position: absolute;
    width: 50px;
    height: 100%;
    text-align: center;
    top: 0;
    right: -50px;
    box-shadow: 1px 1px 1px black;
    border-radius: 0 2px 2px 0;
}
.btn:hover {
    background: #B68F05;
    color: white;
}*/
.footer {
    border-top: 1px solid white;
    font-size: 13px;
    background: #FCBE00;
    position: relative;
    /*color: white;*/
    height: calc(100vh - 159px);
}
.foot {
    border-top: 3px double #FCBE00;
}
.footer p {
    margin: 0;
}
.down {
    position: absolute;
    bottom: -40px;
    left: 0;
    text-align: center;
    width: 100%;
}
.down > div {
    cursor: pointer;
    width: 80px;
    height: 80px;
    background: url('/img/book/down_arrow_80x80.png')no-repeat center center;
    border-radius: 80px;
    display: inline-block;
}

/*FORM*/

.box.form > div {
    padding: 20px 0;
}
.box.form > div:before {
    display: none;
}
.form_div {
    width: calc(100% / 2);
    padding: 10px 40px;
    margin-top: 20px;
}
.form_div:nth-child(odd) {
    border-right: 1px solid #B3A367;
}
.form_div:nth-child(even) {
    border-left: 1px solid white;
}
.form {
    font-size:14px;
}
.form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 15px;
}
.form table tr td:first-child {
    width: 35%;
}
.form table tr td:last-child {
    width: 65%;
}
.form input[type="text"], .form input[type="number"], .form input[type="email"] {
    width: calc(100% - 20px);
    border-radius: 5px;
    border: 1px solid white;
    box-shadow: 0px 1px 3px #B3A367 inset;
    background: #F3EEDC;
    padding: 10px;
}
.form input[type="text"].error, .form input[type="number"].error, .form input[type="email"].error {
    border: 1px solid red;
}
.form input[type="number"] {
    width: 40px;
    text-align: center;
}
.form table span {
    color: red;
    font-weight: bold;
}
.form input[type="checkbox"], label {
    cursor: pointer;
}
.form .price {
    font-weight: bold;
}
.form .price span {
    color: red;
    font-size: 18px;
}
.form input[disabled] {
    opacity: 0.3;
}
button {
    background: transparent linear-gradient(to bottom, #FCBE00 0px, #FCBE00 100%) repeat scroll 0% 0%;
    border: 1px solid #FFF;
    border-radius: 4px;
    color: #333;
    font-size: 17px;
    font-weight: 700;
    height: 41px;
    padding: 0 29px;
    text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.5);
    vertical-align: middle;
    cursor: pointer;
    box-shadow: 0 0 5px gray;
}
.form button {
    margin: 20px 40px 20px -20px;
}

.box .confirm {
    margin: 0 40px;
}
.box .confirm table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.box .confirm table tr td {
    border-top: 1px solid white;
    border-bottom: 1px solid #B3A367;
    padding: 10px 20px;
}
.box .confirm table tr:first-child td {
    border-top: none;
}
.box .confirm table tr:last-child td {
    border-bottom: none;
    color: red;
    font-weight: bold;
}
.box .confirm td[colspan="2"] {
    font-weight: bold;
    padding: 10px 0;
}
.box .confirm table tr:last-child td span {
    font-size: 30px;
}
table.total {
    border-collapse: separate;
    border-spacing: 0;
}
.bold td, .total td {
    font-weight: bold;
}


/*FLEX*/
.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flexbox.justify {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.flexbox.col {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flexbox.start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.flexbox.end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.flexbox.middle {
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flexbox.stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.flexbox.top {
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.flexbox.bottom {
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.flexbox.center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@keyframes fade_1 {
    0%     {opacity: 1}
    20%    {opacity: 1}
    25%    {opacity: 0}
    94%    {opacity: 0}
    95%    {opacity: 1}
    100%   {opacity: 1}
}
@keyframes fade_2 {
    0%     {opacity: 0}
    20%    {opacity: 0}
    25%    {opacity: 1}
    45%    {opacity: 1}
    50%    {opacity: 0}
    100%   {opacity: 0}
}
@keyframes fade_3 {
    0%     {opacity: 0}
    45%    {opacity: 0}
    50%    {opacity: 1}
    70%    {opacity: 1}
    75%    {opacity: 0}
    100%   {opacity: 0}
}
@keyframes fade_4 {
    0%     {opacity: 0}
    70%    {opacity: 0}
    75%    {opacity: 1}
    95%    {opacity: 1}
    100%   {opacity: 0}
}