@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ローディング画面
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.loading_wrap {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: var(--base-1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading_wrap .img {
	display: none;
	width: 300px;
	margin-bottom: 0px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　＞　クラシックテーブル01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table01 th {
    font-weight: 500;
    color: var(--text-2)
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　＞　クラシックテーブル02
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table02 table {
	border-spacing: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用 > 縦文字
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tate {
	writing-mode: vertical-rl;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップへ戻る
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.generate-back-to-top {
	border: 2px solid var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
チャイルドナビ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.h_child_navi ul.child_navi {
	gap: 20px;
    border-radius: 0;
}

.h_child_navi ul.child_navi a {
    background-color: #f7f6f4;
	border: 1px solid #cfcbc9;
	color: var(--text-2);
    font-size: 16px;
    font-weight: 500px;
}

.h_child_navi ul.child_navi a:hover,
.h_child_navi ul.child_navi li[class*='current'] a {
    background-color: var(--text-2);
	border: 1px solid var(--text-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ promo
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*動画の高さ*/
.entry-content .wp-block-cover {
	height: 100svh;
	max-height: 56.25vw;
	position: relative;
	margin: 0;
}

#home_promo .ttl_deco {
  will-change: opacity;
  isolation: isolate;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ intro
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*Instagram*/
#sb_instagram {
	padding-bottom: 0!important;
}

#sb_instagram #sbi_images {
	padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ service
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_service .service_container {
	flex: 1;
}

#home_service h3 .cmn-small {
    font-size: 17px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ portrait
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_portrait::after {
	animation: service-slider 60s linear infinite;
}

@keyframes service-slider {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1920px 0;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ shop
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_shop .map_area::before {
	animation: 1.7s fuwafuwa infinite;
}
	
@keyframes fuwafuwa {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ ＞ news
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_news .post:last-child {
	border: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer-widgets ul.menu {
	gap: 65px;
}

#footer-widgets ul.menu > li {
	font-weight: 500;
}

#footer-widgets .sub-menu {
	padding-left: 30px;
}

#footer-widgets .sub-menu > li a {
	color: var(--text-2);
}

#footer-widgets .sub-menu > li a::before {
	content: '';
	position: absolute;
	width: 15px;
	height: 1px;
	background: var(--text-2);
	top: 50%;
	left: -30px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層　＞　スティッキーのための記述
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*トップにも記述すると横がはみ出すため下層のみ */
body:is(.page-shop,.page-qualification) .body_inner {
overflow-x: visible !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
カスタム投稿　＞　商品
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*商品左カテゴリー*/
.item_cat_area ul {
  list-style: none;
  font-size: 15px;
}

.item_cat_area ul li a {
  color: #000;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e2e1;
}

.item_cat_area ul li a:hover {
  color: var(--main);
}

/*修理非表示*/
.item_cat_area ul li.cat-item-26 {
  display: none
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
詳細ページ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*ヘッダー下線が消える*/
body:is(.single-item,.single-post) .container {
    background-color: transparent!important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
商品　＞　kids
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.term-kids #page{
	padding:80px 0;
	margin-bottom:80px;
	background:url(images/kids_bg.jpg);
}

.term-kids #main {
    background-color: #fff;
    padding: 80px 0 0 0;
    width: 90%;
    margin: 0 auto;
}

.term-kids .note_page_promo {
    padding-top: 4vw;
}

.term-kids .item_note,
.kids_service {
  display: none;
}

.term-kids .kids_service {
  display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
noimageの時の画像サイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[style*="no-image"] {
    background-size: 30%!important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
投稿
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*右カテゴリー*/
#right-sidebar aside ul li a{
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e2e1;
}

#right-sidebar aside ul li a:hover {
  color: var(--main);
  opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダーナビ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
/* カレント（repairカテゴリは除外） */
body[class*='item']:not(.cat-repair) ul:not(.sub-menu) > li.item:not(.contact) > a,
body:is(.single-post, .category):not(.cat-repair) .inside-navigation ul:not(.sub-menu) li.hnav_post:not(.contact) > a{
	color: var(--main);
}

/* repairカテゴリではserviceだけ色変更 */
.cat-repair .main-navigation .main-nav ul li > a[href*=service] {
    color: var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(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: 16px;
	height: 1px;
	background: var(--text);
	width: 36%;
}

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

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

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

/*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%;
}

/*トップ*/
.home #mobile-header:not(.is_stuck) .openbtn span{
	background: #fff;
}