@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*###### 定義 ######*/
:root {
/* Cyan */
--cerulean: #009ee5;
--daintree: #00202e;
--seagull: #80cff2;
--french-pass: #c0e7f9;
--deep-cerulean: #0077ac;
/* Blue */
--jacksons-purple: #232583;
}
/* 今日の予定：日めくりカレンダースタイル */
/* === 日めくりカレンダーデザイン === */
.himekuri-wrapper {
  max-width: 100%;
  margin: 2em auto;
  padding: 1em;
  text-align: center;
  background: #fff;
  border: 2px solid #000;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.himekuri-year {
  /*font-size: 7rem;*/
  /*font-size: 1rem~7rem(min-width:300px~max-width:1600px)*/
  font-size: clamp(1rem, -0.385rem + 7.38vw, 7rem);
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #000;
}

.himekuri-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.himekuri-day {
  /*font-size: 33rem;*/
  /*font-size: 5rem~33rem(min-width:300px~max-width:1600px)*/
  font-size: clamp(5rem, -1.462rem + 34.46vw, 33rem);
  font-weight: bold;
  line-height: 1;
  color: #000;
  & span {
  font-size: .3em;
  }
}

.himekuri-weekday {
  writing-mode: vertical-rl;
  /*font-size: 12.6rem;*/
  /*font-size: 1.8rem~12.6rem(min-width:300px~max-width:1600px)*/
  font-size: clamp(1.8rem, -0.692rem + 13.29vw, 12.6rem);
  font-weight: bold;
  color: #000;
  & span {
  font-size: .8em;
  }
}

.himekuri-month {
  /*font-size: 12.6rem;*/
  /*font-size: 1.8rem~12.6rem(min-width:300px~max-width:1600px)*/
  font-size: clamp(1.8rem, -0.692rem + 13.29vw, 12.6rem);
  font-weight: bold;
  color: #000;
  & span {
  font-size: .8em;
  }
}

.himekuri-memo {
  margin-top: 1.5em;
  padding: 1em;
  border: 1px solid #666;
  min-height: 100px;
  /*font-size: 1.1rem;*/
  /*font-size: 1rem~5rem(min-width:300px~max-width:1600px)*/
  font-size: clamp(1rem, 0.077rem + 4.92vw, 5rem);
  line-height: 1.6;
  background-color: #fdfdfd;
}

.memo-content {
  white-space: pre-wrap;
  color: #222;
}

/* モバイル対応 */
@media screen and (max-width: 480px) {
  .himekuri-day {
    /*font-size: 4rem;*/
  }
  .himekuri-weekday,
  .himekuri-month {
    /*font-size: 1.5rem;*/
  }
}
/* 非表示設定 */
.today-schedule footer {
/*display: none;*/
}
/*###### モバイルメニュー ######*/
/*** モバイルヘッダーメニュー ***/
.mobile-header-menu-buttons {
background-color: #fff;
 .logo-menu-button .menu-button-in {
 padding-left: 10px;
 padding-right: 10px;
  .site-logo-image {
  opacity: 0;
  animation: logoFalling 1.5s ease 0.5s alternate forwards;
  }
 }
}
/* ハンバーガーメニューアニメーション */
#navi-menu-close {
background-color: rgba(0,0,0,0.4) !important;
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in {
overflow: hidden;
display: block;
position: relative;
width: 100%;
height: 40px;
z-index: 0;
margin: auto;
}
.mobile-header-menu-buttons .navi-menu-button a.menu-button-in .menu-caption {
display: none;
}
.mobile-header-menu-buttons .navi-menu-button a.menu-button-in .menu-icon span {
color: #fff;
font-size: 27px;
}
.mobile-header-menu-buttons .navi-menu-button:last-child a.menu-button-in .menu-icon span {
color: var(--cerulean);
}
.mobile-header-menu-buttons li.navi-menu-button {
border-left: 1px solid #fff;
background-color: var(--cerulean);
}
.mobile-header-menu-buttons li.navi-menu-button:last-child {
border-left: 1px solid var(--cerulean);
background-color: #fff;
}
.mobile-header-menu-buttons .navi-menu-button a.menu-button-in .menu-icon {
/*margin-top: 9px;*//*Cocoonバージョン: 2.7.3.1でコメントアウト*/
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in span,
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:before,
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:after {
display: block;
position: absolute;
/*top: 5px;*//*Cocoonバージョン: 2.7.3.1で変更*/
top: 0;/*Cocoonバージョン: 2.7.3.1で変更*/
bottom: 0;
left: 0;
right: 0;
width: 27px;
height: 2px;
margin: auto;
background-color: var(--cerulean);
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in span {
overflow: hidden;
z-index: 1;
color: #fff;
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:before {
z-index: 2;
transform: translate(0, -9px);
content: "";
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:after {
z-index: 2;
transform: translate(0, 9px);
content: "";
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in span {
opacity: 1;
transition: opacity 300ms 100ms, transform .3s;
}
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:before,
.mobile-header-menu-buttons .navi-menu-button label.menu-button-in:after {
transition: transform 400ms;
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in span {
opacity: 0;
transform: scaleX(0);
transition: scaleX .3s, opacity .3s .1s;
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in:before {
transform: rotate(135deg);
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in:after {
transform: rotate(-135deg);
}
/* ナビメニューコンテンツ */
/*中身*/
.menu-content {
max-width: 100%;
height: 100%;
overflow: hidden;
line-height: 300%;
}
.navi-menu-content {
text-align: center;
}
.mobile-header-menu-buttons .navi-menu-button .navi-menu-content {
padding-top: 60px;
background-color: rgba(255,255,255,0.9);
}
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button span,
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button:before,
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button:after {
display: block;
position: absolute;
top: 25px;
right: 20px;
width: 27px;
height: 2px;
margin: auto;
background-color: var(--cerulean);
color: rgba(0,0,0,0.4);
}
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button span {
overflow: hidden;
z-index: 1;
opacity: 1;
}
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button:before {
z-index: 2;
transform: translate(0, -9px);
content: "";
transition: transform 400ms;
}
.mobile-header-menu-buttons .navi-menu-button label.menu-close-button:after {
z-index: 2;
transform: translate(0, 9px);
content: "";
transition: transform 400ms;
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked ~ #navi-menu-close + .navi-menu-content label.menu-close-button span {
opacity: 0;
width: 70px;
height: 50px;
top: 0;
right: 0;
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked ~ #navi-menu-close + .navi-menu-content label.menu-close-button:before {
transform: rotate(135deg);
}
.mobile-header-menu-buttons .navi-menu-button #navi-menu-input:checked ~ #navi-menu-close + .navi-menu-content label.menu-close-button:after {
transform: rotate(-135deg);
}
.menu-item,
.menu-button {
/*スマホのタップ時の青いハイライトを消す*/
-webkit-tap-highlight-color: transparent;
}
.menu-item {
 & a:hover {
 background-color: transparent;
 }
}
.navi-menu-content {
 .menu-item:not(.current-menu-item) > a:hover:before {
 content: "\f101";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-right: .5em;
 color: var(--cerulean);
 font-size: 90%;
 }
 .current-menu-item > a:before {
 content: "\f101";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-right: .5em;
 color: var(--cerulean);
 }
 .menu-item:not(.current-menu-item) > a:hover:after {
 content: "\f101";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-left: .5em;
 color: var(--cerulean);
 font-size: 90%;
 }
 .current-menu-item > a:after {
 content: "\f100";
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 margin-left: .5em;
 color: var(--cerulean);
 }
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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