*/
.margin50-25 {
height: 25px;
}
@media screen and (min-width: 768px) {
.margin50-25 {
height: 50px;
}
}
/****** マージン（縦方向） ここまで ******/
/****** 学びの森サブタイトル ここから ******/
:root {
/* テキスト用の色変数は維持 */
--text-color: #ffffff;
/* フォントファミリーを追加 */
--main-font: 'Poppins', sans-serif;
}
.subtitle-manabi-header-container {
/* 画像の縦横比を考慮して、適度な高さを設定 */
width: 100%;
height: 300px;
/* ******** 修正点 ******** */
/* 背景色、グラデーション、パターン画像をすべて削除 */
background: none; /* 背景の指定をクリア */
/* 葉のパターン画像は、このコンテナのCSSで設定してください */
/* 例: background-image: url('path/to/your-background-image.jpg'); */
/* 例: background-size: cover; */
/* ********************** */
/* 中央寄せのためのFlexbox */
display: flex;
justify-content: center;
align-items: center;
/* テキストがはみ出さないように */
overflow: hidden;
/* ... 既存の Flexbox 設定など ... */
/* お手持ちの背景画像を設定 */
background-image: url('img/logo/Rectangle\ 127.png');
background-size: cover; /* 領域に合わせて画像を拡大・縮小 */
background-position: center; /* 画像を中央に配置 */
/* 必要に応じて、背景が固定されるように設定 */
/* background-attachment: fixed; */
}
.subtitle-manabi-content-wrapper {
text-align: center;
}
.subtitle-manabi-main-heading {
/* 「ABOUT」全体のスタイル */
/* フォントの適用と太さの指定 */
font-family: var(--main-font);
font-size: 5em;
font-weight: 900;
/* デフォルトで透明なフチを設定（BOUTに適用される） */
color: transparent;
-webkit-text-stroke: 1px var(--text-color);
text-shadow: none;
margin: 0;
line-height: 1;
/* letter-spacing: 0.2em; */
}
.subtitle-manabi-A {
/* 「A」の部分だけ、中身を白く塗りつぶす */
color: var(--text-color);
/* 親要素から継承したフチを上書きして無効にする */
-webkit-text-stroke: none;
}
.subtitle-manabi-sub-text {
/* 「スクール支援について」のスタイル */
font-size: 1.5em;
color: var(--text-color);
font-weight: 300;
margin-top: 10px;
letter-spacing: 0.1em;
}
/****** 学びの森サブタイトル ここまで ******/
/*///////////// ここまで ///////////////////
// 共通セッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ヘッダー
/////////////// ここから /////////////////*/
nav {
position:fixed;
width: 100%;
height: 70px;
background: #EBFFF0;
top: 0;
display: block;
z-index: 1000;
}
.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
height: 70px;
}
.logo {
height: 70px;
text-align: center;
}
.logo img{
margin-left: 20px;
margin-top: 5px;
margin-bottom: -18px;
height: 65px;
width: auto;
object-fit: contain;
padding-top: 0;
}
/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed; /* bodyに対しての絶対位置指定 */
width: 20px;
height: 70px;
cursor: pointer;
z-index: 3;
right:20px;
}
.Toggle span {
display: block;
position: absolute;
width: 20px;
border-bottom: solid 2px #333;
-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
-moz-transition: .35s ease-in-out; /*変化の速度を指定*/
transition: .35s ease-in-out; /*変化の速度を指定*/
}
.Toggle span:nth-child(1) {
top:25px;
}
.Toggle span:nth-child(2) {
top: 35px;
}
.Toggle span:nth-child(3) {
top: 45px;
}
.Toggle.active span:nth-child(1) {
top: 35px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 35px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
/*ナビゲーション部分*/
.menu {
margin-top: 0;
text-align:left;
/*transition: .5s ease;/*滑らかに表示*/
-webkit-transform: translateX(105%);
transform: translateX(105%); /*左に隠しておく*/
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/*OPEN時の動き*/
.menu.open {
-webkit-transform: translateX(0%);
transform: translateX(0%); /*中身を表示（右へスライド）*/
}
.menu ul{
margin: 0;
width: 100%;
height:100vh;
background:#ffffff;
padding: 20px 5% 100px 5%;
overflow-y: scroll;
box-sizing: border-box;
}
.menu ul li{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1.5px dashed #1AA455;
position: relative;
text-align: center;
}
.menu ul div.menu-sp li:after{
display: none;
}
.menu ul li:after{
position: absolute;
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
color: #1AA455;
font-size: 20px;
}
.menu ul li a {
display:block;
font-weight:bold;
color:#333333;
padding: 25px 0;
padding-right: 40px;
text-decoration:none;
}
.menu ul div.menu-sp li{
border-bottom:none;
width: 100%;
background: #F78E15;
margin-top: 20px;
}
.menu ul div.menu-sp li a{
padding: 15px 0;
color: #ffffff;
}
.menu ul div.menu-sp li:nth-child(2){
background:#1AA455;
margin-top: 0;
}
.menu-pc{
display: none;
}
@media screen and (min-width: 480px)and ( max-width:1024.9px){
.menu ul div.menu-sp{
display: flex;
}
.menu ul div.menu-sp li{
width: 50%;
}
.menu ul div.menu-sp li:nth-child(2){
margin-top: 20px;
}
}
@media (any-hover: hover){
}
@media screen and (min-width: 1025px) {
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.Toggle {
display: none;
}
.menu {
height: 70px;
background-color: transparent;
margin-top:0;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: none;
-moz-transition : none;
transition : none;
width: 100%;
}
.menu ul {
height: 28px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0;
padding-right: 20px;
background: none;
text-align: right;
overflow-y:hidden;
margin-top: 4.5px;
}
.menu ul li{
padding: 0 10px;
border-bottom: none;
text-align: left;
font-size: 16px;
line-height: 28px;
}
.menu ul li:after{
display: none;
}
.menu ul li a {
padding:0;
padding-right: 0;
text-align: center;
border-bottom: none;
color: #16B199;
}
.menu ul.menu-pc li{
font-weight: 100;
font-size: 14px;
}
.menu ul.menu-pc li i{
color: #1AA455;
padding-right: 5px;
}
.menu ul.menu-pc li:nth-last-child(2) a{
color: #1AA455;
}
.menu ul.menu-pc li:nth-last-child(1) a{
color: #1AA455;
}
.menu ul.menu-pc li:nth-last-child(1){
color: #1AA455;
border: 1px solid #1AA455;
border-radius: 100px;
height: 26px;
background: rgba(26,164,85,0.05);
}
.menu ul.menu-pc li{
font-weight: 100;
}
.menu ul li.menu-pc.site{
background: #F78E15;
height: 26px;
margin-right: 10px;
}
.menu ul li.menu-pc.line{
background: #1AA455;
height: 26px;
}
.menu ul li.menu-pc.line a,.menu ul li.menu-pc.site a{
color: #ffffff;
}
.menu-pc{
display: block;
}
.menu-sp{
display: none;
}
}
@media screen and (min-width: 1200px){
.menu ul li{
font-size: 16px;
}
}
/*///////////// ここまで ///////////////////
// ヘッダーセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// フッターセッティング
/////////////// ここから /////////////////*/
/* 学びフッターエリア ここから */
/* コンテナ設定 */
.end-header-container {
padding: 20px 10px; /* 上下の余白を広めに、左右は少し */
display: flex;
flex-direction: column; /* スマホでは縦並び */
align-items: center;
background-color: #ffffff;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* ロゴエリア */
.end-logo-area {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.end-logo-area img {
width: 250px; /* ロゴ画像のサイズを調整 */
height: auto;
}
.end-logo-text {
font-size: 1.2rem;
color: #4CAF50; /* ロゴの色に合わせたフォント色 */
margin-top: 5px;
font-weight: bold;
display: none; /* 画像の文字と重複するため、スマホでは非表示 */
}
/* 連絡先・お問い合わせボタンエリア */
.end-contact-buttons {
display: flex;
flex-direction: column; /* ボタンを縦に並べる */
width: 90%; /* ボタン幅をコンテナに合わせて広げる */
max-width: 300px;
gap: 10px; /* ボタン間のスペース */
}
.end-button {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 20px;
border-radius: 30px; /* 角丸のボタン */
text-decoration: none;
font-weight: bold;
font-size: 1rem;
transition: background-color 0.3s, opacity 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.end-icon-phone, .end-icon-mail {
margin-right: 8px;
font-size: 1.2rem;
}
/* 電話番号ボタンのスタイル */
.end-phone-button {
background-color: #ffffff;
border: 2px solid #FFAB40; /* オレンジ色の枠線 */
color: #FFAB40;
}
.end-phone-button:hover {
background-color: #FFF3E0;
}
/* お問い合わせボタンのスタイル */
.end-contact-button {
background-color: #FFAB40; /* オレンジ色の背景 */
color: #ffffff;
border: 2px solid #FFAB40;
}
.end-contact-button:hover {
background-color: #FFA000;
}
/* グローバルナビゲーションとフッターの背景 */
.end-footer-background {
background-color: #16B199; /* 画像の背景色に合わせて調整 */
color: #ffffff;
padding: 20px 0 10px; /* ナビとコピーライトの間のスペースを確保 */
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* グローバルナビゲーション */
.end-global-nav {
}
.end-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column; /* スマホでは縦並び */
align-items: center;
gap: 10px; /* 縦のメニュー間のスペース */
}
.end-nav-item {
margin: 0 10px;
}
.end-nav-link {
display: block;
color: #ffffff;
text-decoration: none;
font-size: 0.9rem;
padding: 5px 10px;
transition: opacity 0.3s;
}
.end-nav-link:hover {
opacity: 0.8;
}
/* コピーライト */
.end-copyright {
color: #ffffff;
text-align: center;
font-size: 0.7rem;
margin-top: 20px;
padding-bottom: 10px;
opacity: 0.8;
}
/* ====================================
* メディアクエリ (PC/タブレット用)
* ==================================== */
@media (min-width: 768px) {
/* コンテナ設定 */
.end-header-container {
flex-direction: row; /* PCでは横並び */
justify-content: center; /* 左右に配置 */
padding: 30px 5%;
max-width: 1200px;
margin: 0 auto;
}
/* ロゴエリア */
.end-logo-area {
margin-bottom: 0;
flex-direction: row;
gap: 10px;
}
.end-logo-image {
width: 180px; /* PCでは少し大きく */
}
.end-logo-text {
display: none; /* ロゴ画像に文字が含まれているため、非表示のまま */
}
/* 連絡先・お問い合わせボタンエリア */
.end-contact-buttons {
flex-direction: row; /* PCでは横並び */
width: auto; /* 幅をコンテンツに合わせる */
max-width: none;
gap: 20px; /* ボタン間のスペースを広げる */
align-items: center;
}
/* ボタンのスタイル調整 */
.end-button {
padding: 10px 25px;
font-size: 1.1rem;
width: auto; /* PCでは幅を固定しない */
}
/* 電話番号ボタンのスタイル */
.end-phone-button {
padding: 10px 30px;
font-size: 1.2rem;
/* 画像の形状に近づけるため、枠線の太さを調整 */
border-width: 3px;
}
/* グローバルナビゲーションとフッターの背景 */
.end-footer-background {
padding: 15px 0 15px; /* 上下のパディングを調整 */
}
/* グローバルナビゲーション */
.end-global-nav {
max-width: 1200px;
margin: 0 auto;
}
.end-nav-list {
flex-direction: row; /* PCでは横並び */
justify-content: center;
gap: 0; /* PCではli側でマージンを設定 */
}
.end-nav-item {
margin: 0 15px; /* 項目間のスペース */
}
.end-nav-link {
font-size: 1rem;
padding: 5px 10px;
}
/* コピーライト */
.end-copyright {
margin-top: 15px;
font-size: 0.8rem;
}
}
/* 学びフッターエリア ここまで */
/* 問合せエリア ここから */
/* 2つのバナーを囲むラッパー */
.footer-banner-wrapper {
display: flex;
/* スマホでは縦積みにする */
flex-direction: column;
gap: 1rem; /* バナー間の余白 */
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* バナーの共通スタイル */
.footer-banner01 a,
.footer-banner02 a {
display: block; /* リンクのエリアを広げる */
}
/* 画像の共通スタイル */
.footer-banner01 img,
.footer-banner02 img {
width: 100%; /* 親要素の幅いっぱいに広げる */
height: auto; /* 高さは自動調整 */
display: block; /* 画像下の余白を消す */
}
/* =============================================
PC用のスタイル
============================================= */
@media (min-width: 768px) {
/* PCでは横並びにする */
.footer-banner-wrapper {
flex-direction: row;
}
/* 各バナーが均等な幅を持つように設定 */
.footer-banner01,
.footer-banner02 {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% のショートハンド */
min-width: 0; /* flexアイテムが縮小できるようにする */
}
}
/* 問合せエリア ここまで */
/* フッターメニューエリア ここから */
.footer-pack {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #558B2F; /* 背景色を画像に合わせて設定 */
color: #fff;
font-family: sans-serif;
}
/* アイコンエリア */
.footer-pack-icon {
margin-bottom: 20px;
text-align: center;
}
.footer-pack-icon img {
max-width: 150px;
height: auto;
}
/* 各ブロック */
.footer-pack-block {
margin-bottom: 20px;
}
.footer-pack-block h4 a {
font-size: 16px;
font-weight: 600;
margin: 0 0 -45px 0;
}
.footer-pack-block-01,
.footer-pack-block-02 {
margin-bottom: 15px;
}
.footer-pack-block-01 a,
.footer-pack-block-02 a {
display: block;
font-size: 1.2em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.footer-pack-block ur {
list-style: none;
padding: 0;
margin-top: 10px;
margin-left: 10px;
}
.footer-pack-block ur li a {
font-size: 1em;
font-weight: normal;
padding: 5px 0;
}
@media (min-width: 768px) {
.footer-pack {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 40px 20px;
}
/* アイコンエリア */
.footer-pack-icon {
width: 20%; /* アイコンの幅 */
margin-bottom: 0;
text-align: left;
}
.footer-pack-icon a {
/* display: flex; */
align-items: center;
}
.footer-pack-icon img {
max-width: 160px;
margin-right: 15px;
}
/* .footer-pack-icon a::after {
content: "高木畳店";
font-size: 2em;
font-weight: bold;
color: #fff;
} */
/* 各ブロックを横並びに */
.footer-pack-block {
display: flex;
justify-content: flex-start;
gap: 5px; /* ブロック間のスペース */
width: 70%;
margin-bottom: 0;
}
/* ブロック内の要素 */
.footer-pack-block-01,
.footer-pack-block-02 {
flex: 1;
margin-bottom: 0;
}
.footer-pack-block-01 a,
.footer-pack-block-02 a {
font-size: 15px;
font-weight: normal;
padding-bottom: 10px;
}
.footer-pack-block ur li a {
font-size: 0.9em;
}
}
/* フッターメニューエリア ここまで */
/* エリア ここから */
/* エリア ここまで */
/* ここから事前設定 */
.footer-contact{
background-image:url("images/Features-back-03.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.footer-contact-back{
background:rgba(255,255,255,0.20);
width: 100%;
height: 100%;
padding: 60px 0;
}
.footer-contact-box{
background:rgba(255,255,255,0.80);
width: 90%;
right: 0;
left: 0;
margin: auto;
padding: 40px 0;
font-weight: 600;
}
.footer-contact-title{
text-align: center;
}
.footer-contact-title h2{
color: #19A455;
}
.footer-contact-title p{
font-weight: 600;
}
.footer-contact-flex{
padding-top: 20px;
}
.footer-contact-item{
border: 2px solid #19A455;
background: #fff;
padding: 10px;
width: 90%;
text-align: center;
right: 0;
left: 0;
margin: 0 auto 10px auto;
}
.footer-contact-item i{
padding-right: 10px;
color: #19A455;
}
.footer-contact-right{
background: #8DC54B;
padding: 20px 10px;
text-align: center;
width: 90%;
right: 0;
left: 0;
margin: auto;
}
.footer-contact-right i{
padding-left: 5px;
}
@media screen and (min-width: 768px){
.footer-contact-box{
padding: 40px 60px;
box-sizing: border-box;
}
.footer-contact-flex{
display: table;
width: 100%;
}
.footer-contact-item{
width: 100%;
}
.footer-contact-item:last-child{
margin-bottom: 0;
}
.footer-contact-left{
display: table-cell;
width: calc( 50% - 20px );
vertical-align: middle;
padding-right: 40px;
text-align: center;
box-sizing: border-box;
}
.footer-contact-right{
display: table-cell;
width: calc( 50% - 20px );
vertical-align: middle;
padding: 0;
}
}
.footer-under{
text-align: center;
padding: 40px 0 10px 0;
width: 90%;
right: 0;
left: 0;
margin: auto;
}
.footer-top p{
font-weight: 600;
font-size: 20px;
}
.footer-top img{
object-fit: contain;
width: 50%;
max-width: 240px;
}
.footer-under-menu{
display:grid;
grid-row-gap: 10px;
grid-template-columns: 1fr 1fr;
font-weight: 600;
}
.footer-under-reserve{
background: #1AA455;
padding: 10px 0;
border-radius: 8px;
margin: 40px 0;
}
.footer-under-reserve p{
color: #fff;
}
.footer-under-sns{
display: flex;
right: 0;
left: 0;
margin: auto;
width: fit-content;
}
.footer-under-sns img{
object-fit: contain;
height: 30px;
width: fit-content;
padding: 0 10px;
}
.footer-under-under{
text-align: center;
}
.footer-under-under p{
color: #858585;
padding: 5px 0;
}
.footer-under-under{
margin: 20px 0;
}
.copyright{
padding-bottom: 120px;
}
@media screen and (min-width: 480px){
.footer-under-sns img{
height: 40px;
padding: 0 10px;
}
}
@media screen and (min-width: 768px){
.footer-under-menu{
display: flex;
align-items: center;
justify-content: center;
}
.footer-under-menu a{
padding-right: 40px;
}
.footer-under-menu a:last-child{
padding-right: 0;
}
.footer-under-under p{
color: #858585;
padding: 5px 10px;
}
.footer-under-under{
margin: 20px auto;
display: flex;
width: fit-content;
right: 0;
left: 0;
}
}
@media screen and (min-width: 1025px){
.copyright{
padding-bottom: 0;
}
}
/*///////////// ここまで ///////////////////
// フッターセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ホームページ
/////////////// ここから /////////////////*/
/*
* Main Visual Section Styles
* スマホファーストのレスポンシブデザイン
*/
/****** 新ファーストビューエリア ここから ******/
/* セクション全体のコンテナ */
.start-section-container {
width: 100%;
padding: 20px 0;
background-color: #ffffff;
}
/* 実際に表示されるコンテンツエリア */
.start-main-visual {
width: 100%;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
max-width: 1000px;
}
/* 画像とテキストのメインエリア */
.start-image-and-text {
position: relative;
z-index: 2;
margin-bottom: -30px;
margin-left: 0;
width: 100%;
}
/* 背景画像エリア */
.start-image-area {
width: 100%;
padding-top: 60%; /* アスペクト比を維持 */
background-image: url('img/top/LINE_ALBUM_20250620_250620_1.jpg');
background-size: cover;
background-position: center 70%;
background-repeat: no-repeat;
/* ★★★ ここを追加/変更（2025年12月4日） ★★★ */
/* 背景画像を滑らかに切り替えるためのトランジション（ブラウザによって効果が異なる場合があるため、ベンダープレフィックスを使用） */
/* transition: background-image 2s ease-in-out; */
/* -webkit-transition: background-image 2s ease-in-out; */ /* 必要に応じて */
transition: opacity 1s ease-in-out; /* 1秒かけて透明度が変化するように設定 */
opacity: 1; /* 初期状態は完全に表示 */
/* 角丸設定：左上のみ */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 0;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
/* 画像に重ねるテキストのコンテナ (★スマホ用: 下方中央寄せに修正★) */
.start-text-overlay {
position: absolute;
top: 83%; /* 下の方に移動 */
left: 50%; /* 中央寄せ */
/* 中央寄せと傾きをリセット */
transform: translate(-50%, -50%) rotate(0deg);
text-align: center; /* テキストを中央寄せ */
z-index: 10;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
/* メインのテキスト（強くなれ！） */
.start-main-text {
font-size: 8vw;
font-weight: 800;
margin: 0;
line-height: 1.2;
/* スマホではテキストの色を元の画像に合わせて白から変更 */
color: white; /* テキストの中の色を白に */
text-shadow:
-1px -1px 0 black, /* 左上 */
1px -1px 0 black, /* 右上 */
-1px 1px 0 black, /* 左下 */
1px 1px 0 black; /* 右下 */
/* 必要に応じて、さらに細かい影を追加して線を太く滑らかにできます */
}
/* サブのテキスト（そして笑え！！） */
.start-sub-text {
font-size: 6vw;
font-weight: 800;
margin: 0;
margin-top: 5px;
line-height: 1.2;
color: white; /* テキストの中の色を白に */
text-shadow:
-1px -1px 0 black, /* 左上 */
1px -1px 0 black, /* 右上 */
-1px 1px 0 black, /* 左下 */
1px 1px 0 black; /* 右下 */
/* 必要に応じて、さらに細かい影を追加して線を太く滑らかにできます */
}
/* --- 下部のグリーンの帯 --- */
.start-message-band {
width: 100%;
background-color: #009688;
padding: 20px 15px;
box-sizing: border-box;
position: relative;
z-index: 1;
/* 緑の帯の角丸設定：左下のみ */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* メッセージのテキスト */
.start-message-text {
color: white;
font-size: 3.5vw;
text-align: right;
margin: 0;
line-height: 1.5;
font-weight: 500;
margin: 20px 0 0 0;
}
/* --- レスポンシブ対応 (タブレット・PC向け) --- */
@media (min-width: 768px) {
/* ★★★ テキストの配置をPC用に修正 ★★★ */
.start-text-overlay {
top: 35%; /* 上の方に移動 */
left: -15%; /* 写真から左にはみ出す */
transform: translate(0, -50%) rotate(-8deg); /* 傾きを適用 */
text-align: left; /* テキストの配置を左寄せに戻す */
}
.start-main-text {
font-size: 60px;
color: white; /* テキストの中の色を白に */
text-shadow:
-1px -1px 0 black, /* 左上 */
1px -1px 0 black, /* 右上 */
-1px 1px 0 black, /* 左下 */
1px 1px 0 black; /* 右下 */
/* 必要に応じて、さらに細かい影を追加して線を太く滑らかにできます */
}
.start-sub-text {
font-size: 45px;
color: white; /* テキストの中の色を白に */
text-shadow:
-1px -1px 0 black, /* 左上 */
1px -1px 0 black, /* 右上 */
-1px 1px 0 black, /* 左下 */
1px 1px 0 black; /* 右下 */
/* 必要に応じて、さらに細かい影を追加して線を太く滑らかにできます */
}
/* 画像エリアの配置を調整 */
.start-image-and-text {
width: 70%;
margin-left: 30%;
margin-bottom: -40px;
}
.start-image-area {
height: 550px;
padding-top: 0;
}
/* メッセージテキストのサイズを固定 */
.start-message-text {
font-size: 18px;
/* padding: 0 50px; */
}
/* グリーンの帯のパディング */
.start-message-band {
padding: 25px 15px;
}
/* コンテナの幅制限を解除 */
.start-main-visual {
max-width: none;
padding: 0;
}
}
/****** 新ファーストビューエリア ここまで ******/
/****** ファーストビューエリア ここから ******/
/* トップページ ファーストビュー（修正版） */
/* コンテナ全体 */
.toppage-firstview-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
/* 【重要】ここを基準にメッセージエリアを配置します */
position: relative;
}
/* 画像とキャッチコピーのラッパー */
.toppage-firstview-image-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
/* メイン画像 */
.toppage-firstview-main-image {
width: 100%;
height: auto;
display: block;
/* スマホ版のデザイン（左下を丸く） */
border-radius: 0 0 0 40px;
object-fit: cover;
object-position: 80% center;
}
/* キャッチコピーエリア */
.toppage-firstview-catchcopy-area {
position: absolute;
top: 15%;
left: 8%;
color: #333;
font-weight: bold;
line-height: 1.4;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.8); /* 白背景を少し濃く */
padding: 8px 12px;
border-radius: 8px;
white-space: nowrap;
z-index: 5; /* 画像より手前に */
}
.toppage-firstview-catchcopy-line1 {
font-size: clamp(1.2rem, 5vw, 2.2rem);
margin-bottom: 5px;
}
.toppage-firstview-catchcopy-line2 {
font-size: clamp(1.5rem, 6vw, 2.8rem);
}
/* メッセージエリア（緑色のところ） */
.toppage-firstview-message-area {
background-color: #16B199;
padding: 20px 15px;
text-align: center;
color: #fff;
width: 100%;
box-sizing: border-box;
/* 【修正】スマホ版でも確実に表示されるように設定 */
position: relative;
z-index: 10;
}
.toppage-firstview-message-text {
font-size: clamp(0.9rem, 3.5vw, 1.2rem);
margin: 0;
line-height: 1.6;
}
/* --- レスポンシブ対応 (タブレット・PC向け) --- */
@media (min-width: 768px) {
/* 画像調整 */
.toppage-firstview-main-image {
border-radius: 0 40px 40px 0;
height: 500px; /* 高さを少し確保 */
object-position: center right;
}
/* キャッチコピー位置調整 */
.toppage-firstview-catchcopy-area {
top: 20%;
left: 10%;
padding: 15px 25px;
border-radius: 12px;
}
.toppage-firstview-catchcopy-line1 {
font-size: 2.2rem;
}
.toppage-firstview-catchcopy-line2 {
font-size: 2.8rem;
}
/* メッセージエリア調整（PC版での重ね合わせ） */
.toppage-firstview-message-area {
position: absolute; /* 親要素(container)の左下を基準に配置 */
bottom: 0;
left: 0;
width: 70%;
padding: 25px 30px;
text-align: left;
border-radius: 0 40px 0 0;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15);
/* 【重要】画像の上に重なるように背景を少し透過させる */
background-color: rgba(70, 133, 101, 0.95);
}
.toppage-firstview-message-text {
font-size: 1.2rem;
}
}
@media (min-width: 1024px) {
.toppage-firstview-main-image {
height: 600px;
}
.toppage-firstview-catchcopy-area {
top: 25%;
left: 12%;
padding: 20px 30px;
}
.toppage-firstview-catchcopy-line1 {
font-size: 2.5rem;
}
.toppage-firstview-catchcopy-line2 {
font-size: 3.2rem;
}
.toppage-firstview-message-area {
width: 60%;
padding: 30px 40px;
}
.toppage-firstview-message-text {
font-size: 1.3rem;
}
}
/****** ファーストビューエリア ここまで ******/
/****** おしらせエリア ここから ******/
/* トップページ お知らせセクション */
/* --- 共通変数（色などの定義） --- */
:root {
--toppage-news-main-green: #00b894; /* 見出しの緑色 */
--toppage-news-sub-brown: #8d6e63; /* 英語見出しの茶色 */
--toppage-news-accent-pink: #f7a693; /* タグ・ボタン・枠線のピンク色 */
--toppage-news-text-gray: #666; /* 本文のグレー */
}
/* コンテナ */
.toppage-news-container {
width: 100%;
max-width: 1200px; /* PCでの最大幅 */
margin: 0 auto;
padding: 60px 20px;
box-sizing: border-box;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* --- ヘッダーエリア --- */
.toppage-news-header {
text-align: center;
margin-bottom: 40px;
}
.toppage-news-title-ja {
color: var(--toppage-news-main-green);
font-size: 1.8rem;
margin: 0;
font-weight: bold;
letter-spacing: 0.05em;
}
.toppage-news-title-en {
color: var(--toppage-news-sub-brown);
font-size: 1rem;
font-weight: bold;
margin: 5px 0 10px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* 見出し下の短い線 */
.toppage-news-border-line {
display: block;
width: 40px;
height: 2px;
background-color: #d7ccc8; /* 薄い茶色 */
margin: 0 auto;
}
/* --- グリッドレイアウト（カード一覧） --- */
.toppage-news-grid {
display: grid;
gap: 25px;
/* スマホファースト：デフォルトは1列 */
grid-template-columns: 1fr;
}
/* --- カード本体 --- */
.toppage-news-card {
border: 1px solid var(--toppage-news-accent-pink);
border-radius: 20px;
overflow: hidden; /* 画像が角丸からはみ出さないように */
background-color: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ホバー時の動き（PC向け） */
@media (hover: hover) {
.toppage-news-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
}
/* 画像エリア */
.toppage-news-image-area {
width: 100%;
aspect-ratio: 16 / 9; /* 画像の比率を固定 */
overflow: hidden;
}
.toppage-news-image {
width: 100%;
height: 100%;
object-fit: cover; /* 比率を保ちつつ埋める */
}
/* テキストエリア */
.toppage-news-content-area {
padding: 20px;
}
/* タグ */
.toppage-news-tag {
display: inline-block;
background-color: var(--toppage-news-accent-pink);
color: #fff;
font-size: 0.8rem;
padding: 4px 15px;
border-radius: 20px;
margin-bottom: 10px;
}
/* 日付 */
.toppage-news-date {
font-size: 0.9rem;
color: #333;
margin: 0 0 8px 0;
font-weight: bold;
}
/* タイトル */
.toppage-news-card-title {
font-size: 1.1rem;
color: var(--toppage-news-accent-pink);
margin: 0 0 10px 0;
line-height: 1.4;
}
/* 本文（省略表示対応） */
.toppage-news-text {
font-size: 0.9rem;
color: var(--toppage-news-text-gray);
margin: 0;
line-height: 1.6;
/* 2行で省略して「...」を表示する設定 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* --- ボタンエリア --- */
.toppage-news-btn-wrapper {
text-align: center;
margin-top: 40px;
}
.toppage-news-link {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
color: #555;
font-weight: bold;
font-size: 1rem;
transition: opacity 0.3s;
}
.toppage-news-link:hover {
opacity: 0.7;
}
/* 矢印アイコンの丸い部分 */
.toppage-news-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--toppage-news-accent-pink);
color: #fff;
border-radius: 50%;
font-size: 1.2rem;
/* 矢印の角度調整（右上向き） */
transform: rotate(-45deg);
}
/* --- レスポンシブ対応 --- */
/* タブレット以上（2列） */
@media (min-width: 600px) {
.toppage-news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* PC以上（4列） */
@media (min-width: 1025px) {
.toppage-news-grid {
grid-template-columns: repeat(4, 1fr);
}
.toppage-news-container {
padding: 80px 20px;
}
}
/****** おしらせエリア ここまで ******/
/****** メッセージエリア ここから ******/
/* トップページ メッセージセクション */
.toppage-message-container {
width: 100%;
padding: 60px 20px 120px; /* 下部のパディングを多めにとって木を表示 */
background-color: #fff; /* 背景色 */
position: relative; /* 背景画像の配置基準 */
overflow: hidden; /* はみ出し防止 */
box-sizing: border-box;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
.toppage-message-inner {
max-width: 800px; /* テキスト幅を制限して読みやすく */
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2; /* 背景画像より手前に表示 */
}
/* --- 上部の緑色タイトル --- */
.toppage-message-title {
color: #00a79d; /* 画像に近い青緑色 */
font-size: 1.4rem;
line-height: 1.8;
font-weight: normal; /* 明朝体なので太字にしない方が綺麗 */
margin-bottom: 40px;
}
/* PC用の改行クラス */
.toppage-message-br {
display: none; /* スマホでは改行しない */
}
/* --- 下部の茶色テキスト --- */
.toppage-message-content {
color: #8b5a2b; /* 画像に近い茶色 */
font-size: 1rem;
line-height: 2;
font-weight: 500;
}
.toppage-message-text {
margin-bottom: 24px;
}
/* --- 背景の木のイラスト --- */
.toppage-message-bg-wrapper {
position: absolute;
bottom: 0;
right: 0; /* 右寄せ */
width: 60%; /* スマホでの画像の大きさ */
max-width: 500px; /* 最大サイズ */
z-index: 1; /* テキストの下に配置 */
opacity: 0.6; /* 必要に応じて透明度調整 */
pointer-events: none; /* 画像がクリックの邪魔にならないように */
}
.toppage-message-tree-img {
width: 100%;
height: auto;
display: block;
}
/* --- レスポンシブ対応（PC・タブレット） --- */
@media (min-width: 768px) {
.toppage-message-container {
padding: 100px 20px 150px;
}
.toppage-message-title {
font-size: 1.8rem;
line-height: 1.6;
margin-bottom: 60px;
}
/* PCでは指定位置で改行 */
.toppage-message-br {
display: inline;
}
.toppage-message-content {
font-size: 1.1rem;
}
/* 木の画像の位置調整 */
.toppage-message-bg-wrapper {
right: 5%; /* 少し内側に */
width: 40%; /* PCでは少し控えめな幅に */
opacity: 1; /* PCではくっきり表示（お好みで） */
}
}
/* --- アニメーション対象要素の初期状態 --- */
.toppage-message-title,
.toppage-message-content .toppage-message-text {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.2s ease-out, transform 1.2s ease-out;
/* ★ animation-fill-mode を追加して、表示後もスタイルを維持 ★ */
animation-fill-mode: forwards;
/* ★ アニメーション名を定義 ★ */
animation-name: simpleFadeIn;
}
/* 1. タイトル（最初に表示） */
.toppage-message-title {
animation-duration: 1.2s; /* アニメーション時間 */
animation-delay: 0.3s; /* 0.3秒後に開始 */
}
/* 2. 最初の段落 (タイトルが終わる頃に開始) */
.toppage-message-content .toppage-message-text:nth-child(1) {
animation-duration: 1.2s;
animation-delay: 1.8s; /* 0.3s + 1.2s + 0.3s = 1.8秒後 */
}
/* 3. 2番目の段落 (最初の段落と同じタイミングで開始) */
.toppage-message-content .toppage-message-text:nth-child(2) {
animation-duration: 1.2s;
animation-delay: 1.8s; /* 1.8秒後 */
}
/* キーフレーム定義: 透明でずれた状態から表示状態へ */
@keyframes simpleFadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/****** メッセージエリア ここまで ******/
/****** 学びの森特徴エリア ここから ******/
/* ==========================================
4. 特徴 (Features) セクションのCSS
========================================== */
/* --- 変数定義（もし共通部分にない場合用） --- */
:root {
--toppage-features-bg-color: #eaf8f6; /* 全体の薄いミントグリーン */
--toppage-features-teal: #1eb2a6; /* アクセントの濃い緑 */
/* --toppage-features-pink-bg: #f4e9e9; */
--toppage-features-pink-bg: #efd8d8;
--toppage-features-text-black: #333;
--toppage-features-text-brown: #5d4037;
}
/* --- 全体レイアウト --- */
.toppage-features-section {
width: 100%;
padding-top: 40px;
background-color: var(--toppage-features-bg-color);
border-radius: 80px 0 0 0; /* 左上を丸く */
}
.toppage-features-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px 80px;
box-sizing: border-box;
}
/* フォント（明朝体） */
.toppage-features-title-group,
.toppage-features-item-title-vertical {
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
color: var(--toppage-features-text-black);
}
/* --- 上部：導入エリア --- */
.toppage-features-intro-area {
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 80px;
}
.toppage-features-title-group {
display: flex;
flex-direction: row-reverse;
justify-content: center;
gap: 15px;
writing-mode: vertical-rl; /* 縦書き */
letter-spacing: 0.1em;
}
@media (max-width: 899px) {
.toppage-features-title-group {
text-align: center;
writing-mode: horizontal-tb;
display: block;
}
}
.toppage-features-main-title-vertical {
font-size: 1.5rem;
line-height: 1.8;
margin: 0;
font-weight: bold;
}
.toppage-features-sub-title-vertical {
color: var(--toppage-features-teal);
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 0.2em;
}
/* メイン画像ラッパー */
.toppage-features-intro-image-wrapper {
position: relative;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
/* テキストとボタン */
.toppage-features-intro-text-wrapper {
text-align: left;
}
.toppage-features-desc-text {
font-size: 0.95rem;
line-height: 1.8;
color: var(--toppage-features-text-brown);
margin-bottom: 30px;
}
.toppage-features-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
background-color: var(--toppage-features-teal);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-weight: bold;
width: 220px;
box-sizing: border-box;
transition: opacity 0.3s;
}
.toppage-features-btn:hover {
opacity: 0.8;
}
.toppage-features-arrow-icon {
font-size: 1.2em;
}
/* --- 下部：5つの特徴グリッド --- */
.toppage-features-items-grid {
display: flex;
flex-wrap: wrap;
gap: 40px 30px;
justify-content: center;
}
.toppage-features-item {
width: 100%;
max-width: 400px;
}
/* アイテム上部 */
.toppage-features-item-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: -20px;
}
.toppage-features-item-title-vertical {
writing-mode: vertical-rl;
font-size: 1.1rem;
line-height: 1.5;
margin: 0 10px 0 0;
letter-spacing: 0.1em;
height: 180px;
}
/* アイテム画像ボックス */
.toppage-features-item-img-box {
position: relative;
width: 80%;
}
/* ==================================================
画像の後ろの板の設定（ここが重要）
================================================== */
.toppage-features-img-wrap {
position: relative;
width: 100%;
z-index: 1;
}
/* 全て同じ角度で右に傾ける */
.toppage-features-img-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--toppage-features-pink-bg);
border-radius: 15px;
/* 右に4度傾ける */
transform: rotate(8deg);
z-index: -1;
}
/* 画像本体 */
.toppage-features-intro-img,
.toppage-features-item-img {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
object-fit: cover;
position: relative;
}
.toppage-features-item-img {
aspect-ratio: 4/3;
}
/* -------------------------------------------------- */
/* 番号 */
.toppage-features-number {
font-family: sans-serif;
font-size: 3rem;
font-weight: bold;
color: var(--toppage-features-teal);
text-align: right;
position: relative;
z-index: 2;
line-height: 1;
margin-right: 10px;
}
.toppage-features-divider {
width: 100%;
height: 0;
border-top: 2px dotted #aaddd6;
margin: 5px 0 15px;
}
.toppage-features-item-text {
font-size: 0.9rem;
line-height: 1.7;
color: var(--toppage-features-text-brown);
font-weight: 500;
}
/* --- PC・タブレット向けレスポンシブ設定 --- */
@media (min-width: 900px) {
.toppage-features-intro-area {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 40px 0;
}
.toppage-features-title-group {
margin-right: 20px;
}
.toppage-features-main-title-vertical {
font-size: 2rem;
}
.toppage-features-intro-image-wrapper {
width: 45%;
}
.toppage-features-intro-text-wrapper {
width: 30%;
}
.toppage-features-item {
width: calc(33.33% - 20px);
max-width: none;
}
}
/****** 学びの森特徴エリア ここまで ******/
/****** プラスワンの教育をオーダーメイドでエリア ここから ******/
/* ==========================================
学習支援 (Learning Support) セクション
========================================== */
/* --- 変数定義（このセクション用） --- */
:root {
--toppage-ls-teal: #00a79d; /* タイトルの青緑色 */
--toppage-ls-brown: #8d6e63; /* サブタイトルの茶色 */
--toppage-ls-text: #5d4037; /* 本文の濃い茶色 */
--toppage-ls-btn-yellow: #fbc02d; /* ボタンアイコンの黄色 */
}
/* --- コンテナ設定 --- */
.toppage-learningsupport-container {
width: 100%;
position: relative;
padding-bottom: 80px; /* カードの下に余白を確保 */
background-color: #fff; /* 必要に応じて変更 */
}
/* --- 背景画像エリア --- */
.toppage-learningsupport-bg-wrapper {
width: 100%;
height: 300px; /* スマホでの画像の高さ */
overflow: hidden;
}
.toppage-learningsupport-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- 白いカードエリア --- */
.toppage-learningsupport-card {
width: 90%; /* スマホでの幅 */
max-width: 1000px; /* PCでの最大幅 */
margin: -50px auto 0; /* 画像の上に50px重ねる */
background-color: #fff;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* ふんわりした影 */
position: relative;
z-index: 10;
padding: 40px 20px;
box-sizing: border-box;
text-align: center;
/* フォント設定（明朝体で上品に） */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}
/* タイトル */
.toppage-learningsupport-title-ja {
color: var(--toppage-ls-teal);
font-size: 1.4rem;
margin: 0 0 15px 0;
font-weight: normal; /* 明朝体なので標準の太さで綺麗に見せる */
line-height: 1.4;
}
/* サブタイトル (LEARNING SUPPORT) */
.toppage-learningsupport-subtitle-group {
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.toppage-learningsupport-subtitle-en {
color: var(--toppage-ls-brown);
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0 0 5px 0;
font-family: sans-serif; /* 英語はゴシック系で見やすく */
}
.toppage-learningsupport-divider {
width: 40px;
height: 1px;
background-color: var(--toppage-ls-brown);
}
/* 本文 */
.toppage-learningsupport-text-area {
margin-bottom: 40px;
}
.toppage-learningsupport-text {
color: var(--toppage-ls-text);
font-size: 0.95rem;
line-height: 2; /* ゆったりとした行間 */
margin-bottom: 20px;
font-weight: 500;
}
/* スマホでの改行制御 */
.toppage-learningsupport-br {
display: none; /* スマホでは自動折り返し */
}
/* --- ボタン --- */
.toppage-learningsupport-btn-wrapper {
margin-top: 30px;
}
.toppage-learningsupport-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
text-decoration: none;
color: var(--toppage-ls-text);
font-weight: bold;
font-family: sans-serif; /* ボタン文字は読みやすくゴシック体 */
transition: opacity 0.3s;
}
.toppage-learningsupport-link:hover {
opacity: 0.7;
}
.toppage-learningsupport-link-text {
font-size: 1rem;
}
/* 黄色の丸いアイコン */
.toppage-learningsupport-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: var(--toppage-ls-btn-yellow);
color: #fff;
border-radius: 50%;
font-size: 1.2rem;
transform: rotate(-45deg); /* 右上向き矢印に */
}
.toppage-learningsupport-link-png {
/* divを円にする */
width: 36px; /* 円の直径を設定 (必要に応じて変更してください) */
height: 36px; /* 円の直径を設定 (widthと同じ値にしてください) */
border-radius: 50%; /* 完全に円にする */
overflow: hidden; /* imgがはみ出さないように、はみ出た部分を非表示にする */
display: flex; /* imgを中央に配置するためのFlexboxコンテナ設定 */
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
/* 必要に応じて背景色やボーダーを追加できます */
background-color: #F8B62B;
}
.toppage-learningsupport-link-png-img {
/* imgがdivからはみ出ないようにして最大に */
width: 100%; /* 親要素 (円のdiv) の幅いっぱいに広げる */
height: 100%; /* 親要素 (円のdiv) の高さいっぱいに広げる */
object-fit: cover; /* 画像の縦横比を維持したまま、要素全体を覆うように拡大縮小する */
object-fit: contain;
}
/* --- レスポンシブ対応 (PC・タブレット) --- */
@media (min-width: 768px) {
/* 画像の高さ */
.toppage-learningsupport-bg-wrapper {
height: 500px;
}
/* カードの位置とパディング */
.toppage-learningsupport-card {
margin: -150px auto 0; /* PCでは大胆に重ねる */
padding: 80px 60px;
}
/* タイトルサイズ */
.toppage-learningsupport-title-ja {
font-size: 2rem;
margin-bottom: 20px;
}
/* 本文サイズと改行 */
.toppage-learningsupport-text {
font-size: 1.1rem;
}
.toppage-learningsupport-br {
display: block; /* PCでは指定位置で改行 */
}
}
/****** プラスワンの教育をオーダーメイドでエリア ここまで ******/
/****** よくある質問エリア ここから ******/
/* ==========================================
FAQ セクション CSS
========================================== */
/* --- 変数定義 --- */
:root {
--toppage-faq-color-orange: #f6b039; /* 受講者向け */
--toppage-faq-color-green: #a4c521; /* 保護者向け */
--toppage-faq-color-blue: #00aeb9; /* 関係者向け */
--toppage-faq-bg-question: #ffeec9; /* 質問の背景(薄いオレンジ) */
--toppage-faq-text-main: #5d4037; /* テキスト色 */
--toppage-faq-bg-main-orange: #f6b039;
--toppage-faq-bg-main-green: #a4c521;
--toppage-faq-bg-main-blue: #00aeb9;
}
.toppage-faq-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 60px 20px;
box-sizing: border-box;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}
/* --- ヘッダー --- */
.toppage-faq-header {
text-align: center;
margin-bottom: 40px;
}
.toppage-faq-title-ja {
color: #00a79d; /* 既存デザインに合わせた色 */
font-size: 1.8rem;
margin: 0;
font-weight: bold;
}
.toppage-faq-title-en {
color: #8d6e63;
font-size: 1rem;
font-weight: bold;
margin: 5px 0 10px;
text-transform: uppercase;
}
.toppage-faq-border-line {
display: block;
width: 40px;
height: 2px;
background-color: #d7ccc8;
margin: 0 auto;
}
/* --- タブナビゲーション --- */
.toppage-faq-tabs {
display: flex;
justify-content: center;
gap: 10px; /* タブ同士の間隔 */
margin-bottom: -10px; /* コンテンツと少し重ねるための調整 */
flex-wrap: wrap; /* スマホで折り返し */
position: relative;
z-index: 2;
}
.toppage-faq-tab-btn {
padding: 12px 30px;
border-radius: 30px;
border: none;
color: #fff;
font-weight: bold;
font-size: 0.95rem;
cursor: pointer;
transition: opacity 0.3s;
position: relative;
}
.toppage-faq-tab-btn:hover {
opacity: 0.8;
}
/* 各タブの色 */
.toppage-faq-tab-btn[data-color="orange"] { background-color: var(--toppage-faq-color-orange); }
.toppage-faq-tab-btn[data-color="green"] { background-color: var(--toppage-faq-color-green); }
.toppage-faq-tab-btn[data-color="blue"] { background-color: var(--toppage-faq-color-blue); }
/* アクティブなタブの三角形 */
.toppage-faq-tab-btn.is-active::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 10px 10px 0 10px;
/* 色はJSで制御、または個別指定 */
border-color: transparent transparent transparent transparent;
}
.toppage-faq-tab-btn.is-active[data-color="orange"]::after { border-top-color: var(--toppage-faq-color-orange); }
.toppage-faq-tab-btn.is-active[data-color="green"]::after { border-top-color: var(--toppage-faq-color-green); }
.toppage-faq-tab-btn.is-active[data-color="blue"]::after { border-top-color: var(--toppage-faq-color-blue); }
/* --- コンテンツエリア（大きな色付き背景） --- */
.toppage-faq-content-wrapper {
border-radius: 20px;
padding: 40px 20px;
min-height: 300px;
transition: background-color 0.3s ease;
position: relative;
z-index: 1;
}
/* ラッパーの背景色切り替え */
.toppage-faq-content-wrapper.is-orange { background-color: var(--toppage-faq-bg-main-orange); }
.toppage-faq-content-wrapper.is-green { background-color: var(--toppage-faq-bg-main-green); }
.toppage-faq-content-wrapper.is-blue { background-color: var(--toppage-faq-bg-main-blue); }
/* --- パネル切り替え --- */
.toppage-faq-panel {
display: none; /* 非表示 */
animation: fadeIn 0.5s ease;
}
.toppage-faq-panel.is-show {
display: block; /* 表示 */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Q&A アイテム --- */
.toppage-faq-item {
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
}
.toppage-faq-item:last-child {
margin-bottom: 0;
}
/* 質問エリア */
.toppage-faq-question {
background-color: var(--toppage-faq-bg-question);
padding: 15px 20px;
display: flex;
align-items: center;
gap: 15px;
}
.toppage-faq-icon-q {
background-color: var(--toppage-faq-color-orange); /* アイコンは常にオレンジ系で統一、あるいは可変も可 */
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}
.toppage-faq-q-text {
margin: 0;
font-weight: bold;
color: var(--toppage-faq-text-main);
font-size: 1rem;
}
/* 回答エリア */
.toppage-faq-answer {
background-color: #fff;
padding: 20px 20px 20px 65px; /* Qアイコンの下あたりからテキスト開始 */
}
.toppage-faq-a-text {
margin: 0;
color: var(--toppage-faq-text-main);
line-height: 1.6;
font-size: 0.95rem;
font-weight: bold;
}
/* --- レスポンシブ対応 --- */
@media (max-width: 767px) {
.toppage-faq-answer {
padding: 20px; /* スマホではパディングを詰める */
}
.toppage-faq-tabs {
flex-direction: column; /* スマホではボタンを縦並び */
align-items: stretch;
width: 80%;
margin: 0 auto 20px;
}
.toppage-faq-tab-btn.is-active::after {
display: none; /* 縦並びの時は三角形を消す */
}
}
/****** よくある質問エリア ここまで ******/
/****** 採用メッセージエリア ここから ******/
/* ==========================================
採用メッセージセクション
========================================== */
/* --- 変数定義 --- */
:root {
--toppage-recruitmessage-bg-green: #5ec8ba; /* 背景の鮮やかなミントグリーン */
--toppage-recruitmessage-text-black: #333;
--toppage-recruitmessage-text-gray: #555;
}
/* --- セクション全体 --- */
.toppage-recruitmessage-section {
width: 100%;
/* 背景エリアの高さを確保するための余白 */
padding-bottom: 60px;
overflow: hidden; /* 横スクロール防止 */
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* 緑色の背景シェイプ */
.toppage-recruitmessage-bg-shape {
background: linear-gradient(180deg, var(--toppage-recruitmessage-bg-green) 0%, rgba(94, 200, 186, 0.1) 100%);
width: 100%;
border-radius: 80px 0 0 0; /* 左上を丸く */
padding: 60px 0 80px;
position: relative;
}
.toppage-recruitmessage-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* コンテンツ配置（左右レイアウト） */
.toppage-recruitmessage-content {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 40px;
position: relative;
}
/* --- 左側：テキストエリア --- */
.toppage-recruitmessage-text-area {
width: 100%;
position: relative;
z-index: 1;
}
/* 縦書きタイトル */
.toppage-recruitmessage-vertical-title {
writing-mode: vertical-rl; /* 縦書き設定 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 1.6rem;
line-height: 2.5;
letter-spacing: 0.1em;
color: var(--toppage-recruitmessage-text-black);
height: 300px; /* 縦書きの高さを確保 */
margin: 0 0 30px 20px; /* 配置調整 */
}
/* 装飾（手紙イラスト）エリア */
.toppage-recruitmessage-decoration {
width: 100px;
height: auto;
margin: -50px 0 30px 40px; /* タイトルと本文の間に配置 */
}
.toppage-recruitmessage-deco-img {
width: 250%;
height: auto;
display: block;
/* 画像がない場合の仮スタイル（本番画像が入れば削除可） */
min-height: 50px;
/* border: 1px dashed rgba(255,255,255,0.5); */
}
@media (max-width: 760px) {
.toppage-recruitmessage-deco-img {
margin: -150px 0 -50px 0;
}
.toppage-recruitmessage-text-area {
text-align: center;
}
}
/* 本文 */
.toppage-recruitmessage-desc {
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
font-size: 0.95rem;
line-height: 1.9;
color: var(--toppage-recruitmessage-text-black);
margin-left: 10px;
}
/* --- 右側：画像エリア --- */
.toppage-recruitmessage-image-area {
width: 100%;
position: relative;
z-index: 1;
}
.toppage-recruitmessage-main-img {
width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
display: block;
}
/* --- レスポンシブ対応 (PC・タブレット) --- */
@media (min-width: 900px) {
.toppage-recruitmessage-bg-shape {
padding: 80px 0 120px;
}
.toppage-recruitmessage-content {
flex-direction: row; /* 横並び */
align-items: center;
justify-content: space-between;
}
/* 左側テキスト */
.toppage-recruitmessage-text-area {
width: 45%;
padding-left: 40px; /* 左端の余白 */
}
.toppage-recruitmessage-vertical-title {
font-size: 2rem;
height: 350px;
margin-bottom: 0;
}
/* イラストの位置調整（PC） */
.toppage-recruitmessage-decoration {
position: absolute;
top: 100px;
left: 0px;
width: 150px;
margin: 0;
}
/* 画像エリア */
.toppage-recruitmessage-image-area {
width: 80%;
/* 画像をコンテナからはみ出させる演出 */
margin-right: -300px;
}
.toppage-recruitmessage-main-img {
max-width: 600px;
}
}
/****** 採用メッセージエリア ここまで ******/
/****** 採用リンクエリア ここから ******/
/* ==========================================
採用情報リンクエリア (Recruit Links)
========================================== */
/* --- 変数定義（このセクション用） --- */
:root {
--toppage-recruitlinks-teal: #00a79d; /* タイトルやアイコンの色 */
--toppage-recruitlinks-brown: #8d6e63; /* 英語タイトルの色 */
--toppage-recruitlinks-text-gray: #a48578; /* 「詳しくみる」の色 */
}
/* --- セクション全体 --- */
.toppage-recruitlinks-section {
width: 100%;
/* 背景色は上のセクションから続くように透明、もしくは薄いグラデーションの続きを設定 */
/* ここでは馴染むように透明にしています */
background-color: transparent;
padding: 0 0 80px; /* 上の余白は前のセクションとの兼ね合いで調整 */
}
.toppage-recruitlinks-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* --- ヘッダー --- */
.toppage-recruitlinks-header {
text-align: center;
margin-bottom: 50px;
}
.toppage-recruitlinks-title-ja {
color: var(--toppage-recruitlinks-teal);
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
font-size: 1.8rem;
margin: 0;
font-weight: bold;
}
.toppage-recruitlinks-title-en {
color: var(--toppage-recruitlinks-brown);
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 0.05em;
margin: 5px 0 10px;
text-transform: uppercase;
}
.toppage-recruitlinks-border {
display: block;
width: 40px;
height: 2px;
background-color: #d7ccc8; /* 薄い茶色の線 */
margin: 0 auto;
}
/* --- 4つのカードグリッド --- */
.toppage-recruitlinks-grid {
display: grid;
gap: 20px;
/* スマホ：2列で見やすく */
grid-template-columns: repeat(2, 1fr);
}
/* --- カード本体 --- */
.toppage-recruitlinks-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* ふんわりした影 */
text-decoration: none;
color: #333;
display: block;
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
overflow: hidden;
}
/* ホバー時の動き */
@media (hover: hover) {
.toppage-recruitlinks-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
background-color: #e0f2f1;
}
}
.toppage-recruitlinks-card-inner {
padding: 30px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
box-sizing: border-box;
}
/* カード内タイトル */
.toppage-recruitlinks-card-title {
color: var(--toppage-recruitlinks-teal);
font-weight: bold;
font-size: 20px;
margin: 0 0 20px 0;
}
/* アイコンボックス */
.toppage-recruitlinks-icon-box {
width: 50px;
height: 50px;
margin-bottom: 20px;
/* 必要ならここに色指定を入れる */
}
.toppage-recruitlinks-icon {
width: 130%;
height: 130%;
object-fit: contain;
}
/* 「詳しくみる」テキスト */
.toppage-recruitlinks-arrow {
font-size: 17px;
color: var(--toppage-recruitlinks-text-gray);
font-weight: bold;
margin: 0;
}
/* --- PC対応 --- */
@media (min-width: 768px) {
.toppage-recruitlinks-grid {
/* PC：4列 */
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.toppage-recruitlinks-card-inner {
padding: 40px 20px;
}
}
/****** 採用リンクエリア ここまで ******/
/****** 採用応募フォームエリア ここから ******/
/* ==========================================
採用応募フォームリンクセクション
========================================== */
/* --- 変数定義（このセクション用） --- */
:root {
--toppage-recruitform-orange: #f6b039; /* ボタンのオレンジ色 */
--toppage-recruitform-text-black: #333;
}
/* --- セクション全体 --- */
.toppage-recruitform-section {
width: 100%;
padding: 60px 0 80px; /* 上下の余白 */
background-color: transparent; /* 背景は親要素に依存 */
}
.toppage-recruitform-container {
max-width: 800px; /* 画像の幅に合わせて調整 */
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
}
/* --- 画像とテキスト帯のエリア --- */
.toppage-recruitform-image-area {
position: relative; /* テキスト帯の配置基準 */
width: 100%;
border-radius: 20px; /* 画像の角丸 */
overflow: hidden; /* 角丸を適用 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* ふんわりした影 */
}
.toppage-recruitform-image {
width: 100%;
height: auto;
display: block;
}
.toppage-recruitform-image-icon {
width: 30px;
height: auto;
}
/* 写真の上に重なるテキスト帯 */
.toppage-recruitform-text-banner {
position: absolute;
top: 80%;
left: 0;
width: 100%;
transform: translateY(-50%); /* 上下中央寄せ */
background-color: rgba(255, 255, 255, 0.85); /* 半透明の白背景 */
padding: 15px 0;
text-align: center;
}
.toppage-recruitform-banner-text {
margin: 0;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; /* 明朝体 */
font-size: 1.2rem;
font-weight: bold;
color: var(--toppage-recruitform-text-black);
letter-spacing: 0.05em;
}
/* --- ボタンエリア --- */
.toppage-recruitform-btn-wrapper {
position: relative;
z-index: 2; /* 画像より手前に表示 */
margin-top: -25px; /* 画像の下に半分重ねるためのネガティブマージン */
}
/* ボタン本体 */
.toppage-recruitform-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: var(--toppage-recruitform-orange);
color: #fff;
text-decoration: none;
padding: 15px 40px;
border-radius: 50px;
font-weight: bold;
box-shadow: 0 5px 15px rgba(246, 176, 57, 0.4); /* オレンジ色の影 */
transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}
/* ホバー時の動き */
@media (hover: hover) {
.toppage-recruitform-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(246, 176, 57, 0.6);
opacity: 0.9;
}
}
.toppage-recruitform-btn-text {
font-size: 1rem;
}
.toppage-recruitform-btn-icon {
font-size: 1.2rem;
transform: rotate(-45deg); /* 右上向きの矢印 */
}
/* --- レスポンシブ対応 (PC) --- */
@media (min-width: 768px) {
.toppage-recruitform-banner-text {
font-size: 2.5rem; /* PCでは文字を大きく */
padding: 5px 0;
}
.toppage-recruitform-btn {
padding: 18px 60px; /* PCではボタンを大きく */
}
.toppage-recruitform-btn-text {
font-size: 1.1rem;
}
}
/****** 採用応募フォームエリア ここまで ******/
/****** ニュースエリア ここから ******/
/* ベーススタイル */
.top-news-container {
background-color: #e8f5e9;
padding: 2rem 1rem;
border-radius: 10px;
max-width: 1000px;
margin: 0 auto;
}
/* ヘッダー部分 */
.top-news-header {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 2rem;
padding-left: 1rem;
}
.top-news-heading {
font-size: 2.5rem;
font-weight: bold;
color: #388e3c;
margin: 0;
}
.top-news-subheading {
font-size: 1.2rem;
color: #388e3c;
margin: 0.5rem 0 0;
}
.top-news-topics-link {
display: flex;
align-items: center;
color: #388e3c;
text-decoration: none;
margin-top: 1rem;
transition: opacity 0.3s ease;
}
.top-news-topics-link:hover {
opacity: 0.7;
}
.top-news-topics-text {
font-size: 1rem;
font-weight: bold;
margin-right: 0.5rem;
}
.top-news-topics-arrow {
width: 1.5rem;
height: 1.5rem;
}
/* 記事部分 */
.top-news-articles {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.top-news-article {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.top-news-article:hover {
transform: translateY(-5px);
}
.top-news-article-image-container {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
.top-news-article-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.top-news-article-content {
padding: 1rem;
}
.top-news-article-date {
font-size: 0.875rem;
color: #757575;
margin: 0 0 0.5rem;
}
.top-news-article-title {
font-size: 1rem;
font-weight: bold;
color: #333;
margin: 0;
}
/*
--------------------
レスポンシブデザイン
--------------------
*/
/* タブレット・PC向け */
@media (min-width: 768px) {
.top-news-container {
padding: 3rem 2rem;
display: flex;
justify-content: space-between;
}
.top-news-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-basis: 30%;
margin-bottom: 0;
padding-left: 0;
position: relative;
}
.top-news-header::before {
content: '';
position: absolute;
top: -2rem;
bottom: -2rem;
left: -2rem;
width: 200px; /* 画像の左側の緑の領域の幅を調整 */
background-color: #388e3c;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
z-index: -1;
}
.top-news-heading, .top-news-subheading {
color: white;
}
.top-news-topics-link {
background-color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
}
.top-news-topics-link, .top-news-topics-arrow, .top-news-topics-text {
color: #388e3c;
fill: #388e3c;
}
.top-news-articles {
flex-direction: row;
flex-basis: 65%;
}
.top-news-article {
width: 50%;
}
}
/****** ニュースエリア ここまで ******/
/****** メッセージエリア ここから ******/
.top-message-wrapper {
background: linear-gradient(135deg, #1a7f2a 0%, #2f9e44 100%);
color: #fff;
padding: 2rem 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.top-message-inner {
max-width: 800px;
text-align: center;
}
.top-message-title {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.top-message-text {
font-size: 0.95rem;
line-height: 1.9;
text-align: left;
}
/* ====== レスポンシブ対応 ====== */
@media (min-width: 768px) {
.top-message-title {
font-size: 1.6rem;
}
.top-message-text {
font-size: 1.05rem;
}
.top-message-wrapper {
padding: 3rem 2rem;
}
}
@media (min-width: 1024px) {
.top-message-title {
font-size: 1.8rem;
}
.top-message-text {
font-size: 1.1rem;
}
}
/****** メッセージエリア ここまで ******/
/****** 当社の強みエリア ここから ******/
/* =============================================
新しいデザインテスト
============================================= */
/* セクション全体のラッパー */
.top-feature02-wrapper {
background-color: #078A24; /* 背景の濃い緑 */
padding: 2rem 1.5rem;
margin: 2rem auto;
max-width: 1100px;
}
/* コンテンツエリア（写真とテキスト） */
.top-feature02-content {
display: flex;
/* スマホでは縦積み（写真が上） */
flex-direction: column;
gap: 1.5rem;
}
.top-feature02-image-wrapper {
width: 100%;
}
.top-feature02-image {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}
.top-feature02-text-wrapper {
color: #ffffff;
position: relative;
/* ▼▼▼ 修正箇所 ▼▼▼ */
padding-left: 60px; /* 縦線がなくなったため、余白を調整 */
}
/* 背景の数字 */
.top-feature02-number {
position: absolute;
top: 0;
left: 0; /* 左端に配置 */
font-size: 4rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.1);
line-height: 1;
z-index: 0;
}
/* テキストコンテンツ */
.top-feature02-title {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.5;
margin: 0 0 1rem 0;
position: relative; /* 数字の上に表示 */
z-index: 1;
}
.top-feature02-description {
font-size: 0.95rem;
line-height: 1.8;
margin: 0;
position: relative; /* 数字の上に表示 */
z-index: 1;
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.top-feature02-wrapper {
padding: 3rem;
}
.top-feature02-content {
flex-direction: row; /* 横並びに変更 */
align-items: center; /* 上下中央揃え */
gap: 2.5rem;
}
/* PCではテキストを左に配置（HTMLの記述順をCSSで変更） */
.top-feature02-text-wrapper {
order: -1;
/* ▼▼▼ 修正箇所 ▼▼▼ */
padding-left: 80px; /* PCでも同様に余白を調整 */
}
.top-feature02-number {
left: 0; /* PCでも左端に配置 */
font-size: 5rem;
}
/* 各要素の比率を調整 */
.top-feature02-text-wrapper {
flex: 1.2;
}
.top-feature02-image-wrapper {
flex: 1;
}
}
/* セクション全体のラッパー */
.top-feature02-02-wrapper {
background-color: #078A24; /* 背景の濃い緑 */
padding: 2rem 1.5rem;
margin: 2rem auto;
max-width: 1100px;
}
/* コンテンツエリア（写真とテキスト） */
.top-feature02-02-content {
display: flex;
/* スマホでは縦積み（写真が上） */
flex-direction: column;
gap: 1.5rem;
}
.top-feature02-02-image-wrapper {
width: 100%;
}
.top-feature02-02-image {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}
.top-feature02-02-text-wrapper {
color: #ffffff;
position: relative;
padding-left: 60px; /* 数字を置くスペースを確保 */
}
/* 背景の数字 */
.top-feature02-02-number {
position: absolute;
top: 0;
left: 0; /* 左端に配置 */
font-size: 4rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.1);
line-height: 1;
z-index: 0;
}
/* テキストコンテンツ */
.top-feature02-02-title {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.5;
margin: 0 0 1rem 0;
position: relative; /* 数字の上に表示 */
z-index: 1;
}
.top-feature02-02-description {
font-size: 0.95rem;
line-height: 1.8;
margin: 0;
position: relative; /* 数字の上に表示 */
z-index: 1;
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.top-feature02-02-wrapper {
padding: 3rem;
}
.top-feature02-02-content {
flex-direction: row; /* 横並びに変更 */
align-items: center; /* 上下中央揃え */
gap: 2.5rem;
}
.top-feature02-02-text-wrapper {
padding-left: 80px;
}
.top-feature02-02-number {
left: 0; /* PCでも左端に配置 */
font-size: 5rem;
}
/* 各要素の比率を調整 */
.top-feature02-02-image-wrapper { /* ←写真エリア */
flex: 1;
}
.top-feature02-02-text-wrapper { /* ←テキストエリア */
flex: 1.2;
}
}
/****** 当社の強みエリア ここまで ******/
/****** 施工サービスエリア ここから ******/
.top-service-container {
background: #eef9e9;
border-radius: 20px;
padding: 2rem 1.5rem;
max-width: 1100px;
margin: 2rem auto;
}
.top-service-header {
text-align: left;
}
.top-service-title {
font-size: 1.8rem;
font-weight: bold;
color: #2c8c3c;
margin: 0;
}
.top-service-subtitle {
font-size: 0.9rem;
color: #2c8c3c;
margin: 0.2rem 0 0;
}
.top-service-lead {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #145c24;
margin: 2rem 0;
}
.top-service-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
max-width: 1000px;
margin: 0 auto;
}
.top-service-item {
background: repeating-linear-gradient(
90deg,
#a8d8a2,
#a8d8a2 10px,
#98c98e 10px,
#98c98e 20px
);
border-radius: 8px;
padding: 2.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
text-decoration: none;
/* ▼▼▼ 修正箇所 ▼▼▼ */
/* 変化を0.3秒かけて滑らかにする */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ▼▼▼ 修正箇所 ▼▼▼ */
/* カーソルが乗ったら少し上に移動し、影を濃くする */
.top-service-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.top-service-text {
color: #fff;
font-size: 1.1rem;
font-weight: bold;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
/* タブレット以上 */
@media (min-width: 600px) {
.top-service-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* PC以上 */
@media (min-width: 1024px) {
.top-service-list {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.top-service-title {
font-size: 2rem;
}
.top-service-lead {
font-size: 1.3rem;
margin: 2.5rem 0;
}
}
/****** 施工サービスエリア ここまで ******/
/****** 施工事例エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.top-casestudy-wrapper {
background-color: #078A24; /* 背景の濃い緑 */
padding: 40px 20px;
color: #ffffff;
}
/* セクションのヘッダー */
.top-casestudy-header {
margin-bottom: 30px;
}
.top-casestudy-main-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
line-height: 1;
}
.top-casestudy-sub-title {
font-size: 1rem;
margin: 8px 0 0;
}
/* カードを配置するグリッド */
.top-casestudy-grid {
display: grid;
/* スマホでは1列で表示 */
grid-template-columns: 1fr;
gap: 30px; /* カード間の余白 */
}
/* 個々のカード */
.top-casestudy-card {
background-color: #e9f5dd; /* カードの薄い緑 */
color: #1c3313; /* カード内のテキスト色 */
border-radius: 40px;
padding: 25px;
}
.top-casestudy-card-header {
border-bottom: 1px solid #a3b996;
padding-bottom: 15px;
margin-bottom: 20px;
}
.top-casestudy-card-title {
font-size: 1.25rem;
font-weight: bold;
margin: 0;
}
.top-casestudy-card-subtitle {
font-size: 1.1rem;
font-weight: bold;
margin: 5px 0 0;
}
/* Before/After 画像エリア */
.top-casestudy-ba-container {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.top-casestudy-ba-item {
flex: 1;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.top-casestudy-ba-label {
position: absolute;
top: 0;
left: 0;
background-color: #0b5321;
color: #ffffff;
padding: 4px 8px;
font-size: 0.8rem;
font-weight: bold;
}
.top-casestudy-ba-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* 詳細情報エリア */
.top-casestudy-details {
margin-bottom: 20px;
}
.top-casestudy-detail-item {
margin: 0 0 8px 0;
font-size: 0.95rem;
}
/* 説明文 */
.top-casestudy-description {
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* フッター（View moreリンク） */
.top-casestudy-footer {
text-align: right;
margin-top: 30px;
}
.top-casestudy-viewmore-link {
color: #ffffff;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
}
.top-casestudy-arrow-icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #ffffff;
border-radius: 50%;
position: relative;
}
.top-casestudy-arrow-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #0b5321;
border-right: 2px solid #0b5321;
transform: translate(-60%, -50%) rotate(45deg);
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 992px) {
.top-casestudy-wrapper {
padding: 60px 40px;
}
/* PCでは2列で表示 */
.top-casestudy-grid {
grid-template-columns: 1fr 1fr;
}
.top-casestudy-card {
padding: 30px;
}
}
/****** 施工事例エリア ここまで ******/
/****** お客様の声エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.top-voice-wrapper {
background-color: #e9f5dd; /* 背景の薄い緑 */
padding: 20px 0 20px 20px; /* 右側の余白はコンテナ側で調整 */
}
/* 白いコンテンツコンテナ */
.top-voice-container {
background-color: #ffffff;
border-top: 15px solid #0b5321; /* 上の濃い緑のボーダー */
border-right: 15px solid #0b5321; /* 右の濃い緑のボーダー */
border-radius: 80px 0 0 0; /* 左上だけ大きく角丸に */
padding: 30px;
}
/* セクションのヘッダー */
.top-voice-header {
margin-bottom: 30px;
}
.top-voice-main-title {
color: #0b5321;
font-size: 2.5rem;
font-weight: bold;
margin: 0;
line-height: 1;
}
.top-voice-sub-title {
color: #0b5321;
font-size: 1rem;
margin: 8px 0 0;
}
/* お客様の声を並べるグリッド */
.top-voice-grid {
display: grid;
/* スマホでは1列で表示 */
grid-template-columns: 1fr;
gap: 30px; /* カード間の余白 */
}
/* 個々のカード */
.top-voice-card {
border: 1px solid #e0e0e0;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
.top-voice-image-wrapper {
width: 100%;
aspect-ratio: 16 / 10; /* 画像の比率を固定 */
}
.top-voice-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像をコンテナに合わせてトリミング */
display: block;
}
.top-voice-content {
padding: 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.top-voice-text {
font-size: 0.95rem;
line-height: 1.7;
margin: 0 0 15px 0;
flex-grow: 1; /* テキストエリアを可能な限り広げる */
}
.top-voice-customer {
text-align: right;
font-size: 0.9rem;
color: #555;
margin: 0;
}
/* フッター（View moreリンク） */
.top-voice-footer {
text-align: right;
margin-top: 30px;
}
.top-voice-viewmore-link {
color: #0b5321;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
}
.top-voice-arrow-icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #0b5321;
border-radius: 50%;
position: relative;
}
.top-voice-arrow-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: translate(-60%, -50%) rotate(45deg);
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 992px) {
.top-voice-wrapper {
padding: 40px 0 40px 40px;
}
.top-voice-container {
padding: 40px;
}
/* PCでは3列で表示 */
.top-voice-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/****** お客様の声エリア ここまで ******/
/****** 新しい施工の流れエリア ここから ******/
/* セクション全体のラッパー */
.top-flow02-wrapper {
padding: 40px 20px;
max-width: 900px;
margin: 2rem auto;
background-color: #ffffff;
}
/* 手順リスト */
.top-flow02-list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* 各手順のアイテム */
.top-flow02-item {
display: grid;
/* スマホでは [番号] [内容] の2列 */
grid-template-columns: auto 1fr;
gap: 0 20px; /* 列間の余白 */
align-items: start;
position: relative; /* 線の基準にする */
}
/* スマホでは左側のタイトルを非表示 */
.top-flow02-item-title {
display: none;
}
/* 番号の中央部分 */
.top-flow02-item-center {
/* この要素は円の位置決めに専念 */
}
/* ▼▼▼ 修正箇所 ▼▼▼ */
/* 縦の接続線 */
.top-flow02-item::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 25px; /* 円の中心 (50px / 2) */
width: 2px;
background-color: #e0e0e0;
z-index: 0;
}
/* 最初の要素の線は、円の中心から下だけ */
.top-flow02-item:first-child::before {
top: 25px; /* 円の中心から開始 */
}
/* 最後の要素の線は、円の中心まで */
.top-flow02-item:last-child::before {
bottom: 25px; /* 円の中心で終了 */
}
/* 番号の円 */
.top-flow02-item-number {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #4caf50;
color: #ffffff;
border-radius: 50%;
font-size: 1.2rem;
font-weight: bold;
position: relative;
z-index: 1; /* 線より手前に表示 */
margin-bottom: 20px; /* 次の項目との間隔 */
}
/* 説明文（スマホではタイトルも兼ねる） */
.top-flow02-item-description {
margin: 0;
padding: 15px 0 0;
font-size: 0.95rem;
line-height: 1.7;
}
/* 説明文の前にタイトルを疑似要素で表示 */
.top-flow02-item-description::before {
content: attr(data-title);
display: block;
font-weight: bold;
margin-bottom: 5px;
font-size: 1.1rem;
color: #4caf50;
}
/* 各アイテムのタイトルを設定 */
.top-flow02-item:nth-child(1) .top-flow02-item-description::before { content: 'お問い合わせ'; }
.top-flow02-item:nth-child(2) .top-flow02-item-description::before { content: '現地調査'; }
.top-flow02-item:nth-child(3) .top-flow02-item-description::before { content: 'お見積もり'; }
.top-flow02-item:nth-child(4) .top-flow02-item-description::before { content: 'ご契約'; }
.top-flow02-item:nth-child(5) .top-flow02-item-description::before { content: '畳製作・張替え'; }
.top-flow02-item:nth-child(6) .top-flow02-item-description::before { content: '納品・敷き込み'; }
.top-flow02-item:nth-child(7) .top-flow02-item-description::before { content: 'アフターケア'; }
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
/* PCではリストアイテムを3列グリッドに */
.top-flow02-item {
grid-template-columns: 1fr auto 1fr;
gap: 0 40px; /* 列間の余白を広げる */
align-items: center;
}
.top-flow02-item-number {
margin-bottom: 0;
}
/* ▼▼▼ 修正箇所 ▼▼▼ */
/* PCでの線の位置を再計算 */
.top-flow02-item::before {
left: 50%;
transform: translateX(-50%);
}
.top-flow02-item:first-child::before {
top: 50%;
}
.top-flow02-item:last-child::before {
bottom: 50%;
}
/* PCでは左側のタイトルを表示 */
.top-flow02-item-title {
display: block;
text-align: right;
font-size: 1.1rem;
font-weight: bold;
color: #4caf50;
}
.top-flow02-item-description {
padding: 30px 0; /* 上下の余白を調整 */
}
/* PCでは説明文の前の疑似要素タイトルを非表示に */
.top-flow02-item-description::before {
display: none;
}
}
/****** 新しい施工の流れエリア ここまで ******/
/****** 会社案内エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.top-company-wrapper {
background-color: #e9f5dd; /* 背景の薄い緑 */
color: #0b5321; /* 基本のテキスト色 */
padding: 40px 20px;
}
/* セクションのヘッダー */
.top-company-header {
margin-bottom: 25px;
}
.top-company-main-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
line-height: 1;
}
.top-company-sub-title {
font-size: 1rem;
margin: 8px 0 0;
}
/* 導入文 */
.top-company-intro {
font-size: 0.95rem;
line-height: 1.8;
margin: 0 0 30px 0;
}
/* 会社情報リスト */
.top-company-info-list {
margin: 0;
padding: 0;
border-top: 1px solid #b6d7a8; /* 上の境界線 */
}
/* 各情報行（スマホでは縦並び） */
.top-company-info-row {
padding: 15px 0;
border-bottom: 1px solid #b6d7a8; /* 下の境界線 */
}
.top-company-info-label {
font-weight: bold;
margin-bottom: 8px;
font-size: 0.9rem;
}
.top-company-info-data {
margin: 0; /* dd要素のデフォルトマージンをリセット */
font-size: 1rem;
line-height: 1.6;
}
/* リンクのスタイル */
.top-company-info-data a {
color: #0b5321;
text-decoration: underline;
transition: opacity 0.2s ease;
}
.top-company-info-data a:hover {
opacity: 0.7;
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.top-company-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 60px 40px;
}
/* PCでは各情報行を2列のグリッドで表示 */
.top-company-info-row {
display: grid;
grid-template-columns: 200px 1fr; /* 左のラベル列の幅を固定 */
gap: 20px; /* 列間の余白 */
align-items: center; /* 上下中央揃え */
padding: 20px 0;
}
.top-company-info-label {
margin-bottom: 0; /* スマホ用のマージンをリセット */
font-size: 1rem;
}
}
/****** 会社案内エリア ここまで ******/
/****** 代表メッセージエリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.top-greeting-wrapper {
padding: 40px 20px;
max-width: 1000px;
margin: 0 auto;
}
/* セクションのヘッダー */
.top-greeting-header {
margin-bottom: 30px;
}
.top-greeting-main-title {
color: #0b5321;
font-size: 2.5rem;
font-weight: bold;
margin: 0;
line-height: 1;
}
.top-greeting-sub-title {
color: #0b5321;
font-size: 1rem;
margin: 8px 0 0;
}
/* コンテンツエリア（イラストとテキスト） */
.top-greeting-content {
display: flex;
/* スマホでは縦に並べる */
flex-direction: column;
gap: 30px;
}
.top-greeting-image-wrapper {
text-align: center; /* スマホで画像を中央寄せ */
}
.top-greeting-image {
max-width: 100%;
height: auto;
max-height: 280px; /* 画像が大きくなりすぎないように制限 */
}
.top-greeting-text {
color: #333;
font-size: 0.95rem;
line-height: 1.8;
}
.top-greeting-text p {
margin: 0 0 1.5em 0;
}
.top-greeting-text p:last-child {
margin-bottom: 0;
}
.top-greeting-link-wrapper {
margin-top: 25px;
text-align: right;
}
.top-greeting-viewmore-link {
color: #0b5321;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
}
.top-greeting-arrow-icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #0b5321;
border-radius: 50%;
position: relative;
}
.top-greeting-arrow-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
transform: translate(-60%, -50%) rotate(45deg);
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.top-greeting-wrapper {
padding: 60px 40px;
}
/* PCでは横に並べる */
.top-greeting-content {
flex-direction: row;
align-items: center; /* 上下中央揃え */
gap: 40px;
}
.top-greeting-image-wrapper {
flex: 1; /* 比率を1に設定 */
min-width: 300px;
}
.top-greeting-text-wrapper {
flex: 1.5; /* テキスト側の比率を少し大きくする */
}
}
/****** 代表メッセージエリア ここまで ******/
/****** よくある質問エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.top-faq-wrapper {
background-color: #078A24; /* 背景の濃い緑 */
color: #ffffff;
padding: 40px 20px;
}
/* セクションのヘッダー */
.top-faq-header {
margin-bottom: 30px;
}
.top-faq-main-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0;
line-height: 1;
}
.top-faq-sub-title {
font-size: 1rem;
margin: 8px 0 0;
}
/* アコーディオン全体のコンテナ */
.top-faq-accordion {
display: flex;
flex-direction: column;
gap: 15px; /* 各質問間の余白 */
max-width: 800px;
margin: 0 auto;
}
/* 各質問アイテム */
.top-faq-item {
background-color: #ffffff;
color: #333;
border-radius: 20px;
padding: 15px 20px;
}
/* 質問部分（クリックする部分） */
.top-faq-question {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
list-style: none; /* デフォルトの三角形を非表示 */
}
.top-faq-question::-webkit-details-marker {
display: none; /* Safari用の非表示設定 */
}
.top-faq-q-icon {
color: #0b5321;
font-size: 1.2rem;
font-weight: bold;
margin-right: 10px;
}
.top-faq-question-text {
flex-grow: 1; /* テキストエリアを広げる */
font-weight: bold;
}
/* 開閉アイコン（＋/－） */
.top-faq-question::after {
content: '+';
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
background-color: #0b5321;
color: #ffffff;
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0; /* アイコンが縮まないようにする */
margin-left: 15px;
}
/* 開いた状態のアイコン */
.top-faq-item[open] > .top-faq-question::after {
content: '−';
background-color: #888;
}
/* 回答部分 */
.top-faq-answer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e0e0e0;
}
.top-faq-answer-text {
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
}
/* フッター（View moreリンク） */
.top-faq-footer {
text-align: right;
margin-top: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.top-faq-viewmore-link {
color: #ffffff;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
}
.top-faq-arrow-icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #ffffff;
border-radius: 50%;
position: relative;
}
.top-faq-arrow-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
border-top: 2px solid #0b5321;
border-right: 2px solid #0b5321;
transform: translate(-60%, -50%) rotate(45deg);
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.top-faq-wrapper {
padding: 60px 40px;
}
.top-faq-item {
padding: 20px 25px;
}
.top-faq-question-text {
font-size: 1.1rem;
}
}
/****** よくある質問エリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// ホームページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お知らせ一覧ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.newsall-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.newsall-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.newsall-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.newsall-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.newsall-title-heading::before,
.newsall-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.newsall-title-wrapper {
min-height: 300px;
}
.newsall-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.newsall-title-heading {
font-size: 2.2rem;
}
.newsall-title-heading::before,
.newsall-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** 記事一覧エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.news-area-wrapper {
position: relative;
background-color: #0b5321; /* 一番下の濃い緑 */
padding: 2rem 0;
overflow: hidden;
}
/* 背景の明るい緑の曲線を疑似要素で作成 */
.news-area-wrapper::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
background-color: #078A24;
z-index: 0;
}
/* 内側のコンテンツコンテナ */
.news-area-container {
position: relative;
z-index: 1;
background-color: #e8f5e9;
padding: 2rem 1.5rem;
border-radius: 40px;
margin: 0 1rem;
}
/* ヘッダー */
.news-area-header {
margin-bottom: 2rem;
}
.news-area-main-title {
font-size: 2.5rem;
font-weight: bold;
color: #388e3c;
margin: 0;
}
.news-area-sub-title {
font-size: 1.2rem;
color: #388e3c;
margin: 0.5rem 0 0;
}
/* 記事グリッド */
.news-area-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 1.5rem;
}
/* 記事カード */
.news-area-article {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
text-decoration: none;
}
.news-area-article:hover {
transform: translateY(-5px);
}
.news-area-image-wrapper {
position: relative; /* 疑似要素の基準にする */
width: 100%;
aspect-ratio: 16 / 9; /* 画像の縦横比を調整 */
margin-bottom: 2rem;
overflow: hidden; /* 画像の丸みを表現するため */
border-radius: 15 15 0 0px; /* 角を丸くする */
}
.news-area-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像をはみ出す部分を切り抜いて表示 */
display: block;
}
.news-area-content {
padding: 1rem;
flex-grow: 1;
}
.news-area-date {
font-size: 0.875rem;
color: #757575;
margin: 0 0 0.5rem;
}
.news-area-title {
font-size: 1rem;
font-weight: bold;
color: #333;
margin: 0;
line-height: 1.5;
/* ▼▼▼ タイトルが2行を超えたら省略されるように追加 ▼▼▼ */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 2行で省略 */
}
/* ページネーション */
.news-area-pagination {
padding: 3rem 0 1rem;
}
.news-area-page-list {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.news-area-page-link {
display: flex;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #ffffff;
border: 2px solid #388e3c;
color: #388e3c;
text-decoration: none;
font-weight: bold;
transition: background-color 0.2s ease, color 0.2s ease;
}
.news-area-page-link:hover {
background-color: #f5fbf5;
}
.news-area-page-link--active {
background-color: #388e3c;
color: #ffffff;
border-color: #388e3c;
cursor: default;
}
.news-area-page-ellipsis {
color: #388e3c;
font-weight: bold;
padding: 0 0.5rem;
display: flex;
align-items: center;
height: 36px;
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 992px) {
.news-area-container {
display: grid;
grid-template-columns: 250px 1fr; /* 左にヘッダー、右に記事グリッド */
gap: 2rem;
align-items: start; /* ヘッダーを上揃えに */
padding: 2.5rem;
max-width: 1200px;
margin: 0 auto;
}
.news-area-header {
margin-bottom: 0;
}
.news-area-grid {
grid-template-columns: 1fr 1fr; /* PCでは2列 */
}
}
/****** 記事一覧エリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// お知らせ一覧ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お知らせ詳細ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.newsall-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.newsall-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.newsall-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.newsall-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.newsall-title-heading::before,
.newsall-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.newsall-title-wrapper {
min-height: 300px;
}
.newsall-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.newsall-title-heading {
font-size: 2.2rem;
}
.newsall-title-heading::before,
.newsall-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** 記事詳細エリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* 記事全体を囲むラッパー */
.news-detail-wrapper {
padding: 2rem 1rem;
background-color: #078924;
}
/* 薄い緑のコンテンツコンテナ */
.news-detail-container {
background-color: #e8f5e9;
padding: 3rem 2rem; /* ▼▼▼ 余白を広げました ▼▼▼ */
border-radius: 40px;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* 日付 */
.news-detail-date {
font-size: 0.9rem;
color: #555;
margin: 0 0 1rem 0;
}
/* メインタイトル */
.news-detail-title {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.6;
color: #078924;
margin: 0 0 2rem 0;
}
/* 画像 */
.news-detail-image-wrapper {
width: 100%;
aspect-ratio: 16 / 10;
margin-bottom: 2rem;
border-radius: 15px;
overflow: hidden;
}
.news-detail-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 本文エリア */
.news-detail-content {
color: #078924;
line-height: 1.8;
margin-bottom: 2rem;
}
.news-detail-content p {
margin: 0 0 1.5em 0;
}
/* 連絡先エリア */
.news-detail-contact p {
color: #0b5321;
font-weight: bold;
line-height: 1.7;
margin: 0;
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.news-detail-wrapper {
padding: 3rem 1.5rem;
}
.news-detail-container {
padding: 4rem; /* ▼▼▼ 余白を広げました ▼▼▼ */
}
.news-detail-title {
font-size: 2rem;
}
}
/****** 記事詳細エリア ここまで ******/
/****** 最新のお知らせエリア ここから ******/
/* =============================================
スマホファーストの基本スタイル
============================================= */
/* セクション全体のラッパー */
.news-newtopics-wrapper {
background-color: #078924; /* 濃い緑 */
padding: 2rem 1rem;
}
/* 内側のコンテンツコンテナ */
.news-newtopics-container {
background-color: #e8f5e9;
padding: 2rem 1.5rem;
border-radius: 40px;
max-width: 800px;
margin: 0 auto;
/* ▼▼▼ この一行で立体的に見せます ▼▼▼ */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* ヘッダー */
.news-newtopics-header {
text-align: center;
margin-bottom: 2rem;
}
.news-newtopics-main-title {
font-size: 1.8rem;
font-weight: bold;
color: #078924;
margin: 0;
}
/* 記事グリッド */
.news-newtopics-grid {
display: grid;
/* スマホでは1列 */
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* 記事カード */
.news-newtopics-article {
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.news-newtopics-article:hover {
transform: translateY(-5px);
}
.news-newtopics-image {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
border-radius: 15px 15px 0 0; /* 上の角だけ丸める */
}
.news-newtopics-content {
padding: 1rem;
flex-grow: 1;
}
.news-newtopics-date {
font-size: 0.8rem;
color: #757575;
margin: 0 0 0.5rem;
}
.news-newtopics-title {
font-size: 0.9rem;
font-weight: bold;
color: #333;
line-height: 1.6;
margin: 0;
}
/* フッター */
.news-newtopics-footer {
text-align: right;
margin-top: 2rem;
}
.news-newtopics-viewmore-link {
color: #078924;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
}
.news-newtopics-arrow-icon {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background-color: #078924;
color: #ffffff;
border-radius: 50%;
}
.news-newtopics-arrow-icon::before {
content: '→'; /* 簡易的な矢印 */
font-size: 1.2rem;
line-height: 1;
}
/* =============================================
タブレット用のスタイル
============================================= */
@media (min-width: 768px) {
.news-newtopics-container {
padding: 3rem;
}
.news-newtopics-grid {
/* タブレットでは2列 */
grid-template-columns: 1fr 1fr;
}
}
/* =============================================
PC用のスタイル
============================================= */
@media (min-width: 1024px) {
.news-newtopics-grid {
/* PCでは3列 */
grid-template-columns: 1fr 1fr 1fr;
}
.news-newtopics-main-title {
font-size: 2rem;
}
}
/****** 最新のお知らせエリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// お知らせ詳細ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 私たちについてページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.aboutus-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.aboutus-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.aboutus-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.aboutus-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.aboutus-title-heading::before,
.aboutus-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.aboutus-title-wrapper {
min-height: 300px;
}
.aboutus-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.aboutus-title-heading {
font-size: 2.2rem;
}
.aboutus-title-heading::before,
.aboutus-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** メッセージエリア ここから ******/
/* セクション全体のスタイル */
.aboutus-message-section {
background-color: #078924; /* 緑の背景色 */
color: #fff; /* 白い文字色 */
padding: 30px 15px; /* スマホ向けパディング */
font-family: sans-serif; /* フォントの指定 */
}
/* ヘッダー部分 */
.aboutus-message-header {
max-width: 1200px;
margin: 0 auto;
margin-bottom: 20px; /* 下部余白 */
}
.aboutus-message-heading {
font-size: 1.5em; /* スマホ向け見出しサイズ */
font-weight: bold;
line-height: 1.5;
margin-bottom: 20px;
}
/* コンテンツ部分 (テキストと画像) */
.aboutus-message-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column; /* スマホでは縦並び */
align-items: center;
gap: 30px; /* 要素間のスペース */
}
/* テキストラッパー */
.aboutus-message-text-wrapper {
width: 100%;
}
.aboutus-message-paragraph {
font-size: 0.9em; /* スマホ向け段落サイズ */
line-height: 1.8;
margin-bottom: 1em; /* 段落間の余白 */
}
/* 画像ラッパー - スマホでも斜めに配置するため設定を調整 */
.aboutus-message-image-wrapper {
width: 250px; /* スマホでの画像全体の幅を固定 */
height: 350px; /* スマホでの画像全体の高さを固定し、重ねるスペースを確保 */
position: relative; /* 画像をずらすための基準 */
margin-top: 20px; /* テキストとの間に少しスペース */
margin-bottom: 20px; /* 下の要素との間に少しスペース */
}
.aboutus-message-image {
width: 200px; /* スマホ向け画像サイズ */
height: 200px;
border-radius: 50%; /* 円形にする */
object-fit: cover; /* 画像が円形に収まるように調整 */
border: 3px solid #fff; /* 白い枠線 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影 */
position: absolute; /* 親要素内で自由に配置 */
}
/* スマホでの画像配置 */
.aboutus-message-image-top {
top: 0;
left: 0;
}
.aboutus-message-image-bottom {
bottom: 0;
right: 0;
}
/* メディアクエリ: タブレット向け */
@media (min-width: 768px) {
.aboutus-message-section {
padding: 50px 30px;
}
.aboutus-message-heading {
font-size: 2em; /* タブレット向け見出しサイズ */
}
.aboutus-message-paragraph {
font-size: 1em; /* タブレット向け段落サイズ */
}
.aboutus-message-content {
flex-direction: row; /* タブレットでは横並び */
justify-content: space-between;
align-items: flex-start;
}
.aboutus-message-text-wrapper {
width: 60%; /* テキスト部分の幅 */
}
.aboutus-message-image-wrapper {
width: 35%; /* 画像部分の幅 */
height: 400px; /* 画像を配置する高さ */
position: relative; /* 画像をずらすための基準 */
margin-top: 0;
margin-bottom: 0;
}
.aboutus-message-image {
width: 250px;
height: 250px;
position: absolute;
}
.aboutus-message-image-top {
top: 0;
left: 0;
}
.aboutus-message-image-bottom {
bottom: 0;
right: 0;
}
}
/* メディアクエリ: デスクトップ向け */
@media (min-width: 1024px) {
.aboutus-message-section {
padding: 80px 50px;
}
.aboutus-message-heading {
font-size: 2.8em; /* デスクトップ向け見出しサイズ */
}
.aboutus-message-paragraph {
font-size: 1.1em; /* デスクトップ向け段落サイズ */
}
.aboutus-message-text-wrapper {
width: 55%;
}
.aboutus-message-image-wrapper {
width: 40%;
height: 500px; /* 画像を配置する高さ */
}
.aboutus-message-image {
width: 280px;
height: 280px;
}
.aboutus-message-image-top {
top: 0;
left: 0;
}
.aboutus-message-image-bottom {
bottom: 0;
right: 0;
}
}
/****** メッセージエリア ここまで ******/
/****** 沿革エリア ここから ******/
/* aboutus-history.css */
/* セクション全体のスタイル */
.aboutus-history-section {
background-color: #2F882F; /* 緑の背景色 */
color: #fff; /* 白い文字色 */
padding: 30px 15px; /* スマホ向けパディング */
font-family: sans-serif; /* フォントの指定 */
overflow: hidden; /* 子要素のはみ出しを隠す（特にスマホでカードが並ぶ場合） */
}
/* ヘッダー部分 */
.aboutus-history-header {
max-width: 1200px;
margin: 0 auto 30px auto; /* 下部に余白 */
display: flex;
flex-wrap: wrap; /* 小さな画面で折り返す */
align-items: center;
justify-content: space-between;
}
.aboutus-history-main-title {
font-size: 2.2em; /* スマホ向けメインタイトルサイズ */
font-weight: bold;
margin: 0;
line-height: 1;
}
.aboutus-history-sub-title {
font-size: 1em; /* スマホ向けサブタイトルサイズ */
margin: 0;
margin-left: 10px; /* メインタイトルとの間隔 */
}
/* ナビゲーションボタン */
.aboutus-history-nav {
display: flex;
gap: 10px;
margin-top: 15px; /* スマホでタイトルとボタンが縦に並ぶ場合 */
}
.aboutus-history-nav-button {
background-color: transparent;
border: 2px solid #D4EE00; /* 黄緑色の枠線 */
color: #D4EE00;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.aboutus-history-nav-button:hover {
background-color: #D4EE00;
color: #2F882F;
}
/* タイムラインコンテナ (スマホでは縦スクロールを想定、横並び) */
.aboutus-history-timeline-container {
display: flex;
overflow-x: auto; /* スマホでは横スクロールを可能にする */
scroll-snap-type: x mandatory; /* スクロール位置をカードにスナップ */
gap: 20px; /* カード間のスペース */
padding-bottom: 20px; /* スクロールバーとの間隔 */
-webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
scrollbar-width: none; /* Firefoxでスクロールバーを非表示 */
-ms-overflow-style: none; /* IE/Edgeでスクロールバーを非表示 */
}
.aboutus-history-timeline-container::-webkit-scrollbar {
display: none; /* Chrome/Safariでスクロールバーを非表示 */
}
/* タイムラインカード */
.aboutus-history-card {
flex: 0 0 85%; /* スマホで1画面に約1枚表示 */
scroll-snap-align: start; /* カードの開始位置にスナップ */
background-color: #fff; /* 白い背景 */
color: #333; /* 黒っぽい文字色 */
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
min-height: 350px; /* カードの最小高さを確保 */
display: flex;
flex-direction: column;
}
.aboutus-history-year {
background-color: #E0E0E0; /* 薄いグレーの背景 */
color: #888; /* グレーの文字色 */
font-size: 2.5em; /* 年の文字サイズ */
font-weight: bold;
padding: 15px 20px;
text-align: right; /* 右寄せ */
}
.aboutus-history-card-content {
padding: 20px;
flex-grow: 1; /* 残りのスペースを埋める */
}
.aboutus-history-date {
font-size: 0.9em;
font-weight: bold;
margin-bottom: 10px;
color: #555;
}
.aboutus-history-text {
font-size: 0.8em;
line-height: 1.6;
color: #666;
}
/* プログレスバー */
.aboutus-history-progress-bar {
max-width: 1200px;
margin: 30px auto 0 auto; /* 上部に余白 */
height: 4px;
background-color: rgba(255, 255, 255, 0.3); /* 薄い白の背景 */
border-radius: 2px;
position: relative;
}
.aboutus-history-progress-fill {
width: 33.33%; /* 例: 3枚のカードのうち1枚目を示す */
height: 100%;
background-color: #D4EE00; /* 黄緑色の塗りつぶし */
border-radius: 2px;
/* transition: width 0.3s ease-in-out; /* JavaScriptで動かす場合のみ必要なので削除 */
}
/* メディアクエリ: タブレット向け */
@media (min-width: 768px) {
.aboutus-history-section {
padding: 50px 30px;
}
.aboutus-history-header {
margin-bottom: 40px;
}
.aboutus-history-main-title {
font-size: 3em;
}
.aboutus-history-sub-title {
font-size: 1.2em;
}
.aboutus-history-nav {
margin-top: 0; /* 横並びになるのでマージン不要 */
order: 1; /* フレックスアイテムの並び順 (右端に) */
margin-left: auto; /* 左寄せのタイトルとの間隔を自動で調整 */
}
.aboutus-history-main-title,
.aboutus-history-sub-title {
order: 0; /* タイトルは左側 */
}
.aboutus-history-timeline-container {
gap: 30px;
}
.aboutus-history-card {
flex: 0 0 45%; /* タブレットで約2枚表示 */
min-height: 400px;
}
.aboutus-history-year {
font-size: 3em;
padding: 20px 25px;
}
.aboutus-history-date {
font-size: 1em;
}
.aboutus-history-text {
font-size: 0.9em;
}
}
/* メディアクエリ: デスクトップ向け */
@media (min-width: 1024px) {
.aboutus-history-section {
padding: 80px 50px;
}
.aboutus-history-header {
margin-bottom: 60px;
}
.aboutus-history-main-title {
font-size: 4em;
}
.aboutus-history-sub-title {
font-size: 1.4em;
}
.aboutus-history-nav {
gap: 15px;
}
.aboutus-history-nav-button {
width: 50px;
height: 50px;
font-size: 1.5em;
}
.aboutus-history-timeline-container {
gap: 40px;
justify-content: center; /* カードを中央に寄せる */
overflow-x: hidden; /* デスクトップでは横スクロール不要 */
}
.aboutus-history-card {
flex: 0 0 30%; /* デスクトップで3枚表示 */
min-height: 450px;
}
.aboutus-history-year {
font-size: 3.5em;
padding: 25px 30px;
}
.aboutus-history-date {
font-size: 1.1em;
}
.aboutus-history-text {
font-size: 1em;
}
}
/****** 沿革エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 私たちについてページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 施工サービスページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.service-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.service-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.service-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.service-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.service-title-heading::before,
.service-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.service-title-wrapper {
min-height: 300px;
}
.service-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.service-title-heading {
font-size: 2.2rem;
}
.service-title-heading::before,
.service-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** メッセージエリア ここから ******/
/* --- 全体のスタイルとリセット --- */
.service-message-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- スマホのスタイル（モバイルファースト） --- */
.service-message-container {
display: flex;
flex-direction: column;
background-color: #078924; /* 画像から抽出した緑色 */
color: #ffffff;
padding: 3rem 1.5rem;
font-family: sans-serif;
}
.service-message-text-wrapper {
margin-bottom: 3rem;
}
.service-message-heading {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.5;
margin-bottom: 2rem;
text-align: center;
}
.service-message-paragraph {
font-size: 1rem;
line-height: 1.8;
}
.service-message-image-wrapper {
position: relative;
width: 90%;
max-width: 450px;
margin: 0 auto;
}
/* 画像の後ろにある白い飾り */
.service-message-image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
transform: rotate(8deg);
z-index: 1;
}
.service-message-image-frame {
position: relative;
background-color: #ffffff;
padding: 0.75rem;
border: 1px solid #eee;
transform: rotate(4deg);
z-index: 2;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.service-message-image {
width: 100%;
height: auto;
display: block;
}
.service-message-br {
display: block; /* スマホでは改行を表示 */
}
/* --- PCのスタイル (768px以上の画面幅で適用) --- */
@media (min-width: 768px) {
.service-message-container {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 5rem 4rem;
}
.service-message-text-wrapper {
flex-basis: 50%;
padding-right: 3rem;
margin-bottom: 0;
}
.service-message-heading {
text-align: left;
font-size: 2.2rem;
}
.service-message-image-wrapper {
flex-basis: 45%;
margin: 0;
}
.service-message-br {
display: none; /* PCでは改行を非表示 */
}
}
/* --- さらに大きいPC画面用の調整 --- */
@media (min-width: 1024px) {
.service-message-container {
padding: 6rem;
}
.service-message-text-wrapper {
padding-right: 4rem;
}
.service-message-paragraph {
font-size: 1.1rem;
}
}
/****** メッセージエリア ここまで ******/
/****** サービスエリア ここから ******/
/* --- 全体のスタイルとリセット --- */
.service-all02-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- スマホのスタイル（モバイルファースト） --- */
.service-all02-container {
display: flex;
flex-direction: column; /* スマホでは縦並び */
width: 100%;
font-family: sans-serif;
background-color: #078924; /* 背景の濃い緑 */
}
.service-all02-image-area {
width: 100%;
min-height: 300px;
}
.service-all02-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.service-all02-text-area {
background-color: #078924; /* 濃い緑 */
padding: 3rem 0;
}
.service-all02-text-content {
background-color: #92b314; /* 明るい緑 */
color: #ffffff;
padding: 2.5rem 1.5rem;
margin: 0 1rem;
}
.service-all02-heading {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding-bottom: 1rem;
}
.service-all02-paragraph {
font-size: 1rem;
line-height: 1.8;
}
/* --- PCのスタイル (768px以上の画面幅で適用) --- */
@media (min-width: 768px) {
.service-all02-container {
flex-direction: row; /* PCでは横並び */
min-height: 500px;
}
.service-all02-image-area {
flex: 1; /* 画像が半分の幅を占める */
min-height: auto;
}
.service-all02-text-area {
flex: 1; /* テキストが半分の幅を占める */
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
}
.service-all02-text-content {
margin: 0;
max-width: 500px;
}
}
/* --- さらに大きいPC画面用の調整 --- */
@media (min-width: 1024px) {
.service-all02-text-area {
padding: 4rem;
}
.service-all02-heading {
font-size: 2rem;
}
.service-all02-paragraph {
font-size: 1.1rem;
}
}
/* --- 全体のスタイルとリセット --- */
.service-all01-container * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- スマホのスタイル（モバイルファースト） --- */
.service-all01-container {
display: flex;
flex-direction: column; /* スマホでは縦並び */
width: 100%;
font-family: sans-serif;
background-color: #078924; /* 背景の濃い緑 */
}
.service-all01-text-area {
background-color: #078924; /* 濃い緑 */
padding: 3rem 0; /* 上下の余白（濃い緑の帯） */
}
.service-all01-text-content {
background-color: #92b314; /* 明るい緑 */
color: #ffffff;
padding: 2.5rem 1.5rem;
margin: 0 1rem; /* 左右に少し余白を作る */
}
.service-all01-heading {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding-bottom: 1rem;
}
.service-all01-paragraph {
font-size: 1rem;
line-height: 1.8;
}
.service-all01-image-area {
width: 100%;
min-height: 300px; /* スマホでの画像の高さを確保 */
/* background-imageプロパティは、imgタグを使うため削除 */
}
.service-all01-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像の比率を保ったまま親要素を埋める */
display: block; /* 画像の下の余白をなくす */
}
/* --- PCのスタイル (768px以上の画面幅で適用) --- */
@media (min-width: 768px) {
.service-all01-container {
flex-direction: row; /* PCでは横並び */
min-height: 500px; /* コンテンツの高さに応じて調整 */
}
.service-all01-text-area {
flex: 1; /* テキストエリアが半分の幅を占める */
display: flex;
align-items: center; /* 中のコンテンツを垂直中央に配置 */
justify-content: center;
padding: 3rem;
}
.service-all01-text-content {
margin: 0;
max-width: 500px;
}
.service-all01-image-area {
flex: 1; /* 画像エリアが半分の幅を占める */
min-height: auto; /* スマホ用の高さをリセット */
}
}
/* --- さらに大きいPC画面用の調整 --- */
@media (min-width: 1024px) {
.service-all01-text-area {
padding: 4rem;
}
.service-all01-heading {
font-size: 2rem;
}
.service-all01-paragraph {
font-size: 1.1rem;
}
}
/****** サービスエリア ここまで ******/
/****** 取り扱い畳一覧エリア ここから ******/
/* --- 全体のスタイルとリセット --- */
.service-handling-container * {
box-sizing: border-box;
}
/* --- コンテナとヘッダー --- */
.service-handling-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 3rem 1.5rem;
}
.service-handling-header {
text-align: center;
margin-bottom: 3rem;
}
.service-handling-main-title {
font-size: 2rem;
margin: 0 0 1.5rem 0;
}
.service-handling-intro-text {
font-size: 1rem;
line-height: 1.8;
text-align: left;
max-width: 800px;
margin: 0 auto;
}
/* --- カードグリッド（モバイルファースト） --- */
.service-handling-cards-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 2rem;
}
/* --- カード単体のスタイル --- */
.service-handling-card {
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.service-handling-card-image-wrapper {
width: 100%;
height: 220px;
}
.service-handling-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-handling-card-content {
padding: 1.5rem;
background-color: #73B100;
color: #ffffff;
flex-grow: 1; /* カードの高さを揃えるため */
}
.service-handling-card-title {
font-size: 1.5rem;
margin: 0 0 1rem 0;
font-weight: bold;
}
.service-handling-card-description {
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
/* --- PCのスタイル (768px以上の画面幅で適用) --- */
@media (min-width: 768px) {
.service-handling-cards-grid {
grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
gap: 2.5rem;
}
.service-handling-main-title {
font-size: 2.5rem;
}
}
/****** 取り扱い畳一覧エリア ここまで ******/
/****** 任せて安心サービスエリア ここから ******/
/* --- 全体のスタイルとリセット --- */
.service-relief-container * {
box-sizing: border-box;
}
/* --- コンテナとヘッダー --- */
.service-relief-container {
width: 100%;
background-color: #078924;
color: #ffffff;
padding: 3rem 1.5rem;
}
.service-relief-header {
max-width: 800px;
margin: 0 auto 4rem auto;
text-align: center;
}
.service-relief-main-title {
font-size: 1.8rem;
margin: 0 0 1.5rem 0;
font-weight: bold;
}
.service-relief-intro-text {
font-size: 1rem;
line-height: 1.8;
margin: 0;
text-align: left;
display: inline-block; /* 中央揃えコンテナ内で左寄せにするため */
}
/* --- 特徴グリッド（モバイルファースト） --- */
.service-relief-features-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 3rem;
max-width: 800px;
margin: 0 auto;
}
.service-relief-feature-item {
text-align: center;
}
/* --- 円とアイコン --- */
.service-relief-circle {
width: 220px;
height: 220px;
background-color: #eaf5d3;
border-radius: 50%;
margin: 0 auto 1.5rem auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 1rem;
}
.service-relief-icon {
width: 90px;
height: 90px;
/* fill: #92b314; ← imgタグには不要なため、この行を削除しました */
}
.service-relief-number {
font-size: 2.2rem;
color: #078924;
font-weight: bold;
margin-top: 0.25rem;
}
/* --- 特徴のテキスト --- */
.service-relief-feature-title {
font-size: 1.6rem;
margin: 0 0 0.75rem 0;
font-weight: bold;
}
.service-relief-feature-description {
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
/* --- PCのスタイル (768px以上の画面幅で適用) --- */
@media (min-width: 768px) {
.service-relief-container {
padding: 5rem 2rem;
}
.service-relief-features-grid {
grid-template-columns: 1fr 1fr; /* PCでは2列 */
gap: 2rem;
}
.service-relief-main-title {
font-size: 2.2rem;
}
}
/****** 任せて安心サービスエリア ここまで ******/
/*///////////// ここまで ///////////////////
// 施工サービスページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 施工事例ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.casestudy-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.casestudy-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.casestudy-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.casestudy-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.casestudy-title-heading::before,
.casestudy-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.casestudy-title-wrapper {
min-height: 300px;
}
.casestudy-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.casestudy-title-heading {
font-size: 2.2rem;
}
.casestudy-title-heading::before,
.casestudy-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/*///////////// ここまで ///////////////////
// 施工事例ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 料金表ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.pricelist-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.pricelist-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.pricelist-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.pricelist-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.pricelist-title-heading::before,
.pricelist-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.pricelist-title-wrapper {
min-height: 300px;
}
.pricelist-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.pricelist-title-heading {
font-size: 2.2rem;
}
.pricelist-title-heading::before,
.pricelist-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** 料金表エリア ここから ******/
/* --- 全体のスタイルとリセット --- */
.pricelist-container-main * {
box-sizing: border-box;
}
/* --- メインコンテナ --- */
.pricelist-container-main {
background-color: #078A24;
color: #ffffff;
padding: 2rem 1rem;
}
/* --- ヘッダーセクション --- */
.pricelist-header-wrapper {
text-align: center;
max-width: 800px;
margin: 0 auto 2rem auto;
}
.pricelist-header-title {
font-size: 2rem;
margin: 0;
font-weight: bold;
}
.pricelist-header-subtitle {
font-size: 1.2rem;
margin: 0.5rem 0 1.5rem 0;
}
.pricelist-header-description {
font-size: 0.9rem;
line-height: 1.7;
text-align: left;
margin: 0;
}
/* --- タブセクション --- */
.pricelist-tabs-container {
background-color: #ffffff;
border-radius: 999px;
display: flex;
justify-content: space-between;
padding: 0.5rem;
max-width: 500px;
margin: 0 auto 2rem auto;
}
.pricelist-tabs-button {
flex: 1;
padding: 0.75rem 0.5rem;
border: none;
background-color: transparent;
color: #333;
font-size: 1rem;
font-weight: bold;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.pricelist-tabs-button-active {
background-color: #00582b;
color: #ffffff;
}
/* --- 料金表セクション --- */
.pricelist-list-container {
background-color: #eaf5d3;
border: 4px solid #ffffff;
border-radius: 20px;
padding: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
/* --- 各項目カード（モバイルファースト） --- */
.pricelist-item-card {
background-color: #68a432;
color: #ffffff;
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
display: grid;
gap: 1rem;
grid-template-areas:
"name name"
"price specs"
"desc desc";
}
.pricelist-item-nameBlock { grid-area: name; display: flex; align-items: center; gap: 0.75rem; }
.pricelist-item-priceBlock { grid-area: price; text-align: left; }
.pricelist-item-specBlock { grid-area: specs; }
.pricelist-item-description { grid-area: desc; margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.3); }
.pricelist-item-rank {
background-color: #ffffff;
color: #00582b;
font-weight: bold;
padding: 0.5rem;
border-radius: 5px;
font-size: 0.8rem;
min-width: 50px;
text-align: center;
}
.pricelist-item-rank-special {
background-color: #e53935;
color: #ffffff;
}
.pricelist-item-name {
font-size: 1.3rem;
margin: 0;
}
.pricelist-item-price {
font-size: 1.8rem;
font-weight: bold;
display: block;
}
.pricelist-item-unit {
font-size: 1rem;
font-weight: normal;
}
.pricelist-item-taxPrice {
font-size: 0.8rem;
}
.pricelist-spec-row {
font-size: 0.8rem;
display: flex;
}
.pricelist-spec-label {
min-width: 50px;
}
.pricelist-spec-stars {
color: #fdd835;
letter-spacing: 1px;
}
.pricelist-item-description {
font-size: 0.9rem;
line-height: 1.6;
font-weight: 600; /* 文字を太くする指定 */
}
.pricelist-footer-note {
color: #333;
font-size: 0.9rem;
margin: 1rem 0 0 0;
text-align: right;
}
/* --- タブレット・PC用のスタイル --- */
@media (min-width: 992px) {
.pricelist-container-main {
padding: 3rem;
}
.pricelist-list-container {
padding: 2.5rem;
}
/* PCではカードのレイアウトを変更 */
.pricelist-item-card {
grid-template-columns: 1.5fr 1.2fr 1.5fr 2fr;
grid-template-areas: "name price specs desc";
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
}
.pricelist-item-description {
border-top: none;
padding-top: 0;
text-align: left;
}
}
/****** 料金表エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 料金表ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// よくある質問ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.faq-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.faq-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #078924;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.faq-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.faq-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.faq-title-heading::before,
.faq-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.faq-title-wrapper {
min-height: 300px;
}
.faq-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.faq-title-heading {
font-size: 2.2rem;
}
.faq-title-heading::before,
.faq-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/*///////////// ここまで ///////////////////
// よくある質問ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お問合せページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.contact-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.contact-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #F5FFF7;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.contact-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.contact-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.contact-title-heading::before,
.contact-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.contact-title-wrapper {
min-height: 300px;
}
.contact-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.contact-title-heading {
font-size: 2.2rem;
}
.contact-title-heading::before,
.contact-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** お電話でのお問合せエリア ここから ******/
/* =================================
スマホファーストの基本スタイル
================================= */
.contact-tel-container {
background-color: #63b174; /* 画像から抽出した緑色 */
color: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
max-width: 500px; /* PCでの最大幅を指定 */
margin: 0 auto; /* 中央寄せ */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.contact-tel-title {
font-size: 1.1rem;
font-weight: bold;
margin: 0 0 15px 0;
}
.contact-tel-divider {
width: 60px;
height: 1px;
background-color: #ffffff;
margin: 0 auto 25px;
border: none;
}
.contact-tel-phone {
display: flex;
justify-content: center;
align-items: center;
gap: 10px; /* アイコンと番号の間隔 */
margin-bottom: 25px;
}
.contact-tel-icon {
width: 28px; /* アイコンのサイズ */
height: 28px;
}
.contact-tel-number {
font-size: 1.9rem; /* スマホで見やすい大きめのフォント */
font-weight: bold;
color: #ffffff;
text-decoration: none;
letter-spacing: 1px;
}
.contact-tel-info p {
margin: 5px 0 0 0;
font-size: 0.95rem;
line-height: 1.6;
}
/* =================================
レスポンシブ設定 (タブレット・PC)
768px以上の画面幅で適用
================================= */
@media (min-width: 768px) {
.contact-tel-container {
padding: 40px 30px;
}
.contact-tel-title {
font-size: 1.3rem;
margin-bottom: 20px;
}
.contact-tel-divider {
margin-bottom: 30px;
}
.contact-tel-phone {
margin-bottom: 30px;
gap: 15px;
}
.contact-tel-icon {
width: 32px;
height: 32px;
}
.contact-tel-number {
font-size: 2.5rem; /* PCではさらに大きく */
}
.contact-tel-info p {
font-size: 1rem;
}
}
/****** お電話でのお問合せエリア ここまで ******/
/****** WEBからのお問合せエリア ここから ******/
/* =================================
スマホファーストの基本スタイル
================================= */
.contact-web-container {
max-width: 700px;
margin: 0 auto;
padding: 30px 20px;
text-align: center;
}
.contact-web-title {
/* 明朝体のようなセリフ系のフォントを指定 */
font-family: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 1.4rem;
font-weight: 500; /* やや細めのウェイト */
margin: 0 0 25px 0;
letter-spacing: 1px; /* 文字間を少し広げる */
}
.contact-web-description {
font-size: 0.9rem;
line-height: 2; /* 行間を広めに設定 */
}
.contact-web-text {
margin: 0;
}
/* =================================
レスポンシブ設定 (タブレット・PC)
768px以上の画面幅で適用
================================= */
@media (min-width: 768px) {
.contact-web-container {
padding: 40px;
}
.contact-web-title {
font-size: 1.6rem;
margin-bottom: 35px;
}
.contact-web-description {
font-size: 1rem;
line-height: 2.2;
}
}
/****** WEBからのお問合せエリア ここまで ******/
/****** お問合せフォームエリア ここから ******/
/* =================================
スマホファーストの基本スタイル
================================= */
.contact-form-container {
max-width: 680px;
margin: 0 auto;
}
.contact-form-group {
margin-bottom: 24px;
}
.contact-form-label {
display: block;
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 8px;
}
/* 共通の入力フィールドスタイル */
.contact-form-input,
.contact-form-textarea,
.contact-form-privacy-text {
width: 100%;
padding: 14px 16px;
background-color: #f0f2f1;
border: none;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box; /* paddingを含めてwidth:100%にする */
line-height: 1.5;
}
.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
color: #999;
}
.contact-form-textarea {
min-height: 200px;
resize: vertical; /* 縦方向のみリサイズ可能に */
}
.contact-form-privacy-wrapper {
position: relative;
}
.contact-form-privacy-text {
height: 150px;
font-size: 0.85rem;
color: #555;
resize: none;
overflow-y: scroll;
}
.contact-form-button-wrapper {
text-align: center;
margin-top: 32px;
}
.contact-form-submit-button {
background-color: #0c6b37; /* 画像から抽出した緑色 */
color: #ffffff;
border: none;
border-radius: 50px; /* 角を丸くして楕円形に */
padding: 16px 24px;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%; /* スマホでは幅いっぱいに */
max-width: 450px; /* PCでの最大幅 */
}
.contact-form-submit-button:hover {
background-color: #0a542b; /* ホバー時に少し暗くする */
}
/* =================================
レスポンシブ設定 (タブレット・PC)
768px以上の画面幅で適用
================================= */
@media (min-width: 768px) {
.contact-form-label {
font-size: 1rem;
}
.contact-form-submit-button {
font-size: 1rem;
padding: 18px 32px;
}
}
/****** お問合せフォームエリア ここまで ******/
/*///////////// ここまで ///////////////////
// お問合せページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お問合せサンクスページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* セクション全体のラッパー */
.thanks-title-wrapper {
position: relative; /* 疑似要素配置の基準 */
display: flex;
justify-content: center;
align-items: center;
min-height: 250px; /* バナーの最低限の高さを確保 */
background-image: url('https://images.unsplash.com/photo-1593482592519-55c355674336?w=800');
background-size: cover; /* 画像をエリアいっぱいに表示 */
background-position: center;
overflow: hidden; /* はみ出した下の曲線を隠す */
}
/* 下の緑の曲線を疑似要素で作成 */
.thanks-title-wrapper::after {
content: '';
position: absolute;
bottom: -50px; /* 半径分だけ下にずらして曲線のエッジを見せる */
left: 0;
width: 100%;
height: 80px; /* 曲線の高さ */
background-color: #F5FFF7;
border-radius: 100% 100% 0 0; /* 上半分の楕円を作成 */
}
/* 中央のタイトルコンテンツ */
.thanks-title-content {
position: relative; /* 緑の曲線より手前に表示 */
z-index: 1;
text-align: center;
}
/* 「お知らせ」のテキスト */
.thanks-title-heading {
color: #ffffff;
font-size: 1.8rem;
font-weight: bold;
margin: 0;
padding: 0;
}
/* テキストの上下の線 */
.thanks-title-heading::before,
.thanks-title-heading::after {
content: '';
display: block;
width: 150px;
height: 1px;
background-color: rgba(255, 255, 255, 0.8);
margin: 15px auto; /* 上下の余白と左右中央寄せ */
}
/* =============================================
タブレット・PC用のスタイル
============================================= */
@media (min-width: 768px) {
.thanks-title-wrapper {
min-height: 300px;
}
.thanks-title-wrapper::after {
height: 100px;
bottom: -60px;
}
.thanks-title-heading {
font-size: 2.2rem;
}
.thanks-title-heading::before,
.thanks-title-heading::after {
width: 200px;
margin: 20px auto;
}
}
/****** タイトルエリア ここまで ******/
/****** メッセージエリア ここから ******/
/* =================================
スマホファーストの基本スタイル
================================= */
.thanks-message-container {
max-width: 720px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
.thanks-message-title {
/* 見出しは明朝体のようなセリフ系フォント */
font-family: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 30px 0;
}
.thanks-message-body {
font-size: 0.9rem;
line-height: 2.2; /* 行間を広めに設定して読みやすく */
}
.thanks-message-text {
margin: 0;
}
/* =================================
レスポンシブ設定 (タブレット・PC)
768px以上の画面幅で適用
================================= */
@media (min-width: 768px) {
.thanks-message-container {
padding: 60px 40px;
}
.thanks-message-title {
font-size: 1.5rem;
margin-bottom: 40px;
}
.thanks-message-body {
font-size: 1rem;
}
}
/****** メッセージエリア ここまで ******/
/*///////////// ここまで ///////////////////
// お問合せサンクスページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 公開準備中
/////////////// ここから /////////////////*/
/****** ここから ******/
.in-preparation-header {
margin: 15% 0 0 0;
text-align: center;
animation: blinkFade 2s infinite;
}
@keyframes blinkFade {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media screen and (min-width: 768px) {
.in-preparation-header {
margin: 5% 0 0 0;
}
}
.in-preparation-header h2 {
font-size: 65px;
font-weight: 600;
color: #012A62;
margin: 0 0 0 0;
line-height: 53px;
}
@media screen and (min-width: 480px) {
.in-preparation-header h2 {
line-height: 1.8;
}
}
.in-preparation-title {
text-align: center;
}
.in-preparation-title h2 {
text-align: center;
color: #2D93E1;
}
@media screen and (min-width: 480px) {
.in-preparation-title h2 {
margin: -5px 0 0 0;
}
}
.in-preparation-logo {
margin: 100px 0 150px 0;
}
.in-preparation-logo img {
width: 90%;
margin: 0 auto;
display: block;
}
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 公開準備中
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ
/////////////// ここから /////////////////*/
/* ファーストビューエリア ここから */
/* ========= variables ========= */
:root{
--bg-mint: #f4fcf6; /* 全体の薄い背景 */
--primary-green: #2f8c37; /* 左の濃いグリーン */
--pale-green: #cfe9c9; /* 右の淡いグリーン */
--yellow: #ffea33;
--white: #ffffff;
--text-dark: #222;
--text-light: #fff;
--font-jp: "Noto Sans JP", sans-serif;
}
/* ======= セクション全体（スマホファースト） ======= */
.toppage-firstview-section{
font-family: var(--font-jp);
background-color: var(--bg-mint);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 36px 18px 80px;
}
/* --- 中央画像 --- */
.toppage-firstview-center { width: 100%; max-width: 900px; display:flex; justify-content:center; }
.image-wrap { width: 100%; }
.toppage-firstview-image{
width: 100%;
height: auto;
display: block;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* --- 左 blob（モバイル時は上に表示） --- */
.toppage-firstview-left { width: 100%; display:flex; justify-content:center; }
.blob-container{
width: 300px;
height: 220px;
background-color: var(--primary-green);
color: var(--text-light);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius: 48% 52% 50% 50% / 60% 40% 60% 40%;
transform: rotate(-8deg);
box-shadow: none;
}
.blob-content { transform: rotate(8deg); padding: 18px; }
.blob-title{
margin:0 0 12px;
font-size: 1.05rem;
line-height: 1.45;
font-weight: 700;
}
.blob-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
background: rgba(255,255,255,0.12);
color: var(--text-light);
font-weight:700;
text-decoration:none;
font-size:0.9rem;
}
.blob-arrow{
display:inline-block;
margin-left:6px;
background: var(--yellow);
color: var(--text-dark);
width:20px;
height:20px;
border-radius:50%;
line-height:20px;
text-align:center;
font-weight:700;
font-size:0.9rem;
}
/* --- 右 blob（モバイルでは下に表示） --- */
.toppage-firstview-right { width:100%; display:flex; justify-content:center; }
.talk-box-container{
width: 300px;
height: 260px;
background: var(--pale-green);
border-radius: 42% 58% 55% 45% / 55% 40% 60% 45%;
display:flex;
align-items:center;
justify-content:center;
transform: rotate(6deg);
}
.talk-box-button-group{
transform: rotate(-6deg);
display:flex;
flex-direction:column;
gap:20px;
align-items:center;
justify-content:center;
}
.talk-box-button{
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight:700;
text-decoration:none;
line-height:1.2;
padding:12px;
}
.talk-box-button--yellow{
width:110px;
height:110px;
border-radius:50%;
background: var(--yellow);
color: var(--text-dark);
font-size:0.85rem;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.talk-box-button--white{
width:110px;
height:110px;
border-radius:50%;
background: var(--white);
color: var(--text-dark);
font-size:0.88rem;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.talk-box-icon { width:22px; height:22px; margin-bottom:6px; fill: var(--primary-green); }
/* ======= PC（タブレット〜デスクトップ）で横並び＋画像を前面に出す ======= */
@media (min-width: 900px) {
.toppage-firstview-section{
flex-direction: row;
align-items: center;
justify-content: center;
gap: 48px;
padding: 60px 40px 120px;
}
/* 列幅比率（左:中央:右） */
.toppage-firstview-left { flex: 1; display:flex; justify-content:flex-end; }
.toppage-firstview-center { flex: 1.8; display:flex; justify-content:center; }
.toppage-firstview-right { flex: 1; display:flex; justify-content:flex-start; }
/* 左 blob をやや画像の下に寄せて、画像の端にかかるようにする */
.blob-container{
width: 420px;
height: 320px;
transform: rotate(-12deg);
margin-right: -110px; /* 画像へ被せる量（調整可） */
z-index: 2;
}
.blob-content { padding: 28px; transform: rotate(12deg); }
.blob-title { font-size: 1.6rem; }
/* 画像は前面（丸角・大きめ） */
.image-wrap { width: 900px; max-width: 55vw; }
.toppage-firstview-image{
border-radius: 22px;
box-shadow: 0 30px 60px rgba(0,0,0,0.18);
z-index: 3;
position: relative;
}
/* 右の淡いblob を画像に被せる（右端の丸を見せる） */
.talk-box-container{
width: 420px;
height: 360px;
transform: rotate(8deg);
margin-left: -110px; /* 画像へ被せる量（調整可） */
z-index: 2;
display:flex;
align-items:center;
justify-content:center;
}
.talk-box-button-group { gap: 34px; transform: rotate(-8deg); }
.talk-box-button--yellow { width:140px; height:140px; font-size:0.95rem; }
.talk-box-button--white { width:140px; height:140px; font-size:0.95rem; }
/* 余白調整（必要に応じて微調整） */
.toppage-firstview-section { padding-top: 80px; padding-bottom: 120px; }
}
/* ファーストビューエリア ここまで */
/****** ソーシャルエリア ここから ******/
.footer006 {
padding: 0 16px 24px 16px;
/* background-color: #eefafa; */
/* 背景色 → 写真通りの薄い青 */
}
.footer006-icons {
display: grid;
grid-template-columns: repeat(5, 1fr); /* スマホ時は3列 */
gap: 5px;
justify-items: center;
max-width: 250px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.footer006-icons {
max-width: 500px;
grid-template-columns: repeat(5, 1fr);
}
}
.footer006-icon {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.footer006-icon img {
/* width: 32px;
height: 32px; */
width: 30px;
height: auto;
object-fit: contain;
}
.icon-x img {
/* width: 32px;
height: 32px; */
width: 20px;
height: auto;
object-fit: contain;
}
.footer006-icon:hover {
transform: scale(1.1);
}
/* PC時 → 横並び */
@media (min-width: 768px) {
.footer006-icons {
/* grid-template-columns: repeat(6, 1fr); */
max-width: 350px;
}
}
/****** ソーシャルエリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// トップページ
////////////////////////////////////////////*/
/****** 学びの森 ここからスタート↓↓↓↓↓ ******/
/*/////////////////////////////////////////////
// スクール支援についてページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* =============================================
スマホでの表示（基本のスタイル）
============================================= */
/* セクション全体の背景とレイアウト */
.aboutschool-title-container {
/* 画像がない場合でもデザインが崩れないように背景色を指定 */
background-color: #3a8b7e;
/* 緑系のグラデーションで画像に近い雰囲気を再現 */
background-image: linear-gradient(135deg, #4aa393, #2e7a6d);
/* ご自身の画像を使用する場合は、以下のコメントを解除してパスを指定してください */
/* background-image: url('images/your-leaf-image.jpg'); */
background-size: cover; /* 背景画像をコンテナいっぱいに広げる */
background-position: center; /* 背景画像を中央に配置 */
color: white; /* テキストの色を白に */
text-align: center; /* テキストを中央揃えに */
display: flex; /* Flexboxを使用して中央揃えを実現 */
flex-direction: column; /* 要素を縦に並べる */
justify-content: center; /* 垂直方向の中央揃え */
align-items: center; /* 水平方向の中央揃え */
padding: 60px 20px; /* 内側の余白（上下60px, 左右20px） */
min-height: 250px; /* 最低限の高さを確保 */
font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Meiryo', sans-serif; /* フォントを指定 */
}
/* メインタイトル「ABOUT」のスタイル */
.aboutschool-title-main {
font-size: 2.8rem; /* フォントサイズ */
font-weight: bold; /* フォントの太さ */
margin: 0; /* 外側の余白をなくす */
letter-spacing: 0.1em; /* 文字間を少し広げる */
}
/* サブタイトル「スクール支援について」のスタイル */
.aboutschool-title-sub {
font-size: 1rem; /* フォントサイズ */
margin: 8px 0 0 0; /* 上に少し余白を設ける */
letter-spacing: 0.05em; /* 文字間を少し広げる */
}
/* =============================================
タブレット・PCでの表示（横幅768px以上）
============================================= */
@media (min-width: 768px) {
/* セクション全体の余白と高さを調整 */
.aboutschool-title-container {
padding: 80px 40px; /* 内側の余白を広げる */
min-height: 320px; /* 高さを少し大きくする */
}
/* メインタイトルのフォントサイズを大きくする */
.aboutschool-title-main {
font-size: 3.5rem;
}
/* サブタイトルのフォントサイズを大きくする */
.aboutschool-title-sub {
font-size: 1.25rem;
}
}
/****** タイトルエリア ここまで ******/
/****** スクール支援とはエリア ここから ******/
/* === コンテナ設定 === */
.aboutschool-message-container {
position: relative; /* 画像を配置する際の基準点 */
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
text-align: center;
overflow: hidden; /* はみ出した画像を隠す */
}
/* === タイトル === */
.aboutschool-message-title {
font-size: 1.8rem;
font-weight: 500;
color: #48C9B0; /* ティールグリーン */
margin: 0 0 10px 0;
}
/* === サブタイトル === */
.aboutschool-message-subtitle {
font-size: 0.9rem;
font-weight: bold;
color: #B08D57; /* ゴールドブラウン */
letter-spacing: 2px;
margin: 0 auto 40px auto;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.aboutschool-message-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background-color: #B08D57; /* ゴールドブラウン */
}
/* === 説明文 === */
.aboutschool-message-text-wrapper {
position: relative; /* 画像より手前に表示させる */
z-index: 2;
}
.aboutschool-message-text {
font-size: 1rem;
line-height: 1.8;
margin: 0;
}
/* === 画像 === */
.aboutschool-message-image-container {
/* スマホでは文章の下に表示 */
margin-top: 40px;
}
.aboutschool-message-image {
max-width: 280px; /* スマホでの最大幅 */
width: 100%;
height: auto;
}
/* === レスポンシブ設定 === */
/* タブレットサイズ以上の画面（768px以上）で適用 */
@media (min-width: 768px) {
.aboutschool-message-container {
padding: 80px 40px 100px 40px; /* 下に余白を追加 */
}
.aboutschool-message-title {
font-size: 2rem;
}
.aboutschool-message-subtitle {
font-size: 1rem;
margin-bottom: 60px;
}
.aboutschool-message-text-wrapper {
max-width: 800px;
margin: 0 auto; /* 中央寄せ */
}
.aboutschool-message-text {
font-size: 1.1rem;
}
/* 画像を右下に配置 */
.aboutschool-message-image-container {
position: absolute;
bottom: -20px; /* 位置を微調整 */
right: -30px; /* 位置を微調整 */
width: 400px; /* PCでの画像サイズ */
z-index: 1; /* テキストの背面に配置 */
margin-top: 0;
opacity: 0.9; /* 少しだけ透明に */
}
.aboutschool-message-image {
max-width: 100%;
}
}
/* PCサイズ以上の画面（1024px以上）で適用 */
@media (min-width: 1024px) {
.aboutschool-message-image-container {
width: 450px;
right: 0;
bottom: 0;
}
}
/* ======================================================= */
/* ====== スクール支援エリア アニメーション用スタイル ====== */
/* ======================================================= */
/* ----------------------------------- */
/* 1. アニメーションのキーフレーム定義 */
/* ----------------------------------- */
@keyframes simpleFadeInUp {
0% {
opacity: 0;
transform: translateY(20px); /* 下から上へ移動 */
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ----------------------------------- */
/* 2. アニメーション対象要素の初期状態とアニメーション設定 */
/* ----------------------------------- */
/* --- 1. タイトルとサブタイトルの初期状態（第1段階） --- */
.aboutschool-message-title,
.aboutschool-message-subtitle {
opacity: 0;
transform: translateY(20px);
/* アニメーション設定 */
animation-name: simpleFadeInUp;
animation-duration: 1.0s; /* アニメーション時間 */
animation-fill-mode: forwards; /* アニメーション終了後も最終状態を維持 */
animation-delay: 0.3s; /* ページロード後、0.3秒後に開始 */
}
/* --- 2. 本文テキスト全体（第2段階） --- */
/* テキストラッパー内のすべてのテキスト要素に適用 */
.aboutschool-message-text-wrapper {
/* ラッパー全体は非表示にしない */
}
.aboutschool-message-text-wrapper p.aboutschool-message-text {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.0s ease-out, transform 1.0s ease-out; /* 念のためトランジションも設定 */
/* アニメーション設定 */
animation-name: simpleFadeInUp;
animation-duration: 1.2s; /* アニメーション時間 */
animation-fill-mode: forwards;
/* ★★★ 0.3s (タイトル開始) + 1.0s (タイトルアニメ時間) + 0.3s (間隔) = 1.6s 後に開始 ★★★ */
animation-delay: 1.6s;
}
/****** スクール支援とはエリア ここまで ******/
/****** 学びの森の特徴エリア ここから ******/
/* ==============================
Base & Layout
============================== */
.aboutschool-features-wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px;
font-family: "Noto Sans JP", sans-serif;
color: #333;
position: relative;
}
/* ==============================
左の縦書きタイトル
============================== */
.aboutschool-features-left {
writing-mode: vertical-rl;
text-orientation: mixed;
display: inline-block;
position: absolute;
top: 60px;
left: 0;
padding-left: 10px;
}
.aboutschool-features-subtitle {
color: #5BA9A9;
font-size: 0.9rem;
margin-bottom: 8px;
font-weight: bold;
}
.aboutschool-features-title {
font-size: 1.2rem;
line-height: 2;
font-weight: 700;
}
/* ==============================
メインビジュアル部分
============================== */
.aboutschool-features-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
margin-left: 80px; /* 左の縦書きのスペース確保 */
margin-bottom: 60px;
}
.aboutschool-features-main-image img {
width: 100%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.aboutschool-features-main-text {
max-width: 600px;
text-align: left;
font-size: 0.95rem;
line-height: 1.8;
}
.aboutschool-features-btn {
display: inline-block;
background-color: #5BA9A9;
color: #fff;
padding: 10px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
margin-top: 16px;
transition: background 0.3s ease;
}
.aboutschool-features-btn:hover {
background-color: #479393;
}
/* ==============================
特徴リスト
============================== */
.aboutschool-features-list {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
/* 各項目 */
.aboutschool-features-item {
position: relative;
background-color: #f8fbfa;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.aboutschool-features-item img {
width: 100%;
border-radius: 8px;
margin-bottom: 12px;
}
/* 縦書きの小見出し */
.aboutschool-features-vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
position: absolute;
left: -30px;
top: 20px;
font-size: 0.85rem;
color: #5BA9A9;
font-weight: bold;
line-height: 1.6;
}
/* テキスト部分 */
.aboutschool-features-content h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
}
.aboutschool-features-num {
color: #5BA9A9;
font-weight: 800;
font-size: 1.3rem;
margin-bottom: 4px;
}
.aboutschool-features-content p {
font-size: 0.9rem;
line-height: 1.7;
}
/* ==============================
PC レイアウト
============================== */
@media (min-width: 768px) {
.aboutschool-features-main {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.aboutschool-features-main-text {
width: 50%;
}
.aboutschool-features-main-image {
width: 45%;
}
.aboutschool-features-list {
grid-template-columns: repeat(3, 1fr);
gap: 40px 30px;
}
.aboutschool-features-item:nth-child(4),
.aboutschool-features-item:nth-child(5) {
grid-column: span 1;
}
}
/* ==============================
大画面対応
============================== */
@media (min-width: 1100px) {
.aboutschool-features-left {
top: 80px;
left: 0;
}
.aboutschool-features-main {
margin-left: 120px;
}
}
/****** 学びの森の特徴エリア ここまで ******/
/****** 支援内容の紹介エリア ここから ******/
/* =============================================
基本スタイル（スマホ表示）
============================================= */
/* --- 全体のコンテナ --- */
.aboutschool-introduction-container {
max-width: 960px;
margin: 0 auto;
padding: 60px 20px;
position: relative;
}
/* --- ヘッダー部分 --- */
.aboutschool-introduction-header {
text-align: center;
margin-bottom: 50px;
}
.aboutschool-introduction-mainTitle {
font-size: 1.6rem;
color: #008080; /* ティール色 */
font-weight: 500;
margin: 0 0 8px 0;
}
.aboutschool-introduction-subTitle {
font-size: 0.9rem;
color: #8c7853; /* 茶色 */
letter-spacing: 0.1em;
margin: 0 0 30px 0;
padding-bottom: 10px;
display: inline-block;
position: relative;
}
/* サブタイトルの下線 */
.aboutschool-introduction-subTitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background-color: #8c7853;
}
.aboutschool-introduction-description {
font-size: 1.00rem;
font-weight: 600;
line-height: 1.8;
/* max-width: 600px; */
margin: 0 auto; /* 中央揃え */
color: #804E21;
}
/* --- グリッド部分 --- */
.aboutschool-introduction-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 40px;
}
/* グリッドの各アイテム */
.aboutschool-introduction-gridItem {
/* 特に追加のスタイルは不要 */
}
.aboutschool-introduction-itemImage {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
display: block;
}
.aboutschool-introduction-itemTitle {
font-size: 1.2rem;
font-weight: 700;
color: #16B199;
margin: 0 0 10px 0;
}
.aboutschool-introduction-itemText {
font-size: 0.9rem;
line-height: 1.8;
margin: 0;
}
/* =============================================
PC向けレイアウト (768px以上)
============================================= */
@media (min-width: 768px) {
.aboutschool-introduction-container {
padding: 80px 40px;
}
/* --- 背景の装飾線 --- */
/* .aboutschool-introduction-container::before,
.aboutschool-introduction-container::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border: 2px solid #0080802a;
border-radius: 50%;
z-index: -1;
}
.aboutschool-introduction-container::before {
top: 40px;
left: 0px;
}
.aboutschool-introduction-container::after {
bottom: 40px;
right: 0px;
}
.aboutschool-introduction-mainTitle {
font-size: 1.8rem;
} */
/* --- グリッドを2列に --- */
.aboutschool-introduction-grid {
grid-template-columns: repeat(2, 1fr);
gap: 50px 40px; /* 縦の隙間, 横の隙間 */
}
}
/****** 支援内容の紹介エリア ここまで ******/
/****** 新 放課後学習支援の効果エリア ここから ******/
/*
* Learning Outcomes Section Styles
* スマホファーストのレスポンシブデザイン
*/
/* --- 全体コンテナ --- */
.result-manabi-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px 15px 100px 15px;
box-sizing: border-box;
/* font-family: 'Arial', sans-serif; */
background-color: #E6F5F2;
}
/* タイトル (任意ですが、セクションの区切りとして用意) */
.result-manabi-title {
text-align: center;
font-size: 1.8rem;
color: #3d3d3d;
margin-bottom: 30px;
}
/* カード全体のラッパー (スマホ: 縦並び / PC: 横並び) */
.result-manabi-cards-wrapper {
display: flex;
flex-direction: column; /* スマホでは縦に積み重ね */
gap: 50px;
}
/* --- カードスタイル --- */
.result-manabi-card {
border: 2px solid #16B199;
border-radius: 8px;
/* ★マージンを確保するため、パディングを広げます (左右20px + 10px = 30px) */
padding: 50px 30px 30px; /* 下に10pxのスペースを確保するため、padding-bottomを10pxに */
box-sizing: border-box;
background-color: #E6F5F2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
position: relative;
}
/* --- アイコンエリア --- */
.result-manabi-icon-area {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.result-manabi-icon-circle {
width: 80px;
height: 80px;
border: 3px solid #16B199;
border-radius: 50%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
/* box-shadow: 0 0 0 10px #E0F7FA; */
}
.result-manabi-icon-circle img {
width: 75%;
height: auto;
margin-top: 14px;
}
.result-manabi-icon {
font-size: 30px;
color: #2E8B57;
}
/* --- コンテンツエリア --- */
.result-manabi-content {
text-align: center;
margin-top: 0;
margin-bottom: 15px;
}
.result-manabi-heading {
font-size: 1.2rem;
color: #16B199;
margin: 5px 0 10px;
}
.result-manabi-description {
font-size: 0.9rem;
color: #555;
margin-bottom: 10px;
line-height: 1.6;
}
/* --- 付箋/メモボックス (★修正点★) --- */
.result-manabi-note-box {
background-color: #ffffff;
/* border: 1px solid #90EE90; */
border-radius: 4px;
padding: 35px 20px;
/* 左右10pxのスペースを空けるため、負のマージンを -20px から -10px に調整 */
margin: 0 -10px 0; /* 左右に-10pxを設定し、カードのpadding 30pxから10pxずつ内側に */
position: relative;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.result-manabi-note-box img {
width: 20%;
height: auto;
margin-top: 14px;
position: absolute; /* 親要素を基準に配置する */
top: -40px; /* 親要素の上端から50%の位置 */
left: -5px; /* 親要素の左端から50%の位置 */
/* アイコン自体のサイズや他のスタイル */
}
.result-manabi-pin {
position: absolute;
top: -10px;
left: 20px;
font-size: 20px;
color: #2E8B57;
transform: rotate(15deg);
}
.result-manabi-note-text {
font-size: 0.85rem;
color: #333;
text-align: center;
margin: 0;
line-height: 1.5;
}
/* --- PC/タブレット向けのレスポンシブ対応 --- */
@media (min-width: 768px) {
.result-manabi-cards-wrapper {
flex-direction: row;
gap: 20px;
padding: 0 30px 0 30px;
}
.result-manabi-card {
flex: 1 1 30%;
/* PCでのパディングを調整（左右30px + 10px = 40px） */
padding: 60px 40px 10px;
}
/* アイコンエリア */
.result-manabi-icon-area {
top: -45px;
}
.result-manabi-icon-circle {
width: 90px;
height: 90px;
/* box-shadow: 0 0 0 12px #E0F7FA; */
}
.result-manabi-icon {
font-size: 35px;
}
/* 付箋の幅を調整 (★修正点★) */
.result-manabi-note-box {
/* PCのカードのパディング40pxから10pxずつ内側にするため、-30px に調整 */
margin: 0 -30px 0;
padding: 20px 30px;
}
.result-manabi-heading {
font-size: 1.3rem;
}
.result-manabi-description {
font-size: 1rem;
}
}
/****** 新 放課後学習支援の効果エリア ここまで ******/
/****** 放課後学習支援の効果エリア ここから ******/
/* =============================================
基本スタイル（スマホ表示）
============================================= */
/* --- 全体のコンテナ --- */
.aboutschool-result-container {
background-color: #eff6f5; /* 背景色 */
padding: 60px 20px;
}
/* --- ヘッダー --- */
.aboutschool-result-header {
text-align: center;
margin-bottom: 60px;
}
.aboutschool-result-mainTitle {
color: #008080;
font-size: 1.6rem;
font-weight: 500;
margin: 0 0 8px 0;
}
.aboutschool-result-subTitle {
font-size: 0.9rem;
color: #8c7853;
letter-spacing: 0.1em;
padding-bottom: 10px;
display: inline-block;
position: relative;
margin: 0;
}
.aboutschool-result-subTitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background-color: #8c7853;
}
/* --- 3つのカード --- */
.aboutschool-result-cardsWrapper {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 70px; /* カード間の余白 */
max-width: 960px;
margin: 0 auto;
}
.aboutschool-result-card {
position: relative;
padding-top: 40px; /* アイコンが重なるためのスペース */
}
/* アイコン */
.aboutschool-result-iconWrapper {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: #fff;
border: 3px solid #008080;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.aboutschool-result-icon {
width: 40px;
height: 40px;
color: #008080;
}
/* カード本体 */
.aboutschool-result-cardBody {
border: 2px solid #008080;
border-radius: 8px;
padding: 50px 20px 25px 20px;
background-color: #fff;
text-align: center;
}
.aboutschool-result-cardTitle {
font-size: 1.2rem;
font-weight: 700;
color: #333;
margin: 0 0 10px 0;
}
.aboutschool-result-cardText {
font-size: 0.9rem;
line-height: 1.8;
margin: 0;
}
/* 画鋲の箱 */
.aboutschool-result-pushpinBox {
background-color: #f7f7f7;
border: 1px solid #e9e9e9;
box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
padding: 15px;
margin: 25px auto 0;
position: relative;
max-width: 250px;
}
.aboutschool-result-pushpinIcon {
position: absolute;
top: -10px;
left: 15px;
width: 20px;
height: auto;
}
.aboutschool-result-pushpinText {
font-size: 0.9rem;
font-weight: bold;
color: #555;
margin: 0;
}
/* =============================================
PC向けレイアウト (992px以上)
============================================= */
@media (min-width: 992px) {
.aboutschool-result-container {
padding: 80px 40px;
}
.aboutschool-result-cardsWrapper {
grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
gap: 40px;
position: relative;
}
/* カード間をつなぐ線 */
.aboutschool-result-cardsWrapper::before {
content: '';
position: absolute;
top: 40px; /* アイコンの高さの中央 */
left: 15%;
right: 15%;
height: 2px;
background-color: #008080;
border-radius: 2px;
z-index: 1;
}
.aboutschool-result-cardTitle {
font-size: 1.1rem; /* PCでは少し小さくしてバランスをとる */
}
}
/****** 放課後学習支援の効果エリア ここまで ******/
/****** 実績・導入事例エリア ここから ******/
/* =============================================
基本スタイル（スマホ表示）
============================================= */
/* --- 全体のコンテナ --- */
.aboutschool-casestudies-container {
padding: 60px 20px;
background-color: #fcfcfc; /* 背景色 */
}
/* --- ヘッダー --- */
.aboutschool-casestudies-header {
text-align: center;
margin-bottom: 50px;
}
.aboutschool-casestudies-mainTitle {
font-size: 1.6rem;
color: #8c7853; /* 茶色 */
font-weight: 500;
margin: 0 0 8px 0;
}
.aboutschool-casestudies-subTitle {
font-size: 0.9rem;
color: #333;
letter-spacing: 0.1em;
padding-bottom: 10px;
display: inline-block;
position: relative;
margin: 0 0 25px 0;
}
/* サブタイトルの下線 */
.aboutschool-casestudies-subTitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background-color: #008080; /* ティール色 */
}
.aboutschool-casestudies-description {
font-size: 0.95rem;
line-height: 1.9;
max-width: 650px;
margin: 0 auto;
color: #555;
}
/* --- 3つのカード --- */
.aboutschool-casestudies-cardsWrapper {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 30px;
max-width: 1024px;
margin: 0 auto;
}
/* カード全体 */
.aboutschool-casestudies-card {
border: 2px solid #a9d9d0; /* ティール系の枠線 */
border-radius: 12px;
background-color: #eaf6f4; /* ティール系の背景色 */
overflow: hidden; /* 角丸を適用するため */
}
/* カード上部（白背景の部分） */
.aboutschool-casestudies-cardHeader {
background-color: #fff;
padding: 20px;
display: flex;
align-items: center;
gap: 15px; /* アイコンとタイトルの間の余白 */
}
.aboutschool-casestudies-cardAvatar {
width: 50px;
height: 50px;
border-radius: 50%;
flex-shrink: 0; /* アイコンが縮まないように */
}
.aboutschool-casestudies-cardTitle {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin: 0;
}
/* カード下部（ティール背景の部分） */
.aboutschool-casestudies-cardBody {
padding: 20px;
}
.aboutschool-casestudies-cardText {
font-size: 0.9rem;
line-height: 1.8;
color: #4a4a4a;
margin: 0;
}
/* =============================================
PC向けレイアウト (768px以上)
============================================= */
@media (min-width: 768px) {
.aboutschool-casestudies-container {
padding: 80px 40px;
}
.aboutschool-casestudies-cardsWrapper {
grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
gap: 25px;
}
}
/****** 実績・導入事例エリア ここまで ******/
/****** よくある質問エリア ここから ******/
/* =============================================
基本スタイル（スマホ表示）
============================================= */
/* --- 全体のコンテナ --- */
.aboutschool-faq-container {
padding: 60px 20px;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* --- ヘッダー --- */
.aboutschool-faq-header {
text-align: center;
margin-bottom: 30px;
}
.aboutschool-faq-mainTitle {
font-size: 1.6rem;
color: #8c7853;
font-weight: 500;
margin: 0 0 8px 0;
}
.aboutschool-faq-subTitle {
font-size: 0.9rem;
color: #333;
letter-spacing: 0.1em;
padding-bottom: 10px;
display: inline-block;
position: relative;
margin: 0;
}
.aboutschool-faq-subTitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background-color: #8c7853;
}
/* --- フィルターボタン --- */
.aboutschool-faq-filters {
display: flex;
flex-direction: column; /* スマホでは縦並び */
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.aboutschool-faq-filterButton {
border: none;
border-radius: 50px;
padding: 12px 24px;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: opacity 0.3s;
width: 100%;
max-width: 320px; /* スマホでの最大幅 */
}
.aboutschool-faq-filterButton:hover {
opacity: 0.8;
}
/* 各ボタンの色 */
.aboutschool-faq-filterButton-student { background-color: #f9b53c; }
.aboutschool-faq-filterButton-guardian { background-color: #9acd32; }
.aboutschool-faq-filterButton-business { background-color: #20b2aa; }
/* --- Q&Aリスト --- */
.aboutschool-faq-contentWrapper {
background-color: #fdeec9;
border-radius: 16px;
padding: 20px;
}
.aboutschool-faq-item {
background-color: #fffcf2;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Q&Aアイテム間の余白 */
.aboutschool-faq-item + .aboutschool-faq-item {
margin-top: 15px;
}
/* 質問部分 */
.aboutschool-faq-question {
background-color: #f9d88a;
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.aboutschool-faq-qIcon {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background-color: #fff;
color: #e8a200;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1.1rem;
}
.aboutschool-faq-qText {
margin: 0;
font-weight: bold;
font-size: 1rem;
color: #5f4c21;
}
/* 回答部分 */
.aboutschool-faq-answer {
padding: 20px;
background-color: #fffcf2;
}
.aboutschool-faq-aText {
margin: 0;
font-size: 0.9rem;
line-height: 1.8;
color: #333;
}
/* =============================================
PC向けレイアウト (768px以上)
============================================= */
@media (min-width: 768px) {
.aboutschool-faq-container {
padding: 80px 40px;
}
.aboutschool-faq-filters {
flex-direction: row; /* 横並びにする */
justify-content: center;
gap: 20px;
}
.aboutschool-faq-filterButton {
width: auto; /* 幅を自動に */
max-width: none;
position: relative;
/* フォント設定：明朝体で優しさを表現 */
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", "MS PMincho", "MS Mincho", serif;
}
/* 選択中のボタンを示す矢印 */
.aboutschool-faq-filterButton.is-active::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background-color: inherit; /* 親要素の色を継承 */
}
.aboutschool-faq-contentWrapper {
padding: 40px;
max-width: 800px;
margin: 0 auto;
}
}
/* * ユーザー様が提示したHTMLのラッパー
* 白い背景と中央配置のためのスタイル
*/
#wrap_t_faq {
max-width: 800px;
margin: 30px auto; /* 上下に30px、左右にautoで中央寄せ */
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
h2.block-top-event--header {
font-size: 24px;
text-align: center;
padding: 25px 20px;
margin: 0;
border-bottom: 1px solid #eee;
}
/* --- ① タブ切り替えのCSS --- */
/* タブボタンのコンテナ (flexboxで横並びにする) */
.item-faq-tab {
display: flex;
justify-content: space-around; /* ボタンを均等配置 */
background-color: #f9f9f9;
border-bottom: 1px solid #ddd;
}
/* タブボタンのスタイル */
.js-tab-btn {
flex: 1 1 0; /* 3つのボタンが均等に幅を持つように */
padding: 15px 10px;
text-align: center;
font-weight: bold;
color: #555;
cursor: pointer;
border-bottom: 3px solid transparent; /* 非アクティブ時は透明な下線 */
transition: all 0.2s ease;
}
.js-tab-btn span {
font-weight: normal;
font-size: 0.9em;
}
/* タブボタンのホバー（マウスが乗った時）のスタイル */
.js-tab-btn:hover {
background-color: #f0f0f0;
}
/* * アクティブなタブボタン（.is-active）のスタイル
* 下線を太くし、色を濃くする
*/
.js-tab-btn.is-active {
color: #000;
/* 元のHTMLクラス名に合わせて色を変える例 */
}
.js-tab-btn.is-active.b_yellow {
border-bottom-color: #ffd700; /* 例：黄色 */
}
.js-tab-btn.is-active.boy {
border-bottom-color: #007bff; /* 例：青色 */
}
.js-tab-btn.is-active.girl {
border-bottom-color: #e91e63; /* 例：ピンク色 */
}
/* * タブの中身
* (タブコンテンツのコンテナは .item-top-faq-target)
*/
.js-tab-target {
display: none; /* ★重要：タブの中身は、初期状態ですべて非表示 */
padding: 25px 20px;
}
/* * アクティブなタブの中身（.is-active）のスタイル
* ★重要：JSで .is-active が付いたものだけを表示する
*/
.js-tab-target.is-active {
display: block;
}
/* --- ② アコーディオン（Q&A）のCSS --- */
.block-top-faq-list dl {
margin: 0 0 10px 0;
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden; /* 角丸をキレイに見せるため */
}
/* 質問（Q）のスタイル */
.js-faq-switch {
font-weight: 600;
padding: 15px 45px 15px 15px; /* アイコンの分、右側を空ける */
cursor: pointer;
position: relative;
background-color: #fdfdfd;
}
.js-faq-switch:hover {
background-color: #f5f5f5;
}
/* * 回答（A）のスタイル
* ★重要：初期状態では非表示（高さゼロ）
* max-height を使うことで、開閉アニメーションが可能になる
*/
.js-faq-target {
padding: 0 15px; /* 開いた時の左右の余白 */
background-color: #ffffff;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.js-faq-target p {
margin: 0;
padding-bottom: 15px; /* 回答の下部の余白 */
line-height: 1.6;
}
/* * JSで .is-open が付いた時のスタイル
* ★重要：.is-open が付いた .js-faq-switch の「次の要素」(.js-faq-target)
* の max-height を戻し、padding も戻す
*/
.js-faq-switch.is-open + .js-faq-target {
max-height: 500px; /* 十分な高さ（コンテンツがはみ出ないように） */
padding: 15px 15px 0 15px;
transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}
/* * 開閉アイコン（＋/－）のスタイル
* （::before 疑似要素を使ってアイコンをCSSで描画）
*/
.icon-plus {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
font-weight: bold;
color: #007bff;
}
/* デフォルト「＋」 */
.icon-plus::before {
content: "＋";
transition: all 0.2s;
}
/* .is-open が付いた時「－」 */
.js-faq-switch.is-open .icon-plus::before {
content: "－";
color: #333;
}
/****** よくある質問エリア ここまで ******/
/*///////////// ここまで ///////////////////
// スクール支援についてページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 会社概要ページ
/////////////// ここから /////////////////*/
/****** 代表挨拶エリア ここから ******/
/* === 全体コンテナ === */
.companyschool-greeting-container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
/* === ヘッダータイトル === */
.companyschool-greeting-header {
text-align: center;
margin-bottom: 30px;
}
.companyschool-greeting-main-title {
color: #2E8B57; /* 緑色 */
font-size: 1.5rem;
margin: 0 0 5px 0;
font-weight: 500;
}
.companyschool-greeting-subtitle {
color: #B08D57; /* ゴールドブラウン */
font-size: 0.8rem;
letter-spacing: 1px;
margin: 0;
}
/* === ヒーローセクション（スマホ表示） === */
.companyschool-greeting-hero {
margin-bottom: 40px;
}
.companyschool-greeting-hero-image-wrapper {
text-align: center; /* スマホでは画像を中央に */
margin-bottom: -30px; /* テキストブロックと少し重ねる */
position: relative;
z-index: 2; /* テキストブロックより手前に */
}
.companyschool-greeting-hero-image {
max-width: 200px; /* スマホでの画像サイズ */
height: auto;
border-radius: 5px;
}
.companyschool-greeting-hero-text-wrapper {
background-color: #2E8B57; /* 緑色 */
color: #fff;
padding: 50px 20px 20px 20px; /* 上に余白を多めに */
border-radius: 5px;
}
.companyschool-greeting-hero-headline {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5;
margin: 0 0 15px 0;
}
.companyschool-greeting-hero-info {
font-size: 0.9rem;
line-height: 1.6;
}
.companyschool-greeting-hero-company,
.companyschool-greeting-hero-name {
margin: 0;
}
/* === 本文 === */
.companyschool-greeting-body {
line-height: 1.8;
font-size: 1rem;
}
.companyschool-greeting-paragraph {
margin: 0 0 1.5em 0;
}
/* 画像でハイライトされているテキスト */
.companyschool-greeting-highlight-text {
background: linear-gradient(transparent 60%, #EAF6EC 60%);
font-weight: bold;
}
/* === フッター装飾画像 === */
.companyschool-greeting-footer-image-wrapper {
text-align: center;
margin-top: 40px;
}
.companyschool-greeting-footer-image {
max-width: 150px;
height: auto;
opacity: 0.8;
}
/* === レスポンシブ設定（PC表示） === */
/* 768px以上の画面幅で適用 */
@media (min-width: 768px) {
.companyschool-greeting-container {
padding: 60px 40px;
}
.companyschool-greeting-header {
margin-bottom: 40px;
}
.companyschool-greeting-main-title {
font-size: 1.8rem;
}
/* ヒーローセクションのレイアウトをPC用に変更 */
.companyschool-greeting-hero {
display: flex; /* 横並びに変更 */
align-items: center; /* 中央揃え */
position: relative;
padding-right: 200px; /* 画像がはみ出すスペースを確保 */
min-height: 200px; /* 高さを確保 */
}
.companyschool-greeting-hero-text-wrapper {
flex: 1; /* テキストが残りの幅を全て使う */
text-align: left;
padding: 30px 40px;
z-index: 1;
width: 100%;
}
.companyschool-greeting-hero-headline {
font-size: 1.8rem;
}
.companyschool-greeting-hero-image-wrapper {
position: absolute; /* 親要素を基準に絶対配置 */
right: 0;
top: -40px; /* 上に40pxはみ出す */
width: 280px; /* PCでの画像サイズ */
margin-bottom: 0;
z-index: 2; /* テキストブロックより手前に */
}
.companyschool-greeting-hero-image {
max-width: 100%;
}
}
/****** 代表挨拶エリア ここまで ******/
/****** 企業理念エリア ここから ******/
/* === 全体コンテナ === */
.companyschool-philosophy-container {
max-width: 800px;
margin: 0 auto;
padding: 40px 30px;
text-align: center;
}
/* === ページタイトル === */
.companyschool-philosophy-header {
margin-bottom: 40px;
}
.companyschool-philosophy-main-title {
font-size: 1.5rem;
font-weight: 500;
margin: 0 0 5px 0;
color: #16B199;
}
.companyschool-philosophy-subtitle {
font-size: 0.8rem;
color: #B08D57; /* ゴールドブラウン */
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.companyschool-philosophy-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: #B08D57;
}
/* === キャッチフレーズ === */
.companyschool-philosophy-catchphrase-wrapper {
margin-bottom: 40px;
}
.companyschool-philosophy-catchphrase {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.5;
margin: 0;
color: #804E21;
}
/* === 本文 === */
.companyschool-philosophy-body {
font-size: 1rem;
line-height: 2.2; /* 行間を広めにとる */
}
/* 文章のブロック間に余白を設定 */
.companyschool-philosophy-text-block {
margin-bottom: 2.2em; /* 1行分の高さの余白 */
}
.companyschool-philosophy-text-block:last-child {
margin-bottom: 0;
}
.companyschool-philosophy-paragraph {
margin: 0;
}
/* === レスポンシブ設定（PC表示） === */
/* 768px以上の画面幅で適用 */
@media (min-width: 768px) {
.companyschool-philosophy-container {
padding: 80px 50px; /* PCでは余白を広げる */
}
.companyschool-philosophy-header {
margin-bottom: 60px;
}
.companyschool-philosophy-main-title {
font-size: 1.8rem;
}
.companyschool-philosophy-catchphrase-wrapper {
margin-bottom: 60px;
}
.companyschool-philosophy-catchphrase {
font-size: 2.5rem;
}
.companyschool-philosophy-body {
font-size: 1.1rem;
}
}
/* ======================================================= */
/* ====== 理念セクション アニメーション用スタイル ====== */
/* ======================================================= */
/* ----------------------------------- */
/* 1. アニメーションのキーフレーム定義 (前回と同じもので再利用) */
/* ----------------------------------- */
@keyframes simpleFadeInUp {
0% {
opacity: 0;
transform: translateY(20px); /* 下から上へ移動 */
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ----------------------------------- */
/* 2. アニメーション対象要素の初期状態とアニメーション設定 */
/* ----------------------------------- */
/* --- 第1段階: キャッチフレーズの初期状態 --- */
.companyschool-philosophy-catchphrase-wrapper {
opacity: 0;
transform: translateY(20px);
/* アニメーション設定 */
animation-name: simpleFadeInUp;
animation-duration: 1.0s; /* アニメーション時間 */
animation-fill-mode: forwards; /* 終了後も最終状態を維持 */
animation-delay: 0.3s; /* ページロード後、0.3秒後に開始 */
}
/* --- 第2段階: 本文全体の初期状態 --- */
.companyschool-philosophy-body {
opacity: 0;
transform: translateY(20px);
/* アニメーション設定 */
animation-name: simpleFadeInUp;
animation-duration: 1.2s; /* 少し長めのアニメーション時間 */
animation-fill-mode: forwards;
/* ★★★ 0.3s (キャッチフレーズ開始) + 1.0s (キャッチフレーズアニメ時間) + 0.5s (間隔) = 1.8秒後に開始 ★★★ */
animation-delay: 1.8s;
}
/****** 企業理念エリア ここまで ******/
/****** 会社概要エリア ここから ******/
/* === 全体コンテナ === */
.companyschool-profile-container {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
/* === ページタイトル === */
.companyschool-profile-header {
text-align: center;
margin-bottom: 40px;
}
.companyschool-profile-main-title {
font-size: 1.5rem;
font-weight: 500;
margin: 0 0 5px 0;
color: #16B199;
}
.companyschool-profile-subtitle {
font-size: 0.8rem;
color: #B08D57; /* ゴールドブラウン */
letter-spacing: 1px;
margin: 0 auto;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.companyschool-profile-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: #B08D57;
}
/* === 概要テーブル === */
.companyschool-profile-table {
border-top: 1px solid #B2DFDB; /* 上部の線 */
}
/* テーブルの各行 */
.companyschool-profile-row {
display: flex;
flex-direction: column; /* スマホでは縦積み */
border-bottom: 1px solid #B2DFDB; /* 各行の下線 */
}
/* 見出しセル */
.companyschool-profile-head {
background-color: #E0F2F1; /* 薄いティールグリーン */
padding: 15px;
font-weight: bold;
color: #00796B; /* 少し濃いティールグリーン */
}
/* データセル */
.companyschool-profile-data {
padding: 15px;
line-height: 1.7;
font-size: 1rem;
}
/* 役員などの複数行データ */
.companyschool-profile-data-line {
margin: 0 0 0.5em 0;
}
.companyschool-profile-data-line:last-child {
margin-bottom: 0;
}
/* === レスポンシブ設定（PC表示） === */
/* 768px以上の画面幅で適用 */
@media (min-width: 768px) {
.companyschool-profile-container {
padding: 80px 40px;
}
.companyschool-profile-header {
margin-bottom: 60px;
}
.companyschool-profile-main-title {
font-size: 1.8rem;
}
/* PCではテーブル形式で表示 */
.companyschool-profile-row {
flex-direction: row; /* 横並びに変更 */
}
.companyschool-profile-head {
width: 25%; /* 見出しの幅を固定 */
display: flex;
align-items: center; /* テキストを垂直方向に中央揃え */
justify-content: center; /* テキストを水平方向に中央揃え */
text-align: center;
border-right: 1px solid #B2DFDB;
}
.companyschool-profile-data {
width: 75%; /* データ部分の幅 */
padding: 20px;
}
}
/****** 会社概要エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 会社概要ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 採用情報ページ
/////////////// ここから /////////////////*/
/****** メッセージエリア ここから ******/
/*
* スマホファーストでの基本スタイル（ベース）
*/
.recruitschool-message-container {
/* 日本語の美しい明朝体フォントを指定 */
font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
color: #8d6b52; /* 画像から抽出した茶色 */
text-align: center;
padding: 40px 20px; /* 上下の余白を40px、左右の余白を20pxに設定 */
max-width: 900px; /* PCでも読みやすいように最大幅を設定 */
margin-left: auto;
margin-right: auto;
}
.recruitschool-message-title {
font-size: 1.5rem; /* 24px相当 */
font-weight: 600;
margin-top: 0;
margin-bottom: 40px; /* タイトルと本文の間の余白 */
}
.recruitschool-message-text-wrapper {
/* このラッパーは将来的な拡張のために用意しています */
}
.recruitschool-message-text {
font-size: 1rem; /* 16px相当 */
line-height: 2.0; /* 行間を広めにとり、読みやすさを向上 */
margin-top: 0;
margin-bottom: 24px; /* 各段落間の余白 */
}
/* 最後のp要素の下余白を削除 */
.recruitschool-message-text:last-child {
margin-bottom: 0;
}
/*
* レスポンシブ対応：タブレットサイズ以上（768px以上）で適用
*/
@media (min-width: 768px) {
.recruitschool-message-container {
padding: 60px 40px; /* PCでは余白を広げる */
}
.recruitschool-message-title {
font-size: 2rem; /* 32px相当にフォントサイズを拡大 */
margin-bottom: 60px;
}
.recruitschool-message-text {
font-size: 1.125rem; /* 18px相当にフォントサイズを拡大 */
margin-bottom: 32px;
}
}
/****** メッセージエリア ここまで ******/
/****** 岡田さんメッセージエリア ここから ******/
/* === 全体コンテナ === */
.companyschool-greeting-container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
/* === ヘッダータイトル === */
.companyschool-greeting-header {
text-align: center;
margin-bottom: 30px;
}
.companyschool-greeting-main-title {
color: #16B199; /* 緑色 */
font-size: 1.5rem;
margin: 0 0 5px 0;
font-weight: 500;
}
.companyschool-greeting-subtitle {
color: #B08D57; /* ゴールドブラウン */
font-size: 0.8rem;
letter-spacing: 1px;
margin: 0;
}
/* === ヒーローセクション（スマホ表示） === */
.companyschool-greeting-hero {
margin-bottom: 40px;
}
.companyschool-greeting-hero-image-wrapper {
text-align: center; /* スマホでは画像を中央に */
margin-bottom: -30px; /* テキストブロックと少し重ねる */
position: relative;
z-index: 2; /* テキストブロックより手前に */
}
.companyschool-greeting-hero-image {
max-width: 200px; /* スマホでの画像サイズ */
height: auto;
border-radius: 5px;
}
.companyschool-greeting-hero-text-wrapper {
background-color: #2E8B57; /* 緑色 */
color: #fff;
padding: 50px 20px 20px 20px; /* 上に余白を多めに */
border-radius: 5px;
height: 130px;
}
.companyschool-greeting-hero-headline {
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5;
margin: 0 0 15px 0;
color: #ffffff;
}
.companyschool-greeting-hero-info {
font-size: 0.9rem;
line-height: 1.6;
}
.companyschool-greeting-hero-company,
.companyschool-greeting-hero-name {
margin: 0;
color: #ffffff;
text-align: right;
}
/* === 本文 === */
.companyschool-greeting-body {
line-height: 1.8;
font-size: 1rem;
}
.companyschool-greeting-paragraph {
margin: 0 0 1.5em 0;
}
/* 画像でハイライトされているテキスト */
.companyschool-greeting-highlight-text {
background: linear-gradient(transparent 60%, #EAF6EC 60%);
font-weight: bold;
}
/* === フッター装飾画像 === */
.companyschool-greeting-footer-image-wrapper {
text-align: right;
margin-top: 40px;
}
.companyschool-greeting-footer-image {
max-width: 480px;
height: auto;
opacity: 0.8;
}
/* === レスポンシブ設定（PC表示） === */
/* 768px以上の画面幅で適用 */
@media (min-width: 768px) {
.companyschool-greeting-container {
padding: 60px 40px;
}
.companyschool-greeting-header {
margin-bottom: 40px;
}
.companyschool-greeting-main-title {
font-size: 1.8rem;
}
/* ヒーローセクションのレイアウトをPC用に変更 */
.companyschool-greeting-hero {
display: flex; /* 横並びに変更 */
align-items: center; /* 中央揃え */
position: relative;
padding-right: 200px; /* 画像がはみ出すスペースを確保 */
min-height: 200px; /* 高さを確保 */
}
.companyschool-greeting-hero-text-wrapper {
flex: 1; /* テキストが残りの幅を全て使う */
text-align: left;
padding: 30px 40px;
z-index: 1;
width: 100%;
}
.companyschool-greeting-hero-headline {
font-size: 1.8rem;
}
.companyschool-greeting-hero-image-wrapper {
position: absolute; /* 親要素を基準に絶対配置 */
right: 0;
top: -40px; /* 上に40pxはみ出す */
width: 280px; /* PCでの画像サイズ */
margin-bottom: 0;
z-index: 2; /* テキストブロックより手前に */
}
.companyschool-greeting-hero-image {
max-width: 100%;
}
}
/****** 岡田さんメッセージエリア ここまで ******/
/****** 学びの森で働く魅力エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--recruitschool-charm-color-primary: #16B199; /* メインの緑色 */
--recruitschool-charm-color-text: #333; /* 基本テキスト色 */
--recruitschool-charm-color-brown: #8D6E63; /* サブタイトルの茶色 */
}
/* === 全体コンテナ === */
.recruitschool-charm-container {
/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
/* === ヘッダータイトル === */
.recruitschool-charm-header {
text-align: center;
margin-bottom: 40px;
}
.recruitschool-charm-main-title {
color: var(--recruitschool-charm-color-primary);
font-size: 1.81rem; /* 20px */
font-weight: 600;
margin: 0 0 8px 0;
}
.recruitschool-charm-subtitle {
color: var(--recruitschool-charm-color-brown);
font-size: 0.875rem; /* 14px */
font-weight: bold;
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.recruitschool-charm-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: #B08D57;
}
/* === 魅力の項目 === */
.recruitschool-charm-item {
display: flex;
flex-direction: column; /* スマホでは縦に並べる */
align-items: center;
text-align: center;
margin-top: 40px; /* 各項目の上に余白を追加 */
}
/* 最初の項目には上の余白は不要 */
.recruitschool-charm-item:first-of-type {
margin-top: 0;
}
.recruitschool-charm-image-wrapper {
margin-bottom: 20px;
}
.recruitschool-charm-image {
max-width: 150px;
height: auto;
}
.recruitschool-charm-text-wrapper {
/* テキストコンテナ */
}
.recruitschool-charm-number {
color: var(--recruitschool-charm-color-primary);
font-size: 3rem; /* 48px */
font-weight: bold;
margin: 0;
line-height: 1;
}
.recruitschool-charm-item-title {
color: var(--recruitschool-charm-color-text);
font-size: 1.5rem; /* 24px */
font-weight: 600;
margin: 10px 0;
}
.recruitschool-charm-item-description {
color: var(--recruitschool-charm-color-text);
font-size: 1rem; /* 16px */
line-height: 1.8;
margin: 0;
}
/* === 区切り線 === */
.recruitschool-charm-divider {
border: none;
height: 3px;
background-image: linear-gradient(to right, var(--recruitschool-charm-color-primary) 5px, transparent 5px);
background-size: 10px 3px;
margin-top: 40px;
}
/*
* レスポンシブ対応 (768px以上)
*/
@media (min-width: 768px) {
.recruitschool-charm-container {
padding: 60px 40px;
}
.recruitschool-charm-header {
margin-bottom: 60px;
}
.recruitschool-charm-item {
flex-direction: row;
align-items: center;
text-align: left;
}
.recruitschool-charm-image-wrapper {
margin-bottom: 0;
}
.recruitschool-charm-text-wrapper {
display: flex;
align-items: center;
flex: 1;
}
.recruitschool-charm-number {
font-size: 4rem; /* 64px */
}
/* ★★★ ここから修正 ★★★ */
.recruitschool-charm-item-text-content {
flex: 1; /* テキスト部分が残りのスペースを埋める */
}
/* --- 通常レイアウト（01）のスペース調整 --- */
.recruitschool-charm-image-wrapper {
margin-right: 40px;
}
.recruitschool-charm-number {
margin-right: 20px;
}
/* --- 反転レイアウト（02）の指定 --- */
.recruitschool-charm-item--reverse {
flex-direction: row-reverse;
}
.recruitschool-charm-item--reverse .recruitschool-charm-image-wrapper {
margin-right: 0;
margin-left: 40px; /* 反対側にスペース */
}
/* orderプロパティで見た目の順序を入れ替え */
.recruitschool-charm-item--reverse .recruitschool-charm-number {
order: 2; /* 2番目に表示 */
margin-right: 0;
margin-left: 20px; /* 反対側にスペース */
}
.recruitschool-charm-item--reverse .recruitschool-charm-item-text-content {
order: 1; /* 1番目に表示 */
}
}
/****** 学びの森で働く魅力エリア ここまで ******/
/****** 学びの森の制度紹介エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--recruitschool-working-color-primary: #16B199; /* メインの濃い緑 */
--recruitschool-working-color-secondary: #8D6E63; /* サブタイトルの茶色 */
--recruitschool-working-color-bg: #F0F7F7; /* カードの背景色 */
--recruitschool-working-color-text: #333; /* 基本テキスト色 */
}
/* === 全体コンテナ === */
.recruitschool-working-container {
/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
padding: 40px 20px;
background-color: #fff; /* 背景色を白に設定 */
}
/* === ヘッダータイトル === */
.recruitschool-working-header {
text-align: center;
margin-bottom: 40px;
}
.recruitschool-working-main-title {
color: var(--recruitschool-working-color-primary);
font-size: 1.81rem; /* 20px */
font-weight: 600;
margin: 0 0 8px 0;
}
.recruitschool-working-subtitle {
color: var(--recruitschool-working-color-secondary);
font-size: 0.875rem; /* 14px */
font-weight: bold;
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.recruitschool-working-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: #B08D57;
}
/* === グリッド === */
.recruitschool-working-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 20px;
}
/* === カード === */
.recruitschool-working-card {
background-color: var(--recruitschool-working-color-bg);
border-radius: 16px;
padding: 24px;
}
.recruitschool-working-card-title {
color: var(--recruitschool-working-color-primary);
font-size: 1.125rem; /* 18px */
font-weight: 600;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
.recruitschool-working-card-image-wrapper {
margin-bottom: 20px;
}
.recruitschool-working-card-image {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
/* === リスト === */
.recruitschool-working-card-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.recruitschool-working-card-list-item {
position: relative;
padding-left: 1.2em;
font-size: 0.9rem; /* 14.4px */
line-height: 1.7;
color: var(--recruitschool-working-color-text);
}
/* 最後のリスト項目以外に下の余白を設定 */
.recruitschool-working-card-list-item:not(:last-child) {
margin-bottom: 1em;
}
/* リストの「・」 */
.recruitschool-working-card-list-item::before {
content: '・';
position: absolute;
left: 0;
top: 0;
color: var(--recruitschool-working-color-primary);
font-weight: bold;
}
/*
* レスポンシブ対応 (768px以上)
*/
@media (min-width: 768px) {
.recruitschool-working-container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 60px 40px;
}
.recruitschool-working-grid {
grid-template-columns: 1fr 1fr; /* PCでは2列 */
gap: 30px;
}
.recruitschool-working-card {
padding: 30px;
}
}
/****** 学びの森の制度紹介エリア ここまで ******/
/****** 求人情報エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--recruitschool-information-color-primary: #16B199; /* メインの緑色 */
--recruitschool-information-color-secondary: #8d6b52; /* サブタイトルの茶色 */
--recruitschool-information-color-text: #ffffff; /* 白 */
}
/* === 全体コンテナ === */
.recruitschool-information-container {
/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
/* === ヘッダータイトル === */
.recruitschool-information-header {
text-align: center;
margin-bottom: 40px;
}
.recruitschool-information-main-title {
color: var(--recruitschool-information-color-primary);
font-size: 1.81rem; /* 20px */
font-weight: 600;
margin: 0 0 8px 0;
}
.recruitschool-information-subtitle {
color: var(--recruitschool-information-color-secondary);
font-size: 0.875rem; /* 14px */
font-weight: bold;
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.recruitschool-information-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: #B08D57;
}
/* === グリッド === */
.recruitschool-information-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 20px;
}
/* === カード === */
.recruitschool-information-card {
display: block;
text-decoration: none;
border-radius: 8px;
overflow: hidden;
background-color: var(--recruitschool-information-color-primary);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recruitschool-information-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
/* 画像のティント（緑がかった）表現 */
.recruitschool-information-card-image-wrapper {
background-color: var(--recruitschool-information-color-primary);
}
.recruitschool-information-card-image {
width: 100%;
height: auto;
display: block;
opacity: 0.85; /* 画像を少し透明にして背景の緑色と混ぜる */
}
/* === カード下部（コンテンツ） === */
.recruitschool-information-card-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
color: var(--recruitschool-information-color-text);
}
.recruitschool-information-card-text {
font-size: 1rem; /* 16px */
font-weight: 600;
margin: 0;
color: #ffffff;
}
/* === 矢印アイコン === */
.recruitschool-information-card-arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0; /* 縮まないように設定 */
width: 40px;
height: 40px;
background-color: var(--recruitschool-information-color-text);
color: var(--recruitschool-information-color-primary);
border-radius: 50%;
font-size: 1.5rem; /* 24px */
font-weight: bold;
line-height: 1;
margin-left: 15px; /* テキストとの間に余白 */
}
/*
* レスポンシブ対応
*/
/* 600px以上で2列 */
@media (min-width: 600px) {
.recruitschool-information-grid {
grid-template-columns: 1fr 1fr;
}
}
/* 900px以上で3列 */
@media (min-width: 900px) {
.recruitschool-information-container {
padding: 60px 40px;
}
.recruitschool-information-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}
}
/****** 求人情報エリア ここから ******/
/*///////////// ここまで ///////////////////
// 採用情報ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 求人情報 東京 ページ
/////////////// ここから /////////////////*/
/****** 募集要項エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--jobinformation-application-color-primary: #00a98e; /* メインの濃い緑 */
--jobinformation-application-color-border-light: #b2dfdb; /* 薄い緑の枠線 */
--jobinformation-application-color-subtitle: #8d6b52; /* サブタイトルの茶色 */
--jobinformation-application-color-text: #333;
--jobinformation-application-color-bg-inactive: #f0f7f7; /* 非アクティブタブ背景 */
/* 箇条書きの色 */
--jobinformation-application-color-bullet-green: #00a98e;
--jobinformation-application-color-bullet-blue: #42A5F5;
--jobinformation-application-color-bullet-red: #E57373;
}
/* === 全体コンテナ === */
.jobinformation-application-container {
/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
color: var(--jobinformation-application-color-text);
}
/* === ヘッダータイトル === */
.jobinformation-application-header {
text-align: center;
margin-bottom: 40px;
}
.jobinformation-application-main-title {
color: var(--jobinformation-application-color-primary);
font-size: 1.81rem; /* 20px */
font-weight: 600;
margin: 0 0 8px 0;
}
.jobinformation-application-subtitle {
color: var(--jobinformation-application-color-subtitle);
font-size: 0.875rem; /* 14px */
font-weight: bold;
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.jobinformation-application-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background-color: #B08D57; /* ゴールドブラウン */
}
/* === タブコンポーネント === */
.jobinformation-application-tab-component {
border: 2px solid var(--jobinformation-application-color-border-light);
border-radius: 16px;
padding: 20px;
}
.jobinformation-application-tab-nav {
display: flex;
flex-wrap: wrap; /* スマホでタブが折り返せるように */
margin-bottom: -2px; /* コンテンツの枠線と重ねる */
position: relative;
z-index: 2;
}
.jobinformation-application-tab-button {
padding: 12px 16px;
border: 2px solid var(--jobinformation-application-color-border-light);
border-bottom: none;
border-radius: 8px 8px 0 0;
background-color: var(--jobinformation-application-color-bg-inactive);
color: var(--jobinformation-application-color-primary);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
margin-right: 5px;
margin-bottom: -2px; /* 重なり順のため */
}
.jobinformation-application-tab-button--active {
background-color: var(--jobinformation-application-color-primary);
color: #fff;
border-color: var(--jobinformation-application-color-primary);
z-index: 3;
}
.jobinformation-application-tab-content {
border: 2px solid var(--jobinformation-application-color-primary);
border-radius: 8px 8px 8px 8px;
padding: 30px 20px;
background: #fff;
position: relative;
z-index: 1;
}
/* === コンテンツ行 === */
.jobinformation-application-row {
margin-bottom: 24px;
}
.jobinformation-application-row:last-child {
margin-bottom: 0;
}
.jobinformation-application-label {
display: inline-block;
background-color: var(--jobinformation-application-color-primary);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
padding: 8px 16px;
border-radius: 16px;
margin-bottom: 12px;
}
.jobinformation-application-data {
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
/* === 箇条書きリスト === */
.jobinformation-application-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.jobinformation-application-list-item {
position: relative;
padding-left: 1.5em;
font-size: 1rem;
line-height: 1.7;
}
.jobinformation-application-list-item:not(:last-child) {
margin-bottom: 0.8em;
}
.jobinformation-application-list-item::before {
content: '●';
position: absolute;
left: 0;
top: 0;
font-size: 0.8em; /* 丸のサイズを調整 */
}
/* 箇条書きの色 */
.jobinformation-application-list-item--green::before { color: var(--jobinformation-application-color-bullet-green); }
.jobinformation-application-list-item--blue::before { color: var(--jobinformation-application-color-bullet-blue); }
.jobinformation-application-list-item--red::before { color: var(--jobinformation-application-color-bullet-red); }
/* === アピールポイント テキスト === */
.jobinformation-application-text {
font-size: 1rem;
line-height: 1.7;
}
.jobinformation-application-paragraph {
margin: 0 0 1em 0;
}
.jobinformation-application-paragraph:last-child {
margin-bottom: 0;
}
/*
* レスポンシブ対応 (768px以上)
*/
@media (min-width: 768px) {
.jobinformation-application-tab-component {
padding: 30px;
}
.jobinformation-application-tab-button {
font-size: 1rem;
padding: 14px 24px;
}
.jobinformation-application-tab-content {
padding: 40px 30px;
}
/* PCではグリッドレイアウトに変更 */
.jobinformation-application-row {
display: grid;
grid-template-columns: 160px 1fr; /* 左:ラベル, 右:内容 */
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
}
.jobinformation-application-label {
margin-bottom: 0;
text-align: center; /* ラベル内テキストを中央揃えに */
padding-top: 10px;
padding-bottom: 10px;
}
.jobinformation-application-data,
.jobinformation-application-list,
.jobinformation-application-text {
/* グリッドの開始位置に合わせるため、マージンをリセット */
margin-top: 0;
}
}
/****** 募集要項エリア ここまで ******/
/****** 募集要項エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--jobinformation-team-color-primary: #00a98e; /* メインの緑 */
--jobinformation-team-color-card-bg: #424242; /* カードの濃いグレー */
--jobinformation-team-color-subtitle: #8d6b52; /* サブタイトルの茶色 */
--jobinformation-team-color-text-light: #ffffff; /* 白 */
}
/* === 全体コンテナ === */
.jobinformation-team-container {
/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
padding: 40px 0; /* 上下の余白のみ */
}
/* === ヘッダータイトル === */
.jobinformation-team-header {
text-align: center;
margin-bottom: 40px;
padding: 0 20px; /* 左右の余白 */
}
.jobinformation-team-main-title {
color: var(--jobinformation-team-color-primary);
font-size: 1.81rem; /* 20px */
font-weight: 600;
margin: 0 0 8px 0;
}
.jobinformation-team-subtitle {
color: var(--jobinformation-team-color-subtitle);
font-size: 0.875rem; /* 14px */
font-weight: bold;
letter-spacing: 1px;
margin: 0;
position: relative;
display: inline-block; /* 下線のために必要 */
padding-bottom: 10px;
}
/* サブタイトルの下線 */
.jobinformation-team-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background-color: #B08D57; /* ゴールドブラウン */
}
/* === メインコンテンツ (緑色) === */
.jobinformation-team-main-content {
background-color: var(--jobinformation-team-color-primary);
padding: 40px 20px;
}
/* 導入文 */
.jobinformation-team-intro-text {
color: var(--jobinformation-team-color-text-light);
text-align: center;
max-width: 800px;
margin: 0 auto 40px auto;
}
.jobinformation-team-paragraph {
font-size: 1.2rem;
line-height: 1.8;
margin: 0 0 1em 0;
font-weight: 600;
}
.jobinformation-team-paragraph:last-child {
margin-bottom: 0;
}
/* === 職員グリッド === */
.jobinformation-team-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 30px;
max-width: 1100px;
margin: 0 auto;
}
/* === 職員カード === */
.jobinformation-team-card {
background-color: var(--jobinformation-team-color-card-bg);
color: var(--jobinformation-team-color-text-light);
border-radius: 8px;
overflow: hidden;
}
.jobinformation-team-card-image-wrapper {
/* 将来的に画像の高さを揃える場合などに使用 */
}
.jobinformation-team-card-image {
width: 100%;
height: auto;
display: block;
}
.jobinformation-team-card-body {
padding: 24px;
}
.jobinformation-team-card-title {
font-size: 0.875rem; /* 14px */
margin: 0;
opacity: 0.9;
color: #ffffff;
}
.jobinformation-team-card-name {
font-size: 1.25rem; /* 20px */
font-weight: bold;
margin: 5px 0 20px 0;
color: #ffffff;
}
.jobinformation-team-card-text {
font-size: 0.9rem; /* 14.4px */
line-height: 1.8;
margin: 0;
color: #ffffff;
}
/*
* レスポンシブ対応 (768px以上)
*/
@media (min-width: 768px) {
.jobinformation-team-container {
padding: 60px 0;
}
.jobinformation-team-main-content {
padding: 60px 40px;
}
.jobinformation-team-grid {
grid-template-columns: 1fr 1fr; /* タブレットで2列 */
}
}
/*
* レスポンシブ対応 (1024px以上)
*/
@media (min-width: 1024px) {
.jobinformation-team-grid {
grid-template-columns: 1fr 1fr 1fr; /* PCで3列 */
}
}
/****** 募集要項エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 求人情報 東京 ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// コンタクトフォーム
/////////////// ここから /////////////////*/
/****** 全般 ここから ******/
.contact-manabi {
width: 90%;
margin: 0 auto;
}
.contact-manabi-form {
max-width: 800px;
margin: 0 auto;
}
/****** 全般 ここまで ******/
/****** contact form 7 ここから ******/
.p_contact-wrap{
background:#EFEAE5;
border: 1px solid #CCC7BF;
border-radius: 5px;
padding: 20px;
}
.contact-cell{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #fff;
}
.contact-cell.last{
margin-bottom: 0px;
border-bottom: none;
}
.contact-cell p.title{
margin-bottom: 10px;
}
.contact-cell p.title .hissu{
margin-left: 10px;
border: 1px solid #E05D5D;
color: #E05D5D;
padding: 3px 7px;
border-radius: 5px;
}
.wpcf7-form-control-wrap{
box-sizing: border-box;
}
.contact-cell-item input,.contact-cell-item textarea , .contact-cell-item select{
background: #fff;
padding: 10px 5px;
border: 1px solid #707070;
border-radius: 2px;
width: 100%;
box-sizing: border-box;
font-size: 16px;
}
.contact-cell-item.grid-2 select{
margin-top: 10px;
}
.wpcf7-list-item{
display: block;
}
.wpcf7-list-item {
margin: 0;
}
.wpcf7-list-item{
margin-bottom: 5px;
}
.wpcf7-list-item:last-of-type{
margin-bottom:0;
}
/* ドロップダウンメニュー */
select {
-webkit-appearance: none; /* Safari, Chrome */
-moz-appearance: none; /* Firefox */
appearance: none;
background: none;
}
.contact-select {
position: relative;
}
.contact-select:before {
position: absolute;
top: 50%;
right: 20px;
z-index: 10;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid #837865;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
pointer-events: none;
content: '';
}
/* チェックボックス・ラジオボタン */
input[type="checkbox"]{
border-radius: 50%;
position: relative;
width: 18px;
height: 18px;
margin-right: 1px;
border: 1px solid #837865;
vertical-align: -6px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="checkbox"]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 11px;
height:11px;
border-radius: 50%;
background: #837865;
content: '';
}
/* 送信 */
.contact-cell-submit{
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 500px;
}
input[type="submit"] {
height: 40px;
width: 100%;
background: #837865;
color: #fff;
transition: opacity .6s;
border: none;
border-radius: 2px;
}
input[type="submit"]:hover {
opacity: .6;
}
.wpcf7-spinner{
display: none;
}
input::placeholder {
font-size: 14px;
}
textarea::placeholder {
font-size: 14px;
}
@media screen and (min-width: 768px){
.p_contact-wrap{
padding: 40px;
border-radius: 10px;
}
.contact-cell{
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 40px;
padding-bottom: 40px;
}
.contact-cell p.title{
margin-bottom: 0;
place-items: center;
place-content: center;
}
.contact-cell-item input,.contact-cell-item textarea{
padding: 15px 10px;
border-radius: 5px;
}
input::placeholder {
font-size: 15px;
}
textarea::placeholder {
font-size: 15px;
}
.contact-cell-item .grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
/****** contact form 7 ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// コンタクトフォーム
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// エントリーフォーム
/////////////// ここから /////////////////*/
/****** ここから ******/
/* ======================================================= */
/* ====== 採用フォーム共通スタイル (スマホファースト) ====== */
/* ======================================================= */
:root {
--primary-color: #4CAF50; /* 送信ボタンの緑色 */
--border-color: #ccc;
--placeholder-color: #aaa;
--required-color: #e57373; /* 赤色 */
--bg-field: #f9f9f9; /* 入力フィールドの背景色 */
}
.saiyo-contact-section {
padding: 20px 10px;
background-color: #f7f7f7;
font-family: sans-serif;
}
.saiyo-contact-container {
max-width: 800px;
margin: 0 auto;
padding: 15px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
border-radius: 8px;
}
/* --- セクションタイトル --- */
.saiyo-contact-group-section {
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.saiyo-contact-section-title {
font-size: 1.1rem;
font-weight: bold;
color: #333;
margin: 0 0 20px 0;
padding-left: 10px;
border-left: 4px solid var(--primary-color);
}
/* --- 個別入力項目 --- */
.saiyo-contact-item {
margin-bottom: 20px;
}
.saiyo-contact-item label {
display: block;
font-size: 0.9rem;
font-weight: bold;
color: #555;
margin-bottom: 5px;
}
.saiyo-contact-required-tag {
color: var(--required-color);
font-size: 0.8rem;
margin-left: 5px;
font-weight: normal;
}
/* --- 入力コントロール (input, select, textarea) --- */
.saiyo-contact-control {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-field); /* 入力欄背景色 */
box-sizing: border-box;
font-size: 1rem;
transition: border-color 0.2s;
-webkit-appearance: none; /* iOS Safari用 */
-moz-appearance: none; /* Firefox用 */
appearance: none;
}
.saiyo-contact-control:focus {
border-color: var(--primary-color);
background-color: #fff;
outline: none;
}
/* プレースホルダーのスタイル */
.saiyo-contact-control::placeholder {
color: var(--placeholder-color);
opacity: 1;
}
/* テキストエリア */
.saiyo-contact-item-textarea textarea.saiyo-contact-control {
min-height: 150px;
resize: vertical;
}
/* 日付入力欄の特殊対応 */
.saiyo-contact-date-wrapper {
position: relative;
}
/* セレクトボックスの右端の矢印をカスタム */
.saiyo-contact-item-select select.saiyo-contact-control {
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%20173.5c-3.7%203.7-7.7%205.5-12.7%205.5s-9-1.8-12.7-5.5L146.2%2079.1%2030.8%20173.5c-3.7%203.7-7.7%205.5-12.7%205.5s-9-1.8-12.7-5.5c-7.4-7.4-7.4-19.2%200-26.6L133.5%2047.8c7.4-7.4%2019.2-7.4%2026.6%200l119.3%20119.1c7.4%207.4%207.4%2019.2%200%2026.6z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 10px top 50%;
background-size: 12px auto;
padding-right: 30px; /* 矢印分のスペースを確保 */
}
/* カレンダーアイコンの簡易表示 */
.saiyo-contact-calendar-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 1.2rem;
color: #888;
}
/* --- 送信ボタンエリア --- */
.saiyo-contact-submit-area {
text-align: center;
margin-top: 30px;
}
.saiyo-contact-privacy-note {
font-size: 0.8rem;
color: #666;
margin-bottom: 15px;
}
.saiyo-contact-submit-button {
width: 90%;
max-width: 300px;
padding: 12px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
.saiyo-contact-submit-button:hover {
background-color: #388E3C; /* 濃い緑 */
}
/* ======================================================= */
/* ====== PC/タブレット向けレスポンシブ対応 (min-width: 600px) ====== */
/* ======================================================= */
@media (min-width: 600px) {
.saiyo-contact-container {
padding: 40px;
}
.saiyo-contact-submit-button {
padding: 15px 30px;
max-width: 350px;
}
}
/* ======================================================= */
/* ====== 送信ボタンエリアの強制調整 (CF7対応) ====== */
/* ======================================================= */
/* CF7が自動挿入する
タグの余白をリセット */
.saiyo-contact-submit-area p {
margin: 0;
padding: 0;
}
/* プライバシーノートのスタイルを維持 */
.saiyo-contact-submit-area .saiyo-contact-privacy-note {
font-size: 0.8rem;
color: #666;
margin-bottom: 15px; /* ここだけ下マージンを残す */
}
/* ボタン要素自体にスタイルを強制適用 */
.saiyo-contact-submit-area input.saiyo-contact-submit-button {
/* 以前の .saiyo-contact-submit-button の内容をここに移す */
width: 90%;
max-width: 300px;
padding: 12px 20px 37px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
.saiyo-contact-submit-area input.saiyo-contact-submit-button:hover {
background-color: #388E3C;
}
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// エントリーフォーム
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// Youtube埋め込み
/////////////// ここから /////////////////*/
/****** ここから ******/
.youtube-manabi {
display: flex; /* Flexコンテナにする */
justify-content: center; /* 子要素（iframe）を水平方向の中央に配置 */
/* 必要に応じて、高さやその他のスタイルを追加できます */
}
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// Youtube埋め込み
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 〇〇
/////////////// ここから /////////////////*/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 〇〇
////////////////////////////////////////////*/
/****** setting start ******/
/****** setting end ******/