@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 次のコメントがある箇所は、ロゴの文字色とカラーコードを合わせること
 * 「ロゴの文字色と同じにする」
 * */

/* FAQ Bot Trigger Button Styles */
#faq-bot-trigger {
    background-color: #7F7F7F;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
#faq-bot-trigger:hover {
    transform: scale(1.1);
}

/* 記事タイトル内の投稿日時 (<time>) を非表示にする */
.c-postTitle__date {
    display: none !important;
}

/* Prev Next で付箋のように初期値で枠を作る */
.p-pnLinks__item {
    border: 1px solid #ececec;
}

/* ユーザープロフィールのリンクでもhover効果 */
.p-authorBox__desc a {
	display: inline-block;
	font-weight: 700;
	transition: .2s;
	text-decoration: none !important;
}
.p-authorBox__desc a:hover {
	box-shadow: none !important;
	border-bottom: none !important;

    /* 1. わずかに縮小（押されているような効果） */
    transform: translateY(1px) scale(0.98);
    
    /* 2. 背景色を少し薄くする */
    filter: brightness(1.05);
    
    /* 3. box-shadow（影）を調整して沈んだように見せる */
    box-shadow: 0 2px 0 #e59c3a; 
}


/* CTA Styles */
.cta-container {
    background-color: #dde785;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
	width: 60%;
    margin: 20px auto;
}

.cta-left {
    position: relative;
    width: calc(50% - 20px);
    text-align: center;
    margin-right: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.cta-container img {
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
}

.cta-right {
    color: #fff;
    font-size: 16px;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.cta-description {
    color: #000;
    padding: 10px;
    text-align: left;
}

.cta-btn {
    display: inline-block;
    padding: 1em 1em;
    text-decoration: none !important;
    background-color: #eead52; 
    color: #FFFFFF; /* 文字は白で視認性アップ */
    border: none;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    /* 影はボタン色より少し暗いトーン（#e59c3a）を使用 */
    box-shadow: 0 5px 0 #e59c3a; 
    transition: all 0.15s ease;
}

.cta-btn a {
	font-weight: 700;
	transition: .2s;
}
.cta-btn:hover {
    /* 1. わずかに縮小（押されているような効果） */
    transform: translateY(3px) scale(0.98);
    
    /* 2. 背景色を少し薄くする */
    filter: brightness(1.05);
    
    /* 3. box-shadow（影）を調整して沈んだように見せる */
    box-shadow: 0 2px 0 #e59c3a; 
}

@media only screen and (max-width: 1023px) {
    .cta-container {
        padding: 10px;
		width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .cta-container {
        display: block;
        padding: 20px;
    }
	.cta-right, .cta-left {
        width: 100%;
    }
	
}

/* フッター style */
.c-widget__title {
	position: relative;
    border-bottom: 1px solid #dde785;
	text-align: left;
    font-weight: bold;
}
.c-widget__title::before {
	position: absolute;
    border-bottom: 1px solid #f0b200;
    content: '';
    display: block;
	bottom: -3px;
    left: 0;
    width: 30%;
}
/*オンラインショップへ*/
.shop a {
	color: #654321 !important; /*ロゴの文字色と同じにする*/
    flex-direction: row !important; 
    align-items: center !important; 
    white-space: nowrap !important;
}
/* ナビゲーション内のclass="shop"を持つaタグの前にアイコンを表示 */
.shop a::before {
    /* Font Awesome 6 の基本設定 */
    font-family: 'Font Awesome 6 Free' !important; 
    font-weight: 900; /* Solidアイコン */ 
	
    /* アイコンのユニコード（ショッピングカートのアイコン） */
    content: "\f54e"; 
    
    /* アイコンとテキストの間隔を調整 */
    margin-right: 5px !important; 
    
    display: inline-block !important; 
}

/* フッタのオンラインショップへ */
a.shop::before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900;
    content: "\f54e";
    margin-right: 5px !important;
    display: inline-block !important;
}
/* フッタのサテライトリスト前の区切り */
hr.footer-hr {
    border: none !important; /* hr本来の線を消す */
    height: 1px !important;  /* 高さを確保 (または0にする) */
    background: transparent !important; /* 背景色を透明に */
    margin: 2em auto !important; /* 上下の余白と中央配置 */
    position: relative !important; /* ::before の基準点 */
    overflow: visible !important; /* 疑似要素がはみ出るのを許可 */
}
hr.footer-hr::before {
	font-family: 'Font Awesome 6 Free' !important; 
    font-weight: 900 !important;
	/*地球content: "\f57e";*/
	content: "\f0c1";
	color: #dde785 !important;
	display: inline-block !important;
    padding: 0 1em; /* アイコンを囲むパディング */
    background-color: #ffffff; /* アイコン背景色 (線が見えないように) */
	position: absolute;
    top: 50%; /* 縦方向の中心 */
    left: 50%; /* 横方向の中心 */
    transform: translate(-50%, -50%); /* アイコンの中心を正確に合わせる */
    z-index: 10; /* 線より手前に表示 */
}
hr.footer-hr::after {
    content: ""; /* 線を描画するためにcontentを空にする */
    position: absolute;
    top: 50%;
    left: 0;
    
    /* 線自体のデザイン */
    width: 100%;
    height: 1px;
    background-color: #dde785; /* 元の線の色 */
    z-index: 5; /* アイコンより奥に表示 */
}

/*お問い合わせ*/
.otoiawase a {
	color: #654321 !important; /*ロゴの文字色と同じにする*/
    flex-direction: row !important; 
    align-items: center !important; 
    white-space: nowrap !important;
}
.otoiawase a::before {
    /* Font Awesome 6 (Solid) の基本設定 */
    font-family: 'Font Awesome 6 Free' !important; 
    font-weight: 900 !important; 
    
    /* 📧 メールアイコン (envelope) のユニコード */
    content: "\f0e0" !important; 
    
    /* アイコンとテキストの間隔を調整 */
    margin-right: 5px !important; 
    
    display: inline-block !important; 
}
/* ハンバーガーメニューの3本線 */
.c-iconBtn .c-iconBtn__icon {
	color: #654321 !important; /*ロゴの文字色と同じにする*/
}

/*中央寄せ*/
.tcenter {
	text-align:center;
}

/*他の動画も見る*/
.button_wrapper {
    padding: 2em 1em 1em;
    text-align: center;
}
.button_wrapper button {
    border: 1px solid #656565;
    border-radius: 3px;
    position: relative;
    max-width: 300px;
    width: 100%;
}
.button_wrapper button::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -6px;
    transform: rotate(45deg);
    border-top: 2px solid #656565;
    border-right: 2px solid #656565;
    transition: right 0.3s;
}
.button_wrapper button {
    /* 変化を滑らかにする */
    transition: all 0.3s ease; 
}

.button_wrapper button:hover {
    /* わずかに縮小（押されているような効果） */
    transform: scale(0.98); 
    
	border-color: #999999 !important;
	color: #666666 !important;
	
    /* カーソルをポインターに変更（念のため） */
    cursor: pointer; 
}

/*itemlink by post snipet*/
.itemarea {
    padding: 20px 0 20px 0;
    margin: 0;
	margin-bottom: var(--swl-block-margin, 2em);
	overflow: hidden;
}
.itemlink {
    width: calc(100% / 3 - 10px);
    height: 300px;
    float: left;
    margin-right: 7px;
    margin-bottom: 7px;
    line-height: 1.6;
}
.itemlink a {
    text-decoration: none;
    color: #7d7d7d;
    display: block;
    width: 99%;
    text-align: center;
}
.itemlink img {
    width: 100%;
    border: 1px solid #eeeeee;
}

@media only screen and (max-width: 767px) {
    .itemarea {
        padding: 20px 0 20px 0;
        margin: 0;
    }
    .itemlink {
        width: 100%;
        height: auto;
        float: none;
        margin: 0 auto 20px;
        line-height: 1.2;
    }
}