@charset "utf-8";

.travel-info {
  width: calc(100% - 30px);
  max-width: 1000px;
  margin: 0 auto;
}
.travel-info section {
  margin-bottom: 50px;
}
.travel-info h1 {
  width: 100%;
  margin: 40px 0;
  padding: 16px 30px;
  font-size: 28px;
  font-weight: bold;
  background: #efefef;
}
.travel-info h2 {
  position: relative;
  width: 100%;
  margin: 50px 0 20px;
  padding: 10px 20px 10px 30px;
  font-size: 22px;
  font-weight: bold;
  border: solid 1px #555;
  border-left: solid 5px #cc3302;
}
.travel-info h2::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  top: 0;
  left: 8px;
  background: #555;
}
.travel-info h3 {
  width: 100%;
  margin: 30px 0 20px;
  padding: 5px 20px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 1px #555;
  border-left: solid 5px #555;
}
.travel-info p {
  width: fit-content;
  margin-bottom: 10px;
}
.travel-info img {
  width: 100%;
  height: auto;
}
.travel-info :is(ol, ul) {
  margin: 16px 0;
}
.travel-info :is(ol, ul) li {
  margin-bottom: 5px;
}
.travel-info ol {
  padding-left: 30px;
}
.travel-info table ol {
  margin: 0;
  padding-left: 15px;
}
.travel-info ol > li {
  padding-left: 3px;
  list-style: auto;
}
.travel-info ul {
  padding-left: 33px;
}
.travel-info table ul {
  margin: 0;
  padding-left: 18px;
}
.travel-info ul > li {
  padding-left: 0;
  list-style: disc;
}
.travel-info table {
  margin: 16px 0;
}
.travel-info th {
  text-align: left;
}
.travel-info :is(th, td) {
  border: solid 1px #555;
  padding: 10px 12px;
  vertical-align: top;
}
.travel-info dt {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
}

/* 目次 */
.travel-info nav {
  margin: 50px auto;
  padding: 16px;
  border: solid 1px #555;
}
@media screen and (min-width: 768px) {
  .travel-info nav {
    padding: 30px;
  }
}
.travel-info nav h2 {
  margin: 0 0 16px;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  border: none;
}
.travel-info nav h2::before {
  display: none;
}
.travel-info nav :is(ol, ul) {
  margin: 6px 0;
}
.travel-info nav ol {
  padding-left: 24px;
}
.travel-info nav ul {
  padding-left: 27px;
}

/* -----------------------------
      見た目を補正する用のclass
  ----------------------------- */

/* ---- 文字装飾 ---- */

/* 文字を中央寄せ */
.travel-info .text-center,
.travel-info :is(table, tr, thead, tbody, tfoot).text-center :is(th, td) {
  text-align: center;
}
/* 文字を右寄せ */
.travel-info .text-right,
.travel-info :is(table, tr, thead, tbody, tfoot).text-right :is(th, td) {
  text-align: right;
}
/* 文字を大きく */
.travel-info .text-big,
.travel-info :is(table, tr, thead, tbody, tfoot).text-big :is(th, td) {
  font-size: 1.3em;
}
/* 文字を小さく */
.travel-info .text-small,
.travel-info :is(table, tr, thead, tbody, tfoot).text-small :is(th, td) {
  font-size: 0.8em;
}
/* 文字を太く */
.travel-info .text-bold,
.travel-info :is(table, tr, thead, tbody, tfoot).text-bold :is(th, td) {
  font-weight: bold;
}
/* 文字を普通の太さに */
.travel-info .text-normal,
.travel-info :is(table, tr, thead, tbody, tfoot).text-normal :is(th, td) {
font-weight: normal;
}
/* 文字を赤く */
.travel-info .text-red,
.travel-info :is(table, tr, thead, tbody, tfoot).text-red :is(th, td) {
  color: #cc3302;
}
/* 文字に下線 */
.travel-info .text-underline,
.travel-info :is(table, tr, thead, tbody, tfoot).text-underline :is(th, td) {
  text-decoration: underline;
}
/* 文字に取り消し線 */
.travel-info .text-strikethrough,
.travel-info :is(table, tr, thead, tbody, tfoot).text-strikethrough :is(th, td) {
  text-decoration: line-through;
}
/* 黒のボタン */
.travel-info .button-black {
  background: #333;
}
/* 赤のボタン */
.travel-info .button-red {
  background: #cc3302;
}
.travel-info :is(.button-black, .button-red) {
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
}
.travel-info p:has(:is(.button-black, .button-red)) {
  margin-top: 30px;
  margin-bottom: 30px;
}
.travel-info .side p:has(:is(.button-black, .button-red)) {
  margin-bottom: 0;
}

/* ---- レイアウト ---- */

/* 線で囲む */
.travel-info .border {
  border: solid 1px #555;
  padding: 10px 12px;
}
/* 背景色を灰色にする */
.travel-info :is(table, tr, thead, tbody, tfoot).back-gray :is(th, td),
.travel-info .back-gray {
  background: #efefef;
  padding: 10px 12px;
}
/* 余白なし */
.travel-info .margin0 {
  margin: 0 !important;
}
/* 要素を中央寄せ */
.travel-info .center {
  margin-left: auto;
  margin-right: auto;
}
.travel-info .side.center {
  justify-content: center;
}
/* 要素を右寄せ */
.travel-info .right {
  margin-left: auto;
  margin-right: 0;
}
.travel-info .side.right {
  justify-content: right;
}
/* 横並び */
.travel-info .side {
  display: flex;
  gap: 12px;
  width: fit-content;
  flex-wrap: wrap;
}
/* 上下中央寄せ */
.travel-info .side.middle {
  align-items: center;
}
.travel-info :is(table, tr, thead, tbody, tfoot).middle :is(th, td),
.travel-info :is(th, td).middle {
  vertical-align: middle;
}
/* 下寄せ */
.travel-info .side.bottom {
  align-items: flex-end;
}
.travel-info :is(table, tr, thead, tbody, tfoot).bottom :is(th, td),
.travel-info :is(th, td).bottom {
  vertical-align: bottom;
}
/* 1/1 */
.travel-info .max {
  width: 100%;
}
  /* 1/2 */
.travel-info .one-half {
  width: calc(50% - 6px);
}
/* 1/3 */
.travel-info .one-thirds {
  width: calc(calc(100% / 3) - 8px);
}
/* 2/3 */
.travel-info .two-thirds {
  width: calc(calc(100% - calc(100% / 3)) - 4px);
}
/* 1/4 */
.travel-info .one-quarter {
  width: calc(25% - 9px);
}
/* 3/4 */
.travel-info .three-quarter {
  width: calc(75% - 3px);
}
/* 1/5 */
.travel-info .one-fifths {
  width: calc(20% - 9.6px);
}
/* 2/5 */
.travel-info .two-fifths {
  width: calc(40% - 7.2px);
}
/* 3/5 */
.travel-info .three-fifths {
  width: calc(60% - 4.8px);
}
/* 4/5 */
.travel-info .four-fifths {
  width: calc(80% - 2.4px);
}
@media screen and (max-width: 767px) {
  /* SPでは100% */
  .travel-info .sp_max {
    width: 100%;
  }
  /* SPでは1/2 */
  .travel-info .sp_half {
    width: calc(50% - 6px);
  }
  /* SPでは1/3 */
  .travel-info .sp_one-thirds {
    width: calc(calc(100% / 3) - 8px);
  }
  /* SPでは2/3 */
  .travel-info .sp_two-thirds {
    width: calc(calc(100% - calc(100% / 3)) - 4px);
  }
  /* SPではテーブルを横スクロール */
  .travel-info .side_scroll {
    overflow-x: scroll;
  }
  /* PCのみ表示 */
  .travel-info .pc_only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  /* SPのみ表示 */
  .travel-info .sp_only {
    display: none;
  }
}