@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
*/
.sidebar-menu-content .fas,
.navi-menu-content .fas
{color: var(--dk-orange-color); }
/************************************
** 子テーマ用のスタイルを書く
************************************/

/* □■-----------------------------------------------------
/ 『共通設定』
-----------------------------------------------------■□ */
/* カラー定義 */
:root {
  --dk-gray-color: #666666;
  --dk-blue-color: #1b334b;
  --dk-orange-color: #fe4014;
  --dk-green1-color: #00545a;
  --dk-green2-color: #058d86;
  --dk-green3-color: #1cc48e;
  --lt-green-color: #f0fdfc;
  --dk-brown-color: #38322d;
  --lt-brown-color: #b68f61;
}
/* H1タグ */
.article h1 {
  border-bottom: solid 3px #058d86;
  position: relative;
  color: var(--dk-gray-color);
}
.content h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f79f";
  padding-right:10px;
  color: #666666;
}
.article h1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #fe4014;
  bottom: -3px;
  width: 30%;
}
/* H2タグ */
.article h2{
  position: relative;
  text-align: center;
  background-color: #fff;
}
.article h2::before {
  content: '';
  width: 100px;
  height: 3px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -5px;
  background-color: var(--dk-orange-color);
}
/* UL LI チェックマーク */
.entry-content ul {
  list-style: none;
}
.entry-content ul li {
  position: relative;
  padding: 0 0 0 1.5em;
  margin: 0;
}
.entry-content ul li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f058';
  color: var(--dk-orange-color);
}
.entry-content ul li ol li::before {
  display:none;
  padding-left:-1.5em;
}
/* info */
.is-style-info-box, .info-box, .sp-info, .info {
  background-color: var(--lt-green-color);
}
/* クリックボタン */
a.apply-banner {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  margin: auto;
  margin-bottom: 30px;
  padding: .7rem;
  border-radius: 100vh;
  transition: 0.5s;
  font-size: 80%;
}
a.apply-banner-orange {
  border: 1px solid var(--dk-orange-color);
  background: var(--dk-orange-color);
  color: #fff;
}
a.apply-banner-orange:hover {
  color: var(--dk-orange-color);
  background: #fff;
}

/* 旧サイトからの小画像を中央へ */
p.old-img-size {
  display: flex;
  justify-content: center;
}
/* 本文下のスポンサーリンク,シャアする文字 */
#content .ad-label,
#content .sns-share-message { font-size: 80%; }

/* Google Maps レスポンシブ対応 */
#google_map {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#google_map iframe,
#google_map object,
#google_map embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Youtube 埋め込み */
#youtube_video {
max-width: 100%;
margin: 0px auto;
}
/* PCで改行しない */
.br-sp { display: none; }
/* □■-----------------------------------------------------
/ 『グローバルメニュー』
-----------------------------------------------------■□ */
/* マウスオーバーでアンダーライン */
#navi .navi-in a:after{
  position: absolute;
  content: "";
  left: 0px;
  bottom: 1px;
  height: 1px;
  width: 100%;
  background: #ffffff;
  transform: scale(0,1);
  transition: 0.3s;
}
#navi .navi-in a:hover:after{
  transform: scale(1);
}
/* サブメニュ－下にボーダーライン */
.navi-in>ul .sub-menu li {
  border-bottom: 1px groove #c2c2c2!important;
}
/* メニューに区切り線 */
#navi .navi-in > ul > li{
border-right: 1px solid #ffffff;
}
#navi .navi-in > ul > li:last-child{
border-right-width: 0;
}
.navi-in > ul > .menu-item-has-children > a::after{
right: 10px;
}
#navi div.item-label {
  /*font-weight: bold !important;*/
  font-size: 15px;
}

/* □■-----------------------------------------------------
/ 『ふわっと！』
-----------------------------------------------------■□ */
/* 下から */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */
.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
  opacity: 0;
}

/* □■-----------------------------------------------------
/ 『プロフィール』
-----------------------------------------------------■□ */
.widget_author_box {
  display: flex;
  justify-content: center;
  background-image: url('http://japan2asia.com/wp-content/uploads/2025/03/prof-backimg.jpg');
  ;background-size:cover;
  background-position: center bottom;
}
.widget_author_box .author-box {
  margin-top: 1.8em;
  width: 50%;
  background-color: #000;
  color: #fff;
  opacity: 0.7;
  font-size: 80%;
  border-width: 0;
}
/* □■-----------------------------------------------------
/ 『モバイルスライドメニュー』
-----------------------------------------------------■□ */
/* モバイルメニューの高さ変更 */
.mobile-footer-menu-buttons {
  min-height: 60px;
  background-color: rgba(255, 255, 255, 0.5);
}
/* 「Ｘ」ボタン */
.fa-times {
  color: var(--dk-blue-color);
  font-size:1.2em;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /* プロフィール欄 */
  .widget_author_box .author-box {
    width: 80%;
  }
  /* モバイルメニューの文字を消す */
  .mobile-menu-buttons .menu-caption{ display: none; }
  .mobile-menu-buttons { align-items: center; /*background-color: rgb(255 255 255 / 0%);*/ }
  /* ロゴ画像の空白を無くす */
  .mobile-menu-buttons > li {
    padding: 0;
  }
  /* モバイルフッターメニューの幅を調整 */
  #menu-mobile-footer-menu .navi-menu-button,
  #menu-mobile-footer-menu .top-menu-button { width: 28% !important; }
  /* モバイルメニューアイコンの色と太さ変更 */
  .mobile-menu-buttons .menu-icon,
  .menu-close-button { color:#1b334b; font-size:2.0em; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* スマホで改行する */
  .br-sp { display: block; }
}

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