:root {
--okinawa-blue: #0ea5e9;
--okinawa-teal: #14b8a6;
--okinawa-cyan: #06b6d4;
--coral-orange: #fb923c;
--coral-pink: #f472b6;
--sand-beige: #fbbf24;
--text-dark: #1f2937;
--text-light: #6b7280;
--bg-light: #f0fdff;
--white: #ffffff;
--okinawa-gradient: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 50%, #06b6d4 100%);
--coral-gradient: linear-gradient(135deg, #fb923c 0%, #f472b6 100%);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

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

body {
font-family: 'Hiragino Mincho Pro', 'Noto Serif JP', 'Yu Mincho', 'Times New Roman', serif;
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
background-image: url('../images/ryukyu-pattern.png');
background-repeat: repeat;
background-size: auto;
background-attachment: fixed;
width: 100%;
max-width: 100vw;
}

/* 背景柄の上に載る要素の読みやすさ対策 */
main, header, footer {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
}

/* Header Styles - 共通 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 2rem;
min-height: 70px;
width: 100%;
box-sizing: border-box;
}

.logo-section {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
min-width: 0;
}

.logo-image {
width: 45px;
height: 45px;
position: relative;
transition: transform 0.3s ease;
overflow: hidden;
border-radius: 8px;
flex-shrink: 0;
}

.logo-image:hover {
transform: scale(1.05) rotate(2deg);
}

.logo-image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.2));
transition: filter 0.3s ease;
}

.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
flex: 1;
}

.company-name {
font-family: 'Hiragino Mincho Pro', 'Noto Serif JP', 'Yu Mincho', 'Times New Roman', serif;
font-size: 1.4rem;
font-weight: 700;
background: var(--okinawa-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.company-tagline {
font-size: 0.75rem;
color: var(--text-light);
font-weight: 500;
margin-top: -2px;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.global-nav ul {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
}

.global-nav a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: all 0.3s ease;
position: relative;
white-space: nowrap;
}

.global-nav a:hover,
.global-nav a.current {
color: var(--okinawa-blue);
}

.global-nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background: var(--okinawa-gradient);
transition: width 0.3s ease;
}

.global-nav a:hover::after,
.global-nav a.current::after {
width: 100%;
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-dark);
transition: all 0.3s ease;
flex-shrink: 0;
padding: 0.25rem;
}

.mobile-menu-btn.active {
transform: rotate(90deg);
color: var(--okinawa-blue);
}

main {
padding-top: 70px;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}

/* Hero Section */
.hero-section {
position: relative;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
width: 100%;
}

.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
color: white;
max-width: 800px;
padding: 0 1.5rem;
width: 100%;
box-sizing: border-box;
}

.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
word-wrap: break-word;
}

.hero-content p {
font-size: 1.3rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
word-wrap: break-word;
}

/* Breadcrumb */
.breadcrumb-section {
background: var(--bg-light);
padding: 1rem 0;
width: 100%;
overflow-x: hidden;
}

.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-light);
flex-wrap: wrap;
word-break: break-word;
}

.breadcrumb a {
color: var(--okinawa-blue);
text-decoration: none;
transition: color 0.3s ease;
}

.breadcrumb a:hover {
color: var(--okinawa-teal);
}

.breadcrumb span:not(:last-child) {
color: var(--text-light);
}

/* Common Section Styles */
.section {
padding: 5rem 0;
width: 100%;
overflow-x: hidden;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
box-sizing: border-box;
}

.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-dark);
word-wrap: break-word;
}

.section-subtitle {
text-align: center;
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 3rem;
max-width: 750px;
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
}

/* 沖縄への想いセクション */
.mind {
background: none;
}

.mind-subtitle {
text-align: left;
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 3rem;
max-width: 750px;
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
}

.mind-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
width: 100%;
}

.mind-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-dark);
word-wrap: break-word;
}

.mind-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}

/* 企業理念セクション */
.philosophy {
background: rgba(255, 255, 255, 0.5);
}

.philosophy-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-bottom: 4rem;
width: 100%;
}

.philosophy-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}

.philosophy-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-dark);
word-wrap: break-word;
}

.circulation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
width: 100%;
}

.circulation-item {
text-align: center;
background: var(--white);
padding: 2rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
box-sizing: border-box;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}

.circulation-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}

.circulation-image {
width: 100%;
height: 200px;
margin-bottom: 1.5rem;
border-radius: 15px;
overflow: hidden;
}

.circulation-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.circulation-item h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--text-dark);
word-wrap: break-word;
}

.circulation-item p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 2rem;
text-align: left;
word-wrap: break-word;
}

.circulation-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--okinawa-blue);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
text-align: left;
justify-self: flex-start;
}

.circulation-item:hover .circulation-link {
gap: 1rem;
color: var(--okinawa-teal);
}

/* SDGsセクション */
.sdgs {
background: none;
}

.sdgs-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
width: 100%;
}

.sdgs-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-dark);
word-wrap: break-word;
}

.sdgs-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}

/* MVVセクション */
.mvv {
background: none;
}

.mvv-column {
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
}

.mvv-item {
padding: 2rem;
border-left: 4px solid var(--okinawa-blue);
background: rgba(255, 255, 255, 0.85);
box-shadow: var(--shadow-md);
text-align: left;
border-radius: 12px;
width: 100%;
box-sizing: border-box;
}

.mvv-item h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
word-wrap: break-word;
}

.mvv-item p, 
.mvv-item ul {
font-size: 1.2rem;
color: var(--text-dark);
word-wrap: break-word;
}

.mvv-item ul {
list-style: none;
padding: 0;
}

.mvv-item ul li {
margin-bottom: 0.5rem;
word-wrap: break-word;
}

/* クロージングセクション */
.closing-section {
background: var(--okinawa-gradient);
padding: 5rem 2rem;
text-align: center;
color: white;
position: relative;
width: 100%;
overflow-x: hidden;
}

.closing-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(14, 165, 233, 0.25);
z-index: 0;
}

.closing-content {
position: relative;
z-index: 1;
width: 100%;
}

.closing-text {
max-width: 700px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 0 1rem;
}

.closing-text h2 {
font-size: 1.8rem;
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 700;
word-wrap: break-word;
}

/* お問い合わせボタン */
.contact-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: white;
color: var(--okinawa-blue);
padding: 1.2rem 2.5rem;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
font-size: 1.1rem;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
max-width: 100%;
box-sizing: border-box;
}

.contact-cta-btn:hover {
background: var(--okinawa-blue);
color: white;
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}

/* Footer */
footer {
background: var(--text-dark);
color: white;
padding: 3rem 0 1rem;
width: 100%;
overflow-x: hidden;
}

.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
width: 100%;
}

.footer-section h4 {
font-size: 1.2rem;
margin-bottom: 1rem;
word-wrap: break-word;
}

.footer-section p,
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
line-height: 1.7;
word-wrap: break-word;
}

.footer-section a:hover {
color: white;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.6);
word-wrap: break-word;
}

/* アニメーション */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}

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

/* レスポンシブデザイン */
@media (max-width: 1024px) {
.circulation-grid,
.sdgs-goals {
    grid-template-columns: repeat(2, 1fr);
}

.values-grid {
    grid-template-columns: 1fr;
}

.container {
    padding: 0 1.5rem;
}
}

/* ========== モバイル対応 (~768px) ========== */
@media (max-width: 768px) {
body {
    width: 100%;
    min-width: 320px;
    max-width: 100vw;
}

/* ナビゲーション */
.global-nav {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100vw;
    height: calc(100vh - 70px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease;
    z-index: 999;
}

.global-nav.mobile-active { 
    left: 0; 
}

.global-nav ul {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.global-nav a {
    font-size: 1.2rem;
    padding: 1rem;
    display: block;
}

.mobile-menu-btn { 
    display: block; 
}

.header-container {
    padding: 0.5rem 1rem;
}

.logo-text .company-name {
    font-size: 1.2rem;
}

.logo-text .company-tagline {
    font-size: 0.7rem;
}

/* Heroセクション */
.hero-section { 
    height: 50vh; 
    min-height: 300px;
}

.hero-content {
    padding: 0 1rem;
}

.hero-content h1 { 
    font-size: 2rem; 
    line-height: 1.2;
}

.hero-content p { 
    font-size: 1rem; 
}

/* 共通セクション調整 */
.section { 
    padding: 3rem 0; 
}

.container { 
    padding: 0 1rem; 
    width: 100%;
    max-width: 100%;
}

.section-title { 
    font-size: 2rem; 
    line-height: 1.2;
    padding: 0 0.5rem;
}

.section-subtitle { 
    font-size: 1rem; 
    padding: 0 0.5rem;
}

/* 企業理念・SDGs・MVVを1カラム化 */
.philosophy-content,
.sdgs-content,
.mind-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}

.mvv-column {
    gap: 1.5rem;
}

/* 画像高さ縮小 */
.philosophy-image img,
.sdgs-image img,
.mind-image img {
    height: 250px;
}

.circulation-image { 
    height: 150px; 
}

/* 循環アイテム */
.circulation-grid { 
    grid-template-columns: 1fr; 
    gap: 1.5rem;
}

.circulation-item {
    padding: 1.5rem;
}

/* MVV調整 */
.mvv-item { 
    padding: 1.5rem; 
}

.mvv-item h3 {
    font-size: 1.4rem;
}

.mvv-item p,
.mvv-item ul {
    font-size: 1rem;
}

/* クロージングセクション */
.closing-section {
    padding: 3rem 1rem;
}

.closing-text {
    padding: 0 0.5rem;
}

.closing-text h2 {
    font-size: 1.5rem;
}

/* フッター調整 */
.footer-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
    padding: 0 1rem;
}
}

/* ========== 小さいスマホ対応 (~480px) ========== */
@media (max-width: 480px) {
.container {
    padding: 0 0.75rem;
}

.header-container {
    padding: 0.5rem 0.75rem;
}

.logo-text .company-name {
    font-size: 1rem;
}

.logo-text .company-tagline {
    font-size: 0.65rem;
}

.logo-image {
    width: 35px;
    height: 35px;
}

.hero-content h1 { 
    font-size: 1.6rem; 
}

.hero-content {
    padding: 0 0.75rem;
}

.section-title { 
    font-size: 1.5rem; 
    padding: 0 0.25rem;
}

.section-subtitle {
    font-size: 0.9rem;
    padding: 0 0.25rem;
}

.contact-cta-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
}

.mvv-item {
    padding: 1rem;
}

.circulation-item {
    padding: 1rem;
}

.closing-text h2 {
    font-size: 1.3rem;
}

.philosophy-text,
.sdgs-text,
.mind-text {
    font-size: 1rem;
    line-height: 1.6;
}