/* ===== 全体の調整 ===== */
html {
    width:100vw;
    overflow-x:clip;
}
body {
    color: var(--fc-black);
    --mv-h: 100vh;
    width:100vw;
    overflow-x:clip;
}
/* a { animation: opacity .5s linear; } */
/* a:hover { filter: brightness(var(--brightness)); } */
a { color: var(--color-black); }
a:has(.button) { display: block; }
ul { list-style: none; }
figure picture {
  display: inline-block;
  width: 100%;
  height: 100%;
}
figure img { 
  width: 100%;
  height: 100%;
}

.tb-custom { display: block !important; }
.grid > .grid-colspan-2 { grid-column: 1 / span 2;}
.font-bold { font-weight: bold; }
.text-default { font-size: 1rem; }
.font-noto { font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",system-ui,sans-serif; }

/* ===== classで使っているタグ ===== */
.class-tags {
  font-size: 0.79em;
  color: var(--brand-primary);
  gap: 10px;
  margin: 0;
}
.class-tags li {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 2.2;
  background-color: var(--color-white);
  padding-inline:1rem;
  border-radius: 50rem;
}

/* =============================
  //  カスタマイズ
  =============================*/
main {
  z-index: 0;
}

/* =============================
//  セクション 基本デザイン
=============================*/
.container-main {
  max-width: var(--container-main);
}

.radius-box {  
  border-radius: 30px;
  background-color: var(--bgc, transparent);
}

  
 /* ===== 背景 ===== */
.bg-gray { --bgc: var(--color-gray); }
.bg-pink { 
    --bgc: var(--color-pink);
    color: var(--color-white);
}
.bg-yellow { --bgc: var(--color-yellow); }
.bg-green { --bgc: var(--main-color); }
.bg-black { --bgc: var(--color-black); color: var(--color-white);}

.bg-pink-light { background-color: var(--benefit-pink); }
.bg-pink-soft { background-color: var(--benefit-soft-pink); }
.bg-green-soft { background-color: var(--benefit-soft-green); }
.bg-yellow-soft { background-color: var(--benefit-soft-green); }


/* ===== 文字の装飾 ===== */
.text-pink { color: var(--color-pink); }
.text-green { color: var(--main-color); }


/* ===== 文字の装飾 - マーカー ===== */
.text-line { background-image: linear-gradient(transparent 70%, var(--line-color) 70%);}
.text-line.yellow { --line-color: var(--color-yellow); }
.text-line.pink { --line-color: var(--color-pink); }
.text-line.green { --line-color: var(--main-color); }


/* ===== partition ===== */
.partition-vertical::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: var(--color-black);
    position: absolute;
    left: calc(-1 * var(--gap)); 
}
.partition-vertical.half-left::before { left: calc(-1 * var(--gap) / 2); }

/* =============================
  //  セクション 見出し
  =============================*/
.section-wrap {
    margin-top:0;
}
.title-group figure {
  width: var(--figure-w);
  height: var(--figure-h);
}
.section-title {
  font-size: var(--font-sz, 1rem);
  letter-spacing: 0.14em;
}
.section-title .en {
  display: block;
  font-weight: normal;
  text-transform: uppercase;
  font-size: var(--title-en, 1.63em);
}
.section-title .ja {
  display: block;
  font-weight: 900;
  font-size: var(--title-ja, clamp(2em, 3vw, 2.75em));
}
.section-title + p {
  font-size: 0.875rem;
  font-weight: bold;
}

.section-title.page .en { --title-en: 1.55em; }

/* ========================================
// タイトルのアンダーライン
=========================================== */
.title-line {
    font-size: 1.25rem;
    /* border-bottom: var(--border-base); */
    /* border-width: 6px; */
    display: inline-block;
}
.title-line::after {
  content: '';
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-inner); 
  background-color: var(--bgc, var(--main-color));
  bottom: -.5em;
}

.title-line.pink { --bgc: var(--color-pink); }
.title-line.green { --bgc: var(--main-color);}
.title-line.yellow { --bgc: var(--color-yellow);}
.title-line.black { --bgc: var(--color-black);}



/* =============================
  //  外部リンク
  =============================*/
span.blank {
    display: inline-block;
    width: var(--blank-size, 10.7px);
    height: var(--blank-size, 10.7px);
    background: url(../_img/common/icon/icon-external.svg) no-repeat 100%;
}

/* =============================
  //  フリーダイヤル
  =============================*/
.contact-free-call .tel {
    font-size: 2.3em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: .25rem;
}
.contact-free-call img { vertical-align: unset; }

/* =============================
  //  吹き出しデザイン
  =============================*/
.bubble {
    display: inline-flex;
    width: var(--bubble-w, 161px);
    height: var(--bubble-h, 38px);
    font-weight: bold;
    border: var(--border-base);
    
    border-radius: var(--radius-inner);
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding-top: 3px;
    position: absolute;
}
.bubble::after {
    content: '';
    display: block;
    width: 4px;
    height: 19px;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    position: absolute;
    bottom: -19px;
    transform: rotate(30deg);
}
.bubble.yellow { background-color: var(--color-yellow); }
.bubble.gray { background-color: var(--color-gray); }
.bubble.pink { background-color: var(--color-pink); }

/* ========================================
//ボタンのデザインに似てるラウンドデザイン
=========================================== */
.round-box {
  width: var(--round-w, 100%);
  height: var(--round-h, 60px);
  line-height: var(--round-h);
  border: var(--border-base);
  border-radius: var(--radius-inner);
  background-color: var(--bgc, var(--color-white));
}
.round-box.white-pink {
  border-color: var(--color-white);
  background: var(--color-pink);
  color: var(--color-white);
}

/* ===== リボン部分 ===== */
.centering-box:has(.ribbon-block) { display: flex; }

.ribbon-block {
    max-width: var(--max-w, 613px);
    width: 100%;
    height: var(--ribbon-h, 60px);
    line-height: var(--ribbon-h, 60px);
    font-size: 1.4em;
}
.ribbon-block::before {
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ribbon-img, url(../_img/index/ribbon-green.svg)) no-repeat center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
/* ===== pink ===== */
.ribbon-block.pink { --ribbon-img: url(../_img/about/benefit/ribbon-pink.svg); }
/* ===== yellow ===== */
.ribbon-block.yellow { --ribbon-img: url(../_img/about/benefit/ribbon-yellow.svg); }



/* ========================================
//リストの装飾　●
=========================================== */
ul.dot li::before {
    content: '●';
    margin-right: 3px;
}
ul.dot.yellow li::before { color: var(--color-yellow); }
ul.dot.green li::before { color: var(--main-color); }


/* ========================================
// 募集状況のステータス
=========================================== */
:not(.status-list) .status {
    text-align: center;
    margin-block: .3em;
    margin-inline: auto;
}
/* ===== 園の特徴リスト ===== */
.choose-list { margin-top: var(--space-4);}
.choose-list .button.button-simple figure { 
    width: 77px;
    height: 60px;
 }
.choose-list .button.button-simple { 
    --simple-w: 360px;
    --simple-h: 120px;
    line-height: 1.6;
    font-size: 1.25em; 
    gap: var(--gap-1);
    letter-spacing: 0;
    padding-inline: 0;
}
.choose-list .button.button-simple span {
    display: block;
    font-size: .7em;
}
.choose-list li:nth-of-type(1) .button.button-simple span {
    color:var(--button-pink-border);
}
.choose-list li:nth-of-type(2) .button.button-simple span {
    color:var(--button-green-border);
}
.choose-list li:nth-of-type(3) .button.button-simple span {
    color:var(--color-yellow);
}
.choose-list li > p::before,
.choose-list li > p::after,
.line-quote::before, .line-quote::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.5rem;
    background-color: var(--color-black);
    border-radius: var(--radius-inner);
    transform: rotate(-45deg);
    left: -1rem;
    bottom: -5px;
}
.choose-list li > p::after, .line-quote::after { 
    transform: rotate(45deg);
    left: unset; 
    right: -1rem;
}
.choose-list li > p > span { font-size: 1.3em; }


@media (max-width: 920px) {
  .bubble { 
    position: relative;
    right: 0;
    left: unset;
  }

  /* ===== about センターリボンと文字 920 ===== */
  .center-text {
        text-align: center;
        font-size: 1.19em;
    }
    .ribbon-block::before {
        height: 80px;
        background: var(--ribbon-img, url(../_img/index/ribbon-green-sp.svg)) no-repeat center;
    }
  .center-text .ribbon-text {
        width: 350px;
        display: block;
        padding: 0;
        font-size: 1em;
        line-height: 1.5;
    }
  .center-text .ribbon-text br { display: block !important; }

  
/* ===== pink ===== */
.ribbon-block.pink::before  { --ribbon-img: url(../_img/about/benefit/ribbon-pink-sp.svg); }
/* ===== yellow ===== */
.ribbon-block.yellow::before  { --ribbon-img: url(../_img/about/benefit/ribbon-yellow-sp.svg); }
}
@media (max-width: 520px) {
  .section-title + p { font-size: 12px;}
  .bubble { 
    left: 70px !important;
    top: 20px !important;
  }

  .title-line { display: block; }

  .status img { width: 56px; height: 56px;}
  .status-list img, .status-notice img { width: 30px; height: 30px;}

  .partition-vertical::before { 
    width: 100%;
    height: 1px;
    left: 0;
    top: 1rem;
  }
}