@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("/css/inview.css");
@import url("/css/mainimg.css");
@import url("/css/ships.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  --primary-color: #176ceb;
  --primary-inverse-color: #fff;
  --btn_bgcolor: #303030;
  --btn_color: #ffba4d;
  --secondary-color: #303030;
  --secondary-inverse-color: #fff;
  --accent-color: #c43311;
  --accent-inverse-color: #fff;
  --background-color: #d9ecf9;
  --content-space: 4rem;
  --content-space2: 2rem;
}

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    left: -200px;
  }

  100% {
    left: 0px;
  }
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}

html,
body {
  font-size: 13px;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

  html,
  body {
    font-size: 15px;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  -webkit-text-size-adjust: none;
  background: #fff;
  color: #555;
  line-height: 2;
  overflow-x: hidden;
}

/*リセット*/
figure {
  margin: 0;
}

dd {
  margin: 0;
}

nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

/*section*/
section {
  padding: var(--content-space);
  /*section内の余白。css冒頭のcontent-spaceを読み込みます。*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s;
}

a:hover {
  filter: brightness(1.1);
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  position: relative;
  animation: opa1 1s 1s both;
  /*1秒待機し、1秒かけてフェードイン*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  padding: 1rem var(--content-space);
  color: #fff;
  position: absolute;
  width: 100%;
  background-color: var(--secondary-color);
}

header a {
  color: inherit;
}

.home header {
  background: initial;
}

/*ロゴ*/
#logo a {
  text-decoration: none;
}

#logo svg {
  display: block;
  width: 220px;
}

#logo svg path,
.footer_logo svg path {
  fill: white;
}
/* スマホ用サイズ調整 */
@media (max-width: 790px) {
  .footer_logo svg,
  .footer_logo img {
    width: 100%;
  }
}

/*パンくず*/
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "›";
  margin: 0 .6em;
  color: #777;
}


/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

  /*ヘッダーブロック*/
  header {
    display: flex;
    /*中のコンテンツを横並びにする*/
    justify-content: space-between;
    gap: 2rem;
    /*中のコンテンツ同士に空けるマージン的な余白。*/
    align-items: start;
  }
}

@media screen and (max-width: 799px) {
  .breadcrumb {
    margin-top: 1.5rem;
  }
}

/*追加指定ここまで*/


/*header-box（ヘッダー右側にあるボタン）
---------------------------------------------------------------------------*/
/*ボックス全体*/
#header-box * {
  margin: 0;
  padding: 0;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
  #header-box {
    margin-right: 30px;
  }
}

/*header ボタンに使用しているアイコン*/
#header-box .btn i {
  margin-right: 1rem;
  transform: scale(1.2);
}

/*画面幅500px以下の追加指定*/
@media screen and (max-width:500px) {

  /*ボタンが入ったボックス*/
  #header-box .btn {
    display: inline-block;
  }

  /*ボタン１個あたり*/
  #header-box .btn li {
    margin-bottom: 0.5rem;
  }

}

@media screen and (max-width:799px) {
  :root {
    --content-space: 2rem;
  }
}


/*追加指定ここまで*/


/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
#menubar {
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 100px var(--content-space) 50px;
  /*ブロック内の余白。上に100px、左右についてはcss冒頭のcontent-spaceを読み込む、下に50px。*/
  background: var(--primary-inverse-color);
  color: var(--primary-inverse-color);
  /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

#menubar li {
  font-weight: 700;
}

#menubar li>ul {
  padding-left: 1.5em;
}

#menubar li>ul>li {
  font-weight: normal;
}

/*メニュー１個あたり*/
#menubar a {
  display: block;
  text-decoration: none;
  color: var(--secondary-color);
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 1rem;
  padding: 1rem 2rem;
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: flex;
  animation: opa1 0s 0.2s both;
  position: fixed;
  z-index: 101;
  cursor: pointer;
  right: 0px;
  top: 0px;
  width: 70px;
  height: 70px;
  background: #000;
  border-radius: 0px;
  transform-origin: right top;
  transform: scale(0.9);
  /*大きさを調整したい場合はここの「1」を変更します。1.2や0.7など。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
  background: var(--btn_color)
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  position: absolute;
  left: 18px;
  width: 35px;
  height: 2px;
  /*線の高さ*/
  background: #fff;
  /*線の色*/
  transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}

#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}

#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}

#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}

#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}


/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
#new-top * {
  margin: 0;
  padding: 0;
}

#new-top {
  position: absolute;
  top: 80vh;
  z-index: 1;
  width: 80vw;
  margin-left: 10vw;
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-radius: 5px;
}

/*マウスオン時に透明度を80%に*/
#new-top a:hover {
  opacity: 0.8;
}

/*「お知らせ」の見出し*/
#new-top h2 {
  font-size: 1rem;
  font-weight: normal;
  background: #555;
  color: #fff;
  border-radius: 3px;
  margin-right: 1rem;
  padding: 0 1rem;
}

/*テキストのブロック*/
#new-top .text {
  flex: 1;

  /*以下4行は、末尾を...として１行にまとめる為のスタイル*/
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*ブロック右側にある「一覧」*/
#new-top .new-list {
  align-self: flex-end;
}


/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
  flex: 1;
}

/*トップページ以外のコンテンツ*/
body:not(.home) #contents {
  padding-top: 10rem;
  /*上に10文字分の余白を空ける*/
  padding-bottom: 10rem;
  /*下に10文字分の余白を空ける*/
}

/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul,
#contents ol {
  margin-left: 2rem;
  margin-right: 2rem;
}


/*p要素（段落タグ）
---------------------------------------------------------------------------*/
#container p {
  margin: 1rem 0;
}

/* pタグが1つしかない場合：マージンをリセット */
:has(p:only-of-type) p:only-of-type {
  margin-bottom: 0;
}

/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
  margin: 0;
  padding: 0;
  font-size: 2.4rem;
  font-weight: normal;
  margin-bottom: 5vw;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

/*見出し内のspan（小さな装飾文字と上部のアクセントライン）*/
main h2 span.small {
  display: inline-block;
  border-top: 2px solid var(--primary-color);
  font-size: 0.9rem;
  opacity: 0.6;
  letter-spacing: 0.1rem;
  padding-top: 2rem;
}

/*見出しをセンタリングする場合*/
main h2.c {
  align-items: center;
}


/*2カラムブロック　※900px未満では１カラム（私たちのこだわりブロック）
---------------------------------------------------------------------------*/
.list-half * {
  margin: 0;
  padding: 0;
}

/*２カラムを囲むブロック*/
.list-half .list {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  text-decoration: none;
}

.list-half a.list {
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.list-half a.list:hover,
.list-half a.list:active img {
  background-color: rgba(0, 0, 0, 0.05);
  filter: brightness(1.15);
  /* 控えめに白っぽく */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.list-half a.list:active,
.list-half a.list:active img {
  background-color: rgba(0, 0, 0, 0.05);
  filter: brightness(1.3);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

/*ブロック内のh4見出し*/
.list-half .list h4 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.list-half .list h4.border {
  display: inline-block;
  border-bottom: 3px solid var(--btn_color);
}

.list-half .list .code {
  padding: 1rem;
  font-size: 90%;
  background-color: rgba(0, 0, 0, 0.03);
  margin-bottom: 2rem;
}

.list-half .list .code:last-child {
  margin-bottom: 0;
}

/*ブロック内のh4内のspan（小さな装飾文字）*/
.list-half .list h4 span {
  display: block;
  opacity: 0.5;
  font-weight: normal;
  font-size: 0.5em;
  letter-spacing: 0.1em;
}


/*画像ブロック共通*/
.list-half .image-l img,
.list-half .image-r img {
  box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
}

.list-half.map {
  background-color: #fafafa;
  padding: 1rem;
}

.list-half.map .image-l img,
.list-half.map .image-r img,
.sc .list-half .image-r img {
  box-shadow: none;
}


.map .CruiseRecapItem dl dd {
  border-bottom: 1px solid var(--secondary-color);
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

  /*２カラムを囲むブロック*/
  .list-half .list {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .list.align-items-c {
    align-items: center;
  }

  /*画像ブロック共通*/
  .list-half .image-l,
  .list-half .image-r {
    width: 50%;
  }

  .list-half.map .image-l,
  .list-half.map .image-r {
    width: 30%;
  }

  .list-half.f-cruises {
    margin-top: 3rem;
  }

  .list-half.f-cruises.st {
    margin-top: 0;
  }

  .list-half.f-cruises .image-l,
  .list-half.f-cruises .image-r {
    width: 40%;
  }

  /*コース/スケジュール 画像ブロック共通*/
  #course .sc .list-half .image-l,
  #course .sc .list-half .image-r {
    width: 30%;
  }

  /*行程*/
  #course .itin .list-half .image-l {
    width: 30%;
  }

  /*  .list.up:not(.mini) {
    .list.up だけど .mini は含まない要素に適用
  } */

  #course .itin .list-half .mini .image-l {
    padding-left: 5rem;
  }


  /*画像を右に配置する場合*/
  .list-half .image-r {
    margin-left: 2rem;
  }

  /*画像を左に配置する場合*/
  .list-half .image-l {
    order: -1;
    margin-right: 2rem;
  }

  /*テキストブロック*/
  .list-half .text {
    flex: 1;
  }
}

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

  .list-half .image-l,
  .list-half .image-r {
    order: -1;
    margin-bottom: 2rem;
  }
}


/*追加指定ここまで*/


/*list-grid7（サービス紹介ブロック）
---------------------------------------------------------------------------*/
.list-grid7 .list * {
  margin: 0;
  padding: 0;
}

/*ボックス１個あたり*/
.list-grid7 .list {
  display: grid;
  position: relative;
  background: #fafafa;
  color: #555;
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 2rem;
  text-decoration: none;
}

/*ボックス内のh4見出し*/
.list-grid7 .list h4 {
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

/*h4内のspan（小さな装飾文字）*/
.list-grid7 .list h4 span {
  display: block;
  font-weight: normal;
  font-size: 0.7em;
}

/*ボックス内のp要素*/
.list-grid7 .list p {
  font-size: 0.85rem;
  /*文字サイズを85%に*/
  line-height: 1.5;
  /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid7 .list figure {
  margin: 0 auto;
  margin-bottom: 1rem;
  /*画像の下に空けるスペース*/
}


/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

  /*ブロック全体を囲むブロック*/
  .list-grid7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem
  }

  /*トップページ ships*/
  #ships .list-grid7 {
    grid-template-columns: repeat(3, 1fr);
  }

  /*トップページ サービス*/
  #service .list-grid7 {
    grid-template-columns: repeat(4, 1fr);
  }

  /*パンフレット*/
  #brochures .list-grid7 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*追加指定ここまで*/

/*パンフレット brochures.html
---------------------------------------------------------------------------*/
.list .grid_ic.ic-pdf {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transform: translate(25%, 25%);
  -o-transform: translate(25%, 25%);
  -ms-transform: translate(25%, 25%);
  -webkit-transform: translate(25%, 25%);
  transform: translate(25%, 25%);
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
  .list .grid_ic.ic-pdf {
    width: 42px;
    height: 42px;
  }
}


/*ご利用の流れ
---------------------------------------------------------------------------*/
.flow-box * {
  margin: 0;
  padding: 0;
}

/*背景画像*/
#flow {
  background: url("/images/bg-flow.png") no-repeat right top / 50vw;
  /*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*ステップボックス１個あたりの設定*/
.flow-box {
  position: relative;
  margin-bottom: 4rem;
  /*下に空けるスペース、2文字分。ステップボックス同士のスペースです。*/
}

/*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
.flow-box .title h3 {
  background: var(--primary-color);
  /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color);
  /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
  margin-left: calc(-1 * var(--content-space));
  margin-right: calc(-1 * var(--content-space));
  text-align: center;
  /*テキストをセンタリング*/
  padding: 2rem;
  /*見出し内の余白。２文字分。*/
  margin-bottom: 2rem;
  /*見出しの下に空けるスペース。２文字分。*/
}

/*h3内のspan（小さな装飾文字）*/
.flow-box .title h3 span {
  display: block;
  font-size: 0.7em;
}

/*「STEP01」〜「STEP04」のテキスト*/
.flow-box .step-num {
  display: inline-block;
  position: absolute;
  left: 0px;
  top: -50px;
  width: 100%;
  font-size: 3rem;
  color: var(--primary-color);
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {
  .flow-box {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
  }

  /*「STEP01」〜「STEP04」のテキスト*/
  .flow-box .step-num {
    top: -100px;
    /*本来の場所から上に100pxずらす*/
    font-size: 5rem;
    /*文字サイズ500%*/
    opacity: 0.15;
    /*透明度。色が15%出た状態。*/
  }

  /*h3見出しが入ったブロック（大きな端末で左側に配置される背景色つきの見出しを囲むブロック）*/
  .flow-box .title {
    width: 30%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  /*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
  .flow-box .title h3 {
    margin-right: auto;
    border-radius: 0 100px 100px 0;
    /*角を丸くする指定。左上、右上、右下、左下の順番。*/
  }

  /*大きな端末で右側に配置されるテキストブロックを囲むボックス*/
  .flow-box .text {
    flex: 1;
  }

}

/*追加指定ここまで*/


/*ステップボックス
---------------------------------------------------------------------------*/
ul.step {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/*ステップ１個あたり*/
ul.step li {
  border: 2px solid var(--primary-color);
  /*枠線の幅、線種、varは色の指定で、css冒頭のprimary-colorを読み込みます。*/
  padding: 1rem;
  /*ボックス内の余白。１文字分。*/
  margin-bottom: 2rem;
  /*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
  position: relative;
}

/*「▼」のマーク*/
ul.step li::after {
  content: "▼";
  /*このテキストを出す*/
  transform: scaleX(2);
  /*２倍の大きさ*/
  position: absolute;
  left: 50%;
  /*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
  bottom: -2rem;
  /*下からの配置場所。本来の場所より上に２文字分の場所。*/
  color: var(--primary-color);
  /*文字色。css冒頭のprimary-colorを読み込みます。*/
  opacity: 0.3;
  /*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.step li:last-child::after {
  content: "";
}


/*list-yoko-scroll（お客様の声ブロック）
---------------------------------------------------------------------------*/
.list-yoko-scroll * {
  margin: 0;
  padding: 0;
}

/*横スクロールブロック全体*/
.list-yoko-scroll {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox用 */
  scroll-snap-type: x mandatory;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-right: calc(-1 * var(--content-space));
}

.list-yoko-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
.list-yoko-scroll .list {
  width: 60%;
  flex-shrink: 0;
  scroll-snap-align: start;
  margin-right: 2rem;
  position: relative;
  color: var(--primary-inverse-color);
  background: var(--secondary-color);
  border-radius: .5rem;
  padding: 2rem;
  /*ボックス内の余白。２文字分。*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

  /*ブロック内の１個あたり*/
  .list-yoko-scroll .list {
    width: 28%;
    /*ブロック１個の幅。お好みで変更して下さい。*/
  }

}

/*追加指定ここまで*/

.ind1 {
  display: block;
  padding-left: 1rem;
  text-indent: -1rem;
}

/*偶数版目のふきだしだけ、下に30pxずらす*/
.list-yoko-scroll .list:nth-of-type(even) {
  transform: translateY(30px);
}

/*ふきだしぐち（▲の形）*/
.list-yoko-scroll .list::before {
  content: "▲";
  color: var(--secondary-color);
  font-size: 30px;
  position: absolute;
  left: 30%;
  top: -40px;
}

/*ふきだし内の.text（テキスト）ブロック*/
.list-yoko-scroll .list .text {
  font-size: 0.85rem;
  line-height: 1.5;
}


/*よく頂く質問ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {
  font-size: 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*質問*/
.faq dt {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem;
  cursor: pointer;
}

/*「＋」アイコン（閉じている場合）*/
.faq dt::before {
  content: "＋";
  margin-right: 1rem;
  flex-shrink: 0;
  background: var(--secondary-color);
  color: var(--primary-inverse-color);
  /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
  width: 2rem;
  /*幅*/
  line-height: 2rem;
  /*高さ*/
  text-align: center;
  border-radius: 50%;
  /*円形にする*/
  transform: translateY(5px);
  /*アイコンの上下バランスの微調整*/
}

/*「ー」アイコン（開いている場合）*/
.faq dt.active::before {
  content: "ー";
}

/*回答*/
.faq dd {
  margin: 0 1rem 1rem 4rem;
  padding: 1rem 2rem;
  background: var(--background-color);
  color: #333;
  border-radius: 5px;
}


/*btn共通設定（ヘッダーと、フッターの上のボックス内にあるボタンの共通設定）
---------------------------------------------------------------------------*/
.btn a {
  display: block;
  text-decoration: none;
  background: var(--btn_bgcolor);
  color: var(--btn_color);
  text-align: center;
  max-width: 300px;
}

/*マウスオン時*/
.btn a:hover {
  background: var(--btn_color);
  color: var(--btn_bgcolor);
  border-radius: 5px;
}

/*予約ボタン*/
.reserve-btn a,
.reserve-non_btn a {
  padding: .5rem;
  margin-left: auto;
  margin-right: auto;
}
.reserve-btn a{
  background: var(--btn_color);
  color: var(--btn_bgcolor);
}
.reserve-btn a:hover {
  background: var(--btn_bgcolor);
  color: var(--btn_color);
}
/*画面幅500px以下*/
@media screen and (max-width:699px) {
.btn a {
    width: 280px;
  }
}

/*横並び ボタン*/
/* 横並びボタン全体を中央に */
.flex-btn {
  display: flex;
  justify-content: center;
}

/* ulを縦方向に2段構成にする */
.flex-btn .btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 1rem;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

/* 各ボタン共通スタイル */
.flex-btn .btn li {
  flex-shrink: 0;
}

/* 見た目 */
.flex-btn .btn a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 2rem;
  border-radius: 3px;
  transition: background-color 0.3s;
  min-width: 100px;
}
/* 強調ボタン */
.flex-btn .btn li.highlight {
  position: relative;
  flex: 0 0 100%;
  text-align: center;
}
.flex-btn .btn li.highlight a {
width:fit-content;
margin: 0 auto;
}

.flex-btn .btn li.highlight .note {
  font-size: 0.85em;
  margin-top: 4px;
}
.fc-red{color: #c0392b;}

/* 「TOPに戻る」だけ幅100%で次の段に */
.flex-btn .btn .back-btn {
  flex-basis: 100%;
  background-color: var(--secondary-color);
  text-align: center;
  max-width: 300px;
}

#header-box.flex-btn {
  justify-content: flex-end;
}

#header-box.flex-btn a {
  background-color: var(--accent-inverse-color);
  color: var(--secondary-color);
  margin-left: auto;
  margin-right: auto;
}

#header-box.flex-btn a:hover {
  background: var(--secondary-color);
  color: var(--accent-inverse-colorr);
}


/*フッターの上のボックス内にあるボタン（ここにない設定は、すぐ上の「btn共通設定」にあります。）
---------------------------------------------------------------------------*/
/* 共通設定 */
.banner .banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* 各ボタン項目 */
.banner .banner-list li {
  width: 45%;
  max-width: 200px;
  /* 最大幅設定 */
  flex: 1 1 45%;
}

/* aタグ中央揃え + バナー画像中央表示 */
.banner .banner-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 画像の中央配置 + サイズ調整 */
.banner .banner-list a img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 900px以上の表示 */
@media screen and (min-width: 900px) {
  .banner .banner-list li {
    width: 18%;
    max-width: 200px;
    flex: 1 1 18%;
  }
}

/*追加指定ここまで*/


/*波のアニメーション
---------------------------------------------------------------------------*/
/*アニメーション*/
@keyframes move-wave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/*波を囲む全体のブロック*/
.wave-section {
  position: relative;

  /*以下の３行の数字については、下のwaveのheight(波の高さ)から1を差し引いた形です。隙間が出る場合があるのでそれが出ないようにしています。*/
  padding-top: 79px;
  top: -79px;
  margin-bottom: -79px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave-section .text {
  background: var(--primary-color);
  /*背景色。css冒頭のprimary-colorを読み込みます。*/
}

.wave-wrap use {
  fill: var(--secondary-color);
}

/*上下の波（共通）*/
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  /*波の高さ。ここを変更する場合は上の.wave-sectionの３箇所の数字も合わせて変更して下さい。*/
}

.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave .wave-wrap {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: move-wave 10s linear infinite;
  /*ここの10sを変更すれば波のアニメーション速度が変わります*/
}

/*上の波*/
.wave-top {
  top: 0;
}

/*下の波*/
.wave-bottom {
  bottom: 0;
  transform: rotate(180deg)
}


/*フッター
---------------------------------------------------------------------------*/
#footer * {
  margin: 0;
  padding: 0;
}

#footer ul {
  list-style: none
}

/*ブロック全体*/
#footer {
  background: var(--secondary-color);
  color: var(--primary-inverse-color);
  padding: var(--content-space);
  /*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

#footer a {
  text-decoration: none;
}


#footer li {
  list-style: disc
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer div.footer1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer div.footer2 {
  flex: 1;
}

/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {
  #footer {
    display: flex;
    gap: 2rem;
    /*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
  }

  /*ロゴやSNSアイコンが入ったブロック*/
  #footer div.footer1 {
    text-align: left;
    width: 40%;
    /*幅。40%。*/
  }

}

/*追加指定ここまで*/
/*Copyright部分*/
#footer small {
  display: block;
  text-align: right;
  margin-top: 2rem;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
#footer .sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /*アイコン同士のマージン的な要素。１文字分。*/
}

#footer .sns i {
  font-size: 30px;
}


/*Google Map用
---------------------------------------------------------------------------*/
#footer .iframe {
  width: 100%;
  height: 0;
  padding-top: 56.25% !important;
  /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
  position: relative;
  overflow: hidden;
}

#footer .iframe iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}


/*フッター内の受付時間テーブル
---------------------------------------------------------------------------*/
.week {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 5px;
  /*角を丸くする指定*/
  border: 1px solid #ccc;
  /*テーブル外側の線の幅、線種、色*/
  table-layout: fixed;
  /*幅を均等に*/
  background: #fff;
  /*テーブル全体の背景色*/
  color: #555;
  /*テーブル全体の文字色*/
}

/*受付時間の幅*/
.week th:first-child,
.week td:first-child {
  width: 25%;
}

/*各曜日の幅*/
.week th:not(:first-child),
.week td:not(:first-child) {
  width: calc(75% / 7);
  /*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.week th,
.week td {
  padding: 1rem 0;
  /*ボックス内の余白。上下に１文字分、左右は0。*/
  text-align: center;
  /*テキストをセンタリング*/
  border-bottom: 1px solid #ccc;
  /*下の線の幅、線種、色*/
  border-right: 1px solid #ccc;
  /*右の線の幅、線種、色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.week th:last-child,
.week td:last-child {
  border-right: none;
}

/*最後の行の下線を消す*/
.week tr:last-child td {
  border-bottom: none;
}

/*th(曜日)の追加指定*/
.week th {
  background: #fafafa;
  /*背景色*/
}

.week td {
  border-bottom: 1px solid #ccc;
  /*下の線の幅、線種、色*/
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
  text-decoration: none;
  display: block;
  background: #555;
  color: #ccc;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: bold;
  margin-right: 0.5em;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed;
  /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px;
  /*右からの配置場所指定*/
  bottom: 20px;
  /*下からの配置場所指定*/
  color: #fff;
  /*文字色*/
  font-size: 1.5rem;
  /*文字サイズ*/
  background: rgba(0, 0, 0, 0.2);
  /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px;
  line-height: 60px;
  border-radius: 50%;
}


/*bg
---------------------------------------------------------------------------*/
.bg1 {
  background: var(--secondary-color);
  color: var(--secondary-inverse-color);
}

.bg2 {
  background: #eee;
}

/*背景 -blue*/
.bg3 {
  background-color: var(--background-color);
}

/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*共通設定*/
.bg-slideup {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/*slideup1画像*/
.slideup1 {
  background-image: url("/images/bg-slideup1.avif");
  color: #fff;
  border-radius: 10vw 10vw 0 0;
  position: relative;
  /* 疑似要素が内部で絶対配置できるようにする */
  overflow: hidden;
  /* オーバーフロー防止 */
}

.slideup1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10vw 10vw 0 0;
  /* 本体と同じ角丸 */
  pointer-events: none;
  /* 背景だけに影響、ユーザー操作には反応しない */
}

/*slideup2画像*/
.slideup2 {
  position: relative;
  background-image: url("/images/bg-kodawari.avif");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.slideup2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 0;
  pointer-events: none;
}

.slideup2 section {
  position: relative;
  z-index: 1;
}

/*slideup3画像*/
.slideup3 {
  background-image: url("/images/bg-slideup1.avif");
  position: relative;
  min-height: 350px;
}

/*slideup3の上部にグラデーションをかけて、ブロックとの境界をなめらかにする*/
.slideup3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(to bottom, var(--accent-inverse-color), transparent 40%);
  /* 上から透明にフェード、下の方（80%〜）は完全に透明 */
  pointer-events: none;
  z-index: 0;
}

.slideup3 * {
  position: relative;
  z-index: 2;
}

/*ページメイン画像
---------------------------------------------------------------------------*/
.slideup1-img-wrapper {
  position: relative;
  width: 100%;
  height: 60vh;
  /* 画面の60%の高さ */
  overflow: hidden;
}

.slideup1-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideup1-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  text-align: center;
  z-index: 1;
}

@media (max-width: 768px) {
  .slideup1-img-wrapper {
    height: 50vh;
    /* スマホではちょい短く */
  }
}

/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
  padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
  display: inline-block;
  text-align: center;
  line-height: 1.8;
  border-radius: 2px;
  padding: 0 1rem;
  width: 8rem;
  transform: scale(0.85);
  border: 1px solid #777
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-bg1 {
  border-color: transparent;
  background: #cd0000;
  color: #fff;
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
  border-color: transparent;
  /*枠線を透明に*/
  background: var(--primary-color);
  /*背景色。冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color);
  /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

  /*ブロック全体*/
  .new {
    display: grid;
    /*gridを使う指定*/
    grid-template-columns: auto 1fr;
    /*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
  }

}

/*追加指定ここまで*/


/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-30deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
  visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.2s linear both;
}

/*コース / スケジュールtable
---------------------------------------------------------------------------*/
/* 横スクロールを許す親ラッパー */
.schedule-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* テーブルのスタイルはそのまま */
table.schedule {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--primary-inverse-color);
  min-width: 600px;
  /* スクロール対象になるように最低幅を設定 */
}

/* セル基本 */
.schedule th,
.schedule td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
}

.schedule th {
  background-color: #fafafa;
}

/* 1列目だけ固定 */
.schedule th:first-child,
.schedule td:first-child {
  position: sticky;
  left: 0;
  background: #fafafa;
  /* 背景色必須 */
  z-index: 2;
  /* 被らないようにする */
}

/* thはz-indexを上に */
.schedule th:first-child {
  z-index: 3;
}

/*sm-画面幅800px以下*/
@media screen and (max-width: 799px) {
  .schedule-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 2rem;
  }

  table.schedule {
    min-width: 600px;
    /* 水平スクロールのトリガーに */
  }
}



/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual {
  background-image: none;
}

.manual {
  padding: 5rem;
}

.manual h2,
.manual h3 {
  margin-top: 3rem;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.color-check,
.color-check a {
  color: #ff0000 !important;
}

.l {
  text-align: left !important;
}

.c {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.ws {
  width: 95%;
  display: block;
}

.wl {
  width: 95%;
  display: block;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb5rem {
  margin-bottom: 5rem !important;
}

.look {
  display: inline-block;
  padding: 0px 10px;
  background: #eee;
  border: 1px solid #ccc;
  color: #888;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}

.small {
  font-size: 0.75em;
}

.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}

.pc {
  display: none;
}

.dn {
  display: none !important;
}

.block {
  display: block !important;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

  .ws {
    width: 48%;
    display: inline;
  }

  .sh {
    display: none;
  }

  .pc {
    display: block;
  }

}

/*追加指定ここまで*/