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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* === Otokomi custom styles === */
.otokomi-hero img { max-width: 100%; height: auto; border-radius: 4px; }
.otokomi-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6em; margin: 1em 0; }
.otokomi-gallery img { width: 100%; height: auto; border-radius: 4px; }
.otokomi-tachiyomi-banner { display: block; position: relative; text-decoration: none; color: inherit; margin: 1em 0; }
.otokomi-tachiyomi-banner img { width: 100%; height: auto; border-radius: 6px; display: block; }
.otokomi-tachiyomi-banner__cta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: #d33; color: #fff; padding: .6em 1.5em; border-radius: 4px; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.otokomi-cta { text-align: center; margin: 1.5em 0; }
.otokomi-cta__btn { display: inline-block; background: #d33; color: #fff; padding: .8em 2em; border-radius: 4px; text-decoration: none; font-weight: bold; }
.otokomi-cta__preview { display: inline-block; background: #f0c14b; color: #111; padding: .8em 1.5em; border-radius: 4px; text-decoration: none; font-weight: bold; margin-left: .5em; }
.otokomi-specs { width: 100%; border-collapse: collapse; margin: 1em 0; }
.otokomi-specs th, .otokomi-specs td { border: 1px solid #ddd; padding: .4em .6em; text-align: left; }
.otokomi-specs th { background: #f7f7f7; width: 30%; }
.otokomi-related { margin: 2.5em 0; }
.otokomi-related__heading { font-size: 1.1em; margin-bottom: .8em; border-left: 4px solid #d33; padding-left: .5em; }
.otokomi-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1em; }
.otokomi-related__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.otokomi-related__img { width: 100%; height: auto; border-radius: 4px; }
.otokomi-related__title { font-size: .85em; margin-top: .4em; line-height: 1.35; }
.otokomi-hero { text-align: center; margin: 1em 0 1.5em; }
.otokomi-hero img { max-width: 100%; max-height: 720px; height: auto; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.otokomi-highlight { list-style: none; padding: .8em 1em; margin: 1em 0; background: #fbf6f6; border-left: 4px solid #d33; border-radius: 4px; }
.otokomi-highlight li { padding: .25em 0 .25em 1.4em; position: relative; }
.otokomi-highlight li:before { content: 'STAR'; color: #d33; position: absolute; left: 0; }
.otokomi-cta { text-align: center; margin: 2em 0; padding: 1.2em; background: linear-gradient(135deg, #2a0a0a, #4a1212); border-radius: 8px; }
.otokomi-cta__btn { display: inline-block; background: #d33; color: #fff !important; padding: 1em 2.5em; border-radius: 50px; text-decoration: none; font-size: 1.1em; font-weight: bold; box-shadow: 0 3px 10px rgba(255,80,80,.5); }
.otokomi-cta__sub { color: #f0d6d6; font-size: .85em; margin: .8em 0 0; }