/*============================
  sub-visual
============================*/
.main {
  position: relative;
}
.main::before {
 position: absolute;
  content:"";
  background: #efdcdd;
  width:100%;
  height:100%;
  top:50px;
  left:0;
  z-index: -1;
}
.sub_mv {
  height: 200px;
  width:100%;
  position: relative;
  background: url(../images/sub_mv.png) no-repeat top center / cover ;
  /*margin-top:50px;*/
  margin-left:auto;
}
.submain_ttl {
  position: relative;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .1em;
  display: block;
  text-align:center;
  font-family: "Zen Maru Gothic", sans-serif;
   color:#2a1400;
  text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
              -1px 1px 0 #fff, 1px -1px 0 #fff,
              0px 1px 0 #fff,  0-1px 0 #fff,
              -1px 0 0 #fff, 1px 0 0 #fff;
}
/*.submain_ttl:before {
  position: absolute;
  content:"";
  background:#FFC900;
  display: inline-block;
  width:100%;
  height:10px;
  bottom:0;
  left:0;
  z-index: -1;*/
}
.submain_txt {
  font-weight: 500;
  letter-spacing: .2em;
  display: block;
  font-weight:600;
}
.submain_box{
  position:absolute;
  display: block;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width:max-content;
 
}
@media screen and (min-width: 768px) {
.sub_mv {
  height: 350px;
}
.submain_ttl {
  font-size:60px;
}
  .submain_ttl:before {
  height:20px;
}
.submain_txt {
  font-size:18px;
}
}
@media screen and (min-width: 1024px) {
.sub_mv{
  height: 500px;
}
.submain_box{
  top: 50%;
}
.main::before {
 position: absolute;
  content:"";
  background: #efdcdd;
  width:100%;
  height:100%;
  top:50px;
  left:0;
}
}
@media screen and (min-width: 1280px) {
.sub_mv{
  height: 600px;
}
.submain_ttl {
  font-size:80px;
}
.submain_txt {
  font-size:20px;
}
}
/*----------------------------
 bread_crumb_list
-----------------------------*/
.breadcrumb{
  font-size: 10px;
  margin-bottom:0;
  background: url(../images/sub_bg.png) no-repeat top center / cover ;
}
.breadcrumb p{
  margin-left: auto;
}
.breadcrumb a{
color: #7d7d7d;
}
@media screen and (min-width:768px) {
.breadcrumb{
font-size: 14px;
}
}
@media screen and (min-width:1024px) {
.breadcrumb p{
  margin-right:20px;
}
}
  
/* anker link */
.anker__items{
column-gap: 4%;
  row-gap: 10px;
}
.anker__item{
width: 100%;
height: 45px;
position: relative;
display: block;
margin-bottom:10px;
}
.anker__item a,.anker__item a p{
display: block;
text-align: center;
line-height: 45px;
color:#fff;
transition: all .5s;
background:#E60012;
  border-radius: 30px;

}
/*.anker__item a:hover,.anker__item a p:hover{
background: #7f1210;
color:#fff;
}*/
@media screen and (min-width:525px) {
.anker__items{
  row-gap: 10px;
}
.anker__item{
  width: 30%;
}
}
@media screen and (min-width:1024px) {
.anker__item{
  width: 30%;
}
}

.back_btn a{
    background: #8b0000;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
  border-radius: 30px;
  }

.back_btn {
    color: #fff;
  }


/* 背景 */
.sub_bg {
  position:relative;
  background:url(../images/sub_bg.png) no-repeat top center / cover ;
}

#item01,#item02,#item03,#item04{
 margin-top:-100px;
 padding-top:100px;
}
@media screen and (min-width:1024px) {
#item01,#item02,#item03,#item04{
 margin-top:-200px;
 padding-top:200px;
}
}

/*============================
 contact
============================*/
.con_wh{
  padding:30px;
  background:#fff;
}
.con_area{
  column-gap: 2%;
  row-gap: 20px;
}
.con_list{
  width:100%;
  max-width:350px;
}
.con_ttl{
  font-size:18px;
  font-weight:bold;
}
@media screen and (min-width:768px) {
.con_list{
  width:48%;
}
}
@media screen and (min-width:1024px) {
.con_ttl{
  font-size:24px;
  font-weight:bold;
}
}

/*============================　
　　about
============================*/
.access_list:not(:last-child){
  margin-bottom: 20px;
}

/* -----Table----- */
.table01 .tr{
  display: block;
}
.table01 .th{
  width: 100%;
  padding:20px 0 0px 15px;
  border-bottom:none;
  font-weight:bolder;
}
.table01 .td{
  width: 100%;
  padding: 5px 0 5px 15px;
  border-bottom: 1px solid #E60012;
}
@media screen and (min-width:768px) {
.access_area{
  column-gap: 4%;
  row-gap: 20px;
}
.access_list{
  width:48%;
}
/* -----Table----- */
.table01 .tr{
display: flex;
justify-content: flex-start;
}
.table01 .th{
width: 34%;
padding: 20px;
line-height: 1.6;
border-bottom: 2px solid #E60012;
}
.table01 .td{
width: 80%;
padding: 20px;
line-height: 1.6;
border-bottom: 1px solid #FFC900;
} 
}
@media screen and (min-width:1024px) {
.access_area{
  column-gap: 1%;
  row-gap: 20px;
}
.access_list{
  width:49%;
}
.table01 .th{
width: 40%;
padding: 20px;
line-height: 1.6;
border-bottom: 2px solid #E60012;
}
  
}

/*============================　
　　service05
============================*/
/* flexbox 大きめ*/
.flex__img {
  flex: 1;
  /*margin-left: calc(50% - 50vw);*/
  margin-right: 2%;
  position: relative;
  max-width: 800px;
}

.flex__img.flex__right {
  flex: 1;
  /*margin-right: calc(50% - 50vw);*/
  margin-left: 2%;
  position: relative;
  max-width: 800px;
}

.flex__text {
  width: 50%;
}

.commitment__ttl {
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  position: relative;
  border-bottom: 2px solid #E60012;
  /*padding-left: 1.5rem;*/
}

.commitment__ttl strong {
  display: block;
  font-size: 30px;
  font-weight: normal;
  margin-bottom: 1rem;
  color: #a70314;
  margin-left: -1.5rem;
}

.btn-small {
  margin: 0 auto;
}

.flexbox {
  background: url(../images/sb_textbox_bg.png) no-repeat top center / cover ;
  color: #fff;
  padding: 30px 50px;
}

@media screen and (max-width: 1180px) {
  .commitment__ttl {
    font-size: 20px;
  }

  .commitment__ttl strong {
    font-size: 26px;
  }

}


@media screen and (max-width: 768px) {
  .flex__img {
    flex: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .flex__img.flex__right {
    flex: auto;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
  }

  .flex__text {
    width: 100%;
  }

  .commitment__ttl {
    font-size: 16px;
    margin-bottom: 1rem;
  }

  .commitment__ttl strong {
    font-size: 20px;
  }
  
    .flexbox {
  padding: 10px;
}
}

@media screen and (min-width: 768px) {
  .commitment__ttl {
    font-size: 18px;
  }
}

@media screen and (min-width: 1024px) {
  .commitment__ttl {
    font-size: 20px;
  }
}

/*============================　
　　service04
============================*/
/* flexbox 小さめ画像あり*/
.textBox_img{
  background: url(../images/sb_textbox_img_bg.png) no-repeat top center / cover ;
  padding:20px;
}
.textBox_img .img{
  width: 100%;
  margin-bottom: 20px;
  position:relative;
}
.textBox_img .textarea {
  width: 100%;
} 

.contact_list{
margin-bottom:6px;
}

@media screen and (min-width:1024px) {
/* flexbox_img */
.textBox_img .img{
  width: 30%;
  margin-bottom: 0px;
  position:relative;
} 
.textBox_img .textarea {
  width: 68%;
}
.contact_area{
  display:block;
}
.contact_list{
  width:60%;
  margin-inline: auto;
}
.contact_list:not(:last-child){
  margin-bottom: 20px;
}
@media screen and (min-width:768px) {
.contact_area{
  display:flex;
  column-gap: 4%;
  align-items: center;
}
.contact_list{
  width:280px;
  margin-inline: 0;
}
.contact_list:not(:last-child){
  margin-bottom: 0px;
}
}
}
/* flexbox 宿泊プラン */
.flexbox_ser02 {
  background: url(../images/sb_textbox_bg.png) no-repeat top center / cover ;
  color: #fff;
  padding: 30px 50px;
}
.flex__img_ser02 {
    /*flex: auto;*/
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
  padding:10px;
}
  .flex__img_ser02 {
    /*flex: auto;*/
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .flex__text_ser02 {
    width: 100%;
  }
    .flexbox_ser02 {
  padding: 10px;
}
/*============================
sub_swiper
============================*/
.subguide_shop {width:100%;margin:0 auto;margin-bottom:20px;}
.sub_rec {
    margin-top: 0px;
}
.sub_rec__imgwrap {
    position: relative;
}
.sub_rec__img img {
    object-fit: cover;
    position: relative;
}
.sub_rec__img {
    position: relative;
    margin: 0 3%;
    width: 95%;
}
/* swiper */
.sub_rec__swiper-area {
    position: relative;
}
.sub_rec .swiper-slide-active .swiper__imgwrap img,
.sub_rec .swiper-slide-duplicate-active .swiper__imgwrap img,
.sub_rec .swiper-slide-prev .swiper__imgwrap img {
    animation: zoom-out 10s linear 0s 1 normal both;
}
@keyframes zoom-out {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
.sub_rec .swiper-pagination {
    left: 50% !important;
    bottom: -20px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    transform: translate(-50%);
}
.sub_rec .swiper-pagination-bullet {
    display: block;
    width: 25px;
    height: 5px;
    z-index: 99;
    background: #fff;
    border-radius: 0 !important;
    margin: 0 5px !important;
    opacity: 1;
}
.sub_rec .swiper-pagination-bullet-active {
    opacity: 1;
    background: #5d040a;
}
@media screen and (min-width:768px) {
    .sub_rec {
        margin-top: 0px;
        padding-bottom: 0px;
    }
    .sub_rec__img {
        max-width: 100%;
        margin: 0 1%;
        width: 41.25%;
    }
}
@media screen and (min-width:1025px) {
    .sub_rec {
        margin-top: 0px;
        padding-bottom: 0px;
    }
    .sub_rec__img {
        max-width: 100%;
        margin: 0 1%;
        width: 41.25%;
    }
}
/*============================　
　　service03
============================*/
/* flexbox 小さめ白背景*/
.textBox_w{
  background: #FFF;
  border:2px solid #000;
  padding:20px;
}
.textBox_w .img{
  width: 100%;
  margin-bottom: 20px;
  position:relative;
}
.textBox_w .textarea {
  width: 100%;
} 

@media screen and (min-width:1024px) {
/* flexbox_img */
.textBox_w .img{
  width: 30%;
  margin-bottom: 0px;
  position:relative;
} 
.textBox_w .textarea {
  width: 68%;
}
}
.cont01__illu {max-width: 400px;width: 30%;top: 7%;right: 7%;transform: translate(0, -50%);z-index: 9;pointer-events: none;}
@media screen and (max-width:1280px) {.cont01__illu {width: 28%;top: 6%;right: 3%;}}
@media screen and (max-width:1024px) {.cont01__illu {width: 28%;top: 5%;right: 3%;}}
@media screen and (max-width:768px) {.cont01__illu {width: 40%;top: 4%;}}
@media screen and (max-width:414px) {.cont01__illu {width: 60%;top: 4%;}}
@media screen and (max-width:375px) {.cont01__illu {width: 60%;top: 4%;}}

/*============================
 service01
============================*/
.menu_flex{
  width:100%;
  background:#fff;
  padding:30px;
  height:fit-content;
}
.menu_flex:not(:last-child){
 margin-bottom:20px;
}
/*.menu_list{
  border-bottom: 1px solid #b69662;
  padding-bottom: 10px;
}*/
.menu_name{
  width: 100%;
  font-size:15px;
  font-weight:bold;
}
.menu_name02{
  width: 100%;
  font-size:15px;
  font-weight:normal;
  margin-left:16px;
}
.line{
    background: radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    background: -ms-radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    content: '';
    display: flex;
    flex: 1 1 auto;
    height: 5px;
    margin: 0 10px;
}
.txt_line{
  font-size:18px;
  font-weight:bold;
  display: inline-block;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.txt_line::before{
  position: absolute;
  content:"";
  background:#8b0000;
  display: inline-block;
  width:100%;
  height:10px;
  bottom:0;
  left:0;
  z-index: -1;
}

@media screen and (min-width:768px) {
.menu_flex{
  width:100%;
}
.course_textBox .img{
  width:35%;
  margin-bottom:0px;
}
.course_textBox .textarea{
  width:62%;
}
}
@media screen and (min-width:1024px) {
/*.menu_list{
  border-bottom: 1px solid #b69662;
  padding-bottom: 10px;
}*/
.menu_name{
  width: 100%;
  font-size:16px;
  font-weight:bold;
}
  .menu_name02{
  width: 100%;
  font-size:15px;
  font-weight:normal;
}
.line{
    background: radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    background: -ms-radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    content: '';
    display: flex;
    flex: 1 1 auto;
    height: 5px;
    margin: 0 10px;
}
.txt_line{
  font-size:18px;
  font-weight:bold;
  display: inline-block;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.txt_line::before{
  position: absolute;
  content:"";
  background:#8b0000;
  display: inline-block;
  width:100%;
  height:10px;
  bottom:0;
  left:0;
  z-index: -1;
}
@media screen and (min-width:768px) {
.menu_name{
  width:auto;
}
  .menu_name02{
  width:auto;
}
}
@media screen and (min-width:1024px) {
.menu_name{
  font-size:16px;
}
  .menu_name02{
  font-size:16px;
}
.menu_ttl{
  font-size: 24px;
}
}