/*
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 {
	--pryramid-1-top: #deff06;
	--pryramid-1-bottom: #94b808;
	
	--pryramid-2-top: #2ABA75;
	--pryramid-2-bottom: #1B9A5B;
	
	--pryramid-3-top: #FDBC44;
	--pryramid-3-bottom: #E69C19;
	
	--pryramid-4-top: #2B8DBA;
	--pryramid-4-bottom: #1D77A0;
	
}

.btn-padding {
	padding: .5lh 1.5lh !important;
}

.menu-item>a:has(.menu-icon.fa) {
	flex-direction: row-reverse;
	justify-content: space-between;
}
.menu-icon.fa{
	margin-right: 0;
	margin-left: 9px;
	
	&:before {
		top: 0.05em;
		position: relative;
		font-size: .8em;
	}
}

@media (max-width: 959px) {
	.menu-mobile-default .menu-smart a {
		padding: 18px 36px;
	}
	.uncode-menu-additional-text .row div[class*=col-lg-] {
		padding-top: 1px;
	}
}

.heading-valuesub .heading-text {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 18px;
	
	& *:first-child {
		flex-shrink: 0
	}
	
	& .text-lead, p {
		margin: 0;
	}
}

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

.nav-tabs > li > a:not(.has-padding) {
	padding: 18px 10px;
	background: #eaeaea;
	border-radius: 10px 10px 0 0;
	border: 2px solid #eaeaea;
	border-top-color: #eaeaea !important;
	border-left-color: #eaeaea !important;
	border-right-color: #eaeaea !important;
}
.nav-tabs > li.active > a:not(.has-padding) {
    background: #fff;
	border-bottom-color: #fff !important;
}

.nav-tabs.width-100 {
	display: flex;
	justify-content: stretch;
	gap: 2px;
	align-items: baseline;
	position: relative;
	border-bottom: none;
	overflow: scroll;
	margin: 0 -18px !important;
	padding: 0 18px;
}
.nav-tabs:before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #eaeaea;
}
.tab-container.advanced-typography .nav-tabs > li {
	flex-basis: 100%;
}

.category-info {
	color: #fff0;
}
.category-info a {
	color: #3031330;
}
.t-entry-table-category a, .category-info a {
	border: 1px solid #303133;
	padding: .25em 1em;
	border-radius: 10em;
	font-size: .8em;
}


.single-post .post-body .uncode_text_column {
	& > * {
		margin-top: var(--one-h_gap);
	}
}

.main-container .row-navigation {
	
	&.row-navigation-light {background-color: #fff;}
	
	& .row-parent {
		border-top: 1px solid #eaeaea;
		padding: 36px 0;
		margin: 0 auto;
	
		@media (min-width: 1452px) {
			& {max-width: calc((1380px) * 0.7);}
		}
		@media (max-width: 1451px) and (min-width: 960px) {
			& {max-width: 70%; padding: 36px 36px;}
		}
	}

}

.menu-footer-menu-container {
	text-transform: uppercase;

}


@media (max-width: 1400px) and (min-width: 960px) {
	.wide-under-1400 .wpb_column {
		width: 100%;
		display: block;
		height: auto;
		
		&:first-child {
			margin-bottom: 24px;
			& .vc_custom_heading_wrap  {text-align: center;}
		}
	}
}

.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 {
			flex-basis: calc((100% - 48px) / 3);
			padding: 0 !important;
			
			& a {
				width: 100%;
			}
		}
	}
	@media (max-width: 569px) {
		& .btn-container {
			flex-basis: calc((100% - 24px) / 2);
			
			&:has(.area-top) {
				flex-basis: 100%;
			}
		}
	}
}

.triangle-bg .background-wrapper {
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.main-container .row-container .row-parent .triangle-bg .column_child.half-internal-gutter .uncont > *:not(.uncode-owl-nav-wrap):not(:first-child):not(.pin-spacer):not([data-sticky]) {
	margin-top: 9px;
	@media (max-width: 959px) {
		margin-top: var(--quarter-v_gap);
	}
}

.grid-row {align-items: baseline;}
.grid-column > .btn-container:first-of-type {margin-top: 0;}

@media (min-width: 960px) {
	.triangle-bg .col-lg-12 {width: 100%;display: inline-table; table-layout: fixed;}
}
@media (max-width: 959px) {
	
}
@media (max-width: 569px) {
	.fontsize-short-mobile {font-size: 0.5em;}
	.fontsize-small-mobile p {font-size: 12px;}
	.grid-row.grid-id-history {gap: var(--quarter-h_gap);}
}

.home-header-post {
	& .t-entry {
		display: flex;
		flex-flow: row nowrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 18px;
		
		& .t-entry-meta {
			margin: 0 !important;
			
			& a {
				border-radius: 10em;
				padding: .25em 1em !important;
			}
			
			& .t-entry-category-5 {
				display: none !important; /* Pickup */
			}
		}
		& .t-entry-title {
			flex-basis: 100%;
			margin: 0 !important;
			
			& a {
				display: flex;
				justify-content: space-between;
				width: 100%;
			}
		}
	}
}


/* アニメーションの定義 */
@keyframes sideShake {
  0% { transform: translateX(0); }
  5% { transform: translateX(-10%); }  /* 左に動く */
  10% { transform: translateX(10%); }   /* 右に動く */
  15% { transform: translateX(-10%); }  /* 左に動く */
  20% { transform: translateX(0); }     /* 中央に戻る */
  100% { transform: translateX(0); }    /* ここまで静止状態 */
}

.scroll-hint {
  display: inline-block; /* transformを有効にするために必要 */
  font-size: 14px;
  color: #666;
  /* 3秒周期でアニメーションを無限ループ */
  animation: sideShake 5s ease-in-out infinite;
}

.fade-in-out {
  /* 初期状態：左にずらして透明にする */
  opacity: 0;
  transform: translateX(-20px);
  
  /* アニメーションの設定：5秒周期で無限に繰り返す */
  animation: slideAndFade 5s ease-in-out infinite;
}

@keyframes slideAndFade {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  /* 20%の時点で定位置に到着し、見えるようになる */
  20% {
    opacity: 1;
    transform: translateX(0);
  }
  /* 80%までそのままの状態をキープ（ここで止まって見える） */
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  /* 100%で消えながら少し右（または元の位置）へ */
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

/****************************************
 *
 * Pyramid
 *
 ****************************************/
/* --- コンテナ設定 --- */
.pyramid-container {
	--pyramid-size: 350px;
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 100px;
	gap: calc(var(--pyramid-size) * 0.2);
	width: 100%;
	/*min-height: 100vh;*/
	perspective: 2000px;
	
	@media (min-width: 1400px) {
		--pyramid-size: calc(900px * 0.5);
	}
	@media (max-width: 1350px) and (min-width: 960px) {
		--pyramid-size: 40vw;
	}
	@media (max-width: 959px) and (min-width: 570px) {
		--pyramid-size: 40vw;
	}
	@media (max-width: 569px)  {
		--pyramid-size: 70vw;
		flex-flow: column nowrap;
		gap: 36px;
	}
}

/* --- ピラミッド本体 --- */
.pyramid-wrap {
	aspect-ratio: 1 / 1;
	width: 350px;
	height: 350px;
	width: var(--pyramid-size);
	height: var(--pyramid-size);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-15deg) rotateY(15deg);
	transition: transform 0.6s ease;
}

.pyramid-segment {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pyramid-side {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 3D 配置 */
.pyramid-side:nth-child(1) { transform: rotateX(30deg) translateZ(0px); }
.pyramid-side:nth-child(2) { transform: rotateX(-30deg) translateZ(0px); }
.pyramid-side:nth-child(3) { transform: rotateY(90deg) rotateX(30deg) translateZ(0px); }
.pyramid-side:nth-child(4) { transform: rotateY(-90deg) rotateX(30deg) translateZ(0px); }

.pyramid-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  /* 境界線の光を柔らかく調整 */
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
  
  & h4 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #fff;
	text-align: center;
	
	& .title-after {
		font-size: .7em;
	}
  }
}

/* --- グラデーションのトーンを抑えた設定 --- */
/* 上部の明るい色を中間色に近づけ、下部の沈み込みを緩やかにしました */

/* 1段目: 黄色系 */
#py-p1 .pyramid-inner {
  clip-path: polygon(0 0, 100% 0, 100% 26%, 0 26%);
  background: linear-gradient(180deg, #fbc02d 0%, #f9a825 50%, #ef6c00 100%);
  background-image: linear-gradient(180deg, var(--pryramid-1-top) 0%, var(--pryramid-1-bottom) 25%);
  
  & h4 {top: calc(26% / 2);transform: translate(-50%, -25%); & .title-after {display:block;}}
}

/* 2段目: 紫系 */
#py-p2 .pyramid-inner {
  clip-path: polygon(0 28%, 100% 28%, 100% 62%, 0 62%);
  background: linear-gradient(180deg, #ab47bc 28%, #8e24aa 50%, #6a1b9a 62%);
  background-image: linear-gradient(180deg, var(--pryramid-2-top) 25%, var(--pryramid-2-bottom) 60%);
  
   & h4 {top: calc(28% + (62% - 28%) / 2);}
}

/* 3段目: シアン系 */
#py-p3 .pyramid-inner {
  clip-path: polygon(0 64%, 100% 64%, 100% 80%, 0 80%);
  background: linear-gradient(180deg, #26c6da 64%, #00acc1 72%, #00838f 80%);
  background-image: linear-gradient(180deg, var(--pryramid-3-top) 60%, var(--pryramid-3-bottom) 80%);
  
  & h4 {top: calc(64% + (80% - 64%) / 2);}
}

/* 4段目: ピンク系 */
#py-p4 .pyramid-inner {
  clip-path: polygon(0 82%, 100% 82%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #ec407a 82%, #d81b60 90%, #ad1457 100%);
  background-image: linear-gradient(180deg, var(--pryramid-4-top) 80%, var(--pryramid-4-bottom) 100%);
  
  & h4 {top: calc(82% + (100% - 82%) / 2);}
}

/* --- 面ごとの陰影調整 (左面のシャドウを緩和) --- */
.pyramid-side:nth-child(1) .pyramid-inner { filter: brightness(1); } /* 正面(基準) */
.pyramid-side:nth-child(2) .pyramid-inner { filter: brightness(0.9); } /* 背面 */
.pyramid-side:nth-child(3) .pyramid-inner { filter: brightness(0.8); } /* 右面 */
.pyramid-side:nth-child(4) .pyramid-inner { filter: brightness(0.7); } /* 左面(0.3から大幅に緩和) */

/* --- ホバー効果 --- */
.pyramid-container:has(.pyramid-text-item[data-target="py-p1"]:hover) #py-p1,
.pyramid-container:has(.pyramid-text-item[data-target="py-p2"]:hover) #py-p2,
.pyramid-container:has(.pyramid-text-item[data-target="py-p3"]:hover) #py-p3,
.pyramid-container:has(.pyramid-text-item[data-target="py-p4"]:hover) #py-p4 {
  transform: translateZ(calc(var(--pyramid-size) * 0.1)) scale(1.02);
}

.pyramid-container:has(.pyramid-text-item[data-target="py-p1"]:hover) #py-p1 .pyramid-inner,
.pyramid-container:has(.pyramid-text-item[data-target="py-p2"]:hover) #py-p2 .pyramid-inner,
.pyramid-container:has(.pyramid-text-item[data-target="py-p3"]:hover) #py-p3 .pyramid-inner,
.pyramid-container:has(.pyramid-text-item[data-target="py-p4"]:hover) #py-p4 .pyramid-inner {
  filter: brightness(1.15);
  box-shadow: inset 0 0 calc(var(--pyramid-size) * 0.06) rgba(255, 255, 255, 0.3);
}

/* --- テキストエリア --- */
.pyramid-text-area {
	display: flex;
	flex-direction: column;
	gap: 0px;
	
	@media (max-width: 569px)  {
		flex-flow: row wrap;
	}
}

.pyramid-text-item {
	padding: 15px;
	border-left: 4px solid transparent;
	cursor: pointer;
	transition: all 0.3s;
	
	@media (max-width: 569px)  {
		flex-basis: 50%;
		text-align: center;
	}
}

.pyramid-text-item:hover {
  background: rgba(0,0,0,0.03);
  transform: translateX(10px);
}

.pyramid-text-item[data-target="py-p1"]:hover { border-left-color: var(--pryramid-1-bottom); }
.pyramid-text-item[data-target="py-p2"]:hover { border-left-color: var(--pryramid-2-bottom); }
.pyramid-text-item[data-target="py-p3"]:hover { border-left-color: var(--pryramid-3-bottom); }
.pyramid-text-item[data-target="py-p4"]:hover { border-left-color: var(--pryramid-4-bottom); }

.pyramid-text-item h5 { margin: 0;}
.pyramid-text-item p { margin: 5px 0 0; line-height: 1.333;}