@charset "UTF-8";

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

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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** ロゴサイズ
************************************/
div.header-container-in.hlt-top-menu .logo-header img {
  height: auto;
  max-height: none;
  width: 70px;
 }
 @media screen and (max-width: 480px){
  div.header-container-in.hlt-top-menu .logo-header img {
    width: 50px;
   }
}
 div.header-container-in.hlt-top-menu .hlt-tm-right wrap {
  width: 920px;
 }
 /************************************
 (たぶんこれば間違い)**サイト幅
 ************************************/
 /*
 .wrap{
   width: 950px;
 }
 */

 /*834px以下*/
/*
@media screen and (max-width: 834px){
  .wrap{
    width: 100%;
}
}
*/
/************************************
 サイト幅(これが正解)
 ************************************/
 .header-container-in.hlt-top-menu {
  width: 950px;
 }
 
 @media screen and (max-width: 834px){
  .wrap{
    width: 100%;
}
 }
 /************************************
 ヘッダー画像中央揃え
 ************************************/
 #header-img {
   text-align: center;
 }
 /************************************
 ** ヘッダー上ナビ位置
 ************************************/
 .navi-in > ul {
 
     padding: 0;
     margin: 0;
         margin-top: 80px;
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     text-align: center;
 }
 /************************************
 ** アピールエリアボタン消す
 ************************************/
 
 .appeal-content {
     max-width: 800px;
     background-color: rgba(255, 255, 255, 0.85);
     margin: auto;
     padding: 1em;
     text-align: center;
     border-radius: 4px;
     display: none;
 }
 #appeal,
 .appeal .appeal-in {
   min-height: 24vw;
 }
 @media screen and (min-width: 1267px) {
   #appeal,
   .appeal .appeal-in {
     min-height: 342px;
   }
 }
 .appeal {
   background-size: contain;
 }
 /************************************
 ** タイトル日付消す
 ************************************/
 .date-tags {
   display: none;
 }
 /************************************
 ** 見出しリセット
 ************************************/
 .article h2 {
   padding: 0;
   background: none;
 }
 .article h3 {
   border: none;
   padding: 0;
 }
 .article h4 {
   border: none;
   padding: 0;
 }
 .article h5 {
   border: none;
   padding: 0;
 }
 .article h6 {
   border: none;
   padding: 0;
 }
 
 /************************************
 ** 見出しデザイン
 ************************************/
 .article h2 {
   color: #444444;
   background-color:#f5f5f5;
   padding: 14px 10px 10px;
   border-top: 2px solid#c5bd24;
   border-bottom: 1px solid#e9e9e9;
 }
 .article h3 {
   padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
   color: #444444;/*文字色*/
   background: #f4f4f4;/*背景色*/
   border-left: solid 5px #c5bd24;/*左線*/
 }
 .article h4 {
   color: #444444;/*文字色*/
   padding: 0.5em 0;/*上下の余白*/
   border-top: solid 1px #c5bd24;/*上線*/
   border-bottom: solid 1px #c5bd24;/*下線*/
 }
 .article h5 {
   color: #444444;
   margin-top: 40px;
   border-bottom: solid 2px #444d53;
 }
 .article h6 {
   color: #444444;
   margin-top: 40px;
   border-bottom: solid 1px #444d53;
 }
 /************************************
 ** 引用（blockquote）
 ************************************/
 blockquote {
   background-color: #fafbfc;
   border: 1px solid #ccc;
   margin: 1em 0;
   padding: 10px 1.2em;
   position: relative;
 }
 blockquote::before, blockquote::after {
   color: #C8C8C8;
   font-family: serif;
   position: absolute;
   font-size: 300%;
 }
 blockquote::before {
   content: "“";
   line-height: 1.1;
   left: 10px;
   top: 0;
 }
 blockquote::after {
   content: "”";
   line-height: 0;
   right: 10px;
   bottom: 0px;
 }
 
 /*本文下情報*/
 .footer-meta {
   font-size: 0.8em;
   text-align: right;
 }
 
 /*投稿者*/
 .author-info .post-author {
   font-size: 14px;
 }
 
 /************************************
 ** Call to Action
 ************************************/
 .cta-box {
   background-color: #efefef;
   color: #444;
   padding: 20px;
 }
 .btn-yellow, .btn-wrap.btn-wrap-yellow > a {
   background-color: #c5bd24;
 }
 .blank-box.bb-yellow {
   border-color: #c5bd24;
 }
 
 /*エントリー・アーカイブの見出し*/
 .entry-title,
 .archive-title {
   font-size: 20px;
   margin: 16px 0;
   line-height: 1.3;
 }
  /*グレーボックスカスタマイズ*/
 .secondary-box {
    color: #333;
    background-color: #fafafa;
    border-color: #ededed;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}
 /*Contact Form 7カスタマイズ*/
 div.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
	border: 0;
}

div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #ff0000;
}

div.wpcf7-mail-sent-ok {
	border: 2px solid #c5bd24;
}

div.wpcf7-mail-sent-ng,
div.wpcf7-aborted {
	border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
	border: 2px solid #ffa500;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	border: 2px solid #f7e700;
}

.wpcf7-form-control-wrap {
	position: relative;
}

span.wpcf7-not-valid-tip {
	color: #f00;
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	border: 1px solid #ff0000;
	background: #fff;
	padding: .2em .8em;
}

span.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

span.wpcf7-list-item-label::before,
span.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-display-none {
	display: none;
}

div.wpcf7 .ajax-loader {
	visibility: hidden;
	display: inline-block;
	background-image: url('../../images/ajax-loader.gif');
	width: 16px;
	height: 16px;
	border: none;
	padding: 0;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

div.wpcf7 .ajax-loader.is-active {
	visibility: visible;
}

div.wpcf7 div.ajax-error {
	display: none;
}

div.wpcf7 .placeheld {
	color: #888;
}

div.wpcf7 input[type="file"] {
	cursor: pointer;
}

div.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

div.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

 /*Contact Form 7カスタマイズ*/
 /*スマホContact Form 7カスタマイズ*/
 @media(max-width:500px){
   .inquiry th,.inquiry td {
    display:block!important;
    width:100%!important;
    border-top:none!important;
    -webkit-box-sizing:border-box!important;
    -moz-box-sizing:border-box!important;
    box-sizing:border-box!important;
   }
   .inquiry tr:first-child th{
    border-top:1px solid #d7d7d7!important;
   }
   /* 必須・任意のサイズ調整 */	
   .inquiry .haveto,.inquiry .any {	
   font-size:10px;
   }}
   /*見出し欄*/
   .inquiry th{
    text-align:left;
    font-size:14px;
    color:#444;
    padding-right:5px;
    width:30%;
    background:#f7f7f7;
    border:solid 1px #d7d7d7;
   }
   /*通常欄*/
   .inquiry td{
    font-size:13px;
    border:solid 1px #d7d7d7;	
   }
   /*横の行とテーブル全体*/
   .entry-content .inquiry tr,.entry-content table{
    border:solid 1px #d7d7d7;	
   }
   /*必須の調整*/
   .haveto{
    font-size:7px;
    padding:5px;
    background:#ff9393;
    color:#fff;
    border-radius:2px;
    margin-right:5px;
    position:relative;
    bottom:1px;
   }
   /*任意の調整*/
   .any{
    font-size:7px;
    padding:5px;
    background:#93c9ff;
    color:#fff;
    border-radius:2px;
    margin-right:5px;
    position:relative;
    bottom:1px;
   }
   /*ラジオボタンを縦並び指定*/
   .verticallist .wpcf7-list-item{
    display:block;
   }
   /*送信ボタンのデザイン変更*/
   #formbtn{
    display: block;
    padding:15px;
    width:300px;
    background:#ffaa56;
    color:#fff;
    font-size:18px;
    font-weight:bold;	 
    border-radius:2px;
    margin:25px auto 0;
   }
   /*送信ボタンマウスホバー時*/
   #formbtn:hover{
    background:#fff;
    color:#ffaa56;
    border:1px solid #ffaa56;
   }
   /*プレースホルダー*/
 .search-edit, input[type="text"],
 input[type="password"],
 input[type="date"],
 input[type="datetime"],
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="time"],
 input[type="url"],
 textarea,
 select {
   padding: 11px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   width: 100%;
 }
 .search-submit {
   color:#ffaa56;
   font-size: 16px;
   }
@media(max-width:500px){
#header-img img {
  max-width: 100%;
}
}