@charset "utf-8";

/*
Theme Name: Katawara Child
Theme URI:
Template: katawara
Description:
Author:
Tags:
Text Domain: katawara
Version: 0.0.1
*/


/*************************************************
* WrorPressの不具合と思われる対応（暫定的）
* 投稿者権限でインライン文字の色を設定すると背景色が黄色になる不具合
**************************************************/

/*************************
* インライン文字色	 	 *
**************************/
mark{
	background-color: initial;
}

/**************************************************/
/*********   ここまで    **************************/
/**************************************************/


/** カラムブロックの既定文字サイズ **/
.wp-block-column{
	font-size: 15px;
}

/* リンク色 */
a{
	color: #3264e9;
}
a:hover{
	color: #FF6900;
	transition: transform 0s;
}

/**********************
メニュー表示を３段階から２段階へ変更（PC/スマホ)
**********************/

@media (max-width:1199.98px){
	/* ハンバーガーメニュー表示 */	
	.vk-mobile-nav-menu-btn {
		display: block !important;
	}
	/* グローバルナビ非表示 */
	.l-site-header_global-menu {
		display: none;
	}
	/* モバイル固定ナビの表示*/
	.mobile-fix-nav{
		display: block;
	}

	/* description 非表示 */
	.p-site-header-brand_description {
    	display: none;
	}

	/* copyrightのマージンボトムをモバイル固ナビ分空ける */
	.p-copyright{
		margin-bottom: 62px!important;
	}
}

@media (min-width: 992px){
	/* モバイルナビの表示*/
	body.device-pc .vk-mobile-nav {
  	  display: block;
	}
	/* description 非表示 */
	.p-site-header-brand_description {
    	display: none;;
	}
}

@media (min-width: 1200px){
	/* モバイルナビの非表示*/
	body.device-pc .vk-mobile-nav {
    	display: none;
	}
	/* description 表示 */
	.p-site-header-brand_description {
    	display: block;
	}
}

.device-mobile .p-copyright{
		padding-bottom: 0;
}

/**********************
PC時のロゴまわりを小さく
**********************/
@media (min-width: 1200px){
	.l-site-header_inner{
		padding: 0.5em 1em 1em;
	}
}
/**********************
モバイル時のロゴ左寄せ
**********************/
@media (max-width: 1200px){
	.p-site-header-brand{
		padding: 12px 14px;
	}
	.p-site-header-brand_logo{
		padding: 0 0;
	}
	.p-site-header-brand_logo a img{
		margin: 0 0;
		width: 350px;
		max-width: 350px;
	}
}
@media (max-width: 575px){
	.p-site-header-brand_logo a img{
		max-width: calc( 100vw - 60px - 30px); /* メニュボタンの幅+α小さく */
	}
}

/**********************
リンクの下線 中央から外側へ伸びる
**********************/
.link-line a {
	color: #dd9933;
	position: relative; /*アンダーラインの位置を決めるための基準 */
	text-decoration: none!important;
	border-bottom: solid 1px #ccab7d;
	padding-bottom:5px;
}
.link-line a::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #ccab7d;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/
}
.link-line a:hover{
	 letter-spacing: 0.1em; /* 字間の設定 */
}
.link-line a:hover::after {
	transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

/**********************
 パンくずリストを非表示 
**********************/
body .breadcrumb {
//    display: none;
}

/**********************
 ハンバーガーメニュー
**********************/
.vk-mobile-nav-menu-btn {
	top: 0px;
	width: 60px;
	height: 64px;
	border: none;
	background-image: url("../../uploads/2025/08/btn_menu.png");
  	background-size: cover;
	background-position: top left;
	font-size: 0;		/* MENU文字を消すため */
}
.vk-mobile-nav-menu-btn.menu-open {
    border: none;
	background-image: url("../../uploads/2025/08/btn_close.png");
	background-size: cover;
	background-position: top left;
}

/**********************
 TOPへ戻るボタン変更
**********************/
.page_top_btn{
    width: 52px;
    height: 52px;
    border: none;
    background: none;
    box-shadow: none;
	background-image: url("../../uploads/2025/08/button-top.png");
	background-size: 100%;
}

/**********************
 見出し
**********************/
h1,h2,h3,h4,h5,h6{
	font-weight:normal;
}


/* 見出し2 装飾 短い線 */
h2{
	color: #705E44;
	font-size: 2rem;
}

h2::before{
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin-bottom: 1.5rem;
	background-color:     
	currentColor !important;
	position: relative;
	top:unset;
	right:unset;
	left:unset;
	bottom:unset;
	border: unset;
}
/* 短い線中央寄せ */
h2::before{
	margin-left: auto;
	margin-right: auto;
}

h3{
	padding: 0.6em 0.7em;
 	color:#6a3906;/*文字色*/
	border-left: solid 4px #6a3906;	/*左線*/
	border-bottom: none;
 	font-size:1.5rem;
}

h4{
	margin-bottom: 2em;
 	font-size:1.3rem;
  	border-bottom: solid 2px #0097dd;
  	position: relative;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
//	color: #895c4e;
 	color:#6a3906;/*文字色*/
}
h4::after{
  	position: absolute;
  	content: " ";
  	display: block;
  	border-bottom: solid 2px #fac02c;
  	bottom: -2px;
  	width: 30%;
}


/* 投稿タイトルの見出し */
h1.entry-title{
	font-size: 1.6rem;
}

/**********************
グローバルナビ 文字
**********************/
.p-global-menu>li a{
	font-size: 1rem;
	text-align: left;
	padding: 0.7em 1.2em;
}

.p-global-menu>li a:hover{
	letter-spacing: 0.02em;
	font-weight: bold;
}

.p-global-menu>li ul.sub-menu li a {
    padding-left: 2.2em;
    position: relative;
}
/**********************
サブメニューを開くボタン
**********************/
.p-global-menu .acc-btn-open {
    background-color: #e0e0e0;
}

/**********************
モバイルナビ 文字
**********************/
.mobile-fix-nav-menu li a{
	font-size: 14px;
}

/**********************
ページヘッダー
**********************/
.p-page-header{
	height: 200px;	
}
.p-page-header_title:first-child{
	margin: 30px auto;
	text-shadow: 0px 0px 20px #000000;	
	letter-spacing: 0.08em;
	font-size: 2rem;
	@media screen and (max-width: 576px){
		font-size: 1.6rem;
	}
}

/**********************
フローティングバナー
(画面右端)
**********************/
.floating-banner {
    position: fixed;
    z-index: 99999;
    top: 150px;
    right: 0;
}
.banner-right {
	width: 60px;/* バナーの横幅 */
	margin-bottom: 50px;
	padding: 10px 15px;
	background-color: #af9676;	/* バナーの背景色 */
    color: #ffffff;/* バナー内の文字色 */
    font-weight: normal;
    text-align: center;
	border: solid 2px #ffffff;
	border-radius: 10px 0 0 10px;
}
.banner-right:hover{
	background-color: #fafafa;	/* バナーの背景色 */
	border: solid 1px #af9676;
    color: #ccab7d;/* バナー内の文字色 */
}
.floating-banner a {
    text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1.4em;
    margin:10px auto 10px;
    line-height: 1.2;
}

@media screen and (max-width: 1199.98px) {
    .floating-banner {
        display: none;
    }
}

/**********************
投稿リスト　日付、タイトル文字
**********************/
.postListText_date,
.postListText_title a{
	font-size: 1rem;
}

.postListText_date{
	min-width: 7.5em;
}

.postListText_singleTermLabel_inner{
	min-width: 15em;
}


.p-prev-next{
	display: none;
}


/**********************
 リスト文字色
**********************/
ul.is-style-vk-arrow-mark li, ul.is-style-vk-triangle-mark li, ul.is-style-vk-check-mark li, ul.is-style-vk-check-circle-mark li, ul.is-style-vk-check-square-mark li, ul.is-style-vk-handpoint-mark li, ul.is-style-vk-pencil-mark li, ul.is-style-vk-smile-mark li, ul.is-style-vk-frown-mark li, ul.is-style-vk-numbered-circle-mark li, ul.is-style-vk-numbered-square-mark li, ol.is-style-vk-arrow-mark li, ol.is-style-vk-triangle-mark li, ol.is-style-vk-check-mark li, ol.is-style-vk-check-circle-mark li, ol.is-style-vk-check-square-mark li, ol.is-style-vk-handpoint-mark li, ol.is-style-vk-pencil-mark li, ol.is-style-vk-smile-mark li, ol.is-style-vk-frown-mark li, ol.is-style-vk-numbered-circle-mark li, ol.is-style-vk-numbered-square-mark li{
	color:#333333;

}

ul.is-style-default:not(.has-text-color), ul.is-style-default:not(.has-link-color), ul.is-style-vk-arrow-mark:not(.has-text-color), ul.is-style-vk-arrow-mark:not(.has-link-color), ul.is-style-vk-triangle-mark:not(.has-text-color), ul.is-style-vk-triangle-mark:not(.has-link-color), ul.is-style-vk-check-mark:not(.has-text-color), ul.is-style-vk-check-mark:not(.has-link-color), ul.is-style-vk-check-circle-mark:not(.has-text-color), ul.is-style-vk-check-circle-mark:not(.has-link-color), ul.is-style-vk-check-square-mark:not(.has-text-color), ul.is-style-vk-check-square-mark:not(.has-link-color), ul.is-style-vk-handpoint-mark:not(.has-text-color), ul.is-style-vk-handpoint-mark:not(.has-link-color), ul.is-style-vk-pencil-mark:not(.has-text-color), ul.is-style-vk-pencil-mark:not(.has-link-color), ul.is-style-vk-smile-mark:not(.has-text-color), ul.is-style-vk-smile-mark:not(.has-link-color), ul.is-style-vk-frown-mark:not(.has-text-color), ul.is-style-vk-frown-mark:not(.has-link-color), ul.is-style-vk-numbered-circle-mark:not(.has-text-color), ul.is-style-vk-numbered-circle-mark:not(.has-link-color), ul.is-style-vk-numbered-square-mark:not(.has-text-color), ul.is-style-vk-numbered-square-mark:not(.has-link-color), ol.is-style-default:not(.has-text-color), ol.is-style-default:not(.has-link-color), ol.is-style-vk-arrow-mark:not(.has-text-color), ol.is-style-vk-arrow-mark:not(.has-link-color), ol.is-style-vk-triangle-mark:not(.has-text-color), ol.is-style-vk-triangle-mark:not(.has-link-color), ol.is-style-vk-check-mark:not(.has-text-color), ol.is-style-vk-check-mark:not(.has-link-color), ol.is-style-vk-check-circle-mark:not(.has-text-color), ol.is-style-vk-check-circle-mark:not(.has-link-color), ol.is-style-vk-check-square-mark:not(.has-text-color), ol.is-style-vk-check-square-mark:not(.has-link-color), ol.is-style-vk-handpoint-mark:not(.has-text-color), ol.is-style-vk-handpoint-mark:not(.has-link-color), ol.is-style-vk-pencil-mark:not(.has-text-color), ol.is-style-vk-pencil-mark:not(.has-link-color), ol.is-style-vk-smile-mark:not(.has-text-color), ol.is-style-vk-smile-mark:not(.has-link-color), ol.is-style-vk-frown-mark:not(.has-text-color), ol.is-style-vk-frown-mark:not(.has-link-color), ol.is-style-vk-numbered-circle-mark:not(.has-text-color), ol.is-style-vk-numbered-circle-mark:not(.has-link-color), ol.is-style-vk-numbered-square-mark:not(.has-text-color), ol.is-style-vk-numbered-square-mark:not(.has-link-color){
	color:#333333;

}

/* 枠線ボックス内の文字 */
.vk_borderBox .vk_borderBox_body>*:not([class*=alert-]):not(.has-text-color){
	color: #333333;
}

/***********************
 アコーディオンの右端矢印の大きさ
***********************/
.vk_accordion-trigger .vk_accordion-toggle-close::after, .vk_accordion-trigger .vk_accordion-toggle-open::after{
	width: 12px;
	height: 12px;
}

.disp-none{
	display: none;
}

}