@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用 > アコーディオン01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.accodion_toggle01 svg {
    color: #a6a9b7;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー　＞　メインナビゲーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* カレント */
body:is(.single-post, .category, .tag) .inside-navigation ul:not(.sub-menu) li.news a {
	color: var(--text-2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ > FV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_promo .area_a h2 .cmn-big {
    font-size: clamp(68px, 1.9vw + 44.6px, 82px);
    background: linear-gradient(180deg, #fff 0%, #fffa67 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/*ポイント*/
#home_promo .area_a .point02 .cmn-big {
    font-size: clamp(22px, 0.2vw + 18.6px, 24px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ > ラインナップ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_lineup .item_area .price .cmn-big {
    font-size: clamp(36px, 2.2vw + 9.3px, 52px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ > 摂取するのは大変
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_hard .item_area .num .cmn-big {
    font-size: 52px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ > 4つの特長
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_feature h2 .cmn-sobig {
    font-size: 92px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer-widgets .only_header {
    display: none;
}

/*ブランクアイコン*/
li.online a::after {
    position: absolute;
    content: "";
    background: url("./images/blank.svg") no-repeat 50%/contain;
    width: 12px;
    height: 12px;
    margin-top: 8px;
    margin-left: 8px;
    transition: all 0.2s ease;
}
    
li.online a:hover::after {
    opacity: .8;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニュー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#mobile-header .menu-toggle {
	margin-right: 15px;
}

.my_hamburger {
	width: 50px!important;
	height: 50px!important;
	background-color: var(--text-2);
}

#mobile-header .openbtn p, #generate-slideout-menu .openbtn p {
	position: absolute;
	font-family: Carlito, sans-serif;
	color: #fff;
    font-size: 11px;
    left: 9px;
	bottom: 3px;
	margin-bottom: 0;
}

/*「ご購入非表示*/
.slideout-menu .only_header {
    display: none;
}

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

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

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

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

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

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

.openbtn.active span:nth-of-type(1) {
	top: 10px;
	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: 22px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}