﻿@charset "utf-8";


/* =================================================================
		Reset Styles
================================================================= */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset {
	font-weight: normal;
	font-family: "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS P Gothic","ＭＳ Ｐゴシック",sans-serif;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

/* HTML5 */
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary{
	display: block;
}

img {
	border: none;
	vertical-align: middle;
}

table {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

label{
	cursor: pointer;
}

input,
select,
textarea{
	padding: 2px;
}

ol,ul {
	list-style: none;
}


/* form */
select option {
	padding : 0 5px 0 5px;
}
form label{
	cursor : pointer;
}
a,
input{
	outline: none;
}

/*	Basic Text Link	*/
a {
	color: #0054D2;	text-decoration: underline;
}

a:link {
	color: #0054D2;	text-decoration: underline;
}
a:visited {
	color: #0054D2;	text-decoration: underline;
}
a:hover {
	color: #0054D2;	text-decoration: none;
}
a:focus {
	color: #333333;	text-decoration: underline;
}
a:active {
	color: #0054D2;	text-decoration: underline;
}



/* =================================================================
		Body
================================================================= */
html{
	font-size: 62.5%;
}

body{
	font-size: 10px;
	font-size: 1.0rem;
}


.section p.comingsoon{
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	padding: 30px 0;
}
/* スマホのみ */
@media screen and (max-width: 480px) {
.section p.comingsoon{
	font-size: 18px;
}
}


/* Wrapper
--------------------------------------------------------------- */
#wrapper{
	font-size: 1.4rem;
	margin:0 auto;
}

#head{
	text-align: center;
}
#head h1{
	background-color: #000000;
	color: #fff;
	font-size: 14px;
	padding: 10px 5px;
}
#head #logo{
	width: 150px;
	margin: 0 auto;
	padding: 0;
}
#head #logo img{
	width: 100%;
}


/* 共通Style
--------------------------------------------------------------- */
.section{
	max-width: 1000px;
	padding: 0 3%;
	margin: 0 auto 50px auto;
}
.section .key{
	margin: 0 0 50px 0;
}

.section h2{
	background-color: #ebebeb;
	border-left: #000 3px solid;
	font-size:18px;
	font-weight: bold;
	padding:17px 0 17px 16px;
	margin:0 0 17px 0;
}

.section p{
	font-size: 16px;
	margin: 0 0 20px 0;
}

.section p strong.attention{
	color:#DB0000;
	font-weight: bold;
}
.section p strong.blue{
	color: #06F;
	font-weight: bold;
}

/* ボタン */
.section p.btn{
	display: block;
	width: 40%;
	margin: 0 auto;
}
.section p.btn a{
	box-sizing: border-box;
	background-color: #333;
	color: #fff;
	align-items: center;
	text-align: center;
	text-decoration: none;
	border: #ccc 1px solid;
	border-radius: 4px;
	padding: 5% 2%;
	transition: 0.5s all;
}
.section p.btn a:hover{
	background-color: #fff;
	color: #333;
}


/* arrow03 */
.arrow03{
  position: relative;
  display: block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow03:before,
.arrow03:after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}	
.arrow03:before{
  right: 24px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all 0.2s ease;
}
.arrow03:hover:before{
	right: 18px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}


/* スコア内容のリスト */
.score-detail{
	display:inline-block;
	background-color:#F6F2E9;
	border-radius: 6px;
	padding: 10px 20px;
	margin: 0 0 20px 0;
}
.score-detail h3{
	margin: 0 0 5px 0;
}

/* ネットワークプリント */
.network-print{
	border: #ccc 1px solid;
	border-radius: 6px;
	padding: 15px 20px 1px 20px;
	margin: 25px 0 0 0;
}
.network-print p strong{
	color: #E51114;
}

/* video-list */
.video-list{
	display: flex;
	justify-content: space-between;
}
.video-list li{
	width: 23%;
	margin: 0 0 10px 0;
}
.video-list li p.image{
	margin: 0 0 5px 0;
}
.video-list li .image img{
	width: 100%;
}
.video-list li h4.title{
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
	margin: 0 0 15px 0;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* PCのみ ================ */
@media (min-width:640px){
}



/* スマホのみ */
@media screen and (max-width: 480px) {
.section p.btn{
	width: 90%;
}
.video-list{
	flex-wrap: wrap;
}
.video-list li{
	width: 48%;
}

}


/* =================================================================
		リンクボタン
================================================================= */
.link-btn{
	width: 90%;
	margin: 0 auto;
}
.link-btn a{
	display: block;
	background: #00A0BB url(../../img/common/arrow01.png) no-repeat right center;
	background-size: 25px;
	color: #ffffff;
	font-size:18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border: #ffffff 3px solid;
	border-radius:100px;
	padding: 18px 0;
	margin: 0 auto 0 auto;
	transition: 0.2s linear 0s;
}
.link-btn a:hover{
	background: #ffffff url(../../img/common/arrow02.png) no-repeat right center;
	background-size: 25px;
	color: #00A0BB;
	border: #00A0BB 3px solid;
}



.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
	margin: 0 0 15px 0;
}
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}





/* Footer
--------------------------------------------------------------- */
#footer{
	background-color: #000;
	padding: 3% 0 3% 0;
}
#footer ul{
}
#footer ul li{
}
#footer .logo{
	width: 38%;
	padding: 8% 0 5% 0;
	margin: 0 auto;
}

#copyright{
	display: block;
	color: #ffffff;
	font-size: 1.4rem;
	text-align: center;
}


.map{
	width: 100%;
	margin: 0 0 10px 0;
}
.gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
border: #ccc 1px solid;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	border: none;
}


/* =================================================================
		下層ページ
================================================================= */
#second{
	background-color: #fff;
	color: #000;
	padding: 0 0 1% 0;
	margin: 0 0 5% 0;
}
#second h1{
	background-color: #7f1184;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	padding: 3% 0;
	margin: 0 0 3%;
}


/* =================================================================
mongoooose-battle-party
================================================================= */
#mongoooose-battle-party{
	max-width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
#mongoooose-battle-party #logo{
	max-width: 400px;
	margin: 0 auto;
	padding: 15px 20px 15px 20px;
}
#mongoooose-battle-party h1{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 30px 0;
}

#mongoooose-battle-party .contents-list{
		background-color:#f9f9f9;
	border-radius: 10px;
	border: #CCC 1px solid;
	padding: 3%;
	margin:0 3% 3% 3%;
}
#mongoooose-battle-party .contents-list h2{
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	margin: 0 0 10px 0;
}
#mongoooose-battle-party .contents-list li{
	margin:0 0 5px 0;
}


#mongoooose-battle-party p span.point{
	font-size: 14px;
}
#mongoooose-battle-party .entry-btn{
}
#mongoooose-battle-party .entry-btn a{
	background-color: #0055A2;
	display: block;
	border-radius: 100px;
	color: #fff;
	text-align: center;
	width: 300px;
	text-decoration: none;
	padding: 15px 30px;
	margin: 0 auto 10px auto;
}
#mongoooose-battle-party .entry-btn.end{
	background-color: #C8C8C8;
	border-radius: 100px;
	color: #2D2D2D;
	text-align: center;
	width: 300px;
	text-decoration: none;
	padding: 15px 30px;
	margin: 0 auto 10px auto;
}
#mongoooose-battle-party .image img{
	width:100%;
	border:#CCC 1px solid;
}

/* スマホのみ */
@media screen and (max-width: 480px) {
#mongoooose-battle-party #logo{
	max-width: 260px;
	padding: 15px 20px 15px 20px;
}
#mongoooose-battle-party .entry-btn a{
	width: 80%;
}
}



/* =================================================================
THE MOLKKY TOURNAMENT
================================================================= */
.tmt{
}
#mongoooose-battle-party.tmt #logo{
	max-width: 750px;
	margin: 0 auto;
	padding: 15px 20px 20px 20px;
}
#mongoooose-battle-party.tmt h1{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 30px 0;
}
.tmt .time,
#mongoooose-battle-party .time{
	width: 100%;
	border:#ccc 1px solid;
	margin: 0 0 15px 0;
}
.tmt .time th,
#mongoooose-battle-party .time th{
	background-color:#e8e7e7;
	width: 30%;
	text-align: left;
	border:#ccc 1px solid;
	padding: 8px 10px;
}
.tmt .time td,
#mongoooose-battle-party .time td{
	border:#ccc 1px solid;
	padding: 8px 10px;
}
.tmt .time td.space,
#mongoooose-battle-party .time td.space{
	width: 10%;
	text-align: center;
}
.tmt .time td.content,
#mongoooose-battle-party .time td.content{
	width: 50%;
}

/* スマホのみ */
@media screen and (max-width: 480px) {
#mongoooose-battle-party.tmt h1{
	font-size: 16px;
	padding: 10px 0 0 0;
}
.tmt .time th,
#mongoooose-battle-party .time th{
	width: 40%;
}
.tmt .time td,
#mongoooose-battle-party .time td{
}
.tmt .time td.space,
#mongoooose-battle-party .time td.space{
	width: 20%;
}
.tmt .time td.content,
#mongoooose-battle-party .time td.content{
	width: 20%;
}



/* =================================================================
		会社概要( /company.html )
================================================================= */
#company{
}
#company table{
	width: 94%;
	font-size:14px;
	border: #80abe8 1px solid;
	margin: 0 3% 3% 3%;
}
@media screen and (min-width: 480px) {
#company table{
	font-size:16px;
}
}

#company table th{
	background-color: #F3F3F3;
	width: 6em;
	text-align: left;
	padding: 2% 3%;
	border: #C4C2C2 1px solid;
}
@media screen and (min-width: 480px) {
#company table th{
	width: 9em;
}
}

#company table td{
	padding: 2% 3%;
	border: #C4C2C2 1px solid;
}
#company .group p{
	line-height: 1.1;
	margin: 0 0 5% 0;
}
#company .group p:first-child{
	margin: 2% 0 4% 0;
}

#company .group a{
	font-size: 12px;
}


/* =================================================================
		プライバシーポリシー( /privacy )
================================================================= */
#privacy{
	padding: 0 3%
}
#privacy .lead{
	margin: 0 0 30px 0;
}
#privacy h2{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	padding: 5% 0;
}
#privacy h3{
	font-weight: bold;
	margin: 0 0 1% 0;
}
#privacy p{
	margin: 0 0 4% 0;
}
@media screen and (min-width: 480px) {
#privacy h3
{
	font-size: 16px;
}
#privacy p{
	font-size:14px;
}
}


/* =================================================================
		フォーム
================================================================= */
#form{
	width: 94%;
	padding: 0 3% 5% 3%;
}
.flow{
	padding: 4% 0;
}

#form .message{
	background-color: #fef5cb;
	padding: 2% 3%;
	margin: 0 0 5% 0;
}
#form .message p{
	font-size: 1.6rem;
	margin: 0 0 2% 0;
	padding: 0;
}
#form .message p strong{
	color: #dd0303;
}


#form .caution{
	background-color: #fde0e0;
	border: #dc1e1e 2px solid;
	padding: 3% 4%;
	margin: 0 0 5% 0;
}
#form .caution h2{
	background: none;
	color: #dc1e1e;
	text-align: center;
	padding: 0;
}
#form .caution p{
	color: #dc1e1e;
	font-weight: bold;
	margin: 0;
}

#form h2{
	background-color: #F0E6C8;
	color: #000000;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 2% 2%;
	margin: 0 0 2% 0;
}
#form .error-message {color: #dc1e1e; font-weight: bold; margin-bottom:0.5em;}
#form .error-message:before { content:"【"}
#form .error-message:after { content:"】"}
#form h2 .required{
	background-color: #C72254;
	color: #fff;
	padding: 0 2%;
	margin: 0 0 0 2%;
}
#form h2 .any{
	background-color: #6F6F6F;
	color: #fff;
	padding: 0 2%;
	margin: 0 0 0 2%;
}

#form p{
	margin: 0 0 5% 0;
}
#form p.flow{
	margin: 0;
}
.wide{
	display: block;
	width: 95%;
}
.small{
	display: block;
	width: 20%;
}


#form input,
#form select,
#form textarea{
	font-size: 1.6rem;
	padding: 2%;
	vertical-align: baseline;
}

#form input.mt10 { margin-top:10px;}
#form .privacy-box{
	margin: 0 0 3% 0;
}
#form .privacy-box p{
	background-color: #F0F0F0;
	color: #000000;
	padding: 3%;
	margin: 2% 0 0 0;
}

#form .submit-btn{
	width: 86%;
	margin: 0 auto;
}
#form .submit-btn button{ background:none; border:none; padding:0; margin:0; }
#form .submit-btn input{
	cursor: pointer;
	font-size: 1.6rem;
	font-weight: bold;
}


/* 確認画面 */
#inquiry-confirm{
	width: 94%;
	margin: 0 3%;
}
#inquiry-confirm .message{
	color: #C72232;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 3% 0;
}

#inquiry-confirm .confirm-message{
	margin: 0 0 3% 0;
}
#inquiry-confirm table{
	width: 100%;
	margin: 0 0 30px 0;
}
#inquiry-confirm table th{
	background-color: #F3F3F3;
	width: 9em;
	font-size: 1.6rem;
	text-align: left;
	vertical-align: top;
	border: #C4C2C2 1px solid;
	padding: 15px 15px;
}
#inquiry-confirm table td{
	border: #C4C2C2 1px solid;
	font-size: 1.6rem;
	padding: 15px;
}
#inquiry-confirm .attention{
	color: #FE3200;
	font-weight: bold;
}
#inquiry-confirm .submit-btn{
	text-align: center;
	padding: 0 0 8% 0;
}
#inquiry-confirm .submit-btn input, #inquiry-confirm .submit-btn button{
	cursor: pointer;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 2% 4%;
}

/* =================================================================
カレンダー
================================================================= */



.calender-week-select { margin-top: 15px; margin-bottom: 10px;}
.calender-week-select .btn-week  {width: 40%;border: 1px solid #7f1184;border-radius: 5px;box-shadow: 0 2px #eee;}
.calender-week-select .btn-week a  { display: block; text-decoration: none;
font-size: 12px; color: #583e28; text-align: center; padding: 8px; position: relative;}
.calender-week-select .btn-week-back, .calender-week-select .btn-week-next.prr  { float: left;}
.calender-week-select .btn-week-next  { float: right;}

.calender-week-select .btn-week-back a::before,
.calender-week-select .btn-week-next.prr a::before,
.calender-week-select .btn-week-next.prr .no-link::before
{ position: absolute; content: ""; width: 6px; height: 6px; border: 0px;
border-top: solid 2px #583e28; border-right: solid 2px #583e28; -ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg); transform: rotate(-135deg); position: absolute; top: 50%; left: 14px; margin-top: -4px;}
.calender-week-select .btn-week-next a::after
{ position: absolute; content: "";width: 6px; height: 6px; border: 0px;
border-top: solid 2px #583e28; border-right: solid 2px #583e28; -ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute;
top: 50%; right: 14px; margin-top: -4px;}
.calender-week-select .btn-week-next.prr a::after { display:none;}

/* disabled */
.calender-week-select .btn-week.btn-week-disabled  { border: 1px solid #ccc; box-shadow: none;}
.calender-week-select .btn-week.btn-week-disabled a  { color: #999; background-color: #ddd;}
.calender-week-select .btn-week.btn-week-disabled a::before,
.calender-week-select .btn-week.btn-week-disabled a::after  { border-top: solid 2px #999; border-right: solid 2px #999;}
.calender-week-select .btn-week-next.prr .no-link { display: block; text-decoration: none; border-radius:4px;
font-size: 12px; color: #583e28; text-align: center; padding: 8px; position: relative; color: #999; background-color: #ddd;}

/* カレンダー */
.calender-header  {max-width: 705px;z-index: 99;}
.calender-body  {margin-bottom: 20px;max-width: 705px;}
.tbl-calender-fixed  { position: fixed; top: 0; width: 94%; border-bottom: 2px solid #7f1184;}
.tbl-calender-day,
.tbl-calender-time  { width: 100%; text-align: center; vertical-align: middle; background-color: #fff; font-size: 14px;}
.tbl-calender-day p,
.tbl-calender-time p  { margin: 0 !important;}
.tbl-calender-day th,
.tbl-calender-day td,
.tbl-calender-time td  {border: 1px solid #7f1184;color: #583e28;}
.tbl-calender-day th  { width: 16%; font-weight: bold; min-width: 56px; padding: 4px 0;}
.tbl-calender-day td  { width: 12%;}
.tbl-calender-time td.time-table  { width: 16%;}
.tbl-calender-time td.time-cell  { width: 12%;}

.tbl-calender-day td.day-cell > p  { padding: 6px; color: #583e28;}
.tbl-calender-day td.day-cell > p > span.day  { font-weight: bold;}
.tbl-calender-day td.day-cell > p > span.week  { font-size: 12px; display: block; line-height: 1.2;}
.tbl-calender-day td.day-cell.sat  { background-color: #c5e8f5;}
.tbl-calender-day td.day-cell.sat p  { color: #7f1184;}
.tbl-calender-day td.day-cell.sun  { background-color: #f8d8e5;}
.tbl-calender-day td.day-cell.sun p  { color: #d54f88;}
.tbl-calender-time td.time-table p  { color: #583e28;}
.tbl-calender-time td.time-table p,
.tbl-calender-time td.time-cell span  { padding: 6px;}
.tbl-calender-time td.time-cell span a  { text-decoration: none;}
.tbl-calender-time td.time-table  {background-color: #F0E6C8;}
.tbl-calender-time td.time-table p  { font-weight: bold;}
.tbl-calender-time td.time-cell span  { font-size: 16px; font-weight: bold;}
.tbl-calender-time td.time-cell span a  { color: #C72254;}
.tbl-calender-time td.time-cell.close  { background-color: #ddd; color: #666;}
.tbl-calender-time td.time-cell.check  { background-color: #d73856; color: #fff;}
.tbl-calender-time td.time-cell.check span  { display: block; background-color: #d73856; background-image: url(../../img/calender_check.png); background-repeat: no-repeat; background-size: 40%; background-position: 50%; cursor: pointer;}
.tbl-calender-time tr:nth-child(even) td p  { font-size: 12px; padding-left: 14px;}
.tbl-calender-time tr:nth-child(even) td  {border-bottom: 2px solid #7f1184;}
@media screen and (min-width: 481px)  { .tbl-calender-time td.time-cell.check span  { background-size: 22%; }
}




/* 申込完了 */
#inquiry-complete{
	width: 94%;
	padding: 0 3%;
}
#inquiry-complete p.lead{
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	margin: 0 0 5% 0;
}
#inquiry-complete p{
	font-size: 1.8rem;
	line-height: 1.8;
	margin: 0 0 20px 0;
}


/* 完了画面の注意事項 */
.complete-notice{
	background-color: #FDE0E0;
	padding: 3%;
	margin: 0 0 5% 0;
}
.complete-notice h2{
	color: #dc1e1e;
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 3% 0;
}
.complete-notice ul{
}
.complete-notice ul li{
	margin: 0 0 1% 0;
}
.complete-notice ul li strong{
	font-weight: bold;
}
.complete-notice ul li span{
	color: #dc1e1e;
	font-weight: bold;
}


.complete-access{
}
.complete-access h2{
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 2% 0;
}
#inquiry-complete .complete-access p.shop-address{
	margin: 0 4% 2% 4%;
}


/* =================================================================
		Clearfix
================================================================= */
.clearfix:after{ content:"."; display:block; height:0; clear:both;	visibility:hidden;}
.monthly-calendar table,
.day-calendar table { width: 100%; text-align: center; vertical-align: middle; background-color: #fff; font-size: 14px;}
.monthly-calendar tr:first-child th,
.day-calendar tr:first-child th {padding: 10px 6px;border: 1px solid #7f1184;color: #583e28;background-color: #F0E6C8;}
.day-calendar tr:first-child th {background-color: #FFF;color: #583e28;font-weight: bold;}

.monthly-calendar tr:first-child th {width: 12%;}

.monthly-calendar tr:first-child, .day-calendar tr:first-child  { border-bottom: 2px solid #7f1184; }
.monthly-calendar tr td,
.day-calendar tr td,
.day-calendar tr th { padding: 6px; border: 1px solid #7f1184; }
.day-calendar tr td { padding: 0px; }
.day-calendar tr:nth-child(n+2) th {width:32%;background-color: #F0E6C8;font-weight: bold;color: #583e28;}
.monthly-calendar tr td a,
.day-calendar tr .vacant a {color: #C72254;text-decoration:none;font-size: 16px;font-weight: bold;}
.monthly-calendar tr td .calendar-mark { font-size: 16px; font-weight: bold;}
.monthly-calendar tr td.no-day, .monthly-calendar tr td.disable,
.day-calendar tr td .disable {background-color: #ddd; color: #666;}
.day-calendar tr td .disable { padding: 6px;  font-size: 16px; font-weight: bold;}