@charset "Shift_JIS";

.mainframe_, .wrapper_:not(:has(.mainframe_)) {
  /* フォントサイズ（基本） */
  --fontsize-3xs: 1rem;
  --fontsize-2xs: 1.2rem;
  --fontsize-1xs: 1.4rem;
  --fontsize-s: 1.5rem;
  --fontsize-m: 1.6rem;
  --fontsize-l: 1.8rem;
  --fontsize-1xl: 2rem;
  --fontsize-2xl: 2.2rem;
  --fontsize-3xl: 2.4rem;
  --fontsize-4xl: 2.6rem;
  --fontsize-5xl: 2.8rem;
  --fontsize-6xl: 3rem;
  --fontsize-7xl: 3.2rem;
}

.mainframe_ .danran, .wrapper_:not(:has(.mainframe_)) .danran {
  /* カラー設定 */
  --color-cyan: #188fc1;
  --color-brown: #3e281d;
  --color-orange: #f2a406;
  --color-offwhite: #fefaee;

  /* フォントサイズ設定：キャンペーン紹介 */
  --fs-cp-title-pc: var(--fontsize-1xl);     /* タイトル（PC）：20px */
  --fs-cp-title-sp: var(--fontsize-l);       /* タイトル（SP）：18px */
  --fs-cp-body-pc: var(--fontsize-m);        /* 本文（PC）：16px */
  --fs-cp-body-sp: var(--fontsize-m);        /* 本文（PC）：17px */
  --fs-cp-bold-pc: var(--fontsize-l);        /* 本文強調（PC）：18px */
  --fs-cp-bold-sp: var(--fontsize-1xl);      /* 本文強調（SP）：20px */
  --fs-cp-emphasis-pc: var(--fontsize-3xl);  /* 数字強調（PC）：24px */
  --fs-cp-emphasis-sp: var(--fontsize-3xl);  /* 数字強調（SP）：24px */
  --fs-cp-detail-pc: var(--fontsize-2xs);    /* 注釈（PC）：12px */
  --fs-cp-detail-sp: var(--fontsize-1xs);    /* 注釈（SP）：14px */
  --fs-cp-inner-pc: var(--fontsize-m);       /* インナーデフォルト（PC）：16px */
  --fs-cp-inner-sp: var(--fontsize-s);       /* インナーデフォルト（SP）：15px */
}

/* 改行切り替え */
.mainframe_ .sp_only {
  display: none; 
}

.wrapper_:not(:has(.mainframe_)) .pc_only {
  display: none; 
}

/* --------------------------------------------------------------------
【PC】「夏のだんらん時間」ページ用CSS / .mainframe_ .danran
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/* フリースペースの余白 */
.mainframe_ #genre_wrap_top,
.mainframe_ #genre_wrap_btm {
  margin-bottom: 60px;
}

/* キャンペーン紹介（#danran_campaign）
--------------------------------- */
.mainframe_ #event_wrapper_top.danran #danran_campaign {
  margin-top: 20px;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner {
  position: relative;
  width: 660px;
  margin: auto;
  background: var(--color-offwhite);
}

/* キャンペーン内容 */
.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion {
  position: relative;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 20px;
  border: none;
  overflow: hidden;
  transition: all 0.6s ease;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner {
  margin: 10px 0 20px;
  padding: 20px;
  background: #fff;
  font-size: var(--fs-cp-inner-pc);
  text-align: center;
  color: #555;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p {
  font-size: var(--fs-cp-body-pc);
  line-height: 1.3;
  color: #222;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p > span {
  font-size: var(--fs-cp-bold-pc);
  font-weight: bold;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p > span > span {
  font-size: var(--fs-cp-emphasis-pc);
  vertical-align: -0.1em;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .detail_txt {
  display: inline-block;
  margin-top: 10px;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .detail_txt p {
  font-size: var(--fs-cp-detail-pc);
  line-height: 1.6;
  text-align: left;
  color: #555;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header {
  padding: 10px 0;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .header_title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-cp-title-pc);
  font-weight: bold;
  color: var(--color-brown);
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .header_title::before {
  content: '';
  display: block;
  height: 37px;
  aspect-ratio: 1 / 1.2;
  background: url("/contents/siblings/danran/2026/img/present.png") center center / cover no-repeat;
}

/* 矢印 */
.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .rounded_arrow {
  border-color: #f1a504;
  background-color: #f1a504;
}

.mainframe_ #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .rounded_arrow::before {
  border-bottom: 6px solid #fff;
}

/* ナビメニュー（#navi_menu）
--------------------------------- */
.mainframe_ .danran #navi_menu.js-change-active-area ul li a {
  background: #fff;
  color: var(--color-brown);
  border-color: var(--color-cyan);
}

.mainframe_ .danran #navi_menu.js-change-active-area ul:has(li.active-item) {
  border-bottom: 5px solid var(--color-cyan);
}

.mainframe_ .danran #navi_menu.js-change-active-area ul li a:hover {
  background: #eaf8fb;
}

.mainframe_ .danran #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  color: #fff;
}

/* タイトル（#title_list）
--------------------------------- */
.mainframe_ .danran #title_list.js-change-active-area p {
  color: var(--color-brown);
}

/* //PC ここまで */

/* ------------------------------------------------------------------
【SP】「夏のだんらん時間」ページ用CSS / .wrapper_:not(:has(.mainframe_)) .danran
--------------------------------------------------------------------- */

/* 初期設定
--------------------------------- */

/* フリースペースの余白 */
.wrapper_:not(:has(.mainframe_)) #genre_wrap_top {
  margin-bottom: 60px;
}

.wrapper_:not(:has(.mainframe_)) #genre_wrap_btm {
  margin: 30px 0;
}

/* リード文 */
.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran .txt {
  text-align: center;
}

/* キャンペーン紹介（#danran_campaign）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign {
  margin-top: 20px;
  padding: 0 3%;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner {
  position: relative;
  background: var(--color-offwhite);
}

/* キャンペーン内容 */
.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion {
  position: relative;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 3%;
  border: none;
  overflow: hidden;
  transition: all 0.6s ease;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner {
  margin: 5px 0 10px;
  padding: 15px;
  background: #fff;
  font-size: var(--fs-cp-inner-sp);
  text-align: center;
  color: #555;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p {
  font-size: var(--fs-cp-body-sp);
  line-height: 1.6;
  color: #222;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p > span {
  font-size: var(--fs-cp-bold-sp);
  font-weight: bold;
  line-height: 1.2;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .body_txt p > span > span {
  font-size: var(--fs-cp-emphasis-sp);
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .detail_txt {
  display: inline-block;
  margin-top: 10px;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_content .inner .detail_txt p {
  font-size: var(--fs-cp-detail-sp);
  text-align: left;
  color: #555;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header {
  padding: 20px 0;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .header_title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  margin: auto;
  padding: 0 4%;
  font-size: var(--fs-cp-title-sp);
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  color: var(--color-brown);
  text-indent: -0.5em;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .header_title::before {
  content: '';
  position: relative;
  top: -2px;
  display: block;
  flex-shrink: 0;
  height: 40px;
  aspect-ratio: 1 / 1.2;
  background: url("/contents/siblings/danran/2026/img/present.png") center center / cover no-repeat;
}

/* 矢印 */
.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .rounded_arrow {
  border-color: #f1a504;
  background-color: #f1a504;
}

.wrapper_:not(:has(.mainframe_)) #event_wrapper_top.danran #danran_campaign #danran_campaign_inner .js-accordion .js-accordion_header .rounded_arrow::before {
  border-bottom: 6px solid #fff;
}

/* ナビメニュー（#navi_menu）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .danran #navi_menu.js-change-active-area ul li a {
  background: #fff;
  color: var(--color-brown);
  border-color: var(--color-cyan);
}

.wrapper_:not(:has(.mainframe_)) .danran #navi_menu.js-change-active-area ul li.active-item a {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  color: #fff;
}

.wrapper_:not(:has(.mainframe_)) .danran #navi_menu.js-change-active-area ul li.active-item a::after {
  border-color: var(--color-cyan);
}

.wrapper_:not(:has(.mainframe_)) .danran #navi_menu.js-change-active-area ul li a::after {
  border-color: var(--color-brown);
}

/* タイトル（#title_list）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) .danran #title_list.js-change-active-area {
  border-color: var(--color-cyan);
}

.wrapper_:not(:has(.mainframe_)) .danran #title_list.js-change-active-area p {
  color: var(--color-brown);
}

/* //SP ここまで */