/*
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: yhira
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* =========================================================
   Chiffon FINAL STYLE
   ========================================================= */

/* カード全体 */
    .girls-list .girl-item{
      text-align:center !important;
      background:#fff !important;
      border:1px solid #d8eef6 !important;
      border-radius:18px !important;
      overflow:hidden !important;
      box-shadow:0 6px 16px rgba(79,166,198,.10) !important;
    }

    /* 名前 */
    .girls-list .girl-name{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:5px !important;

      width:calc(100% - 12px) !important;
      min-width:0 !important;

      margin:8px auto 5px !important;
      padding:6px 7px !important;

      box-sizing:border-box !important;

      border:1px solid #f4cfe0 !important;
      border-radius:999px !important;

      background:linear-gradient(90deg,#fff5fa 0%,#f2fbff 100%) !important;
      color:#db6697 !important;

      font-size:13px !important;
      font-weight:900 !important;
      line-height:1 !important;

      text-align:center !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }

    .girls-list .girl-name::before{
      content:"♡" !important;
      flex:0 0 auto !important;
      color:#ff8eb8 !important;
      font-size:11px !important;
    }

    /* 出勤時間 */
    .girls-list .girl-item .time{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;

      width:calc(100% - 16px) !important;
      min-width:0 !important;

      margin:0 auto 9px !important;
      padding:5px 5px !important;

      box-sizing:border-box !important;

      border-radius:999px !important;
      background:#edfaff !important;
      border:1px solid #ccecf7 !important;

      color:#438ca8 !important;

      font-size:11px !important;
      font-weight:800 !important;
      line-height:1 !important;
      letter-spacing:0 !important;

      text-align:center !important;
      white-space:nowrap !important;
      overflow:hidden !important;
    }

    /* 画像上のステータス */
    .girl-image{
      position:relative !important;
    }

    .girl-status-badge{
      position:absolute !important;
      left:50% !important;
      right:auto !important;
      bottom:8px !important;
      top:auto !important;
      transform:translateX(-50%) !important;

      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:5px !important;

      width:max-content !important;
      max-width:calc(100% - 14px) !important;

      margin:0 !important;
      padding:6px 10px !important;

      box-sizing:border-box !important;

      border:2px solid rgba(255,255,255,.94) !important;
      border-radius:999px !important;

      color:#fff !important;

      font-size:10px !important;
      font-weight:900 !important;
      line-height:1 !important;
      letter-spacing:.02em !important;

      white-space:nowrap !important;
      text-align:center !important;

      box-shadow:0 4px 12px rgba(44,130,160,.18) !important;
      z-index:6 !important;
    }

    /* 出勤中 */
    .girl-status-badge.working{
      background:linear-gradient(90deg,#ff79ad 0%,#ff9bc2 48%,#72d1eb 100%) !important;
    }

    /* 本日出勤 */
    .girl-status-badge.coming{
      background:linear-gradient(90deg,#76cee9 0%,#98dff0 100%) !important;
    }

    /* お休み */
    .girl-status-badge.off{
      background:rgba(128,151,162,.88) !important;
    }

    .girl-status-badge .status-dot{
      display:block !important;
      flex:0 0 auto !important;
      width:6px !important;
      height:6px !important;
      margin:0 !important;
      border-radius:50% !important;
      background:#fff !important;
      box-shadow:0 0 0 2px rgba(255,255,255,.25) !important;
    }

    /* 新人マークも左上でかわいく */
    .girl-image .new-badge{
      position:absolute !important;
      top:7px !important;
      left:7px !important;
      right:auto !important;
      bottom:auto !important;
      z-index:7 !important;

      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;

      margin:0 !important;
      padding:5px 8px !important;

      border:2px solid #fff !important;
      border-radius:999px !important;

      background:linear-gradient(90deg,#72d1eb,#ff8eb8) !important;
      color:#fff !important;

      font-size:10px !important;
      font-weight:900 !important;
      line-height:1 !important;
      white-space:nowrap !important;

      box-shadow:0 3px 9px rgba(59,143,173,.17) !important;
    }

    @media(max-width:640px){
      .girls-list .girl-item{
        border-radius:14px !important;
      }

      .girls-list .girl-name{
        gap:2px !important;
        width:calc(100% - 6px) !important;
        margin:5px auto 3px !important;
        padding:5px 2px !important;
        font-size:10px !important;
        letter-spacing:-.04em !important;
      }

      .girls-list .girl-name::before{
        font-size:8px !important;
      }

      .girls-list .girl-item .time{
        width:calc(100% - 8px) !important;
        margin:0 auto 6px !important;
        padding:4px 1px !important;
        font-size:8.5px !important;
        letter-spacing:-.06em !important;
      }

      .girl-status-badge{
        bottom:5px !important;
        gap:3px !important;
        padding:4px 6px !important;
        border-width:1px !important;
        font-size:8px !important;
      }

      .girl-status-badge .status-dot{
        width:5px !important;
        height:5px !important;
      }

      .girl-image .new-badge{
        top:5px !important;
        left:5px !important;
        padding:4px 6px !important;
        border-width:1px !important;
        font-size:8px !important;
      }
    }

@media(min-width:641px){

    /* 5列は維持 */
    #schedule .girls-list{
      display:grid !important;
      grid-template-columns:repeat(5,minmax(0,1fr)) !important;
      gap:16px !important;
    }

    /* カード */
    #schedule .girls-list .girl-item{
      position:relative !important;
      overflow:hidden !important;
      text-align:center !important;

      border:2px solid #d6edf5 !important;
      border-radius:24px !important;

      background:
        linear-gradient(180deg,#ffffff 0%,#ffffff 73%,#fff5fa 100%) !important;

      box-shadow:
        0 10px 24px rgba(66,151,184,.13),
        0 0 0 4px rgba(255,255,255,.72) inset !important;
    }

    /* 写真部分 */
    #schedule .girls-list .girl-image,
    #schedule .girls-list .girl-thumb-wrap{
      position:relative !important;
      overflow:hidden !important;
    }

    #schedule .girls-list .girl-item img{
      display:block !important;
      width:100% !important;
      aspect-ratio:3 / 4 !important;
      object-fit:cover !important;
      border-radius:21px 21px 0 0 !important;
    }

    /* 名前：白い丸ラベルではなく、カード下部の主役に */
    #schedule .girls-list .girl-name{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;

      width:calc(100% - 20px) !important;
      min-height:36px !important;

      margin:10px auto 5px !important;
      padding:7px 8px !important;

      box-sizing:border-box !important;

      border:0 !important;
      border-radius:13px !important;

      background:linear-gradient(90deg,#ffe8f2 0%,#f0fbff 100%) !important;

      color:#d95d92 !important;
      font-size:15px !important;
      font-weight:900 !important;
      line-height:1 !important;
      letter-spacing:.02em !important;

      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;

      box-shadow:none !important;
    }

    #schedule .girls-list .girl-name::before{
      content:"♡" !important;
      display:inline-block !important;
      margin-right:5px !important;
      color:#ff7cac !important;
      font-size:12px !important;
    }

    #schedule .girls-list .girl-name::after{
      content:"♡" !important;
      display:inline-block !important;
      margin-left:5px !important;
      color:#66c8e6 !important;
      font-size:12px !important;
    }

    /* 時間 */
    #schedule .girls-list .girl-item .time{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;

      width:calc(100% - 28px) !important;
      min-height:30px !important;

      margin:0 auto 11px !important;
      padding:6px 8px !important;

      box-sizing:border-box !important;

      border:1px solid #c9eaf5 !important;
      border-radius:999px !important;

      background:#f3fcff !important;
      color:#3d8aa7 !important;

      font-size:12px !important;
      font-weight:800 !important;
      line-height:1 !important;
      letter-spacing:0 !important;

      white-space:nowrap !important;
      overflow:hidden !important;
    }

    /* ステータス：画像下部中央のリボン風 */
    #schedule .girl-status-badge{
      position:absolute !important;
      left:50% !important;
      right:auto !important;
      top:auto !important;
      bottom:10px !important;

      transform:translateX(-50%) !important;

      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:5px !important;

      width:auto !important;
      min-width:86px !important;
      max-width:calc(100% - 20px) !important;
      height:30px !important;

      margin:0 !important;
      padding:0 12px !important;

      box-sizing:border-box !important;

      border:2px solid #fff !important;
      border-radius:999px !important;

      color:#fff !important;

      font-size:11px !important;
      font-weight:900 !important;
      line-height:1 !important;

      white-space:nowrap !important;

      box-shadow:0 5px 12px rgba(46,128,159,.22) !important;
      z-index:8 !important;
    }

    #schedule .girl-status-badge.working{
      background:linear-gradient(90deg,#ff72a7 0%,#ff9bc2 52%,#69cce8 100%) !important;
    }

    #schedule .girl-status-badge.coming{
      background:linear-gradient(90deg,#58c4e3 0%,#8ddbed 100%) !important;
    }

    #schedule .girl-status-badge.off{
      background:linear-gradient(90deg,#9eacb3,#bbc6cb) !important;
    }

    #schedule .girl-status-badge .status-dot{
      width:7px !important;
      height:7px !important;
      flex:0 0 7px !important;

      border-radius:50% !important;
      background:#fff !important;
      box-shadow:0 0 0 3px rgba(255,255,255,.20) !important;
    }

    /* 新人：左上 */
    #schedule .girl-image .new-badge{
      position:absolute !important;
      top:10px !important;
      left:10px !important;
      right:auto !important;
      bottom:auto !important;

      display:flex !important;
      align-items:center !important;
      justify-content:center !important;

      min-width:48px !important;
      height:27px !important;

      margin:0 !important;
      padding:0 9px !important;

      box-sizing:border-box !important;

      border:2px solid #fff !important;
      border-radius:999px !important;

      background:linear-gradient(90deg,#61cbe8,#ff83b2) !important;
      color:#fff !important;

      font-size:10px !important;
      font-weight:900 !important;
      line-height:1 !important;

      white-space:nowrap !important;
      box-shadow:0 4px 10px rgba(48,132,163,.20) !important;
      z-index:10 !important;
    }
  }


/* =========================================================
   女の子画像タップ：プロフィール・スケジュールモーダル
   ========================================================= */

#girl-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  overflow-y:auto;
  background:rgba(40,72,88,.55);
}

#girl-modal{
  position:relative;
  width:min(460px, 94vw);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  box-sizing:border-box;

  background:
    linear-gradient(180deg,#fffafd 0%,#ffffff 48%,#f3fcff 100%);
  border:3px solid #fff;
  outline:1px solid #cdebf5;
  border-radius:28px;

  box-shadow:
    0 22px 60px rgba(34,102,127,.26),
    0 0 0 5px rgba(255,255,255,.32);
}

#girl-modal::-webkit-scrollbar{
  width:6px;
}

#girl-modal::-webkit-scrollbar-thumb{
  background:#c9eaf4;
  border-radius:999px;
}

#girl-modal .modal-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;
  padding:0;

  border:2px solid #fff;
  border-radius:50%;

  background:linear-gradient(135deg,#73cfe8,#ff8db8);
  color:#fff;

  font-size:16px;
  font-weight:900;
  line-height:1;

  box-shadow:0 4px 12px rgba(51,139,171,.18);
  cursor:pointer;
}

#modal-thumb{
  overflow:hidden;
  border-radius:25px 25px 0 0;
  background:#eefaff;
}

#modal-thumb img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:440px;
  aspect-ratio:3 / 4;
  object-fit:cover;
}

#girl-modal .modal-body{
  padding:20px 22px 24px;
  text-align:center;
}

#modal-name{
  margin:0 0 7px;
  color:#dc6195;
  font-size:23px;
  font-weight:900;
  line-height:1.25;
}

#modal-spec{
  margin:0;
  color:#578da2;
  font-size:13px;
  font-weight:800;
  line-height:1.5;
}

#girl-modal .modal-divider{
  height:1px;
  margin:18px 0;
  background:linear-gradient(
    90deg,
    transparent,
    #bfe6f2 20%,
    #f2b9d2 50%,
    #bfe6f2 80%,
    transparent
  );
}

#girl-modal .modal-section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  padding:6px 15px;

  border-radius:999px;
  border:1px solid #d3ecf5;

  background:linear-gradient(90deg,#edfaff,#fff0f7);
  color:#d86798;

  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

#modal-schedule{
  display:flex;
  flex-direction:column;
  gap:7px;
}

#modal-schedule .modal-schedule-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  width:100%;
  min-height:38px;
  padding:8px 12px;
  box-sizing:border-box;

  border:1px solid #d6edf5;
  border-radius:13px;

  background:#fff;
}

#modal-schedule .modal-schedule-label{
  flex:0 0 auto;
  color:#5d8fa3;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

#modal-schedule .modal-schedule-time{
  flex:1 1 auto;
  text-align:right;
  color:#e16b9c;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

#modal-schedule .modal-schedule-time.is-off{
  color:#aebbc1;
}

#modal-comment{
  margin:0;
  color:#526e79;
  font-size:13px;
  line-height:1.8;
  text-align:left;
  white-space:pre-wrap;
}

@media(max-width:640px){

  #girl-modal-overlay{
    padding:12px;
    align-items:center;
  }

  #girl-modal{
    width:94vw;
    max-height:88vh;
    border-radius:22px;
  }

  #modal-thumb{
    border-radius:19px 19px 0 0;
  }

  #modal-thumb img{
    max-height:46vh;
  }

  #girl-modal .modal-close{
    top:8px;
    right:8px;
    width:32px;
    height:32px;
    font-size:14px;
  }

  #girl-modal .modal-body{
    padding:15px 14px 18px;
  }

  #modal-name{
    font-size:19px;
  }

  #modal-spec{
    font-size:11px;
  }

  #girl-modal .modal-divider{
    margin:14px 0;
  }

  #modal-schedule{
    gap:5px;
  }

  #modal-schedule .modal-schedule-row{
    min-height:34px;
    padding:7px 10px;
    border-radius:11px;
  }

  #modal-schedule .modal-schedule-label,
  #modal-schedule .modal-schedule-time{
    font-size:11px;
  }

  #modal-comment{
    font-size:12px;
    line-height:1.7;
  }
}


/* =========================================================
   店舗名見出し：かわいいデザイン＋中央揃え
   ========================================================= */

#schedule .shop-heading{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  margin:14px auto 16px !important;
  padding:0 !important;

  text-align:center !important;
}

#schedule .shop-heading-title{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  width:auto !important;
  min-width:130px !important;
  max-width:100% !important;

  margin:0 auto !important;
  padding:9px 22px !important;

  box-sizing:border-box !important;

  border:1px solid #cbeaf4 !important;
  border-radius:999px !important;

  background:
    linear-gradient(90deg,#edfaff 0%,#ffffff 48%,#fff1f7 100%) !important;

  color:#d95f93 !important;

  font-size:17px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;

  text-align:center !important;
  white-space:nowrap !important;

  box-shadow:
    0 5px 14px rgba(69,155,187,.10),
    inset 0 0 0 2px rgba(255,255,255,.8) !important;
}

#schedule .shop-heading-title::before{
  content:"♡" !important;
  color:#65c9e6 !important;
  font-size:13px !important;
}

#schedule .shop-heading-title::after{
  content:"♡" !important;
  color:#ff82b2 !important;
  font-size:13px !important;
}


/* 本日の出勤キャスト見出しも確実に中央 */
#schedule .chiffon-current-cast-title{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:max-content !important;
  max-width:100% !important;

  margin:6px auto 18px !important;

  text-align:center !important;
}


/* Ajax差し替え後も中央位置を維持 */
#schedule .crea-ajax-shop{
  width:100% !important;
  text-align:center !important;
}

#schedule .crea-ajax-shop .shop-heading{
  margin-left:auto !important;
  margin-right:auto !important;
}


/* スマホ */
@media(max-width:640px){

  #schedule .shop-heading{
    margin:11px auto 13px !important;
  }

  #schedule .shop-heading-title{
    min-width:110px !important;
    padding:8px 16px !important;

    font-size:14px !important;
    letter-spacing:.06em !important;
  }

  #schedule .shop-heading-title::before,
  #schedule .shop-heading-title::after{
    font-size:11px !important;
  }

  #schedule .chiffon-current-cast-title{
    width:max-content !important;
    max-width:calc(100% - 10px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }
}