@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){
  /*必要ならばここにコードを書く*/
}

#gallery-1 img {
  border: 2px solid #fff!important;
}
#gallery-2 img {
  border: 2px solid #fff!important;
}
#gallery-3 img {
  border: 2px solid #fff!important;
}
#gallery-4 img {
  border: 2px solid #fff!important;
}

.gallery .gallery-item
.article dl, {
margin-bottom: 3em!important;
}

/*サイドバーのボタン色*/
.widget_search .wp-block-search__button {
  padding: 0.375em 0.1em;
  font-size: 14px;
	background-color:#82ae46 ;
	}
/*カテゴリーの色*/
.cat-label {
  background-color: rgba(var(--primary-color), .9);
  border-top: none !important;
  border-bottom: none !important;
  border-left: 2px dotted rgba(var(--black-color), .15) !important;
  border-right: 2px dotted rgba(var(--black-color), .15) !important;
  box-shadow: 0 0 5px rgba(var(--black-color), .2);
  text-shadow: 0 0 1px rgba(var(--white-color), 1);
  padding: .5em;
  color: rgba(var(--black-color), 1);
  transform: rotate(355deg);
  margin-left: -10px;
}	
/*トップにある投稿ジャンルボタンの色*/
.index-tab-buttons .index-tab-button {
  transition: all .8s ease;
  background-color:#fff;
  border-bottom: 12px solid rgba(var(--gray-light-color), 1);
  color: rgba(var(--black-color), 1);
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  border-bottom: 12px solid rgba(var(--secondary-color), 1);
  color: rgba(var(--black-color), 1);
  background-color: rgba(var(--white-color), 1);
  font-weight: normal;
}
#navi .navi-in a:hover {
  color: #82ae46;
}


:root {
	--primary-color: 159,194,77;
	--secondary-color: 182 , 230,115;
	--back-color: 240, 235, 232;
	--black-color: 65, 64, 62;
	--white-color:255, 255, 255;
	--gray-color: 221, 221, 221;
	--gray-light-color: 247, 247 ,247;
}

/*メイン画像文字*/

.tagline {
  display: inline;
  margin: 1em auto;
  padding: 0 1em;
  font-size: small;
  width: auto;
}

.tagline, {
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(var(--gray-light-color), 1), rgba(var(--gray-light-color), 1) 3px, rgba(var(--white-color), .7) 0, rgba(var(--white-color), .7) 6px);
}

.tagline, .eye-catch img, .not-found, .read-time, .author-box .sns-follow-buttons, .cta-thumb img {
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(var(--gray-light-color), 1), rgba(var(--gray-light-color), 1) 3px, rgba(var(--white-color), .8) 0, rgba(var(--white-color), .8) 6px);
}

/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}
/*目次*/
.toc-title {
  margin: .3em 0 .4em;
    margin-bottom: 0.4em;
  font-weight: bold;
  color: rgba(var(--white-color), 1);
  margin-bottom: 20px;
  background: #82ae46;
  border-top: none !important;
  border-bottom: none !important;
  border-left: 2px dotted rgba(var(--black-color), .15) !important;
  border-right: 2px dotted rgba(var(--black-color), .15) !important;
  box-shadow: 0 0 5px rgba(var(--black-color), .2);
  text-shadow: 0 0 1px rgba(var(--white-color), 1);
  padding: .5em;
	}

.toc-title::before {
  font-family: Fontawesome;
  content: "\f0ca";
  margin-right: .5em;
  cursor: pointer;
  background: rgba(var(--white-color), 1);
  color:  #82ae46;
  padding: .2em;
  border-radius: 5px;
}

.toc-list > li > a::before {
  counter-increment: count;
  content: counter(count) ".";
  background:#82ae46;
  padding: .3em .5em;
  margin-right: .5em;
  border-radius: 10px;
  color: rgba(var(--white-color), 1);
}

.toc-list > li > a {
  border-top: solid 1px #82ae46;
  border-bottom: solid 1px #82ae46;
}

.toc-list > li > ol li a::before {
  border: 2px solid #82ae46;;
  box-shadow: none;
  background: transparent;
  border-radius: 50%;
  top: 7px;
  color: #000 !important;
}

.cat-label {
  background-color:#cceba4 ;
  border-top: none !important;
  border-bottom: none !important;
  border-left: 2px dotted rgba(var(--black-color), .15) !important;
  border-right: 2px dotted rgba(var(--black-color), .15) !important;
  box-shadow: 0 0 5px rgba(var(--black-color), .2);
  text-shadow: 0 0 1px rgba(var(--white-color), 1);
  padding: .5em;
  color: rgba(var(--black-color), 1);
  transform: rotate(355deg);
  margin-left: -10px;
}

.column-wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 1000px;
  margin-left:auto;
  margin-right:auto;
	}


/* お問い合わせフォーム*/

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
/* コンタクトフォーム横幅調節 */
/* コンタクトフォーム横幅調節 */


@media(min-width:481px){
input {
width: 100%;
}
}
@media(max-width:480px){
input {
max-width: 100%;
}
}

/*必須の調整*/
.haveto{
 font-size:11px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:11px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}

.required::after {
content: "必須";
color: #ffffff;
background:#dc143c ;
font-size: 0.8em;
padding: 0.2em;
border-radius: 0.5em;
margin-left:0.5em;
}

.wpcf7-list-item-label{
	 padding:5px;
	}

.form-moji01 {
    font-size: 15px;
	color:#0d0015;
	}

.moji02 {
    font-size: 14px;
	text-align:left;
	line-height:20px;
	}

.moji03 {
    font-size: 16px;
	color:#ffa500 ;
	font-weight:800;
    border: 2px solid #ffa500 ;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
	}

.moji04 {
    font-size: 16px;
	color:#008b8b ;
	font-weight:800;
    border: 2px solid #008b8b ;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
	}
.moji05 {
    font-size: 16px;
	color:#a0522d  ;
	font-weight:800;
    border: 2px solid #a0522d  ;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
	}
.moji06 {
    font-size: 16px;
	color:#b22222   ;
	font-weight:800;
    border: 2px solid #b22222  ;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
	}
.moji07 {
    font-size: 16px;
	color:#4682b4  ;
	font-weight:800;
    border: 2px solid #4682b4 ;
    padding-left:5px;
    padding-right:5px;
    margin-left:5px;
    margin-right:5px;
	}
.moji08 {
   text-align:center;
	}

.moji09 {
    font-size: 13px;
    margin-bottom:-20px;
	}

.moji10 {
    font-size: 13px;
	margin-top:-20px;
	}

.search-edit,  input[type="number"],  select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 30%;
	}

.search-edit, input[type="time"], select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 20%;
	
		}



.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
	width: 100%;
}


/************************************
** レスポンシブ　時間・数
************************************/
@media screen and (max-width: 834px){
.search-edit,  input[type="number"],  select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 40%;
	}

.search-edit, input[type="time"], select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 30%;
	
		}
	}
@media screen and (max-width: 480px){
.search-edit,  input[type="number"],  select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 40%;
	}

.search-edit, input[type="time"], select {
    padding: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 18px;
    width: 30%;
	
		}
	}


/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2; /* Blue */
}
  
.wpcf7 form.init .wpcf7-response-output {
    display: none;
}
  
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450; /* Green */
	background-color:#f0fff0;
    font-weight: bold;
}
  
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232; /* Red */
	background-color:#ffcccc;
    font-weight: bold;
}
  
.wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28; /* Orange */
}
  
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900; /* Yellow */
	background-color:#ffe4b3;
    font-weight: bold;
}
//スパムなどで送信ブロックされた場合
div.wpcf7-spam-blocked {
	background:#fff2cf;
	color:#846314;
	border:1px solid #feedbd;
	padding:10px
}
//テキスト部分
.wpcf7-form-control-wrap your-message {
    border-color: #ffb900; /* Yellow */
	background-color:#ffe4b3;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
}
.screen-reader-response {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
}



/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#4682b4;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#e6e6fa;
 color:#4682b4;
}

/*メッセージ部分のカスタマイズ*/
screen-reader-response {	
	border: 2px solid #398f14;
	background:#e6e6fa;
	color:#4682b4;
}



/*送信を押した後に消える*/
form.sent p{
display:none;
}


/*--------------------------------- 
数字リスト 
--------------------------------*/
 .list-5{
    counter-reset:number; 
    list-style-type: none; 
    padding:0;
    margin:0;
 }
 .list-5 li { 
    position: relative;
    margin:1em auto 1em 10px !important;
    padding-left: 2.2em;
    padding-top:0.3em
 }
 .list-5 li:before {
    counter-increment: number;
    content: counter(number);
    background-color: #dc143c;/* 文字背景色 */
    color: #fff;/*文字色*/
    position: absolute;
    font-weight:bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    top:0.5em;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
 } 
/************************************
** 入力フォーム（Form）
************************************/
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  width: auto;
}

/************************************
** 送信ボタン（Form）
************************************/
input[type="submit"] {
  border: 3px solid rgba(var(--gray-color), .7);
  border-radius: 10px;
}

input[type="submit"] {
  border-color: rgba(var(--black-color), 1);
  background-color: rgba(var(--white-color), 1);
  font-size: 18px;
font-weight:800!important;
  letter-spacing: .1em;
}

/************************************
** 入力フォーム（Form）
************************************/

.inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #b3b3b3;
	
}

.inquiry td {
  font-size: 13px;
  border: solid 1px #b3b3b3;

}

.inquiry.sent p{
display:none;
}
/************************************
** テーブルの色
************************************/
table:not(.has-border-color) :where(th, td) {
  border: 1px solid #b3b3b3;
}


/************************************
** ボタンデザイン
************************************/
.nomadBtn5 {
  color: #FFF !important;
  border-radius: 5px;
  padding: .7em 2em;
  display: inline-block;
  background: transparent linear-gradient(0deg, rgba(224,116,135) 0%, rgba(224,116,135,.6) 100%) 0% 0% no-repeat padding-box;
  text-decoration: none !important;
  margin: 15px 0;
}

/*アンカーズレ防止
-------------------------------------*/

@media screen and (min-width: 834px) {
a.anchor{
   display: block;
   margin-top:-100px;
   padding-top:100px;
}
}
@media screen and (max-width: 833px) {
a.anchor{
   display: block;

}
}

/*サイドのタイトル文字
-------------------------------------*/
.sidebar h3, .widget h2, .footer-title {
font-size:25px;
  text-align: center;
  background-color: transparent;
  box-shadow: 0 3px 0 rgba(var(--back-color), 1);
  margin: 0 0 1em;

}

/*インスタボタン
-------------------------------------*/
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}