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

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

/*--- エックスサーバーメールフォーム埋め込み ---*/
.iframe-wrapper {
position:relative;
width:100%;
height:0;
padding-top:55%;
}
 
.iframe-wrapper iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


/*--- 折り畳みアーカイブウィジェット ---*/
/* 各年の親要素：クリックできることを示し、区切り線を入れる */
.widget_archive a.year {
    cursor: pointer;
    border-bottom: 1px dotted #ccc; /* 各年に下線を引く */
    display: block; /* クリック領域を広げる */
}
/* 各年横のアイコン */
.widget_archive a.year::after {
    font-family: "Font Awesome 5 Free";
    content: '\f107'; /* 下向き矢印のアイコン */
    margin-left: 8px; /* アイコンの位置 */
    font-weight: bold;
}
/* 各月の横並び（フレックスボックス）の設定 */
.widget_archive .years ul {
    display: flex;
    flex-flow: row wrap; /* 折り返しを許可 */
    font-size: 1rem;
    line-height: 1.5; /* 行の高さを低くする */
    text-align: center; /* 中央寄せで等間隔感を出す */
    white-space: nowrap; /* 月名（12月など）が途中で改行されないように固定 */
    text-decoration: underline; /* 各月のリンクに下線を引く */
}
/* 1行に6ヶ月ずつ並べる（PCサイズ） */
.widget_archive ul.years li {
    flex: 0 0 calc(100% / 6); /* 6列 */
}
/* レスポンシブ対応：画面幅が狭いときは3列にする */
@media (max-width: 480px) {
  .widget_archive ul.years li {
    flex: 0 0 calc(100% / 3); /* 3列 */
  }
}
/* マウスホバー時のエフェクト */
#sidebar .widget_archive ul.years li :hover {
    background: none;
    transition: 0.1s;
    color: #72c7e6;
}
/* jQueryで .hide を toggle する場合、CSSは以下のようにシンプルでOK */
.widget_archive .hide {
  display: none;
}


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

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

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