@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:display=swap');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');

@charset "Shift_JIS";

html {
    font-size: 62.5%;
}

body {
    background: url(../img/bg-sub.jpg) #000 center;
    background-size: 25% auto;
    font-family: 'M PLUS 1p', sans-serif;
    color: #fff;
}

img{
    width: 100%;
    height: auto;
    display: block;
}

h1 {
    margin: 0;
    padding-top: 20px;
    color: #aaa;
    font-size: 0.7rem;
    font-weight: normal;
    text-align: center
}



/*===============================

�w�b�_�[

================================*/

header{
    height: 380px;
    overflow: hidden;
    background: url("../img/header.png");
    background-size: cover;
}
header ul{
    display: flex;
    flex-wrap: wrap;
    width: 1160px;
    height: 255px;
    margin: auto;
}
header li {
}
header .data {
    width: 760px;
    margin: auto
}
header .logo{
    width: 100%;
    padding-top: 25px
}



/*===============================

�t�b�^�[

================================*/

footer{
    background: #25292d
}
footer a{
    color: #e35a02;
    text-decoration: none
}
footer p{
    padding: 40px 0;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    line-height: 2
}
footer small{
    font-weight: bold
}
footer span{
    display: block;
}


/*===============================

�i�r

================================*/

nav{
}
nav ul{
}
nav li{
    width: 200px;
    padding-bottom: 10px
}

/*===============================

�p���������X�g

================================*/

.breadcrumb{
    padding: 10px 0
}
.breadcrumb ol{
    width: 1200px;
    margin: auto;
    font-size: 0.7rem;
}
.breadcrumb ol li{
    display: inline;
    list-style-type: none;
}
.breadcrumb ol li:before {
    content:" > ";
}
.breadcrumb ol li:first-child:before {
    content:"";
}
.breadcrumb li a{
    color: #000;
    text-decoration: none
}
.breadcrumb span{
    color: #000;
}


.sub .movie{
    overflow: hidden;
    position:relative;
    height: 440px;
    margin-bottom: 25px
}
.sub .movie .play{
    position:absolute;
    top: 32px;
    right: 0;
    width: 640px;
    z-index: -1;
}
.sub .movie .frame{
    position:absolute;
    top: 0;
    right: 0
}


/*===============================

�R���e���c

================================*/

main{
    position: relative;
    width: 1600px;
    margin: auto;
    padding-bottom: 50px
}
.side-left{
    position: absolute;
    top: 0;
    left: 0
}
.side-right{
    position: absolute;
    top: 0;
    right: 0
}
.contents {
    width:1140px;
    margin: auto;
}
.left-contents {
    display:table-cell;
    vertical-align:top;
    width:200px;
}
.right-contents {
    display:table-cell;
    vertical-align:top;
    width:920px;
    padding-left: 20px
}
.side-rec{
    padding-top: 10px
}


/*===============================

�T�C�h����

================================*/

.pickup{
    position:relative;
    width: 210px;
}
.pickup a{
    color: #fff;
    text-decoration: none
}
.pickup .image{
    width: 165px;
    margin: auto;
    padding: 58px 0 25px
}
.pickup .title{
    position: absolute;
    top: -30px;
    left: -32px;
    z-index: 2
}
.pickup .title img{
    width: 230px
}
.pickup .frame{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}
.pickup .frame img{
    height: 303px;
}
.pickup .data{
    height: 84px;
    background: url("../img/pickup-bg.jpg");
    background-size: 100% auto;
    text-align: center
}
.pickup .name{
    padding-top: 12px;
    color: #000;
    font-size: 1.1rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.pickup .size{
    padding: 3px 0;
    font-size: 0.8rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    text-shadow:0px 1px 3px #000;
}
.pickup .scroll{
    width: 180px;
    margin: auto;
    padding: 8px 0 6px 0;
    background: -moz-linear-gradient(top, #222, #000);
    background: -webkit-linear-gradient(top, #222, #000);
    background: linear-gradient(to bottom, #222, #000);
    color: #e35a02;
    font-size: 0.7rem;
    border-radius: 3px;
}
.fixed {
    width: 1600px;
    position: fixed;
    top: 0;
    z-index: 10;
}

.diary{
    margin: 10px 0;
    width: 200px;
    background: #000
}

.side-movie{
    width: 210px;
    padding-top: 10px
}

.link-banner{
    padding-top: 10px
}
.link-banner img{
    width: 210px;
    margin-top: 5px
}


.index-link-banner{
    width:940px;
    margin: auto;
    padding: 20px 0;
    text-align: center
}
.index-link-banner ul{
    display: flex;
    flex-wrap: wrap;
}
.index-link-banne img{
    width: auto;
}


/*===============================

バナー

================================*/

.banner{
    margin: 8px 0 20px
}
.banner ul{
    display: flex;
    flex-wrap: wrap;
}
.banner li{
    width: calc(100% / 4);
}
.banner li img{
    width: 96%;
    margin: auto
}

.banner-main{
    margin: 4px
}

/*===============================

スライドバナ�?(大)

================================*/


.top-space{
    position: relative;
    width:1140px;
    height: 330px;
    margin: auto;
}
.info{
    position: absolute;
    top: 0;
    right: 5px;
    width: 415px;
    height: 305px;
    background:rgba(0,0,0,.8);
    border: 1px solid #333;
    border-radius: 5px;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.info .inner{
    height: 250px;
    overflow-y: auto
}
.info .tit{
    width: 405px;
    padding: 7px 5px;
    background: #444;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    border-radius: 4px 4px 0 0 / 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0 / 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0 / 4px 4px 0 0;
}
.info .tit img{
    width: 250px;
}
.info .title{
    width: auto;
    background: #fff;
    padding: 8px 0;
    color: #000;
    font-size: 0.9rem;
    font-weight: bold
}
.info .title i{
    padding-left: 11px;
    font-size: 1rem
}
.info .comment{
    padding: 10px;
    font-size: 0.9rem;
    line-height: 1.7
}
.info .comment .movie{
    float: left;
    width: 150px;
    margin-right: 10px;
}
.info .comment .image{
    float: left;
    width: 100px;
    margin-right: 10px
}
.slide-l{
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
}


/*===============================

スライドバナ�?(�)

================================*/

.slide-s{
    background: url("../img/slide-s-bg.jpg");
    background-size: 25% auto;
    margin: auto;
    padding: 20px 0
}
.slide-s ul{
    width: 1135px;
    margin: auto;
    padding-right: 5px;
    overflow: hidden
}
.slide-space{
    height: 20px;
}


.tit{
    width: 908px;
    margin: auto;
    padding-bottom: 15px
}


/*===============================

本日の出勤�?�

================================*/

.today{

}
.today ul{
    display: flex;
    flex-wrap: wrap;
}
.today li{
    width: calc(100% / 4);
    text-align: center
}
.today .detail{
    margin: 5px;
    padding-bottom: 10px;
    background: url("../img/today-bg.jpg");
    background-size: 100% auto;
    border-radius: 3px;
    font-weight: bold
}
.today .data{
    margin: 0 10px;
    padding: 8px 0;
    background: #fff;
    background-size: 100% auto;
    border-radius: 3px;
}
.today .image{
    position:relative;
    padding: 10px;
}
.today .image .new{
    position:absolute;
    width: 50px;
    bottom: 5px;
    right: 5px
}
.today .name{
    color: #000;
    font-size: 1rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.today .size{
    padding-top: 5px;
    color: #000;
    font-size: 0.7rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.today .scroll{
    margin: 5px 10px;
    padding: 8px 0 6px 0;
    background: -moz-linear-gradient(top, #222, #000);
    background: -webkit-linear-gradient(top, #222, #000);
    background: linear-gradient(to bottom, #222, #000);
    color: #e6bd2e;
    font-size: 0.7rem;
    border-radius: 3px;
}
.today .time{
    font-size: 1.2rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    text-shadow:0px 1px 4px #000;
}
.today .time span{
    color: #999
}

.schedule-btn{
    margin-top: -56px;
    margin-left: 210px;
    padding-bottom: 30px;
}
.schedule-btn dl{
    display: flex;
    flex-wrap: wrap;
    width: 340px;
}
.schedule-btn dt{
    width: calc(100% / 3);
    text-align: center
}
.schedule-btn dt img{
    width: 110px;
    margin-right: 5px
}
.schedule-btn-sub{
    margin-top: -56px;
    margin-left: 410px;
    padding-bottom: 30px;
}
.schedule-btn-sub dl{
    display: flex;
    flex-wrap: wrap;
    width: 340px;
}
.schedule-btn-sub dt{
    width: calc(100% / 3);
    text-align: center
}
.schedule-btn-sub dt img{
    width: 110px;
    margin-right: 5px
}
.schedule-day{
    margin-top: -53px;
    margin-left: 150px;
    padding-bottom: 30px;
}
.boxes {
    margin: 0 5px 20px 5px;
    padding: 30px 25px;
    background:rgba(50,50,50,.8);
    padding-bottom: 10px
}

.boxes dl{
    display: flex;
    flex-wrap: wrap;
}
.boxes h3{
    padding-bottom: 8px;
    color: #e7bf2b;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow:0px 1px 1px #000;
}
.boxes dt{
    width: calc(100% / 4);
    padding-bottom: 5px
}
.boxes span{
    font-weight: 700
}
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    color: #ddd;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #ff8a8a;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.search-sent{
    width: 150px;
    margin: auto;
    padding-top: 10px
}
.search-sent-sub{
    width: 320px;
    margin: auto;
    padding-top: 10px
}
input.search-submit {
    width: 150px;
    height: 40px;
    margin-bottom: 5px;
    background: -moz-linear-gradient(top, #FFF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    border: 1px solid #DDD;
    color: #111;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input.search-submit:hover {
    background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}

.today table{
    width: 99%;
    margin: auto;
    border-top: 1px solid #333;
    border-left: 1px solid #333
}
.today th{
    padding: 10px 0;
    background: #a10000;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    font-size: 0.7rem;
    text-align: center;
}
.today td{
    padding: 5px;
    background: #000;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    font-size: 0.7rem;
    text-align: center;
    vertical-align: middle;
    line-height: 20px
}
.today td img{
    width: 60px;
    margin: auto;
}
.today td.saturday{
    background: #004986
}
.today td.sunday{
    background: #a4005b
}


.today-btn-bg{
    width: 910px;
    margin: auto;
    padding: 0 0 10px
}

.today-btn-on{
    display: inline-block;
    background-color: #a4005b;
    color: #FFF;
    width: 96px;
    margin: 2px;
    padding: 0.8em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
    transition: .2s ease-out;
}
.today-btn-on:hover{
    cursor: pointer;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 3px 10px 0 rgba(0,0,0,0.12), 0 4px 7px -2px rgba(0,0,0,0.2);
}

.today-btn{
    display: inline-block;
    background-color: #444;
    color: #fff;
    width: 96px;
    margin: 2px;
    padding: 0.8em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    -webkit-tap-highlight-color: transparent;
    transition: .2s ease-out;
}
.today-btn:hover{
    cursor: pointer;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 3px 10px 0 rgba(0,0,0,0.12), 0 4px 7px -2px rgba(0,0,0,0.2);
}



/*===============================

只今�?ご予�?���

================================*/

.guidance{
    padding-bottom: 10px
}
.guidance ul{
    display: flex;
    flex-wrap: wrap;
}
.guidance li{
    width: calc(100% / 5);
    text-align: center
}
.guidance .updata{
    padding-bottom: 10px;
    color: #0ff;
    font-size: 1.05rem;
    font-weight: bold;
    text-align: right
}
.guidance .detail{
    margin: 3px;
    padding-bottom: 8px;
    background: url("../img/today-bg.jpg");
    background-size: 100% auto;
    border-radius: 2px;
    font-weight: bold
}
.guidance .data{
    margin: 0 5px;
    padding: 5px 0;
    background: #fff;
    background-size: 100% auto;
    border-radius: 3px;
}
.guidance .image{
    position:relative;
    padding: 5px;
}
.guidance .image .new{
    position:absolute;
    width: 50px;
    bottom: 2px;
    right: 2px
}
.guidance .name{
    color: #000;
    font-size: 0.8rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.guidance .size{
    padding-top: 2px;
    color: #000;
    font-size: 0.6rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.guidance .scroll{
    margin: 5px 5px 2px 5px;
    padding: 8px 0 6px 0;
    background: -moz-linear-gradient(top, #222, #000);
    background: -webkit-linear-gradient(top, #222, #000);
    background: linear-gradient(to bottom, #222, #000);
    color: #e6bd2e;
    font-size: 0.7rem;
    border-radius: 3px;
}
.guidance .time{
    font-size: 0.7rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    text-shadow:0px 1px 4px #000;
}


.profile h3{
    color: #ff8a8a;
    font-size: 1rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.profile .inner{
    background:rgba(0,0,0,.8);
    margin: 7px;
    padding: 30px
}
.profile .data-top{
    position:relative;
    padding-bottom: 20px
}
.profile .data-top .tabako{
    position: absolute;
    top: 3px;
    left: 200px;
}
.profile .data-top .contents{
    width: 540px;
    position: absolute;
    top: 3px;
    left: 300px;
}
.profile .data-top .contents dl{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #666
}
.profile .data-top .contents dt{
    width: 80px;
    color: #e6bd2e;
    font-size: 0.8rem
}
.profile .data-top .contents dd{
    width: 120px;
    font-size: 0.8rem
}
.profile .data-top .tabako img{
    width: 50px;
}
.profile .name{
    color: #e6bd2e;
    font-size: 1.5rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.profile .name span{
    font-size: 1.1rem
}
.profile .size{
    padding-top: 10px;
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    font-size: 0.9rem
}
.profile ul{
    display: flex;
    flex-wrap: wrap;
}
.profile .image{
    
}
.profile .data{
    padding-left: 20px;
}
.profile .data dl{
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0
}
.profile .data dt{
    width: calc(100% / 2);
}
.profile .data dd{
    width: calc(100% / 1);
}
.profile .data .detail{
    position:relative;
    margin: 10px;
    margin-top: 5px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #666;
    color: #e6bd2e;
    font-size: 0.8rem
}
.profile .data .detail span{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    color: #fff
}
.profile .data em{
    display: block;
    padding-top: 5px;
    color: #fff;
    font-style: normal;
    line-height: 1.3
}
.profile .comment{
    width: 340px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 25px;
    border: 1px solid #e6bd2e;
    padding: 15px;
}
.profile .comment .box{
    height: 185px;
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.8
}
.profile-diary{
    width: 370px;
    margin: auto;
    padding: 10px 0 20px
}
.profile .option{
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    padding: 15px 0
}
.profile .option dt{
    width: calc(100% / 3);
    padding-bottom: 5px;
}
.profile .option p{
    width: 98%;
    margin: auto;
    padding: 10px 0;
    background: rgb(170,132,0);
    background: linear-gradient(0deg, rgba(170,132,0,1) 0%, rgba(209,165,11,1) 35%, rgba(230,189,46,1) 100%);
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow:0px 1px 1px #000;
    border-radius: 3px;
    text-align: center
}
.profile .option p.no{
    background: rgb(102,102,102);
    background: linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(136,136,136,1) 100%);
    color: #aaa
}
.profile .option p.small{
    font-size: 0.7rem;
}
.profile .voice{
    width: 360px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 25px;
    border: 1px solid #e6bd2e;
    padding: 5px;
}
.profile .voice .box{
    height: 185px;
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.8
}
.profile .voice .title{
    font-size: 0.9rem;
    font-weight: bold
}
.profile .voice .title span{
    color: #aaa;
    font-size: 0.7rem
}
.profile .voice .text{
    color: #fff;
    line-height: 1.5
}

.profile .movie{
    width: 400px;
    margin: 20px 0;
    background: #4c4c4c; /* Old browsers */
    background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    border-radius: 6px;
}
.profile .movie .box{
    padding: 20px;
}
.weekly {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
}

.weekly dl {
    width: calc(100% / 4);
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    box-sizing:border-box;
}
.weekly dt{
    background: rgb(17,17,17);
    background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(51,51,51,1) 100%);
    padding: 10px 0;
    border-bottom: 1px solid #999;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold
}
.weekly dl dt.sat {
    background: #469fe5;
}

.weekly dl dt.sun {
    background: #e54665;
}
.weekly dd{
    height: 44px;
    padding: 10px 0;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1
}
.weekly dd .box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    vertical-align: middle;
}


/*===============================

お客様�?声

================================*/

.review{

}
.review ul{
    width: auto;
    margin: 5px;
    padding: 30px;
    background:rgba(0,0,0,.8);
}
.review li{
   
}
.review .title{
    padding-top: 20px;
    color: #e6bd2e;
    font-size: 1.1rem;
    font-weight: bold
}
.review .title span{
    color: #fff;
    font-size: 0.8rem
}
.review .name{
    color: #e54665;
    font-size: 1rem;
    font-weight: bold;
    text-shadow:0px 1px 1px #000;
}
.review .comment{
    width: auto;
    margin-top: 10px;
    padding: 25px;
    background: #333;
    font-size: 0.8rem;
    border-radius: 6px;
    line-height: 1.8
}
.review .comment .image{
    float: left;
    width: 150px;
    margin-right: 20px
}
.review-form{
    padding: 10px;
}
.review-form table{
    width: 100%;
}
.review-form tr{
    line-height: 3;
    border-bottom: 1px dotted #666;
}
.review-form th{
    width: 200px;
    vertical-align: middle;
    text-align: right;
    font-size: 0.8rem;
    font-weight: bold;
}
.review-form td{
    vertical-align: middle
}
.review-form input{
    width: 70%;
    height: 30px;
    border: 1px solid #ddd
}
.review-form select{
    height: 30px;
    background: #fff;
    border: 1px solid #ddd
}
.review-form textarea{
    width: 95%;
    height: 100px;
    margin-top: 5px;
    background: #fff;
    border: 1px solid #ddd
}
.review-form span{
    color: #f00;
    font-size: 1rem
}
.review-form .text{
    padding: 50px 0 25px;
    font-size: 0.9rem;
    line-height: 2;
    text-align: center
}
.review-sent{
    width: 150px;
    margin: auto;
    padding-top: 10px
}
input.review-submit {
    width: 150px;
    height: 40px;
    margin-bottom: 5px;
    background: -moz-linear-gradient(top, #FFF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    border: 1px solid #DDD;
    color: #111;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 10px 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input.review-submit:hover {
    background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}


/*===============================

ランキング

================================*/

.ranking{

}
.ranking ul{
    width: auto;
    margin: 5px;
    padding: 30px;
    background:rgba(0,0,0,.8);
}
.ranking li{

}
.ranking-01{
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #666;
}
.ranking-01 .image{
    width: 300px;
    padding-top: 15px
}
.ranking-01 .data{
    position: absolute;
    top: 65px;
    left: 320px;
}
.ranking-01 .name{
    font-size: 1.4rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.ranking-01 .size{
    padding: 8px 0;
    font-size: 1rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.ranking-01 .time{
    padding: 8px 0 6px;
    color: #e6bd2e;
    font-size: 1.2rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.ranking-01 .comment .box{
    height: 250px;
    overflow-y: auto
}


/*===============================

イベント情報

================================*/

.event{

}
.event ul{
    width: auto;
    margin: 5px;
    padding: 30px;
    background:rgba(0,0,0,.8);
}
.event li{

}
.event .image{
    width: 600px;
    margin: auto;
    padding: 20px 0
}
.event .title{
    padding: 12px 0;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #000;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}
.event .title i{
    padding-left: 20px;
}
.event .comment{
    width: auto;
    margin-bottom: 30px;
    padding: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px dotted #e6bd2e;
    line-height: 1.6
}


@keyframes move {
    0% {
        left: 190px;
    }
    10% {
        left: 190px;
        bottom: 85px;
    }
    20% {
        left: 190px;
        bottom: 72px;
    }
    40% {
        left: 315px;
        bottom: 72px;
    }
    50% {
        left: 315px;
        bottom: 72px;
        z-index: 6;
    }
    65% {
        left: 315px;
        bottom: 106px;
        z-index: 6;
    }
    85% {
        left: 315px;
        bottom: 106px;
        transform:scale(1.0);
        opacity: 1;
        z-index: 6;
    }
    100% {
        left: 315px;
        bottom: 106px;
        transform:scale(3.0);
        opacity: 0;
        z-index: 6;
    }
}

.newmap {
    width: 620px;
    margin: auto;
    padding-top: 50px
}
.newmap-box {
    position: relative;
    width: 620px;
    height: 425px;
    margin-bottom: 15px;
    z-index: 1;
    background: url(../img/n-map-bg.png) no-repeat;
}

.newmap-cover {
    position: absolute;
    width: 620px;
    height: 425px;
    top: 0;
    left: 0;
    z-index: 4;
    background: url(../img/n-map-cover.png) no-repeat;
}

.newmap-deco span {
    transition: all 0.3s ease;
    position: absolute;
    z-index: 4;
}

.newmap-deco .sarcle {
    background: red;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    bottom: 53px;
    left: 152px;

}

.newmap-deco .sarcle-move {
    z-index: 3;
    width: 20px;
    height: 20px;
    bottom: 85px;
    left: 190px;
    animation: move 3s infinite;
    animation-delay: 1s;
}

.newmap-shop {
    position: absolute;
    top: 23px;
    left: 96px;
    background: rgba(183, 0, 0, 0.65);
    padding: 15px;

    z-index: 5;
}

.newmap-shop:after {
    position: absolute;
    right: 68px;
    bottom: -150px;
    content: "";
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top: 130px solid rgba(183, 0, 0, 0.65);
}

.newmap-shop div {
    padding-bottom: 10px;
    font-size: 26px;
    color: #ffe400;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000;
}

.newmap-shop p {
    font-size: 1rem;
}

.newmap-shop p span {
    font-weight: bold;
    color: #fbb027;
}

.newmap-descrip {
    text-align: center;
    padding: 20px;
}

.newmap-descrip div {
    font-size: 35px;
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}

.newmap-descrip p {
    font-size: 19px;
}

.newmap-descrip p span {
    color: #ffe400;
    font-weight: bold;
}

.oldmap {
    padding: 20px;
    font-size: 19px;
}

.oldmap span {
    color: #ffe400;
}



.hotelmap table{
    width: 100%;
    margin-top: 10px;
    border-left: solid 1px #666;
    border-top: solid 1px #666;
}
.hotelmap tr{

}
.hotelmap td{
    background: #111;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: solid 1px #666;
    border-right: solid 1px #666;
    box-shadow: 0px -3px 5px 1px #222 inset;
}
.hotelmap td a{
    display: block;
    padding: 20px 10px;
    color: #fff;
    text-decoration: none
}



.system{

}
.system ul{
    width: 900px;
    margin: auto;
    background:rgba(0,0,0,.8);
    padding-bottom: 60px
}
.system .price{
}
.system .title{
    width: 300px;
    margin: auto;
    padding: 50px 0 30px 0;
    font-size: 1.3rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    text-align: center
}

.system h3 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}

.system h3:before, .system h3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: #fff;
}

.system h3:before {
    left:0;
}
.system h3:after {
    right: 0;
}
.system h3 span{
    display: block;
    padding-top: 8px;
    color: #ffe400;
    font-size: 0.8rem
}

.couse {
    padding: 30px 20px 0 20px
}
.couse dl {
    display: flex;
    flex-wrap: wrap;
}
.couse dt {
    width: calc(100% / 3);
    padding-bottom: 15px
}
.couse dt img{
    width: 95%;
    margin: auto
}
.cos {
    width: 790px;
    margin-left: 60px;
}
.cos dl {
    display: flex;
    flex-wrap: wrap;
}
.cos dt {
    width: calc(100% / 3);
}
.cos div {
    padding: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5
}
.couse_btn {
  width: 850px;
  margin: auto;
  padding: 25px 0 10px;
}
.couse_btn dl {
  display: flex;
  flex-wrap: wrap;
}
.couse_btn dt {
  width: calc(100% / 2);
  padding-bottom: 15px
}
.couse_btn img {
  width: 95%;
  margin: auto
}
.couse_btn .text {
  padding: 20px 0 0;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  text-shadow:
    #fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;
}
mark {
  background: linear-gradient(transparent 60%, #FFF100 0%);
  color: #f00;
}
.areamap {
  width: 790px;
    margin-left: 25px;
  padding-top: 5px;
}
.areamap ul {
  display: flex;
  flex-wrap: wrap;
    width: 100%;
  background: rgba(255, 255, 255, .2);
  margin-bottom: 30px;
  padding: 30px;
  border-radius: 10px;
}
.areamap .text {
  width: 50%;
  font-size: 1rem;
  line-height: 1.6
}
.areamap .text small{
    font-size: 0.9rem
}
.areamap .image {
  width: 50%;
}
.areamap .image img {
  width: 100%;
  margin-left: 10px
}
.areamap .text-01 {
  color: #ff00ff;
  font-weight: bold;
  font-size: 1.2rem
}
.areamap .text-02 {
  color: #00c4ff;
  font-weight: bold;
  font-size: 1.1rem
}
.areamap .text-03 {
  color: #e3d600;
  font-weight: bold;
  font-size: 1.1rem
}
.areamap .text-04 {
  color: #72ba1d;
  font-weight: bold;
  font-size: 1.1rem
}
.areamap .text-05 {
  color: #8ad900;
  font-weight: bold;
  font-size: 1.1rem
}
.tousatsu {
  width: auto;
  padding: 25px;
  background: #222
}
.tousatsu .inner {
  background: #111;
  padding: 25px;
  font-weight: bold;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  line-height: 1.5;
}
.tousatsu .inner span {
  display: block;
  color: #e61f19;
  font-size: 20px
}
.system-option {
    width: 790px;
    margin-left: 60px;
}
.system-option dl {
    display: flex;
    flex-wrap: wrap;
}
.system-option dt {
    width: calc(100% / 5);
}
.system-option div {
    padding: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5
}

.optionbox-large{
    width:840px;
    margin-left: 30px;
}
.optionbox-large dl{
    display: flex;
    flex-wrap: wrap;
}
.optionbox-large .photo-l{
    width: 700px
}
.optionbox-large .photo-s{
    width: 110px;
    padding-left: 15px
}
.optionbox-large .photo-s img{
    margin-bottom: 11px
}
.optionbox{
    width:800px;
    margin-left: 60px;
    overflow:hidden;
    position:relative;
    zoom:1;
}
.optionboxsub{
    width:700px;
    margin-left: 120px;
}
.optionbox .mainphoto{
    max-width:400px;
    margin:0 9px 0 0;
    float:left;
}
.optionbox .mainphoto img{
    width: 400px
}
.optionbox .subphoto{
    max-width:280px;
    margin:0 9px 0 0;
    float:left;
}
.optionbox .subphoto img{
    width: 280px
}
.optionbox .photo{
    float:left;
    width:390px;
}
.optionbox .photo .box{
    overflow:hidden;
    position:relative;
    zoom:1;
}
.optionbox .photo .box div{
    float:left;
    text-align:center;
    margin:0 5px 5px 0;
    font-size:11px;
    font-weight:bold;
}
.optionbox .photo .box div img{
    max-width:89.5px;
    margin:0 0 2px;
}
.optionbox .photo .box div.last{
    margin:0px !important;
}
.optionbox .photo .box div .yen{
    width: 100%;
    margin-top: 3px;
    padding: 3px 0;
    background: #333;
     text-align: center
}

.kiyaku {
    width: 790px;
    margin-left: 60px;
    background: #333;
    border-radius: 10px;
}
.kiyaku .inner{
    padding: 40px;
    font-size: 0.8rem;
    line-height: 2
}


.couse-title{
    width: 850px;
    height: 245px;
    margin: auto;
    padding-top: 95px;
    background: url(../img/couse-title.png);
    background-size: 100% auto;
}
.couse-name{
    width: 75%;
    margin: auto;
    margin-bottom: -30px;
    padding-top: 25px
}
.couse-text{
    width: 65%;
    margin: auto;
    padding-top: 25px
}
.couse-plus{
    padding: 25px 100px
}

.couse-frame{
    position: relative;
    margin: 25px;
    padding: 20px;
    background: url(../img/couse-frame.jpg);
    background-size: 100% auto;
}
.couse-frame .inner{
    padding: 25px;
    border: 1px solid #fff;
    font-size: 1.1rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    text-shadow:0px 1px 3px #000;
    text-align: center;
    line-height: 1.5
}
.couse-frame .name{
    width: 200px;
    margin-top: -10px;
    padding: 10px 0;
    position: absolute;
    top: 0;
    left: 40px;
    background: #fff;
    color: #000;
    font-size: 1.3rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
    font-weight: bold;
    text-align: center
}


.index h1{
    padding: 20px;
    color: #e6bd2e;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center
}
.index h2{
    padding-top: 20px;
    color: #e54665;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.index h3{
    padding: 10px;
    font-size: 0.9rem;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(.03deg);
}
.index p{
    color: #e6bd2e;
    font-size: 0.9rem;
    font-weight: bold
}
.index .logo{
    overflow: hidden;

    background: url(../img/index-bg.jpg) top;
    background-size: 50% auto;
    height: 420px;
}
.index .logo .inner{
    position: relative;
    width: 1200px;
    margin: auto
}
.index .logo .inner .movie{
    width: 800px;
    margin: auto;
    margin-top: -50px
}
.index .logo .inner .frame{
    position: absolute;
    width: 900px;
    margin: auto;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 10
}
.index .logo .inner .left{
    position: absolute;
    width: 380px;
    margin: auto;
    top: -30px;
    left: -20px;
    z-index: 5
}
.index .logo .inner .left2{
    position: absolute;
    width: 160px;
    margin: auto;
   top: 145px;
    left: 200px;
    z-index: 6
}
.index .logo .inner .right{
    position: absolute;
    width: 320px;
    margin: auto;
    top: 0px;
    right: -30px;
    z-index: 5
}
.index .text-01{
    width: 520px;
    margin: auto;
    margin-top: -75px;
    z-index: 6
}
.index .text-01 img{
    width: 200px;
}
.index .text-02{
    width: 500px;
    margin: auto;
    margin-top: -75px;
    z-index: 6
}
.index .text-02 img{
    width: 320px;
    margin-left: auto
}
.index .enter{
    padding: 10px;
    color: #999;
    font-size: 0.7rem
}
.index .enter ul{
    width: 500px;
    margin: auto;
    padding-top: 10px
}
.index .enter img{
    float: left;
    width: 240px;
    margin: auto;
    padding: 5px;
}
.index .inner{
    position: relative;
    width: 100%;
    height: 300px;
    padding: 30px 0;
    line-height: 2;
    text-align: center
}
.index .inner .left{
    position: absolute;
    width: 300px;
    top: -30px;
    left: 40px
}
.index .inner .right{
    position: absolute;
    width: 300px;
    bottom: -30px;
    right: 40px
}


/*===============================

ペ�?ジトッ�

================================*/

#page_top{
    width: 100px;
    height: 54px;
    position: fixed;
    right: 20px;
    bottom: 0px;
    background: #d5af5c;
    z-index: 100000
}
#page_top a{
    position: relative;
    display: block;
    width: 100px;
    height: 60px;
    text-decoration: none;
}
#page_top a::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f106";
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -25px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
#page_top a::after{
    content: 'PAGE TOP';
    font-size: 13px;
    color: #fff;
    position: absolute;
    top: 30px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.pager {
    width: 200px;
    padding: 15px;
    font-weight: bold
}
.pager ul{
    display: flex;
}
.pager li {
    list-style-type: none;
    background-color: #fff;
    color: #000;
    flex-grow: 1;
    text-align: center;
}
.pager li + li {
    border-left: 1px solid #000;
}
.pager a{
    display: block;
    color: #000
}