@charset "utf-8";
/* CSS Document */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color:#fff;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
background: #111 url("../images/back.jpg") center bottom repeat-y;
background-size: 100% auto;
line-height: 1.8;
}

h1,h2,h3,h4,h5,p,dl,dt,dd {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;vertical-align:middle;
display: block;
border:0;
width:100%;
height: auto;
line-height:0;
font-size:0;
}
.container,
.mvclm {
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content:space-between;
}
.flexstart {
justify-content:flex-start;
}
.col-8 {
width: 66%;
}
.col-7 {
width: 57%;
}
.col-5 {
width: 41%;
}
.col-4 {
width: 32%;
}
.col-6 {
width: 49%;
}
.container .col-6:nth-child(odd) {
margin: 0 1% 3rem 0;
}
.container .col-6:nth-child(even) {
margin: 0 0 3rem 1%;
}
.col-4:first-child {
margin-left: 0;
}
.col-3 {
width: 24.25%;
margin: 0 1% 3rem 0;
}
.container .col-3:nth-child(4n),
.container .col-3:last-child {
margin: 0 0 3rem 0;
}
.order2 { order: 2; }
.order1 { order: 1; }


#allarea {
  height: auto;
  min-height: 100vh;
}
h1 {
width: 60%;
padding: 5rem 20% 2rem 20%;
}

#cartain {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100000;
}
#theaterarea {
background-image: url("../images/cartain.png"), url("../images/cartain2.png");
background-position: left -35px top, right -35px top;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: auto 98%, auto 98%;
}
#contentsarea {
width: 100%;
}

#contentsarea main {
width: 70%;
padding: 0 15% 500px 15%;
background: url("../images/free.svg") right 12% top 2rem no-repeat;
background-size: 13% auto;
}
#contentsarea main#reportarea {
background: none;
}
#copybox {
width: 60%;
margin: 0 20%;
}
#copybox p:last-child {
	margin-top: 4rem;
}
#copybox p:last-child a img {
transition-duration: 0.5s;
}
#copybox p:last-child a img:hover {
transform: scale(1.1,1.1);
cursor: pointer;
}
#contentsarea main a {
color:#003366;
text-decoration: none;
}
#contentsarea main a:hover {
text-decoration: underline;
}
#contentsarea main p {
margin-bottom: 1rem;
}
#contentsarea main section {
margin: 6rem 0;
}
#contentsarea main#reportarea section:first-of-type {
margin: 2rem 0 6rem 0;
}
.memberbox {
position: relative;
}
.memberbox p {
margin: 0 !important;
text-align: left !important;
}
.memberbox .name {
padding: .2rem .5rem;
width: 80%;
position: absolute;
z-index: 1;
bottom: -20px;
left: 10px;
background: #fff;
color:#222;
font-size: .875rem;
line-height: 1.6;
}
.memberbox .name strong {
font-size: 1rem;
background: linear-gradient(transparent 60%, #ffff66 60%);
}
.h2title {
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3rem;
  z-index: 0;
}
.h2title:before {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-left-color: transparent;
}
.h2title:after {
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-right-color: transparent;
}
.h2title h2 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 1.5rem;
  color: #FFF;
  background: #2196F3;
}
.h2title h2:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5;
}
.h2title h2:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5;
}
#guestbox {
display: flex;
justify-content: space-between;
background: #ffffdd;
color:#000;
border-radius: 5px;
padding: 2rem;
margin-bottom: 1rem;
}
#guestbox div {
width: 65%;
}
#guestbox p {
margin: 0 !important;
}
#guestbox h3 {
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: .6rem !important;
background: #ffff66;
padding: 0 .8rem;
}
#guestbox p.name {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: .3rem !important;
}
#guestbox p.profile {
font-size: .875rem;
line-height: 1.6;
}
#guestbox p.photo {
width: 32%;
}
.fadein {
  opacity : 0;
  transform : translateY(100px);
  transition : all 1s;
}
.container .mbfadein {
  opacity : 0;
  transform : translateY(100px);
}
.container .mbfadein:nth-child(1) {
transition : all 1s;
}
.container .mbfadein:nth-child(2) {
transition : all 1.2s;
}
.container .mbfadein:nth-child(3) {
transition : all 1.4s;
}
.container .mbfadein:nth-child(4) {
transition : all 1.6s;
}
.container .mbfadein:nth-child(5) {
transition : all 1.8s;
}
.container .mbfadein:nth-child(6) {
transition : all 2s;
}
.container .mbfadein:nth-child(7) {
transition : all 2.2s;
}
.mbfadein.active,
.fadein.active {
  opacity : 1;
  transform : translateY(0);
}
.sclbox .container {
justify-content: space-between;
}
.sclbox h3 {
background: #000;
padding: .4rem .75rem;
color:#fff;
  font-size: 1.45rem;
  line-height: 1.8;
  margin: 2rem 0 .75rem 0;
  border: solid 6px #000;
  position: relative;
}
.sclbox h3:after{
  content: "";
  border-top: dashed 3px #fff;
  border-bottom: dashed 3px #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 3px);
  height: calc(100% - 6px);
}

.sclbox h4 {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: normal;
  margin: 0 0 .4rem 0;
}
.mvclm {
margin-bottom: .75rem;
}
.mvbox {
width: 56%;
background: #fff;
color: #111;
padding: 1.8% 2%;
margin: 0 !important;
}
.mvbox .mvtime {
font-size: .75rem;
line-height: 1.6;
margin: 0 0 .2rem 0 !important;
}
.mvbox .mvinfo {
font-size: .875rem;
line-height: 1.6;
margin: 0 !important;
}
.mvphoto {
width: 40%;
background: #fff;
margin: 0 !important;
}

#cntbox {
margin: 2rem 0;
border-radius: 5px;
padding: 30px;
color:#fff;
}
#snsbox {
border: #3399ff 2px solid;
padding: 0 1%;
margin-top: 1rem;
border-radius: 5px;
}
#pagetop {
position: fixed;
bottom: 15px;
right: 15px;
padding: 0;
margin: 0;
}
#pagetop img {
width: 50px;
}
#topics {
margin: 0;
padding: 0;
border-top: #ddd 1px dashed;
}
#topics li {
margin: 0;
padding: .75rem 0;
list-style: none;
color: #fff;
border-bottom: #ddd 1px dashed;
display: flex;
}
#topics li span {
width: 15%;
font-size: .75rem;
color:#ccc;
}
#topics li a,
#topics li div {
width: 85%;
color: #fff;
}
.lead {
font-size: 1.25rem;
line-height: 1.6;
}
.red {
color: #dd0000;
}
.yellow {
color:#ffcc00;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.mrgY {
margin: 3rem 0 !important;
}
.mrgB {
margin-bottom: 1.5rem !important;
}
dl {
display: flex;
flex-wrap: wrap;
width: 100%;
}
dl dt {
width: 21%;
padding: 2%;
margin-bottom: .3rem;
border-radius: 3px 0 0 3px;
background: #003366;
color:#eee;
font-size: 1rem;
font-weight: bold;
text-align: center;
}
dl dd {
width: 71%;
padding: 2%;
margin-bottom: .3rem;
border-radius: 0 3px 3px 0;
background: #fff;
color:#222;
font-size: 1rem;
}
.resttime {
margin: 0 0 .3rem 0 !important;
padding: 2%;
border-radius: 3px;
background: #ddd;
color:#222;
font-size: 1rem;
text-align: center;
}
footer {
background: #111;
color:#999;
text-align: center;
padding: .7rem 0;
}
footer p {
font-size: .7rem;
}
#directbnr {
margin: 1rem auto 1rem auto;
}

#reportbox {
background: #fff;
color:#222;
padding: 2%;
margin: 2rem 0;
text-align: center;
}
#reportarea h3 {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: .5rem;
}
#reportbox .col-4:nth-child(1) h3 {
color:#867636;
}
#reportbox .col-4:nth-child(2) h3 {
color:#666;
}
#reportbox .col-4:nth-child(3) h3 {
color:#b76335;
}
#reportarea h3 i {
margin: 0 5px;
}
#reportarea h4 {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: .5rem;
}


@media screen and (max-width:1200px) {

#guestbox {
padding: 1.25rem;
margin-bottom: 1rem;
}
#guestbox div {
width: 58%;
}
#guestbox h3 {
font-size: 1.05rem;
padding: 0 .5rem;
}
#guestbox p.name {
font-size: 1rem;
line-height: 1.6;
}
#guestbox p.profile {
font-size: .875rem;
line-height: 1.6;
}
#guestbox p.photo {
width: 39%;
}

}

@media screen and (max-width:991px) {

h1 {
    width: 90%;
    padding: 3rem 5% 2rem 5%;
}
#contentsarea {
width: 90%;
padding: 0 5%;
background:none;
}
#theaterarea {
background-image: url("../images/cartain.png"), url("../images/cartain2.png");
background-position: left -80px top, right -80px top;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: auto 98%, auto 98%;
padding-bottom: 50px;
}
#contentsarea main {
width: 80%;
padding: 0 10%;
background: url("../images/free.svg") right top 5rem no-repeat;
background-size: 14% auto;
}
#cntbox {
margin: 1rem 0;
padding: 30px 20px 20px 20px;
}
#contentsarea main p {
    margin-bottom: .5rem;
	line-height: 1.6;
}
.lead {
    font-size: 1rem;
    line-height: 1.4;
}
.mrgY {
margin: 1.5rem 0 !important;
}
.brclr {
display: none;
}
#topics li {
display: block;
}
#topics li span {
width: 100%;
display: block;
}
#topics li a,
#topics li div {
display: block;
width: 100%;
}
#guestbox {
padding: 1rem;
margin-bottom: 1rem;
}
#guestbox div {
width: 52%;
}
#guestbox h3 {
font-size: 1rem;
padding: 0 .5rem;
}
#guestbox p.name {
font-size: 1rem;
line-height: 1.6;
}
#guestbox p.profile {
font-size: .75rem;
line-height: 1.6;
}
#guestbox p.photo {
width: 46%;
}
#reportarea h3 {
font-size: 1.25rem;
line-height: 1.5;
margin-bottom: .3rem;
}
#reportarea h4 {
font-size: 1.15rem;
line-height: 1.5;
margin-bottom: .3rem;
}


}
@media screen and (max-width:767px) {
h1 {
    width: 100%;
    padding: 3rem 0 2rem 0;
}
#contentsarea {
width: 92%;
padding: 0 4%;
}
#contentsarea main {
width: 94%;
padding: 0 3%;
background: url("../images/free.svg") right top 3rem no-repeat;
background-size: 18% auto;
}
#theaterarea {
background:none;
padding-bottom: 150px;
}
#cntbox {
margin: 1rem 0;
padding: 20px 10px 10px 10px;
word-break: break-all;
}
#copybox {
    width: 80%;
    margin: 0 10%;
}
#copybox p:last-child {
	margin-top: 3rem;
}
#contentsarea main section {
    margin: 2rem 0;
}
dl {
    display: block;
}
dl dt {
    width: 96%;
    padding: 1% 2%;
    margin-bottom: 0;
    border-radius: 3px 3px 0 0;
    font-size: .875rem;
    font-weight: normal;
    text-align: left;
}
dl dd {
    width: 96%;
    padding: 2%;
    margin-bottom: .3rem;
    border-radius: 0 0 3px 3px;
    font-size: 1rem;
}
.mrgB {
margin-bottom: .5rem !important;
}
.memberbox .name strong {
    font-size: .875rem;
}
.h2title {
    margin-bottom: 1.5rem;
}
.h2title h2 {
    font-size: 1.15rem;
}
.sclbox h3 {
    padding: .2rem .5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 1rem 0 .5rem 0;
    border: solid 3px #000;
}
.mvclm {
    width: 100%;
    display:block;
}
.mvphoto {
    width: 100%;
}
.mvbox {
    width: 96%;
    background: #fff;
    color: #111;
    padding: 2%;
    margin: 0 !important;
}
.col-8 {
width: 100%;
}
.col-4 {
width: 100%;
margin-left: 0;
}
.col-7,
.col-5 {
width: 100%;
margin-left: 0;
}
.col-6 {
width: 49%;
}
.container .col-6:nth-child(odd) {
margin: 0 1% 3rem 0;
}
.container .col-6:nth-child(even) {
margin: 0 0 3rem 1%;
}
.col-3 {
width: 49.5%;
margin: 0 1% 2rem 0;
}
.container .col-3:nth-child(2n),
.container .col-3:last-child {
margin: 0 0 2rem 0;
}
.order2 { order: 0; }
.order1 { order: 0; }

#reportbox .col-4 {
background: #f3f3f3;
margin-bottom: 1rem;
}
#reportbox .col-4:last-child {
margin-bottom: 0;
}
#guestbox {
display: block;
padding: .7rem;
margin-bottom: 1rem;
}
#guestbox div {
width: 100%;
}
#guestbox p.profile {

margin-bottom: .7rem !important;
}
#guestbox p.photo {
width: 100%;
}

}