@charset "utf-8";
/* --------------------------------------------------
    ボタン類
-------------------------------------------------- */
.btn01 a {
  display: inline-block;
  padding: 5px 0;
  position: relative;
}
.btn01 a::before, .btn01 a::after {
  width: 100%;
  height: 1px;
  content: '';
  background: #ea5404;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.2s;
}
.btn01 a::after {
  width: 0;
}
.btn01 a:hover {
  text-decoration: none !important;
}
.btn01 a:hover::before {
  width: 0;
  left: 100%;
}
.btn01 a:hover::after {
  width: 100%;
  transition-delay: 0.2s;
}
/* 外部リンク */
.btn01.outlink span{
  position: relative;
}
.btn01.outlink span::after{
  width: 12px;
  height: 12px;
  content: '';
  background: url(../images/common/icon_outlink.png) no-repeat center/cover;
  position: absolute;
  top: -10px;
  right: -10px;
}
/* --------------------------------------------------
    アニメーション共通
-------------------------------------------------- */
.animated, .animated *, .animated::before, .animated::after, .animated *::before, .animated *::after {
  -webkit-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}
.slideUp {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
}
.slideLeft {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
}
.slideRight {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
}
/* --------------------------------------------------
    Tableレイアウト
-------------------------------------------------- */
table {
  width: 100%;
}
th, td {
  padding: 15px;
  border: #111 1px solid;
}
th {
  background: #111;
  color: #fff;
}
tr:not(:last-child) th {
  border-bottom-color: #fff;
}
.table01 th {
  width: 30%;
  text-align: center;
}
@media screen and (max-width:640px) {
  th, td {
    padding: 10px;
  }
  .table01 {
    margin: 0 auto;
  }
  .table01 th, .table01 td {
    width: auto;
    display: block;
    border-top: none;
  }
  .table02 {
    display: block;
    position: relative;
  }
  .table02 th,
  .table02 td {
    width: 100% !important;
    display: block;
  }
  .table02 thead {
    display: block;
    float: left;
    overflow-x: scroll;
  }
  .table02 thead th {
    width: auto;
    display: block;
  }
  .table02 tbody {
    width: auto;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .table02 tbody tr {
    display: inline-block;
    margin: 0 -2px;
  }
  .table02 tbody td {
    display: block;
  }
  /* table横スクロール */
  .scroll {
    font-size: 14px;
    overflow: auto;
    white-space: nowrap;
  }
  .scroll::-webkit-scrollbar {
   height: 8px;
  }
  .scroll::-webkit-scrollbar-track {
   background: #fff;
  }
  .scroll::-webkit-scrollbar-thumb {
   background: #222;
  }
}
/* --------------------------------------------------
    【注意書き】
-------------------------------------------------- */
.notes > li {
  text-indent: -1em;
  padding-left: 1em;
}
.notes > li:before {
  content: '※';
}
/* --------------------------------------------------
    【リストデザイン】
-------------------------------------------------- */
.disc > li {
  list-style: disc;
  margin-left: 1.5em;
}
li .disc > li {
  text-indent: 0;
}
.decimal > li {
  list-style: decimal;
  margin-left: 1.5em;
}
li .decimal > li {
  text-indent: 0;
}
/* 括弧付数字 */
.paren {
  counter-reset: cnt;
}
.paren > li {
  padding-left: 1.6em;
  position: relative;
}
.paren > li::before{
  counter-increment: cnt;
  content: '(' counter(cnt) ') ';
  position: absolute;
  top: 0;
  left: 0;
}
/* 丸数字 */
.bracket {
  counter-reset: cnt;
}
.bracket > li {
  padding-left: 1.5em;
  position: relative;
}
li .bracket > li {
  text-indent: 0;
}
.bracket > li::before{
  width: 1.2em;
  height: 1.2em;
  counter-increment: cnt;
  content: counter(cnt);
  font-size: 80%;
  display: block;
  text-align: center;
  line-height: 1em;
  border: 1px solid;
  border-radius: 50%;
  position: absolute;
  top: 0.5em;
  left: 0;
}
/* --------------------------------------------
  【Flexbox】
-------------------------------------------- */
.flex {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.flex-inline {
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
}
.flex-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-end {
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}
.flex-center {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}
.flex-between {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}
.flex-around {
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}
.flex-evenly {
  -webkit-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  justify-content: space-evenly;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.flex .flex-col2 {
  width: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
}
.flex .flex-col3 {
  width: 33.33333333%;
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
}
.flex .flex-col4 {
  width: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
}
.flex img:not([data-src]),
.flex img.lazy-loaded {
  height: auto;
}
/* --------------------------------------------------
    【横並びリスト】
-------------------------------------------------- */
.col > li {
  display: inline-block;
  vertical-align: top;
}
.col2 > li {
  width: 580px;
  margin: 40px 40px 0 0;
}
.col2 > li:nth-child(2n) {
  margin-right: 0;
}
.col3 > li {
  width: 380px;
  margin: 30px 30px 0 0;
}
.col3 > li:nth-child(3n) {
  margin-right: 0;
}
.col4 > li {
  width: 285px;
  margin: 20px 20px 0 0;
}
.col4 > li:nth-child(4n) {
  margin-right: 0;
}
.col2 > li:nth-child(-n+2),
.col3 > li:nth-child(-n+3),
.col4 > li:nth-child(-n+4) {
  margin-top: 0;
}
@media screen and (max-width: 640px) {
  .sp_col > li {
    width: auto !important;
    display: block;
    margin: 0 auto 20px !important;
  }
  .sp_col > li:last-child {
    margin-bottom: 0 !important;
  }
  .sp_col2 > li {
    width: 48% !important;
    margin: 4% 4% 0 0 !important;
  }
  .sp_col2 > li:nth-child(-n+2) {
    margin-top: 0 !important;
  }
  .sp_col2 > li:nth-child(2n) {
    margin-right: 0 !important;
  }
}
/* --------------------------------------------------
    【画像フロート】
-------------------------------------------------- */
.imgBoxL::after,
.imgBoxR::after {
  content: '';
  display: block;
  clear: both;
}
.imgBoxL .txt,
.imgBoxR .img {
  float: right;
}
.imgBoxR .txt,
.imgBoxL .img {
  float: left;
}
.imgBoxL img,
.imgBoxR img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 640px) {
  .imgBoxL .txt,
  .imgBoxR .txt,
  .imgBoxL .img,
  .imgBoxR .img {
    width: auto !important;
    float: none;
  }
  .imgBoxL img,
  .imgBoxR img {
    display: block;
    margin: 0 auto;
  }
}
/* --------------------------------------------------
    【PostLink】
-------------------------------------------------- */
.post-link {
  margin-top: 40px;
}
.post-link .prev, .post-link .next {
  width: 200px;
}
.post-link a {
  background: #fff;
  color: #222;
  display: block;
  text-align: center;
  padding: 10px 0;
  border: #ccc 1px solid;
  position: relative;
}
.post-link a::before {
  width: 10px;
  height: 10px;
  content: '';
  display: block;
  border-top: #222 1px solid;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.3s;
}
.post-link .prev a::before {
  border-left: #222 1px solid;
  left: 20px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.post-link .next a::before {
  border-right: #222 1px solid;
  right: 20px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.post-link a:hover {
  text-decoration: none !important;
}
.post-link .prev a:hover::before {
  left: 15px;
}
.post-link .next a:hover::before {
  right: 15px;
}
@media screen and (max-width: 640px) {
  .post-link .prev, .post-link .next {
    width: 40%;
    font-size: 14px;
  }
  .post-link .prev a {
    padding-left: 15px;
  }
  .post-link .next a {
    padding-right: 15px;
  }
  .post-link a::before {
    width: 8px;
    height: 8px;
  }
}
/* --------------------------------------------------
    【PageNavi】
-------------------------------------------------- */
.wp-pagenavi {
  text-align: center;
  margin-top: 60px;
  position: relative
}
.wp-pagenavi a,
.wp-pagenavi span {
  display: inline-block;
  padding: 8px 16px;
  border: #222 1px solid;
  border-radius: 3px
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
  background: #222;
  color: #fff;
  font-weight: normal;
  text-decoration: none !important;
}
.wp-pagenavi .pages {
  font-size: 14px;
  border: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: auto
}
.wp-pagenavi .pages:after {
  content: 'ページ目'
}
.wp-pagenavi .first,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .last {
  font-size: 0;
}
.wp-pagenavi .first::before,
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before,
.wp-pagenavi .last::before {
  font-size: 16px;
}
.wp-pagenavi .first::before {
  content: '« 先頭';
}
.wp-pagenavi .previouspostslink::before {
  content: '‹ 前へ';
}
.wp-pagenavi .nextpostslink::before {
  content: '次へ ›';
}
.wp-pagenavi .last::before {
  content: '最後 »';
}
@media screen and (max-width: 640px) {
  .wp-pagenavi a,
  .wp-pagenavi span {
    display: none
  }
  .wp-pagenavi .first,
  .wp-pagenavi .previouspostslink,
  .wp-pagenavi .nextpostslink,
  .wp-pagenavi .last {
    display: inline-block
  }
  .wp-pagenavi .first::before,
  .wp-pagenavi .previouspostslink::before,
  .wp-pagenavi .nextpostslink::before,
  .wp-pagenavi .last::before {
    font-size: 14px;
  }
  .wp-pagenavi .pages {
    font-size: 12px;
    display: block;
    padding: 0
  }
}
/* --------------------------------------------------
    【メールフォーム送信ボタン】
-------------------------------------------------- */
.mfp_element_submit,
.mfp_element_reset,
.mfp_element_button {
  background: #222;
  font-size: inherit;
  font-family: inherit;
}
#mfp_button_cancel {
  background: #aaa;
}
/* --------------------------------------------------
    ぱんくず
-------------------------------------------------- */
#breadcrumb {
  width: 1200px;
  font-size: 11px;
  text-align: right;
  padding: 10px 0;
  margin: 0 auto 40px;
}
@media screen and (max-width: 640px) {
  #breadcrumb {
    display: none;
  }
}
/* --------------------------------------------------
    PC・スマホ切り替え
-------------------------------------------------- */
.mb {
  display: none !important;
}
.pcBlock {
  display: block;
}
@media screen and (max-width: 640px) {
  .pc {
    display: none !important;
  }
  .mb {
    display: initial !important;
  }
  .pcBlock {
    display: initial !important;
  }
  .mbBlock {
    display: block !important;
  }
}

/* --------------------------------------------------
    【ビジュアルエディタ対応】
-------------------------------------------------- */
/* 基本 */
strong {
  font-weight: bold;
}
em {
  font-style: italic;
  font-family: "ＭＳ Ｐゴシック", "sans-serif";
}
blockquote {
  background: #f5f5f5;
  padding: 1.5em;
  margin: 1.5em;
  border: #ccc 1px solid;
  border-radius: 10px;
  position: relative;
}
blockquote::before,
blockquote::after {
  font-size: 4em;
  font-family: "ＭＳ Ｐゴシック", sans-serif;
  opacity: 0.2;
  position: absolute;
}
blockquote::before {
  top: -1.2rem;
  left: 0.2rem;
  content: '“';
}
blockquote::after{
  bottom: -3.8rem;
  right: 0.2rem;
  content: '”';
}
blockquote cite {
  font-size: 0.8em;
  opacity: 0.5;
}
hr {
  margin: 1.5em 0;
}
#post p {
  margin-bottom: 1.5em;
}
#post ul {
  list-style: disc;
  margin-left: 1.5em;
}
#post ol {
  list-style: decimal;
  margin-left: 1.5em;
}
/* エディタ対応ページ表示 */
.wp-block-gallery {
  margin: 0 !important;
}
.wp-block-table {
  margin: 1.5em 0;
}
@media screen and (max-width: 640px) {
  /* 基本 */
  .alignleft ,
  .alignright {
    float: none !important;
    margin: 0 auto !important;
  }
}
/* --------------------------------------------------
    見出し
    ※editor-style.cssにもコピペ必須
-------------------------------------------------- */
/* h2 */
h2.h2, #post h1.h1 {
  font-size: 30px;
  padding: 15px 10px 0 40px;
  margin: 80px 0 40px;
  border-bottom: #ea5404 2px solid;
  position: relative;
}
h2.h2::before, #post h1.h1::before {
  width: 35px;
  height: 45px;
  content: '';
  background: url("../images/common/icon_flower.png") no-repeat center / cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
h2.h2:nth-of-type(1), #post h1.h1 {
  margin-top: 0;
}
/* h3 */
h3.h3, #post h2 {
  background: #fff;
  font-size: 24px;
  padding-left: 10px;
  margin: 40px 0 20px;
  border-left: #ea5404 12px ridge;
}
/* h4 */
h4.h4,
#post h3 {
  
}
@media screen and (max-width: 640px) {
  /* h2 */
  h2.h2, #post h1.h1 {
    font-size: 26px;
    padding: 10px 10px 0 30px;
  }
  h2.h2::before, #post h1.h1::before {
    width: 25px;
    height: 32px;
  }
  /* h3 */
  h3.h3, #post h2 {
    font-size: 22px;
    padding: 5px 10px;
    border-left-width: 8px;
  }
}
/* --------------------------------------------------
    【メインタイトル】
-------------------------------------------------- */
#mainTitle {
  color: #fff;
  font-size: 22px;
  text-align: center;
  border-top: #333 1px solid;
}
#mainTitle .inner {
  padding: 40px 0;
}
@media screen and (max-width: 640px) {
  #mainTitle {
    font-size: 18px;
    text-align: left;
  }
  #mainTitle .inner {
    padding: 20px 0;
  }
}
/* --------------------------------------------------
    【下層共通】
-------------------------------------------------- */
.gal > figure {
  flex: 0 0 580px;
}
.gal > figure:not(:nth-child(-n+2)) {
  margin-top: 40px;
}
.video_wrap {
  padding-top: 56.25%;
  position: relative;
}
.video_wrap video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#mailformpro .must_read p {
  background: #fafafa;
  font-size: 14px;
  display: inline-block;
  padding: 10px;
  border: #aaa 1px dashed;
}
@media screen and (max-width: 640px) {
  .gal > figure {
    margin: 0 auto 20px !important;
  }
  .gal > figure:last-child {
    margin-bottom: 0 !important;
  }
  .gmap iframe {
    height: 300px;
  }
}
/* --------------------------------------------------
    【宿泊プラン・料金】
-------------------------------------------------- */
#plan .planbox {
  flex: 0 0 580px;
  margin-bottom: 40px;
}
#plan .planbox h3 {
  background: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 1.5;
  padding: 10px;
  margin: 20px 0 10px;
  border: #ea5404 2px double;
}
#plan .planbox h3 span {
  color: #ea5404;
  font-size: 16px;
  display: block;
}
#plan .planbox .price {
  font-size: 18px;
}
#plan .planbox .fcRed span {
  font-size: 24px;
}
#plan .menu > li {
  flex: 0 0 380px;
  margin-top: 20px;
}
#plan .menu dl dt {
  background: #111;
  color: #fff;
  padding: 5px 10px;
}
#plan .menu dl dd {
  background: #fff;
  padding: 10px;
  border: #111 1px solid;
}
#plan .lunch > li {
  flex: 0 0 580px;
  background: #fff;
  padding: 20px 40px;
  border: #ea5404 1px double;
}
#plan .lunch h3 {
  background: #ea5404;
  color: #fff;
  font-size: 22px;
  text-align: center;
  line-height: 1.5;
  padding: 10px;
  margin-bottom: 20px;
  border: #fff 2px double;
}
#plan .lunch .fcRed span {
  font-size: 20px;
}
@media screen and (max-width: 640px) {
  #plan .planbox h3 {
    font-size: 20px;
    text-align: left;
  }
  #plan .planbox h3 span {
    font-size: 14px;
  }
  #plan .menu dl dd {
    padding: 10px;
    border: #111 1px solid;
  }
  #plan .lunch > li {
    padding: 10px;
    margin-bottom: 20px;
  }
  #plan .lunch h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
/* --------------------------------------------------
    【温泉】
-------------------------------------------------- */
#hotspring .intro h3 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 20px;
}
#hotspring .intro h3 span {
  display: inline-block;
  padding: 0 20px;
  position: relative;
}
#hotspring .intro h3 span::before, #hotspring .intro h3 span::after {
  width: 10px;
  height: 100%;
  content: '';
  border: #444 2px solid;
  border-right: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}
#hotspring .intro h3 span::after {
  border: #444 2px solid;
  border-left: none;
  left: auto;
  right: 0;
}
@media screen and (max-width: 640px) {
  #hotspring .intro h3 {
    font-size: 24px;
  }
}
/* --------------------------------------------------
    【料理】
-------------------------------------------------- */
#cuisine .gal > figure {
  flex: 0 0 380px;
  margin: 0
}
#cuisine .cuisineBox {
  flex: auto;
}
#cuisine .cuisineBox h3 {
  font-size: 24px;
  padding: 10px;
  margin: 40px auto 20px;
  border-top: #ea5404 2px solid;
  border-bottom: #ea5404 2px solid;
}
#cuisine .cuisineBox h3 span {
  background: #ea5404;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  padding: 0 10px;
  margin-right: 10px;
}
#cuisine .cuisineBox .course li {
  font-size: 14px;
  padding-left: 15px;
  position: relative;
}
#cuisine .cuisineBox .course li::before {
  width: 10px;
  height: 10px;
  content: '';
  display: block;
  border: #111 1px solid;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 0;
}
@media screen and (max-width: 640px) {
  #cuisine .cuisineBox {
    margin: 0 !important;
  }
  #cuisine .cuisineBox h3 {
    font-size: 20px;
  }
  #cuisine .cuisineBox h3 span {
    font-size: 14px;
    flex: 0 0 24px;
    text-align: center;
    padding: 5px;
  }
  #cuisine .cuisineBox .course li {
    font-size: 14px;
  }
}
/* --------------------------------------------------
    【アクセス】
-------------------------------------------------- */
#access dl dd ul li {
  padding-left: 20px;
  position: relative;
}
#access dl dd ul li::before {
  width: 15px;
  height: 1px;
  content: '';
  background: #111;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
@media screen and (max-width: 640px) {
  #access .flex-col3 {
    width: auto;
    margin-top: 20px;
  }
}
/* --------------------------------------------------
    【釣りのご案内】
-------------------------------------------------- */
#fishing .price, #fishing .price th {
  width: auto;
}
#fishing .price td {
  text-align: right;
}
#fishing .gal > figure {
  flex: 0 0 380px;
  margin: 0;
}
#fishing table.season {
  table-layout: fixed;
  border: #111 1px solid;
  border-collapse: separate;
  border-spacing: 2px;
}
#fishing table.season th, #fishing table.season td {
  padding: 5px;
  border: none;
}
#fishing table.season td.season01 {
  background: #ea5404;
}
#fishing table.season td.season02 {
  background: #fdb58e;
}
@media screen and (max-width: 640px) {
  #fishing .price {
    width: 100%;
  }
  #fishing .flex [class^="flex-col"] {
    width: auto;
  }
  #fishing table.season {
    width: auto;
    font-size: 12px;
  }
  #fishing table.season thead th {
    min-width: 40px;
  }
  #fishing table.season tbody th {
    padding: 0 10px;
  }
}
/* --------------------------------------------------
    【リラクゼーションのご案内】
-------------------------------------------------- */
#relaxation .relaxationbox01 {
    flex: 0 0 580px;
    margin-bottom: 40px;
}
#relaxation .relaxationbox02 {
    flex: 0 0 380px;
    margin-bottom: 40px;
}
#relaxation .relaxationbox01 h3,
#relaxation .relaxationbox02 h3{
    background: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 1.5;
    padding: 10px;
    margin: 20px 0 10px;
    border: #ea5404 2px double;
}
#relaxation .relaxationbox01 .fcRed span,
#relaxation .relaxationbox02 .fcRed span{
    font-size: 24px;
}
#relaxation .recommend {
    background: #ea5404;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    padding:3px 5px 5px;
    margin-left: 20px;
    font-size: 14px;
    line-height: 1;
}
#relaxation .hp p {
    padding-left: 2.5em;
}
#relaxation .hp p:first-child {
    text-indent: -2.5em;
}
#relaxation .hp p:first-child::before {
    content: "HP：";
}
#relaxation .hp a {
    text-decoration: underline;
    color: #0066c0;
}
#relaxation .hp a:hover {
    opacity: 0.8;
}
#relaxation .hp .outlink {
    position: relative;
}
#relaxation .hp .outlink::after {
    width: 12px;
    height: 12px;
    content: '';
    background: url(../images/common/icon_outlink.png) no-repeat center/cover;
    position: absolute;
    top: -10px;
    right: -10px;
}

/* --------------------------------------------------
    【宿泊予約】
-------------------------------------------------- */
#reserve .phoneWrap {
  width: 280px;
  background: #111;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 15px;
  margin: 0 auto;
  position: relative;
}
#reserve .phoneWrap .tel {
  background: url("../images/common/icon_phone.png") no-repeat left center / 15px auto;
  font-size: 24px;
  display: inline-block;
  line-height: 1.5;
  padding-left: 20px;
  margin-right: 10px;
}
#reserve .phoneWrap .tel a {
  color: #fff;
}
/* --------------------------------------------------
    【サイトマップ】
-------------------------------------------------- */
#sitemap .sitemap01 li {
  padding: 15px;
  border-top: #ccc 1px solid;
}
#sitemap .sitemap01 > li:first-child,
#sitemap .sitemap01 ul li:nth-child(-n+2) {
  border-top: none;
}
#sitemap .sitemap01 ul {
  margin-left: 40px;
}
#sitemap .sitemap01 ul li {
  flex: 0 0 48%;
  padding: 10px;
}
#sitemap .sitemap01 ul li a {
  display: inline-block;
  padding-left: 20px;
  position: relative;
}
#sitemap .sitemap01 ul li a::before {
  width: 8px;
  height: 8px;
  content: '';
  display: block;
  border-top: #ea5404 2px solid;
  border-right: #ea5404 2px solid;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sitemap .sitemap01 a:hover {
  color: #ea5404;
}
@media screen and (max-width: 640px) {
  #sitemap .sitemap01 li {
    padding: 10px;
  }
  #sitemap .sitemap01 ul {
    margin-left: 10px;
  }
  #sitemap .sitemap01 ul li:nth-child(2) {
    border-top: #ccc 1px solid;
  }
  #sitemap .sitemap01 a {
    display: block !important;
  }
}
/* --------------------------------------------------
    【カテゴリ―】
-------------------------------------------------- */
#category .newslist li {
  flex: 0 0 285px;
  margin: 40px 20px 0 0;
}
#category .newslist li:nth-child(-n+4) {
  margin-top: 0;
}
#category .newslist li:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 640px) {
  #category .newslist li {
    margin: 40px auto 0 !important;
  }
}
/* --------------------------------------------------
    【top】
-------------------------------------------------- */
/* 共通 */
section[id^="top"] {
  padding: 130px 0;
}
section[id^="top"] h2 {
  font-size: 38px;
}
section[id^="top"] h2 > span {
  position: relative;
}
section[id^="top"] h2 > span::before {
  width: 35px;
  height: 45px;
  content: '';
  background: url("../images/common/icon_flower.png") no-repeat center / cover;
  display: block;
  position: absolute;
  top: -15px;
  left: -45px;
}
/* メインビジュアル */
#mainVisual {
  background: url("../images/top/mainVisual_bg.jpg") no-repeat center top / cover;
  padding-left: 5vw;
  position: relative;
}
#mainVisual .copy {
  margin-left: 2.5vw;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
#mainVisual .master-slider {
  width: 100% !important;
  margin: 0 !important;
}
#mainVisual .master-slider-parent {
  transition: 0.8s;
  opacity: 0;
}
/* あいさつ */
#topGreeting {
  background: url("../images/top/topGreeting_bg.jpg") no-repeat center / cover;
  padding-bottom: 0;
}
#topGreeting .inner {
  width: auto;
  background: url("../images/top/topGreeting_img.jpg") no-repeat center / cover;
  padding: 240px 0;
}
#topGreeting h2 {
  color: #fff;
  font-size: 24px;
  text-align: center;
}
#topGreeting h2 span {
  display: block;
}
/* 温泉・客室 */
#topFacility {
  background: url("../images/top/topFacility_bg.jpg") no-repeat center / cover;
  color: #fff;
  position: relative;
  z-index: 1;
}
#topFacility::before, #topFacility::after {
  width: 425px;
  height: 156px;
  content: '';
  background: url("../images/top/topFacility_cloud01.png") no-repeat center / cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#topFacility::after {
  width: 170px;
  height: 172px;
  background-image: url("../images/top/topFacility_momiji01.png");
  top: 45px;
  left: auto;
  right: 75px;
}
#topFacility .txtWrap {
  padding: 5vw;
  position: relative;
}
#topFacility .flex:first-of-type .txtWrap::before,
#topFacility .flex:nth-of-type(2) .txtWrap::before {
  width: 580px;
  height: 172px;
  content: '';
  background: url("../images/top/topFacility_cloud02.png") no-repeat center / cover;
  display: block;
  position: absolute;
  bottom: -60px;
  right: 0;
}
#topFacility .flex:nth-of-type(2) .txtWrap {
  text-align: right;
}
#topFacility .flex:nth-of-type(2) .txtWrap::before {
  width: 560px;
  height: 172px;
  background-image: url("../images/top/topFacility_cloud03.png");
  bottom: -65px;
  left: 0;
}
#topFacility .flex:nth-of-type(2) .txtWrap::after {
  width: 100px;
  height: 118px;
  content: '';
  background: url("../images/top/topFacility_momiji02.png") no-repeat center / cover;
  display: block;
  position: absolute;
  bottom: 125px;
  left: 110px;
}
#topFacility figure {
  padding-left: 5vw;
}
#topFacility .flex:nth-of-type(2) figure {
  padding: 0 5vw 0 0;
}
#topFacility h2 {
  margin-bottom: 10px;
  position: relative;
}
#topFacility h2::before {
  width: 50vw;
  height: 1px;
  content: '';
  background: #ea5404;
  display: block;
  position: absolute;
  bottom: 0;
  left: -5vw;
}
#topFacility .flex:nth-of-type(2) h2::before {
  left: auto;
  right: -5vw;
}
#topFacility .btn01 a {
  color: #fff;
}
#topFacility .btn01 a:hover {
  color: rgba(255,255,255,0.6);
}
/* お客様の声 */
#topVoice h2 {
    color: #fff;
}
#topVoice .jalan {
    width: 80%;
    margin: 0 auto;
}
#topVoice .jalan iframe {
    width: 100%;
    height: 150px;
}
#topVoice .btn01 a {
    color: #fff;
}
/* 楽しむ */
#topContents {
  background: url("../images/top/topContents_bg.jpg") no-repeat center / cover;
  color: #fff;
}
#topContents .contents01 {
  flex: 0 0 580px;
}
#topContents .contents01 a, #topContents .contents02 figure {
  display: block;
  position: relative;
  overflow: hidden;
}
#topContents .contents01 a::before, #topContents .contents02 figure::before {
  width: 30px;
  height: 30px;
  content: '';
  border-top: transparent 30px solid;
  border-right: #ea5404 30px solid;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#topContents .contents01 h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1;
}
#topContents .contents01 h3 span {
  background: #000;
  color: #fff;
  font-size: 22px;
  display: inline-block;
  vertical-align: middle;
  padding: 20px 0;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/*K-campロゴ#topContents .contents01:nth-of-type(2) figure::before {
  width: 135px;
  height: 52px;
  content: '';
  background: url("../images/top/k-camp.jpg") no-repeat center / cover;
  display: block;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 1;
}*/
#topContents .contents01 img, #topContents .contents02 img {
  transition: 0.5s;
}
#topContents .contents01 a:hover img, #topContents .contents02 a:hover img {
  opacity: 0.7 !important;
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
}
#topContents .contents02 h3 {
  color: #fff;
  font-size: 22px;
  text-align: center;
  margin-top: 20px;
}
#topContents .contents02 h3 span {
  display: inline-block;
  padding: 0 55px;
  position: relative;
}
#topContents .contents02 h3 span::before, #topContents .contents02 h3 span::after {
  width: 40px;
  height: 1px;
  content: '';
  background: #ea5404;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#topContents .contents02 h3 span::after {
  left: auto;
  right: 0;
}
/* おしらせ */
#topNews {
  background: url("../images/top/topNews_bg.jpg") no-repeat center / cover;
}
#topNews .title {
  flex: 0 0 170px;
  text-align: center;
}
#topNews h2 span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#topNews h2 span::before {
  top: -30px;
  left: -20px;
}
#topNews .newslist {
  flex: auto;
}
.newslist li {
  font-size: 14px;
  flex: 0 0 250px;
}
#topNews .newslist li:not(:last-child) {
  margin-right: 10px;
}
.newslist .img {
  margin-bottom: 15px;
  overflow: hidden;
}
.newslist .thumbnail {
  background-size: cover;
  background-position: center center;
  padding-top: 72%;
  transition: 0.5s;
}
.newslist a:hover {
  text-decoration: none !important;
}
.newslist a:hover .thumbnail {
  opacity: 0.7 !important;
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
}
/* 概要 */
#topInfo {
  background: url("../images/top/topInfo_bg.jpg") no-repeat center / cover;
}
#topInfo .outline {
  background: url("../images/common/bg_wood.jpg") no-repeat center right / cover;
  color: #fff;
  padding: 5vw;
}
#topInfo .outline dl dt {
  flex: 0 0 25%;
  text-align: center;
  padding: 20px 0;
  margin-right: 5%;
  border-bottom: #fff 1px solid;
}
#topInfo .outline dl dd {
  flex: 0 0 70%;
  padding: 20px 35px;
  border-bottom: #fff 1px solid;
}
@media screen and (max-width: 640px) {
  /* 共通 */
  section[id^="top"] {
    padding: 60px 0;
  }
  section[id^="top"] h2 {
    font-size: 28px;
  }
  section[id^="top"] h2 > span::before {
    width: 25px;
    height: 32px;
    top: -10px !important;
    left: -30px !important;
  }
  /* メインビジュアル */
  #mainVisual {
    padding-left: 0;
  }
  #mainVisual .copy {
    margin-left: 0;
  }
  #mainVisual .copy img {
    width: auto;
    height: 40vh;
  }
  #mainVisual .ms-view, #mainVisual .ms-slide, #mainVisual .ms-slide-bgcont {
    height: 40vh !important;
  }
  #mainVisual .master-slider img {
    width: auto !important;
    max-width: inherit;
    height: 55vh !important;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  /* あいさつ */
  #topGreeting .inner {
    padding: 80px 5%;
  }
  #topGreeting h2 {
    font-size: 16px;
  }
  #topGreeting h2 span {
    font-size: 22px;
    margin: 10px 0;
  }
  /* 温泉・客室 */
  #topFacility::before, #topFacility::after {
    width: 190px;
    height: 70px;
  }
  #topFacility::after {
    width: 75px;
    height: 76px;
    top: 20px;
    right: 15px;
  }
  #topFacility .flex-col2 {
    width: auto;
  }
  #topFacility .txtWrap {
    padding: 40px 5vw;
  }
  #topFacility .flex:first-of-type .txtWrap::before,
  #topFacility .flex:nth-of-type(2) .txtWrap::before {
    width: 260px;
    height: 77px;
    bottom: 0;
  }
  #topFacility .flex:nth-of-type(2) .txtWrap {
    text-align: right;
  }
  #topFacility .flex:nth-of-type(2) .txtWrap::before {
    width: 250px;
    height: 77px;
    bottom: 0;
  }
  #topFacility .flex:nth-of-type(2) .txtWrap::after {
    width: 44px;
    height: 52px;
    bottom: 80px;
    left: 40px;
  }
  #topFacility figure {
    padding: 0 5% !important;
  }
  #topFacility h2::before {
    width: 100vw;
  }
  /* お客様の声 */
  #topVoice .jalan {
    width: 100%;
    margin: 0 auto;
  }
  /* 楽しむ */
  #topContents .contents01, #topContents .contents02 {
    max-width: 320px;
    margin: 0 auto;
  }
  #topContents .contents01:first-of-type {
    margin-bottom: 40px;
  }
  #topContents .contents01 h3 span {
    font-size: 20px;
    padding: 10px 0;
  }
  #topContents .contents01:nth-of-type(2) figure::before {
    width: 78px;
    height: 30px;
    bottom: 5px;
    left: 5px;
  }
  #topContents .contents02 {
    width: auto;
    margin-top: 40px;
  }
  #topContents .contents02 h3 {
    font-size: 20px;
    margin-top: 10px;
  }
  #topContents .contents02 h3 span {
    padding: 0 55px;
  }
  /* おしらせ */
  #topNews .title {
    margin-bottom: 20px;
  }
  #topNews h2 span {
    -webkit-writing-mode: inherit;
    -ms-writing-mode: inherit;
    writing-mode: inherit;
  }
  .newslist li {
    max-width: 280px;
    font-size: 16px;
    margin: 0 auto 30px !important;
  }
  #topNews .newslist li {
    -webkit-transform: translate(0, 50px);
    transform: translate(0, 50px);
  }
  .newslist .img {
    margin-bottom: 15px;
    overflow: hidden;
  }
  .newslist .thumbnail {
    padding-top: 66.66%;
  }
  #topNews .btn01.mb {
    display: block !important;
  }
  /* 概要 */
  #topInfo .flex-col2 {
    width: auto;
  }
  #topInfo .outline {
    font-size: 14px;
    padding: 40px 5%;
  }
  #topInfo .outline dl dt {
    flex: 0 0 100px;
    padding: 15px 0;
    margin-right: 10px;
  }
  #topInfo .outline dl dd {
    flex-basis: calc(100% - 110px);
    padding: 15px 10px;
  }
}

/* --------------------------------------------------
    【topデモ】
-------------------------------------------------- */
/* メインビジュアル */
#top_demo #mainVisual .copy {
  margin-left: 2.5vw;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 1;
}
#top_demo #mainVisual .master-slider-parent {
  transition: 0.8s;
  opacity: 1;
}

/* 外部リンクマーク */
/* #header .gNav .outlink::after {
  width: 12px;
  height: 12px;
  content: '';
  background: url(../images/common/icon_outlink_white.png) no-repeat center/cover;
  position: absolute;
  top: 15px;
  left: 100px;
}

#header .subNav .outlink_sub::after {
  width: 12px;
  height: 12px;
  content: '';
  background: url(../images/common/icon_outlink_white.png) no-repeat center/cover;
  position: absolute;
  top: 5px;
  right: 0px;
}

#footer .outlink {
  width: 12px;
  height: 12px;
  content: '';
  background: url(../images/common/icon_outlink_white.png) no-repeat center/cover;
  position: absolute;
  top: 5px;
  right: 0px;
} */

/* --------------------------------------------------
    【追従バナー】
-------------------------------------------------- */
#fltBnr {
  width: 250px;
  display: none;
  position: fixed;
  bottom: 135px;
  right: 0;
  z-index: 98;
}
#fltBnr ul li {
  margin-top: 5px;
}
#fltBnr .contact a, #fltBnr .phone, #fltBnr .web a {
  height: 80px;
  background: #000000;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
}

#fltBnr .contact a:before, #fltBnr .phone:before, #fltBnr .web a:before {
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  border: #ea5404 1px solid;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#fltBnr .tel {
  background: url(../images/common/icon_phone.png) no-repeat left center/15px auto;
  font-size: 14px;
  display: inline-block;
  padding-left: 20px;
}
#fltBnr .contact .mail {
  background: url(../images/common/icon_mail.png) no-repeat left center/20px auto;
  display: inline-block;
  padding-left: 25px;
}

#fltBnr .web .reserve {
  background: url(../images/common/icon_calendar.png) no-repeat left center/20px auto;
  display: inline-block;
  padding-left: 25px;
}

@media screen and (max-width: 640px) {
  #fltBnr {
    width: 100%;
    padding-right: 60px;
    bottom: 20px;
    left: 10px;
    right: auto;
}
#fltBnr ul {
  display: -webkit-flex;
  display: flex;
}
#fltBnr ul li {
  flex: 0 0 65px;
  margin: 0 5px 0 0;
}
#fltBnr .contact a, #fltBnr .phone, #fltBnr .web a {
  height: 50px;
  font-size: 0;
}
#fltBnr .contact span, .phone span , .web span{
    font-size: 0 !important;
}
#fltBnr .phone:after {
  background: url(../images/common/icon_phone.png) no-repeat center top 22px/15px auto;
}
#fltBnr .phone:after {
  content: '電話予約';
  font-size: 10px;
  font-weight: 400;
  padding-top: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
#fltBnr .contact a:after {
    background: url(../images/common/icon_mail.png) no-repeat center top 25px/20px auto;
}
#fltBnr .contact a:after {
  content: 'お問合せ';
  font-size: 10px;
  font-weight: 400;
  padding-top: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
#fltBnr .web a:after {
  background: url(../images/common/icon_calendar.png) no-repeat center top 22px/20px auto;
}
#fltBnr .web a:after {
  content: 'WEB予約';
  font-size: 10px;
  font-weight: 400;
  padding-top: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
#fltBnr .tel a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
}