@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
span.br { display:inline-block;}
.page .date-tags { display: none;}
p a {display:inline-block;}
img { vertical-align: bottom; }

.wrap-width {
max-width:650px;
margin:0 auto;
}

/* ヘッダー */

.header-in {
	padding:50px 0;
}

/* 見出し */
.article  h1, .archive-title {
	text-align:center;
	color: #cf4944;
	font-size:2.2em;
	text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

.single-archive .article h1, .archive-title {
margin-bottom:50px;
}

.article h2 {
    color: #5b310f;
    margin: 100px 0 50px 0;
    border-bottom: 1px #5b310f solid;
	padding:0;
	background:none;
	font-size:1.8em;
}

.article h2.first { margin-top:30px; }


.article h2:first-letter {
	font-size:1.7em;
color:#cf4944;
}

.article h3 {
    color: #5b310f;
    margin: 30px 0 10px 0;
border:none;
	padding:0;
	background:none;
	font-size:1.3em;
}

.sidebar h3,  .sidebar h3 a {
	color:#5b310f;
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
	text-decoration:none;
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

/* メルマガ登録 */

#custom_html-2, #custom_html-3, #custom_html-4 {
	max-width:450px;
	margin:100px auto 30px auto;
}

#custom_html-2 .main-widget-label, #custom_html-3 .main-widget-label, #custom_html-4 .main-widget-label {
	font-weight:bold;
	font-size:1.2em;
	color:#cf4944;
	text-align:center;
	margin-bottom:20px;
}

.mail_input {
	display:flex;
}

.mail_input input[type='submit'] {
	width:6em;
	margin-left:5px;
	font-size:14px;
}

/* SNSフォロー */

.sns-follow-message {
	font-weight:bold;
	font-size:1.2em;
	color:#cf4944;
}

.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
	max-width:350px;
	margin:0 auto;
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 50px; /*アイコンのサイズ*/
	margin: 20px; /*ボタン同士の間隔*/
}
.sns-follow a {
	width: 70px; /*ボタンの横幅*/
	height: 70px; /*ボタンの高さ*/
}

.sns-follow-buttons a:last-child {
	margin-right: 20px;
}

/* youtube */

.video-container {
	max-width:100%;
}

/* 固定ページ ページネーション非表示 */

.page #pager-post-navi { display:none;}

/* ナビメニュー */

.menu-top .fas {
	font-size:1.3em;
	margin-right:7px;
}

.navi-footer .fas {
	margin-right:5px;
}

.mobile-footer-menu-buttons,
.navi-menu-content,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button:hover,
.navi-menu-content a,
.navi-menu-content a:hover {
  background: #cf4944;
  color: #fff;
}


/*　コンタクトフォーム　*/

.wpcf7-form h3 {
border:none;
padding:0;
margin:25px 0 5px 0;
font-size:1.2em;
}

.must:after {
content:"必須";
 font-size:11px;
 padding:2px 5px;
 background:#C63232;
 color:#fff;
 border-radius:2px;
 margin-left:5px;
 position:relative;
 bottom:3px;
}

.must-before:before {
content:"必須";
 font-size:11px;
 padding:2px 5px;
 background:#C63232;
 color:#fff;
 border-radius:2px;
 position:relative;
 bottom:3px;
}

.wpcf7-form p {
margin:0;
}

input[type=checkbox],  input[type=radio] {
visibility:hidden;
width:0;
}

.wpcf7-list-item-label {
 color:#999999;
}

.wpcf7-list-item-label:before {
font-family: "Font Awesome 5 Free";
margin-right:3px;
font-size:1.2em;
}

input[type=checkbox] + .wpcf7-list-item-label:before {
content:"\f0c8";
}

input[type=radio] + .wpcf7-list-item-label:before {
content:"\f111";
}

.wpcf7-list-item-label:hover {
color:#333333;
}


input:checked +  .wpcf7-list-item-label {
color:#333333;
font-weight:bold;
}

input[type=checkbox]:checked +  .wpcf7-list-item-label:before {
content:"\f14a";
}

input[type=radio]:checked +  .wpcf7-list-item-label:before {
content:"\f192";
}


.details {
background:#f2f2f2;
padding:15px 20px;
border-radius:5px;
margin:0 0 1em 1em;
}

.details .first {
margin-left:0;
}

input[type="number"] {
width:6em;
margin:2px 0;
}

.wpcf7-form div.photo {
	padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
	margin-bottom:30px;
	 max-width:400px;
}

input[type='submit'].wpcf7-submit {
margin-top:25px;
	font-size:1.2em;
  display: inline-block;
  padding: 0.5em 1em;
letter-spacing :0.6em;
}

input[type='submit'] {
  text-decoration: none;
  background: #cf4944;/*ボタン色*/
  color: #FFF;
border:none;
  border-bottom: solid 4px #be3631;
  border-radius: 3px;
}

input[type='submit']:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

input:focus, textarea:focus{
  outline: 0;
border-color:#333333;
}

p.memo {
font-size:0.8em;
color:#666666;
line-height:1.5em;
}

.center p.memo {
margin-top:10px;
color:#333;
font-size:0.9em;
}

.center .wpcf7-list-item { margin:0 15px; }

.wpcf7-form textarea.short {
min-height:100px;
height:100px;
}

.wpcf7-form input[type="text"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="email"] {
 max-width:400px;
}

/* カバーブロック */

.wp-block-cover {
		margin-left:-16px;
		margin-right:-16px;
		width:calc(100% + 32px) !important;
	}

	.wp-block-cover__inner-container {
    width: calc(100% - 32px) !important;
}

/* 中央寄せ */
.center { text-align:center;}
.center p {
	display: inline-block;
	text-align:left;
}

/* アーカイブ */
.post-type-archive-archive .entry-card-content { padding:0; }

.post-type-archive-archive .entry-card-title {
	margin:7px 0 0 0;
	text-align:center;
}

.post-type-archive-archive #list {
	margin-bottom:50px;
}

.single-archive .article h2 {
font-size:1.2em;
margin: 30px 0 20px 0;
}

.single-archive .article ul {
padding-left:1em;
margin:0;
}

.single-archive .article p { margin:0; }

.post-type-archive-archive .admin-pv { margin-bottom:0; }

/* １カラムページコンテンツ幅 */

.no-sidebar .wrap {
max-width: 900px;
}

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

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

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

@media screen and (max-width: 600px){
	.pc {display:none;}
}

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

}