/* 窶・繝ｪ繧ｻ繝・ヨ・・渕譛ｬ險ｭ螳・窶・*/
html, body {
margin: 0;
padding: 0;
background-color: #ffffff;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--color-bg: #ffffff;
--color-primary: #61cdff;
--color-text: #333;
--color-header: #000;
--color-footer: #666;
--spacing: 1rem;
--radius: 0.5rem;
--main_padding: 10rem;
}
body {
padding-top: 12vh;
font-family: "Noto Serif JP", serif;
line-height: 1.6;
color: var(--color-text);
background-color: #fff;
}
/* 繝ｭ繝ｼ繝・ぅ繝ｳ繧ｰ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
#logo-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /* ?????????? */
background: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
overflow: hidden;
}
.video-wrapper {
width: 48vw; /* 螂ｽ縺阪↑蟷・↓隱ｿ謨ｴ */
object-position: center center;
}
#logo-video {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: inset(30% 0 30% 0); /* 荳・蜿ｳ 荳・蟾ｦ繧偵き繝・ヨ */
}
/* 窶・繝倥ャ繝繝ｼ 窶・*/
header {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
left: 0;
background-color: var(--color-bg);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
height: 12vh;
width: 100%;
z-index: 9000;
}
header img {
width: 25%;
margin-left: 5%;
color: var(--color-header);
margin-bottom: 0.5rem;
}
nav {
position: relative;
margin-right: 5%;
}
.nav-indicator {
position: absolute;
bottom: 0;
height: 2px;
background-color: var(--color-primary);
transition: left 0.5s ease, width 0.3s ease;
left: 0;
width: 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 0;
}
nav a {
color: var(--color-header);
font-weight: 500;
padding: 0.25rem var(--spacing);
transition: background-color 0.3s;
text-decoration: none;
}
nav a:hover {
background-color: var(--color-primary);
color: #ffffff;
}
nav a.active {
padding-bottom: 0.1rem;
}
.hamburger { /* 笏笏 繝上Φ繝舌・繧ｬ繝ｼ繧｢繧､繧ｳ繝ｳ 笏笏 */
display: none; /* 繝・ヵ繧ｩ繝ｫ繝医・髱櫁｡ｨ遉ｺ */
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 24px;
height: 24px;
background: none;
border: none;
cursor: pointer;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10%;
z-index: 10002;
}
.hamburger span {
width: 100%;
display: block;
height: 2px;
background-color: var(--color-primary);
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
z-index: 10002;
}
.hamburger.open span:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
@media (max-width: 1024px) {
.top_hero {
margin-top: 0;
}
header img {
width: 30% !important;
}
}
@media (max-width: 768px) {
header img {
width: 35% !important;
margin-left: 3% !important;
}
}
@media (max-width: 480px) {
header img {
width: 50% !important;
margin-left: 2% !important;
}
}
@media (max-width: 360px) {
header img {
width: 50% !important;
margin-left: 1% !important;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-list {
/* 逕ｻ髱｢蜈ｨ菴薙↓蠎・￡繧・*/
position: fixed;
top: 12vh; /* 繝倥ャ繝繝ｼ荳九°繧・*/
right: 0;
width: 100%;
height: 100vh;
/* 閭梧勹濶ｲ繝ｻ驥阪↑繧企・*/
background-color: #fff;
z-index: 10001;
/* 邵ｦ荳ｦ縺ｳ荳ｭ螟ｮ蟇・○ */
display: flex; /* 蛻晄悄縺ｯ髱櫁｡ｨ遉ｺ */
flex-direction: column;
justify-content: center;
align-items: center;
/* 蜿ｳ譁ｹ蜷代∈繧ｪ繝輔せ繧ｯ繝ｪ繝ｼ繝ｳ */
transform: translateX(100%);
transition: transform 0.5s ease;
}
.nav-list.open {
transform: translateX(0vw);
display: flex;
flex-direction: column;
align-items: center; /* 荳ｭ螟ｮ蟇・○ */
justify-content: flex-start;
padding-top: 15%;
}
.nav-list li {
margin: 1rem 0; /* 鬆・岼髢薙↓菴咏區 */
}
.nav-list li a {
font-size: 1.5rem; /* 螟ｧ縺阪ａ譁・ｭ励〒繧ｿ繝・・縺励ｄ縺吶￥ */
padding: 0.5rem 1rem;
}
}
/* 窶・繝輔ャ繧ｿ繝ｼ蜈ｨ菴・窶・*/
.site-footer {
background-color: #292929;
color: #ffffff;
font-size: 0.9rem;
overflow-x: hidden;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-brand {
display: flex;
align-items: center;
flex: 0 0 auto; /* 讓ｪ邵ｮ蟆上ｒ髦ｲ豁｢ */
}
.footer-logo {
height: 2rem;
max-width: 10rem;
flex-shrink: 0; /* flex縺ｧ貎ｰ繧後↑縺・*/
margin-right: 0.75rem;
}
.footer-company {
font-weight: bold;
color: #fff;
}
.footer-nav {
flex: 1; /* 蟾ｦ蜿ｳ繧帝幕縺代※荳ｭ螟ｮ蟇・○ */
text-align: center;
flex-wrap: nowrap;
margin-right: 22%;
}
.footer-links {
display: flex;
gap: 1.5rem;
list-style: none;
flex-wrap: nowrap;
margin: 0;
padding: 0;
}
.footer-links li {
flex: 0 0 auto !important; /* 蟄占ｦ∫ｴ繧呈ｽｰ縺輔↑縺・*/
}
.footer-links a {
color: #fff;
white-space: nowrap;
text-decoration: none;
transition: opacity 0.3s;
}
.footer-links a:hover {
opacity: 0.7;
}
.footer-copy {
background-color: #000;
color: #fff;
text-align: center;
margin: 0;
padding: 0.75rem 0;
font-size: 0.8rem;
}
/* Coming Soon */
.coming-soon {
font-family: "Noto Serif JP", serif;
background: #f5f5f5;
margin: 0;
}
.coming-soon__main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
}
.coming-soon__section {
max-width: 640px;
background: #fff;
padding: 3rem 2rem;
text-align: center;
border-radius: 1rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.coming-soon__section h1 {
margin-bottom: 1rem;
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
.coming-soon__section p {
margin-bottom: 2rem;
line-height: 1.8;
}
.coming-soon__back {
display: inline-block;
text-decoration: none;
font-weight: 600;
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column; /* 邵ｦ荳ｦ縺ｳ縺ｫ蛻・ｊ譖ｿ縺・*/
align-items: center;
text-align: center;
overflow-x: hidden;
}
.footer-logo {
margin-right: 25%;
max-width: 30%;
height: auto;
}
.footer-brand {
width: 90%;
align-items: center;
justify-content: center;
}
.footer-nav {
width: 100%;
justify-content: center;
margin-bottom: 0.75rem;
}
.footer-links {
flex-direction: column; /* 繝ｪ繝ｳ繧ｯ繧らｸｦ荳ｦ縺ｳ */
gap: 0.75rem;
}
}
.top_header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9000;
transform: translateY(0);
transition: transform 0.3s ease-out;
}
.top_hero__bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease;
}
.top_hero { /* 窶・Hero Section 窶・*/
position: relative;
margin-top: -12vh;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: black;
}
.top_hero::before {
z-index: 2;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0;
}
.top_hero > *:not(.top_hero__bg-video) {
position: relative;
z-index: 3;
color: #fff;
padding: 0 1rem;
}
.top_hero h2 { /* 繧ｿ繧､繝励Λ繧､繧ｿ繝ｼ鬚ｨ */
width: 0;
z-index: 3;
font-size: 3rem;
display: inline-block;
overflow: hidden; /* 縺ｯ縺ｿ蜃ｺ縺玲枚蟄励ｒ髫縺・*/
border-right: .15em solid #fff; /* 繧ｫ繝ｼ繧ｽ繝ｫ縺｣縺ｽ縺・ｸｦ邱・*/
white-space: nowrap; /* 謚倥ｊ霑斐＆縺ｪ縺・*/
margin: 0 auto; /* 荳ｭ螟ｮ蟇・○ */
margin-bottom: 2rem;
letter-spacing: .05em;
}
.top_hero h2.typing {
animation:
typing 1.5s steps(18,end) forwards,
blink-caret .75s step-end infinite;
}
@keyframes typing { /* 蜈･蜉帙い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
from { width: 0; }
to { width: 21ch; }
}
@keyframes blink-caret { /* 繧ｫ繝ｼ繧ｽ繝ｫ轤ｹ貊・*/
from, to { border-color: transparent; }
50% { border-color: #fff; }
}
.top_hero h2.typing-end {
width: auto !important; /* 蜈ｨ繝・く繧ｹ繝医ｒ陦ｨ遉ｺ */
overflow: visible !important;
white-space: nowrap;
border-right: .15em solid #fff; /* 繧ｫ繝ｼ繧ｽ繝ｫ蜀咲樟 */
animation: blink-caret .75s step-end infinite; /* 繧ｫ繝ｼ繧ｽ繝ｫ轤ｹ貊・*/
}
.top_hero__logo {
z-index: 3;
width: 400px; /* 繝ｭ繧ｴ縺ｮ蟷・*/
height: auto; /* 鬮倥＆縺ｯ閾ｪ蜍戊ｪｿ謨ｴ */
margin-left: 0;
opacity: 0;
transform: scale(0) rotate(0deg);
filter: blur(30px) brightness(0);
box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}
.top_hero__logo.blackhole-appear {
animation: blackhole-appear 1s ease-out forwards;
}
@keyframes blackhole-appear {
0% {
opacity: 0;
transform: scale(0);
filter: blur(30px) brightness(0);
box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}
50% {
opacity: 1;
transform: scale(1.1);
filter: blur(10px) brightness(50);
box-shadow:
0 0 80px rgba(255,255,255,0.8),
inset 0 0 60px rgba(255,255,255,0.4);
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0) brightness(1.2);
box-shadow:
0 0 0 rgba(255,255,255,0.5),
inset 0 0 0 rgba(255,255,255,0.3);
}
}
.top_hero__logo.blackhole-end {
opacity: 1 !important; /* 螳悟・縺ｫ陦ｨ遉ｺ */
transform: scale(1) !important; /* 蜈・・螟ｧ縺阪＆ */
filter: none !important; /* 繝悶Λ繝ｼ・乗・繧九＆隱ｿ謨ｴ繧偵Μ繧ｻ繝・ヨ */
box-shadow: none !important; /* 蜈牙ｽｩ繧ｷ繝｣繝峨え繧偵Μ繧ｻ繝・ヨ */
transition: none !important; /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ驕ｷ遘ｻ繧偵く繝｣繝ｳ繧ｻ繝ｫ */
}
.top_hero::after { /* 豕｢邏九い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
z-index: 3;
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 400%;
height: 400%;
pointer-events: none;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.7) 30%,
transparent 80%
);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.top_hero.wave::after {
animation: hero-wave 1s ease-out forwards;
}
@keyframes hero-wave {
from {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
@media (max-width: 768px) {
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜈ｨ菴・*/
.top_hero {
margin-top: -12vh;
height: 100vh;
min-height: 300px; /* 譛蟆城ｫ倥＆繧堤ｸｮ蟆・*/
padding: 2rem 1rem; /* 冁E�E余白を追加 */
padding-top: calc(2rem + 12vh);
background-image: url("../images/top_hero_back_img.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.top_hero__bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
display: none;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease;
}
.top_hero h2 { /* 繧ｿ繧､繝励Λ繧､繧ｿ繝ｼ鬚ｨ繝・く繧ｹ繝・*/
font-size: 1.9rem; /* 譁・ｭ励し繧､繧ｺ繧堤ｸｮ蟆・*/
margin-bottom: 1.5rem;
}
.top_hero__logo { /* 繝ｭ繧ｴ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
width: 350px; /* 繝ｭ繧ｴ蟷・ｒ邵ｮ蟆・:contentReference[oaicite:3]{index=3} */
margin: 1rem auto 0; /* 荳ｭ螟ｮ蟇・○ */
}
}
@media (max-width: 480px) {
.top_hero {
height: 100vh; /* 縺輔ｉ縺ｫ鬮倥＆繧定ｪｿ謨ｴ */
}
.top_hero h2 {
font-size: 1.4rem; /* 蟆上＆縺・判髱｢縺ｧ縺ｯ譖ｴ縺ｫ譁・ｭ励ｒ蟆上＆縺・*/
}
.top_hero__logo {
width: 250px; /* 繝ｭ繧ｴ繧らｸｮ蟆・*/
}
}
.top_strength { /* 笏笏 Strength 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ 笏笏 */
margin-top: 0;
padding-top: calc(4rem + 6vh);
padding-bottom: 10%;
background: linear-gradient(black, white);
}
.top_strength__phrase {
text-align: center;
color: #ffffff;
font-size: 4rem;
font-weight: 900;
margin-bottom: 7%;
}
.top_strength_three_columns {
display: flex;
width: 100%;
gap: 1rem; /* 繧ｫ繝ｩ繝髢薙・菴咏區 */
justify-content: center;
}
.top_strength_three_columns__left,
.top_strength_three_columns__right {
display: flex;
flex-direction: column; /* 邵ｦ遨阪∩縺ｮ蝣ｴ蜷・*/
justify-content: center; /* 邵ｦ譁ｹ蜷台ｸｭ螟ｮ蟇・○ */
align-items: center; /* 讓ｪ譁ｹ蜷台ｸｭ螟ｮ蟇・○ */
flex: 1; /* 蟾ｦ蜿ｳ縺ｯ蟷・3 */
}
.top_strength_three_columns__left img,
.top_strength_three_columns__right img {
max-width: 70%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}
.top_strength_three_columns__left_img01 {
margin-bottom: 30%;
width: 50%;
}
.top_strength_three_columns__left_img02 {
width: 60%;
}
.top_strength_three_columns__right_img01 {
margin-bottom: 30%;
width: 60%;
}
.top_strength_three_columns__right_img02 {
width: 50%;
}
.top_strength_three_columns__center {
flex: 1; /* 荳ｭ螟ｮ縺ｯ蟷・4 */
max-width: 720px;
margin: 0 auto;
padding: 0 1.5rem;
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.top_strength_three_columns__left_img01 {
animation: float 4s ease-in-out infinite;
}
.top_strength_three_columns__left_img02 {
animation: float 5s ease-in-out infinite;
animation-delay: 1.5s; /* 縺壹ｉ縺励※蜍輔″繧偵★繧峨☆ */
}
.top_strength_three_columns__right_img01 {
animation: float 4s ease-in-out infinite;
}
.top_strength_three_columns__right_img02 {
animation: float 5s ease-in-out infinite;
animation-delay: 1.5s; /* 縺壹ｉ縺励※蜍輔″繧偵★繧峨☆ */
}
.top_strength__text {
display: flex;
flex-direction: column;
justify-content: center; /* 邵ｦ譁ｹ蜷台ｸｭ螟ｮ蟇・○ */
align-items: center; /* 讓ｪ譁ｹ蜷台ｸｭ螟ｮ蟇・○ */
text-align: center;
color: #ffffff;
gap: 2rem;
font-size: 1.2rem;
}
.top_strength_three_columns {
align-items: flex-start; /* 荳頑純縺・*/
margin-bottom: 20vh;
/* align-items: center; 縺ｧ荳ｭ螟ｮ謠・∴縺ｫ繧ゅ〒縺阪∪縺・*/
}
.top_strength__gallery {
overflow: hidden;
position: relative;
width: 100%;
}
.top_strength__gallery .slide-track {
display: flex;
will-change: transform;
}
.top_strength__gallery .slide-item {
flex: 0 0 auto;
border-radius: 10px;
width: 20%; /* 隱ｿ謨ｴ蜿ｯ */
margin-right: 3%; /* 隱ｿ謨ｴ蜿ｯ */
aspect-ratio: 3/2;
}
.top_strength__gallery .slide-item img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.top_strength {
padding-bottom: 5%;
}
/* 隕句・縺励ｒ蟆代＠蟆上＆縺・*/
.top_strength__phrase {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 3rem;
}
.top_strength_three_columns {
display: flex;
flex-direction: column; /* 讓ｪ荳ｦ縺ｳ 竊・邵ｦ荳ｦ縺ｳ */
align-items: center; /* 荳ｭ螟ｮ謠・∴ */
gap: 4rem; /* 邵ｦ縺ｮ髢馴囈 */
margin-bottom: 7%;
}
/* 蜷・き繝ｩ繝繧貞・蟷・↓ */
.top_strength_three_columns__left,
.top_strength_three_columns__center {
width: 100%;
margin-bottom: 2rem; /* 荳矩Κ菴咏區 */
}
/* 繝・く繧ｹ繝磯Κ縺縺・order 縺ｧ逵溘ｓ荳ｭ縺ｫ */
.top_strength_three_columns__left { order: 1; }
.top_strength_three_columns__center { order: 2; }
.top_strength_three_columns__right { order: 3; }
.top_strength_three_columns__left,
.top_strength_three_columns__right {
/* 繝・ヵ繧ｩ繝ｫ繝医・邵ｦ遨阪∩繧定ｧ｣髯､縺励※讓ｪ荳ｦ縺ｳ縺ｫ */
flex-direction: row !important;
justify-content: center; /* 荳ｭ螟ｮ謠・∴ */
gap: 1rem; /* 逕ｻ蜒城俣縺ｮ繧ｹ繝壹・繧ｹ */
}
/* ・第椢逶ｮ縺ｮ荳倶ｽ咏區繧定ｧ｣髯､ */
.top_strength_three_columns__left_img01,
.top_strength_three_columns__right_img01 {
margin-bottom: 0 !important;
}
/* 讓ｪ荳ｦ縺ｳ縺ｧ繧ょ庶縺ｾ繧九ｈ縺・ｹ・ｒ蠕ｮ隱ｿ謨ｴ */
.top_strength_three_columns__left_img01,
.top_strength_three_columns__left_img02,
.top_strength_three_columns__right_img01,
.top_strength_three_columns__right_img02 {
width: 45%; /* 2譫壹〒邏・00%縺ｫ縺ｪ繧九ｈ縺・↓ */
max-width: 45%;
}
.top_strength__gallery .slide-item {
flex: 0 0 auto;
border-radius: 10px;
width: 30%; /* 隱ｿ謨ｴ蜿ｯ */
margin-right: 3%; /* 隱ｿ謨ｴ蜿ｯ */
}
}
/* 繧ｹ繝槭・縺輔ｉ縺ｫ蟆上＆縺・ｫｯ譛ｫ逕ｨ */
@media (max-width: 480px) {
.top_strength__phrase {
font-size: 2.2rem;
margin-bottom: 2.5rem;
}
.top_strength__text {
font-size: 1rem;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.top_news__header {
text-align: center; /* 迢ｭ縺・ｫｯ譛ｫ縺ｧ縺ｯ荳ｭ螟ｮ蟇・○ */
}
.top_news {
padding: 2rem 1rem; /* 讓ｪ菴咏區繧堤強縺上＠縺ｦ繧ｳ繝ｳ繝代け繝医↓ */
}
.top_news__subtitle {
font-size: 1.25rem; /* 繧ｵ繝悶ち繧､繝医Ν繧貞ｰ代＠邵ｮ蟆・*/
margin-bottom: 0.5rem;
}
.top_news__title {
font-size: 1.75rem; /* 隕句・縺励ｒ邵ｮ蟆・*/
line-height: 1.2;
}
.top_news__list {
margin-top: var(--spacing);
}
.top_news__item {
padding: calc(var(--spacing) / 2) 0; /* 鬆・岼髢馴囈繧定ｩｰ繧√ｋ */
}
.top_news__item-title {
font-size: 1.1rem; /* 險倅ｺ九ち繧､繝医Ν繧らｸｮ蟆・*/
margin-bottom: 0.25rem;
}
.top_news__more {
margin-top: 1.5rem; /* 縲御ｸ隕ｧ繧定ｦ九ｋ縲阪・菴咏區隱ｿ謨ｴ */
}
}
@media (max-width: 480px) {
.top_news__header {
text-align: center; /* 迢ｭ縺・ｫｯ譛ｫ縺ｧ縺ｯ荳ｭ螟ｮ蟇・○ */
}
.top_news {
padding: 1.5rem 0.5rem; /* 縺輔ｉ縺ｫ繧ｳ繝ｳ繝代け繝医↓ */
}
.top_news__subtitle {
font-size: 1rem;
}
.top_news__title {
font-size: 1.5rem;
}
.top_news__item {
padding: 0.5rem 0;
}
.top_news__item-title {
font-size: 1rem;
}
.top_news__more {
margin-top: 1rem;
}
.top_news__more-link {
font-size: 0.9rem; /* 繝懊ち繝ｳ譁・ｭ励ｂ蟆上＆縺・*/
}
}
.top_service { /* 笏笏 Service Section 笏笏 */
padding: var(--spacing);
padding-bottom: 15vh;
}
.top_service__header {
text-align: center;
margin: 10vh 0 5vh;
}
.top_service__subtitle {
display: block;
font-size: 1.5rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
}
.top_service__title {
font-size: 3rem;
color: var(--color-text);
margin-bottom: 5%;
}
.top_service__list {
width: 80vw;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20vh;
}
.top_service__item {
display: flex;
position: relative;
align-items: stretch;
overflow: visible;
gap: 3%;
}
.top_service__img-wrapper {
flex: 0 0 60%;
overflow: hidden;
position: relative;
order: 1;
}
.top_service__item-img {
width: 100%;
height: auto;
border-radius: 20px;
object-fit: cover;
display: block;
}
.top_service__img-wrapper::before {
content: "";
position: absolute;
pointer-events: none;
}
.top_service__item.is_reverse {
flex-direction: row-reverse;
}
.top_service__item-content {
flex: 0 0 40%;
position: relative;
z-index: 2;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center; /* 繝・く繧ｹ繝医ｒ蝙ら峩荳ｭ螟ｮ謠・∴ */
order: 2;
}
.top_service__item-content img {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; 縺ｨ蜷檎ｾｩ */
overflow: hidden;
}
.top_service_item_bg_grass {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
z-index: 3;
}
.top_service_item_bg_board {
position: absolute ;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}
/* 窶・繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ蜑阪・蛻晄悄迥ｶ諷・窶・*/
.top_service_item_bg_board {
/* 蛻晄悄縺ｯ荳翫∈繧ｪ繝輔そ繝・ヨ・・乗・ */
transform: translateY(-50%);
opacity: 0;
transition: transform 0.8s ease-out, opacity 0.6s ease-out;
}
.top_service_item_bg_grass {
/* 蛻晄悄縺ｯ荳九∈繧ｪ繝輔そ繝・ヨ・・乗・縲》op 繧偵Μ繧ｻ繝・ヨ */
top: 0 !important;
transform: translateY(20%);
opacity: 0;
transition: transform 0.5s ease-out 0.2s, opacity 1.5s ease-out 0.6s;
}
/* 窶・隕∫ｴ縺・in-view 縺ｫ縺ｪ縺｣縺溘ｉ */
.top_service__item.in-view .top_service_item_bg_board {
transform: translateY(0);
opacity: 1;
}
.top_service__item.in-view .top_service_item_bg_grass {
transform: translateY(0);
opacity: 1;
}
.top_service__item_texts {
position: relative;
text-align: center;
top: -6%;
left: 10%;
width: 80%;
height: 70%;
padding: 5%;
border-radius: 10px;
color: #ffffff;
z-index: 2;
}
/* 窶・繝・く繧ｹ繝医・蛻晄悄迥ｶ諷・窶・*/
.top_service__item_texts {
transform: translateY(-50%); /* 荳翫∈繧ｪ繝輔そ繝・ヨ */
opacity: 0; /* 騾乗・ */
transition: transform 0.8s ease-out, opacity 0.6s ease-out;
}
.top_service__item.in-view .top_service__item_texts {
transform: translateY(0);
opacity: 1;
}
.top_service__item-title {
font-size: 2rem;
font-weight: 900;
margin: 0 0 0.5rem;
font-size: clamp(1rem, 2vw, 2rem);
border-bottom: 2px solid var(--color-primary);
}
.top_service__item-text {
font-size: clamp(0.6rem, 1vw, 2rem);
text-align: left;
margin-top: 10%;
margin-bottom: 10%;
color: #ffffff;
}
.top_service__item-link {
position: absolute;
display: inline-block;
font-size: clamp(0.7rem, 1.2vw, 3rem);
padding: calc(0.05rem + 0.4vw) calc(0.1rem + 0.5vw);
border-radius: 9000px;
background-color: var(--color-primary);
color: #fff;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease;
left: 50%; /* 蟾ｦ遶ｯ繧偵さ繝ｳ繝・リ荳ｭ螟ｮ縺ｫ */
transform: translateX(-50%);
bottom: 15%;
}
.top_service__item-link:hover {
background-color: #005A99;
}
.top_service__list .top_service__item { /* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ譎ゅヵ繧ｧ繝ｼ繝峨う繝ｳ蛻晄悄迥ｶ諷・*/
opacity: 0;
transform: translateX(-50px);
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.top_service__list .top_service__item:nth-child(even) { /* 蛛ｶ謨ｰ逡ｪ逶ｮ縺ｯ蜿ｳ縺九ｉ繝輔ぉ繝ｼ繝峨う繝ｳ */
transform: translateX(50px);
}
.top_service__list .top_service__item.in-view { /* in-view 繧ｯ繝ｩ繧ｹ縺ｧ陦ｨ遉ｺ */
opacity: 1;
transform: translateX(0);
}
/* 笏笏 Service Section: Responsive 笏笏 */
@media (max-width: 768px) {
.top_service {
padding: calc(var(--spacing) * 2) 1rem;
}
.top_service__list {
width: 90vw; /* 讓ｪ蟷・ｒ繧・ｄ蠎・￡ */
gap: calc(var(--spacing) * 4); /* 鬆・岼髢薙・菴咏區繧定ｩｰ繧√ｋ */
}
.top_service__item {
display: flex;
flex-direction: column; /* 邵ｦ荳ｦ縺ｳ縺ｫ蛻・崛 */
align-items: center;
gap: var(--spacing);
margin-bottom: var(--spacing);
}
.top_service__img-wrapper {
flex: none;
width: 100%; /* 逕ｻ蜒上・蜈ｨ蟷・*/
margin: 0;
}
.top_service__item-content {
flex: none;
width: 100%;
margin: 0; /* 繧ｪ繝ｼ繝舌・繝ｩ繝・・繧定ｧ｣髯､ */
padding: var(--spacing);
box-shadow: 3px 3px 15px rgba(0,0,0,0.1);
text-align: center; /* 荳ｭ螟ｮ蟇・○ */
min-height: auto;
max-height: none;
}
.top_service_item_bg_grass {
background-color: #000;
z-index: -1;
}
.top_service_item_bg,
.top_service_item_bg_board {
display: none !important;
}
.top_service__item.is_reverse {
flex-direction: column;
align-items: center
}
.top_service__item.is_reverse .top_service__item-content {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%; /* 蟷・ｒ謨ｴ縺医※荳ｭ螟ｮ蟇・○ */
text-align: center; /* 繝・く繧ｹ繝医ｂ荳ｭ螟ｮ謠・∴ */
}
.top_service__item_texts {
position: static;
top: auto;
left: auto;
width: 100%;
height: auto;
padding: 1.5rem 1.25rem;
transform: none;
opacity: 1;
background: rgba(0, 0, 0, 0.85);
border-radius: 1rem;
color: #fff;
}
.top_service__item-title {
text-align: center;
margin-bottom: 1rem;
}
.top_service__item-text {
margin: 1rem 0 1.5rem;
font-size: 1rem;
text-align: left;
color: #fff;
}
.top_service__item-link {
position: static;
transform: none;
left: auto;
bottom: auto;
margin: 0 auto;
margin-top: 1rem;
display: inline-flex;
justify-content: center;
padding: 0.75rem 1.5rem;
}
}
@media (max-width: 480px) {
.top_service__header {
margin: 5vh 0 3vh; /* 繝倥ャ繝繝ｼ荳贋ｸ倶ｽ咏區繧定ｩｰ繧√ｋ */
}
.top_service__subtitle {
font-size: 1.25rem; /* 繧ｿ繧､繝医Ν邵ｮ蟆・*/
}
.top_service__title {
font-size: 2rem;
}
.top_service__item-title {
font-size: 1.1rem;
}
.top_service__item-text {
font-size: 0.9rem;
}
.top_service__item-link {
padding: 0.5rem 1rem; /* 繝懊ち繝ｳ縺ｮ菴咏區繧貞ｰ上＆縺・*/
}
.top_service__item.is_reverse {
flex-direction: column;
align-items: center
}
.top_service__item.is_reverse .top_service__item-content {
margin-left: 0 !important; /* 譌｢蟄倥・ -20% 繧定ｧ｣髯､ */
margin-right: 0 !important;
width: 100%; /* 蟷・ｒ謨ｴ縺医※荳ｭ螟ｮ蟇・○ */
text-align: center; /* 繝・く繧ｹ繝医ｂ荳ｭ螟ｮ謠・∴ */
}
}
.top_news { /* 窶・News Section 窶・*/
background-color: rgb(240, 240, 240);
padding: var(--main_padding);
padding-top: 3rem;
padding-bottom: 3rem;
}
.top_news__header {
text-align: left;
}
.top_news__subtitle {
display: block;
font-size: 1.5rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
}
.top_news__title {
font-size: 2rem;
color: var(--color-text);
margin: 0;
}
.top_news__list {
text-align: center;
margin-top: var(--spacing);
}
.top_news__item {
padding: var(--spacing) 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.top_news__item:first-child {
border-top: none;
}
.top_news__item-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--color-header);
}
.top_news__more {
text-align: center;
margin-top: calc(var(--spacing) * 1.5);
}
.top_news__more-link {
/* .btn-link 繧偵◎縺ｮ縺ｾ縺ｾ豬∫畑 */
}
.top_company { /* 笏笏 Company Section 笏笏 */
position: relative;
width: 80vw;
margin: 30vh auto;
margin-bottom: 5vh;
background: url("../images/company_bg_img.jpg") no-repeat center center;
background-size: cover;
padding: calc(var(--spacing) * 4) var(--spacing);
color: #fff;
overflow: hidden;
border-radius: var(--radius);
}
.top_company::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 90%
);
z-index: 0;
}
.top_company__header,
.top_company__body {
position: relative;
z-index: 1;
text-align: left;
}
.top_company__subtitle,
.top_company__title,
.top_company__text,
.top_company__action-link {
color: #fff;
width: 35%;
}
.top_company__subtitle {
display: block;
font-size: 1.5rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
}
.top_company__title {
font-size: 2rem;
margin-bottom: var(--spacing);
}
.top_company__text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: var(--spacing);
}
.top_company__action-link {
font-weight: 600;
text-decoration: none;
}
.top_company__action-link {
display: inline-block; /* 繝懊ち繝ｳ繧峨＠縺・*/
padding: 0.1rem 0.75rem; /* 荳贋ｸ九・蟾ｦ蜿ｳ縺ｮ菴咏區 */
border-radius: 9000px; /* 荳ｸ縺ｿ繧呈怙螟ｧ縺ｫ */
background-color: var(--color-primary);
color: #fff;
text-decoration: none;
font-weight: 600;
text-align: center;
transition: background-color 0.3s ease;
}
.top_company__action-link:hover {
background-color: #005A99; /* 繝帙ヰ繝ｼ譎ゅ・豼・＞濶ｲ */
}
@media (max-width: 768px) {
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蟷・・菴咏區繧定ｪｿ謨ｴ */
.top_company {
width: 90vw; /* 80vw 竊・90vw 縺ｫ諡｡螟ｧ */
margin: 10vh auto !important; /* 荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
padding: calc(var(--spacing) * 2) var(--spacing) !important; /* 繝代ョ繧｣繝ｳ繧ｰ繧貞濠貂・*/
}
/* 繝・く繧ｹ繝亥ｹ・ｒ繝輔Ν縺ｫ */
.top_company__subtitle,
.top_company__title,
.top_company__text {
width: 100% !important; /* 35% 竊・100% 縺ｫ */
}
/* 隕句・縺励・譛ｬ譁・ｒ荳ｭ螟ｮ蟇・○ */
.top_company__header,
.top_company__body {
text-align: center !important;
}
}
@media (max-width: 480px) {
.top_company {
padding: calc(var(--spacing)) 1rem !important; /* 讓ｪ繝代ョ繧｣繝ｳ繧ｰ繧堤強繧√ｋ */
margin: 5vh auto !important; /* 縺輔ｉ縺ｫ荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
}
.top_company__subtitle {
font-size: 1.25rem !important; /* 繧ｵ繝悶ち繧､繝医Ν邵ｮ蟆・*/
}
.top_company__title {
font-size: 1.5rem !important; /* 繧ｿ繧､繝医Ν邵ｮ蟆・*/
}
.top_company__text {
font-size: 0.9rem !important; /* 譛ｬ譁・ｸｮ蟆・*/
line-height: 1.4 !important;
}
}
.top_to_service_list { /* 笏笏 to service list Section 笏笏 */
position: relative;
width: 80vw;
margin: 5vh auto;
background: url("../images/company_bg_img.jpg") no-repeat center center;
background-size: cover;
padding: calc(var(--spacing) * 4) var(--spacing);
color: #fff;
overflow: hidden;
border-radius: var(--radius);
}
.top_to_service_list::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 90%
);
z-index: 0;
}
.top_to_service_list__header,
.top_to_service_list__body {
position: relative;
z-index: 1;
text-align: left;
}
.top_to_service_list__subtitle,
.top_to_service_list__title,
.top_to_service_list__text,
.top_to_service_list__action-link {
color: #fff;
width: 35%;
}
.top_to_service_list__subtitle {
display: block;
font-size: 1.5rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
}
.top_to_service_list__title {
font-size: 2rem;
margin-bottom: var(--spacing);
}
.top_to_service_list__text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: var(--spacing);
}
.top_to_service_list__action-link {
font-weight: 600;
text-decoration: none;
}
.top_to_service_list__action-link {
display: inline-block; /* 繝懊ち繝ｳ繧峨＠縺・*/
padding: 0.1rem 0.75rem; /* 荳贋ｸ九・蟾ｦ蜿ｳ縺ｮ菴咏區 */
border-radius: 9000px; /* 荳ｸ縺ｿ繧呈怙螟ｧ縺ｫ */
background-color: var(--color-primary);
color: #fff;
text-decoration: none;
font-weight: 600;
text-align: center;
transition: background-color 0.3s ease;
}
.top_to_service_list__action-link:hover {
background-color: #005A99; /* 繝帙ヰ繝ｼ譎ゅ・豼・＞濶ｲ */
}
@media (max-width: 768px) {
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蟷・・菴咏區繧定ｪｿ謨ｴ */
.top_to_service_list {
width: 90vw; /* 80vw 竊・90vw 縺ｫ諡｡螟ｧ */
margin: 10vh auto !important; /* 荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
padding: calc(var(--spacing) * 2) var(--spacing) !important; /* 繝代ョ繧｣繝ｳ繧ｰ繧貞濠貂・*/
}
/* 繝・く繧ｹ繝亥ｹ・ｒ繝輔Ν縺ｫ */
.top_to_service_list__subtitle,
.top_to_service_list__title,
.top_to_service_list__text {
width: 100% !important; /* 35% 竊・100% 縺ｫ */
}
/* 隕句・縺励・譛ｬ譁・ｒ荳ｭ螟ｮ蟇・○ */
.top_to_service_list__header,
.top_to_service_list__body {
text-align: center !important;
}
}
@media (max-width: 480px) {
.top_to_service_list {
padding: calc(var(--spacing)) 1rem !important; /* 讓ｪ繝代ョ繧｣繝ｳ繧ｰ繧堤強繧√ｋ */
margin: 5vh auto !important; /* 縺輔ｉ縺ｫ荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
}
.top_to_service_list__subtitle {
font-size: 1.25rem !important; /* 繧ｵ繝悶ち繧､繝医Ν邵ｮ蟆・*/
}
.top_to_service_list__title {
font-size: 1.5rem !important; /* 繧ｿ繧､繝医Ν邵ｮ蟆・*/
}
.top_to_service_list__text {
font-size: 0.9rem !important; /* 譛ｬ譁・ｸｮ蟆・*/
line-height: 1.4 !important;
}
}
.top_contact { /* 笏笏 Contact Section 笏笏 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20vh auto;
width: 80vw;
height: 15vh;
padding: var(--spacing);
background-color: var(--color-bg);
}
.top_contact_title {
font-size: 2rem;
}
.top_contact__link {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 2rem;
width: 100%;
padding: 0.75rem 1.5rem;
background-color: #fff;
color: #000;
border: 3px solid #000;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.top_contact__link:hover {
background-color: #000;
color: #fff;
}
.top_contact__icon-wrapper {
position: relative;
width: 2rem;
height: 2rem;
}
.top_contact__icon {
width: 110%;
height: 110%;
fill: currentColor;
}
@keyframes ripple {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.top_contact__icon-wrapper::before,
.top_contact__icon-wrapper::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px solid currentColor;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.top_contact__link:hover .top_contact__icon-wrapper::before {
animation: ripple 1s ease-out forwards;
}
.top_contact__link:hover .top_contact__icon-wrapper::after {
animation: ripple 1s ease-out forwards;
animation-delay: 0.3s;
}
@media (max-width: 768px) {
.top_contact {
margin: 10vh auto !important; /* 荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
width: 90vw !important; /* 讓ｪ蟷・ｒ蠎・￡ */
height: auto !important; /* 蝗ｺ螳夐ｫ倥＆繧定ｧ｣髯､ */
padding: calc(var(--spacing) / 2) !important; /* 繝代ョ繧｣繝ｳ繧ｰ蜊頑ｸ・*/
}
.top_contact_title {
font-size: 1.75rem !important; /* 繧ｿ繧､繝医Ν繧貞ｰ代＠邵ｮ蟆・*/
}
.top_contact__link {
gap: 1rem !important; /* 繧｢繧､繧ｳ繝ｳ縺ｨ繝・く繧ｹ繝医・髢馴囈繧堤強繧√ｋ */
padding: 0.5rem 1rem !important; /* 繝懊ち繝ｳ菴咏區繧堤ｸｮ蟆・*/
width: 80% !important; /* 蟷・ｒ蛻ｶ髯・*/
max-width: 400px !important; /* 譛螟ｧ蟷・ｒ險ｭ螳・*/
}
}
@media (max-width: 480px) {
.top_contact {
margin: 8vh auto !important; /* 縺輔ｉ縺ｫ荳贋ｸ九・繝ｼ繧ｸ繝ｳ繧堤ｸｮ蟆・*/
width: 95vw !important; /* 縺ｻ縺ｼ繝輔Ν蟷・*/
padding: calc(var(--spacing) / 3) !important; /* 菴咏區譛蟆丞喧 */
}
.top_contact_title {
font-size: 1.5rem !important; /* 繧ｿ繧､繝医Ν繧呈峩縺ｫ邵ｮ蟆・*/
}
.top_contact__link {
gap: 0.5rem !important; /* 繧｢繧､繧ｳ繝ｳ縺ｨ繝・く繧ｹ繝医・髢馴囈繧呈峩縺ｫ迢ｭ繧√ｋ */
padding: 0.5rem !important; /* 繝懊ち繝ｳ菴咏區繧呈怙蟆丞喧 */
width: 100% !important; /* 繝輔Ν蟷・*/
}
.top_contact__icon-wrapper {
width: 1.5rem !important; /* 繧｢繧､繧ｳ繝ｳ繝ｩ繝・ヱ繝ｼ邵ｮ蟆・*/
height: 1.5rem !important;
}
.top_contact__icon {
width: 100% !important; /* 繧｢繧､繧ｳ繝ｳ繧ｵ繧､繧ｺ縺ｫ繝輔ぅ繝・ヨ */
height: 100% !important;
}
}
/* 莨夂､ｾ讎りｦ√・繝ｼ繧ｸ */
.company_hero_section {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('../images/company_bg_img.jpg') center/cover no-repeat;
padding: 100px 20px;
text-align: center;
color: #fff;
margin-bottom: 15vh;
}
.company_hero_section .company_hero-title {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.company_hero_section p {
font-size: 1.25rem;
line-height: 1.6;
}
.company_mission,
.company_vision,
.company_value { /*======== Mission / Vision / Value Sections ========*/
width: 50vw;
margin: 0 auto;
text-align: center;
margin-bottom: 15vh;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.company_mission.in-view,
.company_vision.in-view,
.company_value.in-view {
opacity: 1;
transform: translateY(0);
}
.company_mvv_title {
font-size: 2rem;
margin-bottom: 1rem;
}
.company_mvv_phrase {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
color: #444;
}
.company_mvv_description {
font-size: 1rem;
line-height: 1.6;
color: #000000;
margin-bottom: 2rem;
text-align: justify;
}
.company_greeting {
background-color: #f9f9f9;
width: 100%;
padding: 25vw;
padding-top: 5rem;
padding-bottom: 5rem;
margin-bottom: 15vh;
}
.company_greeting_subtitle {
display: block;
font-size: 1rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
text-align: center;
}
.company_greeting_title {
font-size: 3rem;
margin-bottom: 5vh;
text-align: center;
}
.company_greeting p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.company_signature {
margin-top: 2rem;
text-align: right;
font-weight: 700;
}
.company_profile {
width: 70vw;
margin: 0 auto 15vh;
}
.company_profile_subtitle {
display: block;
font-size: 1rem;
color: var(--color-primary);
letter-spacing: 0.1em;
margin-bottom: 0;
text-align: center;
}
.company_profile_title {
font-size: 3rem;
margin-bottom: 5vh;
text-align: center;
}
.company_profile table.profile-table {
width: 100%;
border-collapse: collapse; /* 蜈・・ collapse */
}
.company_profile table.profile-table th {
width: 20%;
background-color: #f9f9f9;
}
.company_profile table.profile-table th,
.company_profile table.profile-table td {
border: 1px solid #a3a3a3; /* 鄂ｫ邱壹ｒ螳悟・縺ｫ豸医☆ */
padding: 0.75rem;
vertical-align: top;
}
.company_profile table.profile-table td ul {
list-style-position: inside; /* 轤ｹ繧貞・蛛ｴ縺ｫ */
padding-left: 1em; /* 蟾ｦ菴咏區繧定ｿｽ蜉 */
margin-top: 0.5em; /* 荳翫・繝ｼ繧ｸ繝ｳ縺ｧ隕九◆逶ｮ繧呈紛縺医ｋ */
}
@media (max-width: 600px) {
/* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蟷・ｒ繝輔Ν蟷・↓ */
.company_profile {
width: 90vw; /* 逕ｻ髱｢縺ｮ90%繧剃ｽｿ縺・*/
margin: 0 auto 2rem; /* 荳九・繝ｼ繧ｸ繝ｳ縺ｯ驕ｩ螳懆ｪｿ謨ｴ */
padding: 0 1rem; /* 讓ｪ繝代ョ繧｣繝ｳ繧ｰ縺ｧ菴咏區繧堤｢ｺ菫・*/
}
/* | 繧貞ｮ悟・縺ｫ豸医＠縺ｦ縲・td>縺縺代ｒ繧ｫ繝ｼ繝牙喧 */
.company_profile table.profile-table th {
display: none;
}
/* 譌｢蟄倥・繝・・繝悶Ν竊偵ヶ繝ｭ繝・け縺ｫ蛻・ｊ譖ｿ縺・*/
.company_profile table.profile-table,
.company_profile table.profile-table tbody,
.company_profile table.profile-table tr,
.company_profile table.profile-table td {
display: block;
width: 100%;
}
/* ・代Ξ繧ｳ繝ｼ繝峨★縺､繧ｫ繝ｼ繝牙喧 */
.company_profile table.profile-table tr {
margin-bottom: 1em;
background: #f9f9f9;
border-radius: 4px;
padding: 0.75rem;
}
/* 繝ｩ繝吶Ν繧・::before 縺ｧ陦ｨ遉ｺ */
.company_profile table.profile-table td {
position: relative;
padding-left: 50%;
text-align: left;
}
.company_profile table.profile-table td::before {
content: attr(data-label);
position: absolute;
left: 0.75rem;
top: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
}
/* oboard繝ｩ繝ｳ繝・ぅ繝ｳ繧ｰ繝壹・繧ｸ */
.oboard_land_hero { /* --- 繝偵・繝ｭ繝ｼ逕ｻ髱｢ --- */
background: url('../images/top_hero_back_img.jpg') no-repeat center/cover;
color: #fff;
text-align: center;
padding: 15vh 5vw;
}
.oboard_land_hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.oboard_land_hero p {
font-size: 1.5rem;
}
.oboard_land_features { /* --- Oboard縺後〒縺阪ｋ縺薙→ --- */
padding: 8vh 5vw;
text-align: center;
background-color: #eaf9ff;
margin-bottom: 15vh;
}
.oboard_land_features h3 {
font-size: 2rem;
margin-bottom: 2rem;
}
.oboard_land_feature_grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.oboard_land_feature_grid .oboard_land_card {
flex: 1 1 calc(33% - 2rem);
max-width: 300px;
text-align: left;
}
.oboard_land_feature_grid .oboard_land_card img {
width: 100%;
border-radius: 8px;
margin-bottom: 1rem;
}
.oboard_land_feature_grid .oboard_land_card h4 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.oboard_land_feature_grid .oboard_land_card p {
font-size: 1rem;
line-height: 1.6;
color: #555;
}
.oboard_land_benefit { /* --- 莉･荳九∝茜豢ｻ逕ｨ閠・・繝｡繝ｪ繝・ヨ --- */
margin: 0 auto;
margin-bottom: 15vh;
width: 80vw;
}
.oboard_land_benefit_title {
font-size: 2rem;
margin-bottom: 5vh;
text-align: center;
}
.oboard_land_benefit > .oboard_land_benefit_card_list {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
.oboard_land_benefit_card {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.oboard_land_benefit_card img {
width: 50%;
height: 100%;
flex-shrink: 0;
}
.oboard_land_benefit_card-content {
display: flex;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.oboard_land_benefit_card-content h4 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.oboard_land_benefit_card-content p {
font-size: 1rem;
line-height: 1.6;
color: #555;
}
.oboard_land_benefit > .oboard_land_benefit_card_list > .oboard_land_benefit_card:nth-child(2) {
flex-direction: row-reverse;
}
.oboard_land_benefit .oboard_land_benefit_card_list .oboard_land_benefit_card {
/* 窶・蛻ｩ豢ｻ逕ｨ閠・・繝｡繝ｪ繝・ヨ・壹ヵ繧ｧ繝ｼ繝峨う繝ｳ蛻晄悄迥ｶ諷・窶・*/
opacity: 0; /* 蟾ｦ蜿ｳ縺ｩ縺｡繧峨°繧峨°險ｭ螳夲ｼ壼･・焚縺ｯ蟾ｦ縲∝・謨ｰ縺ｯ蜿ｳ */
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
transform: translateX(-50px);
}
.oboard_land_benefit .oboard_land_benefit_card_list .oboard_land_benefit_card:nth-child(even) {
transform: translateX(50px);
}
.oboard_land_benefit .oboard_land_benefit_card_list .oboard_land_benefit_card.in-view {
opacity: 1; /* 窶・繝薙Η繝ｼ繝昴・繝医↓蜈･縺｣縺溘ｉ繝ｪ繧ｻ繝・ヨ 窶・*/
transform: translateX(0);
}
/* --- 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢・--- */
@media (max-width: 768px) {
/* feature 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ蜀・・繧ｫ繝ｼ繝牙ｹ・ｪｿ謨ｴ */
.oboard_land_feature_grid .oboard_land_card {
flex: 1 1 100%;
}
/* benefit 繧ｫ繝ｼ繝峨ｒ邵ｦ荳ｦ縺ｳ縺ｫ謌ｻ縺・*/
.oboard_land_benefits .oboard_land_benefit_card .oboard_land_benefit_card {
flex-direction: column;
}
.oboard_land_benefits .oboard_land_benefit_card .oboard_land_benefit_card img {
width: 100%;
height: auto;
}
}
/* --- Mobile layout tweaks (<=640px) --- */
@media (max-width: 640px) {
body {
padding-top: 10vh;
}
header,
.top_header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9000;
transform: translateY(0);
}
header {
height: 12vh;
padding: 0.5rem 1rem;
}
.top_hero__bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease;
}
.top_strength {
margin-top: 0;
padding: calc(2.5rem + 4vh) 1.25rem 3rem;
}
.top_strength_three_columns {
display: block;
margin-bottom: 2rem;
}
.top_strength_three_columns__center {
padding: 0;
}
.top_strength__text {
text-align: center;
align-items: center;
gap: 1.25rem;
font-size: 1rem;
}
.top_service {
padding: 3rem 1rem 5rem;
}
.top_service__header {
margin: 2.5rem 0 1.5rem;
}
.top_service__list {
width: 100%;
gap: 2.5rem;
}
.top_service__item {
border-radius: 1.25rem;
padding-bottom: 1.25rem;
}
.top_service__item-content {
padding: 1.5rem 1rem;
box-shadow: none;
border-radius: 1rem;
}
.top_service_item_bg_board,
.top_service_item_bg_grass {
display: none !important;
}
.top_service__item-link {
position: static;
transform: none;
bottom: auto;
margin-top: 1rem;
}
.top_news {
padding: 2.5rem 1rem;
}
.top_news__header {
text-align: center;
}
.top_company,
.top_to_service_list {
width: 95vw !important;
margin: 4vh auto !important;
padding: 2.5rem 1.25rem !important;
}
.top_company__subtitle,
.top_company__title,
.top_company__text,
.top_to_service_list__subtitle,
.top_to_service_list__title,
.top_to_service_list__text {
width: 100% !important;
}
.top_contact {
width: 95vw !important;
margin: 6vh auto !important;
}
.top_contact__link {
flex-direction: column;
gap: 0.75rem !important;
}
.footer-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-align: center;
}
.footer-brand {
width: 100%;
justify-content: center;
gap: 0.5rem;
margin: 0 auto;
}
.footer-logo {
margin-right: 0;
}
.footer-nav {
margin-right: 0;
width: 100%;
text-align: center;
}
.footer-links {
width: 100%;
flex-direction: column;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
}
|