/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 31 2026 | 01:58:25 */
/*PC:～992px / tablet:991～768px / レスポンシブ:780px (完全sp:767px～)*/
/*コンテンツ横幅 1140px (内訳:1110px padding-left:15px padding-right:15px)*/
/*Origin Ⅱ (Bootstrap4)*/

/*==============================================================
トップページ共通
==============================================================*/
/*----------------------------------------------------
縦書き
----------------------------------------------------*/
.tate, .tate_pc {writing-mode:vertical-rl; text-orientation:upright; height:max-content;
	display:inline-block; text-align:justify;}
.fs110 {font-size:110%;}
/*----レスポンシブ----*/
@media (max-width: 780px) {.tate_pc {writing-mode: initial; display: block;}}
/*----------------------------------------------------
リスト / li_col
----------------------------------------------------*/
.li_col {display:flex; flex-wrap:wrap;}
/*----幅----*/
.li_col .w40 {width:40%;}
.li_col .w50 {width:50%;}
.li_col .w60 {width:60%;}
/*----レスポンシブ----*/
@media (max-width: 780px) {.li_col .w40, .li_col .w50, .li_col .w60 {width:100%;}}
/*----------------------------
画像 / 賑やかし（2分割の帯）
----------------------------*/
.li_col .pr_img {aspect-ratio:16 / 8; background-color:#ccc;}
.li_col .pr_img img {width:100%; height:100%; object-position:center; object-fit:cover;}
/*----------------------------
画像 / 西九州茶連の詳細（縦長）
----------------------------*/
.li_col .about_img {position:relative; z-index:1;
	width:100%; max-width:300px; aspect-ratio:1 / 1.5; background-color:#ccc;}
.li_col .about_img:before, .li_col .about_img:after {
	position:absolute; content:""; z-index:-1; width:48px; aspect-ratio:1 / 1; border:1px solid; border-color:#136511;}
.li_col .about_img:before {left:-6px; top:-6px; border-right:none; border-bottom:none;}
.li_col .about_img:after {right:-6px; bottom:-6px; border-left:none; border-top:none;}
.li_col .about_img img {width:100%; height:100%; object-position:center; object-fit:cover;}
.li_col .about_img.left {margin:0 0 0 auto;}
.li_col .about_img.right {margin:0 auto 0 0;}
/*----レスポンシブ----*/
@media (max-width: 780px) {
	.li_col .about_img {max-width:96%; aspect-ratio:16 / 8;}
	.li_col .about_img.left, .li_col .about_img.right {margin:0 auto 24px;}}

/*==============================================================
スライド
==============================================================*/
.carousel {border-bottom:none;}
/*----------------------------------------------------
画像を画面いっぱいに
----------------------------------------------------*/
.carousel {height:calc(100vh - 74px);}
.carousel-inner {height:100%;}
.carousel-item {height:100%;}
.carousel-item img {width:100%!important; height:100% !important; object-fit:cover; object-position:80% 50%;}
/*----レスポンシブ----*/
@media (max-width:767px) {
	.carousel {height:calc(100vh - 56px - 64px);}}
/*----------------------------------------------------
マウス反応
----------------------------------------------------*/
/*----スライドの上にカーソルがあってもスライドが切り替わるように----*/
.carousel {border-bottom:none; pointer-events: none;}
/*----スライドのセレクターはカーソルに反応するようにする----*/
.carousel-control-prev, .carousel-control-next, .carousel-indicators {pointer-events:auto;}
/*----------------------------------------------------
アニメーション
----------------------------------------------------*/
/*----キーフレーム設定（ズームイン）----*/
@keyframes zoom-in {
	0% {transform: scale(1.0);}
	100% {transform: scale(1.1);}}
/*----実行----*/
.carousel-item-next img, .active:not(.popmake) img {
	animation-name: zoom-in;
	animation-duration:10s;
	animation-timing-function:linear;
	animation-fill-mode:forwards;}
/*----------------------------------------------------
アイテム
----------------------------------------------------*/
.slide-text-set {display:flex; align-items:center; pointer-events:none; height:100%; 
	background-image:url(/wp-content/uploads/slide_item01_nkc_03.webp), 
		url(/wp-content/uploads/slide_item02_nkc_01.webp); 
	background-repeat:no-repeat, no-repeat; 
	background-position:left top, right bottom; 
	background-size:100% auto, 100% auto;}
/*----レスポンシブ----*/
@media (max-width:991px) {
	.slide-text-set {background-size:130% auto, 130% auto;}}
@media (max-width:767px) {
	.slide-text-set {background-size:230% auto, 230% auto;}}
/*----------------------------------------------------
文字
----------------------------------------------------*/
.slide-text-set .container {max-width:max-content;}
.slide-text-title {text-decoration:underline dotted 2px; text-underline-offset:8px;
	font-size:clamp(2rem, 0.229rem + 3.7vw, 3rem); 
	text-shadow:0 0 6px #000000; font-weight:900;}

/*==============================================================
お知らせ
==============================================================*/
/*----------------------------------------------------
ボタン / 背景
----------------------------------------------------*/
.bg_news {padding:64px 0; box-shadow:0 0 6px #00000020; 
	background-image:url(/wp-content/uploads/bg_news_01.svg); 
	background-repeat:no-repeat; background-position:left -8vw top -20vw; background-size:48% auto;}
/*----レスポンシブ----*/
@media (max-width:767px) {
	.bg_news {background-position:left -15vw top -30vw; background-size:90% auto;}}
/*----------------------------------------------------
ボタン / btn_link
----------------------------------------------------*/
.btn_link {width:80%; max-width:300px; margin:0 auto;}
.btn_link a {display:block; padding:20px 8px; text-align:center; color:#444;
	border:1px solid; background-color:#91ffb320; border-radius:50vw; transition-duration:0.2s;}
.btn_link a:hover {text-decoration:none; background-color:#43e1985e; transition-duration:0.2s;}
.btn_link i {margin-right:8px;}

/*==============================================================
うれしの茶
==============================================================*/
/*----------------------------------------------------
西九州茶連についての画像
----------------------------------------------------*/
.ureshinocha_img {width:98%; margin:0 auto; aspect-ratio: 16 / 7; background-color:#ccc; 
	border:4px solid #136511; outline:1px solid #136511; outline-offset:4px;}
.ureshinocha_img img {width:100%; height:100%; object-fit:cover; object-position:center;}
/*----レスポンシブ----*/
@media (max-width:767px) {.ureshinocha_img {aspect-ratio: 16 / 9;}}

/*==============================================================
各種ご案内
==============================================================*/
/*----------------------------------------------------
リスト / ページセレクト
----------------------------------------------------*/
.li_pselect {display:flex; flex-wrap:wrap; column-gap:64px; row-gap:64px;}
/*----子----*/
.pselect_ch {width:calc((100% - 64px) / 2); 
	position:relative; z-index:1; display:flex; flex-direction:column; row-gap:16px;
	border:1px solid #00000020; border-radius:8px; overflow:hidden; 
	background-color:#fff; transition-duration:0.3s;}
.pselect_ch:hover {background-color:#fffdca; transition-duration:0.3s;}
/*----アイテム（リンク）----*/
.psel_link {position:absolute; z-index:2; left:0; top:0; width:100%; height:100%;}
.psel_link a {display:block; width:100%; height:100%;}
/*----アイテム（タイトル）----*/
.psel_tit {font-size:clamp(1.2rem, 0.846rem + 0.74vw, 1.4rem);
	margin:0 32px; padding:0 0 12px; text-align:center; border-bottom:1px solid;}
.psel_tit span {display:block; font-size:70%; color:#488d2c;}
/*----アイテム（文章）----*/
.psel_txt {margin:0 32px; line-height:1.9;}
/*----アイテム（ボタン）----*/
.psel_btn {width:80%; max-width:240px; margin:auto auto 32px; padding:8px 4px;
	text-align:center; border:1px solid; border-radius:50vw; text-transform:uppercase;
	background-color:#fff; transition-duration:0.3s;}
.pselect_ch:hover .psel_btn {color:#fff; background-color:#ffa85d; transition-duration:0.3s;}
/*----アイテム（画像）----*/
.psel_img {width:100%; aspect-ratio:2 / 1; overflow:hidden;}
.psel_img img {width:100%; height:100%; object-fit:cover; object-position:center; 
	transform:scale(1.0); transition-duration:0.3s;}
.pselect_ch:hover .psel_img img {transform:scale(1.05); transition-duration:0.3s;}
/*----レスポンシブ----*/
@media (max-width: 780px) {.pselect_ch {width:90%; margin:0 auto;}}

/*==============================================================
お問い合わせ
==============================================================*/
/*----------------------------------------------------
フレーム / お問い合わせ
----------------------------------------------------*/
.fr_otoiawase {display:table; width:80%; margin:0 auto; padding:64px;
	background-color:#ffffffeb; border-radius:8px;}
/*----レスポンシブ----*/
@media (max-width: 780px) {.fr_otoiawase {width:100%; padding:32px;}}
/*----------------------------------------------------
ボタン / お問い合わせ
----------------------------------------------------*/
.btn_con {display:table; margin:0 auto; width:100%; max-width:360px;}
.btn_con a {display:table-cell; vertical-align:middle; 
	 height:70px; padding:0px; text-align:center; font-size:1.2rem; 
	color:#fff; background-color:#367c3c; border-radius:50vw; transition-duration:0.3s;}
.btn_con a:hover {text-decoration:none; background-color:#5f9941; transition-duration:0.3s;}
.btn_con.c01 a {background-color:#2b99ab;}
.btn_con.c01 a:hover {background-color:#31b3c1;}
/*----要素----*/
.btn_con span {display:block; font-size:70%;}
.btn_con i {margin-right:8px;}
