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

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

/** 広告のCLS 改善
 * 目的：アンカー広告のレイアウトシフトを改善するためのCSS
 * */

.ad-auto .ad-wrap, .ad-area .ad-wrap{
    min-height:280px;
}
@media screen and (max-width: 480px){
    .ad-auto .ad-wrap, .ad-area .ad-wrap{
        min-height:calc(83vw);
    }
}

/* 広告枠（プレースホルダーを確保） */
.ad-widget {
    display: flex; /* 中央配置 */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px; /* モバイル向けの最低高さ */
    background-color: #f8f8f8; /* 広告読み込み前のプレースホルダー */
}

/* 画面サイズごとの高さ調整 */
@media only screen and (min-width: 768px) { /* タブレット以上 */
    .ad-widget {
        min-height: 280px; /* タブレット用 */
    }
}

@media only screen and (min-width: 1024px) { /* PC向け */
    .ad-widget {
        min-height: 320px; /* PC向けの最低高さ */
    }
}


/* -------高さのレイアウトシフト------- */
.container {
  min-height: 100vh; /* ビューポート全体の高さを確保 */
}
.main {
  min-height: 100vh; /* ビューポートの高さに適用 */
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* 見出しリセット */
/* 見出し1 */
.article h1{
background: none;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding: 0;
font-weight: bold;
}



/* -------見出しカスタマイズ------- */
/* 見出し1 オレンジ */
.article h1 {
  font-size: 24px;
  background: linear-gradient(to right, #fcba03, #f5a623);
  padding: 1em 1.5em;
  color: #FFF;
  margin-bottom: 15px;
  border: none;
}


ul.m-bottom li {
margin-bottom: 20px;
}
ol.m-bottom li {
margin-bottom: 20px;
}
ul.mm-bottom li {
margin-bottom: 40px;
}
ol.mm-bottom li {
margin-bottom: 40px;
}




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

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

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