@charset "utf-8";

/* header
------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height:70px;
  background: #FFF;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  transition: .5s;
  z-index: 20;
}

@media screen and (max-width: 900px) {
header {
  height:50px;
}
}

#headerArea{
  width:100%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  padding:15px 25px;
}

@media only screen and  (max-width: 900px) {
#headerArea{
  width:100%;
  padding:15px 0;
}
}

/* logo */

header #logo{
  width:328px;
  height:44px;
  position: absolute;
  top: 13px;
  left: 25px;
  display:block;
  background-size:auto 44px;
  background-image: url(../images/common/header-logo.webp);
}

header #logo a{
  width:328px;
  height:44px;
  text-decoration:none;
  display: block;
  text-indent:-9999px;
}

@media only screen and  (max-width: 1580px) {
header #logo{
  width:253px;
  height:34px;
  background-size:auto 34px;
  top: 17px;
  left: 15px;
}

header #logo a{
  width:253px;
  height:34px;
}
}

@media only screen and  (max-width: 900px) {
header #logo{
  width:253px;
  height:34px;
  background-size:auto 34px;
  top: 7px;
  left: 15px;
}
header #logo a{
  width:253px;
  height:34px;
}
}

#main_menu{
  width:100%;
  display:block;
  padding-right:80px;
  text-align: right;
  box-sizing: border-box;
  font-weight:400;
  font-family: 'Zen Old Mincho', serif;
}

@media only screen and  (max-width: 1580px) {
#main_menu{
  padding-right:50px;
}
}

@media only screen and  (max-width: 1150px) {
#main_menu{
  display:none;
}
}

#main_menu ul{
  text-align: right;
  margin-top:3px;
}

#main_menu li{
  display:inline-block;
  vertical-align:middle;
  margin:0px 20px;
}

@media only screen and  (max-width: 1580px) {
#main_menu li{
  margin:0px 15px;
}
}

@media only screen and  (max-width: 1280px) {
#main_menu li{
  margin:0px 10px;
}
}

#main_menu li a{
  text-decoration:none;
  color:#000;
  padding:5px 0;
}

#main_menu li a:hover {  
  opacity: 0.7;
  text-decoration: none;
}

/*sub-con
================================================== */
.sub-con{
  padding:4% 0 4%;
  position: relative;
}

.zi2{
  z-index:2;
  position: relative;
}

.blue_right{
  width: 65%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color:#edeff0;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.blue_right{
  width: 60%;
}
}

.grn_right{
  width: 65%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color:#efeed8;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.grn_right{
  width: 60%;
}
}

.grn_right2{
  width: 65%;
  height: 65%;
  position: absolute;
  top: 0;
  right: 0;
  background-color:#efeed8;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.grn_right2{
  width: 60%;
}
}

.grn_all{
  width: 100%;
  height: 65%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/bg-illust.png);
  background-color:#e7e6d0;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.grn_all{
  width: 60%;
}
}

.blue_left{
  width: 65%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color:#edeff0;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.blue_left{
  width: 60%;
}
}

.rde {
  background-color:#d8d5ba;
}

/* .other-info
================================================== */
.other-info {
  width: 100%;
  margin:0;
  overflow: hidden;
}

.other-info .yashi{
  width: 100%;
  background-image: url(../images/bg_yashi.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left 70px;
  padding-top:70px;
}

@media screen and (max-width: 1580px) {
.other-info .yashi{
  background-image: url(../images/bg_yashi_pc.webp);
  background-repeat: no-repeat;
}
}

@media screen and (max-width: 900px) {
.other-info .yashi{
  background-position:left 50px;
  padding-top:50px;
}
}

@media screen and (max-width: 568px) {
.other-info .yashi{
  background-image: url(../images/bg_yashi_spR.webp);
  background-position: right 50px;
  padding-top:50px;
}
}

.sub-contents{
  width: 100%;
  margin:0 auto;
  padding:10px 0 5%;
  position: relative;
}

.sub_ttl{
  height:135px;
  width:auto;
  min-width:135px;
  margin-bottom:10px;
  background-image: url(../images/bg-star.webp);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left top;
  margin-left:-65px;
}
@media screen and (max-width: 1280px) {
.sub_ttl{
  margin-left:-1%;
  height:100px;
  min-width:100px;
  margin-bottom:20px;
}
}

@media screen and (max-width: 568px) {
.sub_ttl{
  height:80px;
  min-width:80px;
}
}

.sub_ttl .en{
  font-size:2em;
  line-height:1;
  padding-left:65px;
  padding-top:55px;
  font-family: 'Crimson Text', serif;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1280px) {
.sub_ttl .en{
  font-size:1.8em;
  padding-left:45px;
  padding-top:43px;
}
}

@media screen and (max-width: 568px) {
.sub_ttl .en{
  font-size:1.6em;
  padding-left:40px;
  padding-top:33px;
}
}

.sub_ttl .jpn{
  font-size:16px;
  padding-top:3px;
  padding-left:65px;
  font-weight:500;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 1280px) {
.sub_ttl .jpn{
  font-size:14px;
  padding-left:45px;
  padding-top:1px;
}
}

@media screen and (max-width: 568px) {
.sub_ttl .jpn{
  font-size:13px;
}
}

.sb_syousai{
  text-align :center;
  padding:0 1.5%;
  box-sizing: border-box;
  width: 100%;
}

@media screen and (max-width: 568px) {
.sb_syousai{
  padding:0 4%;
}
}

.sub-contents h1{
  font-weight:400;
  font-family: 'Zen Antique', serif;
  font-size:2.2em;
  margin-bottom:30px;
  line-height:1.5;
}

@media screen and (max-width: 1280px) {
.sub-contents h1{
  font-size:1.8em;
  margin-bottom:15px;
}
}

@media screen and (max-width: 900px) {
.sub-contents h1{
  font-size:1.6em;
  margin-bottom:15px;
}
}

@media screen and (max-width: 568px) {
.sub-contents h1{
  font-size:1.3em;
  margin-bottom:5px;
  line-height:1.4;
}
}

.sub-contents .sb-txt{
  letter-spacing:0em;
  line-height:2;
  font-size:1.1em;
  color:#000;
  margin:15px 0;
  font-family: 'Zen Old Mincho', serif;
  font-weight:400;
}

.sub-contents .sb-txt a {
  text-decoration: none;
  color:#475f6c;
}

.sub-contents .sb-txt a:hover {
  color:#53658d;
  text-decoration: underline;
}

.sub-contents .sb-txt2{
  letter-spacing:0em;
  line-height:2;
  font-size:1.1em;
  color:#000;
  margin:15px 0 15px 15px;
  font-family: 'Zen Old Mincho', serif;
  font-weight:400;
}

@media screen and (max-width: 1280px) {
.sub-contents .sb-txt{
  line-height:1.8;
  font-size:1em;
  margin:10px 0;
}

.sub-contents .sb-txt2{
  line-height:1.8;
  font-size:1em;
  margin:10px 0 10px 10px;
}
}

@media screen and (max-width: 900px) {
.sub-contents .sb-txt{
  text-align: left;
}
}

@media screen and (max-width: 568px) {
.sub-contents .sb-txt{
  margin:10px 0;
  line-height:1.6;
  font-size:0.95em;
}

.sub-contents .sb-txt2{
  margin:10px 0;
  line-height:1.6;
  font-size:0.95em;
}
}

.subc_left{
  width: 52%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/bg-illust.png);
  background-color:#b1b6c8;
  background-color:#d6d9e2;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.subc_left{
  width: 60%;
}
}

.subc_right{
  width: 65%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(../images/bg-illust.png);
  background-color:#e7e6d0;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:0;
}

@media screen and (max-width: 1580px) {
.subc_right{
  width: 60%;
}
}

.resv_syousai{
  width:100%;
  margin:20px auto 10px;
  max-width:950px;
}

.reservef_bt{
  width:100%;
  margin:10px auto 20px;
  text-align: center;
}

@media only screen and  (max-width: 568px) {
.reservef_bt{
  margin:25px auto;
}
}

.reservef_bt li {
  width:45%;
  height:auto;
  margin:2%;
  display:inline-block;
  vertical-align: top;
  text-align: center;
  font-size:1.25em;
  letter-spacing:0.05em;
}

@media only screen and  (max-width: 820px) {
.reservef_bt li {
  font-size:1.15em;
  width:80%;
  margin:2% 1%;
}
}

@media only screen and  (max-width: 568px) {
.reservef_bt li {
  width:94%;
  height:auto;
  margin:0 3%;
 text-align: center;
 font-size:1.05em;
 display:block;
 letter-spacing:0em;
}
}

.reservef_bt li .fa{
  margin-right:5px;
}

.reservef_bt .resv a {
  display:block;
  padding:20px 0;
  border:1px solid #333A56;
  background:#333A56;
  color:#FFF;
  text-decoration: none;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

.reservef_bt .resv a:hover {
  color:#FFF;
  background:#52658F;
  border:1px solid #52658F;
  text-decoration: none;
  border:1px solid #52658F;
}

.reservef_bt .resv a .fa {
  color:#FFF;
}
.reservef_bt .resv a:hover .fa {
  color:#FFF;
}

.reservef_bt .web a {
  display:block;
  padding:20px 0;
  border:1px solid #333A56;
  background:#FFF;
  color:#333A56;
  text-decoration: none;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

.reservef_bt .web a:hover {
  color:#FFF;
  background:#333A56;
  text-decoration: none;
  border:1px solid #333A56;
}

.reservef_bt .web a:hover .fa {
  color:#FFF;
}

.are-buttons{
  margin-top:3%;
  font-weight:400;
  font-family: 'Noto Sans JP', sans-serif;
}

@media screen and (max-width: 820px) {
.are-buttons{
  text-align:center;
  margin-left:auto;
}
}

@media screen and (max-width: 568px) {
.are-buttons{
  margin-top:15px;
  margin-bottom:15px;
  font-size:14px;
}
}

.are-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.are-button.c-button--ghost{display:inline-table;padding:10px 20px;border:2px solid #53658d;color:#FFF;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.are-button.c-button--ghost:hover{border:2px solid #53658d;}
.are-buttons a{text-decoration:none;background-color:#53658d;}
.are-buttons a:hover{text-decoration:none;display:inline-table;color:#53658d;background-color:#FFF;text-shadow:none;}