@charpet"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

/* html body
========================================================================================================
*/
html{
	font-size:62.5%;
}

body{
  background: #F0F0E1;
  font-family:"Noto Sans jp", serif;
  font-weight: 500;
  font-size: 1.4rem;  
  color: #000;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%
}

@media print, screen and (min-width:640px) {
  body{
   font-size: 1.6rem;
  }
}

/* layout
========================================================================================================
*/

body#reserve{   
  position: relative;
  width:100%;
}

@media print, screen and (min-width:960px) {
 body#reserve{ 
   width:100%;
  }
}

/* header
========================================================================================================
*/
#reserve header{
  width:100%;
  height: 140px;
  padding:0;
  margin:0;  
}

@media print, screen and (min-width:960px) {
  #reserve header{
  width:100%;
  height: 190px;
  padding:0;
  margin:0;  
  }
}

#reserve header div{
  position: relative;     
  padding: 0px 0 0 0;
  z-index: 1;
}
@media print, screen and (min-width:960px) {
#reserve header div{
    padding: 60px 0 0 0;
  }
}

#reserve header p.rsv-logo{
  position: relative;
  padding: 10px;
  z-index: 300;
}
@media print, screen and (min-width:960px) {
#reserve header p.rsv-logo{
  position: absolute;
  top:10px;
  left:20px;  
  padding: 10px; 
  }
}
#reserve header p.rsv-logo img{  
  display: block;
  width: 100%;
  max-width: 145px;
}
@media print, screen and (min-width:960px) {
#reserve header p.rsv-logo img{  
  max-width: 192px;
  }
}
#reserve header h1{
  font-size: 2.0rem;
  font-weight: 700;
  text-align: center;
  color: #FFF;
  margin:20px 0;
}
@media print, screen and (min-width:960px) {
#reserve header h1{
  font-size: 2.8rem;  
  margin:20px 0;
  }
}

#reserve header h1 + p{  
  width:90%;
  font-size: 1.2rem;
  font-weight:400;
  text-align: center;  
  color: #FFF;
  line-height: 180%;
  margin: 25px auto 0 auto;
}
@media print, screen and (min-width:960px) {
#reserve header h1 + p{  
  font-size: 1.6rem;  
  font-weight:400;
  }
}

#reserve header figure{
  width:100%;
  height:210px;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
@media print, screen and (min-width:640px) {
#reserve header figure{
  width:100%;
  height: 320px;
  }
}
#reserve header figure img{
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

#reserve header div.language{
  width:100%;
  height: inherit;
  padding: 0;
  margin: 0;  
  position: absolute;
  top:10px;
  left: 0;
  z-index: 300;
}

#reserve header div.language ul{
  width:95%;
  display: grid;
  grid-template-columns: 40px 40px;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
#reserve header div.language ul{  
  max-width: 1200px;
  display: grid;
  grid-template-columns: 60px 60px;
  }
}

#reserve header div.language ul li{
  height:24px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
}

@media print, screen and (min-width:640px) {
#reserve header div.language ul li{
  height:24px;
  font-size: 1.3rem;
  }
}

#reserve header div.language ul li:first-of-type{
  background: #F0209D;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-right: 1px solid #FFF;
}

#reserve header div.language ul li:last-of-type{
  background: #CCC;  
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: 1s;
}

#reserve header div.language ul li a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #FFF;
}

#reserve header div.language ul li:hover{
  background: #F0209D;
}

/* contents
========================================================================================================
*/

/*----------------------------------------------------------------------------------
                                    contents
-----------------------------------------------------------------------------------*/

#reserve main{
  width:100%;
}

/* ======== h1 ========*/

h1.title01{
  width:100%;
  background-color:#000;
  font-size:18px; font-size:1.8rem;
  text-align:center;
  color:#FFF;
  padding:20px 0;
}

@media print, screen and (min-width:960px) { 
 h1.title01{
  width:960px;
  height:50px;
  background:url(/common/images/title01.png) no-repeat 0 0;
  font-size:20px; font-size:2.0rem;
  line-height:50px;
  padding:0;
 }
}

h1.title02{
  width:100%;
  background-color:#000;
  font-size:18px; font-size:1.8rem;
  text-align:center;
  color:#FFF;
  padding:20px 0;
}

@media print, screen and (min-width:960px) {
 h1.title02{
   width:100%;
   max-width: 750px;
   height:50px;
   background:url(/common/images/title01.png) no-repeat 0 0;
   font-size:20px; font-size:2.0rem;
   line-height:50px;
   padding:0;
 }
}

/* ======== h2 ========*/

#second h2.title01{
  width:100%;
  height:70px;
  background:url(/common/images/guts-mark03.png) no-repeat right 10px  #313140;
  font-size:18px; font-size:1.8rem;
  line-height:70px;
  text-align:center;
  color:#FFF;
  font-weight: 700;
  padding:0 10px;
  margin:0 0 20px 0;
  /*margin:20px 0;*/
}

@media print, screen and (min-width:640px) {
 #second h2.title01{
   font-size:20px; font-size:2.0rem;
   margin:0 0 30px 0;
   /*margin:30px 0;*/
 }
}
@media print, screen and (min-width:960px) {
 #second h2.title01{
   max-width:850px;
   margin:0 0 30px 0;
   /*margin:30px 0;*/
 }
}

#second h2.title02{
  width:90%;
  background:url(/common/images/title08.png) no-repeat right 0 #6EB92B;
  font-size:18px; font-size:1.8rem;
  line-height:130%;
  text-align:center;
  color:#FFF;
  padding:5px 0;
  margin:0 auto;  
}

@media print, screen and (min-width:960px) {
 #second h2.title02{
   width:100%;
   max-width:750px;
   height:40px;
   background:url(/common/images/title08.png) no-repeat right 0 #6EB92B;
   font-size:18px; font-size:1.8rem;
   line-height:40px;
   padding:0 0 0 20px;
   margin:0 0 30px 0;  
 }
}

/*------------------------------------------------------------------------------------------------------------------------
                                                                    mc-banner
--------------------------------------------------------------------------------------------------------------------------*/

#second article section p.mc-banner02{
  width:100%;
  position:absolute;
  top:20px;
  left:0;
  padding:0 10px 10px 10px;
}


@media print, screen and (min-width:960px) {
 #second article section p.mc-banner02{
   max-width:690px;
   position:absolute;
   top:40px;
   left:0;
   padding:0;
 }
}

/* footer
========================================================================================================
*/

footer{
  position: relative;
	width:100%;
}

footer#inbound{
  position: relative;
	width:100%;
  background: #000;
}

footer#inbound small{
  width:100%;
  height:80px;  
  background:#000;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size:1.2rem;
  text-align:center;
  color: #FFF;
}

@media print, screen and (min-width:960px) {
footer#inbound small{
  font-size:1.4rem;
 }
}

/*================ pagetop ================*/

#page-top {
  position: fixed;
  bottom: 70px;
  right: 5px;
  z-index: 1201;
}

#page-top a {
  width: 35px;
  height:35px;
  display: block;
  background:url(/common/images/top.png) no-repeat 50% 48% #000;
	background-size:15.6px 10.8px;
  border-radius: 5px;
	border:1px solid #333;
  text-align: center;
  text-decoration: none;
  color: #fff;
  padding:0;
}

@media print, screen and (min-width:960px) {
 #page-top {
	position: fixed;
  bottom:30px;
  right: 25px;
 }
 #page-top a {
  width: 50px;
  height:50px;
	background:url(/common/images/top.png) no-repeat 50% 50% #000;
	background-size:26px 18px;
 }
}

#page-top a:hover {
  text-decoration: none;
  opacity:0.8;
}

@media print, screen and (min-width:960px) {
	.boxer-content {
	  width:80%;
    height:100%;
	}
}

/*------------------------------------------------------------------------------------------------------------------------
                                                                         recommend
-------------------------------------------------------------------------------------------------------------------------*/

aside#recommend{
  position: relative;
  background: url(/images/home50.jpg) no-repeat 50% 50%;
  background-size: cover;
  width:100%;
  padding: 40px 0 30px 0;
}

@media print, screen and (min-width:640px) {
  aside#recommend{
   padding: 90px 0;
  }
}

aside#recommend div.recommend-ct{
  width:90%;
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
  aside#recommend div.recommend-ct{
   width:95%;
   max-width: 1140px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   margin: 0 auto;
  }
}

div.recommend-ct h2{
  width:100%;
  font-size: 24px; font-size: 2.4rem;
  font-weight: 900;
  color: #FFF;
  text-align: center;
  margin: 0 0 40px 0;
}

@media print, screen and (min-width:640px) {
  div.recommend-ct h2{
   font-size: 36px; font-size: 3.6rem;
   margin: 0 0 70px 0;
  }
}

div.recommend-ct dl.rm-ct01{
  width:21%;
}

div.recommend-ct dl.rm-ct01 dt{
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  padding: 20px 0;
  text-align: center;
  font-size: 18px; font-size: 1.8rem;
  font-weight: 700;
  color: #FFF;
}

div.recommend-ct dl.rm-ct01 dd ul{
  width: 100%;
  text-align: center;
  margin: 40px 0 0 0;
}

div.recommend-ct dl.rm-ct01 dd ul li{
  margin:15px 0;
}


div.recommend-ct dl.rm-ct01 dd ul li a{
  font-size: 14px; font-size: 1.4rem;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  transition: 1s;
}

div.recommend-ct dl.rm-ct01 dd ul li a:hover{
  color: #00BFFF;
}

div.recommend-ct ul.rm-ct02{
  width:100%;
  /*display: flex;
  flex-flow: row wrap;*/
  margin: 0 auto;
}

@media print, screen and (min-width:460px) {
  div.recommend-ct ul.rm-ct02{  
  width:100%;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  }
}

@media print, screen and (min-width:960px) {
  div.recommend-ct ul.rm-ct02{  
    display: flex;
    flex-flow: row wrap;
    width:75%;
    margin: 0;
  }
}

div.recommend-ct ul.rm-ct02 li{
  width:100%;
  /*width:calc( ( 100% - 4% ) / 2 );*/
  margin: 0 0 10px 0;
}

@media print, screen and (min-width:460px) {
 div.recommend-ct ul.rm-ct02 li{
   width:100%;
   width:calc( ( 100% - 4% ) / 2 );
   margin: 0 1% 10px 1%;
  }
}

@media print, screen and (min-width:960px) {
  div.recommend-ct ul.rm-ct02 li{
    width:calc( ( 100% - 3% ) / 3 );
    padding: 0;
    margin: 0 1% 10px 0;
  }
}

div.recommend-ct ul.rm-ct02 li a{
  display: inline;
}

div.recommend-ct ul.rm-ct02 li img{
  display: block;
  width: 100%;
}

/*------------------------------------------------------------------------------------------------------------------------
                                                                         app
-------------------------------------------------------------------------------------------------------------------------*/

aside#ft-app{
	width:100%;
	background-color: #F4F4F4;
	padding: 40px 0 100px 0;
	margin: 0;
}

@media print, screen and (min-width:960px) {
 aside#ft-app{
	 padding: 60px 0 180px 0;
	 margin: 0;
	}
}

aside#ft-app div.app{
	position: relative;
	width:100%;
	margin: 0 auto;
}

@media print, screen and (min-width:640px) {
  aside#ft-app div.app{
	  position: relative;
	  width:100%;
    max-width:1000px;
    display: flex;
    flex-flow: row nowrap;
    align-items:flex-end;
    padding: 0 2%;
	  margin: 0 auto;
  }
}

aside#ft-app div.app div.app01{
	width:90%;
  margin: 0 auto;
}

@media print, screen and (min-width:960px) {
aside#ft-app div.app div.app01{
	width:56%;
  padding: 0 0 50px 0;
  }
}

aside#ft-app div.app div.app02{
	width:44%;
}

aside#ft-app div.app01 h2{
  width:100%;
  background-color: #6DC50E;
  font-size: 18px; font-size: 1.8rem;
  font-weight: 900;
  color: #FFF;
  text-align: center;
  padding: 15px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:960px) {
 aside#ft-app div.app01 h2{
   width:100%;
   font-size: 26px; font-size: 2.6rem;
   padding: 15px 0;
  }
}

aside#ft-app div.app01 p{
  width:85%;
  text-align: center;
  line-height: 175%;
  margin: 15px auto 30px auto;
  /*text-align: left;*/
}

@media print, screen and (min-width:960px) {
  aside#ft-app div.app01 p{
    width:100%;
    text-align: center;
    line-height: 175%;
    text-align: center;
    margin: 30px 0 40px 0;
  }
}

aside#ft-app div.app01 ul{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

aside#ft-app div.app01 ul li{
  margin: 0 5px;
}

aside#ft-app div.app01 ul li.btn-app01 img{
  width:134px;
  height: 40px;
}

aside#ft-app div.app01 ul li.btn-app02 img{
  width:109px;
  height: 40px;
}

@media print, screen and (min-width:640px) {
  aside#ft-app div.app01 ul li.btn-app01 img{
    width:168px;
    height: 50px;
  }
  aside#ft-app div.app01 ul li.btn-app02 img{
    width:136px;
    height: 50px;
  }
}

aside#ft-app div.app02 img{
  display: block;
	width:68%;
  margin: 0 0 0 auto;
}

div#contents{
  width:100%;
  max-width:960px;
  margin: 0 auto;
}

div#contents article#member{
  margin: 0;
}

/*---------------side-nav-----------------*/

aside#member-nav section.side-nav{
  padding:0 0 10px 0;
  margin:0;
}

/* ========h1 ========*/

aside#member-nav section.side-nav h1{
  width:100%;
  max-width:240px;
  height:45px;
  background-color:#000;
  font-size:18px; font-size:1.8rem;
  font-weight:normal;
  color:#FFF;
  text-align:center;
  line-height:45px;
}


/* ======== nav ========*/

aside#member-nav section.side-nav nav{
  width:100%;
  max-width:240px;
  border:1px solid #CCC;
  padding:10px 0 5px 0;
  margin:0;
}

aside#member-nav section.side-nav ul.side-nav01{
  max-width:200px;
  padding:0;
  margin:0 auto;
}

aside#member-nav section.side-nav ul.side-nav01 li{
  max-width:200px;
  height:50px;
  background:url(/common/images/icon03.png) no-repeat 95% 17px;
  border-bottom:1px dotted #999;
  padding:0;
}

aside#member-nav section.side-nav ul.side-nav01 li a{
  display:block;
  text-decoration:none;
  color:#000;
  line-height:50px;
}

aside#member-nav section.side-nav ul.side-nav01 li a:hover{
  color:#DC2392;
  text-decoration:none;
}

aside#member-nav section.side-nav ul.side-nav02{
  width:180px;
  padding:0 0 5px 0;
  margin:30px auto 0 auto;
}

aside#member-nav section.side-nav ul.side-nav02 li a{
  width:180px;
  height:36px;
  display:block;
  text-align:center;
  line-height:36px;
  padding:0;
  margin:0 0 5px 0;
}

aside#member-nav section.side-nav ul.side-nav03 li{
  padding:0;
  margin:10px 0 0 0;
}

aside#member-nav section.side-nav ul.side-nav03 li img{
  width:100%;
}