/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* ブラウザ毎のデフォルト値をリセット */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* リセットここまで */

.wfont {
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.wfont2 {
  font-family: 'Zen Antique', serif;
  font-weight: 400;
  font-style: normal;
}

a {
  text-decoration: none;
}

.right {
  text-align: right;
}
.center{
  text-align: center;
}

header {
  /* 横幅100% */
  width: 100%;

  /* 一番上から固定 (0px) */
  position: fixed;
  top: 0;
  /* 画面の一番上に固定 */

  /* 高さ200ピクセル */
  height: 12.5em;

  /* 背景を白で半透明 (例: 透明度0.8) */
  background-color: rgba(255, 255, 255, 0.8);

  /* 他の要素の上に表示するための設定 */
  z-index: 1000;


}

/* 横幅一括 */
.main,
.container,
.container2,
.gh-main,
footer>div {
  width: 1000px;
}

.gh-title,
.index02,
.top-i {
  width: 700px;
}

/* 横幅一括 */

/* 角丸一括 */
.pic-ctn>img,
.gh-title {
  border-radius: 1.25em;
}

/* 角丸一括 */

/* ボーダー一括 */
.main,
.container,
.container2,
.gh-main,
.feature,
.feature>div,
.summary,
.price,
.access,
.info-list,
.gh-title,
dd,
.index01,
div {
  border: 0px solid #ccc;
}

.container {
  position: absolute;
  /* headerの高さ(200px)の中の55%の位置に配置 */
  top: 57%;
  left: 50%;
  /* 要素Aの高さの半分を補正 */
  transform: translate(-50%, -50%);
  text-align: right;

  /* アイテムのベースラインを揃える */
  align-items: baseline;
}

.title1 {
  font-size: 150%;
  color: #494953;
}

.title2 {
  font-size: 375%;
  color: #034c8c;
}

.container2 {
  position: absolute;
  /* headerの下端（bottom: 0）に配置 */
  bottom: 0.5em;
  left: 50%;
  /* 要素Aの高さの半分を補正 */
  transform: translate(-50%, 0%);
  display: flex;
  /* 子要素（horizontal-list）を右端に寄せる */
  justify-content: flex-end;

}

/* リストの親要素 (例: <ul>) に適用 */
.horizontal-list {
  /* Flexboxを有効化して子要素 (<li>) を横並びにする */
  display: flex;
  /* デフォルトのリストマーカー（ドットなど）を非表示にする */
  list-style: none;
  /* 親要素のデフォルトのパディングを削除することが多い */
  padding: 0;
  /* 親要素のデフォルトのマージンを削除することが多い */
  margin: 0;
}

.horizontal-list li {
  background-color: #f2f2f2;
  border-radius: 6px;
  /* 角の丸みの度合い */
  /* アイテム間にわずかな間隔を設定 */
  margin-left: 5px;
  font-size: 87.5%;
}

.horizontal-list li a {
  display: block;
  padding: 5px 12px 4px;
  text-decoration: none;
  color: #494953;
}

/* マウスオーバー時のスタイル（オプション）*/
.horizontal-list li:hover {
  background-color: #fafafa;
}



body {
  /* ヘッダーの高さ（200px）分の上の余白を設定 */
  padding-top: 18.75em;
  color: #37483e;
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

/* index用 */
.main {
  margin: auto;
}

.main>div {
  margin: auto;
  margin-top: 8em;
  margin-bottom: 10em;

}

.top-i {
  display: block;
  margin: auto;
}

.index01 {
  width: 30em;
}


.gh-title {
  display: block;
  margin: auto;
  position: relative;
  color: #494953;


  /* 画像を表示したい幅 */
  height: 9em;
  /* 画像を表示したい高さ */

  /* 画像を表示 */
  background-image: url('image/01_01.png');
  /* 画像の表示方法を調整 */
  background-size: cover;
  /* コンテナに合わせて画像を拡大縮小し、一部が隠れても全体を表示 */
  /* background-size: contain;   /* 画像全体がコンテナ内に収まるように縮小 */
  /* background-size: 100% auto; /* 幅を100%にして高さを自動調整 */

  /* 画像のどの部分を表示するか調整 (例: 中央部分を表示) */
  background-position: center center;
  /* background-position: 0 0;   /* 左上から表示 */
  /* background-position: 50% 50%; /* 中央から表示 (center center と同じ) */

  background-repeat: no-repeat;
  /* 画像の繰り返しをなしにする */

  /* オーバーフローしたコンテンツを隠す */
  overflow: hidden;
}

/* 画像内の文字の位置調整 */
.gh-title div {
  position: absolute;
  /* 親要素 .gh-title を基準に絶対配置 */
  bottom: 0.7em;
  /* 下から10px */
  right: 0.7em;
  /* 左から10px */

  /* 文字のスタイル */
  font-size: 175%;
  /* 文字サイズ */
  font-weight: bold;
  /* 太字 */
  text-shadow:
    -1px -1px 0 #fff,
    /* 左上 */
    1px -1px 0 #fff,
    /* 右上 */
    -1px 1px 0 #fff,
    /* 左下 */
    1px 1px 0 #fff,
    -2px -2px 3px #fff,
    /* 左上 */
    2px -2px 3px #fff,
    /* 右上 */
    -2px 2px 3px #fff,
    /* 左下 */
    2px 2px 3px #fff;
  /* 右下 */
}

/* index用ここまで */

.gh-main {
  margin: auto;

}

.gh-main a {
  color: #494953;
}

.gh-main>div {
  margin-top: 8em;
  margin-bottom: 10em;
}

h1 {
  font-size: 1.875em;
  text-align: center;
  font-weight: 800;
}

h2 {
  font-size: 1.437em;
  text-align: center;
  font-weight: 800;
}

hr {
  /* デフォルトのボーダーと影をリセット */
  border: none;

  /* 線の太さ（高さ）を設定 */
  height: 2px;

  /* 線の色を設定 */
  background-color: #034c8c;
  /* 薄いグレーの線 */

  /* 横幅を調整（例：中央寄せで幅を狭める） */
  width: 90%;
  margin: 1.5em auto 2em;
}

.info-list {
  width: 23.75em;
  margin: auto;
}

.info-row {
  display: flex;
  /* dtとddを横並びにする */
  margin-bottom: 1em;
}

.info-row dt {
  width: 6.25em;
  /* dtの幅を固定 */
  flex-shrink: 0;
  /* 縮まないようにする */
}

.info-row dd {
  /* ddが複数あっても柔軟にスペースを使う */
  flex-grow: 1;
  margin: 0;
  width: 17em;
}

.feature,
.occupancy {
  display: flex;
  margin: auto;
  width: 31em;
}

.feature>div {
  width: 100%;
}

.overview {
  display: flex;
  justify-content: space-around;
}

.summary,
.price {
  width: 28.125em;
}

.occupancy {
  justify-content: center;
}

.occupancy_div {
  width: 43em;
  display: flex;
  justify-content: space-around;
}

.now tr td {
  line-height: 1.5;
  border: solid 2px #034c8c;
  padding: 0.4em 1em;
}

.nowimg {
  width: 20em;
}

.bosyu {
  color: red;
  font-size: 1.7em;
  margin: 0.5em;
  font-weight: bold;
}

.hosoku{
  line-height: 1.5;
  margin: 0.5em;
}
.ng {
  background: #8b8b8f;
  text-decoration: line-through;
}

.access {
  margin: auto;
  width: 37.5em;
}

iframe {
  width: 37.5em;
  height: 25em;
}

/* 浮き上がる装飾用ここから */
/* 1. 初期状態：非表示 */
.fade-in-target {
  opacity: 0;
  /* 最初は透明 */
  transform: translateY(1.25em);
  /* 少し下からスタート */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  /* 変化を1秒かけて滑らかに */
}

/* 2. 表示状態：ふわっと現れる */
/* JavaScriptでこのクラスが付与される */
.is-visible {
  opacity: 1;
  /* 不透明にして表示 */
  transform: translateY(0);
  /* 元の位置に戻る */
}

/* 浮き上がる装飾用ここまで */

/* カルーセル用ここから */
@keyframes display {
  0% {
    transform: translateX(40em);
    opacity: 0;
  }

  10% {
    transform: translateX(0);
    opacity: 1;
  }

  20% {
    transform: translateX(0);
    opacity: 1;
  }

  30% {
    transform: translateX(-40em);
    opacity: 0;
  }

  100% {
    transform: translateX(-40em);
    opacity: 0;
  }
}

.pic-ctn {
  margin-top: 5em;
  position: relative;
  height: 30em;

}

.pic-ctn>img {
  width: 40em;
  position: absolute;
  top: 0;
  left: calc(50% - 20em);
  /* 表示画像のwidthの半分を入れる */
  opacity: 0;
  animation: display 20s infinite;
  /* 角の丸みの度合い */
}

img:nth-child(2) {
  animation-delay: 4s;
}

img:nth-child(3) {
  animation-delay: 8s;
}

img:nth-child(4) {
  animation-delay: 12s;
}

img:nth-child(5) {
  animation-delay: 16s;
}

/* カルーセル用ここまで */

footer {
  /* 横幅100% */
  width: 100%;
  margin-top: 15em;
  bottom: 0;
  /* 画面の一番上に固定 */

  /* 高さ200ピクセル */
  height: 12.5em;

  background-color: #419bbf;
}

footer>div {
  position: relative;
  height: 80%;
  margin: auto;
  color: #fafafa;

}

footer div a {
  color: #fafafa;
  text-decoration: none;
}

.logo {
  position: absolute;
  bottom: 0;
  left: 0;
  /* 左端から0の位置 */
  padding: 0.62em;
  /* アイテムのベースラインを揃える */
  align-items: baseline;
}

.f-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 右端から0の位置 */
  padding: 0.62em;
  text-align: right;
  line-height: 1.3;
}




.mi {
  font-size: 375%;
}

.ka {
  font-size: 187.5%;
}

.ka,
mi {
  font-size: 2.5em;
}

/* iPadに適用するCSS  基本は768 */
@media screen and (max-width:835px) {

  /* 横幅一括 */
  .main,
  .container,
  .container2,
  .gh-main,
  footer>div {
    width: 700px;
  }

  .gh-title,
  .index02,
  .top-i {
    width: 600px;
  }

  body {

    font-size: 14px;
  }

}

/* 		スマホに適用するCSS 基本は375～320		 */

@media screen and (max-width:415px) {

  /* 横幅一括 */
  .main,
  .container,
  .container2,
  .gh-main,
  footer>div {
    width: 360px;
  }

  .gh-title,
  .index02,
  .access,
  iframe,
  .summary,
  .price,
  .top-i,
  .occupancy_div,
  .occupancy {
    width: 340px;
  }

  body {
    font-size: 11px;
  }

  .container {
    top: 60%;
    display: flex;
    /* 縦並びへの切り替え */
    flex-direction: column;

    align-items: flex-end;

    /* 縦並びになったら、テキストを中央に揃える */
  }

  .container2 {
    display: none;
  }

  .overview {
    flex-direction: column;
    /* 要素を縦並びにする */
    align-items: center;
  }

  .price {
    margin-top: 10em;
    margin-bottom: 0em;
  }


  .occupancy_div {
    display: block;
    justify-content: center;
  }
.nowimg{
  display: block;
  margin: auto;
}
  .now {
    margin: auto;
    font-size: 1.3em;
  }

  .now tr td {
    line-height: 1.3;
    border: solid 2px #034c8c;
    padding: 0.3em 0.8em;
  }

  .nowimg {
    width: 24em;
  }

  .bosyu {
    font-size: 1.7em;
  }

  @keyframes display {
    0% {
      transform: translateX(32em);
      opacity: 0;
    }

    10% {
      transform: translateX(0);
      opacity: 1;
    }

    20% {
      transform: translateX(0);
      opacity: 1;
    }

    30% {
      transform: translateX(-32em);
      opacity: 0;
    }

    100% {
      transform: translateX(-32em);
      opacity: 0;
    }
  }

  .pic-ctn {
    height: 24em;

  }

  .pic-ctn>img {
    width: 32em;
    left: calc(50% - 16em);
  }

}