/* ================================
   共通スタイル（PC・タブレット・スマホ）
================================ */

.hidden.menu {
	display: none;
}

/* Masthead 基本 */
.masthead.segment {
	min-height: auto;
	padding: 0.8em 0em;
}

.masthead .logo.item img {
	margin-right: 1em;
}

.masthead h1.ui.header {
	margin-top: 3em;
	margin-bottom: 0;
	font-size: 4em;
	font-weight: normal;
}

.masthead h2 {
	font-size: 1.7em;
	font-weight: normal;
}

/* コンテンツ部分 */
.ui.vertical.stripe {
	padding: 8em 0;
}

.ui.vertical.stripe h3 {
	font-size: 2em;
}

.ui.vertical.stripe p {
	font-size: 1.33em;
}

.ui.vertical.stripe .horizontal.divider {
	margin: 3em 0;
}

.column {
	max-width: 420px;
}

/* Footer */
.footer.segment {
	padding: 3em 0;
}

/* ボタン間隔（共通） */
.ui.menu .item .ui.button {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* item の余白（共通） */
.ui.menu .item {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* 1. ロゴ全体を囲むaタグのスタイル */
.logo-link-container {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	transition: opacity 0.2s ease;
}

.logo-link-container:hover {
	opacity: 0.85;
}

/* 2. メインロゴの文字 */
.tp-logo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.tp-logo .highlight {
	color: #00b5ad;
}

/* 3. 右側のサブタイトル（仕切り線付き） */
.tp-subtitle-inline {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	padding-left: 12px;
	border-left: 1px solid;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: lowercase;
}

/* 背景色に応じたカラー切り替え */
.header-dark .tp-logo .text {
	color: #ffffff;
}

.header-dark .tp-subtitle-inline {
	color: #aaaaaa;
	border-color: rgba(255, 255, 255, 0.2);
}

.header-light .tp-logo .text {
	color: #1b1c1d;
}

.header-light .tp-subtitle-inline {
	color: #666666;
	border-color: rgba(0, 0, 0, 0.15);
}


/* ================================
   スマホ（〜700px）
================================ */
@media only screen and (max-width: 700px) {

	/* サブタイトルを非表示にして省スペース化 */
	.mobile-hide {
		display: none !important;
	}

	/* ロゴのフォントサイズをスマホ用に調整 */
	.tp-logo {
		font-size: 1.25rem;
	}

	/* メニューの余白をさらにコンパクト化 */
	.ui.menu .item {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	/* スマホ時はユーザー名テキストを非表示（アイコンと矢印のみにする） */
	.user-name-text {
		display: none !important;
	}

	/* スマホ向けボタンサイズ：コンパクトで押しやすい形状に */
	.ui.menu .ui.button {
		padding: 0.45em 0.65em !important;
		font-size: 0.8em !important;
		font-weight: bold;
		border-radius: 4px !important;
	}
}


/* ================================
   タブレット（701px〜1024px）
================================ */
@media only screen and (min-width: 701px) and (max-width: 1024px) {

	.ui.menu .ui.button {
		padding: 0.6em 1.0em !important;
		font-size: 0.9em !important;
	}
}


/* ================================
   PC（1025px〜）
================================ */
@media only screen and (min-width: 1025px) {

	.ui.menu .ui.button {
		padding: 0.7em 1.2em !important;
		font-size: 0.95em !important;
	}
}