/* ========================================
   Responsive
   スマートフォン・タブレット専用
   768px以下
   ※ page.html / 詳細ページ専用のレスポンシブは
      page.css の一番下で管理
======================================== */

/* ========================================
   Header
======================================== */

@media (max-width: 768px) {

  .header-inner {
    width: calc(100% - 30px);
    min-height: 68px;
  }

  .logo {
    width: 165px;
  }

  .main-nav {
    display: none;
  }

  .menu-button {
    display: block;
    width: 44px;
    height: 44px;
  }

  .mobile-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 15px rgba(0, 0, 0, .08);
    transition: max-height .3s ease;
  }

  .mobile-menu nav {
    width: calc(100% - 30px);
    margin: 0 auto;
    padding: 10px 0 16px;
    padding-top: 85px;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 7px 8px;
    border-bottom: 1px dotted #cfdfe4;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
  }

  .mobile-menu a img {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .mobile-menu a.instagram-link {
    color: #d37d9c;
  }

  .site-header.menu-open .mobile-menu {
    max-height: 600px;
  }

  .site-header.menu-open .menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.menu-open .menu-button span:nth-child(2) {
    opacity: 0;
  }

  .site-header.menu-open .menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Header / Cloud */
  .header-bg {
    height: 200px;
  }

  .header-bg-center,
  .header-bg-side {
    width: 800px;
    height: 200px;
    background-size: 800px 200px;
  }

  .header-bg-left {
    right: calc(50% + 400px);
  }

  .header-bg-right {
    left: calc(50% + 400px);
  }

  .hero-balloon {
    top: 70px;
    right: 4%;
    width: 105px;
  }

  /* ----------------------------------------
     Top Page
  ---------------------------------------- */

  .container,
  .narrow {
    width: calc(91% - 30px);
  }

  .hero-slider {
    height: 70vw;
    min-height: 285px;
    max-height: 430px;
  }

  .hero-slide img {
    object-position: center center;
  }

  .hero-copy {
    top: 39%;
    right: 6%;
    max-width: 72%;
  }

  .hero-copy p {
    margin-bottom: 6px;
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.45;
  }

  .hero-copy small {
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.6;
  }

  .slider-dots {
    bottom: 10px;
  }

  /* ----------------------------------------
     Sections / clouds
  ---------------------------------------- */

  .cloud-section {
    padding-top: 0;
    padding-bottom: 40px;
  }

  .education {
    margin-top: -75px;
    padding-top: 35px;
  }

  .green-section {
    padding-top: 75px;
    padding-bottom: 50px;
  }

  .green-section .container {
    padding-top: 65px;
  }

  .information {
    margin-top: -45px;
    padding-top: 175px;
    padding-bottom: 45px;
  }

  .info-box {
    padding: 24px 18px;
    border-radius: 15px;
  }

  .information-bird {
    width: 45px;
    height: auto;
  }

  .english-title {
    font-size: 17px;
  }

  .info-box h2 {
    margin-bottom: 12px;
    font-size: 24px;
  }

  .news-list li {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.7;
  }

  .news-list time {
    display: block;
    margin-bottom: 2px;
    font-size: 16px;
  }

  /* ----------------------------------------
     Quick Links
  ---------------------------------------- */

  .quick-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(330px, calc(100% - 30px));
  }

  .quick-card {
    padding: 15px;
  }

  .quick-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.65 / 1;
    object-fit: cover;
    border-radius: 10px;
  }

  .quick-title {
    font-size: 15px;
  }

  /* ----------------------------------------
     Content layouts
  ---------------------------------------- */

  .two-column,
  .new-building {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .new-building {
    margin-top: 70px;
    padding: 20px;
    position: relative;
    z-index: 2;
  }

  .new-building img {
    order: -1;
  }

  .new-building h2 {
    font-size: 23px;
  }

  .new-building p {
    font-size: 16px;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  .feature-image {
    aspect-ratio: 1.55 / 1;
  }

  .food-images {
    gap: 7px;
  }

  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .event-grid small {
    font-size: 16px;
  }

  .event-image .season-label {
    width: 58px;
  }

  /* ----------------------------------------
     Banner Grid
  ---------------------------------------- */

  .banner-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .banner-card,
  .school-card {
    grid-column: auto;
    grid-row: auto;
  }

  .banner-card {
    min-width: 0;
    padding: 15px;
    border-radius: 15px;
  }

  .banner-title {
    padding: 5px 8px;
    font-size: 15px;
  }

  .banner-card p {
    margin: 7px 4px 0;
    font-size: 16px;
  }

  .recruit-card {
    grid-column: auto;
    grid-row: auto;
  }

  /* ----------------------------------------
     Ono Academy
  ---------------------------------------- */

  .school-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-width: 0;
    min-height: auto;
    padding: 14px;
    border-radius: 15px;
  }

  .school-left {
    width: 100%;
  }

  .school-logo {
    width: 135px;
    margin-bottom: 15px;
  }

  .school-links {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .school-links a {
    width: min(170px, 100%);
    padding: 8px;
    font-size: 13px;
  }

  .school-kindergartens {
    width: 100%;
    min-width: 0;
  }

  .kindergarten-box {
    grid-template-columns: 90px minmax(0, 1fr);
    min-width: 0;
    padding: 7px;
    border-width: 2px;
  }

  .kindergarten-mark {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kindergarten-mark img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }

  .kindergarten-detail {
    min-width: 0;
  }

  .kindergarten-name {
    display: block;
    width: 82%;
    max-width: 145px;
    margin-bottom: 4px;
  }

  .kindergarten-info {
    padding-left: 0;
  }

  .kindergarten-info p {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 9px;
    line-height: 1.5;
  }

  /* ----------------------------------------
     Map
  ---------------------------------------- */

  .map-section {
    height: 270px;
  }

  .map-section .map,
  .map-section iframe {
    display: block;
    width: 100%;
    height: 270px;
  }

  /* ----------------------------------------
     Side Buttons / TOP
  ---------------------------------------- */

  .side-buttons {
    top: 32%;
    gap: 5px;
  }

  .side-buttons a {
    width: 30px;
    padding: 14px 4px;
    font-size: 15px;
  }

  .to-top {
    position: fixed !important;
    right: 5px;
    bottom: 15px;
    width: 57px;
    height: 57px;
    font-size: 9px;
    z-index: 999999 !important;
  }

  .to-top img {
    width: 27px;
    margin-bottom: 0;
  }

  .to-top span {
    font-size: 10px;
    white-space: nowrap;
  }

  /* ----------------------------------------
     Footer
  ---------------------------------------- */

  .site-footer {
    position: relative;
    z-index: 2;
    padding: 38px 30px 20px;
  }

  .footer-inner {
    position: relative;
    z-index: 2;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 0;
    padding-bottom: 15px;
  }

  .footer-nav div:last-child {
    grid-column: 1 / -1;
  }

  .footer-nav div {
    gap: 3px;
  }

  .footer-nav strong {
    font-size: 16px;
  }

  .footer-nav a {
    font-size: 16px;
  }

  .footer-contact {
    margin-bottom: 30px;
    font-size: 13px;
  }

  .footer-logo {
    width: min(260px, 80%);
    margin-top: 50px;
  }

  .copyright {
    font-size: 9px;
  }

  /* ----------------------------------------
     Footer Extra Links
  ---------------------------------------- */

  .footer-extra-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "school1 parent"
      "school2 instagram";
    gap: 5px 0;
    margin-top: 25px;
  }

  .footer-extra-links a:nth-child(1) {
    grid-area: school1;
  }

  .footer-extra-links a:nth-child(2) {
    grid-area: school2;
  }

  .footer-extra-links a:nth-child(3) {
    grid-area: parent;
  }

  .footer-extra-links a:nth-child(4) {
    grid-area: instagram;
  }

  .footer-extra-links a {
    justify-content: flex-start;
    font-size: 14px;
  }

  .footer-icon-link img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
}

/* ========================================
   Bird animation
======================================== */

@media (hover: hover) and (pointer: fine) {
  .information-bird:hover {
    transform: translateY(-8px) rotate(3deg);
  }
}

@media (hover: none) and (pointer: coarse) {
  .information-bird {
    transition: transform .7s ease;
  }

  .information-bird.is-touching {
    transform: translateY(-8px) rotate(3deg);
  }
}