@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(2023-03-13mk)
↓↓↓下記をまずは削除した上で、【https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/】から、お好みのボタンのCSSを追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background:transparent;
	cursor: pointer;
	width: 50px;
	height:50px;
	border-radius: 5px;
}

/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 14px;
	height: 2px;
	border-radius: 2px;
  background:var(--main);
	width: 45%;
}

.openbtn span:nth-of-type(1) {
	top:15px; 
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
プロモテキスト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.promo h2 span:not(.cmn_dotted) {
    background-color: var(--site-bg);
    padding: 10px 50px;
}

.promo h2 span:nth-child(1):not(.cmn_dotted) {
    padding: 20px 50px 10px;
}

.promo h2 span:nth-child(2) {
    font-size: clamp(37px, 18.667px + 1.528vw, 48px);
}

.promo h2 span.cmn_dotted {
    padding-top: 0px;
    background-image: radial-gradient(circle, var(--accent) 4px, transparent 4px);
    background-repeat: repeat-x;
    background-size: clamp(52px, 28.667px + 1.944vw, 66px) 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
オファー、強み
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_offer h2 .cmn-big,
#home_usp h2 .cmn-big{
    font-family: Cabin, sans-sefif;
    font-size: 64px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
投稿アーカイブ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#right-sidebar aside ul.children {
    border-top: none; 
}

#right-sidebar aside ul.children li:not(:last-child) {
    border-bottom: none; 
}

#right-sidebar aside ul li li a{
	padding:8px 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用 ＞ カテゴリーカラー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
	--news: #07bb97;
	--cleaning: #125ba5;
	--pest-control: #353c44;
}

/* お知らせ */
.cat:has(.term-news)  {
	background: var(--news);
}

/* 清掃 */
.cat:has(.term-cleaning),p:has(.term-cleaning) {
    background: var(--cleaning);
}

/* 害獣・害虫駆除 */
.cat:has(.term-pest-control),p:has(.term-pest-control) {
    background: var(--pest-control);
}