@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@800&family=Zen+Maru+Gothic:wght@700&display=swap');
/* 配色 */
.red{color:#e52e5e;}
.pink{color:pink;}
.violet{color:violet;}
.green{color:green;}
.blue{color:blue;}
.yellow{color:yellow;}
.brown{color:brown;}
/* テキストパターン */
.f15b{color:#e52e5e;font-size:15px;font-weight:800;}
.f20b{color:#e52e5e;font-size:20px;font-weight:800;}
.f25b{color:#e52e5e;font-size:25px;font-weight:800;}
.f30b{color:#e52e5e;font-size:30px;font-weight:800;}
.f35b{color:#e52e5e;font-size:35px;font-weight:800;}
.f40b{color:#e52e5e;font-size:40px;font-weight:800;}
.f45b{color:#e52e5e; font-size:45px;font-weight:800;}
.f48b{color:#e52e5e; font-size:48px;font-weight:800;}
.f56b{color:#e52e5e; font-size:56px;font-weight:800;}
.f35{font-size:35px;font-weight:800;}
.f25{font-size:25px;font-weight:800;}
.f30{font-size:30px;font-weight:800;}
.f35{font-size:35px;font-weight:800;}
.f40{font-size:40px;font-weight:800;}
.f45{font-size:45px;font-weight:800;}
.f48{font-size:48px;font-weight:800;}
.f56{font-size:56px;font-weight:800;}
/* フォント変更 */
body {
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','ヒラギノ角ゴシック','Hiragino Sans','Yu Gothic UI','Arial Black','Arial',sans-serif;
  }

html {
  scroll-behavior: smooth;
}

/* 最大幅600px */
header, main, footer {
  max-width: 600px;
  margin: 0 auto;
}

main p {
  line-height: 1.6;
}
main p:last-child {
  margin-bottom: 0; /* 最後の段落のみ、下のマージン設定を0に */
}

a {
  text-decoration: none;
}

/*=======　Header　==========================================*/
/*=======　Hero　=================================================*/
.hero-wrap {
  position: relative;
  /* スマホ初回画面の高さ - フッター固定の高さ */
  /*height: calc(100vh - 100px);*/
  background-color: #eee;
  /* 画像のみ使う場合 */
  /* 背景に画像を使う場合 */
  /* (画像の高さ / 画像の横幅) × 100 */
  font-family: 'Zen Maru Gothic', serif;
}
.hero-wrap .first-imp-top {
  position: relative;
  background: #893E74 url("https://hnn0705.net/test_05/img/title.gif") no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 134.8837209302%;
}

.hero-wrap .first-imp-top::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-wrap .first-imp-top_header_text { /* テキストを画像中央合わせする場合 */
  position: absolute; /* テキストの位置は絶対指定にする */
  /* ここで使う文字サイズを計算 */
  /* 文字サイズ ✕ 行数 を半分にして上からの余白から引く。中央合わせではない時は、上の余白は％または数値で設定すればOK */
  top: calc(5% - ((100vw - 320px) / 140 + 32px) * 1 / 2);
  width: 100%;
}

.hero-wrap .first-imp-top__text { /* テキストを画像中央合わせする場合 */
  position: absolute; /* テキストの位置は絶対指定にする */
  /* ここで使う文字サイズを計算 */
  /* 文字サイズ ✕ 行数 を半分にして上からの余白から引く。中央合わせではない時は、上の余白は％または数値で設定すればOK */
  top: calc(50% - ((100vw - 320px) / 140 + 32px) * 1 / 2);
  width: 100%;
}
.hero-wrap .first-imp-top__text h1 ,.hero-wrap .first-imp-top_header_text h2{
  color: #000;
  width: 100%;
  text-align: center;
  background-color: #fff;
  font-size: 20px;
}
.hero-wrap .first-imp-top__subtext-box { /* 位置を調整する場合 */
  position: absolute; /* テキストの位置は絶対指定にする */
  font-size: 0.875rem;
  width: 92%;
  bottom: 1rem;
  left: 4%;
}
.first-imp-top__subtext-box{
  color: #fff;
}

.hero-wrap .first-imp-banner {
  height: auto; /* 縦二分割の下。高さの指定をする時は数値を入れる */
  background-color: #fff;
  padding: 1.5rem 0 2rem;
}
.hero-wrap .first-imp-banner .text-box {
  font-size: calc((100vw - 320px) / 140 + 20px);
  font-weight: bold;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 長文の時は80％など幅を指定 */
  margin: 0 auto 1.5rem;
}

.first-imp-top__subtext-box {
  display: flex;
  align-items: center;
}

.subtext-box-image {
  width: 60px;
  height: 60px;
  margin-right: 10px; /* 画像とテキストの間のスペース */
}

/*=======　main　=================================================*/
.linkBanner-wrap {
  width: 92%;
  margin: 0 auto;
}

.line-btn a {
  display: block;
  background: #06c755;
  position: relative; /* 固定バナー時にリンクが隠れることを防ぐための設定 */
  z-index: 5; /* 固定バナー時にリンクが隠れることを防ぐための設定 */
  padding: 1rem;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}
.line-btn a > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.line-btn a > .inner .text {
  font-weight: bold;
  font-size: calc((100vw - 320px) / 140 + 20px);
}
.line-btn a > .inner .text, .line-btn a > .inner .icon i {
  color: #fff;
  line-height: 1.6;
}
.line-btn a > .inner .icon i {
  margin-left: 0.5rem;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.line-btn {
  animation: heartbeat 1s infinite;
}


.column { /* デフォルト設定 */ }
.column.cat02,
.column.cat03,
.column.cat04,
.column.cat05,
.column.cat06,
.column.cat07
{font-family: 'Zen Maru Gothic', serif;}

.column.cat05 .review p{
  margin: 0;
  padding: 0;
}

.column .column-row-top img {
  width: 100%;
  max-width: 600px; /* 設置画像の最大幅 */
}
.column .column-row-bottom {
  background: #ffffff;
  padding: 1rem 0 3rem;
}
.column .column-row-bottom .text-box {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 長文の時は80％など幅を指定 */
  max-width: 80%;
  margin: 1rem auto;
  font-size: calc((100vw - 320px) / 140 + 20px);
  font-weight: bold;
}
.column .column-row-bottom .text-box p {
  font-size: 1rem;
  font-weight: normal;
}

.column .column-row-bottom .tokuback {
  background: url(https://hnn0705.net/test_05/img/tokuback.png) no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  padding: 20px 0;
  min-height: 209px;
  text-align: center;
  position: relative;
}

.tokuback ul {
  width: 92%;
  margin: 0 auto;
  padding: 0;
}

.tokuback ul li {
  list-style: none;
  background: #fff;
  box-shadow: 6px 6px 1px #444;
  margin: 15px 0;
  padding: 15px 0;
  opacity: 0.9;
}

.tokuback ul li p {
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  color: #000;
  line-height: 120%;
  margin: 0;
  padding: 0;
}

.tokuback ul li p img {
  width: 6%;
  height: auto;
  padding: 0 5px;
}

.column .column-bg.column-row-top { /* 背景に画像を入れる用設定デフォルト */
  /* (画像の高さ / 画像の横幅) × 100 */
  position: relative;
  background: #6f7c9e url("https://hnn0705.net/test_05/img/gotohotel.png") no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 125%;
}
.column .column-bg.column-row-top .column-row-top__text { /* テキストを画像中央合わせする場合 */
  position: absolute; /* テキストの位置は絶対指定にする */
  /* ここで使う文字サイズを計算 */
  font-size: calc((100vw - 320px) / 140 + 24px);
  /* 文字サイズ ✕ 行数 を半分にして上からの余白から引く。中央合わせではない時は、上の余白は％または数値で設定すればOK */
  top: calc(50% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
  width: 100%;
  text-align: center;
  color: #000000;
}
.column.cat04 .column-row-top__text{
  background-color: #ffe8e8;
}
.column.cat05 .column-row-top__text,
.column.cat06 .column-row-top__text{
  background-color: #fff;
}

.column .column-bg.column-row-top .column-row-top__text p {
  width: 80%;
  margin: 1rem auto;
  font-size: 0.875rem;
  text-align: left;
}

.column.cat02 .column-bg.column-row-top .column-row-top__text p {
  background-color: #fff;
}


.column .column-bg.column-row-bottom {
  background: #eee url("../画像までのパス") no-repeat top center;
  background-size: cover; /* 画像をフルで入れる場合はcoverではなくcontain */
}
.column.catXX { /* .cat02 など異なるクラス指定をして使いまわし */ }
.column.catXX .column-bg.column-row-top {
  background: #296fb1 url("") no-repeat top center;
  padding-top: 75%;
}
.column.catXX .column-bg.column-row-top .column-row-top__text {
  top: calc(50% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
}

.column.column-img { /* 背景ではなく画像を絶対指定で設定し、その上にテキストを重ねるパターン */
  position: relative;
}
.column.column-img .column-row-top {
  position: relative;
  z-index: 0; /* 重ねる順番を指定。小さいほど後ろ */
}
.column.column-img .column-row-top .back-img {
  width: 100%;
  max-width: 414px; /* 最大幅を設定 */
}
.column.column-img .column-row-top .back-img img {
  width: 100%;
  max-width: 414px; /* 設置画像の最大幅 */
}
.column.column-img .column-row-top .text-box {
  position: absolute; /* 画像に重ねるテキストの位置を調整 */
  z-index: 3; /* 重ねる順番を指定。小さいほど後ろ */
  top: 2rem; /* 画像に対してのテキストボックスの位置（高さ） */
  left: 8%; /* 画像に対してのテキストボックスの位置（横） */
}
.column.column-img .column-row-top .text-box .text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 長文の時は80％など幅を指定 */
  margin: 0 auto;
}

.column { /* ギャラリー設定 */ }
.column .column-gallery .title-wrap {
  width: 92%;
  margin: 1rem auto;
}
.column .column-gallery .title-wrap h3 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.column .column-gallery .column-gallery-box {
  width: 100%;
  margin: 1rem auto;
}
.column .column-gallery .column-gallery-box__inner {
  width: 92%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*justify-content: space-around;*/ /* 左右も含めた均等配置。*/
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; /* 左右に余白を入れない均等配置 */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; /* ギャラリーの数が増えたら折り返しを許可 */
}
.column .column-gallery .column-gallery-box__inner .col {
  /*width: calc(100% / 3);*/ /* 余白無しの場合は3等分。4等分なら4など数値を変える */
  width: calc(33.3333333333% - 10px); /* 余白を作る場合は分割後に余白分を引く */
}
.column .column-gallery .column-gallery-box__inner .col img {
  width: 100%;
  max-width: 150px;/* 設置画像の最大幅 */
 height: auto;
  display: block;
  object-fit: cover;
}
.column .column-gallery .text-caption ol {
  font-size: 0.875rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 長文の時は80％など幅を指定 */
  max-width: 80%;
  margin: 1.5rem auto;
  padding-left: 1.5rem;
  list-style: decimal;
}

.column { /* レビュー設定 */ }
.column .column-review {
  background: #c9aad1;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
}
.column .column-review_box {
  margin: 0 3% 1rem;
}
.column .column-review_box__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.column .column-review_box__inner .thumbnail { /* サムネイル */
  width: 80px;
}
.column .column-review_box__inner .thumbnail img {
  width: 100%;
  max-width: 80px;
 height: auto;
  display: block;
  object-fit: cover;
}
.column .column-review_box__inner .review {
  width: calc(100% - 80px - 16px); /* 幅100％から、サムネ分と余白分を引く */
}
.column .column-review_box__inner .review p {
  font-size: 0.75rem;
}
.column .column-review_box__inner .review p.note {
  color: #999;
}

.column.cat02 .column-bg.column-row-top {
  background: #886348 url("https://hnn0705.net/test_05/img/gotohotel.png") no-repeat top center;
  padding-top: 75%;
  background-size: cover;
}


.column.cat02 .column-bg.column-row-top .column-row-top__text {
  top: calc(1% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
}
.column.cat02 .column-bg.column-row-top .column-row-top__text h2 {
  font-size: calc((100vw - 320px) / 140 + 24px);
  background-color: #fff;
}
.column.cat02 .column-row-bottom {
  background: #fff;
}

.column.cat03 .column-row-top .column-row-top__text {
  background: #38716A;
}
.column.cat03 .column-row-top .column-row-top__text h2 {
  font-size: calc((100vw - 320px) / 140 + 24px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 80%;
  margin: 0 auto;
  padding: 1rem 0;
  color: #fff;
}
.column.cat03 .column-row-bottom {
  background: #fff;
}
.column.cat03 .title-wrap .text-box,
.column.cat04 .title-wrap .text-box,
.column.cat05 .title-wrap .text-box  {
  width: 80%;
  text-align: center;
}

.column.cat04 .column-bg.column-row-top {
  background: #3A3971 url("https://hnn0705.net/test_05/img/safety.jpg") no-repeat top center;
  background-size: cover;  /* 背景画像を枠いっぱいに拡大 */
  padding-top: 75%;
}
.column.cat04 .column-bg.column-row-top .column-row-top__text {
  top: calc(50% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
}
.column.cat04 .column-bg.column-row-top .column-row-top__text h2 {
  font-size: calc((100vw - 320px) / 140 + 24px);
}
.column.cat04 .column-gallery {
  background: #fff;
  padding: 1rem 0;
}

.column.cat05 .column-bg.column-row-top {
  background: #517341 url("https://hnn0705.net/test_05/img/review.jpg") no-repeat top center;
  background-size: cover;
  padding-top: 75%;
}
.column.cat05 .column-bg.column-row-top .column-row-top__text {
  top: calc(50% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
}
.column.cat05 .column-bg.column-row-top .column-row-top__text h2,
.column.cat06 .column-bg.column-row-top .column-row-top__text h2 {
  font-size: calc((100vw - 320px) / 140 + 24px);
}
.column.cat05 .column-review {
  background: #ffffff;
}
.column.cat05 .column-row-bottom {
  padding-top: 0;
  background: #fff;
}
.column.cat05 .column-row-bottom .text-box {
  margin-top: 0;
}

.nage_m{color:green;}
.nage_w{color:pink;}


.column.cat06 .column-bg.column-row-top {
  background: #886348 url("https://hnn0705.net/test_05/img/yareru.jpg") no-repeat top center;
  padding-top: 75%;
  background-size: cover;
}

.column.cat06{
  width: 100%;
  margin: 60px auto 40px;
  padding: 0;
  background: #7292c1;
}

.column.cat06 .column-row-bottom {
  background: #fff;
}

.balloon_r .faceicon {
  order: 2 !important;
}
.balloon_r .faceicon {
  margin-left: 25px;
}

.faceicon img {
  width: 50px;
  height: auto;
}

.balloon_l .faceicon {
  margin-right: 25px;
}

.balloon_r {
  justify-content: flex-end;
}
.balloon_l, .balloon_r {
  font-family: "メイリオ","Yu Gothic","游ゴシック",sans-serif,"Hiragino Kaku Gothic Pro W6","ヒラギノ角ゴ Pro W6","Osaka","ＭＳ Ｐゴシック";
  margin: 30px 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 20px;
}

.says p{
  margin: 0;
  padding: 0;
}

.balloon_r .says:after {
  right: -26px;
  border-left: 22px solid #79e044;
}

.balloon_l .says:after {
  left: -26px;
  border-right: 22px solid #ffffff;
}

.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
}

.says.boys {
  max-width: 550px;
  font-size: 1rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 8px 6px 7px 12px;
  border-radius: 12px;
  background: #79e044;
  box-sizing: border-box;
  margin: 0 !important;
  line-height: 1.5;
}

.says.girls {
  max-width: 550px;
  font-size: 1rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 8px 6px 7px 12px;
  border-radius: 12px;
  background: #ffffff;
  box-sizing: border-box;
  margin: 0 !important;
  line-height: 1.5;
}

@media only screen and (max-width: 480px){
  .says.boys {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 480px){
  .says.girls {
    font-size: 1rem;
}
}


.column.cat07 .column-bg.column-row-top {
  background: #683E89 url("https://hnn0705.net/test_05/img/playback.jpg") no-repeat top center;
  padding-top: 75%;
  background-size: cover;
}
.column.cat07 .column-bg.column-row-top .column-row-top__text {
  top: calc(50% - ((100vw - 320px) / 140 + 24px) * 1 / 2);
}
.column.cat07 .column-bg.column-row-top .column-row-top__text h2 {
  font-size: calc((100vw - 320px) / 140 + 24px);
}
.column.cat07 .column-row-bottom {
  background: #fff;
}

/* footer -----------------------------------*/

.pageFooterBanner {
  display: none !important;
}

@media only screen and (max-width: 600px){
	.pageFooterBanner {
	    display: block !important;
	}
}

@media only screen and (max-width: 600px){
  .pageFooterBanner { /* フッター固定バナー */
    position: fixed;
    bottom: 0;
    left: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem 0;
    width: 100%;
    z-index: 9999;
  }
  .pageFooterBanner__inner {
    width: calc(100% - 70px - 10px); /* TOPへ戻るボタンの分を引く */
  }
}





.return-btn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
}
.return-btn .return-btn__inner {
  position: relative;
}
.return-btn .return-btn__inner a {
  display: block;
}

footer {
  position: relative;
  padding-bottom: 100px; /* フッター固定バナー用の余白 */
  max-width: 600px;
  margin: 0 auto;
}