@charset "UTF-8";

/* ==========================================================
   システム調整中リボン（電気料金シミュレーション一時停止用）
   使い方：
   <a class="is_maintenance">（href なし）
     <span class="mnt_wrap">
       画像（img / picture）
       <span class="mnt_layer"><span class="mnt_ribbon">
         <span class="mnt_ribbon__main">システム調整中</span>
         <span class="mnt_ribbon__sub">Coming soon!!</span>
       </span></span>
     </span>
   </a>
   ※ LP側が html{font-size:62.5%} のため rem は使わない
   ========================================================== */

/* リンク無効化 */
.is_maintenance {
	pointer-events: none;
	cursor: default;
}

/* 遷移しないので矢印アイコンは隠す */
.is_maintenance .link_arrow {
	display: none;
}

/* 画像を包む基準ボックス */
.mnt_wrap {
	position: relative;
	display: block;
	flex-shrink: 0;
}

.mnt_wrap.is_inline {
	display: inline-block;
	vertical-align: top;
}

/* 画像下の行間すき間をなくし、レイヤーを画像サイズにぴったり合わせる */
.mnt_wrap>img,
.mnt_wrap>picture,
.mnt_wrap>picture>img {
	display: block;
}

/* 画像の角丸に合わせる（リボン自体ははみ出してよいので overflow は指定しない） */
.index_main .thumbs .mnt_layer {
	border-radius: 10px;
}

.index_about .nav .link .mnt_layer {
	border-radius: 10px 0 0 10px;
}

/* 画像の上に重ねるレイヤー（白で少し薄める） */
.mnt_layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.35);
	border-radius: inherit;
	/* 画像サイズに合わせて文字サイズを可変にするため */
	container-type: size;
	pointer-events: none;
}

/* リボン本体 */
.mnt_ribbon {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 108%;
	flex-shrink: 0;
	padding: 0.18em 1.2em 0.22em;
	color: #22561c;
	font-size: 24px;
	/* 未対応ブラウザ用の固定値 */
	font-size: min(12cqw, 22cqh);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-align: center;
	white-space: nowrap;
	transform: rotate(-7deg);
	filter: drop-shadow(0 0.06em 0.08em rgba(0, 0, 0, 0.3));
}

/* 外枠（濃色）と内側（白）を重ねて縁取りを表現。両端は燕尾型に切り欠く */
.mnt_ribbon::before,
.mnt_ribbon::after {
	content: "";
	position: absolute;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.6em) 50%, 100% 100%, 0 100%, 0.6em 50%);
}

.mnt_ribbon::before {
	inset: 0;
	background-color: #333;
}

.mnt_ribbon::after {
	inset: 0.07em 0.1em;
	background-color: #fff;
}

.mnt_ribbon__main,
.mnt_ribbon__sub {
	position: relative;
	z-index: 1;
	display: block;
	letter-spacing: inherit;
}

.mnt_ribbon__sub {
	font-size: 0.5em;
	letter-spacing: 0.02em;
}