@charset "utf-8";

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用 > 点線BOX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cmn_waku {
    background: #fff;
    border: 2px dashed #d2ccc2; 
    border-radius: 30px;
    padding: 60px
}

/*カゲ*/
.cmn_waku.shadow { 
    box-shadow: 8px 8px 0px 0px var(--base-1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用 > 配達エリア　ストライプ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.area_stripe {
  background-image: repeating-linear-gradient(45deg, #cde19c, #cde19c 7px, #ffffff 7px, #ffffff 14px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
共通
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*アンダーライン*/
mark.cmn-underline-maker {
    background: linear-gradient(transparent 60%, #ffe6a7 60%);
    color: var(--text);
} 


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
カスタム投稿（導入事例） > カテゴリー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*食堂運営*/
.case_category-shokudo .case_cat {
	background-color: var(--accent);
}

/*パック給食*/
.case_category-pack .case_cat {
	background-color: var(--accent-2);
}

/*写真角丸*/
body:is(.single-case) .interview_wrap img {
    border-radius: 10px;
}

/* カレント */
body[class*='case'] ul:not(.sub-menu) > li.case:not(.contact) > a,
body:is(.single-post, .category) .inside-navigation ul:not(.sub-menu) li.hnav_post:not(.contact) > a{
	color: var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
投稿 > カテゴリー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*献立紹介*/
.category-menu .news_cat {
	background-color: var(--accent);
}

/*イベント*/
.category-event .news_cat {
	background-color: var(--accent-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.main-navigation:not(.is-open) {
	border-bottom: 2px dashed #d2ccc2;
}

.sticky-enabled .main-navigation.is_stuck {
	box-shadow: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
top > about
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_about::after {
	animation: rotate 80s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
top > case
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*スライダー*/
:root {
	--slide-width: 2480px;
}

#home_case::before {
	animation: slider01 60s linear infinite;
}

@keyframes slider01 {
	from {
		background-position: 0 0;
	}
	to {
		background-position: calc(-1 * var(--slide-width)) 0;
	}
}

#home_case::after {
	animation: slider02 120s linear infinite;
}

@keyframes slider02 {
	from {
		background-position: 0 0;
	}
	to {
		background-position: calc(-1 * var(--slide-width)) 0;
	}
}

/*矢印*/
#home_case .slick-prev.slick-disabled:before, 
#home_case .slick-next.slick-disabled:before {
	color: #d2ccc2!important;
	opacity: 1;
}

/*ドット*/
#home_case.cmn_carousel_2col ul.slick-dots {
	bottom: -50px;
}

#home_case .slick-dots li {
	margin: 0 15px;
}

#home_case.cmn_carousel_2col .slick-dots li button:before {
	color: #d2ccc2;
}

#home_case.cmn_carousel_2col .slick-dots li.slick-active button:before {
	color: var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* カレントカラー */
#footer-widgets.footer-widgets ul li[class*="current-menu-"] > a {
    color: var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
コピーライト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-info {
	background-image: url("./images/cmn_bg01.jpg");
	background-position: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下層 > 会社概要
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body:is(.page-outline) .table01 table ul {
    margin-bottom: 0!important;
}

body:is(.page-outline) .table01 table li::marker {
    color: var(--main);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(2023-03-13mk)
↓↓↓下記をまずは削除した上で、【https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/】から、お好みのボタンのCSSを追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp .my_hamburger {
	padding-right: 5px;
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background: var(--accent-2);
	cursor: pointer;
	width: 45px;
	height:45px;
	border-radius: 4px;
}

/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 11px;
	height: 2px;
	background: #fff;
	width: 50%;
}

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

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

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

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

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

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

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