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

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

.entry-title {display:none;}
#header-container {display:none;}
.content {margin-top:0;}
.content-in {margin:0;}
.main {padding:0;}
.entry-content {
	margin-top: 0;
    margin-bottom: 0;
}
.wrap {width:100%;}
.date-tags {margin-bottom:0;}
article#post-6.article.post-6.page.type-page.status-publish.hentry {margin-bottom:0;}
.obi {
	width:100%;
	margin-bottom:0;
}
.footer {display:none;}
/*フロントページ▼*/
.block1 {position:relative;}
.days_box {background:#539b46;}
.days {
	width: 80%;
	position:relative;
	z-index:3;
	margin-top:-8%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.bur_box {
	background:#FFF;
	position:relative;
	z-index:2;
	margin-top:-2%;
}
.quiz_txt {
	width: 70%;
    margin: 0 auto;
    display: block;
    padding-top: 2%;
}
a.quizbut {
	width:50%;
	display: block;
    margin: 2% auto 0 auto;
}
.ura_box {margin-bottom:0;}
.ura1flex {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin-top: 5%;
}
.ura1 {width:50%;}
.ura2 {width:30%;}
.ura3 {
	width: 80%;
    margin: 0 auto;
    display: block;
}
.ura4 {
	width: 70%;
    margin: 0 auto;
    display: block;
	padding-bottom:2%;
}
.link_txt {
	text-align: center;
    margin-bottom: 2%;
}
.footertxt {
	text-align: center;
    font-size: 25px;
    font-weight: bold;
	margin-bottom: -1%;
}
.copyright {
	text-align: center;
    font-size: 12px;
    padding-bottom: 2%
}
.originalfooter2 {margin-top:5%;}
/*フロントページ▲*/

/*クイズ用▼*/
/*タイトル*/
.q_ttl {
	width: 50%;
    margin: 0 auto;
    display: block;
}
.quiz_read img {
	width: 45%;
    display: block;
    margin: 2% auto 0 auto;
}
.quiz_box {
	background-image: url(/wp-content/uploads/2025/09/quizback.svg);
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
}
.kome {text-align:center;}
/* クイズ全体 */
.quiz-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  border-radius: 20px;
  background: #fff8d6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Comic Sans MS", "Hiragino Maru Gothic ProN", sans-serif;
}

/* 質問 */
.quiz-question {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

/* ○×ボタン */
.quiz-option {
  font-size: 22px;
  font-weight: bold;
  padding: 12px 25px;
  margin: 10px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}
.quiz-option[data-answer="true"] {
  background: #ff6384;
  color: #fff;
}
.quiz-option[data-answer="false"] {
  background: #36a2eb;
  color: #fff;
}
.quiz-option:hover {
  opacity: 0.8;
}

/* 結果表示 */
.quiz-result {
  font-size: 18px;
  margin: 20px 0;
  min-height: 24px;
}
.quiz-explanation {
	text-align: left;
    text-align: justify;
}
/* ボタン類 */
.quiz-next, .quiz-retry, .quiz-entry {
  display: inline-block;
  margin: 15px 10px;
  padding: 12px 25px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background: #ffcd56;
  color: #333;
  text-decoration: none;
  transition: 0.3s;
}
.quiz-next:hover, .quiz-retry:hover, .quiz-entry:hover {
  background: #ffa726;
}
.quiz-option {
  transition: opacity 0.3s ease;
}

/* 非表示制御 */
.hidden {
  display: none;
}

/*クイズ用▲*/

/*応募フォーム▼*/
.formttl {
	width: 50%;
    margin: 0 auto;
    display: block;
    margin-top: 5%;
}
.form_box {
	width:50%;
	margin:0 auto;
}
input[type=submit] {
	width: 30%;
    display: block;
    margin: 0 auto;
}
/*確認画面▼*/
.cf7-step {
  display: none;
}
.cf7-step.active {
  display: block;
}

.cf7-step-form p {
  margin: 10px 0;
}

.confirm-fields p {
  text-align: left;
  margin: 6px 0;
  padding: 5px;
  background: #f9f9f9;
  border-radius: 5px;
}

.to-confirm, .to-input, input[type="submit"] {
  margin-top: 15px;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.to-confirm {
  background: #ff9800;
  color: #fff;
  border: none;
	margin: 0 auto;
    display: block;
    margin-top: 5%;
}

.to-input {
  background: #ccc;
  border: none;
}

input[type="submit"] {
  background: #4CAF50;
  color: #fff;
  border: none;
}
.step-confirm .buttons {
  display: flex;
  gap: 20px; /* ボタンの間隔 */
  justify-content: center; /* 中央寄せ */
  margin-top: 20px;
}

.step-confirm .buttons .wpcf7-form-control {
  flex: 1; /* 均等幅にしたい場合は有効 */
  max-width: 200px; /* ボタン幅の上限 */
}

.cf7_butf input[type="submit"] {
  margin: 0;       /* CF7の余計なマージンをリセット */
  padding: 10px 0; /* 高さ調整 */
  width: 150px;    /* 横幅を揃える */
  font-size: 16px;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
}


.cf7_butf {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 10px;               /* ボタン間の間隔 */
    align-items: flex-end;
}

.cf7_butf button,
.cf7_butf input[type="submit"] {
  width: 150px;            /* 横幅を揃える */
	height:44px;
  padding: 10px 0;         /* 高さ調整 */
  font-size: 16px;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
}

.cf7_butf button:hover,
.cf7_butf input[type="submit"]:hover {
  background-color: #0056b3;
}


/*確認画面▲*/
/*応募フォーム▲*/

/*プライバシーポリシー▼*/
.privacy-policy {
	width: 80%;
    margin: 0 auto;
}
/*プライバシーポリシー▲*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.q_ttl {
		width:85%;
		font-size:25px;
	}
	.form_box {width:100%;}
	main.main {padding:0;}
	.days {width:100%;}
	.days {width:100%;}
	a.quizbut {width:90%;}
	.ura1 {width:60%;}
	.ura2 {width:35%;}
	.ura3 {width:95%;}
	.ura4 {width:90%;}
	.footertxt {font-size:16px;}
	.copyright {font-size:9px;}
	.formttl {width:95%;}
	.cf7-step-form {
		width:95%;
		margin:0 auto;
	}
	.quiz_read img {width:90%;}
	.quiz-container {width:95%;}
}