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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.pc{
	display: block;
}

.sp{
	display: none;
}

.article .article-header h1 {
	text-align: center;
    font-size: 2rem;
	padding-bottom: 0.6em;
    border-bottom: 2px solid #00b74f;
}

.article h2 {
    background: #e6e6cf;
    color: #1c1814;
    font-size: 1.6rem;
}

.article h3 {
    font-size: 1.4rem;
}

.article h4 {
    font-size: 1.3rem;
	border-left: 4px solid #e6e6cf;
    border-top: none;
}

.article h5 {
    font-size: 1.2rem;
    border-top: 2px solid #e6e6cf;
    border-bottom: 2px solid #e6e6cf;
}

.article h6 {
    font-size: 1.1rem;
    border-left: 3px solid #e6e6cf;
    border-bottom: none;
}

.article h3, .article h4, .article h5, .article h6 {
    border-color: #e6e6cf;
}

.wp-block-list li::marker{
	color: #00b74f;
}

.wp-block-buttons .page-btn .wp-block-button__link{
    background: #00b74f;
    border-radius: 0.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.wp-block-buttons .page-btn .wp-block-button__link:after{
	content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
}

.wp-block-buttons .page-btn .wp-block-button__link:hover{
    opacity: 0.5;
	transition: 0.5s;
	color: #fff;
}

.mobile-menu-buttons .menu-icon{
	display: block;
}

.mobile-menu-buttons .menu-caption{
	font-size: 12px;
}

.mobile-footer-menu-buttons{
    background-color: #e6e6cf;
}

.mobile-menu-buttons .menu-button{
    border: 1px solid #B49531;
}

.mobile-menu-buttons{
    box-shadow: none;
}

strong{
    background: linear-gradient(transparent 60%, #9ea91c);
}

.wp-block-group iframe{
    display: block;
    margin-bottom: 1.8em;
}

.box-menus .box-menu-icon{
	color: #00b74f;
}

.box-menus a{
    color: #000;
}

.copyright a{
    text-decoration: none;
}

.footer-center .sub-menu {
    display: inline-grid;
}

.footer-center .sub-menu li{
    display: ruby;
}

.footer-center .sub-menu li a{
    font-weight: 300;
    font-family: "Noto Serif JP", sans-serif;
}

#footer{
    background: #1c1814 url(https://www.awao-travel.com/cms/wp-content/uploads/2026/07/footer-back-image3.png) no-repeat top right / 60% auto;
}

/* ヘッダーのPC表示設定 */
/* スクロール追従時もサブメニュー（ドロップダウン）を表示させる設定 */
/* 1. ヘッダーやナビゲーション枠の「はみ出し非表示」を解除 */
.header-container,
.navi,
.navi-in,
.menu-header-container,
.mobile-header {
  overflow: visible !important;
}

/* 2. サブメニューの重なり順（z-index）を高めて前面に表示 */
.navi .sub-menu,
.navi ul.sub-menu {
  z-index: 99999 !important;
  display: none; /* 初期状態は非表示 */
}

/* 3. マウスホバー時に確実にサブメニューを表示させる */
.navi li:hover > .sub-menu,
.navi li:hover > ul.sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4. スクロールした際に三角マークが消えない */
.fixed-header .has-sub{
    display: flex;
}

/* 5. リスト項目の横幅 */
.navi-in > ul li{
    width: 14%;
}

/* 6. リスト項目のフォントサイズ */
.navi-in a{
    font-size: 0.7rem;
}
/* ヘッダーのPC表示設定ここまで */

#toc{
    background: #f7f7f7;
}

.toc-title{
    background: #e6e6cf;
    font-weight: 800;
}

.toc-list li{
    font-weight: bold;
    border-bottom: 1px solid #757575;
}


.toc-list li ol li{
    font-weight: normal;
	border-bottom: none;
}

.author-box{
    background: #fff;
}

.author-content .author-name a{
	text-decoration: none;
    color: #00b74f;
    border-bottom: 2px solid #00b74f;
}

#content-bottom{
    padding: 36px 29px;
    margin: 0 auto;
}

#content-bottom-in{
	width: 840px;
}

.article-footer .sns-share-buttons{
	width: 840px;
	margin: 0 auto;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.rev {
		flex-direction: column-reverse;
	}
	
	.pc{
		display: none;
	}

	.sp{
		display: block;
	}
	
	.navi-footer-in > .menu-footer li.menu-item{
        width: 100%;
		border-bottom: 1px solid;
	}
	
	.navi-footer-in > .menu-footer li.menu-item{
        margin: 2px 2px 10px 2px;
	}
	
	
	.article .article-header h1 {
		padding: 0.6em 0;
	}
	
	.mobile-header-menu-buttons {
		display: flex !important;
	}

	.mobile-header-menu-buttons .navi-menu-button {
		order: 3 !important;
	    background: #e6e6cf;
	    color: #000;
	}

	.mobile-header-menu-buttons .logo-menu-button {
		order: 1 !important;
	    justify-content: left;
	}

	.mobile-header-menu-buttons .search-menu-button {
		order: 2 !important;
	    background: #e6e6cf;
	    color: #000;
	}
	
	.navi-menu-content{
	    right: 0;
	    left: auto;
		-webkit-transform: translateX(105%);
		transform: translateX(105%);
	    background: #e6e6cf url(https://www.awao-travel.com/cms/wp-content/uploads/2026/07/footer-back-image2.png) no-repeat bottom right / 120% auto;
	}
	
	.menu-drawer a{
	    border-bottom: 1px solid #00b74f;
	}
	
	.footer-mobile .sub-menu{
	    display: inline-grid;
	}
	
	.footer-mobile .sub-menu li{
		display: inline-flex;
		padding: 10px 4px;
	}
	
	.footer-mobile .sub-menu li a{
		font-weight: 300;
    	font-family: "Noto Serif JP", sans-serif;
		padding: 0 4px;
	}
	
	#footer{
		background: #1c1814 url(https://www.awao-travel.com/cms/wp-content/uploads/2026/07/footer-back-image3.png) no-repeat bottom right / 120% auto;
	}
	
	/* ==================================================
	   モバイルヘッダーの「メニュー」を三本線アイコンに変更
	================================================== */

	/* 1. 「メニュー」テキストを非表示にする */
/* 	.navi-menu-caption.menu-caption {
	  display: none !important;
	} */

	/* 2. 既存のアイコン枠を表示・サイズ調整 */
	.navi-menu-icon.menu-icon {
	  display: inline-block !important;
	  font-size: 22px; /* アイコンの大きさ */
	  line-height: 1;
	}

	/* 3. アイコン（Font Awesome）を三本線に固定設定 */
	.navi-menu-icon .fa-bars::before,
	.navi-menu-icon .fas::before {
	  content: "\f0c9" !important; /* Font Awesome 三本線コード */
	  font-family: "Font Awesome 5 Free" !important;
	  font-weight: 900 !important;
	  color: #333; /* アイコンの色（お好みで変更可） */
	}
	
	/* ==================================================
	   モバイルヘッダーの「メニュー」に矢印を追加
	================================================== */
	/* 1. リスト項目の配置整列 */
	.navi-menu-content .menu-drawer li a {
	  position: relative;
	  display: flex !important;
	  align-items: center;
	  padding-left: 25px !important; /* 矢印の入る余白を確保 */
	}

	/* 2. リンクテキストの直前に「＞」マークを描画 */
	.navi-menu-content .menu-drawer li a::before {
	  content: '';
	  position: absolute;
	  left: 6px; /* 矢印の左右位置 */
	  width: 6px;  /* 矢印の横幅 */
	  height: 6px; /* 矢印の高さ */
	  border-top: 2px solid #666;  /* 矢印の線の太さと色 */
	  border-right: 2px solid #666; /* 矢印の線の太さと色 */
	  transform: rotate(45deg);     /* 斜め45度に傾けて「＞」を作る */
	}

	/* 3. サブメニュー（階層下）の線 */	
	.navi-menu-content .menu-drawer .sub-menu li a::before {
	  content: '-';
	  position: absolute;
	  left: 10px; /* 線の左右位置 */
	  width: 6px;  /* 線の横幅 */
	  height: 23px; /* 線の高さ */
      border-top: none;
      border-right: none;
	  transform: none;
	}
	
	/* ==================================================
	   モバイルヘッダーの「メニュー」関係はここまで
	================================================== */
	
	#content-bottom{
		padding: 32px 16px;
	    margin: 0 auto;
	}
	
	#content-bottom-in{
		width: 100%;
	}
	
	.article-footer .sns-share-buttons{
		width: 100%;
		margin: 0 auto;
	}
	
	.fixed-btn-sp {
	    position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 100;
	}
}