@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
 font-size:100%;
 margin: 0;
 padding: 0;
 font-weight: normal;
 }
li {
 list-style-type: none;
 }
 /*===============================
 　　　各ページ共通
 =================================*/

body {
 font-size: 100%;/* =16px */
 font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-feature-settings : "palt" 1;
 margin: 0;  padding: 0;
 color: #555555;
 -webkit-text-size-adjust: 100%;
　text-align: center;
 }
a {
 text-decoration: none;
 color: #555555;
 }
a:hover { color: #aaaaaa; }

/*ページトップへの矢印*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 0;
 right: 0;
 width: 66px;
 height: 66px;
 z-index: 100;
 background: rgba(51,102,153, 0.9);
 border: solid 1px #FFF;
 color: #FFF;
 }

.pagetop a {
 display: block;
 width: 30px;
 height: 30px;
 background: transparent;
 border-top: 2px solid #FFF;
 border-left: 2px solid #FFF;
 transform: rotate(45deg);
 margin: 25px auto;
 }

.pagetop a:hover {
 opacity : 0.3;
 }

.ghost-btn {
  margin: 60px auto 30px;
 }
.ghost-btn a {
  border-radius: 9px;
  border: 1px solid #5BB6A8;
  background: #5BB6A8;
  color: #FFFFFF;
  display: block;
  font-size: 18px;
  line-height: 1;
  margin: 30px auto;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  width: 360px;
 }

.ghost-btn a:hover {
  color: #5BB6A8;
  background: #FFFFFF;
  transition: 0.6s;
  }

.ghost-btn_w {
 margin: 0 60px;
 }
.ghost-btn_w a {
  border-radius: 9px;
  border: 1px solid #FFFFFF;
  background: #5BB6A8;
  color: #FFFFFF;
  display: block;
  font-size: 18px;
  line-height: 1;
  margin: 30px auto;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
 width: 360px;
 }

.ghost-btn_w a:hover {
  color: #5BB6A8;
  background: #FFFFFF;
  transition: 0.6s;
  }




footer {
 background: #336699;
 color: #FFFFFF;
 padding: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 }


/* ハンバーガーメニュー */
.gblnv_box{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  text-align: right;
  font-size: 150%;
  background: rgba(51,102,153, 0.9);
  }
 .gblnv_box span { color: #336699; }
 .gblnv_box a {margin: 15px 20px 10px;}
 .gblnv_block{
   background-color: rgba(51,102,153, 0.5);
   color: #FFFFFF;
   height: auto; width: auto;
   display: none;
   text-align: left;
   margin-top: -100px;
  padding-top: 100px;
   padding-right: 20px;
   padding-left: 20px; }
 .gblnv_block ul{padding: 5px;}
 .gblnv_block ul li{line-height: 180%;}
 .gblnv_block ul li a{color: #FFFFFF; line-height: 270%; }
 .gblnv_block ul li a:hover{color: #daa520;}
 .onanimation{display: block;}

 .menu-trigger,
 .menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
 .menu-trigger {position: relative; width: 30px; height: 23px;}
 .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #FFF;
  border-radius: 4px;
  }
 .menu-trigger span:nth-of-type(1) {
  top: 0;
  }
 .menu-trigger span:nth-of-type(2) {
  top: 10px;
  }
 .menu-trigger span:nth-of-type(3) {
  bottom: 0;
  }
 .menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
  }
 .menu-trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
  }
 @-webkit-keyframes active-menu-bar02 {
   	100% {
   		height: 0;
   	}
   }
 @keyframes active-menu-bar02 {
   	100% {
   		height: 0;
   	}
   }
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
  }
 /* ハンバーガーメニューここまで */

hr#separate {
 height: 0px;
 border: 1px solid #FFF;
 width: 30px;
 margin-left: 20px;
 margin-top: 20px;
 margin-bottom: 20px;
 text-align: right;
 }

/*===============================
　　　トップページ　
=================================*/
.swiper-container {
 width: 100%;
 max-height: 80vh;
 object-fit: cover;
 overflow: hidden;
 position: relative;
 z-index: 80;
 }
.top_logo {
  font-size: 10vmax;
  color: #FFFFFF;
  position: absolute;
  z-index: 60;
  max-width: 900px;
  text-align: center;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
 }

.top_logo img {
  max-height: 500px;
 }

h1 {
 font-family: "Poiret One", sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 200%;
 position: relative;
 padding: 1.5rem;
 letter-spacing: 3px;
 text-align: center;
 margin-bottom: 60px;
}
h1:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 2px;
  content: '';
  border-radius: 3px;
  background: #daa520;
}

h2 {
 font-weight: bold;
 font-size: 110%;
 margin-bottom: 10px;
}

.navigation {
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 background: ;
}
.navigation div {
 margin: 0;
 width: 180px;
}
.navigation span {
 font-family: "Poiret One", sans-serif;
 font-weight: 600;
 font-style: normal;
 display: block;
 font-size: 13px;
 color:	#daa520;
 margin-top: 5px;
 letter-spacing: 2px;
 text-transform: none;
}



.wrap {
 margin: 150px 20px;
}

.top_content {
 margin: 0 auto 90px;
 max-width: 720px;
 border: solid 1px #c0c0c0;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
}

.content_title {
 font-family: "Sacramento", cursive;
 font-weight: 400;
 font-style: normal;
 font-size: 39px;
 color: #daa520;
 background: #FFF;
 margin: -20px 9px 30px 30px;
 max-width: 270px;
 padding: 0 15px;
}
.top_flexbox {
 display: flex;
}

.top_img {
 min-width: 300px;
 padding: 0 0 30px 40px;
}
.top_img img {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.top_title {
 font-size: 18px;
 color: #555555;
 font-weight: bold;
 padding: 0 30px 10px 30px;
}
.top_txt {
 padding: 0 30px;
}

.niwaten {
 max-width: 720px;
 margin: 0 auto;
}
.niwaten_img {
 margin-bottom: 30px;
}

.about_flexbox {
 display: flex;

}

.about_txtbox {
 width: 50%;
 background: #336699;
 color: #FFFFFF;
 display: flex;
 justify-content: center;
 align-items: center;
}


.about_txt {
 max-width: 510px;
 line-height: 36px;
}
.about_txt a {
 color: #FFF;
}
/*スマホでのみ電話発信設定*/
@media (min-width: 600px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

.about_img {
 width: 50%;
}

.residence {
 margin-bottom: 20px;
}


.insta_frame {
 margin: 0 auto;
 max-width: 720px;
 height: 660px;
}

/*===============================
　　　  お問い合わせフォーム　
=================================*/

/* メールフォーム */
#mailform {
 max-width: 600px;
 margin: 0 auto 300px auto;
}
.form_label {
 padding: 60px 0 0 0;
 font-size: 120%;
}
.form_send {
 padding: 60px 0;
}
#mailform p {
 margin-left: 15px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"] {
 padding: 10px;
 font-family : inherit;
 font-size: 105%;
 width: 100% !important;
 border: none;
 border: 1px solid #336699;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 }

textarea {
 padding: 10px;
 font-family : inherit;
 width: 100% !important;
 height: 200px !important;
 border: none;
 border: 1px solid #336699;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 }

input[type="submit"] {
 font-family: inherit;
 border-radius: 9px;
 border: 1px solid #336699;
 background: #336699;
 color: #FFFFFF;
 display: block;
 font-size: 18px;
 line-height: 1;
 margin: 30px auto;
 padding: 15px 0;
 width: 100%;
 text-decoration: none;
 -webkit-appearance: none;/*iOSで丸くデフォ表示させない*/
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 }

input[type="submit"]:hover {
 color: #336699;
 background: #FFFFFF;
 transition: 0.6s;
 }

input:focus, textarea:focus {
 border-bottom: 2px solid #87cefa;
 outline: none;
 }
.checkboxItem {
 font-size: 120%;
 display: inline-flex;
 align-items: center;
 column-gap: 8px;
 line-height: 1;
 cursor: pointer;
 margin: 30px 10px;
}
#check {
appearance: none;
position: relative;
width: 18px;
height: 18px;
border: 1px solid #336699;
border-radius: 1px;
cursor: pointer;
 }

#check:checked::after {
content: "";
position: absolute;
top: -2px;
left: 0px;
width: 18px;
height: 9px;
border-bottom: 3px solid #336699;
border-left: 3px solid #336699;
transform: rotate(-45deg);
}


/*スパム対策チェックで送信ボタン有効*/
.submit-button {
 display: block;
 font-family: inherit;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 width: 100%;
 color: #FFF;
 border: 1px solid #336699;
 background: #336699;
 padding: 15px 0;
 margin: 30px auto;
 font-size : 120%;
 transition: all 0.3s;
 opacity: 0.6;
}
.submit-button.-active {
    opacity: 1;
}
.submit-button.-active:hover {
  color: #336699;
  background: #FFFFFF;
  transition: 0.6s;
  }
/*ここまで　スパム対策チェックで送信ボタン有効*/


 /*スパム対策@表示させない*/
 .mto i {
      font-style:normal;
  }
 .mto i:after {
      content:'@';
  }

.contact_wrap {
 max-width: 600px;
 margin: 120px auto;
 padding: 0 20px;
 font-size: 120%;
}
.mail_ok {
 font-size: 130%;
 font-weight: bold;
 letter-spacing: 2px;
 position: relative;
 padding: 0.5rem;
 margin-bottom: 30px;
}
.mail_ok:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #daa520, #daa520 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #daa520, #daa520 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pageback {
 text-align: center;
 margin-top: 90px;
 padding: 20px 13px;
 border: solid 1px;
 background: #336699;
 color: #FFF;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 }
.pageback:hover {
 color: #336999;
 background: #FFF;
 transition: 0.6s;
 }



/*=========================================
　レスポンシブ-スタイル　スマホ・タブレット共通
==========================================*/

/*==  1024px以上なら  ここから==*/
@media screen and (min-width:1024px) {



 /*1024px以上なら　ここまで*/ }


/*==  1023px以下なら  ここから==*/
@media screen and (max-width: 1023px) {

.swiper-container img {
 height: 60vh;
 object-fit: cover;
 overflow: hidden;
 }
.top_logo {
  top: 33%;
}
.top_logo img {
  max-height: 330px;
 }
.top_flexbox {
 flex-direction: column;
 justify-content: center;
 }
.top_img {
 max-width: 400px;
 margin: 0 auto;
 padding: 0 10px 0 10px;
 }
.top_title {
 font-size: 20px;
 padding: 30px 30px 10px 30px;
}

.top_txt {
 font-size: 20px;
 padding: 0 30px 40px 30px;
 }
.niwaten_img {
 margin-bottom: 0px;
 }
.about_flexbox {
 flex-direction: column-reverse;
 justify-content: center;

 }
.about_txtbox {
 width: 100%;
 margin-top: -30px;
 padding-top: 100px;
 padding-bottom: 100px;
 font-size: 20px;
 }

.about_img {
 width: 100%;
 }


/*1023px以下なら*ここまで*/ }


/*==  601px以上なら  ここから==*/
@media screen and (min-width:601px) {



/*601px以上なら　ここまで*/ }

/*==  600px以下なら  ここから==*/
@media screen and (max-width: 600px) {

.navigation {
 display: none;;
}

.content_title {
 text-align: center;
 margin: -20px auto 30px auto;
 padding: 0 0;
}
.top_title {
 padding: 10px 10px 10px 15px;
}
.top_txt {
 padding: 0 15px 30px 15px;
}
.about_txt {
 padding: 0 20px 0 30px;
}
#mailform {
 margin: -30px auto 200px auto;
}
#check {
width: 30px;
height: 25px;
 }
#check:checked::after {
top: -4px;
width: 24px;
height: 15px;
}


/*600px以下なら*ここまで*/ }


/*==  450px以下なら  ここから==*/
@media screen and (max-width: 450px) {

.insta_frame {
 height: 400px;
}

/*450px以下なら*ここまで*/ }