/* ========================================
   Base CSS - Main Entry Point
   全体のベーススタイルとインポート管理
======================================== */

/* Import all CSS modules */
@import url('./variables.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./components-advanced.css');
@import url('./components-specialized.css');
@import url('./utilities.css');
@import url('./detail-common.css');
@import url('./calendar-common.css');
@import url('./form-common.css');
@import url('./dropdown-common.css');
@import url('./class-improvements.css');

/* ========== Global Base Styles ========== */
* {
  box-sizing: border-box;
  font-family: "Roboto", "Arial", "Yu Gothic", "游ゴシック体", YuGothic,
    "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: calc(1 / 1920 * 100vw);
}

body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: var(--color-text-black);
}

/* ========== Legacy Support ========== */
/* 既存のクラス名との互換性を保つためのエイリアス */
.blue {
  color: var(--color-blue-status);
}

.red {
  color: var(--color-status-red);
}

/* ========== Print Styles ========== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

  a,
  a:visited {
    text-decoration: underline;
}

  .hamburger,
  .ham_menu,
  .close-btn {
    display: none !important;
}
}



/* ========== Header ========== */
header {
  width: 100%;
}
header .site_name {
  width: 100%;
  /* max-width: 1440px; */
  height: 27px;
  background-color: var(--color-bg-black);
}
header .site_name p {
  font-size: var(--font-size-base);
  color: var(--color-text-white);
  font-weight: bold;
}
header .menu_part .num {
  gap: 12px;
}
header .menu_part .num_s {
  width: 100%;
  height: 60px;
  background-color: var(--color-bg-gray);
}
header .num_s .data {
  gap: var(--spacing-xs);
}
header .num_s .data p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
header .num_s .data p:nth-of-type(2) {
  font-size: 26px;
}
header .search_c {
  gap: 10px;
}
header .search {
  width: 226px;
  height: 40px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background-color: var(--color-bg-white);
}
header .search_c .s_btn {
  height: 40px;
  padding-inline: var(--spacing-sm);
  border: none;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-white);
  cursor: pointer;
}
header .search_c input {
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-xl);
  border: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-white);
  outline: none;
}
header .search_c .search button img {
  width: 20px;
  height: auto;
}
header .search_c .search button {
  background-color: var(--color-primary-dark);
  border: none;
  width: 50px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  color: var(--color-text-white);
  cursor: pointer;
}
header .menuBar .t_part {
  position: relative;
  padding-top: 47px;
  padding-bottom: 22px;
  margin-bottom: 12px;
}
header .menuBar .ribbon {
  background: url("/base_assets/img/ribbon.png") no-repeat center / cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 91px;
  height: 116px;
  padding-top: 16px;
}
header .menuBar .ribbon .heart {
  font-size: 18px;
  margin-bottom: 4px;
  width: 20px;
  height: auto;
}
header .menuBar .ribbon .count {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-white);
}
header .menuBar .ribbon .label {
  font-size: var(--font-size-base);
  color: var(--color-text-white);
}

header .menuBar .title {
  width: 225px;
  height: auto;
}
header .menu_list {
  width: 100%;
  margin-bottom: 20px;
  gap: 16px;
}
header .menu_list .menu {
  border: 1px solid var(--color-text-black);
  flex: 1;
  min-width: 111px;
  height: 67px;
  color: var(--color-text-black);
  font-size: 13px;
  text-align: center;
}
header .menu_list .menu:hover {
  background-color: var(--color-bg-black);
  color: var(--color-text-white);
}
header .menuBar .ad {
  width: 100%;
  font-size: 12px;
}
header .menuBar .ad .ad_img {
  width: 100%;
  height: auto;
}
header .menuBar .ad p {
  color: var(--color-text-white);
  font-size: var(--font-size-lg);
  font-weight: bold;
}
header .menuBar .ad .ad_more {
  width: 100%;
  height: fit-content;
  margin-top: -3px;
  justify-content: right;
  padding-right: 40rem;
  background-color: var(--color-blue-accent);
}
header .menuBar .ad .ad_more img {
  height: 25px;
}
header .adSp {
  width: 100%;
  height: auto;
  display: none;
}

/* ======== New arising components at SP ========== */
header .ribbonSp {
  display: none;
}
header .ribbonSpimg {
  position: relative;
  background: url("/base_assets/img/icon_favorite.svg") no-repeat center / cover;
  width: 40px;
  height: 50px;
}
header .ribbonSp p {
  font-size: 8px;
  color: var(--color-text-brown);
  font-weight: bold;
}
header .noti {
  background-color: var(--color-bg-white);
  position: absolute;
  top: var(--spacing-sm);
  right: -40px;
  padding-inline: var(--spacing-sm);
  padding-block: var(--spacing-xs);
  border: 1px solid var(--color-primary);
  border-radius: var(--spacing-sm);
  z-index: var(--z-index-dropdown);
  color: var(--color-text-brown-dark);
  font-size: var(--spacing-xl);
}

/* ============ Footer =============== */
footer {
  width: 100%;
}
footer .container {
  width: 100%;
  background-color: var(--color-bg-gray-medium);
  padding-top: 119px;
  padding-inline: 64px;
}
footer .top {
  margin-bottom: 50px;
}
footer .top img {
  width: 250px;
  height: auto;
}
footer .snsG {
  gap: 15px;
}
footer .snsG img {
  width: 50px;
  height: auto;
}
footer .menuG {
  gap: 15px;
  padding-bottom: 42px;
}
footer .sectionG {
  width: 20%;
}
footer .section .sectionT {
  font-size: var(--font-size-md);
  color: var(--color-text-gray);
  font-weight: bold;
  margin-bottom: var(--font-size-base);
}
footer .section .sContents {
  padding-left: 5px;
}
footer .section .sContent:nth-of-type(1) {
  margin-bottom: 14px;
}

footer .section .sContent p:nth-of-type(2) {
  font-size: 13px;
  color: var(--color-text-gray);
}
footer .guide {
  width: 200px;
}
footer .guide_list {
  margin-bottom: 40px;
}
footer .guide_list p {
  font-size: var(--font-size-md);
  font-weight: bold;
  color: var(--color-text-gray);
}
footer .map_lists {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
footer .maplist {
  gap: 5px;
}
footer .maplist p {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-gray);
}
footer .bottom {
  width: 100%;
  height: 66px;
  padding-inline: 72rem;
  justify-content: space-between;
  background-color: var(--color-bg-gray-darker);
}
footer .bottom p {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
}
footer .bottom .btm_list {
  gap: 16px;
}

footer .guideListG {
  display: none;
}
footer .guideList {
  width: 45%;
}
footer .guideList p {
  font-size: var(--font-size-sm);
  color: var(--color-text-gray);
}

/* ----------- sectionG_sp (dropdown) ------------  */
.sectionG_sp {
  display: none;
  width: 100%;
  margin: auto;
  background-color: var(--color-bg-gray-medium);
}

.section_sp {
  border-bottom: 1px solid var(--color-border-medium);
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  cursor: pointer;
}

.menu-header:hover {
  background-color: var(--color-bg-light-gray);
}

.menu-header span {
  font-size: var(--font-size-md);
  color: var(--color-text-gray);
  font-weight: bold;
}

.f_arrow {
  transition: transform var(--transition-normal);
}

.f_arrow.rotate {
  transform: rotate(90deg);
}

.menu-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
  background: var(--color-bg-gray-faded);
  padding: 0 var(--spacing-xl);
}

.menu-content p {
  padding: var(--spacing-sm) 0;
  margin: 0;
  color: var(--color-text-gray-medium);
  font-size: var(--font-size-base);
}

.section_sp.open .menu-content {
  max-height: 500px;
  height: fit-content; /* Adjust depending on content */
}

footer .bottom_btn {
  display: none;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  padding-inline: 21px;
  padding-block: 15px;
}
footer .bottom_btn a {
  width: 351px;
  height: 48px;
  background-color: var(--color-secondary);
  padding-inline: 26px;
  padding-block: var(--spacing-sm);
  color: var(--color-text-white);
  font-size: var(--font-size-sm);
  font-weight: bold;
  border-radius: var(--border-radius-sm);
}

/* ================== Responsive Header & Footer ============================= */
@media (max-width: 1024px) {
  header .menu_list {
    display: none;
  }
  header .search_c {
    display: none;
  }
  header .menu_part .num {
    gap: 40rem;
    width: 100%;
    justify-content: center;
  }
  .hamburger {
    display: flex;
  }
}

@media (max-width: 965px) {
  footer .top {
    flex-direction: column;
    gap: 25px;
  }
  footer .bottom {
    flex-direction: column;
    justify-content: center;
  }
  footer .menuG {
    flex-wrap: wrap;
    justify-content: center;
  }
  footer .sectionG {
    width: 90%;
  }
  footer .guide {
    width: 90%;
  }
  footer .map_lists {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  footer .guideListG {
    display: flex;
  }
  footer .guide_list {
    display: none;
  }
}

@media (max-width: 768px) {
  header .menuBar .t_part {
    padding-inline: 19px;
    justify-content: space-between;
  }
  .hamburger {
    position: unset;
  }
  header .ribbon {
    display: none;
  }
  header .ribbonSp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header .ad {
    display: none;
  }
  header .adSp {
    display: block;
  }
  footer .container {
    padding-inline: 49px;
  }
  footer .sectionG {
    display: none;
  }
  footer .guide {
    width: 100%;
  }
  footer .snsG img {
    width: 40px;
  }
  footer .bottom .btm_list {
    display: none;
  }
  footer .sectionG_sp {
    display: block;
  }
  footer .bottom p {
    width: 245px;
    text-align: center;
  }
  footer .bottom_btn {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
  }
}

@media (max-width: 500px) {
  header .menuBar .title {
    width: 117px;
  }
  header .hamburger {
    width: 24px;
    height: 24px;
  }
  header .menuBar .t_part {
    padding: 16px;
    margin: 0;
  }
  header .ribbonSpimg {
    width: 20px;
    height: 25px;
  }
  header .noti {
    top: 3px;
    right: -25px;
    padding-inline: 5px;
    padding-block: 2px;
    border-radius: 3px;
    font-size: 10px;
  }
  footer .snsG {
    flex-wrap: wrap;
    width: 300px;
    justify-content: center;
  }
  footer .bottom_btn {
    padding-inline: 10px;
  }
  footer .bottom_btn a {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
    padding-inline: 0;
  }
}