@charset "UTF-8";
/*
=========================================
Animation
=========================================
*/
/*----------------------------
ローディング
----------------------------*/
#loading {
  width: 100vw;
  height: 100vh;
  background: var(--bgcolor);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
}

#loading img {
  width: 200px;
}

/*
=========================================
UTILITY
=========================================
*/
.travel-body {
  --font: "Barlow", "Zen Kaku Gothic New", sans-serif;
  --fontEn: "Afacad", sans-serif;
  --color-base: #151515;
  --color-gray: #F2F2F2;
  --color-white: #FCFCFC;
  --color-btn: #151515;
  --bgcolor: #F2F2F2;
  --bgcolor-white: #FCFCFC;
  --bgcolor-btn: #e4976b;
  --bgcolor-btn-hover: #f3a172;
  --bgcolor-sripe: #98c2de;
}

.travel-eng {
  font-family: var(--fontEn);
  letter-spacing: 0.02em;
}

.travel-mt {
  margin-top: 1rem;
}

.travel-mt-s {
  margin-top: 1rem;
}

.travel-mt-m {
  margin-top: 3rem;
}

.travel-mt-ml {
  margin-top: 4.8rem;
}

.travel-mt-l {
  margin-top: 4.8rem;
}

/* PC */
@media (min-width: 768px) {
  .travel-mt {
    margin-top: 0;
  }
  .travel-mt-s {
    margin-top: 1.2rem;
  }
  .travel-mt-m {
    margin-top: 4.4rem;
  }
  .travel-mt-ml {
    margin-top: 4.8rem;
  }
  .travel-mt-l {
    margin-top: 8rem;
  }
}
.d-block {
  display: block;
}

.d-none {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.flex {
  display: flex;
  align-items: center;
}

.grid, .grid-2, .grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.grid-2 {
  position: relative;
  gap: 1.6em;
  row-gap: 1em;
}

.grid-3 {
  gap: 1.6em;
  row-gap: 3em;
}

/* PC */
@media (min-width: 768px) {
  .grid-2 {
    max-width: 800px;
    margin-inline: auto;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: end;
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    max-width: 800px;
    gap: 1.6em;
    align-items: center;
  }
}
.fa-cart-shopping, .fa-brands, .fa-solid {
  margin-right: 0.4em;
}

.fa-cart-shopping, .fa-plane {
  font-size: 1em;
  color: #ccc;
}

.fa-instagram {
  font-size: 1.1em;
  margin-left: 2px;
}

.fa-youtube {
  font-size: 1.1em;
}

/* icon inside the social links should sit with the text baseline */
.icon-align {
  vertical-align: middle;
}

/*
=========================================
Base_Layout
=========================================
*/
::-moz-selection {
  background: var(--bgcolor-btn);
  color: #FAF9F7;
}
::selection {
  background: var(--bgcolor-btn);
  color: #FAF9F7;
}

.travel-container {
  width: 100%;
  margin-inline: auto;
  padding: 20% 4%;
}

/* PC */
@media (min-width: 768px) {
  .travel-container {
    padding: 8% 4%;
  }
}
/*
=========================================
CONTENTS
=========================================
*/
.travel-main {
  overflow-x: hidden;
  padding: 4%;
  position: relative;
  background: var(--bgcolor);
  font-family: var(--font);
  /* 基本フォントサイズ (15px〜16px) */
  font-size: clamp(0.875rem, 0.852rem + 0.11vw, 0.938rem);
  color: var(--color);
  font-weight: 400;
  line-height: 1.75;
  text-align: justify;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  word-break: initial;
  line-break: strict;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.03em;
}

.travel-main a {
  transition: 0.5s;
  text-decoration: none;
}

.travel-sec__h {
  line-height: 1.2;
  font-weight: 400;
}
.travel-sec__h2 {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}
.travel-sec__h2--img {
  width: 200px;
}
.travel-sec__h4 {
  position: relative;
  font-size: clamp(2rem, 1.818rem + 0.91vw, 2.5rem);
  color: var(--color-base);
  letter-spacing: 0.03em;
}

.travel-sec__hero {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  position: relative;
}
.travel-sec__hero--img {
  position: relative;
}
.travel-sec__lead {
  width: 100%;
  max-width: 590px;
  /* logical margin for modern browsers */
  margin-inline: auto;
  /* fallback for older WebKit (iOS 14 etc.) */
  margin-left: auto;
  margin-right: auto;
  line-height: 2;
}

.travel-sec__inoue {
  position: absolute;
  z-index: 10;
}
.travel-sec__inoue--01 {
  top: -60px;
  right: -4px;
  width: 15%;
}
.travel-sec__inoue--02 {
  bottom: 0px;
  right: -20px;
  width: 26%;
}
.travel-sec__inoue--03 {
  top: -40px;
  left: 20px;
  width: 25%;
}
.travel-sec__inoue--04 {
  bottom: 0px;
  right: 10px;
  width: 16%;
}
.travel-sec__inoue--prf {
  top: -50px;
  right: -4px;
  width: 15%;
}
.travel-sec__hr {
  border-bottom: 3px dotted #ccc;
  position: relative;
}
.travel-sec__hr--i {
  position: absolute;
  top: -16px;
  right: 24px;
  background: var(--bgcolor-white);
  padding: 10px;
}
.travel-sec__stamp {
  position: absolute;
  z-index: 10;
}
.travel-sec__stamp--hero {
  top: 10px;
  right: 0px;
  width: 30%;
}
.travel-sec__comment {
  width: 100%;
  max-width: 640px;
  /* centring rules: logical plus fallbacks */
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
}
.travel-sec__comment--container {
  position: relative;
  padding: 2em;
  background: #fafafa;
  z-index: 1;
}
.travel-sec__comment--txt {
  position: relative;
  background: #fafafa;
  z-index: 2;
  line-height: 2.1;
  /* ruled‑line pattern using background‑size for pixel‑perfect alignment */
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), #e4e4e4 1px);
  background-size: 100% 2.1em;
  /* use an em‑based offset rather than a hard pixel value –
     this scales with the font and avoids rounding differences
     between 2x/3x displays (iPhone12mini vs iPhone13). */
  background-position: 0 -0.4em;
  background-repeat: repeat-y;
}

/* TAB */
@media (min-width: 520px) {
  .travel-sec__inoue--01 {
    top: -60px;
    width: 10%;
  }
  .travel-sec__inoue--prf {
    width: 10%;
  }
  .travel-sec__comment--container {
    padding-top: 3.5em;
  }
}
/* PC */
@media (min-width: 768px) {
  .travel-sec__h2 {
    position: static;
    transform: none;
    flex: 1;
  }
  .travel-sec__h2--img {
    width: 55%;
  }
  .travel-sec__hero {
    display: flex;
    align-items: center;
  }
  .travel-sec__hero--img {
    flex: 1;
  }
  .travel-sec__inoue--01 {
    top: -80px;
    right: 0px;
    width: 10%;
  }
  .travel-sec__inoue--prf {
    top: -60px;
    right: 0px;
    width: 10%;
  }
  .travel-sec__stamp--hero {
    top: 10px;
    right: 0px;
    width: 30%;
  }
  .travel-sec__stamp--item {
    top: -40px;
    left: 200px;
    width: 12%;
  }
  .travel-sec__comment--container {
    padding-top: 1.5em;
  }
  .travel-sec__comment--txt {
    line-height: 2;
  }
}
.travel-sec__txt--s {
  padding: 0 1em;
  font-size: 0.85em;
  line-height: 1.8;
  /* simpler, more accurate ruled‑line pattern */
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), #e4e4e4 1px);
  background-size: 100% 1.8em;
  /* small em offset for consistent cross‑device alignment */
  background-position: 0 -0.4em;
  background-repeat: repeat-y;
}
.travel-sec__items {
  background: var(--bgcolor-white);
  /* --- エアメールパターンの設定 --- */
  background-image: repeating-linear-gradient(135deg, var(--bgcolor-sripe) 0, var(--bgcolor-sripe) 8px, #fafafa 8px, #fafafa 16px, var(--bgcolor-sripe) 16px, var(--bgcolor-sripe) 24px, #fafafa 24px, #fafafa 32px), repeating-linear-gradient(135deg, var(--bgcolor-sripe) 0, var(--bgcolor-sripe) 8px, #fafafa 8px, #fafafa 16px, var(--bgcolor-sripe) 16px, var(--bgcolor-sripe) 24px, #fafafa 24px, #fafafa 32px);
  background-size: 100% 10px; /* 模様の太さ */
  background-position: top, bottom; /* 上下へ配置 */
  background-repeat: no-repeat; /* 繰り返しなし（上下1つずつ） */
}
.travel-sec__item--img {
  position: relative;
}
.travel-sec__item--credit {
  margin: 1em;
}
.travel-sec__item--name {
  padding-bottom: 0.1em;
  border-bottom: 1px solid #e4e4e4;
  line-height: 1.3;
}
.travel-sec__item--price {
  padding-bottom: 0.1em;
  font-size: 0.8em;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #e4e4e4;
}
.travel-sec__item--tax {
  font-size: 0.7em;
  letter-spacing: 0.01em;
}
.travel-sec__item--design {
  position: relative;
  padding: 2em;
  border-radius: 40px;
  border: 5px solid var(--color-gray);
}
.travel-sec__item--design-h {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bgcolor-white);
  border-radius: 40px;
  padding: 0 20px;
  font-size: 16px;
  color: var(--color-base);
}
.travel-sec__item--ttl {
  font-size: 1.3em;
}
.travel-sec__item--ttl-s {
  font-family: var(--font);
  font-size: 0.8em;
  color: var(--bgcolor-btn);
}
.travel-sec__item--txt {
  margin-top: 1em;
  line-height: 2.1;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 28px, #e4e4e4 28px, #e4e4e4 29px);
}

/* PC */
@media (min-width: 768px) {
  .travel-sec__txt--s {
    /* small em offset for consistent cross‑device alignment */
    background-position: 0 -0.2em;
  }
  .travel-sec__item--txt {
    line-height: 2;
  }
}
.travel-sec__btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 8px;
}
.travel-sec__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px; /* 横長固定 */
  height: 40px; /* 高さ低め */
  border: 1px solid #151515;
  border-radius: 50%; /* ← ここ重要 */
  font-size: 14px;
  font-weight: 400;
  color: #151515;
  text-decoration: none;
  background: #f6ba91;
}
.travel-sec__btn:hover {
  background: var(--bgcolor-btn-hover);
}

/* PC */
@media (min-width: 768px) {
  .travel-sec__btns {
    padding: 0 2em 2em;
  }
}
/*
=========================================
FOOTER
=========================================
*/
.travel-copyright {
  text-align: center;
}
.travel-copyright__img {
  width: 100%;
  margin-inline: auto;
  padding: 1rem;
}
.travel-copyright__img--logo {
  max-width: 260px;
}

/*
=========================================
TOPへ
=========================================
*/
#page-top {
  position: fixed;
  bottom: 16px;
  right: 0;
  font-size: 2rem;
  line-height: 1;
  z-index: 1000;
}

#page-top a {
  display: block;
  color: #bfbfbf;
  text-align: center;
  opacity: 0.9;
  transition: all 0.3s ease;
}

#page-top a:hover {
  text-decoration: none;
  opacity: 0.5;
}

/* PC */
@media (min-width: 768px) {
  #page-top {
    bottom: 24px;
    right: 10px;
  }
}/*# sourceMappingURL=travel_style.css.map */