*/
.margin50 {
height: 50px;
}
/* PC50、スマホ25
*/
.margin50-25 {
height: 25px;
}
@media screen and (min-width: 768px) {
.margin50-25 {
height: 50px;
}
}
/****** マージン（縦方向） ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 共通セッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ヘッダー
/////////////// ここから /////////////////*/
nav {
position:fixed;
width: 100%;
height: 70px;
background: #ffffff;
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;
width: 280px;
}
.logo img{
margin-left: 20px;
margin-top: -5px;
margin-bottom: -18px;
height: 65px;
width: auto;
object-fit: contain;
padding-top: 0;
}
.logo h1 {
padding: 13px 0 0px 0;
font-size: 35px;
font-family: "Hiragino Mincho ProN", "MS Mincho", "Yu Mincho", "ＭＳ 明朝", serif;
}
.logo a {
display: block; /* リンクをブロック要素にして中身を包み込む */
/* 必要に応じて width や height も指定 */
}
/*トグルボタンのスタイルを指定*/
.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;/*滑らかに表示*/
/* 新規追加: 画面全体を覆うように設定 */
position: fixed;
top: 0;
right: 0;
width: 100vw; /* ビューポート幅に確実に合わせる */
height: 100vh; /* ビューポート高さに合わせる */
z-index: 999; /* nav (1000)より低く */
background:#ffffff; /* 背景色を設定 */
-webkit-transform: translateX(100%);
transform: translateX(100%); /*左に隠しておく*/
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
}
/*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: #333333;
}
.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;
}
}
/*///////////// ここまで ///////////////////
// ヘッダーセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// フッターセッティング
/////////////// ここから /////////////////*/
/* 問合せエリア ここから */
/* 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: #005F92; /* 背景色を画像に合わせて設定 */
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;
}
.footer-pack-copy {
text-align: center;
background-color: #005F92;
}
.footer-pack-copy p {
font-size: 17px;
color: #ffffff;
}
@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;
}
}
/*///////////// ここまで ///////////////////
// フッターセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ホームページ
/////////////// ここから /////////////////*/
/****** 想いを込めて ここから ******/
/****** 想いを込めて ここまで ******/
/****** ニュースエリア ここから ******/
/* ベーススタイル */
.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;
}
}
/****** スクール支援とはエリア ここまで ******/
/****** 学びの森の特徴エリア ここから ******/
/* ==============================
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: 0.95rem;
line-height: 1.8;
max-width: 600px;
margin: 0 auto; /* 中央揃え */
}
/* --- グリッド部分 --- */
.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: #333;
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; /* 縦の隙間, 横の隙間 */
}
}
/****** 支援内容の紹介エリア ここまで ******/
/****** 放課後学習支援の効果エリア ここから ******/
/* =============================================
基本スタイル（スマホ表示）
============================================= */
/* --- 全体のコンテナ --- */
.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: 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Meiryo', sans-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;
}
/* 選択中のボタンを示す矢印 */
.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;
}
.companyschool-philosophy-subtitle {
font-size: 0.8rem;
color: #B08D57; /* ゴールドブラウン */
letter-spacing: 1px;
margin: 0;
}
/* === キャッチフレーズ === */
.companyschool-philosophy-catchphrase-wrapper {
margin-bottom: 40px;
}
.companyschool-philosophy-catchphrase {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.5;
margin: 0;
color: #5D4037;
}
/* === 本文 === */
.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;
}
}
/****** 企業理念エリア ここまで ******/
/****** 会社概要エリア ここから ******/
/* === 全体コンテナ === */
.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;
}
.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: #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%;
}
}
/****** 岡田さんメッセージエリア ここまで ******/
/****** 学びの森で働く魅力エリア ここから ******/
/*
* 基本スタイル（スマホファースト）
*/
/* 変数定義 */
:root {
--recruitschool-charm-color-primary: #00897B; /* メインの緑色 */
--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.25rem; /* 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;
}
/* === 魅力の項目 === */
.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: #00695C; /* メインの濃い緑 */
--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.25rem; /* 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;
}
/* === グリッド === */
.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: #00a98e; /* メインの緑色 */
--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.25rem; /* 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;
}
/* === グリッド === */
.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;
}
/* === 矢印アイコン === */
.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.25rem; /* 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;
}
/* === タブコンポーネント === */
.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: 0 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.25rem; /* 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;
}
/* === メインコンテンツ (緑色) === */
.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: 1rem;
line-height: 1.8;
margin: 0 0 1em 0;
}
.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;
}
.jobinformation-team-card-name {
font-size: 1.25rem; /* 20px */
font-weight: bold;
margin: 5px 0 20px 0;
}
.jobinformation-team-card-text {
font-size: 0.9rem; /* 14.4px */
line-height: 1.8;
margin: 0;
}
/*
* レスポンシブ対応 (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列 */
}
}
/****** 募集要項エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 求人情報 東京 ページ
////////////////////////////////////////////*/
/****** brightbridge ここからスタート↓↓↓↓↓ ******/
*, *::before, *::after {
box-sizing: border-box;
}
body {
overflow-x: hidden; /* 横スクロールを強制的に禁止する安全策 */
width: 100%;
}
/*/////////////////////////////////////////////
// Bright Bridge トップページ
/////////////// ここから /////////////////*/
/****** ファーストビューエリア ここから ******/
/* =========================================
Bright Bridge ファーストビュー専用スタイル
========================================= */
/* --- コンテナ設定（スマホファースト） --- */
.toppage-fastview-container {
position: relative;
width: 100%;
/* スマホでの高さ（下のナビが見えるように少し低めに設定） */
height: 420px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
/* ナビがはみ出す分の余白を確保 */
margin-bottom: 40px;
overflow: visible;
box-sizing: border-box;
}
/* --- 背景画像（HTMLのimgタグ制御） --- */
.toppage-fastview-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* 画像切り替え時のふわっとした動き */
transition: opacity 0.4s ease;
}
/* --- 白いフィルター（文字を読みやすくするため） --- */
.toppage-fastview-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.35);
z-index: 1;
pointer-events: none;
}
/* --- メインコンテンツエリア --- */
.toppage-fastview-content {
position: relative;
z-index: 2; /* フィルターより上 */
width: 100%;
max-width: 1000px;
}
/* サブコピー（学生一人ひとりの） */
.toppage-fastview-sub-copy {
font-size: 1rem;
font-weight: 700;
color: #444;
margin-bottom: 0.5rem;
}
/* メインコピー */
.toppage-fastview-main-copy {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.6;
color: #333;
margin-bottom: 1.5rem;
}
/* 「なりたい未来」の枠線ボックス */
.toppage-fastview-box-text {
display: inline-block;
border: 2px solid #333;
padding: 0 8px;
background-color: rgba(255, 255, 255, 0.6);
margin-right: 2px;
}
.toppage-fastview-particle {
font-size: 0.9em;
}
/* リンクボタン */
.toppage-fastview-link-wrapper {
margin-top: 10px;
}
.toppage-fastview-link {
display: inline-block;
text-decoration: none;
color: #006699;
font-weight: bold;
font-size: 0.9rem;
border-bottom: 2px solid #006699;
padding-bottom: 2px;
transition: opacity 0.3s;
}
.toppage-fastview-link:hover {
opacity: 0.7;
}
/* --- 下部ナビゲーションリスト --- */
.toppage-fastview-nav-list {
position: absolute;
bottom: -30px; /* コンテナから30pxはみ出させる */
left: 50%;
transform: translateX(-50%);
width: 94%;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 15px 0;
z-index: 10;
border-radius: 2px;
}
.toppage-fastview-nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
gap: 5px;
flex: 1;
transition: background-color 0.3s;
cursor: pointer;
}
.toppage-fastview-nav-item:hover {
background-color: #fafafa;
}
/* ナビアイコン画像 */
.toppage-fastview-nav-img-box {
width: 35px;
height: 35px;
}
.toppage-fastview-nav-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
/* ナビテキスト */
.toppage-fastview-nav-text {
font-size: 0.7rem;
font-weight: bold;
color: #aaa;
letter-spacing: 0.05em;
font-family: sans-serif;
}
/* Beautyだけ青くする場合 */
.toppage-fastview-color-beauty {
color: #006699;
}
/* 区切り線 */
.toppage-fastview-nav-divider {
width: 1px;
height: 30px;
background-color: #eee;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
/* --- コンテナ設定（スマホファースト） --- */
.toppage-fastview-container {
position: relative;
width: 100%;
/* 画像を縦長に見せるための高さ */
height: 600px;
display: flex;
/* コンテンツを下揃えにする */
align-items: flex-end;
justify-content: center;
/* ▼▼▼ ここを変更しました ▼▼▼ */
/* 下の余白を80pxから20pxに減らして、文字を限界まで下に下げました */
padding: 0 20px 20px 20px;
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
/* ナビがはみ出す分の余白を確保 */
margin-bottom: 40px;
overflow: visible;
box-sizing: border-box;
}
.toppage-fastview-content {
max-width: 1100px;
width: 90%;
margin: 0 auto;
display: block;
}
.toppage-fastview-sub-copy {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.toppage-fastview-main-copy {
font-size: 2.8rem;
line-height: 1.5;
margin-bottom: 2rem;
}
.toppage-fastview-box-text {
border-width: 3px;
padding: 2px 15px;
}
.toppage-fastview-link {
font-size: 1.1rem;
}
/* ナビゲーションのPCレイアウト */
.toppage-fastview-nav-list {
width: 80%;
max-width: 900px;
bottom: -50px;
padding: 25px 0;
}
.toppage-fastview-nav-item {
flex-direction: row; /* 横並びに戻す */
justify-content: center;
gap: 15px;
}
.toppage-fastview-nav-img-box {
width: 50px;
height: 50px;
}
.toppage-fastview-nav-text {
font-size: 1rem;
}
}
/****** ファーストビューエリア ここまで ******/
/****** Bright Bridgeが選ばれる3つの理由エリア ここから ******/
/* =========================================
Bright Bridge 選ばれる3つの理由
========================================= */
/* --- コンテナ設定（スマホファースト） --- */
.toppage-reason-container {
width: 100%;
background-color: #f9f9f9; /* 全体の背景色（薄いグレー） */
padding: 60px 20px;
display: flex;
flex-direction: column; /* スマホは縦積み */
gap: 40px;
}
/* --- 左側：テキストエリア --- */
.toppage-reason-text-area {
width: 100%;
}
.toppage-reason-title {
font-size: 1.8rem;
font-weight: 700;
color: #006699; /* 青色 */
line-height: 1.4;
margin-bottom: 20px;
}
.toppage-reason-desc {
font-size: 1rem;
line-height: 1.8;
color: #444;
margin-bottom: 30px;
text-align: justify; /* 両端揃えできれいに見せる */
}
.toppage-reason-link-wrapper {
text-align: right; /* 「詳しくみる」を右寄せ */
}
.toppage-reason-link {
display: inline-block;
color: #006699;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #006699;
padding-bottom: 2px;
transition: opacity 0.3s;
}
.toppage-reason-link:hover {
opacity: 0.7;
}
/* --- 右側：カードリスト --- */
.toppage-reason-cards {
width: 100%;
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 20px;
}
/* カード単体 */
.toppage-reason-card {
background-color: #fff;
border-radius: 8px; /* 角丸 */
overflow: hidden; /* はみ出した画像を隠す */
box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* うっすら影 */
display: flex;
flex-direction: column;
}
/* 画像エリア */
.toppage-reason-img-box {
position: relative;
width: 100%;
height: 200px;
}
.toppage-reason-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* REASONバッジ（縦書きの帯） */
.toppage-reason-badge {
position: absolute;
top: 0;
left: 15px;
background-color: #006699; /* 帯の色 */
color: #fff;
font-family: serif; /* 明朝体っぽいフォント */
font-weight: bold;
padding: 15px 8px;
writing-mode: vertical-rl; /* 縦書きにする */
text-orientation: mixed; /* 文字の向き調整 */
letter-spacing: 0.2em; /* 文字間隔 */
font-size: 0.9rem;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
/* カード本文エリア（水色背景） */
.toppage-reason-card-body {
background-color: #DBF8FF; /* 薄い水色 */
padding: 20px;
flex-grow: 1; /* 高さを揃えるため */
display: flex;
flex-direction: column;
justify-content: center;
}
.toppage-reason-card-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.toppage-reason-card-text {
font-size: 0.9rem;
line-height: 1.6;
color: #444;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.toppage-reason-container {
flex-direction: row; /* 横並びにする */
align-items: flex-start; /* 上揃え */
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
gap: 60px;
}
/* 左側テキストエリアの幅 */
.toppage-reason-text-area {
width: 30%;
position: sticky; /* スクロールしても追従させる演出ができる（任意） */
top: 50px;
}
.toppage-reason-title {
font-size: 2rem;
}
/* 右側カードエリアの幅 */
.toppage-reason-cards {
width: 65%;
flex-direction: row; /* カードを横並びにする */
gap: 20px;
}
.toppage-reason-card {
width: 33.33%; /* 3等分 */
}
.toppage-reason-img-box {
height: 220px; /* 画像の高さを少し調整 */
}
}
/****** Bright Bridgeが選ばれる3つの理由エリア ここまで ******/
/****** サービス紹介エリア ここから ******/
/* =========================================
Bright Bridge サービス紹介セクション
========================================= */
/* --- 全体ラッパー --- */
.toppage-service-wrapper {
position: relative;
width: 100%;
padding: 60px 0 60px 0;
overflow: hidden;
background-color: #fff;
}
/* 背景の巨大文字 "SERVICE" */
.toppage-service-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
font-size: 20vw;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #ade8ff;
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテンツエリア --- */
.toppage-service-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* --- ヘッダーエリア --- */
.toppage-service-header {
text-align: center;
margin-bottom: 50px;
}
.toppage-service-en-title {
display: block;
font-size: 1rem;
font-weight: bold;
color: #006699;
margin-bottom: 5px;
text-transform: uppercase;
}
.toppage-service-jp-title {
font-size: 2rem;
font-weight: 700;
color: #006699;
margin-bottom: 20px;
}
.toppage-service-desc {
font-size: 0.95rem;
line-height: 1.8;
color: #333;
font-weight: 500;
}
.toppage-service-pc-br {
display: none;
}
/* --- カードリスト --- */
.toppage-service-card-list {
display: flex;
flex-direction: column;
gap: 30px;
}
/* --- カード単体 --- */
.toppage-service-card {
display: block;
text-decoration: none;
background: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.toppage-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* 画像エリア */
.toppage-service-img-box {
width: 100%;
height: 220px;
}
.toppage-service-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* コンテンツエリア（青背景） */
.toppage-service-card-content {
background-color: #006699;
color: #ffffff; /* ここで白文字を指定 */
padding: 25px 20px;
height: 100%;
}
/* カード見出し行（タイトル＋矢印） */
.toppage-service-card-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.3);
padding-bottom: 15px;
margin-bottom: 15px;
}
/* ▼▼▼ 修正箇所：タイトルを強制的に白にする ▼▼▼ */
.toppage-service-card-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: #ffffff !important; /* 強制的に白にする */
}
/* 白丸矢印アイコン */
.toppage-service-arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: #fff;
color: #006699;
border-radius: 50%;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
/* リストテキスト */
.toppage-service-card-text-list {
list-style: none;
padding: 0;
margin: 0;
}
.toppage-service-card-text-list li {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 5px;
color: #ffffff; /* テキストも白 */
}
.toppage-service-card-text-list li:last-child {
margin-bottom: 0;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.toppage-service-bg-text {
font-size: 13vw;
top: 20px;
}
.toppage-service-desc {
font-size: 1rem;
}
.toppage-service-pc-br {
display: block;
}
.toppage-service-card-list {
flex-direction: row;
justify-content: space-between;
}
.toppage-service-card {
width: 32%;
display: flex;
flex-direction: column;
}
.toppage-service-img-box {
height: 200px;
}
.toppage-service-card-content {
flex-grow: 1;
}
}
/****** サービス紹介エリア ここまで ******/
/****** 私たちについてエリア ここから ******/
/* =========================================
Bright Bridge 私たちについて (About)
========================================= */
/* --- 全体ラッパー --- */
.toppage-about-wrapper {
position: relative;
width: 100%;
padding: 60px 0 60px 0;
overflow: hidden;
background-color: #fff;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", serif; /* 明朝体指定 */
}
/* 背景の巨大文字 "ABOUT" */
.toppage-about-bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 上下左右中央配置 */
font-size: 25vw; /* 画面幅に応じて巨大化 */
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #e5f4fa; /* 薄い水色の縁取り */
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.6;
font-family: sans-serif; /* 背景文字はゴシック系で見やすく */
}
/* --- コンテンツエリア --- */
.toppage-about-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 900px; /* 文章が広がりすぎないように幅を制限 */
margin: 0 auto;
text-align: center;
}
/* --- ヘッダーエリア --- */
.toppage-about-header {
margin-bottom: 50px;
font-family: 'Noto Sans JP', sans-serif; /* タイトルはゴシック体 */
}
.toppage-about-en-title {
display: block;
font-size: 0.9rem;
font-weight: bold;
color: #006699;
margin-bottom: 5px;
}
.toppage-about-jp-title {
font-size: 2rem;
font-weight: 700;
color: #006699;
letter-spacing: 0.05em;
}
/* --- 本文エリア --- */
.toppage-about-content {
color: #333;
}
/* キャッチコピー */
.toppage-about-tagline {
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 40px;
line-height: 1.6;
}
/* 本文テキスト */
.toppage-about-text {
font-size: 1rem;
line-height: 2.2; /* 行間を広めに取って読みやすく */
margin-bottom: 30px;
font-weight: 400;
}
.toppage-about-pc-br {
display: none; /* スマホでは自動改行に任せる */
}
/* --- 署名エリア --- */
.toppage-about-signature {
margin-top: 50px;
font-size: 1.1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.toppage-about-role {
font-size: 0.9rem;
color: #555;
}
.toppage-about-name {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.2em;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.toppage-about-wrapper {
padding: 10px 0 100px 0;
}
.toppage-about-bg-text {
font-size: 18vw; /* PCでは少しサイズ感を調整 */
}
.toppage-about-tagline {
font-size: 1.8rem;
margin-bottom: 50px;
}
.toppage-about-text {
font-size: 1.05rem;
}
.toppage-about-pc-br {
display: block; /* PCでは指定の位置で改行 */
}
.toppage-about-signature {
margin-top: 70px;
gap: 20px;
}
}
/****** 私たちについてエリア ここまで ******/
/****** お問い合わせフォームバナーエリア ここから ******/
/* =========================================
Bright Bridge お問合せバナー
========================================= */
/* --- 全体ラッパー --- */
.toppage-banner-wrapper {
width: 100%;
padding: 60px 20px;
background-color: #fff;
display: flex;
justify-content: center;
}
/* --- バナー本体（Flexboxコンテナ） --- */
.toppage-banner-inner {
width: 100%;
max-width: 1000px;
display: flex;
flex-direction: column; /* スマホは縦積み */
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border-radius: 4px;
overflow: hidden;
}
/* --- 左側：画像エリア --- */
.toppage-banner-img-box {
width: 100%;
height: 250px; /* スマホでの画像の高さ */
}
.toppage-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* --- 右側：テキストエリア --- */
.toppage-banner-content {
width: 100%;
background-color: #006090; /* 濃いめの青 */
color: #fff;
padding: 40px 20px;
/* ▼▼▼ 上下左右中央揃えの設定 ▼▼▼ */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* これでボタンも真ん中に来ます */
}
.toppage-banner-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.4;
color: #ffffff;
}
.toppage-banner-text {
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 30px;
font-weight: 500;
}
/* --- ボタンデザイン --- */
.toppage-banner-btn {
display: inline-block;
background-color: #fff;
color: #006090;
font-weight: bold;
text-decoration: none;
padding: 12px 40px;
border-radius: 50px;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.toppage-banner-btn:hover {
background-color: #e6f4fa;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.toppage-banner-inner {
flex-direction: row; /* PCは横並び */
height: 320px; /* バナー全体の高さ固定 */
}
/* 画像エリア */
.toppage-banner-img-box {
width: 45%; /* 左側45% */
height: 100%;
}
/* テキストエリア */
.toppage-banner-content {
width: 55%; /* 右側55% */
padding: 40px 50px;
/* ▼▼▼ PCでも中央揃えを維持 ▼▼▼ */
align-items: center;
text-align: center;
}
.toppage-banner-title {
font-size: 1.6rem;
color: #ffffff;
}
}
.toppage-banner-text {
font-size: 1rem;
color: #ffffff;
}
}
/****** お問い合わせフォームバナーエリア ここまで ******/
/*///////////// ここまで ///////////////////
// Bright Bridge トップページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// Bright Bridgeについてページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* =========================================
Aboutページ タイトルヘッダー
========================================= */
/* --- 全体ラッパー --- */
.about-title-wrapper {
position: relative;
width: 100%;
height: 250px; /* スマホでの高さ */
display: flex;
align-items: flex-end; /* テキストを下揃え */
justify-content: flex-start; /* テキストを左揃え */
padding: 20px;
overflow: hidden; /* 画像のはみ出し防止 */
}
/* --- 背景画像設定（HTMLのimgタグ制御） --- */
.about-title-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
object-fit: cover; /* 画像をエリアいっぱいに広げる */
object-position: center; /* 画像の中心を表示 */
z-index: 0; /* 最背面 */
}
/* --- 下部グラデーション（文字を読みやすくする影） --- */
.about-title-wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%; /* 下半分くらいに影をかける */
background: linear-gradient(to top, rgba(22 75 217 / 60%), transparent);
z-index: 1; /* 画像より手前 */
pointer-events: none;
}
/* --- タイトルテキスト --- */
.about-title-text {
position: relative;
z-index: 2; /* グラデーションよりさらに手前 */
color: #ffffff;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.05em;
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin: 0;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.about-title-wrapper {
height: 300px ; /* PCでの高さ */
padding: 40px 10%;
}
.about-title-text {
font-size: 3rem;
}
}
/****** タイトルエリア ここまで ******/
/****** メッセージエリア ここから ******/
/* =========================================
Aboutページ メッセージセクション
========================================= */
/* --- 全体ラッパー --- */
.about-message-wrapper {
width: 100%;
padding-top: 100px; /* 上の余白 */
padding-bottom: 0; /* 下は画像がくっつくので0 */
background-color: #fff;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", serif; /* 全体を明朝体に */
}
/* --- コンテンツコンテナ --- */
.about-message-container {
width: 90%;
max-width: 900px;
margin: 0 auto;
text-align: center;
margin-bottom: 80px; /* 下の画像との余白 */
}
/* --- メインタイトル（青色） --- */
.about-message-main-title {
font-size: 1.5rem; /* スマホサイズ */
font-weight: 700;
color: #006699; /* 指定の青色 */
margin-bottom: 50px;
line-height: 1.5;
font-family: 'Noto Sans JP', sans-serif; /* タイトルはゴシック体で見やすく */
}
/* --- 本文エリア --- */
.about-message-body {
color: #333;
}
.about-message-text {
font-size: 0.95rem;
line-height: 2.2; /* 行間を広めにとって読みやすく */
margin-bottom: 30px;
font-weight: 500;
}
.about-message-pc-br {
display: none; /* スマホでは自動改行 */
}
/* --- 下部画像ギャラリー --- */
.about-message-gallery {
width: 100%;
display: flex;
flex-wrap: wrap; /* 折り返し許可 */
margin-top: 40px;
}
.about-message-gallery-item {
width: 50%; /* スマホでは2列 */
aspect-ratio: 16 / 9; /* 横長比率 */
overflow: hidden;
}
.about-message-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
vertical-align: bottom; /* 画像下の微妙な隙間を消すおまじない */
}
.about-message-gallery-item:hover .about-message-gallery-img {
transform: scale(1.05); /* ホバー時にゆっくり拡大 */
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.about-message-wrapper {
padding-top: 120px;
}
.about-message-main-title {
font-size: 2rem;
margin-bottom: 60px;
}
.about-message-text {
font-size: 1.1rem;
margin-bottom: 40px;
}
.about-message-pc-br {
display: block; /* PCでのみ改行を有効化 */
}
/* ギャラリーのPC表示 */
.about-message-gallery-item {
width: 16.666%; /* PCでは横一列（6枚の場合） */
}
}
/****** メッセージエリア ここまで ******/
/****** ミッションエリア ここから ******/
/* =========================================
Aboutページ Missionセクション
========================================= */
/* --- 全体ラッパー --- */
.about-mission-wrapper {
position: relative;
width: 100%;
padding: 80px 0;
background-color: #fff;
overflow: hidden; /* 背景文字のはみ出し防止 */
font-family: "Noto Sans JP", sans-serif;
}
/* 背景の巨大文字 "MISSION" */
.about-mission-bg-text {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 20vw; /* 画面幅に応じた巨大サイズ */
font-weight: 900;
line-height: 1;
color: transparent; /* 文字の中は透明 */
-webkit-text-stroke: 1px #ade8ff; /* 薄い水色の縁取り */
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテンツコンテナ --- */
.about-mission-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1100px;
margin: 0 auto;
}
/* --- ヘッダーエリア --- */
.about-mission-header {
text-align: center;
margin-bottom: 50px;
}
.about-mission-en-title {
display: block;
font-size: 0.9rem;
font-weight: bold;
color: #006699;
margin-bottom: 5px;
text-transform: uppercase;
}
.about-mission-jp-title {
font-size: 1.5rem;
font-weight: 700;
color: #006699;
line-height: 1.4;
}
/* --- カードリスト --- */
.about-mission-card-list {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 40px;
}
/* --- カード単体 --- */
.about-mission-card {
width: 100%;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 画像エリア */
.about-mission-img-box {
width: 100%;
height: 250px;
}
.about-mission-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* 画像下の隙間消し */
}
/* --- コンテンツエリア --- */
.about-mission-content {
width: 100%;
}
/* カードタイトル（青い帯） */
.about-mission-card-title {
background-color: #006090; /* 濃い青 */
color: #fff;
padding: 20px;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
margin: 0;
line-height: 1.5;
}
.about-mission-sp-br {
display: block; /* スマホでは改行 */
}
/* カード本文（グレーっぽい青背景） */
.about-mission-card-body {
background-color: #DBF8FF; /* 画像から抽出したくすみブルー */
padding: 30px;
}
.about-mission-text {
font-size: 0.95rem;
line-height: 1.8;
color: #fff; /* 文字色は白や薄いグレーが見やすいかと思いますが、画像に合わせて黒系にする場合は #333 にしてください */
/* 画像を見ると文字は黒っぽいので以下を適用します */
color: #333;
text-align: justify; /* 両端揃え */
font-weight: 500;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.about-mission-bg-text {
font-size: 15vw;
top: 20px;
}
.about-mission-jp-title {
font-size: 2rem;
}
.about-mission-card-list {
flex-direction: row; /* PCは横並び */
justify-content: space-between;
align-items: stretch; /* 高さを揃える */
gap: 30px;
}
.about-mission-card {
width: 48%; /* 2列配置 */
display: flex;
flex-direction: column;
}
.about-mission-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.about-mission-card-body {
flex-grow: 1; /* 本文エリアの高さを揃える */
}
.about-mission-sp-br {
display: none; /* PCでは改行しない */
}
}
/****** ミッションエリア ここまで ******/
/****** Bright Bridgeが選ばれる3つの理由エリア ここから ******/
/* =========================================
Featureセクション (about-feature)
========================================= */
/* --- 全体ラッパー --- */
.about-feature-wrapper {
position: relative;
width: 100%;
padding: 80px 0;
background-color: #fff;
overflow: hidden;
font-family: "Noto Sans JP", sans-serif;
}
/* 背景の巨大文字 "FEATURE" */
.about-feature-bg-text {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 20vw;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #ade8ff;
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテナ --- */
.about-feature-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
/* --- ヘッダー --- */
.about-feature-header {
text-align: center;
margin-bottom: 60px;
}
.about-feature-en-title {
display: block;
font-size: 0.9rem;
font-weight: bold;
color: #006699;
margin-bottom: 5px;
}
.about-feature-jp-title {
font-size: 1.6rem;
font-weight: 700;
color: #006699;
margin-bottom: 20px;
}
.about-feature-desc {
font-size: 0.9rem;
line-height: 1.8;
color: #333;
}
.about-feature-pc-br {
display: none;
}
/* --- 特徴リスト --- */
.about-feature-list {
display: flex;
flex-direction: column;
gap: 50px;
}
/* --- アイテム単体 --- */
.about-feature-item {
display: flex;
flex-direction: column; /* スマホは縦積み */
gap: 15px;
padding-bottom: 50px;
border-bottom: 2px dotted #ddd;
}
.about-feature-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* 画像エリア */
.about-feature-img-box {
width: 100%;
height: 250px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.about-feature-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* コンテンツエリア */
.about-feature-content {
width: 100%;
}
/* --- REASONと数字のスタイル --- */
.about-feature-number {
font-size: 2.5rem; /* スマホでの数字サイズ */
font-weight: 700;
color: #006699;
margin-bottom: 5px;
font-family: sans-serif;
line-height: 1;
display: flex;
align-items: baseline;
gap: 10px;
}
.about-feature-label {
font-size: 1rem; /* スマホでのREASON文字サイズ */
font-weight: 700;
color: #006699;
}
.about-feature-title {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 15px;
}
.about-feature-text {
font-size: 0.95rem;
line-height: 1.8;
color: #444;
text-align: justify;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.about-feature-bg-text {
font-size: 15vw;
top: 20px;
}
.about-feature-jp-title {
font-size: 2rem;
}
.about-feature-pc-br {
display: block;
}
/* アイテム横並び */
.about-feature-item {
flex-direction: row;
align-items: center;
gap: 50px;
padding-bottom: 60px;
}
/* 逆配置用クラス */
.about-feature-reverse {
flex-direction: row-reverse;
}
.about-feature-img-box {
width: 48%;
height: 300px;
}
.about-feature-content {
width: 48%;
}
/* PCでの文字サイズ調整（数字を大きく、REASONは控えめに） */
.about-feature-number {
font-size: 4rem;
margin-bottom: 10px;
}
.about-feature-label {
font-size: 1.5rem;
}
.about-feature-title {
font-size: 1.5rem;
}
}
/****** Bright Bridgeが選ばれる3つの理由エリア ここまで ******/
/*///////////// ここまで ///////////////////
// Bright Bridgeについてページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// Bright Bridge フッターセッティング
/////////////// ここから /////////////////*/
/****** ここから ******/
/* Bright Bridgeフッターエリア ここから */
/* コンテナ設定 */
.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: #005F92; /* 画像の背景色に合わせて調整 */
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;
}
}
/* Bright Bridgeフッターエリア ここまで */
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/* =========================================================
基本スタイル（スマホファースト）
========================================================= */
/* フォーム全体のラッパーと背景 */
.contact-bright-contact-form-wrap {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #e6f0f5; /* フォーム全体の背景色 */
border-radius: 5px;
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
color: #333;
}
/* フォームグループ（ラベルと入力欄のセット） */
.contact-bright-form-group {
margin-bottom: 20px;
padding: 0 10px;
}
/* ラベルのスタイル */
.contact-bright-label {
display: block;
padding: 0;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
color: #333;
background-color: transparent;
border-bottom: none;
}
/* 必須項目の「**」のスタイル */
.contact-bright-required::after {
content: " **";
color: #c90000;
font-weight: bold;
}
/* 入力フィールド全般の共通スタイル */
.contact-bright-text-input,
.contact-bright-textarea {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
box-sizing: border-box;
background-color: #ffffff;
color: #333;
}
/* 入力フィールドと次の項目との間の区切り線 */
.contact-bright-form-group:not(.contact-bright-inquiry-type) .contact-bright-text-input,
.contact-bright-form-group:not(.contact-bright-inquiry-type) .contact-bright-textarea {
border-bottom: 1px solid #ccc; /* 枠線の一部として */
}
.contact-bright-form-group:last-of-type .contact-bright-text-input {
border-bottom: 1px solid #ccc; /* 最後の項目も枠線を保持 */
}
/* テキストエリアの高さ調整 */
.contact-bright-textarea {
min-height: 150px;
resize: vertical;
}
/* --- お問合せ種別 (チェックボックス/ラジオボタンエリア) --- */
.contact-bright-inquiry-type {
background-color: #ffffff;
border: none;
padding: 15px 10px;
margin-bottom: 20px;
}
.contact-bright-inquiry-type .contact-bright-label {
padding: 0;
margin-bottom: 10px;
font-weight: bold;
}
.contact-bright-checkbox-options {
padding: 0;
background-color: transparent;
}
/* CF7が生成する各チェックボックス要素のラッパー */
.contact-bright-checkbox-options .wpcf7-list-item {
margin: 5px 0 !important;
display: block !important;
position: relative;
padding-left: 25px;
}
.contact-bright-checkbox-options input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* CF7が生成するラベル要素のスタイル */
.contact-bright-checkbox-options .wpcf7-list-item-label {
display: inline-block;
cursor: pointer;
line-height: 1.4;
font-size: 14px;
font-weight: normal;
background-color: transparent;
padding: 0;
}
/* カスタムチェックマークのボックス */
.contact-bright-checkbox-options .wpcf7-list-item-label::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
border: 1px solid #666;
background-color: #fff;
}
/* カスタムチェックマーク */
.contact-bright-checkbox-options input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: '\2713';
position: absolute;
left: 2px;
top: 2px;
font-size: 14px;
color: #2c5986;
font-weight: bold;
}
/* 区切り線 */
.contact-bright-form-divider {
border: none;
height: 1px;
background-color: #c9e2ed;
margin: 0;
}
/* --- プライバシーポリシー同意 --- */
.contact-bright-privacy-agreement {
text-align: center; /* 修正: 中央揃え */
padding: 20px 10px 10px;
font-size: 14px;
}
/* CF7が生成するチェックボックス要素のラッパー */
.contact-bright-privacy-agreement .wpcf7-list-item {
display: inline-block !important;
margin: 0 !important;
position: relative;
padding-left: 25px;
}
.contact-bright-privacy-agreement input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.contact-bright-privacy-agreement .wpcf7-list-item-label {
font-size: 14px;
color: #333;
cursor: pointer;
font-weight: normal !important;
padding: 0 !important;
}
/* カスタムチェックマークのボックス (プライバシーポリシー) */
.contact-bright-privacy-agreement .wpcf7-list-item-label::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
border: 1px solid #666;
background-color: #fff;
}
/* カスタムチェックマーク (プライバシーポリシー) */
.contact-bright-privacy-agreement input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: '\2713';
position: absolute;
left: 2px;
top: 2px;
font-size: 14px;
color: #2c5986;
font-weight: bold;
}
/* --- 送信ボタン --- */
.contact-bright-submit-wrap {
text-align: center; /* 修正: 中央揃え */
padding: 10px;
}
.contact-bright-submit-button {
background-color: #2c5986;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
width: auto;
max-width: none;
}
.contact-bright-submit-button:hover {
background-color: #3f709e;
}
/* =========================================================
レスポンシブ対応 (タブレット・PC向け)
========================================================= */
@media (min-width: 768px) {
/* フォームグループ */
.contact-bright-form-group {
display: block;
border-bottom: none;
padding: 0 50px;
}
/* ラベル */
.contact-bright-label {
width: 100%;
padding: 0;
border-right: none;
background-color: transparent;
}
/* 入力フィールドのラッパー */
.contact-bright-text-input,
.contact-bright-textarea {
width: 100%;
padding: 10px;
background-color: #ffffff;
}
/* --- お問合せ種別 (PCビュー) --- */
.contact-bright-inquiry-type {
display: block;
background-color: #ffffff;
border: none;
padding: 15px 50px;
}
.contact-bright-inquiry-type .contact-bright-label {
background-color: transparent;
}
.contact-bright-checkbox-options {
width: 100%;
background-color: transparent;
padding: 0;
display: block;
}
.contact-bright-checkbox-options .wpcf7-list-item {
width: 100%;
}
/* プライバシーポリシー */
.contact-bright-privacy-agreement {
text-align: center; /* PCでも中央揃え */
padding: 20px 50px 10px;
}
/* 送信ボタン */
.contact-bright-submit-wrap {
text-align: center; /* PCでも中央揃え */
padding: 10px 50px;
}
.contact-bright-submit-button {
width: auto;
}
}
/* 入力フィールド全般の共通スタイル */
.contact-bright-text-input,
.contact-bright-textarea {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
box-sizing: border-box;
background-color: #ffffff;
color: #333;
}
/* 📌 ここにプレースホルダーのスタイルを追加します */
.contact-bright-text-input::placeholder {
color: #aaaaaa; /* 薄い灰色 */
opacity: 1;
}
.contact-bright-text-input::-webkit-input-placeholder {
color: #aaaaaa;
}
.contact-bright-text-input:-ms-input-placeholder {
color: #aaaaaa;
}
/* --- 送信ボタン (中央揃えの維持とスピナー制御) --- */
/* 送信ボタンの親要素を中央揃えに設定 */
.contact-bright-submit-wrap {
text-align: center;
padding: 10px;
/* 📌 PCビューでpタグが邪魔をしないよう、flexコンテナにする */
display: flex;
justify-content: center;
}
/* CF7が自動生成するpタグを制御 */
.contact-bright-submit-wrap > p {
display: flex; /* pタグの中身(ボタンとスピナー)を並べる */
align-items: center;
justify-content: center; /* 左右中央揃え */
width: auto; /* ボタンのサイズに合わせる */
margin: 0; /* デフォルトマージンを削除 */
position: relative; /* スピナーをボタンの下に配置するための基準点 */
}
/* 📌 スピナーを強制的にボタンの下に配置する */
.contact-bright-submit-wrap .wpcf7-spinner {
position: absolute; /* 絶対配置にする */
top: 100%; /* ボタンの高さの直下に配置 */
left: 50%; /* 左端を50%に移動 */
transform: translateX(-50%); /* 中央揃えにする */
margin-top: 5px; /* ボタンとスピナーの間に少し余白 */
display: block; /* 常に表示状態を維持（非表示はCF7が制御） */
}
/* 注意: スピナーがボタンと並んで表示される場合は、スピナーを非表示にする */
.contact-bright-submit-wrap .wpcf7-submit {
margin-right: 0 !important; /* スピナーが隣接しないようにマージンを削除 */
}
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// Bright Bridge お問合せページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// サービス紹介ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* =========================================
Serviceページ タイトルヘッダー (service01)
========================================= */
/* --- 全体ラッパー --- */
.service01-title-wrapper {
position: relative;
width: 100%;
height: 200px; /* スマホでの高さ */
display: flex;
align-items: flex-end; /* テキストを下揃え */
justify-content: flex-start; /* テキストを左揃え */
padding: 20px;
overflow: hidden;
}
/* --- 背景画像設定 --- */
.service01-title-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* --- 青い透かし（グラデーション） --- */
.service01-title-wrapper::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%; /* 全体に青みをかけたい場合は100%、下半分だけなら60% */
/* 下が濃い青、上が透明のグラデーション */
background: linear-gradient(to top, rgba(0, 96, 144, 0.8), rgba(0, 96, 144, 0.2));
z-index: 1;
pointer-events: none;
}
/* --- タイトルテキスト --- */
.service01-title-text {
position: relative;
z-index: 2;
color: #ffffff;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.05em;
/* 青背景なので影は薄めでOK */
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.service01-title-wrapper {
height: 350px; /* PCでの高さ */
padding: 40px 10%;
}
.service01-title-text {
font-size: 3rem;
}
}
/****** タイトルエリア ここまで ******/
/****** サービス紹介エリア ここから ******/
/* =========================================
Service Introduction セクション
========================================= */
/* --- 全体ラッパー --- */
.service01-introduction-wrapper {
position: relative;
width: 100%;
padding: 80px 0;
background-color: #fff;
overflow: hidden; /* 背景文字のはみ出し防止 */
font-family: "Noto Sans JP", sans-serif;
}
/* 背景の巨大文字 "SERVICE" */
.service01-introduction-bg-text {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 20vw;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #e5f4fa; /* 薄い水色の縁取り */
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテナ --- */
.service01-introduction-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* --- ヘッダーエリア --- */
.service01-introduction-header {
text-align: center;
margin-bottom: 50px;
}
.service01-introduction-en-title {
display: block;
font-size: 0.9rem;
font-weight: bold;
color: #006699;
margin-bottom: 5px;
}
.service01-introduction-jp-title {
font-size: 1.8rem;
font-weight: 700;
color: #006699;
margin-bottom: 20px;
}
.service01-introduction-desc {
font-size: 0.95rem;
line-height: 1.8;
color: #333;
font-weight: 500;
}
.service01-introduction-pc-br {
display: none;
}
/* --- カードリスト --- */
.service01-introduction-card-list {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 30px;
}
/* --- カード単体 --- */
.service01-introduction-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.service01-introduction-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* 画像エリア */
.service01-introduction-img-box {
width: 100%;
height: 220px;
}
.service01-introduction-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* コンテンツエリア（青背景） */
.service01-introduction-card-content {
background-color: #006090; /* 濃い青 */
color: #ffffff;
padding: 25px 20px;
flex-grow: 1; /* 高さを揃える */
}
/* カード見出し行（タイトル＋矢印） */
.service01-introduction-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.service01-introduction-card-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: #ffffff;
}
/* 白丸矢印アイコン */
.service01-introduction-arrow-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: #fff;
color: #006090;
border-radius: 50%;
font-size: 14px;
font-weight: bold;
line-height: 1;
}
/* リストテキスト */
.service01-introduction-list {
list-style: none;
padding: 0;
margin: 0;
}
.service01-introduction-list li {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 5px;
color: #ffffff;
padding-left: 0;
}
.service01-introduction-list li:last-child {
margin-bottom: 0;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.service01-introduction-bg-text {
font-size: 15vw;
top: 20px;
}
.service01-introduction-jp-title {
font-size: 2.2rem;
}
.service01-introduction-pc-br {
display: block;
}
.service01-introduction-card-list {
flex-direction: row; /* 横並び */
justify-content: space-between;
}
.service01-introduction-card {
width: 32%; /* 3列配置 */
}
.service01-introduction-img-box {
height: 200px;
}
}
/****** サービス紹介エリア ここまで ******/
/****** 学生の皆様へエリア ここから ******/
/* =========================================
Serviceページ：学生向けセクション (背景あり・完成版)
========================================= */
/* --- ベース設定 --- */
.service01-student-wrapper {
position: relative; /* 背景文字のために必須 */
width: 100%;
padding-bottom: 100px;
background-color: #fff;
font-family: "Noto Sans JP", sans-serif;
color: #333;
overflow: hidden; /* 背景文字のはみ出し防止 */
}
/* --- 背景の巨大文字 --- */
.service01-student-bg-text {
position: absolute;
top: 150px; /* 見出しの下あたりに配置 */
left: 50%;
transform: translateX(-50%);
font-size: 20vw; /* 巨大サイズ */
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #e5f4fa; /* 薄い水色の縁取り */
text-stroke: 1px #e5f4fa;
z-index: 0; /* 最背面 */
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテナ --- */
.service01-student-container {
position: relative;
z-index: 1; /* 背景より手前に表示 */
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
/* --- 1. 青い帯の見出し --- */
.service01-student-bar {
width: 100%;
background-color: #006090;
padding: 20px 0;
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.service01-student-bar-title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.05em;
}
/* --- 2. 導入エリア --- */
.service01-student-intro {
text-align: center;
margin-bottom: 80px;
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.service01-student-intro-title {
color: #006090;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.6;
}
.service01-student-intro-text {
font-size: 0.95rem;
line-height: 2;
text-align: justify;
font-weight: 500;
}
/* --- 3. コンテンツエリア --- */
.service01-student-contents {
display: flex;
flex-direction: column;
gap: 80px;
}
/* 行（スマホ：縦積み） */
.service01-student-row {
display: flex;
flex-direction: column;
width: 100%;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border-radius: 4px;
overflow: hidden;
}
/* 画像エリア */
.service01-student-image {
width: 100%;
height: 250px;
position: relative;
z-index: 1;
}
.service01-student-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* テキストエリア */
.service01-student-info {
width: 100%;
background-color: #eef6f9; /* 薄い水色 */
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.service01-student-info-title {
color: #006090;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.4;
}
.service01-student-info-text {
font-size: 1rem;
line-height: 1.8;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.service01-student-bar-title { font-size: 2rem; }
.service01-student-intro-title { font-size: 1.8rem; margin-bottom: 40px; }
.service01-student-intro-text { font-size: 1rem; }
.service01-student-contents { gap: 100px; }
/* --- PC：横並び＆斜めカットレイアウト --- */
.service01-student-row {
flex-direction: row; /* 横並び */
align-items: stretch; /* 高さを揃える */
box-shadow: none;
border-radius: 0;
overflow: visible;
min-height: 400px;
}
.service01-student-image {
width: 55%;
height: auto;
z-index: 1; /* 画像を奥に */
}
/* --- パターンA：画像左・テキスト右（デフォルト） --- */
.service01-student-info {
width: 55%;
z-index: 2; /* テキストを手前に */
background-color: #eef6f9;
margin-left: -10%; /* 画像の上に被せる */
padding: 60px 50px 60px 100px; /* 左側の余白を多めに（斜め対策） */
/* 左上を斜めにカット */
clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
}
/* --- パターンB：テキスト左・画像右（reverseクラス） --- */
.service01-student-row.reverse {
flex-direction: row-reverse; /* 左右反転 */
}
.service01-student-row.reverse .service01-student-info {
margin-left: 0;
margin-right: -10%; /* 右側に被せる */
padding: 60px 100px 60px 50px; /* 右側の余白を多めに */
/* 右上を斜めにカット */
clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 100%, 0 100%);
}
.service01-student-info-title {
font-size: 1.5rem;
}
}
/****** 学生の皆様へエリア ここまで ******/
/****** 教職員・学校の皆様へエリア ここから ******/
/* =========================================
Serviceページ：学校・教職員向けセクション
========================================= */
/* --- ベース設定 --- */
.service01-school-wrapper {
position: relative;
width: 100%;
padding-bottom: 100px;
background-color: #fff;
font-family: "Noto Sans JP", sans-serif;
color: #333;
overflow: hidden;
}
/* --- 背景の巨大文字 --- */
.service01-school-bg-text {
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
font-size: 20vw;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #e5f4fa;
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテナ --- */
.service01-school-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
/* --- 青い帯の見出し --- */
.service01-school-bar {
width: 100%;
background-color: #006090;
padding: 20px 0;
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.service01-school-bar-title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.05em;
}
/* --- 導入エリア --- */
.service01-school-intro {
text-align: center;
margin-bottom: 80px;
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.service01-school-intro-title {
color: #006090;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.6;
}
.service01-school-intro-text {
font-size: 0.95rem;
line-height: 2;
text-align: justify;
font-weight: 500;
}
/* --- コンテンツエリア --- */
.service01-school-contents {
display: flex;
flex-direction: column;
gap: 80px;
}
/* 行（スマホ：縦積み） */
.service01-school-row {
display: flex;
flex-direction: column;
width: 100%;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border-radius: 4px;
overflow: hidden;
position: relative;
}
/* 画像エリア */
.service01-school-image {
width: 100%;
height: 250px;
position: relative;
z-index: 1;
}
.service01-school-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* テキストエリア */
.service01-school-info {
width: 100%;
background-color: #eef6f9; /* 薄い水色 */
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.service01-school-info-title {
color: #006090;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.4;
}
.service01-school-info-text {
font-size: 1rem;
line-height: 1.8;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.service01-school-bar-title { font-size: 2rem; }
.service01-school-intro-title { font-size: 1.8rem; margin-bottom: 40px; }
.service01-school-intro-text { font-size: 1rem; }
.service01-school-contents { gap: 100px; }
/* --- PC：横並び＆斜めカットレイアウト --- */
.service01-school-row {
flex-direction: row;
align-items: stretch;
box-shadow: none;
border-radius: 0;
overflow: visible;
min-height: 400px;
}
.service01-school-image {
width: 55%;
height: auto;
z-index: 1;
}
/* --- パターンA：画像左・テキスト右 --- */
.service01-school-info {
width: 55%;
z-index: 2;
background-color: #eef6f9;
margin-left: -10%;
padding: 60px 50px 60px 100px;
/* 左上斜めカット */
clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
}
/* --- パターンB：テキスト左・画像右 (reverse) --- */
.service01-school-row.reverse {
flex-direction: row-reverse;
}
.service01-school-row.reverse .service01-school-info {
margin-left: 0;
margin-right: -10%;
padding: 60px 100px 60px 50px;
/* 右上斜めカット */
clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 100%, 0 100%);
}
.service01-school-info-title {
font-size: 1.5rem;
}
}
/****** 教職員・学校の皆様へエリア ここまで ******/
/****** 保護者の皆様へエリア ここまで ******/
/* =========================================
Serviceページ：保護者向けセクション
========================================= */
/* --- ベース設定 --- */
.service01-guardian-wrapper {
position: relative;
width: 100%;
padding-bottom: 100px;
background-color: #fff;
font-family: "Noto Sans JP", sans-serif;
color: #333;
overflow: hidden;
}
/* --- 背景の巨大文字 --- */
.service01-guardian-bg-text {
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-50%);
font-size: 20vw;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px #e5f4fa;
text-stroke: 1px #e5f4fa;
z-index: 0;
pointer-events: none;
white-space: nowrap;
opacity: 0.8;
}
/* --- コンテナ --- */
.service01-guardian-container {
position: relative;
z-index: 1;
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
/* --- 青い帯の見出し --- */
.service01-guardian-bar {
width: 100%;
background-color: #006090;
padding: 20px 0;
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.service01-guardian-bar-title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.05em;
}
/* --- 導入エリア --- */
.service01-guardian-intro {
text-align: center;
margin-bottom: 80px;
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.service01-guardian-intro-title {
color: #006090;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.6;
}
.service01-guardian-intro-text {
font-size: 0.95rem;
line-height: 2;
text-align: justify;
font-weight: 500;
}
/* --- コンテンツエリア --- */
.service01-guardian-contents {
display: flex;
flex-direction: column;
gap: 80px;
}
/* 行（スマホ：縦積み） */
.service01-guardian-row {
display: flex;
flex-direction: column;
width: 100%;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
border-radius: 4px;
overflow: hidden;
position: relative;
}
/* 画像エリア */
.service01-guardian-image {
width: 100%;
height: 250px;
position: relative;
z-index: 1;
}
.service01-guardian-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* テキストエリア */
.service01-guardian-info {
width: 100%;
background-color: #eef6f9; /* 薄い水色 */
padding: 30px 20px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.service01-guardian-info-title {
color: #006090;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.4;
}
.service01-guardian-info-text {
font-size: 1rem;
line-height: 1.8;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.service01-guardian-bar-title { font-size: 2rem; }
.service01-guardian-intro-title { font-size: 1.8rem; margin-bottom: 40px; }
.service01-guardian-intro-text { font-size: 1rem; }
.service01-guardian-contents { gap: 100px; }
/* --- PC：横並び＆斜めカットレイアウト --- */
.service01-guardian-row {
flex-direction: row;
align-items: stretch;
box-shadow: none;
border-radius: 0;
overflow: visible;
min-height: 400px;
}
.service01-guardian-image {
width: 55%;
height: auto;
z-index: 1;
}
/* --- パターンA：画像左・テキスト右 --- */
.service01-guardian-info {
width: 55%;
z-index: 2;
background-color: #eef6f9;
margin-left: -10%;
padding: 60px 50px 60px 100px;
/* 左上斜めカット */
clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
}
/* --- パターンB：テキスト左・画像右 (reverse) --- */
.service01-guardian-row.reverse {
flex-direction: row-reverse;
}
.service01-guardian-row.reverse .service01-guardian-info {
margin-left: 0;
margin-right: -10%;
padding: 60px 100px 60px 50px;
/* 右上斜めカット */
clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 100%, 0 100%);
}
.service01-guardian-info-title {
font-size: 1.5rem;
}
}
/****** 保護者の皆様へエリア ここまで ******/
/* ============================================
スマホ専用の改行設定 (sp-br)
============================================ */
/* 基本設定：PCでは改行を無効にする */
.sp-br {
display: none;
}
/* スマホ（767px以下）の時だけ改行を有効にする */
@media (max-width: 767px) {
.sp-br {
display: block;
}
}
/*///////////// ここまで ///////////////////
// サービス紹介ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 会社概要ページ
/////////////// ここから /////////////////*/
/****** タイトルエリア ここから ******/
/* =========================================
Companyページ：トップ画像 (company-title)
========================================= */
.company-title-wrapper {
position: relative;
width: 100%;
height: 300px; /* スマホでの高さ */
overflow: hidden;
}
/* 背景画像 */
.company-title-img {
width: 100%;
height: 100%;
object-fit: cover; /* 枠いっぱいに広げる */
object-position: center;
display: block;
}
/* 画像の上の青いフィルター（オーバーレイ） */
.company-title-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 96, 144, 0.5); /* 濃い青色（透過50%） */
pointer-events: none;
}
/* 「会社概要」の文字 */
.company-title-heading {
position: absolute;
bottom: 30px;
left: 20px; /* 左下に配置 */
z-index: 1; /* フィルターより手前に表示 */
color: #fff;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.05em;
margin: 0;
font-family: "Noto Sans JP", sans-serif;
line-height: 1;
}
/* =========================================
PC・タブレット向けスタイル（768px以上）
========================================= */
@media (min-width: 768px) {
.company-title-wrapper {
height: 450px; /* PCでの高さ */
}
.company-title-heading {
bottom: 50px;
left: 5%; /* PCでは少し内側に */
font-size: 3.5rem;
}
}
/****** タイトルエリア ここまで ******/
/****** メッセージエリア ここから ******/
.message-section {
position: relative;
/* ▼▼▼ 背景画像のパスをここに指定してください ▼▼▼ */
background-image: url('images/top/top-01.png');
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
background-size: cover;
background-position: center;
/* セクションの最低高さを設定（画面に合わせて調整してください） */
min-height: 700px;
/* Flexboxで中身を中央寄せ */
display: flex;
justify-content: center;
align-items: center;
padding: 60px 20px;
color: #333; /* 基本の文字色 */
}
/* 背景を白っぽくして文字を読みやすくするためのオーバーレイ */
.message-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 白色の半透明レイヤー（透明度0.8）。デザインに合わせて調整してください */
background-color: rgba(255, 255, 255, 0.8);
}
.message-content {
position: relative; /* オーバーレイより上に表示させる */
z-index: 1;
max-width: 800px; /* コンテンツの最大幅 */
width: 100%;
text-align: center; /* テキストを中央揃え */
}
/* ヘッダー部分（Message / 代表挨拶） */
.message-header {
margin-bottom: 40px;
}
.en-title {
display: block;
font-size: 1.2rem;
color: #006699; /* 青系の色 */
margin-bottom: 10px;
font-weight: bold;
letter-spacing: 0.05em;
}
.jp-title {
font-size: 2.2rem;
color: #006699; /* 青系の色 */
margin: 0;
letter-spacing: 0.1em;
}
/* メインの見出し */
.main-heading {
font-size: 1.8rem;
color: #006699;
margin-bottom: 50px;
letter-spacing: 0.05em;
}
/* 本文 */
.message-body p {
font-size: 1.05rem;
line-height: 2; /* 行間を広めに */
margin-bottom: 30px;
letter-spacing: 0.05em;
}
/* 署名 */
.signature {
margin-top: 60px;
font-size: 1.3rem;
font-weight: bold;
letter-spacing: 0.1em;
}
/* --- レスポンシブ対応（スマホ向け） --- */
@media (max-width: 768px) {
.message-section {
min-height: auto; /* スマホでは高さを固定しない */
padding: 80px 20px;
}
.jp-title {
font-size: 1.8rem;
}
.main-heading {
font-size: 1.5rem;
margin-bottom: 40px;
}
.message-body p {
font-size: 0.95rem;
line-height: 1.8;
/* スマホでは左寄せの方が読みやすい場合は left に変更してください */
/* text-align: left; */
}
.signature {
margin-top: 40px;
font-size: 1.1rem;
}
}
/****** メッセージエリア ここまで ******/
/****** プロフィールエリア ここから ******/
/* プロフィールセクション全体 */
.profile-wrapper-section {
position: relative;
padding: 10px 20px 100px 20px;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
background-color: #fff;
/* 明朝体フォント設定（Noto Serif JP優先、なければ游明朝など） */
font-family: 'Noto Serif JP', 'Yu Mincho', YuMincho, serif;
color: #333;
line-height: 2.4;
box-sizing: border-box;
}
/* 背景の巨大な「PROFILE」文字（CSSで描画） */
.profile-wrapper-section::before {
/* content: "PROFILE"; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif; /* 背景文字はゴシック体 */
font-size: 18vw; /* 画面幅に合わせてサイズ自動調整 */
font-weight: 900;
line-height: 1;
white-space: nowrap;
z-index: 0;
color: transparent;
/* 文字の縁取り（薄い水色） */
-webkit-text-stroke: 2px #e1f3fa;
pointer-events: none;
}
/* 前面のコンテンツエリア */
.profile-content-inner {
position: relative;
z-index: 1;
text-align: center;
}
/* 英語ラベル */
.profile-label-en {
display: block;
color: #006898;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 5px;
}
/* 日本語タイトル（代表プロフィール） */
.profile-content-inner h2 {
color: #006898;
font-family: sans-serif;
font-size: 28px;
font-weight: 700;
margin-top: 0;
margin-bottom: 60px;
}
/* 本文テキスト */
.profile-text-body {
text-align: justify; /* 両端揃え */
font-size: 16px;
font-weight: 500;
}
.profile-text-body p {
margin-bottom: 30px;
}
/* スマホ表示用調整 */
@media (max-width: 768px) {
.profile-wrapper-section {
padding: 60px 20px;
}
/* スマホでは背景文字をさらに大きくはみ出させる */
.profile-wrapper-section::before {
font-size: 25vw;
-webkit-text-stroke: 1px #e1f3fa;
}
.profile-text-body {
text-align: left; /* スマホは左揃えが読みやすい */
font-size: 15px;
line-height: 1.8;
}
}
/****** プロフィールエリア ここまで ******/
/****** 会社概要エリア ここから ******/
/* 外側のラッパー（背景色や余白を担当） */
.company-message-wrapper {
width: 100%;
padding: 80px 20px;
background-color: #fff; /* 背景色は白 */
font-family: 'Noto Serif JP', 'Yu Mincho', YuMincho, serif; /* 明朝体 */
color: #333;
line-height: 2.2;
box-sizing: border-box;
}
/* コンテンツを中央に寄せるインナーコンテナ */
.company-message-inner {
max-width: 1000px;
margin: 0 auto;
display: flex; /* 左右に並べる */
justify-content: space-between; /* 間にスペースを空ける */
align-items: center; /* 上下中央揃え */
}
/* 左側：顔写真エリア */
.message-image-box {
width: 42%; /* 左側の幅 */
flex-shrink: 0;
}
.ceo-image {
width: 100%;
height: auto;
display: block;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* 右側：テキストエリア */
.message-text-box {
width: 52%; /* 右側の幅 */
padding-left: 30px;
box-sizing: border-box;
}
/* タイトル */
.message-title {
color: #006898; /* 青色 */
font-family: sans-serif; /* タイトルはゴシック系 */
font-size: 24px;
font-weight: 700;
margin-top: 0;
margin-bottom: 30px;
line-height: 1.4;
}
/* 本文 */
.message-body p {
margin-bottom: 20px;
text-align: justify; /* 両端揃え */
}
/* 署名 */
.message-signature {
text-align: right;
font-size: 18px;
font-weight: 700;
margin-top: 40px;
}
/* スマホ表示用調整 */
@media (max-width: 768px) {
.company-message-wrapper {
padding: 50px 20px;
}
.company-message-inner {
flex-direction: column; /* 縦並び */
}
.message-image-box,
.message-text-box {
width: 100%;
padding: 0;
}
.message-image-box {
margin-bottom: 40px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.message-title {
font-size: 20px;
text-align: center;
}
.message-body p {
text-align: left;
}
}
/* 会社概要セクション全体 */
.company-information-section {
position: relative;
padding: 10px 20px 80px 20px;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
background-color: #fff;
font-family: 'Noto Sans JP', sans-serif; /* 会社概要はゴシック体が見やすいです */
color: #333;
box-sizing: border-box;
}
/* 背景の巨大な「COMPANY」文字（CSSで描画） */
.company-information-section::before {
content: "COMPANY";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
font-size: 18vw; /* 画面幅に合わせてサイズ自動調整 */
font-weight: 900;
line-height: 1;
white-space: nowrap;
z-index: 0;
color: transparent;
/* 文字の縁取り（薄い水色） */
-webkit-text-stroke: 2px #e1f3fa;
pointer-events: none;
}
/* 前面のコンテンツエリア */
.company-info-inner {
position: relative;
z-index: 1;
text-align: center;
}
/* 英語ラベル */
.company-label-en {
display: block;
color: #006898;
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 5px;
}
/* 日本語タイトル */
.company-info-inner h2 {
color: #006898;
font-size: 28px;
font-weight: 700;
margin-top: 0;
margin-bottom: 50px;
}
/* テーブルのデザイン */
.company-table-wrapper {
width: 100%;
overflow-x: auto; /* スマホでは横スクロール可能に */
}
.company-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
text-align: left;
background-color: #fff; /* 背景色 */
}
.company-table th,
.company-table td {
padding: 20px;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
/* 左側の見出しセル（青背景） */
.company-table th {
background-color: #005b8f; /* 画像に合わせた濃い青 */
color: #fff;
width: 25%; /* 幅の目安 */
min-width: 120px;
font-weight: bold;
text-align: center;
}
/* 右側の内容セル（グレー背景） */
.company-table td {
background-color: #f9f9f9; /* 薄いグレー */
color: #333;
font-weight: 500;
}
/* 事業内容のリスト */
.business-list {
margin: 0;
padding-left: 20px;
}
.business-list li {
margin-bottom: 8px;
line-height: 1.6;
}
.business-list li:last-child {
margin-bottom: 0;
}
/* スマホ表示用調整 */
@media (max-width: 768px) {
.company-information-section {
padding: 50px 15px;
}
/* 背景文字サイズ調整 */
.company-information-section::before {
font-size: 23vw;
-webkit-text-stroke: 1px #e1f3fa;
}
/* スマホではテーブルを縦並びにする（見やすさ重視） */
.company-table th,
.company-table td {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left; /* 左寄せに戻す */
}
.company-table th {
padding: 10px 15px;
font-size: 14px;
}
.company-table td {
padding: 15px;
border-bottom: 2px solid #ddd; /* 区切りをわかりやすく */
}
}
/****** 会社概要エリア ここまで ******/
/*///////////// ここまで ///////////////////
// 会社概要ページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 〇〇
/////////////// ここから /////////////////*/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 〇〇
////////////////////////////////////////////*/
/****** setting start ******/
/****** setting end ******/