@charset "Shift_JIS";
/**
 * トリップAIコンシェルジュ バナー
 * 施設情報/宿泊プラン/クチコミ/地図・アクセス 画面共通 
 */

.jlnsp-tripAi {
  margin-top: 20px;
}

/* 施設詳細 画面用 */
.jlnsp-tripAi.is-yad + .jln-accordion > .jln-accordion-hdl {
  margin-top: 20px;
}

/* 宿泊プラン 画面用 */
.jlnsp-tripAi.is-plan {
  margin-left: 10px;
  margin-right: 10px;
}

/* クチコミ 画面用 */
.jlnsp-tripAi.is-kuchikomi {
  margin-left: 8px;
  margin-right: 8px;
  color: #3b1800;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__inner {
  padding: 12px 8px;
  border-color: #bcb6b3;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__orangeLBdHdl {
  position: relative;
  margin-left: 6px;
  margin-right: 8px;
  font-family: -apple-system,BlinkMacSystemFont,sans-serif;
  border-left: 0;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__orangeLBdHdl::before {
  content: '';
  display: block;
  position: absolute;
  left: -4px;
  width: 4px;
  height: 16px;
  background: #e77611;
  border-radius: 2px;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__ballonText {
  border-color: #918b8a;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__ballonText::before {
  border-right-color: #918b8a;
}
.jlnsp-tripAi.is-kuchikomi .jlnsp-tripAi__notes {
  color: #5b4843;
}

/* 地図・アクセス 画面用 */
.jlnsp-tripAi.is-access {
  margin-left: 10px;
  margin-right: 10px;
  color: #3b1800;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__inner {
  padding: 12px 8px;
  border-color: #bcb6b3;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__orangeLBdHdl {
  position: relative;
  margin-left: 6px;
  margin-right: 8px;
  font-family: -apple-system,BlinkMacSystemFont,sans-serif;
  border-left: 0;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__orangeLBdHdl::before {
  content: '';
  display: block;
  position: absolute;
  left: -4px;
  width: 4px;
  height: 16px;
  background: #e77611;
  border-radius: 2px;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__ballonText {
  border-color: #918b8a;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__ballonText::before {
  border-right-color: #918b8a;
}
.jlnsp-tripAi.is-access .jlnsp-tripAi__notes {
  color: #5b4843;
}

/* ビュレット付き 見出し */
.jlnsp-tripAi__orangeLBdHdl {
  margin: 10px 0;
  padding-left: 6px;
  border-left: 6px solid #ff5a00;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

/* トップテキスト */
.jlnsp-tripAi__topText {
  font-size: 14px;
  line-height: 1.3;
}

/* 罫線枠 */
.jlnsp-tripAi__inner {
  border: 1px solid #ccc;
  padding: 10px;
}

/* 吹き出し */
.jlnsp-tripAi__ballon {
  margin-bottom: 16px;
}
.jlnsp-tripAi__ballonList {
  margin-top: 10px;
  padding-left: 4px;
  display: table;
}

/* 吹き出し ユーザーアイコン */
.jlnsp-tripAi__ballonList::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 43px;
  padding-right: 16px;
  vertical-align: top;
}
.jlnsp-tripAi__ballonList--woman::before {
  background: url('/assets/img/common/icons/icon_user_woman.svg') 0 0 / 25px 43px no-repeat;
}
.jlnsp-tripAi__ballonList--man::before {
  background: url('/assets/img/common/icons/icon_user_man.svg') 0 0 / 25px 43px no-repeat;
}
.jlnsp-tripAi__ballonList--middleAgedWoman::before {
  background: url('/assets/img/common/icons/icon_user_middle_aged_woman.svg') 0 0 / 25px 43px no-repeat;
}

/* 吹き出し テキストと三角形 */
.jlnsp-tripAi__ballonText {
  display: table-cell;
  position: relative;
  width: 100%;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 5px;
  vertical-align: middle;
  font-size: 12px;
}
.jlnsp-tripAi__ballonText::before,
.jlnsp-tripAi__ballonText::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left: 0;
}
.jlnsp-tripAi__ballonText::before {
  left: -8px;
  border-right-color: #999;
}
.jlnsp-tripAi__ballonText::after {
  left: -7px;
  border-right-color: #fff;
}

/* リンクボタン */
.jlnsp-tripAi__btn {
  width: 100%;
  height: 32px;
}

/* .styleguide-scopeが効いていない画面もあるので /assets/css/common/styleguide/v1/styleguide_partial.css より抽出 */
.jlnsp-tripAi__btn a {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #f4f2f2;
  background: linear-gradient(#fff,#eae6e5);
  border: 1px solid #938c89;
  border-radius: 4px;
  color: #3b1800;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
}

/* 下部 注釈 */
.jlnsp-tripAi__notes {
  margin-top: 10px;
  color: #666;
  font-size: 12px;
  line-height: 1.3;
}