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

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


/*投稿*/
.wp-block-latest-posts__list { margin: 0; padding: 0; list-style: none; }
.wp-block-latest-posts__list li { margin-bottom: 10px;  padding-bottom: 5px; display: flex; align-items: center; border-bottom: 1px solid #ddd; }
.wp-block-latest-posts__post-date { margin-right: 10px; order: 1; white-space: nowrap; width: 9.5rem; }
.wp-block-latest-posts__post-title { order: 2; white-space: nowrap; flex-grow: 0; }
.wp-block-latest-posts__post-title {
                font-size: 1rem !important;
                line-height: 1.2 !important;
                font-weight: normal !important;
            }

.wp-block-button__link {
  color: #333631;
  background-color: transparent;
}



.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}

.inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
	padding: 0
}

.cstm-blk-fullwide {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

.icon {margin-bottom: 0em;
}


body {
   overflow-x: hidden;
}

.icon {
  margin-top: 0;
  margin-bottom: 0;
}

#main .entry-content > .wp-block-image {
  margin-bottom: 0;
}

/************************************
**　　グローバルナビメニュー 
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #a28c4f;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}


/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#ffffff; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#ffffff; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:0.8em;
    padding: 1em 1.2em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}

/*  グローバルメニュー各項目間区切り線　*/
.navi-in > ul > li{
  border-right: 2px solid #c0c0c0;
}

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

/* ヘッダーロゴの大きさを変える */
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100px; /* ヘッダーの高さの指定 */
}
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100px; /* ヘッダーロゴ画像の高さの指定 */
}
#header {
  flex-shrink: 0; /* 要素の縮小率を0にする */
}

/************************************
** ■フッターメニューカスタマイズ
************************************/
.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #ffffff; /*フッター背景色*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #000000; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #aab3b9; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #000000; /*クレジットの文字色*/
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}

/*
* 新着記事一覧ショートコード用
*/
.news-list .news-list-inner {
 padding: 20px 5px;
 border: 2px solid #f5f5f5;
}
.archive .news-list .news-list-inner {
 background: #fff;
 padding: 20px;
}
.news-list ul {
 list-style: none;
 margin: 0 0 20px;
}
.news-list li {
 padding: 10px;
 border-bottom: 1px solid #ddd;
}
.news-list a {
 color: #333;
 text-decoration-line: none;
}
.news-list a:hover {
 opacity: 0.6;
}
.news-list a.wp-block-button__link {
 color: #fff;
}
.news-list a.wp-block-button__link:hover {
 color: #F87474;
}
.news-list .news_date {
 margin: 0;
 font-size: 14px;
}
.news-list .news_title {
 margin: 0;
 font-size: 18px;
 line-height: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
}

ul.blog-list { display:flex; flex-wrap:wrap;}
  ul.blog-list li { width:30%; text-align:center;}

.floating-banner
{ /* その他のページスタイル */ }
.floating-banner
{ position: fixed; /* バナーを固定位置に配置 */
right: 20px; /* 右端から20ピクセルの位置に設置 */
bottom: 20px; /* 下端から20ピクセルの位置に設置 */
z-index: 9999; /* 他の要素より前面に表示 */
background-color: transparent; /* 背景色を透明に設定 */
color: #fff; /* テキストカラーを白に設定 */
padding: 10px 20px; /* 内側の余白を設定 */
font-size: 16px; /* フォントサイズを16ピクセルに設定 */
border-radius: 5px; /* 角を丸くする */
text-decoration: none; /* 下線をなくす */ }
.floating-banner:hover
{ background-color: transparent; /* マウスオーバー時の背景色を透明に設定 */
text-decoration: underline; /* マウスオーバー時に下線を表示 */ }

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#a28c4f;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #a28c4f; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}

/************************************
** 横ずれ防止
************************************/
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/


/*834px以下*/



/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
.headingfontsize {
    font-size: 28px !important;
}

.slider1 {
	display: none !important;
    }
	
.floating-banner {
  height: 40%;
  width: 40%;
  right: 2px; /* 右端から20ピクセルの位置に設置 */
bottom: 2px; /* 下端から20ピクセルの位置に設置 */
  object-fit: cover;
}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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