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

/* □■-----------------------------------------------------
/ 『共通設定』
-----------------------------------------------------■□ */
body {
  background-color:#ffffff;
}

/* DIV改行 */
.clear {
  clear:both;
}

/* 途中改行の禁止 */
.no-wrap {
  display: inline-block;
}

/* ホバーで薄くする */
.hover-img:hover{ 
  opacity:0.6;
  transition:0.3s;
}

/* 記事一覧に日付表示 */
.new-entry-card-date {
  display: block;
}

/* 記事一覧のカテゴリーカスタマイズ */
.cat-label {
  top: 0.5em; /*上からの距離*/
  left: 0.5em; /*左からの距離*/
  border: none; /*ボーダーを消す*/
  font-size: 12px; /*文字サイズ*/
  padding: 1px 10px; /*余白*/
  border-radius: 14px; /*角を丸く*/
}

/* 固定ページ日付非表示 */
.page .date-tags {
  display: none;
}

/* 日付の文字サイズ */
.post-date, .post-update {
  font-size: 0.9em;
}

/* 見出し1(H1) */
.article h1 {
  color: #333333;
  padding: 1.2em;
  margin-block-start: 0.2em;
  position: relative;
  background-color:#deebf7;
}

/* 見出し2(H2) */
.article h2 {
  color: #333333;
  background-color: #ffffff;
  marfin-top: 5px;
  padding: 10px 10px 10px 6px ;
  margin-block-start: 0.2em;
  border-bottom: solid 3px #c3c3c3;
  position: relative;
}
.article h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #3f84c2;
  bottom: -3px;
  width: 30%;
}

/* 関連記事2(H2) */
.related-entry-heading, .comment-title {
  border-left: 3px solid #e96656;
  padding: 12px 20px;
}

/* 見出し3(H3) */
.article h3 {
  border-left: 3px solid #3f84c2;
  border-right:1px sold #c3c3c3;
  border-top:1px sold #c3c3c3;
  border-bottom:1px sold #c3c3c3;
  font-size: 22px;
  padding: 12px 20px;
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  line-height: 1.2;
}

/* 日付とタイトルのみ一覧 */
ul.no_thumbnail_ul {
  list-style: none;
  margin: 10px;
  line-height:2.5em;
}
 ul.no_thumbnail_ul li {
  position: relative;
  padding-left: 25px;
}

ul.no_thumbnail_ul li::before {
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  color: green;
}

/* 改行制御(スマホでのみ改行) */
.br-sp {
  display: none;
}

/* 別窓で開きます */
.out-w {
  font-size:70%;
}

.map_iframe_wrap_change{
    position:relative;
    width:100%;
    height:0;
    padding-top:60%;/*10:6なので60%*/
}

.map_iframe_wrap_change iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* □■-----------------------------------------------------
/ 『グローバルメニュー』
-----------------------------------------------------■□ */
.header-container{
  box-shadow: 0 6px 5px -3px rgba(0,0,0,0.24), 0 6px 10px -3px rgba(0,0,0,0.18);
  height:100px;
  padding-top:18px;
}

#navi .navi-in a {
  width: 100%;
  height: 100%;
  color:#1f3c6a;
  position: relative;
  z-index: 2;
  -webkit-perspective: 350px;
  perspective: 350px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#navi .navi-in a::before,
#navi .navi-in a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

#navi .navi-in a,
#navi .navi-in a::before,
#navi .navi-in a::after {
  transition: all .1s;
}

#navi .navi-in a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 97, 171, 0.8);
  -webkit-transform-origin: center top;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
}

#navi .navi-in a:hover {
  color: white !important;
  background:none;
}

#navi .navi-in a:hover::after {
  transform: rotateX(0);
  opacity: 1;
}

/* サブメニュ－下にボーダーラインを表示する */
.navi-in>ul .sub-menu li {
  border-bottom: 1px groove #c2c2c2!important;
}

/* □■-----------------------------------------------------
/ 『モバイルスライドメニュー』
-----------------------------------------------------■□ */
/* モバイルメニューの高さ変更 */
.mobile-footer-menu-buttons {
  min-height: 60px;
  background-color: rgba(255, 255, 255, 0.5);
}
/* 「Ｘ」ボタン */
.fa-times {
  color: #3f84c2;
  font-size: 1.4em;
  margin-top: 15px;
}

/* ホバー色 */
.menu-drawer a:hover {
  background-color: #deebf7;
}

/* 画像を中央へ */
.slidein-banner {
  text-align:center;
}

/* □■-----------------------------------------------------
/ 『アピールエリア』
-----------------------------------------------------■□ */
.appeal-content {
  max-width:none;
  background-color:transparent;
  /*opacity: 0.7;*/
  color:#ffffff;
  font-size:24px;
  padding:2em 0;
}
.appeal-content p {
  margin-top:10px;
}
.appeal-in-button {
  margin-top:60px;
}
.appeal-in-button img {
  border:1px solid #ffffff;
}

/* □■-----------------------------------------------------
/ 『記事一覧』
-----------------------------------------------------■□ */
/* 最新ニュース内の記事 */
.widget-entry-card-snippet {
  font-size:14px;
  line-height:1.7em;
}
/* サムネイルのサイズ */
.widget-entry-cards figure {
  width:240px;
}

/* □■-----------------------------------------------------
/ 『お問い合わせ』
-----------------------------------------------------■□ */
.mail-confirm,
.mail-send,
.mail-back {
  background:#7dc6e2 !important;
  font-size:1.2em;
  color:#ffffff !important;
}
input[type='button'] {
  -webkit-appearance: none;
  border: 1px solid var(--cocoon-thin-color);
}
input[type='button'], #bbp_reply_submit, .bp-login-widget-register-link a {
    padding: 11px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /* アピール内のバナー制御 */
  .appeal-in-button { display: none; }

  /* モバイルメニューの文字を消す */
  .mobile-menu-buttons .menu-caption{ display: none; }
  .mobile-menu-buttons{ align-items: center; }
  
  /* モバイルメニューアイコンの色と太さ変更 */
  .mobile-menu-buttons .menu-icon,
  .menu-close-button{ color:#3f84c2; font-size:150%; }
  
  /* 脳のロゴを消しH1を調整する */
/*
  .main { background-image: none; }
  .article h1 { width:100%; }
  .article h1::before { background: none; }
*/
  /* 改行制御 */
  .br-spsp {
    display:block;
  }
	
/* 青い空イメージの上の空きを調整 */	
  .header-container {
    height:0;
    padding-top:0;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* 住所他エリアの空き調整 */
  .footer-left, .footer-center, .footer-right, .footer-mobile {
    padding: 10px 16px 0 16px;
  }
  /* アピールエリア */
  .appeal-content {
    font-size:17px;
    padding:1.0em 0 0.6em 0;
    height:330px;
  }

  /* サムネイルのサイズ */
  .widget-entry-cards figure {
    width:120px;
  }

  /* グーグルマップ高さ調整 */
  .map_iframe_wrap_change{
    position:relative;
    width:100%;
    height:0;
    padding-top:100%;/*1:1なので100%*/
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
   ul.no_thumbnail_ul li {
    font-size:14px !important;
  }
}