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

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

/*----------------------------------*/
/* 以下自分で設定  */
/*----------------------------------*/

/*----------------------------------*/
/*ウィジェット(コンテンツ上部) */
/*----------------------------------*/
.widget h1,h2,h3,p {
	 text-align:center;
}

.widget h1{
	font-size: 17px;
}
.widget h2 {
	font-size: 24px;
}
.widget h3 {
		margin-top: 40px;
font-size: 36px;
}
/*----------------------------------*/
/*アピールエリア(画像) */
/*----------------------------------*/
/*アピールエリアの画像を正常に表示・スマホにしても切れないようにする*/
#appeal {
    height: calc(100vw * 0.3);
}

.content { 
margin-top: 0; 
}
/*アピールエリアの背景色*/
/*.appeal-content {
  background: none;
}*/

/*アピールエリアの上下余白を消す
.tagline {
	margin: 0.6em 0 0;
}*/

/*.header .logo-text {
	padding: 0;
}
#appeal-in {
	padding: 5px 5%;

}
.content {
	margin-top: 0;
}

main.main {
	margin-top: 5px;
}*/

/*----------------------------------*/
/* ヘッダーメニュー (今は非表示)*/
/*----------------------------------*/
/*
/*背景の高さ */ 
/*.navi-in >ul li {
    height: 50px;
    line-height: 50px;
}*/
/* 仕切り線を入れる*/
/*#navi .navi-in > ul > li{
  border-right: 1px solid #efe4e4;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

/* グローバルメニューにポインタを被せた時の色変化 */ 
/* .caption-wrap:hover {
    color: #6b4619;
}*/ 

/* サイトタイトル・ディスクリプションの余白調整 */
/* .navi-in{
margin-bottom: 0px;
	padding-bottom: 0px;
	
}*/
	
/*----------------------------------*/
/* 投稿(トップページ ) */
/*----------------------------------*/

/*投稿を横並びにする*/
.entry-card .entry-card-wrap {
margin-right: 20px;
}
/*投稿一覧のカテゴリラベルを消す*/
.cat-label {
display: none;
}

/*投稿のタイトルを中央寄せ*/
.entry-card-title {
	text-align: center;
}

/*投稿のタイトルの文字大きさ*/
.entry-card-title {
	font-size:20px;
} 

/*投稿の著者情報を消す*/
.post .author-info {
    display: none;
}

/*投稿ホバー時の透明度*/
.a-wrap:hover{
opacity: .7;
}

/*投稿の投稿日・更新日を消す*/
.post .date-tags {
    display: none;
}

/*投稿ページ内のタイトルを中央寄せ*/
.entry-title {
	text-align: center;
}

/*投稿背景色の変更*/
.main{
    background-color: #fffcf7;
}

.entry-content img{
margin:auto;
display:block;
}


/*----------------------------------*/
/* 戻るボタンエリア */
/*----------------------------------*/
.go-to-top {
  text-align: center; 
}

/*投稿のタイトルを消す*/
/*.entry-card-title {
display: none;
}*/

/*投稿ホバー時のシャドウ
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 1px 1px 4px 0 #ccc;
}*/

/*投稿一覧のタイトルを消す*/
/*.entry-card-content {
display: none;
}*/

/* タイル4列 */
/*.ect-3-columns {
  justify-content: space-around;
}
.ect-3-columns .entry-card-wrap {
 width: 24.67%;
}
.ect-3-columns .entry-card-snippet {
  max-height: 4em;
  overflow: hidden;
}

.ect-3-columns .ad-area {
  width: 24.67%;
}*/

/*----------------------------------*/
/* 固定ページ */
/*----------------------------------*/

/*固定ページの背景色*/
#main {
    background: #fffcf7;
}

/*固定ページのタイトルを非表示
.page .entry-title {
  display: none;
}*/

/*固定ページ投稿日・更新日を消す*/
.page .date-tags {
    display: none;
}

/*固定ページの著者情報を消す*/
.page .author-info {
    display: none;
}

/*固定ページの見出しを中央寄せにする,文字の装飾*/
.page{
text-align: center;
}

.page h2  {
display:inline-block;
	border-bottom:solid;
padding-bottom: 6px;
	margin-top: 0px;
}

/*固定ページの見出し文字サイズ*/
.page h2 {
font-size: 28px;

}
/*トップページの見出し非表示*/
.page h3 {
display: none;

}
/*カードのタイトルを中央へ*/
.new-entry-cards .card-title {
	text-align: center;
}


/*カードのタイトル　余白調整
.new-entry-cards.large-thumb .card-title {
	line-height: 1.75;
	margin: 0.5em 0 0 0 ;
}*/


/*プロフィールページの文を左寄せにする(.profileは固定ページの「高度な設定」にcssを設定している)*/
.profile{
	text-align: left;
}


/*----------------------------------*/
/* お問い合わせフォーム */
/*----------------------------------*/
/*幅調整*/
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-tel"],
.wpcf7 input[name="your-subject"] {
width: 60%; !important;
	
	}
	
.wpcf7 textarea[name="your-message"] {
width: 60%; !important;
	}

/*ボタン幅調整*/
.wpcf7 input[type="submit"] {
width: 50%; !important;
	}

/* ボタン装飾 */
.wpcf7 input[type="submit"] {
background:#ffaa56;
color:#fff;
font-size:18px;
border-radius:2px;
	}

/* 送信ボタンホバー装飾 */
.wpcf7 input[type="submit"]:hover{
background:#fff;
color:#ff870f;
border:1px solid #ffa042;
	}
/* 中央寄せ*/
.wpcf7 { text-align: center;}
	

/* ラベル右よせ*/
#C2,#C3,#C4,#C5 { 
	text-align: left; 
	margin-left: auto; 
	margin-right: auto; 
	width:60%; }

/* 文字右よせ(contact〇〇は固定ページの「高度な設定」にcssを設定している)*/
.contact01 { 
	text-align: left; 
	margin-left: auto; 
	margin-right: auto; 
	width:60%; }
.contact02 { 
	text-align: left; 
	margin-left: auto; 
	margin-right: auto; 
	width:60%; }

/*----------------------------------*/
/* ご依頼の流れ*/
/*----------------------------------*/
/* 文字右よせ(contact〇〇は固定ページの「高度な設定」にcssを設定している)*/
.productionflow { 
	text-align: left; 
	margin-left: auto; 
	margin-right: auto; 
	width:60%; }

.productionflowcaption
{ 
	text-align: center; 
 }
/* 見出しの文字サイズ、色*/
.productionflow span
{
	font-size:24px;
 color:#ff8836;


}



/*----------------------------------*/
/* ボトムフォローボタンエリア */
/*----------------------------------*/
/*SNSフォローボタン文字*/
.sns-follow-message{
	font-size: 25px; /*大きさを指定*/
}

/*文字上のマージン*/
.sns-follow-message{
	margin-top: 80px;
}
/*フォローボタン*/
.sns-follow-buttons{
	margin-top: 20px;
}
.sns-follow-buttons {
	justify-content: center; /*中央揃え*/
}

.sns-follow-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 25px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 10px 0 10px; /*ボタンの間隔（カスタマイズを！）*/
}
.sns-follow a {
	width: 55px; /*ボタンの横幅（カスタマイズを！）*/
	height: 55px; /*ボタンの高さ（（カスタマイズを！）*/
}

/*スマホ版のフォローボタン*/
@media screen and (max-width: 480px){
.sns-follow-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 25px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 10px 0 10px; /*ボタンの間隔（カスタマイズを！）*/
}


/*----------------------------------*/
/*フッター*/
/*----------------------------------*/
 /*メニューの ボーダーなくす
#navi-footer li {
  border: none;
}*/

 /*メニューの ボーダーなくす*/
#navi-footer li {
margin-bottom:20px;
}


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

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

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

/*480px以下*/
		
/*スマホ版はロゴの大きさ小さく*/
	@media screen and (max-width: 480px){
.logo img{
	width: 300px;
	height :auto;
}

/*固定ページの見出し文字サイズ*/
@media screen and (max-width: 480px){
	.page h2 span{
font-size: 20px;
}
/*スマホのページ入った時の見出しサイズ*/
@media screen and (max-width: 480px){
	.page h2 {
font-size: 18px;
}

/*トップページプロフィールページの画像をモバイルでは小さくする(.profileimageはウィジェットの「高度な設定」にcssを設定している)*/
@media (max-width: 480px) {
.profileimage{
width: 160px;
}

/*固定ページカードのタイトルサイズ*/
@media screen and (max-width: 480px){
	.new-entry-cards.large-thumb .card-title {
	font-size: 16px;
}
/*コンタクトフォーム見出し文字サイズ(.contactformtitleは固定ページの「高度な設定」にcssを設定している)*/
@media screen and (max-width: 480px) {
.contactformtitle span {  
	font-size: 12px;}
	
/*固定ページの緑文字キャッチフレーズサイズ(.catchphraseは固定ページの「高度な設定」にcssを設定している)*/
@media screen and (max-width: 480px){
	.catchphrase span {
		font-size: 18px;
}
	
/*スマホの時固定ページの文章文字サイズ*/
@media screen and (max-width: 480px){
	.article p {
font-size: 12px;
}
	
	/*スマホの時投稿ページ上余白なくす*/
@media screen and (max-width: 480px){
.page .logo-image{
    margin-bottom: 0px;
}
	
	/*スマホの時プロフィールページ画像適切なサイズに*/
@media screen and(max-width: 480px){
.profileimg{
	width: 50px;
	height :auto;
}
/* コンタクトフォーム幅100%になる*/
@media screen and (max-width: 480px) {
	.wpcf7 input[name="your-name"],
    .wpcf7 input[name="your-email"],
    .wpcf7 input[name="your-tel"],
    .wpcf7 input[name="your-subject"] {
        width: 100%;
    }
    .wpcf7 textarea[name="your-message"] {
        width: 100%;
    }
	.wpcf7 input[type="submit"] {
        width: 100%;
    }
	
/* コンタクトフォームラベル真ん中になる*/
@media screen and (max-width: 480px) {
	#C2,#C3,#C4,#C5 {  
	text-align:center;}
	
/* コンタクトフォームラベル文字大きさ*/
@media screen and (max-width: 480px) {
	#C2,#C3,#C4,#C5 {  
	font-size: 18px;}