@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

@font-face {
    font-family: 'DotGothic16-Regular';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/DotGothic16-Regular.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-Izumi16';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-Izumi16.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-jiskan16s';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-jiskan16s.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-Kaname12';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-Kaname12.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-milkjf16';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-milkjf16.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-MPlus12';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-MPlus12.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-MPlusH12';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-MPlusH12.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-Shinonome12';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-Shinonome12.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-Shinonome14';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-Shinonome14.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-Shinonome16';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-Shinonome16.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'JF-Dot-ShinonomeMaru12';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/JF-Dot-ShinonomeMaru12.ttf') format('ttf');
    font-display: swap;
}
@font-face {
    font-family: 'x12y12pxMaruMinyaM';
    src: url('https://www.sugaru-shun.com/wp-content/uploads/2026/09/x12y12pxMaruMinyaM.ttf') format('ttf');
    font-display: swap;
}

:root {
	/* ========================================
	　　PCメニュー
	======================================== */
	--my-header-bar-height: 22px;
	--my-header-logo-paddingY: 0px;
	--my-header-logo-extendY: 28px;
	--my-header-logo-height: 90px;
	--my-header-inner-height: calc(var(--my-header-logo-paddingY)*2 + var(--my-header-logo-height));
	--my-menu-icon-height: 64px;
	--my-menu-gap: 36px;
	--my-icon-cover-transition: 0.2s;
	--my-icon-animation_span: 0.8s;
	--my-icon-transform-scale: 2.0;
	--my-icon-translate: -2px;
	--my-icon-top-position: 0px;
	--my-submenu-width: 100px;
	--my-submenu-font-size: 16px;

	/* ========================================
	　　SPメニュー
	======================================== */
	/* メニュー幅 */
	--my-sp-menu-width: clamp(96px, 25vw, 192px);
	/* 開閉アニメーション */
	--my-sp-menu-duration: 0.4s;
	/* アイコンサイズ */
	--my-sp-icon-size: 128px;
	/* サブメニュー幅 */
	--my-sp-submenu-width: 128px;
	--my-sp-submenu-font-size: 20px;
}



/* ========================================
PC：ヘッダーメニュー
======================================== */
@media (min-width: 960px) {

	/* ========================================
	　　ヘッダー
	======================================== */

	/* ヘッダーロゴ */
	.c-headLogo {
		width: 100% ;
		height: 90px;
	}
	.c-headLogo__img {
		width: 728px;
		transition: transform 0.1s ease;
	}
	.c-headLogo__img:hover {
		transform: scale(1.05);
	}
	.l-header__logo {
		position: relative;
		padding: var(--my-header-logo-paddingY) 0px !important;
		transition: padding 0.1s ease;
	}
	.l-header__logo::before {
		/* 背景画像のサイズ */
		content: "";
		position: absolute;

		/* 背景画像のサイズ */
		width: 128px;
		height: 100%;
		background-image : url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/header-momo.webp");
		background-repeat: no-repeat;
		background-size: 100%;
		background-position:0px 6px;
		background-color: transparent;
		top: 0%;
		left: 70%;
		opacity: 0.5;
		image-rendering: pixelated;
		/* ロゴのクリック等を邪魔しない */
		pointer-events: none;
		z-index: -1;
	}
	/* ヘッダーの高さ伸縮 */
	.l-header.is-bar-hidden .l-header__logo{
		padding: var(--my-header-logo-paddingY) 0px !important;
	}
	.l-header:hover .l-header__logo{
		padding: calc(var(--my-header-logo-paddingY) + var(--my-header-logo-extendY)) 0px !important; 
	}

	/* ヘッダーバーカスタム準備
	* デフォルトの高さは22px
	* アイコン高さ14+上下padding4
	*/
	.l-header__bar .c-iconList .c-iconList__item {
		height: 22px;
	}
	.l-header__bar .c-iconList .c-iconList__link {
		height: 14px;	
		padding:4px 6px;	
	}
	.l-header__bar .c-iconList .c-iconList__icon {
		padding:0px 0px;		
	}
	.l-header {
		position: fixed;
		top: -0px;
		left: 0;
		width: 100%;
		z-index: 1000;
		transition: top 0.25s ease;
	}
	.l-header.is-bar-hidden {
		top:  calc(var(--my-header-bar-height) * -1 + 4px);
	}
	#fix_header {
		display: none !important;
	}
	/* 固定ヘッダーの分だけページを下げる 	*/
	body {
		padding-top: calc(var(--my-header-inner-height) + var(--my-header-bar-height));
	}

	/* ========================================
	　　アイコン
	======================================== */

	/* ========================================
	1. アイコン共通設定
	======================================== */
	/* メニュー項目をヘッダー内で上下中央やや下に配置 */
	.c-gnav > .menu-item {
		position: relative;

		height: 100%;
		display: flex;
		align-items: center;
		top: var(--my-icon-top-position);

		/* アイコン同士の間隔 */
		padding-left: calc(var(--my-menu-gap) * 0.5);
		padding-right: calc(var(--my-menu-gap) * 0.5);
	}
	.c-gnav > .menu-item > a {
		position: relative;

		width: var(--my-menu-icon-height);
		height: var(--my-menu-icon-height);
		min-height: var(--my-menu-icon-height);
		padding: 0;
		margin: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		background-repeat: no-repeat;
		background-position: center;
		background-size: var(--my-menu-icon-height) var(--my-menu-icon-height);

		image-rendering: pixelated;
		image-rendering: crisp-edges;

		overflow: visible;
		
		transition: transform 0.2s ease;
	}
	.c-gnav > .menu-item-has-children >a {
		pointer-events: none;
	}
	/* 元のメニュー文字を下線表示に再利用 */
	.c-gnav > .menu-item > a .ttl {
		position: absolute;
		left: 0;
		bottom: -5px;
		width: 100%;
		height: 4px;
		display: block;
		background: var(--color_main);

		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease;

		font-size: 0;
		pointer-events: none;
		z-index: 4;
	}

	/* ========================================
	2. 各アイコンのA画像
	======================================== */
	.c-gnav > .menu-profile > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-A.webp");
	}
	.c-gnav > .menu-information > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-A.webp");
	}
	.c-gnav > .menu-commercial > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-A.webp");
	}
	.c-gnav > .menu-fandom > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-A.webp");
	}
	.c-gnav > .menu-contact > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-A.webp");
	}
	.c-gnav > .menu-top > a::before {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-A.webp");
	}


	/* ========================================
	3. 各アイコンのB画像
	======================================== */
	.c-gnav > .menu-profile > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-B.webp");
	}
	.c-gnav > .menu-information > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-B.webp");
	}
	.c-gnav > .menu-commercial > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-B.webp");
	}
	.c-gnav > .menu-fandom > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-B.webp");
	}
	.c-gnav > .menu-contact > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-B.webp");
	}
	.c-gnav > .menu-top > a::after {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-B.webp");
	}

	/* ========================================
	4. 各アイコンのC画像
	======================================== */
	.c-gnav > .menu-profile > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-cover.webp");
	}
	.c-gnav > .menu-information > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-cover.webp");
	}
	.c-gnav > .menu-commercial > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-cover.webp");
	}
	.c-gnav > .menu-fandom > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-cover.webp");
	}	
	.c-gnav > .menu-contact > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-cover.webp");
	}
	.c-gnav > .menu-top > a .icon-cover {
		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-cover.webp");
	}

	/* ========================================
	5. A/B/C画像の共通設定
	======================================== */

	.c-gnav > .menu-item > a::before,
	.c-gnav > .menu-item > a::after,
	.c-gnav > .menu-item > a .icon-cover  {
		content: "";
		position: absolute;

		top: 0;
		left: 0;
		width: var(--my-menu-icon-height);
		height: var(--my-menu-icon-height);

		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-color: transparent;

		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}
	/* A,B画像 */
	.c-gnav > .menu-item > a::before,
	.c-gnav > .menu-item > a::after{
		opacity: 0;
		transform: none;
		transition: none;
		z-index: 2;
	}
	/* C画像 */
	.c-gnav > .menu-item > a .icon-cover {
		opacity: 1;
		transition: opacity var(--my-icon-cover-transition) ease;
		pointer-events: none;
		z-index: 3;
	}

	/* ========================================
	6. ホバーアニメーション
	======================================== */

	/* A → B 切り替え間隔の調整 */
	.c-gnav > .menu-item:hover > a::before {
		animation: iconA var(--my-icon-animation_span) steps(1, end) infinite;
	}
	.c-gnav > .menu-item:hover > a:after {
		animation: iconB var(--my-icon-animation_span) steps(1, end) infinite;
	}
	/* アイコン本体のホバー */
	.c-gnav > .menu-item:hover > a {
		transform: scale(var(--my-icon-transform-scale)) translateY(var(--my-icon-translate));
	}
	/* ホバー時にCを消す */
	.c-gnav > .menu-item:hover > a .icon-cover {
		opacity: 0;
	}
	/* 下線のアニメーション */
	.c-gnav > .menu-item:hover > a .ttl {
		transform: scaleX(1);
	}

	/* ========================================
	PC：サブメニュー
	======================================== */
	/* サブメニュー展開矢印 */
	/* 矢印本体 */
	.c-gnav > .menu-item-has-children::after {
		content: "";
		position: relative;

		/* 初期位置：アイコンの下側 */
		left: -46%;
		bottom: -36px;

		width: 6px;
		height: 6px;

		/* CSSの境界線で描画 */
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;

		/* 下向きのV字 */
		transform: translateX(-50%) rotate(-45deg);

		opacity: 1;
		pointer-events: none;
		z-index: 5;

		transition:
			opacity 0.2s ease,
			transform 0.2s ease;
	}
	/* サブメニュー展開中：下方向へ移動しながら消える */
	.c-gnav > .menu-item-has-children:hover::after {
		opacity: 0;
		transform: translateX(-50%) translateY(40px) rotate(-45deg);
	}

	/* サブメニュー本体 */
	.c-gnav .sub-menu {
		position: absolute;

		width: var(--my-submenu-width);

		top: calc(var(--my-header-inner-height) + var(--my-header-logo-extendY)*2 + -1px) !important;
		/*
		* 64×64素材を9-sliceとして使用
		* 四隅など20pxを固定し、
		* 中央部分だけ必要な大きさに伸縮
		*/
		border: 10px solid transparent;
		border-image-source: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/bubble-body.webp");
		border-image-slice: 20 fill;
		border-image-width: 20px;
		border-image-repeat: stretch;
		border-radius: 16px;

		image-rendering: pixelated;

		box-sizing: border-box;

		background: transparent;

		transform: translate(-50%, -25px) !important;
		transition: transform 0.2s ease, opacity 0.5s ease;
	}
	.c-gnav .menu-item:hover > .sub-menu {
		opacity: 1;
		transform: translate(-50%, 0px) !important;
		visibility: visible
	}
	/* 吹き出しのしっぽ */
	.c-gnav > .menu-item > .sub-menu::before   {
		content: "";
		position: absolute;

		left: 66px;
		top: -22px;

		width: 16px;
		height: 18px;

		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/bubble-tail.webp");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 16px 18px;

		image-rendering: pixelated;

		transform: translateX(-0%);

		pointer-events: none;
		z-index: 3;
	}
	/* 吹き出しの上側に透明なホバー領域を追加 */
	.c-gnav > .menu-item > .sub-menu::after {
		content: "";
		position: absolute;

		left: 0;
		right: 0;
		top: -22px;
		height: 18px;

		background: transparent;

		pointer-events: auto;
	}
	/* 項目左の余白調整 */
	.c-gnav .sub-menu .menu-item > a {
		padding-left: 8px;
		padding-right: 2px;
		text-align: left;
	}
	/* トップリンクのための微調整 */
	.c-gnav .sub-menu .menu-top-bye > a {
		padding-left: 0px;
		padding-right: 0px;
	}
	/* サブメニュー項目の「>」を非表示 */
	.c-gnav .sub-menu .menu-item > a::before {
		transform: scale(0);
	}
	/* サブメニュー文字 */
	.c-gnav .sub-menu .menu-item > a .ttl {
		position: relative;
		display: inline-block;
		-webkit-font-smoothing: none;
		-moz-osx-font-smoothing: grayscale;
		font-smooth: never;
		text-rendering: geometricPrecision;
		font-size: var(--my-submenu-font-size);
	}
	/* デフォルトのホバー動作を消す */
	.c-gnav .sub-menu .menu-item > a:hover .ttl {
		left: 0px;
	}
	/* 下線 */
	.c-gnav .sub-menu .menu-item > a .ttl::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: -10px;

		width: 100%;
		height: 4px;

		background: var(--color_main);

		transform: scaleX(0);
		transform-origin: left;
		opacity: 0;
		transition: transform 0.1s ease, opacity 0.5s ease;

		pointer-events: none;
	}
	/* ホバー時 */
	.c-gnav .sub-menu .menu-item:hover > a .ttl::after {
		transform: scaleX(1);
		opacity: 1;
	}

	/* フォントテスト用 */
	.c-gnav .sub-menu > .menu-profile-me .ttl {
		font-family: "JF Dot Kanamecho 12";
	}
	.c-gnav .sub-menu > .menu-profile-momo {
		font-family: "JF Dot Shinonome Gothic 12";
	}
	.c-gnav .sub-menu > .menu-information-commercial{
		font-family: "x12y12pxMaruMinyaM";
	}
	.c-gnav .sub-menu > .menu-information-fandom {
		font-family: "JF Dot Shinonome Marumoji 12";
	}
	.c-gnav .sub-menu > .menu-information-misc {
		font-family: "JF Dot M+ 12";
	}
	.c-gnav .sub-menu > .menu-top-bye {
		font-family: "x12y12pxMaruMinyaM";
	}
}

/* ========================================
A → B → A → B の共通アニメーション
======================================== */

@keyframes iconA {
	0%, 49.999% {
		opacity: 0;
	}
	50%, 100% {
		opacity: 1;
	}
}
@keyframes iconB {
	0%, 49.999% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}


/* ========================================
SP：ヘッダーメニュー
======================================== */
@media (max-width: 959px) {
	/* ヘッダーをメニュー本体より手前に表示 */
	.l-header {
		z-index: 102;
	}
	/* メニュー本体 */
	#sp_menu .p-spMenu__inner {
		left: auto;
		right: 0;

		width: var(--my-sp-menu-width);

		transform: translateY(-100%);
		transition: transform var(--my-sp-menu-duration) ease;
	}
	/* メニューを開いた状態 */
	html[data-spmenu="opened"] #sp_menu .p-spMenu__inner {
		transform: translateY(0);
	}
	#sp_menu .p-spMenu__body {
		padding: 0px 12px 10vw 12px;
	}
	/* 子パネルが開いている間はスクロール禁止 */
	#sp_menu.is-sp-submenu-open .p-spMenu__body {
		overflow-y: hidden;
	}
	/* メニュータイトル非表示 */
	#sp_menu .c-widget__title.-spmenu  {
		display: none;
	}
	#sp_menu .p-spMenu__nav{
		padding-top:24px;
	}

	/* ========================================
	　　アイコン
	======================================== */
	/* ========================================
	1. アイコン共通設定
	======================================== */
	#sp_menu .c-spnav {
		width: 100%;

		display: flex;
		flex-direction: column;
		align-items: center;
	}
	/* 各メニュー項目 */
	#sp_menu .c-spnav > .menu-item {
		width: var(--my-sp-icon-size);
		position: relative;
		display: flex;
		justify-content: center;
		padding-left: 8px;
	}
	/* タップ領域 */
	#sp_menu .c-spnav > .menu-item > a {
		position: relative;

		width: var(--my-sp-icon-size);
		height: var(--my-sp-icon-size);

		flex: 0 0 var(--my-sp-icon-size);

		padding: 0;
		margin: 0;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		font-size: 0;

		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
		border-bottom-width: 0;

		overflow: visible;
	}
	/* PC・SPメニューのホバー背景を無効化 */
	.c-listMenu a:hover {
		background-color: transparent;
	}
	/* アイコン同士の間隔 */
	#sp_menu .c-spnav > .menu-item {
		padding-top: calc(var(--my-menu-gap) * 0.5);
		padding-bottom: calc(var(--my-menu-gap) * 0.5);
	}

	/* ========================================
	2. 各アイコンのA画像
	======================================== */
	#sp_menu .c-spnav > .menu-profile > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-A.webp") ;
	}
	#sp_menu .c-spnav > .menu-information > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-A.webp") ;
	}
	#sp_menu .c-spnav > .menu-commercial > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-A.webp") ;
	}
	#sp_menu .c-spnav > .menu-fandom > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-A.webp") ;
	}
	#sp_menu .c-spnav > .menu-contact > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-A.webp") ;
	}
	#sp_menu .c-spnav > .menu-top > a::before {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-A.webp") ;
	}

	/* ========================================
	3. 各アイコンのB画像
	======================================== */
	#sp_menu .c-spnav > .menu-profile > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-B.webp") ;
	}
	#sp_menu .c-spnav > .menu-information > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-B.webp") ;
	}
	#sp_menu .c-spnav > .menu-commercial > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-B.webp") ;
	}
	#sp_menu .c-spnav > .menu-fandom > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-B.webp") ;
	}
	#sp_menu .c-spnav > .menu-contact > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-B.webp") ;
	}
	#sp_menu .c-spnav > .menu-top > a::after {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-B.webp") ;
	}

	/* ========================================
	4. 各アイコンのC画像
	======================================== */
	#sp_menu .c-spnav > .menu-profile > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-profile-cover.webp") ;
	}
	#sp_menu .c-spnav > .menu-information > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-info-cover.webp") ;
	}
	#sp_menu .c-spnav > .menu-commercial > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-commercial-cover.webp") ;
	}
	#sp_menu .c-spnav > .menu-fandom > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-fandom-cover.webp") ;
	}	
	#sp_menu .c-spnav > .menu-contact > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-contact-cover.webp") ;
	}
	#sp_menu .c-spnav > .menu-top > a .icon-cover {
		background: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/icon-top-cover.webp") ;
	}

	/* ========================================
	5. A/B/C画像の共通設定
	======================================== */
	#sp_menu .c-spnav > .menu-item > a::before,
	#sp_menu .c-spnav > .menu-item > a::after,
	#sp_menu .c-spnav > .menu-item > a .icon-cover {
		content: "";
		position: absolute;

		top: 0;
		left: 0px;
		width: var(--my-sp-icon-size);
		height: var(--my-sp-icon-size);

		flex: 0 0 var(--my-sp-icon-size);

		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		background-color: transparent;

		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}
	/* A,B画像 */
	#sp_menu .c-spnav > .menu-item > a::before,
	#sp_menu .c-spnav > .menu-item > a::after{
		opacity: 0;
		transform: none;
		transition: none;
		z-index: 2;
	}
	/* C画像 */
	#sp_menu .c-spnav > .menu-item > a .icon-cover {
		opacity: 1;
		transition: opacity var(--my-icon-cover-transition) ease;
		pointer-events: none;
		z-index: 3;
	}
	/* 下線 */
	#sp_menu .c-spnav > .menu-item > a .icon-underline {
		position: absolute;
		left: 0;
		bottom: -8px;
		width: 100%;
		height: 5px;
		display: block;
		background: var(--color_main);

		transform: scaleX(0);
		opacity: 0;

		transition: transform 0.2s ease, opacity 0.2s ease;

		font-size: 0;
		pointer-events: none;
		z-index: 4;
	}

	/*
	* =========================
	* タップされたアイコン
	* =========================
	*/
	#sp_menu .c-spnav > .menu-item.is-active > a .icon-cover {
		opacity: 0;
	}
	#sp_menu .c-spnav > .menu-item.is-active > a .icon-underline {
		transform: scaleX(1);
		opacity: 1;
	}
	#sp_menu .c-spnav > .menu-item.is-active > a::before,
	#sp_menu .c-spnav > .menu-item.is-active > a::after {

		opacity: 1;
	}
	/*
	* A / B ループ
	*/
	#sp_menu .c-spnav > .menu-item.is-active > a::before {
		animation: iconA 0.8s steps(1, end) infinite;
	}
	#sp_menu .c-spnav > .menu-item.is-active > a::after {
		animation: iconB 0.8s steps(1, end) infinite;
	}

	/* ========================================
	SP：サブメニュー展開矢印
	======================================== */
	/* 矢印本体 */
	#sp_menu .c-spnav > .menu-item-has-children::after {
		content: "";
		position: absolute;

		/* アイコンの左側に配置 */
		left: -6px;
		top: 50%;

		width: 6px;
		height: 6px;

		/* CSSの境界線で描画 */
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;

		/* 左向きの矢印 */
		transform: translateY(-50%) rotate(45deg);

		opacity: 1;
		pointer-events: none;
		z-index: 5;

		transition:
			opacity 0.2s ease,
			transform 0.2s ease;
	}
	/* サブメニュー展開中：左へ移動しながら消える */
	#sp_menu .c-spnav > .menu-item-has-children.is-submenu-open::after {
		opacity: 0;
		transform: translate(-3px, -50%) rotate(45deg);
	}

	/* =========================
	子メニューパネル
	初期状態
	========================= */
	/* サブメニューの初期位置
	* 見えないようにしておく
	*/
	#sp_menu .c-spnav > .menu-item-has-children > .sub-menu {
		position: absolute;
		right: 150%;
		top: 50%;

		margin: 0;
		padding: 24px;
	}

	/*
	* =========================
	* サブメニューレイヤー
	* =========================
	*/
	#sp_menu .sp-submenu-layer {
		position: absolute;

		inset: 0;
		pointer-events: none;
		overflow: visible;
	}

	/*
	* =========================
	* 子メニューパネル
	* =========================
	*/
	#sp_menu .sp-submenu-layer > .sub-menu {
		position: absolute;
		display: flex;
		flex-direction: column;
		gap: 4px;
		right: calc(var(--my-sp-menu-width) + 16px) ;

		top: 0;

		margin: 0;
		padding: 10px 0px;

		width: var(--my-sp-submenu-width);

		/*
		* 64×64素材を9-sliceとして使用
		* 四隅など20pxを固定し、
		* 中央部分だけ必要な大きさに伸縮
		*/
		border: 10px solid transparent;
		border-image-source: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/bubble-body.webp");
		border-image-slice: 20 fill;
		border-image-width: 20px;
		border-image-repeat: stretch;

		box-sizing: border-box;

		background: transparent;
		border-radius: 16px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		image-rendering: pixelated;

		/* 横方向だけ移動 */
		transform: translateX(20px);

		opacity: 0;
		visibility: hidden;

		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0.3s ease;

		pointer-events: none;
		z-index: 1
	}

	/* 吹き出しのしっぽ */
	#sp_menu .sp-submenu-layer > .sub-menu::before {
		content: "";
		position: absolute;

		right: -22px;
		top: calc(-6px + var(--my-submenu-tail-offset-y, 0px));

		width: 18px;
		height: 16px;

		transform: none;

		background-image: url("https://www.sugaru-shun.com/wp-content/uploads/2026/09/bubble-tail-sp.webp");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 18px 16px;

		pointer-events: none;
		image-rendering: pixelated;
		z-index: 3;
	}

	/*
	* =========================
	* 表示状態
	* =========================
	*/
	#sp_menu .sp-submenu-layer > .sub-menu.is-sp-submenu-active {

		opacity: 1;
		visibility: visible;

		/* 横方向だけ移動 */
		transform: translateX(0);

		pointer-events: auto;
		z-index: 2;
	}
	#sp_menu .sp-submenu-layer > .sub-menu > .menu-item > a {
		position: relative;
		display: block;
		width: 100%;
		box-sizing: border-box;
		font-size: var(--my-sp-submenu-font-size);
		line-height: calc(var(--my-sp-submenu-font-size) * 1.3);
		padding: 8px 8px;
		text-align: center;
		font-family: "JF Dot Kanamecho 12";
	}
	/* トップリンクのための微調整 */
	#sp_menu .sp-submenu-layer > .sub-menu > .menu-top-bye > a {
		padding: 8px 2px;
		text-align: center;
		font-family: "x12y12pxMaruMinyaM";
	}
	/* サブメニュー下線 */
	#sp_menu .sp-submenu-layer > .sub-menu > .menu-item > a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0px;

		width: 100%;
		height: 4px;

		background: var(--color_main);

		transform: scaleX(0);
		transform-origin: center;
		opacity: 0;
		transition: transform 0.2s ease, opacity 0.2s ease;

		pointer-events: none;
	}
	#sp_menu .sp-submenu-layer > .sub-menu > .menu-item > a:hover::after {
		opacity: 1;
		transform: scaleX(1);
	}
	#sp_menu .sp-submenu-layer > .sub-menu > .menu-item > a:active::after {
		opacity: 1;
		transform: scaleX(1);
	}

}


/* ========================================
PC：現在地アイコンの共通設定
======================================== */

/* 現在地のトップレベル項目 */
.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .icon-cover {
	opacity: 0;
}

.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::before {
	opacity: 1;
	animation: none;
}

.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::after {
	opacity: 0;
	animation: none;
}

/* 現在地の下線 */
.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .ttl {
	transform: scaleX(1);
}

/* 現在地アイコンもホバー時は通常のアニメーション */
.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
):hover > a::before {
	animation: iconA var(--my-icon-animation_span) steps(1, end) infinite;
}

.c-gnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
):hover > a::after {
	animation: iconB var(--my-icon-animation_span) steps(1, end) infinite;
}

/* PC：現在のページに対応するサブメニュー項目 */
.c-gnav .sub-menu > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .ttl::after {
	opacity: 1;
	transform: scaleX(1);
}

/* ========================================
PC：現在地アイコン下線の一時的な非表示
======================================== */

/* 別のトップレベル項目にホバーしたら、現在地の下線を隠す */
.c-gnav:has(> .menu-item:not(:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
)):hover)
> .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .ttl {
	transform: scaleX(0);
}

/* ========================================
PC：サブメニュー現在地下線の一時的な非表示
======================================== */

/* 別のサブメニュー項目にホバーしたら、現在地の下線を隠す */
.c-gnav .sub-menu:has(> .menu-item:not(:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
)):hover)
> .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .ttl::after {
	transform: scaleX(0);
	opacity: 0;
}


/* ========================================
SP：現在地アイコンの共通設定
======================================== */

/* 現在地のトップレベル項目 */
#sp_menu .c-spnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .icon-cover {
	opacity: 0;
}

/* 現在地のアイコン下線 */
#sp_menu .c-spnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .icon-underline {
	opacity: 1;
	transform: scaleX(1);
}

/* 現在地のA/Bアニメーション */
#sp_menu .c-spnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::before {
	opacity: 1;
	animation: iconA 0.8s steps(1, end) infinite;
}

#sp_menu .c-spnav > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::after {
	opacity: 1;
	animation: iconB 0.8s steps(1, end) infinite;
}

/* SP：現在のページに対応するサブメニュー項目 */
#sp_menu .sp-submenu-layer > .sub-menu > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::after {
	opacity: 1;
	transform: scaleX(1);
}

/* SP：別のアイコンがアクティブな間、現在地アイコンを一時的に通常表示へ戻す */

/* 現在地アイコンのアニメーションを停止 */
#sp_menu .c-spnav:has(
> .menu-item:not(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
).is-active
) > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::before,
#sp_menu .c-spnav:has(
> .menu-item:not(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
).is-active
) > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::after {
	animation: none;
	opacity: 0;
}

/* 現在地アイコンのカバー画像を再表示 */
#sp_menu .c-spnav:has(
> .menu-item:not(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
).is-active
) > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .icon-cover {
	opacity: 1;
}

/* 現在地アイコンの下線を一時的に非表示 */
#sp_menu .c-spnav:has(
> .menu-item:not(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
).is-active
) > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a .icon-underline {
	opacity: 0;
	transform: scaleX(0);
}

/* SP：別のサブメニュー項目を操作している間、現在地の下線を一時的に隠す */
#sp_menu .sp-submenu-layer > .sub-menu:has(
> .menu-item:is(:hover, :active):not(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
)
) > .menu-item:is(
.current-menu-item,
.current-menu-ancestor,
.current_page_item,
.current_page_ancestor
) > a::after {
	opacity: 0;
	transform: scaleX(0);
}