@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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



/** 広告の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);
    }
}


/*480px以下*/
@media screen and (max-width: 480px){
  #sidebar{
    display: none;
  }
}


/************************************
** コピーボタン　絵文字
************************************/



    body {
      font-family: sans-serif;
      padding: 20px;
    }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
    }
    .emoji-item {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
	  margin-bottom: 20px;
      text-align: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
		  max-width: 120px;
  width: 100%;
    }
    .emoji-item:hover {
      background-color: #f0f0f0;
    }
    .emoji {
      font-size: 2rem;
    }
    .emoji-name {
      font-size: 0.8rem;
      margin-top: 5px;
      color: #555;
      word-break: break-all;
    }
    /* オーバーレイのスタイル */
    .copied-text {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      color: green;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 10;
    }
    .emoji-item.copied .copied-text {
      visibility: visible;
      opacity: 1;
    }

/************************************
** コピーボタン　顔文字
************************************/

    body {
      font-family: sans-serif;
      padding: 20px;
    }
    /* フレックスレイアウトに変更して、各アイテムの幅を自動調節 */
    .kaomoji-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .kaomoji-item {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      /* 幅・高さはコンテンツに合わせて自動調節 */
      width: auto;
      height: auto;
    }
    .kaomoji-item:hover {
      background-color: #f0f0f0;
    }
    .kaomoji {
      font-size: 2rem;
      white-space: nowrap;
      font-family: "Courier New", Courier, monospace;
    }
    .kaomoji-name {
      font-size: 0.8rem;
      margin-top: 5px;
      color: #555;
      white-space: nowrap;
    }
    /* オーバーレイのスタイル */
    .copied-text {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      color: green;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 10;
    }
    .kaomoji-item.copied .copied-text {
      visibility: visible;
      opacity: 1;
    }



/************************************
** コピーボタン レクタングル
************************************/
.copy-box{
	padding:0.3em;/* ボタンサイズ調整 */
    width: 90%;
    margin:0 auto;
	font-size: 20px;
	text-align: center;
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 90%;/* ボタンサイズ調整 */
	height: 25px;/* ボタンサイズ調整 */
    padding: 0.5em 0.3em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "OK!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#FFAE00;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(1000%);
    -moz-transform: translateX(1000%);
    -ms-transform: translateX(1000%);
    transform: translateX(1000%);
}
/************************************
** コピーボタン2 レクタングル
************************************/
.copy2-box{
	padding:0.3em;/* ボタンサイズ調整 */
    width: 90%;
    margin:0 auto;
	font-size: 20px;
	text-align: center;
}
.copy2-box p:first-child{
    margin-top:0;
}
.copy2-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy2-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy2-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn2-copy {
    display: block;
    margin: 1em auto 2em;
    width: 100px;/* ボタンサイズ調整 */
	height: 30px;/* ボタンサイズ調整 */
    padding: 0.5em 0.3em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn2-copy:hover {
    color:#fff;
}
.btn2-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "OK!";
}
.btn2-copy .btn2-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn2-copy-active{
    background:#FFAE00;/* ボタンクリック時 背景色 */
}
.btn2-copy-active:before {
    left: 0;
}
.btn2-copy-active .btn2-copy-text {
    -webkit-transform: translateX(1000%);
    -moz-transform: translateX(1000%);
    -ms-transform: translateX(1000%);
    transform: translateX(1000%);
}

/*見出しリセット*/

.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

/*見出し設定*/

.article h2 {
  font-size: 20px !important;/*文字のサイズ*/
  border-bottom: 2px solid #323232;/*下線*/
  color: #323232;
  padding-bottom: .5em;
  margin-bottom: 20px;
  border-top: none;
}

.article h3 {
  font-size: 18px !important;/*文字のサイズ*/
  border-left: 5px solid #f2d722;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
  margin-bottom: 20px;
  border-top: none;
  border-bottom: none;
}

.article h4 {
  font-size: 18px !important;/*文字のサイズ*/
  border-left: 6px double #555;/*左線*/
  padding: .5em .7em;/*余白*/
  color: #323232;
  margin-bottom: 20px;
  border-top: none;
  border-bottom: none;
}

.article h5 {
  font-size: 18px !important;/*文字のサイズ*/
  /*線の種類（点線）2px 線色*/
  border-bottom: double 5px #f5f5f5;
}

.article h6 {
  font-size: 18px !important;/*文字のサイズ*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #dcdcdc;
}


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

ul.mm-bottom li {
margin-bottom: 35px;
}
ol.mm-bottom li {
margin-bottom: 35px;
}

/* 見出しリセット */
/* 見出し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: 26px !important;/*文字のサイズ*/
  background: #fcba03;/*背景色*/
  padding-top: 3em;
  padding-right: 1.5em;
  padding-bottom: 3em;
  padding-left: 1.5em;/*余白*/
  color: #FFF;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

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

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

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

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