@charset "UTF-8";
/* ================================
  　フォントの設定方法
    step1:サイトで使うフォントをすべて洗い出し、Google Fontsにアクセスして"Get font"
    step2:"Get font"したhtmlのコードをheadに貼る
    step3:"Get font"したcssのコードを_variables.scss(このファイル)に貼り、変数名を付ける
    step4:デフォルト以外のフォントを使いたい場面では定義した変数名を呼び出す
   ================================ */
.base__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* ================================
   Main Layout
   ================================ */
.main-layout {
  position: relative;
  overflow-x: clip;
}

/* ================================
   Main Visual / fv
   ================================ */
.main-hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* ================================
   Main Body Layout
   ================================ */
/* ================================
   Sidebar
   ================================ */
/* ================================
   Main Content Column
   ================================ */
.main-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

/* 紙面型では中央寄せしない */
.main-content .container {
  max-width: none;
  margin: 0;
}

/* =====================================
   Section上書き

===================================== */
@media screen and (min-width: 768px) {
  .inner--left-column {
    padding-inline: 0;
  }
}

.article__header {
  margin-bottom: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  background: #fde7d9;
  border-radius: 12px;
  padding: 24px;
  border: 7px dotted #c1a1a1;
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 1024px) {
  .article__header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
.article__header .card__media img {
  margin-left: auto;
  margin-right: auto;
  width: min(100%, 200px);
  height: auto;
}
@media screen and (min-width: 1024px) {
  .article__header .card__media {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }
}
.article__header .drama-info__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  .article__header .drama-info__wrapper {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }
}
.article__header .drama-info {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.article__header .drama-info th {
  font-weight: 700;
  text-align: left;
  padding-right: 8px;
  width: 100px;
  vertical-align: top;
}
.article__header .drama-info td {
  vertical-align: top;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.article__header .article__note {
  font-size: 8px;
}
.article__header .drama-info__more {
  margin-top: 8px;
}
.article__header .drama-info__toggle {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #bcdcff;
  border-radius: 999px;
  background: #eef6ff;
  color: #2d6fa3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.article__header .drama-info__toggle::after {
  content: "+";
  display: inline-block;
  min-width: 1em;
  text-align: center;
  font-weight: 700;
}
.article__header .js-accordion.is-open .drama-info__toggle::after {
  content: "−";
}
.article__header .drama-info__accordion-content {
  height: 0;
  overflow: hidden;
}
.article__header .drama-info__accordion-inner {
  padding-top: 12px;
}
.article__header .drama-info--more {
  border-spacing: 0 10px;
}
.article__header .drama-info--more th {
  width: 70px;
}

.article__body {
  margin-bottom: 40px;
}
.article__body h2,
.article__body h3,
.article__body h4 {
  color: #1391e6;
  font-weight: 700;
  margin-bottom: 14px;
}
.article__body h2 {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 1.44px;
  border-left: 6px solid #1391e6;
  padding-left: 16px;
}
.article__body h3 {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1.28px;
  border-bottom: 1px solid #1391e6;
  padding-bottom: 4px;
}
.article__body h4 {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1.12px;
}
.article__body p {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 28px;
}
.article__body p:has(+ p),
.article__body p:has(+ ul),
.article__body p:has(+ ol) {
  margin-bottom: 14px;
}
.article__body ul,
.article__body ol {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.article__body ul:has(+ p),
.article__body ul:has(+ ul),
.article__body ul:has(+ ol),
.article__body ol:has(+ p),
.article__body ol:has(+ ul),
.article__body ol:has(+ ol) {
  margin-bottom: 14px;
}
.article__body ul {
  list-style: none;
  padding-left: 1.5em;
}
.article__body ol {
  list-style: decimal;
  padding-left: 1.5em;
}
.article__body .post-meta__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  color: #1391e6;
}
.article__body .post-meta__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 14px;
  height: 14px;
}
.article__body .post-meta__icon svg {
  width: 100%;
  height: 100%;
}

.review-label {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.review-label--soft {
  background: #eef6ff;
  color: #2d6fa3;
}

.review-label__name {
  font-weight: 700;
}

.review-label--soft::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18px;
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: #eef6ff transparent transparent transparent;
}

.other-review {
  border: 1px solid #e5e5e5;
  padding: 12px;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #f7f7f7;
}

.other-review__title {
  border-bottom: none;
  color: #393939;
  margin-bottom: 12px;
}

.other-review__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media screen and (min-width: 520px) {
  .other-review__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1024px) {
  .other-review__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.other-review-card {
  display: block;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e8ddd6;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.article__body .other-review-card {
  text-decoration: none;
  text-decoration-line: none;
}

.other-review-card:hover {
  background: #fffaf7;
  border-color: #d8c2b5;
}

.other-review-card__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #393939;
  min-width: 0;
}

.other-review-card__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.other-review-card__writer-name {
  font-weight: 700;
}

.other-review-card__meta {
  margin: 0;
  min-width: 0;
}

.other-review-card__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: 14px;
  min-width: 0;
}
.other-review-card__row:not(:last-child) {
  margin-bottom: 4px;
}
.other-review-card__row dt {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 70px;
  flex: 0 0 70px;
  font-weight: bold;
  color: #666;
}
.other-review-card__row dd {
  margin: 0;
  color: #6f4e37;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.other-review-card__stars {
  color: #d4a017;
  font-weight: bold;
}

.article__body-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 20px;
}
.article__body-wrapper h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
  border-left: 10px solid #1391e6;
  padding-left: 16px;
}
.pagination--article .pagination__item {
  width: 76px;
  height: 36px;
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .pagination--article .pagination__item {
    width: 84px;
    height: 36px;
    font-size: 14px;
  }
}
.pagination--article .pagination__item--prev,
.pagination--article .pagination__item--next {
  width: 114px;
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .pagination--article .pagination__item--prev,
  .pagination--article .pagination__item--next {
    width: 124px;
    font-size: 14px;
  }
}
.sommelier-score {
  margin-bottom: 10px;
}

.sommelier-score td {
  font-weight: bold;
  color: #6f4e37;
}

.sommelier-score__stars {
  color: #d4a017;
}

.sommelier-recommend {
  margin-top: 24px;
}

.sommelier-recommend__head {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid #1391e6;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  line-height: 1.6;
}

.sommelier-recommend__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.sommelier-recommend__line + .sommelier-recommend__line {
  /* margin-top: 6px; */
}

.sommelier-recommend__label {
  font-weight: 700;
  color: #666;
}

.sommelier-recommend__text {
  color: #333;
}

.article__body .sommelier-recommend p.sommelier-recommend__head {
  margin-bottom: 10px;
}

.article__body .sommelier-recommend p.sommelier-recommend__line {
  margin-bottom: 0;
}

.article__body
  .sommelier-recommend
  p.sommelier-recommend__line
  + p.sommelier-recommend__line {
  /* margin-top: 8px; */
}

.other-review-card__title {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行まで */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.other-review-card__excerpt {
  margin-top: 8px;
  color: #555;
  line-height: 1.7;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 3行で省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ameblo-link a {
  text-decoration: none;
}

.ameblo-link a:hover {
  text-decoration: underline;
}

.watch-guide {
  margin-top: 24px;
  margin-bottom: 24px;
}

.watch-guide__title {
  margin-bottom: 8px;
  padding-bottom: 6px;
  font-size: 28px;
  color: #1391e6;
  border-bottom: 2px solid #dff1fd;
}

.watch-guide__text {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.watch-guide__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
}

.watch-guide__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 6px;
  background: #9b7a67;
  font-weight: bold;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* article__body a の青文字・下線を打ち消す */
.article__body a.watch-guide__button,
.article__body a.watch-guide__button:visited,
.article__body a.watch-guide__button:hover,
.article__body a.watch-guide__button:active {
  color: #fff;
  text-decoration: none;
  text-decoration-line: none;
}

.watch-guide__button:hover {
  opacity: 0.9;
}

.watch-guide__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #777;
}

@media (max-width: 767px) {
  .watch-guide__title {
    font-size: 24px;
  }
  .watch-guide__buttons {
    max-width: 100%;
  }
  .watch-guide__button {
    width: 100%;
  }
}
/* ================================
   footer
   ================================ */
/* =====================================
    トップに戻るボタン

===================================== */