html{
	font-size: 18px;
}
@media(max-width: 767px){
	html{
		font-size: 12px;
	}
}
html,body{
    width: 100%;
    -ms-overflow-x: hidden;
        overflow-x: hidden;
}

#main{
	background: #001e43;
	color: #fff;
}

#main p {
	font-size:inherit;
}

@media(max-width: 767px){
#main p {
	font-size:16px;
}	
}

.bg-section{
	position: absolute;
    left: 0;
    top: 0;
	width: 100%;
	height:50vh;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

#bg-section01{
	background-color:rgba(13, 0, 21, 1.0);
    /*background-image: url('../img/img03.jpg');*/
}
#bg-section-img{
    background-image: url('../img/img03.webp');
}
#bg-section02{
    background-image: url('../img/img02.webp');
}
#bg-section03{
    background-image: url('../img/img01.jpg');
    top: 30vh;
}

.title{
    letter-spacing: 4px;   
}
.z-depth-2{
    position: relative;
    z-index: 2;
}
.table{
    background-color: #FFF;
    color: #0d0015;
}
.btn-ghost{
    border: 1px solid #fff;
    color: #FFF;
}
.btn-ghost:hover{
    text-decoration: none;
    background: #0d0015;
    border-color: #0d0015;
    color: #FFF;
}
#section01{
    position: relative;
    z-index: 2;
    padding: 30vh 0 10vh;
}
#section01 .content-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
	line-height:1.8;
    z-index: 2;
}

#section01 .inner-el{
    font-size: 3rem;
    position: relative;
    text-align: center;
    padding: 0 10px;
    max-width: 100px;
    font-family:"Kaisei Decol";
}

@media(max-width:900px){
#section01 .content-inner {
    max-width:80%;
	line-height:1.8;
}
}

@media(max-width: 767px){
#section01 .inner-el{
        padding: 0 10px; 
        font-size: 3rem;
}
}

#section-img{
    position: relative;
    z-index: 4;
    padding: 50vh 0 0;
	background: #0d0015;
	overflow: hidden;
}

#section02{
    background: rgba(13,0,21,0.5);
    position: relative;
    z-index: 4;
    padding:10vh 0;
}

#section03{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #0d0015;
    overflow: hidden;
}

#section04{
    position: relative;
    background: rgba(13,0,21,0.7);
    z-index: 3;
    padding: 10vh 0;
}

#section04 h2 {
font-size:26px;
margin:0 auto 30px;

text-align:center;
display:block;
text-decoration:none;
width:100%;
border:1px solid #fff;
}
#section04 h2 a {
color:#fff;
display:block;
text-decoration:none;
width:100%;
padding:10px 5px 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#section04 h2 span {
font-size:20px;
}
#section04 h2 a:hover {
background:rgba(255,255,255,0.3)
}


#section05{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background:#0d0015;
    overflow: hidden;
}
#section06{
    position: relative;
    background:#001e43;
    z-index: 3;
    padding: 10vh 0;
}

#footer{
    color: #FFF;
    padding: 350px 20px 50px;
    text-align: center;
    background:#0d0015;
}

#copyright {
    font-size: 12px;
}

@media screen and (max-width:840px) {
#section04 .container {
    width:90%;}
}

@media(max-width: 767px){     
    #section02,#section04,#section06{
        padding: 40px 0;
    }
}




article.blog a {
 width:100%;
}

article.blog {
	width: 100%;
	max-width:1200px;
	margin:auto;
}
article.blog .blog_container {
gap: 30px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
flex-wrap:wrap;
}

article.blog div.blog_article {
 width:calc(25% - 20px);
}

article.blog div.blog_article a {
text-decoration:none;
 width:calc(25% - 0);
 border-radius:20px;
 box-shadow: rgba(255, 255, 255, 0.02) 0px 4px 16px, rgba(255, 255, 255, 0.05) 0px 8px 32px;
background:#fff;

width:calc(100% - 0px);
color:#001e43;
font-size:14px;
line-height:1.5;
display:block;
padding:15px 15px 25px;
}

.blog_title {
background:#fafafa;
padding:10px;

margin:0 0 10px 0;
font-family:"Kaisei Decol";
font-weight:700;
font-size:18px;
line-height:1.2;
}

.blog_title span.blog_date {
font-size:14px;
font-family:"Zen Maru Gothic";
font-weight:700;
}


@media screen and (max-width:1300px) {
article.blog {width: 100%;max-width:90%;margin:auto;}
}

@media screen and (max-width:1025px) {
article.blog {
max-width:100%;}
article.blog div.blog_article {
 width:calc(33.333% - 20px);}
}

@media screen and (max-width:840px) {
article.blog div.blog_article {
 width:calc(50% - 20px);}
}

@media screen and (max-width:767px) {
article.blog div.blog_article {
 width:calc(100%);}
}

.reserve-wrapper {
	/* background:rgba(255,255,255,0.2); */
	border:dashed rgba(255,255,255,0.5) 3px;
	padding:10px;
}

.reserve-availability {
	color: #fff;
	background: #dc143c;
	margin:10px auto 5px;
	padding:5px 0 8px;
	line-height:1;
	font-size: 14px;
	border-radius:60px;
}

.reserve-wrapper a {
font-family:"Kaisei Decol";
display: inline-block;
background:#fff;
text-decoration:none;
color:#19448e;
margin:10px auto;
position:relative;
font-size:1.2em;
line-height:3;
padding:0.5em 6em;
cursor:pointer;
text-align: center;
background:#fff;
border-radius: 3em;
position: relative;
transition: all ease .5s;
}
.reserve-wrapper a:hover { 
color: #fff;
background: #19448e;
}

.reserve-wrapper a::before { 
	display: block; 
	position: absolute; 
	right: 1em; top: 50%; 
	transform: translateY(-50%);
	width: 2em; height: 2em; 
	background: #19448e; 
	border-radius: 50%; content: "";
}
.reserve-wrapper a::after { 
	display: block;
	position: absolute;
	top: 50%; right: 1.8em; 
	transform: translateY(-50%) rotate(45deg);
	width: .4em; height: .4em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	animation: move-arrow 1.5s linear infinite;
}

@keyframes move-arrow {
  0% { right: 3em; opacity: 0;}
  30% { opacity: 1;}
  60% { opacity: 1;}
  100% { right: 1em; opacity: 0;}
}

.mail-maga {
line-height:3;
margin:20px auto;
	letter-spacing:1px;
}

.mail-maga span.highlight {
    text-decoration:1px underline wavy #fff;
    text-underline-offset: 5px;
    text-align: center;
    font-size:20px;
}

.mail-maga a {
color: #fff;
font-size:15px;
line-height:1.5;
text-decoration: none;
}

.button-mailmaga img {
	width:28px;
	margin-right:10px;
}

.button-mailmaga {
padding:20px;
width:300px;
position: relative;
display: inline-block;
background-color:#19448e;
}

/* 擬似要素の共通スタイル */
.button-mailmaga::after,
.button-mailmaga::before,
.button-mailmaga span::after,
.button-mailmaga span::before {
  background-color: rgba(255,255,255,0.3);
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.button-mailmaga::after {
    width: 0px;
    height:2px;
    top: -1px;
    left: -1px;
}
/* 右下へ配置 */
.button-mailmaga::before {
    width: 0px;
    height: 2px;
    right: -1px;
    bottom: -1px;
}
/* 左下へ配置 */
.button-mailmaga span::after {
    width: 2px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
/* 右上へ配置 */
.button-mailmaga span::before {
    width: 2px;
    height: 0px;
    top: -1px;
    right: -1px;
}
 
/* hover */
.button-mailmaga:hover::after,
.button-mailmaga:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
 
.button-mailmaga:hover span::after,
.button-mailmaga:hover span::before {
  height: 100%;
  height: calc(100% + 1px);
}