@charset "UTF-8";

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

li {
  list-style: none;
}

body {

  font-family: Noto Sans JP;
  font-weight: 400;
  font-style: normal;
  font-size: var(--main-text);
  background-color: #FFF4EE;

  color: #5B534D;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main {
  padding-top: 40px;
}

.content-ttl {
  font-size: var(--main-heading);
  text-align: center;
  font-weight: bold;
  margin-bottom: 40px;
}

.ttl-box {
  position: relative;
}

.accent-bird {
  /* max-width: 50px; */
  width: 12.8%;
  max-width: 75px;
  position: absolute;
  top: -65px;
  left: 5px;
  /* 画像を左右反転（位置はそのまま、向きだけ逆に） */
  transform: scaleX(-1);
}

.accent-bird,
.accent-monkey {
  display: block;
}

.grass-hr {
  height: 20px;
  background-image: url(/assets/img/news-grass.png);
  background-repeat: repeat-x, no-repeat;
  background-position: left bottom, left bottom;
  background-size: auto 20px, 100% 8px;
  background-color: unset;
  /* margin-bottom: 20px; */
}

.category {
  width: 100px;
  background-color: #FA7DAB;
  color: #fff;
  text-align: center;
  margin-bottom: 0.5em;
}

.date {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--sub-heading);
  margin-bottom: 0.5em;
}

h1 {
  font-size: 27px;
  /* text-align: center; */
  margin-bottom: 40px;
  /* 日本語を文字の途中で折り返さない（改行は <br>・スペース・かっこの後だけ）。
     Safariで「目」だけ次の行に落ちるのを防ぐため */
  word-break: keep-all;
}

/* タイトルの折り返し
   ・「エムズ保育園関目」は途中で切らない（1行に入らないときは、まとめて次の行へ）
   ・全角スペースは行末に残ると1文字だけ次の行に落ちる原因になるので、PCだけ表示（u-1024-inline） */
.ttl-nowrap {
  display: inline-block;
}

.inner {
  max-width: 360px;
  margin: 0 auto;
}

.facility-name {
  font-size: 14px;
  background-color: #fdfdfd;
  width: 150px;
  border-radius: 17px;
  border: 1px solid #707070;
  text-align: center;
  margin: 30px 0;

}

.mv {
  width: 100%;
  margin-bottom: 40px;
}

.content-box {
  position: relative;
  margin-bottom: 80px;
}

.accent-monkey {
  width: 12.8%;
  max-width: 75px;
  position: absolute;
  top: -20px;
  right: 0;
}

.content-text {
  margin-bottom: 2em;
}

.content-text:last-child {
  margin-bottom: 0;
}

/* 本文中の見出し（■〜）。h2 の太字・大きさを打ち消して、本文と同じ見た目に
   （PCは下のメディアクエリで19pxに） */
.content-head {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.content-text a {
  color: #5B534D;
  text-decoration: underline;
}

.flex-box {
  display: flex;
  align-items: flex-end;
  justify-content: left;
  gap: 2em;
}

.sns-icon {
  display: block;
  width: 60px;
}

.sns-icon img {
  display: block;
}

.back-btn {
  display: block;
  text-align: center;
  background-color: #FA7DAB;
  border-radius: 25px;
  padding: 0.5em;
  max-width: 200px;
  margin: 80px auto;
  color: #fff;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   タブレット（600px～）：中身の幅を360px → 最大600pxに広げる
   左右に90pxずつ残すのは、右端のサル（最大75px）と画像が重ならないようにするため
   （1024px～はPCの指定で上書き）
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width: 600px) {
  .inner {
    width: calc(100% - 180px);
    max-width: 600px;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
   PC（1024px～）：w1440 カンプ（Surface Pro 8 – 1.pdf）に合わせた調整
   ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width: 1024px) {

  main {
    padding-top: 150px;
  }

  .content-ttl {
    margin-bottom: 67px;
  }

  /* 中身の幅：カンプは左端190px〜右端1250px（1060px）。画面が狭いときは左右40pxずつ空ける */
  .inner {
    width: min(1060px, 100% - 80px);
    max-width: none;
  }

  /* 鳥：1024〜1279pxは中身の左に余白がないので、SPと同じくカテゴリーの上に置く */
  .accent-bird {
    width: 75px;
    max-width: none;
    top: -75px;
    left: 0;
  }

  /* カンプ：150×29px、文字19px */
  .category {
    width: 150px;
    font-size: var(--sub-heading);
    line-height: 29px;
    margin-bottom: 18px;
  }
/* 
  .date {
    margin-bottom: 4px;
  } */

  h1 {
    margin-bottom: 18px;
    font-size: var(--main-heading);
  }

  /* 芝生：カンプは高さ54pxの枠の下側に、草が約25px見える大きさ */
  .grass-hr {
    height: 54px;
    background-size: auto 36px, 100% 8px;
  }

  /* 園名：カンプ 148×28px、文字13px */
  .facility-name {
    width: 148px;
    font-size: 13px;
    line-height: 26px;
    margin: 35px 0 42px;
  }

  /* --- メイン画像とサル -------------------------------------------
     サルは画像の右上に、画像の右端から24px離して置きます。
     サルの幅は 157px（1440px時）から画面幅に合わせて縮め（最小110px）、
     画像の幅は「画面幅 −（サル＋すき間）× 左右2つぶん」まで縮めて、
     1024〜1439pxでもサルと画像が重ならないようにしています */
  .content-box {
    --monkey-w: clamp(110px, 10.9vw, 157px);
    --mv-w: min(856px, 100vw - (var(--monkey-w) + 44px) * 2);
    margin-bottom: 79px;
  }

  .mv {
    width: var(--mv-w);
    margin: 0 auto 75px;
  }

  .accent-monkey {
    width: var(--monkey-w);
    max-width: none;
    /* 芝生のすぐ下から（園名の上の35pxぶん上げる） */
    top: -35px;
    right: auto;
    left: calc(50% + var(--mv-w) / 2 + 24px);
  }

  /* --- 本文：カンプは中身の左端から19px内側。文字17px・行の間隔25px --- */
  .content-text {
    margin-left: 19px;
    margin-bottom: 25px;
    /* 17px × 1.47 ≒ 25px（カンプの行の間隔） */
    line-height: 1.47;
  }

  /* ■の見出し行は19px */
  .content-head {
    font-size: var(--sub-heading);
  }

  /* カンプで間隔が広いところ（第4回の後・お申込み方法の後は50px、LINEの前は78px） */
  .content-text-gap {
    margin-bottom: 50px;
  }

  .content-text:has(+ .content-text .flex-box) {
    margin-bottom: 78px;
  }

  /* ＊4月1日より〜 は19px・Medium */
  .content-note {
    font-size: var(--sub-heading);
    font-weight: 500;
    margin-bottom: 63px;
  }

  /* LINEアイコン 85px、文字とのあいだ45px */
  .flex-box {
    gap: 45px;
  }

  .sns-icon {
    width: 85px;
  }

  .btn-announce {
    font-size: var(--sub-heading);
    font-weight: 700;
  }

  /* 園ページにもどる：カンプ 365×73px、文字25px */
  .back-btn {
    max-width: 365px;
    padding: 18px 0;
    border-radius: 50px;
    font-size: var(--middle-heading);
    line-height: 1.5;
    margin: 110px auto 105px;
  }
}

/* 1280px～：中身の左に100px以上の余白ができるので、
   カンプどおり鳥をカテゴリーの上端にそろえて左端に置く */
@media screen and (min-width: 1280px) {
  .accent-bird {
    width: 100px;
    top: 0;
  }
}