/*!
Theme Name: tech-mine
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tech-mine
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

tech-mine is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,ol {
	margin: 0 0 0 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.updated:not(.published) {
	display: none;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

.content-section {
    padding: 0px 20px 30px 20px;
    overflow: hidden; /* 余白がはみ出さないようにする */
}

/* ページ全体
--------------------------------------------- */
/* 背景色バリエーション */
.bg {
    background-color: #f7f7f7;
	width: 100%;
    height: auto;
}

.bg.bk_w {
    background-color: white;
}

.bg.bk_bl {
    background-color: #ecf0f1;
}


/*ボタンコンテナ
--------------------------------------------- */
/* CSS: ボタンコンテナを中央配置 */
.button-container {
    text-align: center; /* コンテナ内の要素を中央に配置 */
    margin: 20px; /* 必要に応じて上余白を調整 */
}

/* 共通スタイル */
.btn-rounded {
    padding: 10px 40px;
    font-size: 20px;
    color: #ffffff; /* 文字色を白に設定 */
    border: none;
    border-radius: 50px; /* 左右が丸くなるように */
    text-align: center;
    text-decoration: none; /* 下線を削除して紫リンクを防止 */
    transition: background-color 0.3s ease, color 0.3s ease; /* colorの変化も防止 */
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* ピンクボタン */
.btn-rounded-pink {
    background-color: #ff5e5e;
}

.btn-rounded-pink:hover {
    background-color: #e04e4e; /* ホバー時の濃いピンク */
    color: #ffffff; /* 文字色を維持 */
}

/* 青ボタン */
.btn-rounded-blue {
    background-color: #0089c0;
}

.btn-rounded-blue:hover {
    background-color: #006c9c; /* ホバー時の濃い青 */
    color: #ffffff; /* 文字色を維持 */
}

/* サークル矢印の共通スタイル */
.btn-rounded .circle-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px; /* テキストとアイコンの間隔 */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff; /* 背景色を白に設定 */
    border: 2px solid; /* 外枠を追加 */
    position: relative;
    font-size: 0; /* 中の空間をきれいに保つ */
}

/* 矢印の形をCSSで作成 */
.btn-rounded .circle-arrow::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg); /* 矢印の形に調整 */
}

/* ピンクボタンの矢印 */
.btn-rounded-pink .circle-arrow {
    border-color: #ff5e5e;
}

.btn-rounded-pink .circle-arrow::before {
    border-color: #ff5e5e;
}

/* 青ボタンの矢印 */
.btn-rounded-blue .circle-arrow {
    border-color: #0089c0;
}

.btn-rounded-blue .circle-arrow::before {
    border-color: #0089c0;
}

/* ホバー時の矢印が変化しないように固定 */
.btn-rounded:hover .circle-arrow {
    background-color: #ffffff;
}

.btn-rounded:hover .circle-arrow::before {
    border-color: inherit; /* ボタンの色に依存せず、固定の矢印色 */
}


/*固定ページ
--------------------------------------------- */
/* コンテンツ全体のラッパーを中央揃えし、最大幅を設定 */
.contents {
    max-width: 1200px;
    margin: 0 auto; 
    display: flex;
}

/* メインコンテンツ */
.site-main {
    flex: 1;
}

/* サイドバー */
.widget-area {
    width: 33%; 
    padding: 10px;
    margin-left: 20px; /* サイドバーとメインコンテンツの間に余白 */
}

.inner {
    width: 1100px;
    margin: 0 auto;
    text-align: center;
	   padding: 60px 10px;
}

/* CSS */
.top-fv-section {
    max-width: 1700px;
    margin: -15px auto 0; /* 上部の余白をマイナス値にして中央表示を維持 */
    position: relative;
}

.top-fv-background {
    width: 100%;
}

/* スマホ用画像とPC用画像の切り替え */
.pc-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* ボタンのスタイル */
.top-fv-overlay {
    position: absolute;
    bottom: 17%; /* 画像の下から25%の高さに配置 */
    left: 19%; /* 画像の左から25%の位置に配置 */
    z-index: 2;
}

.top-fv-link {
    text-decoration: none;
    display: inline-block;
}

.top-fv-btn,.top-cta-btn {
    background-color: #ff5e5e;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.top-fv-btn:hover {
    background-color: #ff3b3b;
}

.sp_tp-cta {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

@media (min-width: 756px) {.sp_tp-cta {display: none;}}

.inner {
    width: 1100px;
    margin: 0 auto;
    text-align: center;
	padding: 60px 10px;
}

/* ３列レイアウト
--------------------------------------------- */
/* 3列レイアウトのカラムスタイル */
.content-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラムレイアウト */
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.content-columns a {
    text-decoration: none;
}

.content-column {
    border-radius: 8px;
    text-align: left; /* 左揃えに変更 */
    transition: box-shadow 0.3s ease;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden; /* コンテンツが枠を超えないようにする */
				background-color: #fff;
				box-shadow: 0px 0px 6px 3px #e3e3e3;
}

.content-column a {
    text-decoration: none;
}

.content-column:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ホバー時の効果 */
}

.column-image {
    width: 100%; /* カラムいっぱいに表示 */
    object-fit: cover; /* 画像を枠に収める */
    border-radius: 8px 8px 0 0; /* 上部のみ角丸 */
    margin-bottom: 0;
}

.column-title {
    font-size: 1.2em;
    margin: 10px 15px; /* タイトルに余白を追加 */
    color: #0089c0;
    font-weight: bold;
    text-align: center;
}

.column-description {
    font-size: 14px;
    color: #666;
    margin: 0 30px 15px; /* テキストに余白を追加 */
    text-align: left; /* 左揃え */
}


/* 特徴レイアウト
--------------------------------------------- */
/* 全体のセクションスタイル */
.feature-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px; /* アイテム間の余白 */
    padding: 40px 0;
    align-items: center;
				justify-content: center;
}

/* feature-itemsの中央揃え */
.feature-items {
    display: flex;
    flex-direction: column;
    gap: 40px; /* アイテム間の余白 */
}

/* 各アイテムのレイアウト */
.feature-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* 画像とテキストの基本スタイル */
.feature-image,
.feature-text {
    flex: 1;
}

/* 画像スタイル */
.feature-image img {
    width: 550px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* テキストスタイル */
.feature-text {
    max-width: 550px; /* テキスト部分の幅を指定 */
    text-align: left; /* 左揃えに設定 */
}

.feature-text h3 {
    font-size: 18px;
    margin: 10px 0;
				color: #0089c0;
}

.feature-text p {
    font-size: 1.1em;
    color: #555;
}

/* reverseクラスで順序を入れ替え */
.feature-item.reverse {
    flex-direction: row-reverse;
}

.top-cta{
	background-color: #ffe6e6;
	padding: 20px 10px;
}

#serviceBanners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#serviceBanners > li {
    width: 19%; /* 5カラムにするための幅 */
    background-color: white;
    box-shadow: 0px 0px 6px 3px #e3e3e3;
    border-radius: 8px;
    padding: 10px 20px 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#serviceBanners > li:hover {
    transform: scale(1.05); /* ホバー時に拡大 */
}

#serviceBanners > li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
}

#serviceBanners > li img {
    width: 80%; /* 画像サイズ調整 */
    height: auto;
    margin-bottom: 10px;
}

.service-description {
    font-size: 0.9em;
    text-align: center;
    line-height: 1.5;
}

/* セクション全体 */
.benefits-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
}

/* 行レイアウト */
.benefits-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 各行のスタイル */
.benefits-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* テキスト部分 */
.benefits-text {
    flex: 1;
    text-align: left;
}

.benefits-heading {
    font-weight: bold;
				font-size: 18px;
    margin: 10px 0;
				color: #0089c0;
}

.benefits-description {
    font-size: 14px;
    color: #555;
}

.highlight {
    background: linear-gradient(transparent 60%, rgb(255 0 75 / 30%) 60%);
    font-weight: bold;
}

/* 画像部分 */
.benefits-image-container {
    flex: 0 0 40%; /* 画像の幅を調整 */
}

.benefits-image {
    width: 350px;
    height: auto;
    border-radius: 8px;
}

/* CTAヘッディング */
.cta-heading {
    font-size: 28px;
    color: #333;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

/* マイクロコピー */
.micro-copy {
    font-size: 17px;
    margin-top: 10px;
    text-align: center;
				margin-bottom: 2px;
}

.ttkids-banner {
				max-width: 700px;
}

/* .ttkids-prを中央に配置 */
.ttkids-pr {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    max-width: 700px; 
    background-color: #fff; 
    box-shadow: 0px 0px 6px 3px #e3e3e3;
    border-radius: 8px;
}


br.pc_none {
    display: none; /* PCでは改行を無効にする */
}

/* タブレット対応 (最大768px) */
@media (max-width: 768px) {
    .pc-only {
        display: none; /* PC用画像を非表示 */
    }

    .mobile-only {
        display: block; /* スマホ用画像を表示 */
    }

    .top-fv-btn {
        display: none; /* ボタンを非表示 */
    }

    .inner {
        width: 95%; /* 内側コンテンツ幅を調整 */
        padding: 20px 10px;
    }

    .content-columns {
        grid-template-columns: repeat(2, 1fr); /* 2カラムに変更 */
        gap: 15px;
    }

    .content-column {
        max-width: 100%;
    }

			.feature-item {
        flex-direction: column; /* モバイルでは縦方向に揃える */
        text-align: center; /* 中央揃えに調整 */
    }

    .feature-item.reverse {
        flex-direction: column; /* モバイルでも通常のカラムと同じ順序に */
    }

    .feature-image {
        margin-bottom: 20px; /* 画像とテキストの間に余白を追加 */
    }

    .feature-text {
        text-align: center; /* テキストを中央揃え */
    }

    .feature-image img {
        width: 100%; /* モバイルで画像を画面幅に調整 */
        height: auto;
        border-radius: 8px; /* 角丸を適用 */
    }

    .benefits-row {
        flex-direction: column; /* 縦並び */
        gap: 20px; /* アイテム間の余白 */
    }

    .benefits-image {
        width: 100%; /* 幅いっぱいに表示 */
    }

    .top-cta .cta-heading {
        font-size: 24px; /* 見出しサイズを縮小 */
    }

    .top-cta .btn-rounded {
        padding: 12px 25px; /* ボタンのサイズを調整 */
        font-size: 18px;
    }

    #serviceBanners > li {
        width: 100%; /* 1カラム表示 */
        padding: 10px 5px 10px; /* コンテンツの内側余白を調整 */
        margin-bottom: 10px; /* カラム間の余白 */
    }

    #serviceBanners > li img {
        width: 90%; /* 画像サイズ調整 */
    }

    .service-description {
        font-size: 0.8em; /* テキストサイズを少し小さく */
    }

    .ttkids-banner {
        width: 100%;
        height: auto;
    }
				
				br.pc_none {
        display: block;
    }

	section.child-category { /*Contentsの横幅 */
		width: 90%;
		margin: auto;
	}
}

/* モバイル対応 (最大480px) */
@media (max-width: 480px) {
    .content-columns {
        grid-template-columns: 1fr; /* 1カラムに変更 */
        gap: 10px;
    }

    .content-column {
        max-width: 100%;
        text-align: left; /* テキストを左揃え */
    }

    .feature-item {
        flex-direction: column; /* 縦並び */
        gap: 15px;
    }

    .feature-text h3 {
        font-size: 16px; /* 見出しサイズを小さく */
    }

    .feature-text p {
        font-size: 14px; /* 説明文サイズを小さく */
    }

    .benefits-row {
        flex-direction: column; /* 縦並び */
        gap: 15px;
    }

    .benefits-image {
        width: 100%; /* 画像を幅いっぱいに */
    }

    .top-cta .cta-heading {
        font-size: 20px; /* 見出しサイズを縮小 */
    }

    .top-cta .btn-rounded {
        padding: 10px 20px; /* ボタンサイズを調整 */
        font-size: 16px;
    }

    .ttkids-banner {
        width: 100%;
        height: auto;
    }
}

.page-title {
    font-size: 40px;
    color: #047FB3;
    text-align: center;
    margin-bottom: 30px;
}

.page-description {
    font-size: 16px;
    color: #555;
    padding: 20px;
}

.pricing-container {
    margin-top: 20px;
}

.pricing-box {
    border: 2px solid #047FB3;
    border-radius: 8px;
    width: 500px;
    text-align: center;
    background-color: white;
    color: #047FB3;
				margin: auto;
}

.pricing-title {
    background-color: #047FB3;
    color: white;
    margin: 0;
    padding: 2px;
    font-size: 24px;
}

.pricing-details {
    padding: 10px 20px;
}

.pricing-label {
    margin: 5px 0;
    font-size: 15px;
    font-weight: bold;
}

.pricing-amount {
    margin: 5px 0;
    font-weight: bold;
    color: #047FB3;
}

.price-large {
    font-size: 50px;
				font-weight: bold;
    line-height: 1;
}

.price-small {
    font-size: 15px;
    vertical-align: bottom;
    margin-left: 5px;
				color: #777;
}

.pricing-pink {
    background-color: #ff5e5e; /* 背景色をピンクに設定 */
    color: white; /* 文字色を白に設定 */
    padding: 5px 20px; /* 内側の余白を追加 */
    border-radius: 25px; /* 横を丸くする */
    display: inline-block; /* 要素をインラインブロックに設定 */
    font-weight: bold; /* 文字を太字にする */
    text-align: center; /* 文字を中央揃え */
    margin: 10px 0; /* 上下の余白を設定 */
				font-size: 16px;
}

.pricing-note {
    margin: 20px 0;
    color: #555;
}

.pricing-highlight {
			 margin: 5px 0;
    color: #047FB3;
    font-weight: bold;
}

.notice-container {
    margin-top: 20px;
}

.notice-box {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    width: 800px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #ddd;
				margin: auto;
}

.notice-text {
			 margin: 5px 0;
    font-size: 14px;
    line-height: 1.6;
				text-align: left;
}

@media (max-width: 480px) {
    .pricing-box, .notice-box {
		width: 100%;
		}
	p.pricing-note {
	    font-size: 14px;
		}
}