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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#main {
	padding-top: 0;
}

header.entry-header {
	display: none;
}

.site-name {
	display: inline-block;
}

/* ニックネーム入力エリア下のスペースを削除 */
.nickname-area {
	margin-bottom: 0 !important;
}

.nickname-ctrl {
	margin-top: -20px
}

.wpcf7-submit {
	background-color: #aedfff !important;
}

/* テキストエリアのラベル下のスペースを調整 */
.textarea-column {
	margin-bottom: 0 !important;
}

/* ▼ バナー全体のレイアウト（PC: 横並び / SP: 縦並び） */
.present-banners {
  display: flex;
  justify-content: center;   /* 中央寄せ */
  align-items: center;
  gap: 20px;                 /* バナー同士の間隔 */
  flex-wrap: wrap;           /* スマホで折り返し可能にする */
  margin: 30px 0;
}

/* 「好きな数字（5文字）」入力フォーム下のスペース調整 */
.form-note {
	display: inline-block;
    line-height: 18px;
}

/* 自由入力下部のテキスト */
p.free-input + p {
	margin-bottom: 0;
}

.order-txt {
	font-size:smaller;
	margin-top: -20px;

}

/* ▼ バナー画像の調整 */
.present-banners img.present-banner {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ▼ スマホ（〜767px）は縦並びに */
@media (max-width: 767px) {
  .present-banners {
    flex-direction: column;
    gap: 15px;
  }
}

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

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

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