/* =========================
   見出し系
========================= */

/* 囲み見出し */
.slashhead {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333333;
  font-weight: 600;
  font-size: 1.2em;
  margin: 1em 0;
}

.slashhead::before,
.slashhead::after {
  width: 3px;
  height: 40px;
  background-color: #2589d0;
  content: '';
}

.slashhead::before {
  transform: rotate(-35deg);
  margin-right: 20px;
}

.slashhead::after {
  transform: rotate(35deg);
  margin-left: 20px;
}

/* 王冠タイトル */
.crown-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 7px;
  color: #333333;
  font-weight: 600;
  font-size: 1.2em;
  margin: 1em 0;
  text-align: center;
}

.crown-title::before {
  width: 1.25em;
  height: 1.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.00488 19H22.0049V21H2.00488V19ZM2.00488 5L7.00488 8L12.0049 2L17.0049 8L22.0049 5V17H2.00488V5Z' fill='%23ffb500'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

/* =========================
   リスト系
========================= */

/* ペンマークリストBOX */
.penlist {
  width: 100%;
  border: 2px solid #e1a90e;
  border-radius: 5px;
  color: #333333;
  box-sizing: border-box;
}

.penlist > div {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -13px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #fff;
  color: #e1a90e;
  font-weight: 600;
}

.penlist > div::before {
  width: 22px;
  height: 22px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23e1a90e'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.penlist ul {
  list-style-type: disc;
  margin: 0;
  padding: 0.3em 1.5em 0.5em 2.2em;
}

.penlist li {
  padding: .3em 0;
  font-weight: 600;
}

.penlist li::marker {
  color: #e1a90e;
  font-size: 1.1em;
}

/* 緑背景タイトルBOX */
.green-bg-titlebox {
  width: 100%;
  border: 2px solid #5cc247;
  box-sizing: border-box;
}

.green-bg-titlebox > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #5cc247;
  color: #fff;
  font-weight: 600;
}

.green-bg-titlebox ul {
  list-style-type: disc;
  margin: 0;
  padding: 1em 1em 1em 2.2em;
}

.green-bg-titlebox li {
  padding: .3em 0;
}

.green-bg-titlebox li::marker {
  color: #5cc247;
  font-size: 1.1em;
}

/* 赤タイトルBOX */
.red-titlebox {
  width: 100%;
  border: 2px solid #d74242;
  box-sizing: border-box;
}

.red-titlebox > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #d74242;
  color: #fff;
  font-weight: 600;
}

.red-titlebox ul {
  list-style-type: disc;
  margin: 0;
  padding: 1em 1em 1em 2.2em;
}

.red-titlebox li {
  padding: .3em 0;
}

.red-titlebox li::marker {
  color: #d74242;
  font-size: 1.1em;
}

/* 緑タイトルBOX */
.green-titlebox {
  position: relative;
  width: 100%;
  padding: 0.5em 0em 0em 0.2em;
  border: 2px solid #2e8b57;
  box-sizing: border-box;
}

.green-titlebox > div {
  position: absolute;
  top: -.75em;
  left: 1em;
  padding: 0 .5em;
  background-color: #fff;
  color: #2e8b57;
  font-weight: 600;
}

.green-titlebox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.green-titlebox li {
  display: flex;
  align-items: center;
  gap: 0 6px;
  padding: .3em 0;
  font-weight: 600;
}

.green-titlebox li::before {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #2e8b57;
  border-left: 2px solid #2e8b57;
  transform: rotate(-45deg) translateY(-1.5px);
  content: '';
}

/* 赤チェックリスト */
.red-checklist {
  list-style-type: none;
  width: 100%;
  padding: 1em;
  border: 2px solid #b30f0f;
  box-sizing: border-box;
  margin: 0;
}

.red-checklist li {
  display: flex;
  align-items: center;
  gap: 0 5px;
  padding: .3em;
  font-weight: 600;
}

.red-checklist li::before {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #b30f0f;
  border-left: 2px solid #b30f0f;
  transform: rotate(-45deg) translateY(-1.5px);
  content: '';
}

/* 青チェックリスト */
.blue-checklist {
  list-style-type: none;
  width: 100%;
  padding: 1em;
  border: 2px solid #2589d0;
  box-sizing: border-box;
  margin: 0;
}

.blue-checklist li {
  display: flex;
  align-items: center;
  gap: 0 5px;
  padding: .3em;
}

.blue-checklist li::before {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #2589d0;
  border-left: 2px solid #2589d0;
  transform: rotate(-45deg) translateY(-1.5px);
  content: '';
}

.blue-checklist .bold {
  font-weight: 600;
}

/* オレンジ背景付きリスト */
.orange-backlist {
  width: 100%;
  background-color: #fef3e1;
  box-sizing: border-box;
}

.orange-backlist > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #886811;
  color: #fff;
  font-weight: 600;
}

.orange-backlist ul {
  list-style-type: disc;
  margin: 0;
  padding: 1em 1em 1em 2.2em;
}

.orange-backlist li {
  padding: .3em 0;
}

.orange-backlist li::marker {
  color: #886811;
  font-size: 1.1em;
}

/* =========================
   BOX系
========================= */

/* ホテルカード */
/* =========================
   ホテルカード（コンポーネント化）
========================= */

.hotel-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  border: 2px solid #0073ff;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

/* 上部レイアウト */
.hotel-card .hotel-top {
  display: flex;
  width: 100%;
  gap: 16px;
  align-items: stretch;
}

/* 画像 */
.hotel-card .hotel-img {
  width: 40%;
}

.hotel-card .hotel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* コンテンツ */
.hotel-card .hotel-content {
  width: 60%;
}

/* タイトル */
.hotel-card .hotel-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.hotel-card .hotel-title span {
  font-size: 12px;
  color: #777;
}

/* おすすめ表示 */
.hotel-card .hotel-recommend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 14px;
  color: #d17000;
}

/* 王冠アイコン */
.hotel-card .crown-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.00488 19H22.0049V21H2.00488V19ZM2.00488 5L7.00488 8L12.0049 2L17.0049 8L22.0049 5V17H2.00488V5Z' fill='%23ffb500'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ポイントリスト */
.hotel-card .hotel-points {
  margin: 0;
  padding-left: 18px;
}

.hotel-card .hotel-points li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.6;
}

/* ボタン共通 */
.hotel-card .hotel-btn,
.hotel-card .hotel-btn-expedia {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
  box-sizing: border-box;
}

/* メインボタン（Agodaなど） */
.hotel-card .hotel-btn {
  background: #0073ff;
  color: #fff;
  margin-top: 12px;
}

.hotel-card .hotel-btn:hover {
  background: #005ad1;
}

/* Expediaボタン */
.hotel-card .hotel-btn-expedia {
  background: #e9ca08;
  color: #333333;
  margin-top: 8px;
}

.hotel-card .hotel-btn-expedia:hover {
  background: #d4b800;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .hotel-card .hotel-top {
    flex-direction: column;
  }

  .hotel-card .hotel-img,
  .hotel-card .hotel-content {
    width: 100%;
  }

  .hotel-card .hotel-img img {
    height: 180px;
  }
}

/* 吹き出し付きBOX */
.blue-hukidashibox {
  position: relative;
  width: 100%;
  margin-top: 1em;
  padding: 1.8em 1.5em 1em 1.5em;
  border: 2px solid #2589d0;
  box-sizing: border-box;
}

.blue-hukidashibox > div {
  position: absolute;
  top: -1.15em;
  left: 1em;
  padding: .4em 1.4em;
  border-radius: 25px;
  background-color: #2589d0;
  color: #fff;
  font-size: .9em;
  white-space: nowrap;
}

.blue-hukidashibox > div::before {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 8px;
  background-color: #2589d0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.blue-hukidashibox p {
  margin: 0;
  font-weight: bold;
}

/* パンガンくん吹き出し */
.hukidashi {
  display: flex;
  align-items: flex-start;
  gap: 0 16px;
  width: 100%;
  box-sizing: border-box;
}

.hukidashi img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 3px solid #f2f2f2;
  border-radius: 50%;
  flex-shrink: 0;
}

.hukidashi p {
  position: relative;
  width: 100%;
  margin: 3px 0 0;
  padding: .8em 1em;
  border-radius: 8px;
  background-color: #f2f2f2;
  color: #333333;
  box-sizing: border-box;
}

.hukidashi p::before {
  position: absolute;
  left: -12px;
  top: 12px;
  width: 12px;
  height: 20px;
  background-color: #f2f2f2;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: '';
}

/* 注意BOX */
.attention-box {
  display: flex;
  grid-gap: 0 .7em;
  margin: 0 auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #ffebee;
  color: #333333;
}

.attention-box::before {
  width: 24px;
  height: 24px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.attention-box p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #f06060;
}

/* クリップ背景 */
.yellow-clip {
  position: relative;
  width: 100%;
  margin: 1em 0;
  padding: 1em 2em 1em 1.5em;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  background-color: #feffe0;
  color: #333333;
  font-weight: 600;
  box-sizing: border-box;
}

.yellow-clip::before,
.yellow-clip::after {
  position: absolute;
  content: '';
}

.yellow-clip::before {
  top: -15px;
  right: 10px;
  height: 50px;
  width: 15px;
  border: 3px solid #999;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transform: rotate(10deg);
}

.yellow-clip::after {
  top: 0;
  right: 20px;
  width: 10px;
  border: solid 5px #feffe0;
}

/* =========================
   ボタン系
========================= */

/* 緑ボタン */
.green-bottan1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 6px;
  background-color: #09770b;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
}

.green-bottan1::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

.green-bottan1:hover {
  background-color: #006700;
}

@media screen and (max-width: 768px) {
  .green-bottan1 {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
}

/* オレンジボタン */
.orange-bottan1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 6px;
  background-color: #d17000;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
}

.orange-bottan1::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

.orange-bottan1:hover {
  background-color: #b85f00;
}

@media screen and (max-width: 768px) {
  .orange-bottan1 {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    padding: 1em;
    font-size: 0.95em;
  }
}

/* 青ボタン */
.blue-bottan1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em;
  border: none;
  border-radius: 6px;
  background-color: #2f80ed;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
}

.blue-bottan1::after {
  width: 1.25em;
  height: 1.25em;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  content: '';
}

.blue-bottan1:hover {
  background-color: #1f6ed4;
}

@media screen and (max-width: 768px) {
  .blue-bottan1 {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
}

/* 星付き黄色ボタン */
.star-goldbuttan {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em .8em 45px;
  border-radius: 6px;
  text-decoration: none;
  background-color: #d17000;
  color: #fff;
  font-weight: 600;
}

.star-goldbuttan::after {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.2em;
  content: '★';
}

.star-goldbuttan:hover {
  background-color: #b85f00;
}

/* 星付き緑ボタン */
.star-greenbuttan {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em .8em 45px;
  border-radius: 6px;
  text-decoration: none;
  background-color: #09770b;
  color: #fff;
  font-weight: 600;
}

.star-greenbuttan::after {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.2em;
  content: '★';
}

.star-greenbuttan:hover {
  background-color: #006700;
}

/* 星付き青ボタン */
.star-bluebuttan {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: .9em 2em .8em 45px;
  border-radius: 6px;
  text-decoration: none;
  background-color: #2f80ed;
  color: #fff;
  font-weight: 600;
}

.star-bluebuttan::after {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.2em;
  content: '★';
}

.star-bluebuttan:hover {
  background-color: #1f6ed4;
}