/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/


:root {
	--shadowy-blue: #03304E;
	--water-blue: #B3D0D6;
	--dim-yellow: #E3E9D3;
	--sky-blue: #51A4CE;
	--night-blue: #072432;
}

.heading-text > p:not([class*=font-weight]) {font-weight: 500;}

.btn-color-less-white.btn-flat:not(.btn-hover-nobg):hover, .btn-color-less-white.btn-flat:not(.btn-hover-nobg):focus, .btn-color-less-white.btn-flat:active {
    background-color: rgba(255, 255, 255, 1) !important;
    border-color: rgba(255, 255, 255, 1) !important;
}

.btn-text-dark {color: var(--shadowy-blue) !important; fill: var(--shadowy-blue) !important}
.btn-padding-short {padding: .5lh 1.5lh !important;}

.btn-flex-col .uncont {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 9px;
	& .empty-space {flex-basis: 100%;}
	
	@media (max-width: 959px) {
		gap: 18px;
		
		& .btn-container.btn-inline {
			padding-left: 0px;
			padding-right: 0px;
		}
	}
	@media (max-width: 569px) {
		/*& .btn-container {
			flex-basis: calc((100% - 24px) / 2);

			&:has(.area-top) {
				flex-basis: 100%;
			}
		}*/
	}
}


#masthead {
	html:not(.menu-overlay-open) & #logo-container-mobile {
		transform: translateY(-200%);
		opacity: 0;
		transition: transform 0.3s 0.6s ease-in-out, opacity 0.3s ease-in-out;
	}
	html.menu-overlay-open & #logo-container-mobile {
		transform: translateY(0%);
		opacity: 1;
		transition: transform 0.3s ease-in-out, opacity 0.3s 0.6s ease-in-out;
	}
	
	& .menu-container {
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}
	
	&.is_stuck {
		
		& .menu-container {
			opacity: 1;
			transition: opacity 0.3s 0.6s ease-in-out;
		}
			
		& .mobile-menu-button {
			position: relative; /* 念のため基準位置を設定 */
		}
		& .mobile-menu-button::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); /* 中央寄せ */
			width: 44px;  /* 円の幅（お好みで調整してください） */
			height: 44px; /* 円の高さ */
			background-color: #ffffffaa; /* 白い背景 */
			border-radius: 50%; /* 完全な丸にする */
			z-index: 0; /* 線の後ろに配置 */
		}
		& .mobile-menu-button .lines {
			z-index: 1;
		}
	}
	
	.menu-smart {
		display: flex;
		flex-flow: column nowrap;
		gap: 1vh;
	}
	
}

#menu-primary-single-page-menu-1 {
	display: flex;
	flex-flow: column nowrap;
	gap: 1vh;
}

.content-excerpt-list {
	& h4 span {
		padding-left: 1em;
		font-size: 70%;
	}
}
.no-link-post a {
	pointer-events: none;
}


/* ロゴのコンテナサイズ */
#swnw--03-logo-y-regular--amin,
#swnw--03-logo-y-regular--amin-delay.start_animation {
	
	
	/* アニメーションの設定 */
	& .anim-path {
	    fill: #03304e;       /* 最終的な塗り色 */
	    fill-opacity: 0;     /* 最初は塗りを透明に */
    
	    stroke: #B3D0D6;     /* 輪郭線の色 */
	    stroke-width: 1px;   /* 輪郭線の太さ */
	    stroke-linecap: round;
	    stroke-linejoin: round;

	    stroke-dasharray: 3000; /* 線の全長（長めに設定） */
	    stroke-dashoffset: 3000; /* 最初は線を隠す */

	    /* アニメーション実行 */
	    animation: 
	        fill-in 2s ease-out 3.5s forwards; /* 塗りつぶす（2.5秒後に開始） */
	}
	
	& .anim-path[id*="symbol"] {
    
	    stroke: #B3D0D6;     /* 輪郭線の色 */
	    stroke-width: 1px;   /* 輪郭線の太さ */
	    stroke-linecap: round;
	    stroke-linejoin: round;

	    stroke-dasharray: 3000; /* 線の全長（長めに設定） */
	    stroke-dashoffset: 3000; /* 最初は線を隠す */

	    /* アニメーション実行 */
	    animation: 
	        draw-stroke 4s cubic-bezier(0.5, 0, 0.3, 1) forwards, /* 線を描く */
	        fill-in 2s ease-out 2.0s forwards; /* 塗りつぶす（2.5秒後に開始） */
	}

	/* 文字部分だけ少し遅らせる（オプショナル：おしゃれに見せるコツ） */
	& #swnw--01-logotype {
	    animation-delay: 0.3s, 2.4s; /* 線画開始0.3秒遅れ、塗り開始2.8秒遅れ */
	}
}



/* 線を描くキーフレーム */
@keyframes draw-stroke {
    to {
        stroke-dashoffset: 0;
    }
}

/* 中を塗るキーフレーム */
@keyframes fill-in {
    to {
        fill-opacity: 1; /* 塗りを不透明に */
        stroke-opacity: 0; /* 最後に線自体は消して馴染ませる（お好みで削除可） */
    }
}