@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* =========================================================
   マイページ（CC）
   - ヘッダーは通常フロー（固定したい場合は後で対応）
   - 左メニューは fixed（スクロールしても1pxも動かない）
   - WordPress管理バー（admin-bar）分を自動考慮
   ========================================================= */

/* 変数（ここだけ触れば全体に反映） */
:root{
  --cc-mypage-header-h: 70px;     /* マイページヘッダーの高さ */
  --cc-mypage-sidebar-w: 300px;   /* 左メニュー幅 */
  --cc-mypage-gap: 24px;          /* 左右の間隔 */
  --cc-adminbar-h: 0px;           /* 管理バー分（通常0） */
}

/* ログイン中の管理バー高さ（PCは32pxが多い） */
body.admin-bar{
  --cc-adminbar-h: 32px;
}

/* Cocoonの右サイドバー等をマイページだけ無効化 */
body.page-template-page-mypage #sidebar,
body.page-template-page-mypage .sidebar{
  display: none !important;
}
body.page-template-page-mypage #main,
body.page-template-page-mypage .content{
  width: 100% !important;
}
body.page-template-page-mypage .main,
body.page-template-page-mypage .content-in{
  max-width: 1200px;
}

/* ===== レイアウト本体 ===== */
.cc-mypage{
  display:flex;
  gap: var(--cc-mypage-gap);
  align-items:flex-start;
}

/* 右カラムを左固定分だけ右にずらす */
body.page-template-page-mypage .cc-mypage{
  padding-left: calc(var(--cc-mypage-sidebar-w) + var(--cc-mypage-gap));
  position: relative;
}

/* ===== 左メニュー（完全固定） ===== */
.cc-mypage__sidebar{
  width: var(--cc-mypage-sidebar-w);
  background:#fff;
  color:#565656;
  box-shadow: 0 0 15px rgba(0,0,0,.15);
  overflow: auto;
}

/* マイページのときだけ fixed 化（1pxも動かさない） */
body.page-template-page-mypage .cc-mypage__sidebar{
  position: fixed;
  left: 0;
  top: calc(var(--cc-mypage-header-h) + var(--cc-adminbar-h));
  height: calc(100vh - var(--cc-mypage-header-h) - var(--cc-adminbar-h));
  z-index: 500;
}

/* ===== 左メニュー中身 ===== */
.cc-mypage__title{
  font-weight:700;
  margin-bottom:12px;
}

.cc-mypage__nav{
  display:flex;
  flex-direction:column;
}

.cc-mypage__link{
  display:flex;
  align-items:center;
  gap:10px;
  color:#565656;
  text-decoration:none;

  padding:15px 20px;
  border-bottom: solid 1px #e5e5e5;
  font-size:16px;
}

.cc-mypage__link:hover{
  background:#efefef;
  transition: .3s;
  color:#565656;
}

.cc-mypage__link.is-active{
  background:#ddd;
  font-weight:bold;
}

.cc-mypage__icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  opacity:.9;
}
.cc-mypage__icon path{
  fill: currentColor;
}

.cc-mypage__label{
  display:inline-block;
}

.cc-copy{
  font-size:12px;
  display:block;
  padding:20px;
  color:#676767;
}

/* ===== 右メイン ===== */
.cc-mypage__main{
  flex:1;
  min-width:0;
  background:#fff;
  border-radius:10px;
  padding:18px;
  margin: 24px 24px 0 0;
}

.cc-mypage__heading{
  margin:0 0 12px;
}

/* ===== マイページ専用ヘッダー ===== */
.cc-mypage-header{
  background:#0f2f4c;
  color:#fff;
  height: var(--cc-mypage-header-h);
  position: fixed;
  z-index: 999;
  width: 100%;
}

.cc-mypage-header__inner{
  height:100%;
  width:100%;
  margin:0 auto;
  padding:0 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.cc-mypage-header__brand{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

.cc-mypage-header__brand img{
  max-height:36px;
  width:auto;
  height:auto;
  display:block;
}

.cc-mypage-header__right{
  display:flex;
  gap:12px;
  align-items:center;
}

.cc-mypage-header__logout{
  color:#fff;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.12);
}

/* 固定ヘッダー分だけ、マイページ全体を下げる */
body.page-template-page-mypage .cc-mypage{
  padding-top: var(--cc-mypage-header-h);
}
/* 管理バーがあるときはヘッダーも下げる（重なり防止） */
body.admin-bar .cc-mypage-header{
  top: var(--cc-adminbar-h);
}
.cc-mypage-header{ top: 0; }

/* ===== マイページフッター ===== */
.cc-mypage-footer{
  padding:18px 0;
  opacity:.8;
}
.cc-mypage-footer__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}