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

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


.article h2{
	background-color: #fde8d0;
	border-top: solid 1px #f8b500;
	border-right: solid 1px #f8b500;
	border-bottom: solid 1px #f8b500;

}


.article h3{
	border-top: solid 1px #f8b500;
	border-right: solid 1px #f8b500;
	border-bottom: solid 1px #f8b500;

}

.article h4{
	border-bottom: none;
 	border-left: solid 4px #f8b500;
	padding: 6px 6px 6px 20px;
}


.btn--orange,
a.btn--orange {
  display: block;
  margin: 0 auto;
  padding: 10px;
  color: #fff;
  background-color: #f8b500;
}


.btn-flat-simple {
  position: relative;
  display: block;
  width: fit-content; /* または width: 200px など */
  margin: 0 auto;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: white;
  background: #f8b500;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #f8b500;
  color: white;
}




/* カテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
display: none;
}


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

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

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



/************************************
** 無料占い調整用
************************************/

/* 3:2 （960×640） のアスペクト比を維持して拡大表示 */
.game-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 66.6667%; /* 640 ÷ 960 × 100 = 66.6667% */
    height: 0;
    overflow: hidden;
}

.game-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/************************************
** トップページ調整用
************************************/

/* ボタンを並べる親要素 */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
  gap: 1rem; /* 列の間隔 */
}

/* スマホサイズ（例: 600px以下）で1列に */
@media screen and (max-width: 600px) {
  .button-grid {
    grid-template-columns: 1fr;
  }
}