// Scss Document
/*--------------------
共通設定
----------------------*/
$bg-color:#ffffff;
$eng:baskerville-display-pt, serif;
$ja:a-otf-ryumin-pr6n, serif;
$font-size:16px;
$small:75%;
$breakpoint-tablet: 800px; 
$breakpoint-mobile: 600px;
@mixin max-screen($break-point) { 
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) { 
  @media screen and (min-width: $break-point) {
    @content;
  }
}
@mixin screen($break-point-min, $break-point-max) { 
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 1px;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	color: #000000;
	font-size: 16px;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
	pointer-events: none;
	}
}
.pc {
  display: block;
  @include max-screen($breakpoint-tablet) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-tablet) {
    display: block;
  }
}
#global-nav {
	width: 100%;
	opacity: 1;
	text-align: center;
	height: 50px;
	background: rgba(255,255,255,0.8);
	position: relative;
    & a {
        max-width: 300px;
		& img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			max-width: 70px;
			@include max-screen($breakpoint-mobile) {
				max-width: 70px;
			}
		}
    }
	&.m_fixed {
		opacity: 1;
        position: fixed;
        top: 0;
        z-index: 9999;
		transition: all .5s;
	}
}

body {
	background: $bg-color;
	overflow-x: hidden;
}
.cd_header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	z-index: 100;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	& #cd_logo {
		float: left;
		margin: 13px 0 0 13px;
		& img {
			display: block;
			opacity: 0.6;
			width: 70%;
		}
	}
}
.copy {
	font-size: 0.6em;
	text-align: center;
	padding: 20px 0;
}	
/*--------------------------------------------*/
.wrapper {
	width: 100%;
	background: #fff;
	margin: 0 auto;
	overflow-x: hidden;
	max-width: 990px;
	text-align: center;
	& .mv {
		margin-bottom: 15%;
	}
	& h2.ttl {
		font-weight: 400;
		font-size: 1.2em;
		@include max-screen($breakpoint-mobile) {
			font-size: 1.0em;
		}
	}
	& h3.subttl {
		font-size: 1.8em;
		margin: 5% auto;
		line-height: 1.0;
		letter-spacing: 0.2em;
		font-family: $eng;
		@include max-screen($breakpoint-mobile) {
			font-size: 1.4em;
			letter-spacing: 0.1em;
		}
		& span {
			font-size: 50%;
			letter-spacing: 0.1em;
			position: relative;
			display: inline-block;
			padding: 0 30px;
			&::before,&::after {
				content: '';
				position: absolute;
				top: 50%;
				display: inline-block;
				width: 20px;
				height: 1px;
				background-color: #000;
			}
			&::before {
				left: 0;
			}
			&::after {
				right: 0;
			}
		}
	}
	& .main-txt {
		margin: 3% auto 10%;
		width: 100%;
		max-width: 900px;
		@include max-screen($breakpoint-tablet) {
			width: 75%;
		}
		@include max-screen($breakpoint-mobile) {
			width: 80%;
		}
		& p {
			font-size: 0.8em;
			line-height: 2.2;	
			margin-bottom: 1%;
			@include max-screen($breakpoint-tablet) {
				font-size: 0.8em;
				line-height: 2.5;
				text-align: left;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
			}
		}
	}
	.item-btn {
		margin: 0 auto;
		max-width: 300px;
		width: 70%;
		& a {
			border: 1px solid #000;
			border-radius: 50vh;
			padding: 1.0em;
			display: block;
			background: #000;
			color: #fff;
			font-size: 1.0em;
			&:hover {
				color: #000;
				background: #fff;
				transition: .4s;
			}
		}
		
	}
	& section {
		margin: 15% auto;
		@include max-screen($breakpoint-mobile) {
			margin: 25% auto;
		}
	}
	& .schedule {
		& table {
			max-width: 800px;
			width: 80%;
			margin: 0 auto 5%;
			border-collapse:  collapse;
			@include max-screen($breakpoint-mobile) {
				width: 90%;
			}
			& tr {
				& th {
					border: 1px solid #ccc;
					padding: 1%;
					background: #f5f5f5;
					@include max-screen($breakpoint-tablet) {
						font-size: 0.8em;
					}
				}
				& td {
					border: 1px solid #ccc;
					padding: 2%;
					font-size: 1.0em;
					@include max-screen($breakpoint-tablet) {
						font-size: 0.7em;
					}
					& span {
						font-size: 80%;
					}
				}
				& td ,& th {
					& :nth-child(1) {
						width: 30%;
						@include max-screen($breakpoint-mobile) {
							width: 35%;
						}
					}
					& :nth-child(2) {
						width: 70%;
						@include max-screen($breakpoint-mobile) {
							width: 65%;
						}
					}
				}
			}
		}
		& p {
			font-size: 0.8em;
			margin-bottom: 2%;
			line-height: 2.0;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				margin-bottom: 5%;
				line-height: 2.5;
			}
			& span {
				font-size: 120%;
				border-bottom: 1px solid #000;
			}
			& a {
				font-size: 90%;
				text-decoration: underline;
			}
		}
		& .foamBtn {
			margin-top: 4%;
    		margin-bottom: 7%;
			@include max-screen($breakpoint-mobile) {
				margin-bottom: 10%;
			}
			& a {
				font-size: 0.8em;
				background: #565656;
				color: #fff;
				padding: 2% 6%;
				border: 1px solid #565656;
				border-radius: 5px;
				letter-spacing: .1em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
				&:hover {
					color: #565656;
					background: #fff;
					transition: .5s;
					filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
				}
			}
		}
	}
	& .access {
		width: 90%;
		max-width: 800px;
		margin: 0 auto;
		& p {
			text-align: left;
			font-size: 0.8em;
			margin:0 auto 2%;
		}
		& .map {
			margin: 5% auto;
		}
		& .foamBtn {
			margin-top: 4%;
    		margin-bottom: 7%;
			& a {
				font-size: 0.8em;
				background: #565656;
				color: #fff;
				padding: 2% 6%;
				border: 1px solid #565656;
				border-radius: 5px;
				letter-spacing: .1em;
				&:hover {
					color: #565656;
					background: #fff;
					transition: .5s;
					filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
				}
			}
		}
	}
	

	& .measures {
		max-width: 800px;
		width: 90%;
		margin: 0 auto;
		& p {
			font-size: 0.8em;
			text-align: left;
			width: 90%;
			margin: 0 auto 5%;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				line-height: 2.0;
			}
		}
	}
	
	.attention {
		max-width: 800px;
		width: 90%;
		margin: 0 auto;
		& ul {
			width: 90%;
			margin: 0 auto;
			text-align: left;
			& li {
				font-size: 0.8em;
				line-height: 2.5;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
				& span {
					font-size: 90%;
					color: #666;
				}
			}
		}
	}
	
	.history {
		max-width: 800px;
		width: 90%;
		margin: 0 auto;
		& ol {
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			& li {
				list-style: none;
				width: 50%;
				padding: 1%;
			}
		}
	}
}
.footer_copy {
	text-align: center;
	padding: 5% 0 2%;
	& p {
		font-size: 0.7em;
	}
}