@charset "UTF-8";

:root {
--color-primary-heavy: #6bbb4f;
--color-primary: #4dab8f;
--color-primary-light: #6dbfa7;
--color-primary-pale: #e8f5f1;
--color-accent: #b8ddd3;
--color-text: #333333;
--color-text-light: #666666;
--color-bg: #ffffff;
--color-news-bg: #dff3d6;
--color-footer-bg: #cee8f6;
--font-mincho: "Yu Mincho", "游明朝", "YuMincho", "Noto Serif JP", serif;
--font-gothic: "Source Han Sans JP", "源ノ角ゴシック JP", "Noto Sans JP", sans-serif;
--content-width: 1200px;
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: 16px;
scroll-behavior: smooth;
}

body {
font-family: var(--font-gothic);
color: var(--color-text);
background: #fff;
overflow-x: hidden;
font-feature-settings: "palt";
}

br.only_sp {
display: none;
}

.only-pc {
display: block;
}

.only-sp {
display: none;
}

@media only screen and (max-width: 750px) {
br.only_sp {
display: block;
}

.only-pc {
display: none;
}

.only-sp {
display: block;
}
}

/* HEADER */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
z-index: 1000;
border-bottom: 1px solid #aaaaaa;
}

.header-inner {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 0 0 20px;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}

.header-logo img {
height: 58px;
width: auto;
}

@media (max-width: 750px) {
.header-inner {
padding: 0 20px;
height: 80px;
}

.header-logo img {
height: 48px;
}
}

/* PC用ナビゲーション */
nav.nav-pc ul {
list-style: none;
display: flex;
gap: 20px;
}

nav.nav-pc ul li a {
position: relative;
font-family: var(--font-gothic);
font-weight: 500;
font-size: 18px;
letter-spacing: 0.01em;
color: var(--color-text);
text-decoration: none;
padding-bottom: 4px;
transition: color 0.3s;
}

nav.nav-pc ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--color-primary);
transition: width 0.3s;
}

nav.nav-pc ul li a:hover {
color: var(--color-primary);
}

nav.nav-pc ul li a:hover::after {
width: 100%;
}

/* PC用ナビを非表示 */
@media (max-width: 750px) {
nav.nav-pc {
display: none;
}
}

/* モバイル用ナビゲーション */
.hamburger-menu {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
gap: 6px;
padding: 0;
margin-right: 20px;
}

.hamburger-line {
display: block;
width: 24px;
height: 3px;
background: var(--color-text);
border-radius: 2px;
transition: all 0.3s ease;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}

/* モバイル用ハンバーガーメニューを表示 */
@media (max-width: 750px) {
.hamburger-menu {
display: flex;
}
}

nav.nav-mobile {
display: none;
}

/* モバイルメニューのスタイル */
@media (max-width: 750px) {
nav.nav-mobile {
display: block;
position: fixed;
top: 80px;
left: 0;
right: 0;
background: rgba(255, 255, 255);
backdrop-filter: blur(8px);
z-index: 999;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
border-bottom: 1px solid #aaaaaa;
}

nav.nav-mobile.open {
max-height: 100vh;
}

nav.nav-mobile ul {
list-style: none;
display: flex;
flex-direction: column;
padding: 20px 0;
}

nav.nav-mobile ul li {
border-bottom: 1px solid #eeeeee;
}

nav.nav-mobile ul li a {
padding: 30px 20px;
font-size: 5vw;
display: block;
font-family: var(--font-gothic);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-text);
text-decoration: none;
transition: background 0.3s, color 0.3s;
}

nav.nav-mobile ul li a:hover {
background: var(--color-primary-pale);
color: var(--color-primary);
}

nav.nav-mobile .menu-logo {
padding: 0 0 100vh;
}

nav.nav-mobile .menu-logo p {
font-size: 8vw;
}
}

/* ---------------------HERO--------------------- */

.hero {
padding-top: 72px;
width: 100%;
}

.hero-catch {
max-width: var(--content-width);
text-align: center;
margin: 0 auto;
padding: 90px 0 20px;
}

.hero-catch h1 {
font-family: var(--font-mincho);
font-size: 74px;
font-weight: 400;
color: var(--color-text);
letter-spacing: 0.05em;
line-height: 1;
}

.hero-mv {
width: 100%;
height: clamp(280px, 36vw, 600px);
overflow: hidden;
}

.hero-mv img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}

@media (max-width: 750px) {
.hero-catch {
padding: 8vw 0 2.66666vw;
}

.hero-catch h1 {
font-size: 8.8vw;
line-height: 1.3;
}
}



/* -------------------- lower-HERO --------------------- */
.lower-hero {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}

.lower-hero .lower-hero-inner img {
width: 100%;
height: 448px;
object-fit: cover;
object-position: center top;
}

.lower-hero .lower-title {
width: 960px;
margin: 0 auto;
position: absolute;
top: 148px;
left: 0;
right: 0;
}

.lower-hero .lower-title p {
font-family: var(--font-mincho);
font-size: 100px;
font-weight: 300;
color: var(--color-text);
line-height: 1;
}

@media (max-width: 750px) {
.lower-hero .lower-hero-inner img {
height: 59.73333vw;
}

.lower-hero .lower-title {
width: 100%;
top: 33.33333vw;
text-align: center;
}

.lower-hero .lower-title p {
font-size: 12vw;
}
}

/* ABOUT */
.about {
display: block;
padding-top: 70px;
margin-top: -70px;
}

.about-wrap {
max-width: var(--content-width);
margin: 0 auto;
padding: 100px 20px 100px 120px;
display: flex;
justify-content: space-between;
align-items: start;
}

.about-heading {
font-family: var(--font-mincho);
font-size: 100px;
font-weight: 300;
color: var(--color-text);
line-height: 1;
}

.about-body p {
font-family: var(--font-mincho);
font-size: 22px;
line-height: 2.272727;
color: var(--color-text);
margin-bottom: 16px;
font-weight: 400;
}

.more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
font-family: var(--font-gothic);
font-size: 18px;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
text-transform: uppercase;
}

.more-btn:hover {
color: var(--color-primary);
}

.more-btn::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: var(--color-text);
transition: width 0.3s;
margin-top: 2px;
}

.more-btn:hover::after {
width: 120px;
background-color: var(--color-primary);
}

@media (max-width: 750px) {
.about-wrap {
flex-direction: column;
padding: 8vw 2.66666vw;
align-items: center;
}

.about-heading {
font-size: 12vw;
margin-bottom: 4vw;
}

.about-body p {
font-size: 3.6vw;
line-height: 1.8;
text-align: center;
}

.more-btn {
display: flex;
justify-content: center;
margin: 2.66666vw auto 0;
font-size: 4.8vw;
}

.more-btn::after {
width: 5.33333vw;
}

.more-btn:hover::after {
width: 16vw;
}
}

/* NEWS */
.news {
display: block;
padding-top: 120px;
margin-top: -120px;
}

.news-inner {
width: var(--content-width);
background: var(--color-news-bg);
margin: 0 auto 220px;
display: flex;
justify-content: start;
align-items: center;
}

.news-label {
width: 30%;
padding: 0 0 0 120px;
}

.news-label h2 {
font-family: var(--font-mincho);
font-size: 60px;
font-weight: 400;
line-height: 1;
color: var(--color-text);
}

.news-label span {
font-size: 20px;
display: block;
margin-top: 6px;
}

.news-content {
width: 70%;
}

.news-item {
margin: 50px 0;
padding: 42px 0 42px 40px;
background-color: #bfe6ad;
display: flex;
justify-content: left;
align-items: center;
gap: 20px;
color: var(--color-text);
font-family: var(--font-gothic);
font-size: 18px;
line-height: 1.5;
}

.news-date {
}

.news-title {
width: 650px;
}

.news-title p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.news-more {
display: flex;
justify-content: flex-end;
margin: 18px 40px 18px 0;
}

.news-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-gothic);
font-size: 18px;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
text-transform: uppercase;
}

.news-btn:hover {
color: var(--color-primary);
}

.news-btn::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: var(--color-text);
transition: width 0.3s;
margin-top: 2px;
}

.news-btn:hover::after {
width: 120px;
background-color: var(--color-primary);
}

@media (max-width: 750px) {
.news {
padding-top: 16vw;
margin-top: -16vw;
}

.news-inner {
width: 100%;
flex-direction: column;
margin: 0 auto 16vw;
}

.news-label {
width: 100%;
padding: 5.33333vw 0;
text-align: center;
}

.news-label h2 {
font-size: 8vw;
display: inline;
}

.news-label span {
font-size: 4vw;
display: inline-block;
padding: 0 0 0 1.33333vw;
}

.news-content {
width: 100%;
}

.news-item {
margin: 0 auto;
padding: 4vw 0;
}

.news-content {
width: 100%;
}

.news-item {
margin: 0 auto;
padding: 4.8vw 0;
display: block;
font-size: 3.6vw;
text-align: center;
}

.news-date {
margin: 0 auto 2.13333vw;
}

.news-title {
width: 90%;
margin: 0 auto;
}

.news-title p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.news-more {
display: flex;
justify-content: center;
margin: 6.13333vw 0;
}

.news-btn {
font-size: 4.8vw;
}

.news-btn::after {
width: 5.33333vw;
}

.news-btn:hover::after {
width: 16vw;
}
}

/* OVERVIEW */
.overview {
position: relative;
display: block;
padding-top: 120px;
margin-top: -120px;
}

.overview .img_left {
max-width: 28.125%;
position: absolute;
top: 10%;
left: 0;
z-index: -5;
}

.overview .img_left img {
width: 100%;
}

.overview .img_right {
max-width: 20.83333%;
position: absolute;
top: 31%;
right: 0;
z-index: -5;
}

.overview .img_right img {
width: 100%;
}

.overview-wrap {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 0 320px;
}

.overview-heading {
margin: 0 0 40px 322px;
}

.overview-heading h2 {
font-family: var(--font-mincho);
font-size: 100px;
font-weight: 300;
color: var(--color-text);
line-height: 1;
display: inline;
}

.overview-heading .sub {
font-size: 20px;
margin-left: 0px;
display: inline;
}

table.ov-table {
width: 960px;
border-collapse: collapse;
margin: 0 auto;
font-family: var(--font-gothic);
font-size: 18px;
color: var(--color-text);
text-align: left;
vertical-align: middle;
background-color: var(--color-bg);
}

table.ov-table tr {}

table.ov-table th {
font-weight: 500;
background: var(--color-news-bg);
border-bottom: 1px solid var(--color-bg);
padding: 30px 0 30px 30px;
white-space: nowrap;
width: 160px;
vertical-align: middle;
}

table.ov-table td {
line-height: 1.6;
vertical-align: middle;
padding: 30px 0 30px 20px;
border-bottom: 1px solid #bbbbbb;
vertical-align: middle;
letter-spacing: 0.1em;
}

/* OVERVIEW */
@media (max-width: 750px) {
.overview {
padding-top: 120px;
margin-top: -120px;
}

.overview .img_left,
.overview .img_right {
display: none;
}

.overview-wrap {
padding: 0 2.66666vw 13.33333vw;
}

.overview-heading {
margin: 0 0 4vw;
text-align: center;
}

.overview-heading h2 {
font-size: 12vw;
}

.overview-heading .sub {
font-size: 4vw;
}

table.ov-table {
width: 100%;
font-size: 3.2vw;
}

table.ov-table th {
padding: 4vw 0;
width: 21.33333vw;
text-align: center;
}

table.ov-table td {
padding: 4vw 0 4vw 2.66666vw;
}
}

/* FOOTER */
footer {
background: var(--color-footer-bg);
padding: 0 0 10px;
}

.footer-inner {
max-width: var(--content-width);
margin: 0 auto;
}

.footer-top {
padding: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}

.footer-left {
padding: 60px 0 0;
}

.footer-logo {
width: 294px;
margin-bottom: 28px;
}

.footer-logo img {
width: 100%;
display: block;
}

.footer-address {
font-family: var(--font-gothic);
color: var(--color-text);
font-size: 16px;
line-height: 1.6;
}

.footer-right {
padding: 100px 0 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 65px;
}

.footer-nav ul {
list-style: none;
display: flex;
gap: 20px;
}

.footer-nav ul li a {
font-family: var(--font-gothic);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-text);
text-decoration: none;
}


.footer-nav ul li a:hover {
color: #4586c5;
}

.footer-nav ul li a:hover::after {
width: 100%;
}

.footer-sns {
display: flex;
gap: 30px;
align-items: center;
}

.footer-sns a img {
width: 42px;
height: 42px;
object-fit: contain;
transition: opacity 0.3s;
opacity: 0.7;
}

.footer-sns a:hover img {
opacity: 0.4;
}

.footer-bottom {
padding-top: 44px;
}

.footer-bottom small {
font-family: var(--font-gothic);
color: var(--color-text);
font-size: 10px;
}

@media (max-width: 750px) {
footer {
padding: 0 0 2.66666vw;
}

.footer-top {
flex-direction: column;
padding: 8vw 2.66666vw 0;
}

.footer-left {
padding: 0;
margin: 0 auto;
}

.footer-logo {
width: 80%;
margin: 0 auto 4vw;
text-align: center;
}

.footer-address {
font-size: 3.6vw;
text-align: center;
}

.footer-right {
padding: 6.66666vw 0 0;
display: block;
margin: 0 auto 4vw;
}

.footer-nav ul {
gap: 2.66666vw;
margin: 0 auto 5.33333vw;
}

.footer-nav ul li a {
font-size: 4vw;
}

.footer-nav ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #4586c5;
transition: width 0.3s;
}

.footer-nav ul li a::after {
transition: none;
}

.footer-nav ul li a:hover {
color: #4586c5;
}

.footer-nav ul li a:hover::after {
display: none;
}

.footer-sns {
justify-content: center;
gap: 4vw;
}

.footer-bottom {
padding-top: 4vw;
text-align: center;
}

.footer-bottom small {
font-size: 2vw;
}
}

/* FADE IN */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}