/* Combined CSS from all files */

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/service/export-service/export-agent/export-agent.css */
/* 基本的なスタイルのリセットと設定 */
body, h1, h2, h3, p, ul, li, table, details { margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; box-sizing: border-box; }
body { line-height: 1.7; color: #333; background-color: #fff; }
.container { max-width: 1024px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
.section-bg { background-color: #f8f9fa; }

/* ヘッダー */
.main-header { padding: 10px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.header-logo img { max-height: 40px; }
.header-cta a { display: inline-block; }
.header-cta img { height: 50px; }
.header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }


/* ナビゲーション */
.main-nav { background-color: #0d2a4c; text-align: center; padding: 12px 0; border-bottom: 3px solid #f0b90b; position: sticky; top: 0; z-index: 1000; }
.main-nav a { margin: 0 15px; font-weight: bold; color: #fff; font-size: 0.9rem; }
.main-nav a i { margin-right: 8px; }

/* ヒーローセクション */
.hero-section {
    background-image: linear-gradient(rgba(0, 20, 40, 0.0), rgba(0, 20, 40, 0.0)), url('image/angryman.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}
.hero-section h1 { font-size: 2.8rem; margin-bottom: 20px; line-height: 1.4; font-weight: 900; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
.hero-section h1 span { color: #ff4d4d; }
.hero-section .sub-headline { font-size: 1.2rem; max-width: 800px; margin: 0 auto 30px auto; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); }
.hero-section .cta-button { background-color: #e60012; color: #fff; padding: 15px 40px; font-size: 1.2rem; border-radius: 5px; font-weight: bold; display: inline-block; text-shadow: none; }
.hero-section .cta-button:hover { background-color: #c00; text-decoration: none; }

/* 共通セクションスタイル */
.content-section { padding: 80px 20px; }
.section-title {
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 60px;
    background-color: #0d2a4c;
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: block;
}
.section-title span { color: #f0b90b; }
.text-center { text-align: center; }

/* お悩みセクション (背景画像適用) */
.problems-section.background-hagare {
    position: relative;
    z-index: 1;
    background-image: url('image/hagare.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.problems-section.background-hagare::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.9); /* 白い半透明のフィルター */
    z-index: -1;
}
.problems-container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
.problems-list { list-style: none; padding: 0; text-align: left; }
.problems-list li { margin-bottom: 15px; font-size: 1.1rem; display: flex; align-items: center; }
.problems-list i { margin-right: 12px; font-size: 1.4rem; line-height: 1.7; width: 25px; text-align: center; }
.problems-list .fa-angry { color: #d9534f; }
.problems-list .fa-sad-tear { color: #5bc0de; }
.highlight-pink { background: linear-gradient(transparent 60%, #ffd7d7 60%); font-weight: bold; }

/* お客様の声 (スライダー) */
.testimonial-section { background-color: #f0f4f8; }
.swiper { width: 100%; height: auto; padding: 20px 0 50px 0; }
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 90px 30px; /* Increased vertical padding to 300% of original 30px */
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 420px;
    width: 50% !important; /* Added for 50% width */
}
.testimonial-card { text-align: left; }
.testimonial-card h3 { color: #e85f0c; margin-bottom: 15px; font-size: 1.4rem; }
.testimonial-card img {
    margin-top: 15px;
    border-radius: 5px;
    width: 200px; /* Fixed width */
    height: 200px; /* Fixed height */
    object-fit: cover; /* Crop image to fit */
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.swiper-button-next, .swiper-button-prev { color: #0d2a4c; }
.swiper-pagination-bullet-active { background: #0d2a4c; }

/* FAQ */
.faq-item { text-align: left; border-bottom: 1px solid #ddd; padding: 20px 0; }
.faq-item summary { font-weight: bold; cursor: pointer; list-style: none; font-size: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item .faq-content { padding: 15px 10px 0 10px; color: #555; }
.faq-item .faq-content ul { list-style: disc; margin-left: 20px; margin-top: 10px; } /* Added for bullet points in FAQ */
.faq-item .faq-content ul li { margin-bottom: 5px; } /* Added for bullet points in FAQ */

/* フォーム */
.contact-form-section { background-color: #f0f4f8; }
.contact-form { max-width: 800px; margin: 40px auto; border: 1px solid #ccc; padding: 30px; border-radius: 5px; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.form-table { width: 100%; border-collapse: collapse; }
.form-table th, .form-table td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; }
.form-table th { width: 30%; background-color: #f8f9fa; vertical-align: top; font-weight: bold; }
.form-table input[type="text"], .form-table input[type="email"], .form-table input[type="tel"], .form-table textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.form-table .haveto { background-color: #e60012; color: #fff; padding: 3px 6px; font-size: 0.8rem; border-radius: 3px; margin-right: 5px; }
.form-submit-button { background-color: #e60012; color: #fff; border: none; padding: 15px 40px; font-size: 1.2rem; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; }
.form-submit-button:hover { background-color: #c00; }
.form-submit-button:disabled { background-color: #ccc; cursor: not-allowed; }

/* フッター */
.main-footer { background-color: #2c3e50; color: #ecf0f1; padding: 50px 0; }
.company-table { width: 100%; max-width: 800px; margin: 0 auto; color: #bdc3c7; }
.company-table td { padding: 12px; border-bottom: 1px solid #34495e; }
.company-table td:first-child { font-weight: bold; width: 30%; color: #fff; }
.copyright { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #34495e; font-size: 0.9rem; color: #7f8c8d; }

/* New styles for the alternating sections */
.alternating-section {
    background-color: #add8e6; /* Light blue background as in your screenshot */
    padding: 60px 0;
}

.alternating-item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.alternating-item:last-child {
    margin-bottom: 0;
}

.alternating-item-reverse {
    flex-direction: row-reverse;
}

.alternating-item .text-content,
.alternating-item .image-content {
    flex: 1;
    min-width: 300px; /* Adjust as needed for smaller screens */
}

.alternating-item .image-content img {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.alternating-item .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* NEW: Simple Numbered Icon Style */
.point-icon {
    width: 70px;
    height: 70px;
    margin-right: 15px;
    flex-shrink: 0;
    background-color: #0d2a4c; /* Site's main dark blue */
    color: #f0b90b; /* Site's accent gold */
    border-radius: 50%; /* Make it a circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* Large number */
    font-weight: 900; /* Bold number */
    line-height: 1; /* Adjust line height for better vertical centering */
}

.alternating-item .title h3 {
    font-size: 1.8rem;
    color: #0d2a4c;
    line-height: 1.4;
    margin: 0;
}

.alternating-item p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.marker_yellow {
    background: linear-gradient(transparent 60%, #ffff99 60%);
    font-weight: bold;
}
.marker_pink { /* Added for FAQ content */
    background: linear-gradient(transparent 60%, #ffd7d7 60%);
    font-weight: bold;
}

/* Responsive adjustments for alternating sections */
@media (max-width: 768px) {
    .alternating-item {
        flex-direction: column;
        text-align: center;
    }
    .alternating-item-reverse {
        flex-direction: column; /* On small screens, always stack */
    }
    .alternating-item .title {
        flex-direction: column;
        text-align: center;
    }
    .point-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

.final-message {
    text-align: center;
    margin-top: 60px;
    padding: 30px;
    background-color: #f0b90b;
    color: #0d2a4c;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.final-message p {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6;
}

.final-message span {
    color: red;
    font-size: 2.2rem;
    display: block;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .final-message span {
        font-size: 1.8rem;
    }
}



/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/about.css */
/* about.html専用のスタイル */
.profile-table th {
    width: 25%;
    background-color: #f4f8fb;
}
.profile-table .note {
  font-size: 0.9em;
  color: #666;
  margin-top: 10px;
  display: block;
}
.media-table th:first-child, .media-table td:first-child {
    width: 15%;
}
.media-table th:nth-child(2), .media-table td:nth-child(2) {
    width: 15%;
}
.timeline { position: relative; width: 100%; max-width: 900px; margin: 40px auto; padding: 40px 0; list-style: none; }
.timeline:before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #e9ecef; }
.timeline-item { position: relative; width: 50%; padding: 0 40px; margin-bottom: 40px; box-sizing: border-box; opacity: 0; transform: translateY(40px); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
.timeline-item.is-visible { opacity: 1; transform: translateY(0); }
.timeline-item:nth-child(odd) { left: 0; padding-right: 50px; }
.timeline-item:nth-child(even) { left: 50%; padding-left: 50px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; top: 18px; width: 12px; height: 12px; background-color: #fff; border: 2px solid #72AEE6; border-radius: 50%; z-index: 10; transition: all 0.3s ease; }
.timeline-item.is-visible .timeline-dot { transform: scale(1.2); box-shadow: 0 0 15px rgba(114, 174, 230, 0.7); }
.timeline-item:nth-child(odd) .timeline-dot { right: -6px; }
.timeline-item:nth-child(even) .timeline-dot { left: -6px; }
.timeline-item--iconic .timeline-dot { top: 8px; width: 40px; height: 40px; background-color: #0A1E3E; border: 3px solid #fff; box-shadow: 0 0 0 2px #0A1E3E; display: flex; align-items: center; justify-content: center; }
.timeline-item--iconic.is-visible .timeline-dot { box-shadow: 0 0 0 2px #0A1E3E, 0 0 25px rgba(10, 30, 62, 0.5); }
.timeline-item--iconic:nth-child(odd) .timeline-dot { right: -20px; }
.timeline-item--iconic:nth-child(even) .timeline-dot { left: -20px; }
.timeline-dot i { color: #fff; font-size: 1.4rem; }
.timeline-content { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: 15px 20px; box-shadow: 0 8px 30px rgba(10, 30, 62, 0.07); position: relative; }
.timeline-content:after { content: " "; position: absolute; top: 20px; transform: rotate(45deg); width: 12px; height: 12px; background-color: #fff; border-bottom: 1px solid #e9ecef; border-right: 1px solid #e9ecef; }
.timeline-item--iconic .timeline-content:after { top: 16px; }
.timeline-item:nth-child(odd) .timeline-content:after { right: -7px; border-bottom: 0; border-right: 1px solid #e9ecef; border-top: 1px solid #e9ecef; border-left: 0; }
.timeline-item:nth-child(even) .timeline-content:after { left: -6px; border-bottom: 1px solid #e9ecef; border-right: 0; border-top: 0; border-left: 1px solid #e9ecef; }
.timeline-date { font-size: 1.05rem; font-weight: 700; color: #0A1E3E; margin-bottom: 6px; }
.timeline-text { font-size: 0.9rem; line-height: 1.65; color: #333; }
@media (max-width: 768px) {
    .timeline:before { left: 20px; }
    .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { width: 100%; left: 0 !important; padding-left: 60px; padding-right: 15px; margin-bottom: 30px; }
    .timeline-dot { left: 14px !important; }
    .timeline-item--iconic .timeline-dot { left: 0 !important; }
    .timeline-content:after, .timeline-item:nth-child(odd) .timeline-content:after { left: -6px !important; right: auto !important; border-bottom: 1px solid #e9ecef; border-right: 0; border-top: 0; border-left: 1px solid #e9ecef; }
}

/* ★★★★★ ここから追加 ★★★★★ */
/* 代表メッセージセクション */
#message .message-block {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
}
#message .message-block.reverse {
    flex-direction: row-reverse;
}
#message .message-photo {
    flex: 0 0 300px;
    text-align: center;
}
#message .message-photo img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
#message .message-text {
    flex: 1;
    line-height: 2;
}
#message .signature-block {
    text-align: right;
}
#message .signature-block img {
    max-width: 300px;
}

@media (max-width: 900px) {
    #message .message-block,
    #message .message-block.reverse {
        flex-direction: column;
    }
    #message .message-photo {
        flex-basis: auto;
        width: 100%;
        max-width: 400px;
    }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/access.css */
/* access.html専用のスタイル */
.access-card { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    background-color: #f9fafb; 
    padding: 40px; 
    border-radius: 12px; 
}
.access-details p { 
    line-height: 1.8; 
    font-size: 0.95rem; 
    margin-bottom: 20px; 
}
.access-dl { 
    font-size: 0.95rem; 
    margin-top: 30px; 
}
.access-dl dt { 
    font-weight: bold; 
    color: #555; 
    float: left; 
    clear: left; 
    width: 50px; 
    line-height: 1.8; 
}
.access-dl dd { 
    margin-left: 60px; 
    margin-bottom: 10px; 
    line-height: 1.8; 
}
.access-map { 
    border-radius: 8px; 
    overflow: hidden; 
    min-height: 350px;
    height: 100%; /* ★★★ 地図の高さを親要素に合わせる ★★★ */
}

@media (max-width: 900px) { 
    .access-card { 
        grid-template-columns: 1fr; 
    } 
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/common.css */
/* =================================================================== */
/* common.css - サイト共通スタイルシート (最終確定版)                      */
/* =================================================================== */

/* --- 基本設定 --- */
:root {
  --primary-color: #0A1E3E; /* 濃い青 (藍色) */
  --secondary-color: #72AEE6; /* 明るい青 (水色) */
  --text-color: #333;
  --bg-color: #f4f7f6;
  --card-bg-color: #ffffff;
}
html, body {
  margin: 0; padding: 0; font-family: 'Noto Sans JP', 'M PLUS Rounded 1c', "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.7; scroll-behavior: smooth;
}
a { color: var(--secondary-color); text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
a:hover { text-decoration: underline; opacity: 0.8; }
img { max-width: 100%; height: auto; vertical-align: middle; }

/* --- サイト全体の基本レイアウト --- */
.container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }

/* --- サイドバーレイアウト --- */
.main-layout { display: flex; align-items: flex-start; gap: 30px; }
.sidebar-wrapper { flex: 0 0 220px; position: sticky; top: 120px; }
.content-wrapper { flex: 1; min-width: 0; }

/* --- ページコンテンツ共通スタイル --- */
.page-content { padding-top: 100px; }
.page-content .container { padding-top: 0; padding-bottom: 80px; }
.content-wrapper section { background: var(--card-bg-color); padding: 30px 40px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.07); margin-bottom: 60px; }

/* H2, H3, H4 の統一スタイル */
.content-wrapper h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    text-align: center;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: none;
    letter-spacing: 1px;
    position: relative; 
}
.content-wrapper h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 360px;
    height: 8px;
    background: linear-gradient(to right, var(--secondary-color) 70%, var(--primary-color) 30%);
    border-radius: 4px;
}
.content-wrapper h2 > span {
    display: inline-flex;
    align-items: center;
    gap: 15px;
}
/* ★★★ アイコンを「翼(羽)」に最終修正 ★★★ */
.content-wrapper h2 > span::before,
.content-wrapper h2 > span::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Solidアイコンセットのウェイト */
    content: "\f52d"; /* fa-feather アイコンのUnicode */
    font-size: 1.8rem; 
    color: var(--secondary-color);
}
.content-wrapper h2 > span::after {
    transform: scaleX(-1);
}


.content-wrapper h3 {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-top: 50px;
  margin-bottom: 25px;
  padding-left: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--secondary-color);
  position: relative;
  line-height: 1.4;
}
.content-wrapper h3::before {
  content: '';
  position: absolute;
  left: 0;
  width: 6px;
  background-color: var(--secondary-color);
  border-radius: 3px;
  top: 0;
  bottom: -3px;
}
.content-wrapper h4 {
  font-size: 1.2rem;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 5px solid var(--secondary-color);
  padding-left: 10px;
}

.page-hero { position: relative; height: 350px; background-size: cover; background-position: center; border-radius: 12px; margin-bottom: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; padding: 20px; box-sizing: border-box; }
.page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 30, 62, 0.5); border-radius: 12px; }
.page-hero > * { position: relative; z-index: 2; }
.page-hero h1 { font-family: 'Anton', sans-serif; font-size: 3.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); margin: 0; }
.page-hero .h1-sub { font-size: 1.2rem; margin-top: 10px; opacity: 0.9; }

section[id] { scroll-margin-top: 120px; }

.table-wrapper { overflow-x: auto; margin: 30px 0; border: 1px solid #dee2e6; border-radius: 8px; }
.styled-table {
    width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.styled-table th, 
.styled-table td {
    border: 1px solid #dee2e6; padding: 15px; text-align: left; vertical-align: top;
}
.styled-table thead th {
    background-color: var(--secondary-color);
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.styled-table tbody tr:nth-child(even) { background-color: #f8f9fa; }
.styled-table tbody tr:hover { background-color: #e9ecef; }
.styled-table ul { margin: 0; padding-left: 20px; }


/* --- レスポンシブ (共通) --- */
@media (max-width: 900px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .sidebar-wrapper { display: none; }
    .main-layout { flex-direction: column; }
}
@media (max-width: 768px) {
    .logo img { max-height: 40px; }
    .page-hero { height: 250px; }
    .page-hero h1 { font-size: 2.5rem; }
    .content-wrapper section { padding: 20px; }
    .content-wrapper h2 { font-size: 1.8rem; gap: 10px; padding-bottom: 20px;}
    .content-wrapper h2::after { width: 240px; height: 6px; }
    .content-wrapper h2 > span::before, .content-wrapper h2 > span::after { font-size: 1.5rem; }
    .content-wrapper h3 { font-size: 1.3rem; padding-left: 15px; }
    .content-wrapper h3::before { width: 5px; }
    .content-wrapper h4 { font-size: 1.1rem; }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/contact.css */
/* contact.html専用のスタイル */
.form-container { 
    background-color: #fff; 
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.form-group { 
    display: flex; 
    border-bottom: 1px solid #e0e0e0; 
}
.form-group:last-child { 
    border-bottom: none; 
}
.form-label { 
    background-color: #f9f9f9; 
    padding: 20px; 
    width: 30%; 
    font-weight: bold; 
    display: flex; 
    align-items: flex-start; 
    border-right: 1px solid #e0e0e0; 
}
.form-label .required { 
    background-color: #d9534f; 
    color: #fff; 
    font-size: 0.75rem; 
    padding: 2px 6px; 
    border-radius: 3px; 
    margin-left: 8px; 
    flex-shrink: 0; 
}
.form-content { 
    padding: 20px; 
    width: 70%; 
}
.form-input, .form-select, .form-textarea { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 1rem; 
    font-family: inherit; 
}
.form-textarea { 
    height: 200px; 
    resize: vertical; 
}
.radio-group label, .checkbox-group label { 
    display: block; 
    margin-bottom: 10px; 
    cursor: pointer; 
}
.radio-group input, .checkbox-group input { 
    margin-right: 8px; 
}
.submit-button-wrapper { 
    text-align: center; 
    margin: 40px 0; 
}
.submit-button { 
    background-color: #f0ad4e; 
    color: #fff; 
    border: none; 
    padding: 15px 60px; 
    font-size: 1.2rem; 
    font-weight: bold; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: opacity 0.3s; 
}
.submit-button:hover { 
    opacity: 0.85; 
}
.submit-button:disabled { 
    background-color: #ccc; 
    cursor: not-allowed; 
}
.form-introduction { 
    margin-bottom: 40px; 
    padding: 30px; 
    background-color: #f9fafb; 
    border-radius: 8px; 
    border: 1px solid #e0e0e0; 
}
.form-intro-heading { 
    font-size: 1.6rem; 
    font-weight: bold; 
    text-align: center; 
    margin: 0 0 25px 0; 
    line-height: 1.6; 
    color: #0A1E3E; 
}
.form-intro-notes { 
    list-style-type: none; 
    padding-left: 0; 
    font-size: 0.9rem; 
    line-height: 1.8; 
    color: #333; 
}
.form-intro-notes li { 
    margin-bottom: 12px; 
    padding-left: 1.3em; 
    text-indent: -1.3em; 
}
.form-intro-notes li::before { 
    content: "・"; 
    font-weight: bold; 
    margin-right: 0.5em; 
}
.form-intro-notes .seal-container { 
    text-indent: 0; 
    margin-top: 15px; 
}
.form-intro-notes .seal-container::before { 
    content: none; 
}
.form-required-note { 
    text-align: center; 
    margin-top: 30px; 
    font-weight: bold; 
    color: #c9302c; 
}
.form-sub-note { 
    font-size: 0.85rem; 
    color: #555; 
    margin-top: 8px; 
}
.form-label small { 
    font-weight: normal; 
    font-size: 0.85rem; 
    display: block; 
    margin-top: 4px; 
}
.form-note { 
    text-align: left; 
    background-color: #f9fafb; 
    border-radius: 8px; 
    padding: 20px;
    margin-top: 40px;
}
.form-note p { 
    margin: 0; 
}
.form-note p + p { 
    margin-top: 1em; 
}
.radio-group label:hover, .checkbox-group label:hover { 
    background-color: #f0f4f8; 
    border-radius: 4px; 
}

@media (max-width: 768px) { 
    .form-group { flex-direction: column; } 
    .form-label, .form-content { width: 100%; border-right: none; } 
    .form-label { border-bottom: 1px solid #e0e0e0; } 
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/footer.css */
/* footer.html 専用のスタイル */
.footer {
  background-color: #343a40; /* 暗い背景 */
  color: #f8f9fa; /* 明るいテキスト */
  padding: 40px 20px;
  font-family: Arial, sans-serif; /* クリーンなフォント */
  text-align: center;
}

.footer-main-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer-copyright {
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-related-sites {
  width: 100%;
  max-width: 900px; /* 関連サイト全体が収まるように幅を調整 */
  text-align: center;
}

.footer-related-sites h3 {
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #72AEE6; /* ハイライトカラー */
  position: relative;
  padding-bottom: 10px;
}

.footer-related-sites h3::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: #72AEE6;
  margin: 10px auto 0;
}

.site-links-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid; /* Gridレイアウトに変更 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 応答性のある列幅 */
  gap: 15px; /* カード間の間隔 */
}

.site-card {
  display: flex;
  flex-direction: column; /* アイコン、タイトル、URLを縦に並べる */
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.08); /* 半透明の背景 */
  color: #f8f9fa;
  padding: 15px; /* カード内のパディング */
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%; /* 高さの統一 */
  box-sizing: border-box; /* パディングを幅に含める */
  text-align: center;
}

.site-card:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.site-icon {
  font-size: 2rem; /* アイコンのサイズ */
  color: #72AEE6; /* アイコンの色 */
  margin-bottom: 10px; /* アイコンとタイトルの間隔 */
}

.site-title {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #a8c7fa; /* タイトル用の明るい青 */
  line-height: 1.4;
}

.site-url {
  display: block;
  font-size: 0.85rem;
  opacity: 0.7;
  word-break: break-all; /* URLが長い場合に改行 */
}

@media (max-width: 768px) {
  .footer {
    padding: 30px 15px;
  }
  .footer-related-sites h3 {
    font-size: 1.1rem;
  }
  .site-links-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* より狭い画面での調整 */
    gap: 10px;
  }
  .site-card {
    padding: 12px;
  }
  .site-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }
  .site-title {
    font-size: 0.9rem;
  }
  .site-url {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .site-links-grid {
    grid-template-columns: 1fr; /* 最も狭い画面では1列に */
  }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/header.css */
/* header.html専用のスタイル */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  background: transparent;
  padding: 15px 20px;
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.header.is-fixed {
    position: fixed;
    background-color: rgba(10, 30, 62, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo a { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  text-decoration: none; 
}
.logo img { 
  height: 48px; 
  transition: height 0.3s ease;
}
.since-text { 
  font-family: 'Bebas Neue', sans-serif; 
  font-size: 1.2rem; 
  color: #fff; 
  letter-spacing: 0.08em; 
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
}

/\* --- レスポンシブ対応 --- \*/
@media (max-width: 768px) {
.header {
padding: 15px;
}
.header\_\_inner {
padding: 0;
}
.logo img {
max-height: 40px;
}
.since-text {
font-size: 1rem;
}
}
@media (max-width: 600px) {
.logo a {
flex-direction: column;
gap: 5px;
align-items: flex-start;
}
.since-text {
font-size: 0.8rem;
}
.header {
padding: 10px 15px;
}
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/index.css */
/* index.html専用のスタイル */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

.hero__content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6vw;
    box-sizing: border-box;
}

.hero__text {
    color: white;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    padding-left: 150px;
    box-sizing: border-box;
    position: relative;
    bottom: 80px;
}

.hero__text .highlight {
    font-size: 8rem;
    color: #72AEE6;
    margin-bottom: 10px;
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.hero__text .sub {
    font-size: 1.4rem;
    line-height: 1.8;
    max-width: 600px;
}

.hero__achievements {
    position: absolute;
    bottom: 5vh;
    right: calc(6vw + 10px);
    display: flex;
    gap: 20px;
    z-index: 5;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    max-width: calc(100% - (6vw * 2));
}

.achievement-item {
    display: flex;
    align-items: center;
    background-color: rgba(10, 20, 40, 0.8);
    padding: 20px 15px;
    border-radius: 25px;
    color: #f5f5f5;
}

.oukan-icon {
    width: 60px;
    height: 60px;
    margin-right: 12px;
    object-fit: contain;
}

.achievement-text {
    font-size: 1rem;
    font-weight: 600;
}

/* ★★★ サイドバーと共存するためのスタイルを追加 ★★★ */
.main-layout .content-wrapper {
    padding: 80px 40px;
}

.introduction-block {
    text-align: center;
    margin: 120px 0; /* 上下のマージンを120pxに設定 */
}

.introduction-block .decorated-heading {
    background: linear-gradient(135deg, #1d2b3c 0%, #2c3e50 100%);
    padding: 50px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 60px;
}

.decorated-heading .line-1 {
    display: block;
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.decorated-heading .line-2 {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.decorated-heading .highlight-creation {
    background: linear-gradient(45deg, #a8c7fa, #72AEE6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    padding: 0 5px;
}

.introduction-block img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.content-block {
    display: flex;
    align-items: stretch;
    gap: 80px;
    margin-bottom: 120px;
    padding-top: 100px;
    position: relative;
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block[id] {
    scroll-margin-top: 100px;
}

.content-block .left {
    flex: 1.5;
    padding-left: 40px;
    box-sizing: border-box;
}

.content-block .right {
    flex: 1;
}

.section-heading {
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 10;
}

.section-heading-text {
    font-size: 5rem;
    font-weight: bold;
    color: #72AEE6;
    white-space: nowrap;
}

.section-description {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 40px;
}

.content-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #a8c7fa;
}

.feature-icon {
    font-size: 1.8rem;
    color: #72AEE6;
    margin-right: 20px;
    width: 40px;
    text-align: center;
}

.feature-text {
    flex-grow: 1;
}

.feature-text h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: #0A1E3E;
}

.feature-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

.feature-arrow {
    font-size: 1.2rem;
    color: #c4c7c5;
    transition: color 0.2s;
}

.feature-item:hover .feature-arrow {
    color: #72AEE6;
}

@media (max-width: 900px) {
    .hero__text {
        padding-left: 0;
        text-align: center;
        bottom: 20px;
    }

    .hero__text .highlight {
        font-size: 4.5rem;
    }

    .hero__text .sub {
        font-size: 1.1rem;
        margin: 0 auto;
    }

    .content-wrapper {
        padding: 80px 20px;
    }

    .introduction-block .decorated-heading {
        padding: 30px 15px;
    }

    .decorated-heading .line-1 {
        font-size: 1.2rem;
    }

    .decorated-heading .line-2 {
        font-size: 1.8rem;
    }

    .content-block {
        flex-direction: column;
        gap: 40px;
    }

    .content-block .left,
    .section-heading {
        padding-left: 0;
        left: 0;
    }

    .section-description {
        font-size: 1.2rem;
        max-width: 100%;
    }
}

/* h2タグのレイアウト崩れを修正するスタイル */
.section-heading .section-heading-text {
    display: inline;
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/recruit.css */
/* recruit.html専用のスタイル */
.employee-voice-card {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background-color: #fff;
  padding: 30px;
  border-radius: 16px;
  margin-top: 50px;
  box-shadow: 0 15px 40px -15px rgba(0,30,80,0.15);
  overflow: hidden;
}
.employee-voice-card:nth-child(even) {
  flex-direction: row-reverse;
}
.employee-voice-card .info-column {
  flex: 0 0 300px;
  text-align: center;
}
.employee-voice-card .info-column h3 {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--secondary-color);
}
.employee-voice-card .info-column img {
  width: 100%;
  max-width: 180px;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-top: 20px;
}
.employee-voice-card .details-column {
  flex: 1;
  min-width: 300px;
}
.employee-voice-card .details-column dl { margin: 0; }
.employee-voice-card .details-column dt {
  font-weight: bold;
  margin-top: 20px;
  padding-left: 15px;
  border-left: 4px solid var(--secondary-color);
  font-size: 1.1rem;
}
 .employee-voice-card .details-column dt:first-child { margin-top: 0; }
.employee-voice-card .details-column dd {
  margin-left: 0;
  padding: 10px 0 15px 19px;
  line-height: 1.8;
  color: #555;
}
.employee-voice-card.text-only {
    display: block;
    background-color: #f9fafb;
}
.employee-voice-card.text-only h3 {
    font-size: 1.5rem;
    text-align: left;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 15px;
    margin-bottom: 30px;
}
#philosophy {
    background-color: #f9fafb;
    padding: 40px;
    border-radius: 12px;
}
#philosophy p {
    margin-bottom: 1.5em;
    line-height: 1.9;
}

/* ★★★ 「これからの未来を〜」の装飾を修正 ★★★ */
.catchy-phrase {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 30px;
    margin: 20px 0 40px 0;
    color: var(--primary-color);
    background-color: #fff;
    border-left: 5px solid var(--secondary-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.speech-bubble-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.speech-bubble-container .photo-area {
    flex: 0 0 150px;
    text-align: center;
}
.speech-bubble-container .photo-area img.president-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.speech-bubble-container .bubble {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    position: relative;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    min-width: 300px;
}
.speech-bubble-container .bubble::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -48px;
    width: 0;
    height: 0;
    border: 25px solid transparent;
    border-right-color: #fff;
}

/* ★★★ 署名画像のスタイルを修正 ★★★ */
.president-signature {
    text-align: center; /* 右寄せから中央揃えに変更 */
    margin-top: 15px;
}
.president-signature img {
    max-width: 180px; /* サイズを調整 */
}

.emphasis {
  font-weight: 700;
  background: linear-gradient(transparent 70%, #aed6f1 70%);
  padding: 0 0.1em;
}
.skills-table-container {
    margin: 40px 0;
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .employee-voice-card:nth-child(even) {
        flex-direction: column;
    }
    .catchy-phrase { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .speech-bubble-container {
        flex-direction: column;
        align-items: center;
    }
    .speech-bubble-container .bubble::before {
        top: -48px;
        left: 50%;
        transform: translateX(-50%);
        border: 25px solid transparent;
        border-bottom-color: #fff;
        border-right-color: transparent;
    }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/sidebar.css */
/* sidebar.html専用のスタイル */
.sidebar-nav ul {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px;
}
.sidebar-nav input.submenu-toggle { 
  display: none; 
}
.sidebar-nav li a,
.sidebar-nav li > label,
.sidebar-nav li > span {
  display: block; padding: 12px 16px; background-color: #f4f8fb; border: 1px solid #e0e0e0; border-radius: 8px; color: #333; font-weight: 700; text-align: left; text-decoration: none; transition: all 0.2s ease; cursor: pointer; position: relative;
}
.sidebar-nav li a:hover {
  background-color: #e2f1ff; 
  border-color: var(--secondary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.sidebar-nav li.current-parent > a,
.sidebar-nav li.current-parent > label {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.sidebar-nav li.current-page > a,
.sidebar-nav li.current-page > span {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.sidebar-nav li.current-parent .submenu .current-page a {
    color: var(--secondary-color) !important;
    font-weight: 700 !important;
    border-left-color: var(--secondary-color) !important;
}
.sidebar-nav .has-submenu > span { cursor: default; }
.sidebar-nav .has-submenu .submenu { padding-left: 20px; margin-top: 8px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.sidebar-nav .has-submenu.is-open .submenu { max-height: 500px; }
.sidebar-nav .has-submenu .submenu a {
  font-weight: normal; background-color: transparent !important; border: none !important; border-left: 3px solid #e0e0e0 !important; border-radius: 0; padding: 8px 12px !important; margin-bottom: 5px !important;
}
.sidebar-nav .has-submenu .submenu a:hover {
  background-color: #eef5fc !important;
  border-left-color: var(--secondary-color) !important;
}
.sidebar-nav .has-submenu > a::after,
.sidebar-nav .has-submenu > label::after { content: '▼'; font-size: 0.7em; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); transition: transform 0.3s; }
.sidebar-nav li.is-open > a::after,
.sidebar-nav li.is-open > label::after { transform: translateY(-50%) rotate(180deg); }
.sidebar-nav li.current-parent > a::after,
.sidebar-nav li.current-parent > label::after { filter: brightness(0) invert(1); }

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/css/thanks.css */
/* thanks.html専用のスタイル */
.thank-you-container {
  max-width: 800px;
  margin: 150px auto;
  padding: 60px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.thank-you-container .icon {
  font-size: 4rem;
  color: #72AEE6;
  margin-bottom: 20px;
}
.thank-you-container h1 {
  font-size: 2rem;
  color: #0A1E3E;
  margin-bottom: 20px;
}
.thank-you-container p {
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}
.back-to-top-button {
  display: inline-block;
  background-color: #0A1E3E;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: opacity 0.3s;
}
.back-to-top-button:hover {
  opacity: 0.85;
}
 @media (max-width: 600px) {
  .thank-you-container {
    margin: 80px 20px;
    padding: 40px 20px;
  }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/product/bluetooth-module/blutooth-module.css */
/* bluetooth-module.html専用のスタイル */
.product-section {
  line-height: 1.8;
}

.product-section .marker_yellow {
  background: linear-gradient(transparent 60%, #fffd8b 60%);
}
.product-section .info-box {
  background-color: #f4f8fb;
  border: 1px solid #ddeaf6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}
.product-section .info-box-orange {
  background-color: #fffaf0;
  border: 1px solid #ffe5c4;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}
.product-section .info-box-orange h4 {
    border-left: none;
    padding-left: 0;
    margin-top: 0;
}

/* テーブルスタイルはcommon.cssの.styled-tableに依存するため、ここからは削除 */

.product-section a {
  color: #0077cc;
}
.product-section .red {
  color: #cf2e2e;
  font-weight: bold;
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/product/bluetooth-module/raytac/css/lp2style.css */
@charset "utf-8";

/* CSS Document */

body {
  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', sans-serif !important;
  color: #666;
}
div#Wrap {
  overflow: hidden;
}
img {
  max-width: 100%;
}
.inner {
  max-width: 1200px !important;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.tc {
  text-align: center !important;
}
.innerIn {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
nav.navbar .navinner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
}
nav.navbar.navbar-default.navbar-fixed-top.js-header.active .linkbar p a {
  color: #000;
}
.linkbar p a.heanavi00 {
  width: 195px;
  margin: 0 20px;
  box-shadow: none;
}
.linkbar p a.heanavi01:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: 38%;
  right: 13px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
nav.navbar h1 {
  padding: 15px;
}
nav.navbar h1 a:first-of-type{
  margin: 0 20px 0 0;
}
a.heanavi02 {
  background: #fff;
  color: #29793d;
}
a.heanavi01 {
  background: #392d27;
}
.linkbar {
  display: table;
}
.linkbar p {
  padding: 0;
  display: table-cell;
}
p.form_link a {
  color: #13293d;
  background: #e8c547;
  display: block;
  min-width: 220px;
  text-align: center;
  padding: 32px;
  position: relative;
  font-weight: bold;
  font-size: 14px;
}
p.form_link a:hover {
  text-decoration: none;
}
p.form_link a:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  top: 44%;
  right: 15px;
  border-top: 2px solid #13293d;
  border-right: 2px solid #13293d;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 11.5px;
}
body {
  padding-top: 0;
}
.section-fv {
  background: url("../img/fvbg.png") center top;
  position: relative;
  background-size: cover;
  height: 590px;
}
.section-fv:after {
  content: "";
  position: absolute;
  height: 210px;
  background: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.section-fv h2 {
  text-align: center;
}
@media (max-width:479px) {
  nav.navbar h1 a{
    display: inline-block;
    width: 30%;
  }
}
/**/

.scroll {
  position: absolute;
  bottom: 17%;
  width: 100%;
  height: 1em;
  cursor: pointer;
  text-decoration: none;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  display: block;
  z-index: 20;
}
.scroll span {
  font-size: 18px;
  color: #fff;
  text-align: center;
}
#sec01 {
  padding-top: 120px;
  margin-top: -120px;
}
.arrow {
  position: absolute;
  bottom: -7em;
  left: 0;
  width: 30px;
  height: 5em;
  right: 0;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  -ms-transition-duration: 1s;
  margin: 0 auto;
}
.arrow:hover {
  bottom: -8em;
  animation: 2s arrow-animation infinite ease-in-out;
}
a:hover {
  opacity: 0.8;
}
nav.navbar .inner h1 {
  margin-top: 10px;
  padding: 0 10px;
}
h1.fvh1 {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
section.section-fv .inner {
  padding: 30px 0 0;
  position: relative;
  height: 680px;
  overflow: initial;
  display: table;
}

/*MAIN CONTENT*/

section.section-fv .inner h2:before {
  content: "";
  border-left: 2px solid;
  transform: rotate(30deg);
  position: absolute;
  left: -10%;
  height: 100%;
}
section.section-fv .inner h2:after {
  content: "";
  border-left: 2px solid;
  transform: rotate(30deg);
  position: absolute;
  right: -10%;
  height: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
}
section.section-fv .inner h2 {
  color: #fff !important;
  font-weight: 700;    
  letter-spacing: 0.2em !important;
  line-height: 1.5;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  justify-content: center;
  margin: 0 auto 20px;
}
section.section-fv .inner {
  padding-top: 100px;
  text-align: center;
  color: #fff !important;
  letter-spacing: 0.2em;
  line-height: 2;
}
section.section-fv .inner ul {
  display: table;
  width: 700px;
  margin: 40px auto;
}
section.section-fv .inner ul li {
  font-weight: 700;  
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  font-size: 16px;
  border-left: 5px solid;
  padding-left: 15px;
  color: #fff;
  line-height: 1.5;
}

section.section-fv .inner ul li span {
  font-size: 120%;
  letter-spacing: 0.1em;
}

/*section1*/

section.sec01 {
  padding: 100px 0 0;
}
h2.h2-a {
  line-height: 1.5;
  position: relative;
  justify-content: center;
  margin: 0 auto 60px;
  text-align: center;
  color: #000;
  width: max-content;
  font-weight: bold;
  font-size: 32px;
  display: inline-block;
}
h2.h2-a span {
  display: block;
  font-size: 20px;
  color: #0083fd;
}
h2.h2-a:before {
  content: "";
  border-left: 2px solid;
  transform: rotate(30deg);
  position: absolute;
  left: -20%;
  height: 100%;
  bottom: 0;
  margin: auto;
  min-height: 85px;
}
h2.h2-a:after {
  content: "";
  border-left: 2px solid;
  transform: rotate(30deg);
  position: absolute;
  right: -20%;
  height: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.sec01-1Box {
  background: url(../img/sec01-1bg.png) center top no-repeat;
  height: 500px;
  background-size: cover;
  margin-bottom: 20px;
}
.sec01-1Box .sec01Txt, .sec01-3Box .sec01Txt {
  float: right;
  width: 60%;
  margin: 100px 0;
  padding: 50px 0 50px 50px;
}
.sec01-2Box .sec01Txt {
  float: left;
  width: 60%;
  margin: 100px 0;
  padding: 50px 50px 50px 0;
}
.sec01Txt {
  background: hsla(0, 0%, 100%, 0.8);
}
.sec01Txt h3 {
  font-size: 22px;
  color: #13293d;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.5;
  position: relative;
  display: flex;
}
.sec01Txt h3:before {
  content: "";
  border-top: 2px solid;
  width: 50px;
  margin: 15px 20px 0 0;
}
.sec01Txt p {
  line-height: 1.5;
  font-size: 16px;
  color: #000;
  letter-spacing: 0.1em;
}
.sec01-2Box {
  background: url(../img/sec01-2bg.png) center top no-repeat;
  height: 500px;
  background-size: cover;
  margin-bottom: 20px;
  clear: both;
}
.sec01-3Box {
  background: url(../img/sec01-3bg.png) center top no-repeat;
  height: 500px;
  background-size: cover;
  margin-bottom: 20px;
  clear: both;
}
h2.h2-a.white, h2.h2-a.white span {
  color: #fff;
}
h2.h2-a.black:before, h2.h2-a.black:after {
  color: #000;
}
section.sec02 {
  background: url("../img/sec02bg.png") center top no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.sec2_cont h3 {
  color: #ffffff !important;
  display: table;
  position: relative;
  padding-right: 50px;
}
.sec2_cont h3:before {
  content: "";
  border-top: 2px solid;
  width: 60px;
  vertical-align: bottom;
  margin-top: 35px;
  display: block;
  margin-right: 30px;
}
.sec2_cont h3 span {
  width: 80px;  
  font-size: 60px;
  color: #0083fd;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
}
.sec2_cont h3 font {
  font-size: 22px;
  font-weight: bold;
  display: table-cell;
  vertical-align: middle;
  padding-left: 15px;
}
.sec2_cont {
  width: calc(50% - 20px);
  background: rgba(29, 49, 69, 0.8);
  color: #fff;
  margin-bottom: 40px;
  padding: 50px 0;
}
.sec2_Box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sec2_cont ul li {
  list-style: none;
  font-size: 16px;
  margin-bottom: 30px;
  line-height: 1.8;
  position: relative;
}
.sec2_cont ul {
  padding: 20px 50px 0 100px;
}
.sec2_cont ul li:before {
  content: url(../img/sec2check.png);
  position: absolute;
  left: -50px;
  top: 8px;
}
.sec2_cont ul li a{
  color:#ffffff;
  text-decoration: underline;
}
.sec2_cont ul li a:hover{
  text-decoration: none;
}
p.hosoku {
  font-size: 12px;
  padding: 0 50px;
  line-height: 1.5;
}
.wpcf7-form p.hosoku2 {
  font-size: 13px;
}
.sec2_cont:last-child {
  margin-bottom: 0;
}
section.sec03 {
  padding: 100px 0;
}
section.sec03 h2.h2-a:before {
  left: -60%;
}
section.sec03 h2.h2-a:after {
  right: -60%;
}
.tab li a:hover {
  background: #13293d;
  color: #fff;
  opacity: 1;
}
.tab li span:hover:after, .tab li.current span:after {
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
}
.sec3Tab h3:before {
  content: "";
  border-top: 2px solid;
  width: 40%;
  margin-top: 15px;
}
.sec3Tab h3:after {
  content: "";
  border-top: 2px solid;
  width: 40%;
  margin-top: 15px;
}
.sec3Tab h3 {
  display: flex;
  text-align: center;
  width: calc(100% - 100px);
  justify-content: space-between;
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  margin: 50px;
}
.sec3tb01Box {
  padding: 0 50px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
  margin: 0 0 50px;
}
.sec3tb01a {
  display: table;
  width: 280px;
  box-shadow: 0 0 10px #0002;
  height: 280px;
  text-align: center;
  margin: 25px 0 0;
}
.sec3tb01a div {
  display: table-cell;
  vertical-align: middle;
}
.sec3tb01a div img{
  max-width: none;
  width: 100%;
}
.sec3tb01b {
  width: 760px;
  color: #13293d;
}
.sec3tb01b h4 {
  font-size: 20px;
  font-weight: bold;
  position: relative;
  color: #13293d;
  padding-left: 60px;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}
.sec3-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
}
.sec3tb01b h4:before {
  content: "";
  border-top: 3px solid;
  width: 50px;
  position: absolute;
  left: 0;
  top: 10px;
}
.sec3-wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
}
.sec3-l, .sec3-r {
  width: 48%;
}
.sec3-00 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  border-bottom: 1px solid #d9d9d9;
  padding: 7.5px 0;
}
.sec3tit {
  font-weight: bold;
  font-size: 16px;
  color: #000;
  width: 50%;
  line-height: 2;
}
.sec3name {
  font-size: 16px;
  color: #000;
  width: 50%;
  line-height: 2;
}
.mb100 {
  margin-bottom: 100px !important;
}
.sec3-c {
  width: 100%;
}
.sec3-00 a{
  color: #13293C;
  text-decoration: underline;
}
.sec3-00 a:before{
  content: "";
  background: url('../img/ico_pdf.png') no-repeat top center / cover;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 6px;  
}
.sec3-00 a:hover{
  text-decoration: none;
}

/*タブ切り替え　*/

.sec3Tab ul.tab {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}
.sec5Tab ul.tab {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.sec3Tab ul.tab li {
  width: 18%;
  transform: skewX(-30deg);
  list-style: none;
}
.sec5Tab ul.tab li {
  width: 30%;
  transform: skewX(-30deg);
  list-style: none;
  margin: 0 1%;
}
.sec3Tab ul.tab li span, .sec5Tab ul.tab li span {
  transform: skewX(30deg);
  display: block;
  padding: 25px;
}
.tab li.current {
  background: #00aeff;
}
.tab li.current a {
  background: #13293d;
  color: #fff;
}
.tab li a {
  background: #d9d9d9;
  display: block;
  text-align: center;
  color: #13293d;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
.tab li span:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  top: 40%;
  right: 10%;
  border-right: 3px solid #13293d;
  border-bottom: 3px solid #13293d;
}
.tabContents {
  clear: both;
  display: none;
  padding: 10px;
  margin-top: -100px;
  padding-top: 100px;
}
.tabContents.current {
  display: block;
}
section.sec04 {
  padding: 100px 0;
  background: #f3f3f3;
}

/*アコーディオン*/

.accordion-container {
  position: relative;
  width: 100%;
  outline: 0;
  cursor: pointer
}
.accordion-container .article-title {
  display: block;
  position: relative;
  margin: 0;
  padding: 25px;
  font-size: 22px;
  font-weight: normal;
  color: #13293d;
  cursor: pointer;
  font-weight: bold;
  border-top: 1px solid #000000;
  position: relative;
}
.accordion-container .article-title:hover, .accordion-container .article-title:active, .accordion-container .content-entry.open .article-title {
  color: #13293d;
}
.accordion-container .article-title:hover i:before, .accordion-container .article-title:hover i:active, .accordion-container .content-entry.open i {
  color: white;
}
.article-title {
  position: relative;
}
.article-title:after {
  content: url("../img/open.png");
  position: absolute;
  right: 25px;
  top: 38%;
  display: block;
}
.accordion-container .article-title:before {
  content: url(../img/Q.png);
  vertical-align: middle;
  margin-right: 2em;
}
.article-title.open:after {
  content: url("../img/close.png");
  position: absolute;
  right: 25px;
  top: 28%;
  display: block;
}
.accordion-content p {
  position: relative;
  font-size: 16px;
  padding-left: 70px;
  color: #000000;

  line-height: 2;
  margin-bottom: 30px;
}
.accordion-content p:before {
  content: url(../img/A.png);
  position: absolute;
  left: 00;
  top: 15px;
}
.accordion-content {
  display: none;
  padding-left: 2.3125em;
}

/* CSS for CodePen */

.accordion-container {
  width: 100%;
  margin: 1.875em auto;
  border-bottom: 1px solid #000000;
}
section.sec05 {
  padding: 100px 0;
}
table.tabTable td {
  border-bottom: 1px solid #13293d;
  box-sizing: border-box;
}
table.tabTable {
  width: 100%;
  padding: 20px 0;
}
table.tabTable tr{
  border: none !important;
}
table.tabTable th {
  font-size: 22px;
  color: #13293d;
  padding: 30px 0;
  width: 30%;
  border-bottom: 1px solid;
  vertical-align: middle;
  line-height: 1.5;
}
table.tabTable th span{
  float: right;
  font-size: 14px;
  vertical-align: middle;
  background: #0083fd;
  margin: 5px 20px 0;
  padding: 3px 15px;
  color: #fff;
  border-radius: 50px;
}
table.tabTable input[type="text"],
table.tabTable input[type="email"],
table.tabTable input[type="tel"],
table.tabTable textarea{
  width: 100%;
  border: 1px solid #13293d !important;
  padding: 10px !important;
}
table.tabTable td.txt_area{
  padding: 20px 0 20px 5px;
}
table.tabTable span.pr_hinban{
  position: relative;
}
table.tabTable span.pr_hinban:after{
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(135deg);    
    top: 0;
    right: 10%;
    border-right: 2px solid #13293d;
    border-bottom: 2px solid #13293d;
}
table.tabTable select{
  margin: 0;
  border: 1px solid #13293d !important;
  padding: 10px;
  width: 250px;
  font-size: 14px;
}
table.tabTable td.tw_clm{
  padding: 23px 0 23px 5px !important;
}
table.tabTable td.tw_clm .wpcf7-not-valid-tip{
  display: block;
}
table.tabTable td.tw_clm .clm_box{
  width: 48%;
  display: inline-block;
  vertical-align: middle;
}
table.tabTable td.tw_clm input[type="text"]{
  width: 260px;
  margin: 0 0 0 10px;
}
table.tabTable td.tw_clm span.pr2{
  font-size: 14px;
  padding: 0;
  width: 330px;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;
  -ms-align-items: center;
  align-items: baseline;
}
table.tabTable tr.tw_inpt td{
  padding: 20px 0 20px 5px;
}
.sub {
  text-align: center;
  margin: 50px auto 0;
}
.sub span input[type="submit"]{
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  background: #e8c547 !important;
  border: 0 !important;
  font-size: 22px;
  min-width: 360px;
  padding: 20px 0;
  color: #13293d !important;
}
span.hosoku {
  font-size: 80%;
}
span.pr1 {
  display: block;
  margin: 10px 0;
}
.copy p {
  margin: 0;
  letter-spacing: 0.2em;
}
.copy span {
  margin: 0 40px;
}
.copy {
  background: #13293d;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 50px 10px;
}
@media (min-width:769px) {
  .forSP {
    display: none;
  }
}
@media (min-width:992px) {}
@media (min-width:767x) {
  .js-header {
    top: auto;
    bottom: -200px;
    display: none;
  }
}
@media (min-width:769px) {
  .js-header.active {
    top: 0;
  }
  nav.navbar.navbar-default.navbar-fixed-top.js-header.active {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
}
@media ( max-width: 1399px) and (min-width:768px) {}
@media ( max-width: 1199px) and (min-width:768px) {}
@media ( max-width: 999px) and (min-width:768px) {
  .innerIn {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 10px;
  }
}
@media (max-width:767px) {
  .forPC {
    display: none!important;
  }
  img {
    max-width: 100%;
  }
  nav.navbar .inner h1 {
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    width: 100%;
  }
  .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
  }
  .innerIn {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
  section.section-fv .inner {
    position: relative;
    height: auto;
    overflow: initial;
    display: block;
    padding: 0 20px 0;
    display: table-cell;
    vertical-align: bottom;
  }
  section.section-fv .inner h2 {
    letter-spacing: 0.2em;
    line-height: 1.8;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 15px !important;
  }
  section.section-fv .inner ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    width: 100%;
    margin: 40px auto;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-left: 0 !important;
  }
  section.section-fv .inner ul li {
    display: block;
    vertical-align: middle;
    text-align: center;
    font-size: 13px;
    border-left: none;
    border-top: 5px solid;
    padding-left: 0;
    width: 45%;
    margin-bottom: 40px;
  }
  section.section-fv .inner ul li span {
    font-size: 105%;
    font-weight: bold;
  }
  section.section-fv .inner ul li:nth-child(2) {
    padding-top: 10px;
  }
 .section-fv {
    background: url(../img/fvbgs.png) center top;
    position: relative;
    background-size: cover;
    height: 600px;
    display: table;
}
  .section-fv p.form_link {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  h2.h2-a {
    letter-spacing: 0;
    line-height: 1.5;
    position: relative;
    justify-content: center;
    margin: 0 auto 60px;
    text-align: center;
    color: #000;
    width: max-content;
    font-weight: bold !important;
    font-size: 20px !important;
  }
  h2.h2-a span {
    display: block;
    font-size: 14px;
    color: #0083fd;
  }
  h2.h2-a:before {
    min-height: auto;
  }
  .sec01-1Box, .sec01-2Box, .sec01-3Box {
    background: none;
    height: auto;
    background-size: cover;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .sec01-1Box p.forSP, .sec01-2Box p.forSP, .sec01-3Box p.forSP {
    position: absolute;
  }
  .sec01-1Box .sec01Txt, .sec01-2Box .sec01Txt, .sec01-3Box .sec01Txt {
    float: right;
    width: 100%;
    margin: 100px 0 30px;
    padding: 20px;
  }
  .sec01Txt h3 {
    font-size: 16px;
    color: #13293d;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.5;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
  }
  .sec01Txt p {
    font-size: 12px;
    color: #000;
    letter-spacing: 0.1em;
  }
  section.sec02 {
    background: url(../img/sec02bgs.png) center top no-repeat;
    background-size: cover;
    padding: 50px 0;
  }
  .sec2_cont {
    width: 100%;
    background: rgba(29, 49, 69, 0.8);
    color: #fff;
    margin-bottom: 40px;
    padding: 30px 0;
  }
  .sec2_cont h3:before {
    content: "";
    border-top: 2px solid;
    width: 40px;
    vertical-align: bottom;
    margin-top: 35px;
    display: block;
    margin-right: 10px;
  }
  .sec2_cont h3 span {
    width: 15%;
    font-size: 40px;
    color: #0083fd;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
  }
  .sec2_cont h3 font {
    font-size: 16px;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
    line-height: 1.5;
  }
  .sec2_cont h3 {
    display: table;
    position: relative;
    padding-right: 20px;
  }
  .sec2_cont ul {
    padding: 20px 20px 0px 40px;
  }
  .sec2_cont ul li:before {
    content: url(../img/sec2checks.png);
    position: absolute;
    left: -30px;
    top: 8px;
  }
  .sec2_cont ul li {
    list-style: none;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.8;
    position: relative;
  }
  p.hosoku {
    font-size: 10px;
    padding: 0 20px;
  }
  section.sec03 h2.h2-a:after {
    right: -10%;
  }
  section.sec03 h2.h2-a:before {
    left: -10%;
    min-height: auto;
  }
  .sec3Tab ul.tab {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;    
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
  }
  .sec3Tab ul.tab li {
    width: 48%;
    transform: skewX(-30deg);
    list-style: none;
    margin-bottom: 20px;
  }
  .tab li a {
    background: #d9d9d9;
    display: block;
    text-align: center;
    color: #13293d;
    font-size: 15px;
    font-weight: bold;
    position: relative;
  }
  .sec3Tab ul.tab li span, .sec5Tab ul.tab li span {
    transform: skewX(30deg);
    display: block;
    padding: 15px;
  }
  .sec3Tab h3 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    text-align: center;
    width: 100%;
    justify-content: space-between;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
  }
  .sec3Tab h3 span {
    margin: 0 25px;
    white-space: nowrap;
  }
  .sec3tb01a {
    display: table;
    width: 280px;
    box-shadow: 0 0 10px #0002;
    height: 280px;
    text-align: center;
    margin: 30px auto;
  }
  .sec3tb01Box {
    padding: 0;
    display: block;
    justify-content: space-between;
    margin: 0 auto 50px;
  }
  .sec3tb01b {
    width: 100%;
    color: #13293d;
  }
  .sec3tb01b h4 {
    font-size: 18px;
    font-weight: bold;
    position: relative;
    color: #13293d;
    padding-left: 60px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
  }
  .sec3-wrap {
    display: block;
    justify-content: space-between;
  }
  .sec3-l, .sec3-r {
    width: 100%;
  }
  .sec3tit {
    font-weight: bold;
    font-size: 14px;
    color: #000;
    letter-spacing: 0.1em;
    width: 50%;
    line-height: 2;
  }
  .sec3name {
    font-size: 14px;
    color: #000;
    letter-spacing: 0.1em;
    width: 50%;
    line-height: 2;
  }
  h2.h2-a:before {
    min-height: auto;
  }
  .accordion-container .article-title:before {
    content: url(../img/Qs.png);
    vertical-align: middle;
    margin-right: 1em;
  }
 .accordion-content p:before {
    content: url(../img/As.png);
    position: absolute;
    left: 4px;
    top: 15px;
}.accordion-container {
    width: calc(100% - 30px);
    margin: 1.875em auto;
    border-bottom: 1px solid #000000;
}
  .accordion-container .article-title {
    font-size: 15px;
    font-weight: bold;
    border-top: 1px solid #000000;
    position: relative;
  }
.article-title:after {
    content: url(../img/opens.png);
    position: absolute;
    right: 0;
    top: 38%;
    display: block;
}
.article-title.open:after{
    right: 0;
}
  .accordion-container .article-title {
    text-indent: -2.5em;
    padding-left: 3.5em;
    padding-right: 5em;
}
  .accordion-content {
    display: none;
    padding-left: 10px;
  }
  .accordion-content p {
    position: relative;
    font-size: 16px;
    padding-left: 35px;
    color: #000000;
    line-height: 2;
    margin-bottom: 30px;
  }
.accordion-content p {
    position: relative;
    font-size: 12px;
    padding-left: 3.5em;
    color: #000000;
    line-height: 2;
    margin-bottom: 30px;
}
  .sec5Tab ul.tab li {
    width: 43%;
    transform: skewX(-30deg);
    list-style: none;
    margin: 0 1%;
  }
  .sec5Tab ul.tab {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    padding: 0;
  }
  table.tabTable td {
    border-bottom: 1px solid;
    display: block;
    padding: 10px;
  }
  table.tabTable td.txt_area{
    padding: 20px 10px;
  }
  table.tabTable td.tw_clm{
    padding: 23px 10px !important;
  }
  table.tabTable td.tw_clm span.pr2{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-align-items: flex-start;
    align-items: flex-start;
  }
  table.tabTable td.tw_clm .clm_box{
    width: 100%;
    display: block;
  }
  table.tabTable td.tw_clm .clm_box select{
    width: 100%;
  }
  table.tabTable span.pr_hinban:after{
    right: 5%;
  }
  table.tabTable td.tw_clm input[type="text"]{
    margin: 10px 0 0;
    width: 100%;
  }
  table.tabTable tr.tw_inpt td{
    padding: 20px 10px;
  }
  table.tabTable th {
    font-size: 15px;
    color: #13293d;
    padding: 10px 0 0;
    width: 100%;
    border-bottom: none;
    vertical-align: middle;
    display: block;
  }
  table.tabTable th span {
    float: none;
    font-size: 10px;
    vertical-align: middle;
    background: #0083fd;
    margin: 5px 20px 0;
    padding: 3px 15px;
    color: #fff;
    border-radius: 50px;
  }
  .sub span input[type="submit"]{
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    background: #e8c547;
    font-size: 15px;
    min-width: 80%;
    padding: 20px 0;
    color: #13293d;
    font-weight: bold;
  }p.form_link.forSP a:hover {
    opacity: 1;
  }
}
@media (max-width:479px) {
  .forPC {
    display: none !important;
  }
  img {
    max-width: 100%;
  }
  nav.navbar .inner h1 {
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    width: 100%;
  }
  .inner {
    width: 100% !important;
    margin: 0 auto;
    position: relative;
    padding: 0 20px !important;
  }
  .innerIn {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }
}
#contactWrap div.wpcf7{
  background: none;
  border: none;
}
#contactWrap div.wpcf7 p{
  padding: 0;
}
div.wpcf7 .ajax-loader{
  display: block !important;
}
section.thanks{
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  text-align: center;
}
section.thanks h3{
  font-size: 2rem;
}
section.thanks p{
  font-size: 16px;
  margin: 0 0 30px;
  line-height: 1.5;
}
section.thanks p a{
  text-decoration: underline;
  color: #13293d;
}
section.thanks p a:hover{
  text-decoration: none;
}
nav.navbar.thanks{
  position: relative;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors{
  display: none !important;
}
.wpcf7 span.wpcf7-not-valid-tip{
  margin: 10px 0 0 !important;
}
@media (max-width:479px) {
	section.thanks{
		padding: 0 20px 0;
	}
}
span.wpcf7-list-item {
    font-size: 1.6em !important;
    display: inline-block !important;
    width: 40% !important;
}
span.wpcf7-list-item-label{
  vertical-align: middle;
}
@media (max-width: 767px){
  span.wpcf7-list-item {
    width: 100% !important;
  }
}


/* /Users/ryujiizumi/Desktop/gemini cli/public_html/product/bluetooth-module/raytac/css/style.min.css */
@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}
audio:not([controls]) {
  display: none;
  height: 0
}
[hidden],
template {
  display: none
}
a {
  background-color: transparent;
  color: #00f;
  text-decoration: none
}
a:active,
a:hover {
  outline: 0
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}.lato{
	font-family: 'Lato', sans-serif;
}
b,
optgroup,
strong {
  font-weight: 700
}
dfn {
  font-style: italic
}
h1 {
  margin: .67em 0
}
mark {
  background: #ff0;
  color: #000
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sup {
  top: -.5em
}
sub {
  bottom: -.25em
}
img {
  border: 0;
  vertical-align: middle
}
svg:not(:root) {
  overflow: hidden
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0
}
pre {
  overflow: auto
}
code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
  font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}
button {
  overflow: visible
}
button,
select {
  text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}
button[disabled],
html input[disabled] {
  cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}
input {
  line-height: normal
}
input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus {
  outline: -webkit-focus-ring-color auto 5px;
  outline-offset: -2px
}
output {
  display: block;
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.7;
  color: #555
}
.form-control {
  display: block;
  width: 100%;
  height: 37px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1
}
.form-control:-ms-input-placeholder {
  color: #999
}
.form-control::-webkit-input-placeholder {
  color: #999
}
.form-control::-ms-expand {
  background-color: transparent;
  border: 0
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed
}
textarea.form-control {
  height: auto
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type=date].form-control,
  input[type=datetime-local].form-control,
  input[type=month].form-control,
  input[type=time].form-control {
    line-height: 37px
  }
  .input-group-sm input[type=date],
  .input-group-sm input[type=datetime-local],
  .input-group-sm input[type=month],
  .input-group-sm input[type=time],
  input[type=date].input-sm,
  input[type=datetime-local].input-sm,
  input[type=month].input-sm,
  input[type=time].input-sm {
    line-height: 30px
  }
  .input-group-lg input[type=date],
  .input-group-lg input[type=datetime-local],
  .input-group-lg input[type=month],
  .input-group-lg input[type=time],
  input[type=date].input-lg,
  input[type=datetime-local].input-lg,
  input[type=month].input-lg,
  input[type=time].input-lg {
    line-height: 46px
  }
}
.form-group {
  margin-bottom: 15px
}
.checkbox,
.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px
}
.checkbox.disabled label,
.radio.disabled label,
fieldset[disabled] .checkbox label,
fieldset[disabled] .radio label {
  cursor: not-allowed
}
.checkbox label,
.radio label {
  min-height: 23px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer
}
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
  position: absolute;
  margin-left: -20px
}
.checkbox + .checkbox,
.radio + .radio {
  margin-top: -5px
}
.checkbox-inline,
.radio-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer
}
.checkbox-inline.disabled,
.radio-inline.disabled,
fieldset[disabled] .checkbox-inline,
fieldset[disabled] .radio-inline {
  cursor: not-allowed
}
.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
  margin-top: 0;
  margin-left: 10px
}
.form-control-static {
  min-height: 37px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0
}
select.input-sm {
  height: 30px;
  line-height: 30px
}
select[multiple].input-sm,
textarea.input-sm {
  height: auto
}
.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0
}
.form-group-sm select.form-control {
  height: 30px;
  line-height: 30px
}
.form-group-sm select[multiple].form-control,
.form-group-sm textarea.form-control {
  height: auto
}
.form-group-sm .form-control-static {
  height: 30px;
  min-height: 35px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5
}
.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 0
}
select.input-lg {
  height: 46px;
  line-height: 46px
}
select[multiple].input-lg,
textarea.input-lg {
  height: auto
}
.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 0
}
.form-group-lg select.form-control {
  height: 46px;
  line-height: 46px
}
.form-group-lg select[multiple].form-control,
.form-group-lg textarea.form-control {
  height: auto
}
.form-group-lg .form-control-static {
  height: 46px;
  min-height: 41px;
  padding: 11px 16px;
  font-size: 18px;
  line-height: 1.33333
}
.has-feedback {
  position: relative
}
.has-feedback .form-control {
  padding-right: 46.25px
}
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 37px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  pointer-events: none
}
.form-group-lg .form-control + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.input-lg + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px
}
.form-group-sm .form-control + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.input-sm + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px
}
.has-success .checkbox,
.has-success .checkbox-inline,
.has-success .control-label,
.has-success .help-block,
.has-success .radio,
.has-success .radio-inline,
.has-success.checkbox label,
.has-success.checkbox-inline label,
.has-success.radio label,
.has-success.radio-inline label {
  color: #3c763d
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168
}
.has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d
}
.has-success .form-control-feedback {
  color: #3c763d
}
.has-warning .checkbox,
.has-warning .checkbox-inline,
.has-warning .control-label,
.has-warning .help-block,
.has-warning .radio,
.has-warning .radio-inline,
.has-warning.checkbox label,
.has-warning.checkbox-inline label,
.has-warning.radio label,
.has-warning.radio-inline label {
  color: #8a6d3b
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/product/laser-device/laser-device.css */
/* このページ専用のスタイル */
.content-section {
  line-height: 1.8;
}

/* h3, h4のスタイルはcommon.cssで定義するため、ここからは削除 */

.content-section .marker_yellow {
  background: linear-gradient(transparent 60%, #fff352 60%);
}
.content-section .box-yellow {
  background-color: #fffbe6;
  border-left: 5px solid #ffe58f;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}
.table-scroll-wrapper {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.custom-table {
  width: 100%;
  min-width: 600px; 
  border-collapse: collapse;
  font-size: 0.9rem;
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}
.custom-table th {
  background-color: #f7f7f7;
  font-weight: bold;
}
.custom-table h4 {
  border-left: none;
  padding-left: 0;
  margin: 0;
  font-size: 1em;
}
.centered-image {
    display: block;
    margin: 25px auto;
    border-radius: 8px;
    max-width: 100%;
}
/* ギャラリー表示のスタイル */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.gallery-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.gallery-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-2-cols {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 576px) {
    .gallery-2-cols {
        grid-template-columns: 1fr;
    }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/product/laser-device/laser-pointer/laser-pointer.css */
/* General styles */
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Header styles */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap; /* For responsiveness */
}
.header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.site-description {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 5px;
}
.site-logo {
    max-width: 200px; /* Adjust as needed */
}
.header-center {
    text-align: center;
}
.header-center p {
    margin: 0;
}
.header-center img {
    max-width: 150px; /* Adjust as needed */
    margin-bottom: 5px;
}
.tel-link {
    font-size: 1.8em;
    font-weight: bold;
    color: #d9534f; /* Reddish color */
    text-decoration: none;
}
.tel-link:hover {
    text-decoration: underline;
}
.business-hours {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}
.header-right {
    text-align: right;
}
/* 右上のCTAボタンを300%の大きさに */
.header-right img {
    width: 180px; /* Base size */
    height: auto;
    transform: scale(2.0); /* Approx 300% in terms of surface area */
    transform-origin: center;
    max-width: none; /* Override max-width constraint if any */
}

.global-nav {
    background-color: #333;
    margin-top: 10px;
}
.global-nav ul {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap;
}
.global-nav li {
    position: relative;
}
.global-nav a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.global-nav a:hover {
    background-color: #555;
    text-decoration: none;
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%; /* 横幅いっぱいに拡大 */
    height: 650px; /* Adjusted height for more vertical space */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none; /* ヒーローセクション全体でmax-widthを解除 */
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6); /* Darken background image */
}
.hero-content-wrapper {
    position: relative;
    width: 100%; /* Adjust width for content wrapper */
    height: 100%; /* Adjust height for content wrapper */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out content vertically */
    align-items: center; /* Center content horizontally */
    padding: 20px; /* Padding for content */
    box-sizing: border-box;
    color: #fff;
}
.hero-text-main {
    text-align: center;
    margin-top: 50px; /* Pushed down from top to give space */
}
.hero-text-main h1 {
    font-size: 3.5em; /* Larger font size for impact */
    line-height: 1.2;
    font-weight: 900; /* Bolder for "派手" */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); /* Stronger shadow for "派手" */
    margin-bottom: 20px; /* Space between headline and badges */
}
.hero-text-main h1 .text-red-large { /* Specific span within h1 */
    color: #ffeb3b; /* Changed to striking yellow for "不安" */
    font-size: 1.1em; /* Make it stand out more relative to base H1 size */
    white-space: nowrap; /* Prevent line break for the emphasized phrase */
}
.hero-badge-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: auto; /* Pushed down by flex-grow of content below it */
}
.hero-badge-circle {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    box-sizing: border-box;
}
.hero-badge-circle span {
    line-height: 1.3;
}

.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Allows it to take available vertical space */
    justify-content: flex-end; /* Pushes content (CTA) to the bottom */
    padding-bottom: 30px; /* Padding from the bottom of the hero section */
}
.hero-right {
    background-color: transparent; /* Removed background of hero-right */
    padding: 0; /* Removed padding */
    border-radius: 0; /* Removed border-radius */
    box-shadow: none; /* Removed box-shadow */
    text-align: center;
    width: 100%;
}
.consultation-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0; /* Removed padding */
    border-radius: 0; /* Removed border-radius */
    background-color: transparent; /* Made transparent */
    box-shadow: none; /* Removed shadow */
    text-align: center;
    border: none; /* Ensure no border from consultation-box */
}
.consult-button {
    display: inline-block;
    background-color: #d9534f; /* Red */
    color: #fff;
    padding: 30px 60px; /* Doubled padding */
    border-radius: 5px;
    font-size: 2.4em; /* Doubled font-size */
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
    margin-top: 0; /* No specific top margin, will be pushed by flex-end */
}
.consult-button:hover {
    background-color: #c9302c; /* Darker red */
    text-decoration: none;
}

/* Hero Section Mobile (initially hidden, shown on smaller screens) */
.hero-section-mobile {
    display: none; /* Hide by default */
    padding: 20px;
    text-align: center;
    background-color: #f0f0f0; /* Light background for mobile hero */
}
.hero-title-mobile {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #333;
}
.hero-section-mobile img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.button-wrapper-mobile {
    text-align: center;
}
.button-mobile {
    display: inline-block;
    background-color: #28a745; /* Green button */
    color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}
.button-mobile:hover {
    background-color: #218838; /* Darker green */
    text-decoration: none;
}

/* Sections common styles */
section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* H2タグのスタイル */
.section-title, .section-title-white {
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0; /* Padding for background */
    background-color: #e6f2ff; /* Light blue background for emphasis */
    color: #333;
    position: relative;
    display: flex; /* For icon alignment */
    align-items: center;
    justify-content: center; /* Center text and icon */
    max-width: 800px; /* 幅を統一 */
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px; /* Rounded corners for the background */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.section-title::before, .section-title-white::before {
    content: '✨'; /* 文頭にアイコン */
    font-size: 1.2em;
    margin-right: 15px; /* Space between icon and text */
}
.section-title::after, .section-title-white::after {
    content: '';
    display: none; /* Remove existing underline */
}

/* Specific H2 for white background */
.section-title-white {
    background-color: #495057; /* Darker background for contrast on white text */
    color: #fff;
}
.section-title-white::before {
    color: #ffeb3b; /* Yellow icon on dark background */
}

.section-subtitle {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 30px;
    color: #555;
}
.subsection-title {
    font-size: 1.8em;
    margin-top: 40px;
    margin-bottom: 25px;
    color: #333;
    position: relative;
    /* Modified for better style */
    border-left: 8px solid #72AEE6; /* Stronger left border */
    padding-left: 20px; /* Space for the border */
    text-align: left; /* Align text left for the border */
    max-width: 700px; /* Control its width */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05); /* Subtle shadow */
    border-radius: 4px; /* Slightly rounded corners */
}
.subsection-title::after {
    /* Remove the old ::after underline */
    content: none;
}
.marker-yellow {
    background-color: rgba(255, 255, 0, 0.4); /* Highlight with yellow */
    padding: 0 5px;
}
.text-red {
    color: #d9534f;
}

/* Feature Section */
.feature-section {
    background-color: #f0f8ff; /* Light blue background */
    text-align: center;
}
.feature-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature-image {
    max-width: 700px; /* Make feature images larger */
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.feature-list {
    text-align: left;
    font-size: 1.1em;
    line-height: 2;
    padding-left: 0; /* Add this to reset default list padding */
}
.feature-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
}
.feature-list li::before {
    content: '✅'; /* Checkmark icon */
    position: absolute;
    left: 0;
    color: #28a745; /* Green checkmark */
    font-size: 1.2em;
}

/* Promo Section */
.promo-section {
    background-color: #6c757d; /* Reverted to original solid gray background */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}
.promo-section::before {
    content: none;
}
.promo-content {
    position: relative;
    z-index: 2;
    /* Removed background, border-radius, box-shadow from here */
}
.promo-content h2 {
    /* 中央揃えを維持しつつ、テキストの塊を調整 */
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4; /* 行の高さを調整して見やすく */
    font-size: 2.2em; /* 必要に応じてフォントサイズも調整 */
    /* テキストの塊が中央にくるようにflexboxを使用 */
    display: inline-block; /* Changed to inline-block for precise control of icon and text flow */
    background-color: transparent; /* Removed background of the H2 itself */
    box-shadow: none; /* Removed box-shadow of the H2 itself */
    color: #fff; /* Keep white for contrast on promo-section's gray background */
}
/* This rule specifically targets the ::before pseudo-element for promo-content h2 */
.promo-content h2::before {
    content: '✨ '; /* Added space after icon */
    font-size: 1.2em;
    margin-right: 0; /* Removed margin-right, space is in content */
    display: inline-block; /* Ensures icon is inline with the text */
    vertical-align: middle; /* Align icon vertically with text */
    color: #ffeb3b; /* Yellow icon color */
}
.promo-content h2 .text-red {
    color: #ffcc00; /* Yellow for emphasis */
    white-space: normal; /* Allow normal wrapping */
    display: inline; /* Keep as inline element */
}
.promo-oukan-icon { /* New class for oukan.png in promo section */
    width: 300px; /* Set to 300px as per calculation (600px * 0.5) */
    height: auto;
    display: block;
    margin: 20px auto; /* Centered with vertical spacing */
}
.animated-text {
    font-size: 1.5em;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1); /* Reverted to subtle white background */
    padding: 15px 25px; /* Reverted to original padding */
    border-radius: 10px; /* Reverted to original border-radius */
    display: block;
    margin: 20px auto 0 auto; /* Added margin auto for centering */
    line-height: 1.5;
    white-space: normal; /* 不要な改行抑制を解除し、自然な改行を促す */
    word-break: keep-all; /* 単語の途中で改行しないようにする */
    max-width: 650px; /* Adjusted max-width for better two-line break */
    color: #fff; /* Reverted to white text for contrast on promo-section's background */
}

/* Product Intro Section */
.product-intro-section, .product-intro-section-continued {
    background-color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.product-intro-section p, .product-intro-section-continued p {
    font-size: 1.1em;
    margin-bottom: 20px;
    line-height: 1.8;
    text-align: justify;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.product-examples {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}
.example-column {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    background-color: #fefefe;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
    margin-bottom: 20px;
}
.example-column img {
    max-width: 100%; /* Ensure max-width is 100% */
    height: 300px; /* Made fixed height larger for visual consistency */
    object-fit: cover; /* Cover for consistency */
    border-radius: 5px;
    margin-bottom: 15px;
}
.doe-examples {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 40px;
}
.doe-item {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
    text-align: center;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.doe-item img {
    max-width: 100%; /* Ensure max-width is 100% */
    height: 250px; /* Made fixed height larger for visual consistency */
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

.doe-item p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* Concerns Section */
.concerns-section {
    background-image: none; /* Removed background image */
    background-color: #495057; /* Consistent background color */
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    position: relative;
}
.concerns-section::before { /* Original code had this, ensuring it's off */
    content: none;
}
.concerns-section .section-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.concerns-section .section-title-white {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    background-color: transparent; /* Override H2 background */
    box-shadow: none;
}
.concerns-list-section {
    background-color: #fff;
    text-align: center;
}
.concerns-list-section .feature-image {
    max-width: 700px;
    margin-bottom: 40px;
}
.concerns-list {
    text-align: left;
    font-size: 1.1em;
    line-height: 2;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 0; /* Add this to reset default list padding */
}
.concerns-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    font-weight: bold;
    color: #333;
}
.concerns-list li::before {
    content: '⚠️'; /* Warning icon */
    position: absolute;
    left: 0;
    color: #d9534f;
    font-size: 1.2em;
}

/* Warning Section */
.warning-section {
    background-color: #d9534f; /* Red background */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.animated-headline {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1.3;
}
.animated-headline span {
    color: #ffeb3b; /* Yellow for emphasis */
    /* Animation properties would be here */
}
.warning-details-section {
    background-color: #fff;
    text-align: center;
}
.section-subtitle-red {
    font-size: 1.3em;
    color: #d9534f;
    font-weight: bold;
    margin-bottom: 30px;
}
.warning-details-section .feature-image {
    max-width: 600px;
    margin-bottom: 40px;
}
.warning-list {
    text-align: left;
    font-size: 1.1em;
    line-height: 2;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 0; /* Add this to reset default list padding */
}
.warning-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    color: #333;
}
.warning-list li::before {
    content: '🚨'; /* Siren icon */
    position: absolute;
    left: 0;
    color: #d9534f;
    font-size: 1.2em;
}
.warning-conclusion {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 30px;
    color: #333;
}

/* Reasons Section */
.reasons-section {
    background-color: #f0f8ff; /* Light blue */
    text-align: center;
}
.reason-item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.reason-item:nth-child(odd) {
    flex-direction: row-reverse; /* Image on right for odd items */
}
.reason-content {
    flex: 1;
    text-align: left;
}
.reason-content h3 {
    font-size: 1.8em;
    color: #007bff; /* Blue heading */
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    /* パディングを増やしてアイコンとの間隔を確保 */
    position: relative;
    padding-left: 50px; /* アイコン分のスペースを確保 */
}
.reason-content h3::before {
    content: "\f091"; /* Font Awesome medal icon unicode */
    font-family: "Font Awesome 6 Free"; /* Font Awesome Freeのフォントファミリーを明示 */
    font-weight: 900; /* Solidアイコンの場合のフォントウェイト */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em; /* アイコンサイズ */
    color: #ffcc00; /* ゴールド色 */
}
.reason-content p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
}
.reason-image {
    flex: 0 0 400px; /* Fixed width for image container */
    text-align: center;
}
.reason-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Voice Section - Slider-like appearance */
.voice-section {
    background-color: #343a40; /* Dark background */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.voice-section .section-title-white {
    color: #fff;
    background-color: #495057; /* Darker background for H2 */
}
.voice-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative; /* For controls */
    overflow: hidden; /* Hide overflow from cards */
    padding-bottom: 40px; /* Space for dots */
}
.voice-container > p {
    font-size: 1.1em;
    margin-bottom: 40px;
    line-height: 1.8;
    color: #ddd;
}
/* Swiper.js CSS調整 */
.swiper {
    width: 100%;
    height: auto;
    padding: 20px 0 50px 0;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    flex-direction: column; /* Changed to column to stack content vertically */
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 420px; /* Ensure sufficient height */
}
.testimonial-card { /* Content within Swiper slide */
    text-align: left;
    width: 100%; /* Ensure it fills slide width */
    color: #333; /* Make text clearly visible */
}
.testimonial-card h3 {
    color: #007bff; /* Adjust color as needed */
    margin-bottom: 15px;
    font-size: 1.4rem;
}
.testimonial-card p { /* Text in testimonial card */
    color: #555; /* Make body text visible */
}
.testimonial-card img {
    margin-top: 15px;
    border-radius: 5px;
    width: 200px; /* Fixed width */
    height: 200px; /* Fixed height */
    object-fit: cover; /* Crop image to fit */
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Swiper navigation buttons */
.swiper-button-next, .swiper-button-prev {
    color: #fff !important; /* 白にして目立たせる */
    --swiper-navigation-size: 40px; /* サイズを調整 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景を追加 */
    border-radius: 50%; /* 丸い形に */
    padding: 10px; /* クリックしやすいようにパディングを追加 */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 影を追加して浮き上がらせる */
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7); /* ホバーで少し濃くする */
}
/* Swiper pagination dots */
.swiper-pagination-bullet-active {
    background: #ffcc00 !important; /* 目立つ明るい黄色に設定 */
}

/* Old slider controls and dots (to be hidden/removed) */
.slider-controls, .slider-dots {
    display: none; /* Hide old controls */
}


/* FAQ Section */
.faq-section {
    background-color: #f9f9f9;
    padding: 60px 20px;
}
.faq-container {
    max-width: 900px;
    margin: 0 auto;
}
.faq-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.faq-item h3 {
    margin: 0;
    padding: 18px 25px;
    cursor: pointer;
    background-color: #e9ecef; /* Light gray header */
    color: #333;
    font-size: 1.2em;
    position: relative;
}
.faq-item h3::after {
    content: '▼'; /* Down arrow */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
.faq-item.active h3::after {
    content: '▲'; /* Up arrow when active */
    transform: translateY(-50%) rotate(180deg);
}
.faq-item div {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    box-sizing: border-box;
}
.faq-item.active div {
    max-height: 300px; /* Adjust as needed for content length */
    padding: 15px 25px 25px;
}
.faq-item div p {
    margin: 0;
    padding-bottom: 10px;
    color: #555;
    line-height: 1.7;
}
.faq-item div p:last-child {
    padding-bottom: 0;
}
.faq-item div img {
    max-width: 150px; /* Adjust PSC mark size */
    height: auto;
    margin: 10px auto;
    display: block;
}
.faq-item div a {
    color: #007bff;
    text-decoration: none;
}
.faq-item div a:hover {
    text-decoration: underline;
}
.marker_pink {
    background-color: rgba(255, 192, 203, 0.4); /* Light pink highlight */
    padding: 0 5px;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Contact Section */
.contact-section {
    background-color: #f0f8ff; /* Light blue background */
    padding: 60px 20px;
    text-align: center;
}
.form-lead-text {
    font-size: 1.5em;
    font-weight: bold;
    color: #d9534f;
    margin-bottom: 30px;
}
.contact-form {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}
.inquiry-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.inquiry-table th, .inquiry-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.inquiry-table th {
    width: 150px;
    background-color: #f8f8f8;
    font-weight: normal;
    font-size: 0.95em;
    color: #333;
    text-align: left;
}
.inquiry-table td {
    text-align: left;
}
.inquiry-table input[type="text"],
.inquiry-table input[type="email"],
.inquiry-table input[type="tel"],
.inquiry-table textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}
.inquiry-table input[type="radio"] {
    margin-right: 5px;
}
.inquiry-table label {
    margin-right: 15px;
    font-size: 0.95em;
    color: #555;
}
.required {
    background-color: #d9534f; /* Red */
    color: #fff;
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 3px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
.submit-button-wrapper {
    text-align: center;
    margin-top: 30px;
}
.contact-form button[type="submit"] {
    background-color: #28a745; /* Green */
    color: #fff;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-form button[type="submit"]:hover {
    background-color: #218838; /* Darker green */
}
.contact-form button[type="submit"]:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.form-notes {
    margin-top: 30px;
    font-size: 0.9em;
    color: #666;
    text-align: center;
}
.form-notes .marker-yellow {
    background-color: rgba(255, 255, 0, 0.4);
    padding: 0 5px;
}

/* Company Section */
.company-section {
    background-color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.company-table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: 40px;
}
.company-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.company-table td {
    padding: 15px;
    border: 1px solid #eee;
    text-align: left;
    font-size: 1.05em;
    color: #555;
}
.company-table td:first-child {
    width: 150px;
    font-weight: bold;
    color: #333;
    background-color: #f0f8ff;
}

/* Footer Message Section */
.footer-message-section {
    background-color: #343a40; /* Dark background */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}
.footer-content {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap; /* For responsiveness */
    flex-direction: row; /* Default order: image left, text right */
}
.footer-text {
    flex: 1;
    text-align: left;
}
.footer-text h2 {
    font-size: 2em;
    color: #fff;
    margin-bottom: 20px;
}
.footer-text p {
    font-size: 1.05em;
    line-height: 1.8;
    color: #ddd;
    margin-bottom: 15px;
}
.footer-image {
    flex: 0 0 300px;
    text-align: center;
}
.footer-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Final CTA Section */
.final-cta {
    background-color: #d9534f; /* Red background */
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    position: relative;
    overflow: hidden;
    width: 100%; /* 横幅いっぱいの表示に */
    max-width: none; /* Override section max-width */
}
.cta-content {
    position: relative;
    z-index: 2;
    max-width: 1200px; /* Keep content readable */
    margin: 0 auto;
}
.cta-content h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
    line-height: 1.3;
}
.cta-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}
.cta-button {
    display: inline-block;
    background-color: #ffcc00; /* Yellow button */
    color: #d9534f; /* Red text */
    padding: 20px 40px;
    border-radius: 5px;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background-color: #e6b800; /* Darker yellow */
    transform: translateY(-3px);
    text-decoration: none;
}
.cta-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #28a745; /* Green ribbon */
    color: #fff;
    font-weight: bold;
    transform: rotate(45deg) translate(70px, -20px); /* 横幅を長くするため調整 */
    transform-origin: top left;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 1.4em;
    padding: 10px 40px; /* パディングを調整 */
    white-space: nowrap; /* テキストが改行されないように */
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .header-left, .header-center, .header-right {
        margin-bottom: 15px;
    }
    .header-right img {
        transform: scale(1.5); /* Adjust for smaller screens */
    }
    .global-nav ul {
        flex-direction: column;
    }
    .global-nav li {
        width: 100%;
    }
    .hero-section {
        height: auto;
        padding: 40px 20px;
    }
    .hero-text-main h1 {
        font-size: 2em;
    }
    .hero-content {
        flex-direction: column;
    }
    /* oukan.png のスタイルをメディアクエリ内で調整 */
    .oukan-image-container {
        width: 300px; /* Adjusted size for tablets (was 200px, 50% up = 300px) */
        height: 300px;
        top: 0; /* Adjusted to top */
    }
    .hero-content-wrapper {
        padding-top: 100px; /* Adjusted padding-top for mobile */
    }
    .hero-left img {
        max-width: 100%;
    }
    .hero-right {
        width: 100%;
    }
    .reason-item {
        flex-direction: column !important; /* Override odd/even for mobile */
        text-align: center;
    }
    .reason-image {
        flex: none;
        width: 100%;
        margin-top: 20px;
    }
    .reason-content {
        text-align: center;
    }
    .reason-content h3 {
        text-align: center;
    }
    /* Adjust medal icon for mobile */
    .reason-content h3::before {
        position: static; /* Revert to static for simpler mobile layout */
        display: block; /* Make it a block to be on its own line */
        margin: 0 auto 10px auto; /* Center the icon */
        transform: none; /* Remove transform */
    }

    .voice-cards-wrapper {
        scroll-snap-align: center; /* Adjust snapping for mobile */
    }
    .voice-card {
        flex: 0 0 90%; /* Make cards a bit narrower on smaller screens */
    }
    .voice-card .voice-image {
        flex: none;
        width: 100%;
        height: 250px; /* Adjust for mobile image height */
    }
    .voice-image img {
        border-radius: 8px 8px 0 0;
    }
    .voice-text {
        padding: 20px;
    }
    .footer-content {
        flex-direction: column;
    }
    .footer-image {
        margin-top: 30px;
    }
    .inquiry-table th, .inquiry-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }
    .inquiry-table th {
        background-color: transparent;
        padding-top: 20px;
    }
    .inquiry-table td {
        padding-bottom: 20px;
    }
    .hero-section {
        display: none; /* Hide desktop hero */
    }
    .hero-section-mobile {
        display: block; /* Show mobile hero */
    }
    .animated-headline {
        font-size: 2em;
    }
    .section-title, .section-title-white {
        font-size: 1.8em;
        padding: 15px 30px; /* Adjust padding for smaller H2 */
    }
    .subsection-title {
        font-size: 1.5em;
        /* Adjust for mobile */
        border-left: none; /* Remove left border on mobile */
        padding-left: 0;
        text-align: center; /* Center on mobile */
        box-shadow: none; /* Remove shadow on mobile */
    }
    .subsection-title::after { /* Add centered underline for mobile */
        content: '';
        display: block;
        width: 50px;
        height: 2px;
        background-color: #d9534f; /* Match previous red line */
        margin: 5px auto 0;
    }
    .slider-controls, .slider-dots {
        /* display: none; はJSで制御されるため削除 */
    }
}

@media (max-width: 768px) {
    .site-logo {
        max-width: 150px;
    }
    .tel-link {
        font-size: 1.5em;
    }
    .header-right img {
        transform: scale(1.2);
    }
    .hero-text-main h1 {
        font-size: 1.8em;
    }
    .consult-text {
        font-size: 1em;
    }
    .consult-button {
        font-size: 1em;
        padding: 12px 25px;
    }
    .feature-list li::before, .concerns-list li::before, .warning-list li::before {
        left: -5px;
    }
    .section-title, .section-title-white {
        font-size: 1.6em;
    }
    .animated-headline {
        font-size: 2em;
    }
    .cta-button {
        font-size: 1.2em;
        padding: 15px 30px;
    }
    .cta-ribbon {
        font-size: 1.2em;
        padding: 8px 30px;
        transform: rotate(45deg) translate(40px, -15px);
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 10px;
    }
    .site-description {
        font-size: 0.7em;
    }
    .site-logo {
        max-width: 120px;
    }
    .tel-link {
        font-size: 1.2em;
    }
    .business-hours {
        font-size: 0.8em;
    }
    .header-right img {
        transform: scale(1.0);
    }
    .global-nav a {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .hero-text-main h1 {
        font-size: 1.5em;
    }
    .consult-text {
        font-size: 1em;
    }
    .consult-button {
        font-size: 0.9em;
        padding: 10px 20px;
    }
    .hero-title-mobile {
        font-size: 1.5em;
    }
    .button-mobile {
        font-size: 1em;
        padding: 12px 25px;
    }
    .section-title, .section-title-white {
        font-size: 1.4em;
        padding: 12px 20px;
    }
    .section-title::before, .section-title-white::before {
        font-size: 1em;
        margin-right: 10px;
    }
    .section-subtitle {
        font-size: 1em;
    }
    .animated-headline {
        font-size: 1.8em;
    }
    .section-subtitle-red {
        font-size: 1.1em;
    }
    .reason-content h3 {
        font-size: 1.4em;
    }
    .reason-content p {
        font-size: 0.9em;
    }
    .voice-case {
        font-size: 1.2em;
    }
    .voice-text p {
        font-size: 0.9em;
    }
    .faq-item h3 {
        font-size: 1em;
        padding: 15px 20px;
    }
    .faq-item div {
        padding: 10px 20px;
    }
    .contact-form {
        padding: 20px;
    }
    .inquiry-table th, .inquiry-table td {
        font-size: 0.9em;
    }
    .required {
        font-size: 0.7em;
        padding: 2px 6px;
    }
    .contact-form button[type="submit"] {
        font-size: 1.1em;
        padding: 12px 30px;
    }
    .company-table td {
        font-size: 0.9em;
        padding: 10px;
    }
    .company-table td:first-child {
        width: 120px;
    }
    .footer-text h2 {
        font-size: 1.8em;
    }
    .footer-text p {
        font-size: 0.9em;
    }
    .cta-content h2 {
        font-size: 2em;
    }
    .cta-content p {
        font-size: 1em;
    }
    .cta-button {
        font-size: 1.2em;
        padding: 15px 30px;
    }
    .cta-ribbon {
        font-size: 1em;
        padding: 5px 25px;
        transform: rotate(45deg) translate(30px, -10px);
    }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/service/import-service/import-agent/import-agent.css */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f8f8; /* 薄いグレーの背景 */
}
.header-bg {
    background-image: linear-gradient(to right, #0056b3, #007bff); /* ヘッダーのグラデーション背景 */
}
.section-gradient-blue {
    background-image: linear-gradient(to right, #e0f2f7, #c1e7f3); /* セクションの背景グラデーション（青系） */
}
.section-gradient-light-blue {
    background-image: linear-gradient(to right, #f0f8ff, #e6f7ff); /* 明るい青系グラデーション */
}
.text-marker-pink {
    color: #ff165e; /* マーカーのピンク色 */
}
.marker-pink {
    /* 背景色を削除 */
    padding: 0 0.2em;
    border-radius: 0.2em;
}
.marker-yellow {
    background-color: #fffacd; /* 黄色のマーカー背景 */
    padding: 0 0.2em;
    border-radius: 0.2em;
}
.btn-contact {
    background-color: #ff165e; /* お問い合わせボタンのピンク */
    transition: background-color 0.3s ease;
}
.btn-contact:hover {
    background-color: #e0004c; /* ホバー時の色 */
}
.btn-contact:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.accordion-item-title {
    background-color: #e0f2f7; /* アコーディオンのタイトル背景 */
    border-bottom: 1px solid #c1e7f3;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左寄せ */
    padding-left: 1.5rem; /* 左側にパディングを追加 */
    text-align: left; /* テキスト自体を左寄せ */
}
.accordion-item-title:hover {
    background-color: #c1e7f3;
}
.accordion-item-title .accordion-title {
     flex-grow: 1; /* タイトルが残りのスペースを占めるように */
     text-align: left; /* テキストを左寄せ */
}
.accordion-item-title .elementor-accordion-icon-opened .fas.fa-lightbulb {
    color: #ffcc00; /* 開いた時の電球アイコンの色 */
}
.icon-list-item i {
    color: #007bff; /* アイコンの色 */
}
.price-display {
    background-color: #007bff;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px; /* Fully rounded */
    display: inline-block;
    font-size: 2.5rem; /* Large font size */
    font-weight: 900; /* Extra bold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Shadow */
    border: 3px solid #0056b3; /* Darker blue border */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Text shadow */
}
.contact-form-table th {
    width: 30%;
    vertical-align: top;
    padding-right: 1rem;
}
.contact-form-table td {
    width: 70%;
}
.contact-form-table input[type="text"],
.contact-form-table input[type="email"],
.contact-form-table input[type="tel"],
.contact-form-table textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem; /* rounded-md */
}
.contact-form-table .haveto {
    color: red;
    font-weight: bold;
    margin-right: 0.5rem;
}
/* Flexbox for service sections */
.service-section-content {
    display: flex;
    flex-direction: column; /* Default to column on small screens */
    align-items: stretch; /* 高さ合わせのためstretchに */
    gap: 2rem;
    text-align: left; /* テキスト全体を左寄せに */
}
@media (min-width: 768px) {
    .service-section-content {
        flex-direction: row; /* Row on larger screens */
        align-items: flex-start; /* コンテンツの上端を揃える */
        gap: 3rem; /* 左右の隙間を少し広げる */
        padding-left: 5%; /* 左のマージンを十分に取る */
        padding-right: 5%; /* 必要に応じて右のパディングも調整 */
    }
    /* テキスト列 (左側) */
    .service-section-content > .text-col {
        flex: 7; /* 横幅を約70%に設定 (flex:7 / (7+3) = 70%) */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    /* 画像列 (右側) */
    .service-section-content > .image-col {
        flex: 3; /* 残りの横幅約30%に設定 */
        display: flex;
        flex-direction: column; /* 画像を縦に並べる */
        gap: 1rem; /* 画像間の隙間 */
        justify-content: flex-start; /* 画像群を上部に揃える */
        align-items: center; /* 画像を中央に揃える */
        padding-left: 1rem; /* 画像とテキストの間に少しパディングを追加 */
    }
    .service-section-content .image-col img {
        width: 100%; /* 親コンテナの幅いっぱいに */
        height: auto; /* 高さは自動調整 */
        object-fit: cover; /* 画像がコンテナを覆うように */
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* 各画像の高さを統一し、高さを合わせるための調整 */
    .service-section-content .image-col img {
        height: 180px; /* 全ての画像に統一の高さを設定 (テキストの高さに合わせて調整) */
        object-fit: cover; /* 画像が余白なしで埋まるように */
    }
    /* 画像間のマージンで高さを調整する */
    .service-section-content .image-col {
        padding-top: 0.5rem; /* 上部パディングで微調整 */
        padding-bottom: 0.5rem; /* 下部パディングで微調整 */
    }


    /* 左右を反転させるパターン (image-colが左、text-colが右) */
    .service-section-content.flex-reverse-on-md {
        flex-direction: row-reverse; /* 画像が左、テキストが右 */
    }
    .service-section-content.flex-reverse-on-md > .text-col {
        padding-left: 2rem; /* 左側のパディングを追加 */
        padding-right: 0; /* 右側のパディングをリセット */
    }
    .service-section-content.flex-reverse-on-md > .image-col {
        padding-right: 1rem; /* 画像とテキストの間に少しパディングを追加 */
        padding-left: 0;
    }
}

/* サービスの概要テキストの幅を制限して読みやすくする */
.service-description-text {
    max-width: 800px; /* 読みやすい幅に制限 */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8; /* 行間を広げて読みやすくする */
}
/* サービスセクション内のタイトルとサブタイトルを左寄せにするための調整 */
.service-section-content .service-title-block h3,
.service-section-content .service-title-block p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.service-section-content .service-title-block h3 {
    font-size: 2.25rem; /* text-4xl相当 */
    line-height: 2.5rem;
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem;
}
.service-section-content .service-title-block .marker-yellow {
    font-size: 1.25rem; /* text-xl相当 */
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
    display: block; /* 強調部分が次の行に行かないように */
}
.service-section-content .service-title-block .text-gray-600 {
    font-size: 1rem; /* text-base相当 */
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
    display: block;
}
.service-section-content .text-col > p:first-of-type { /* 最初の段落のマージントップを調整 */
    margin-top: 1rem;
}

/* ヒーローセクションの特定の調整 */
.hero-section {
    padding-top: 80px; /* 上部パディングを増やす */
    padding-bottom: 80px; /* 下部パディングを増やす */
    display: flex;
    align-items: center; /* 垂直方向中央寄せ */
    justify-content: center; /* 水平方向中央寄せ */
    min-height: 100vh; /* 画面全体を使う */
    text-align: center; /* テキストを中央寄せ */
    position: relative;
}

.hero-section-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向中央寄せ */
    align-items: center; /* 水平方向中央寄せ */
    max-width: 900px; /* コンテンツの最大幅を制限 */
    margin: 0 auto; /* 中央寄せ */
    height: 100%; /* 親要素の高さに合わせる */
    z-index: 2; /* 背景の上に表示 */
}

.hero-section-content h1 {
    margin-bottom: 30px; /* h1の下マージンを増やす */
    line-height: 1.4;
}

.hero-section-content p {
    margin-top: 20px; /* 段落の上マージンを増やす */
    margin-bottom: 40px; /* 段落の下マージンを増やす */
    line-height: 1.6;
}

.hero-section-content .btn-contact {
    margin-top: 40px; /* CTAボタンの上マージンを増やす */
    margin-bottom: 0; /* CTAボタンの下マージンをリセット (必要に応じて) */
}

/* ヘッダーのテキストサイズの調整 */
.header-top-text {
    font-size: 0.875rem; /* text-sm 相当に縮小 */
    line-height: 1.25rem; /* 行間も調整 */
}

/* ヘッダー全体の高さを調整 */
.main-header .container {
    padding-top: 0.5rem; /* 上下のパディングを減らす */
    padding-bottom: 0.5rem;
}
/* ロゴとCTAボタンの配置を調整し、ヘッダーの高さをコンパクトに保つ */
.main-header-container { /* flexアイテムの配置を直接調整 */
    align-items: center; /* 垂直方向中央揃え */
    min-height: unset; /* 最小高さをリセットしてコンテンツに合わせる */
}
.main-header-container .w-full.md\:w-auto {
    margin-bottom: 0 !important; /* モバイルでの下マージンもリセット */
}

/* お客様の声スライダー画像の統一とマージン調整 */
.swiper-container {
    padding: 0 20px; /* 左右のパディングを設ける */
    box-sizing: border-box;
}
.swiper-slide {
    padding: 20px; /* スライド内のパディングを調整 */
}
.swiper-slide img {
    width: 300px; /* 画像の幅を統一 */
    height: 200px; /* 画像の高さを統一 */
    object-fit: cover; /* 画像をクロップして統一サイズに収める */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* お客様の声セクションのテキストの左右マージン調整 */
.voice-section-text-container {
    max-width: 800px; /* 最大幅を制限 */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* 左右にパディングを追加 */
    box-sizing: border-box;
}
/* 可読性向上のための修正: 薄い黄色の背景を削除し、文字色を適切に調整 */
/* .marker-yellow クラスがpタグに直接適用されているケースを想定して調整 */
p strong.marker-yellow {
    background-color: transparent; /* 薄い黄色の背景を削除 */
    color: #333; /* 文字色を濃い色に設定（背景の白と干渉しないように） */
    padding: 0; /* パディングも削除 */
    border-radius: 0; /* border-radiusも削除 */
    font-weight: bold; /* 元の太字は維持 */
}
/* もし marker-yellow がpタグそのものに適用されている場合も考慮 */
p.marker-yellow {
    background-color: transparent;
    color: #333;
    padding: 0;
    border-radius: 0;
    font-weight: normal; /* 必要であれば太字を解除 */
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/service/import-service/suplink/css/style.css */
@charset "UTF-8";html{font-size:6.5104166667vw}@media screen and (max-width:768px){html{font-size:13.0208333333vw}}:root{--spacing:0.05em;scroll-behavior:smooth;scroll-padding-top:min(6.5104166667vw,100px)}@media screen and (max-width:768px){:root{scroll-padding-top:13.0208333333vw}}*{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;letter-spacing:var(--spacing)}:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;letter-spacing:var(--spacing)}img,video{font-size:0;line-height:0;width:100%;max-width:100%;height:auto;vertical-align:bottom}picture{display:block}body{font-family:"Noto Sans JP",Helvetica,Arial,"Hiragino Sans",YuGothic,"Yu Gothic medium",sans-serif;-webkit-text-size-adjust:100%;word-wrap:break-word;overflow-wrap:break-word;text-rendering:optimizeLegibility;font-size:0.18rem;line-height:1.76;color:#222;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:100vh;min-height:100dvh}@media screen and (max-width:768px){body{font-size:0.24rem}}small{font-weight:normal}strong{font-weight:bolder}a{color:currentColor;text-decoration:none}@media screen and (min-width:769px){a[href^="tel:"]{pointer-events:none}}.analy-thanks_btn a,.btn_cta,[type=submit]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;z-index:1;color:#fff;background:-webkit-gradient(linear,left top,right top,from(#C7832A),to(#D4AE30));background:linear-gradient(90deg,#C7832A,#D4AE30);min-height:0.8rem;text-align:center;border-radius:0.05rem;font-weight:bold;font-size:0.28rem;text-shadow:0 0.02rem 0.04rem rgba(0,0,0,0.32)}@media screen and (min-width:769px){.analy-thanks_btn a,.btn_cta,[type=submit]{-webkit-transition:... [truncated]

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/service/oem-odm-service/poc/poc.css */
/* 基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f6f6f6;
    margin: 0;
    padding: 0;
    line-height: 1.8;
    color: #333;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; /* 左右のパディング */
    box-sizing: border-box;
}

.section-padded {
    padding: 50px 0;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 40px;
    color: #555;
}

/* 「粘り強く」「とことん」「最後まで」の強調 (赤文字) */
.section-subtitle-red {
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: #333; /* デフォルトは黒 */
    line-height: 1.4;
    letter-spacing: 0.05em;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.section-subtitle-red .text-red {
    color: red; /* 明示的に赤文字にする */
}

/* テキスト強調色 */
.text-red {
    color: red;
}
.marker-yellow {
    background-color: #FBC02D;
    padding: 2px 5px;
    border-radius: 3px;
}

/* H2タグのスタイル (グレー基調) */
.section-title-gray {
    font-size: 2.2em;
    font-weight: 700;
    text-align: center;
    color: #333; /* 文字色を黒に */
    background-color: #e0e0e0; /* グレー基調の背景色 */
    padding: 15px 20px;
    margin-top: 0;
    margin-bottom: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px; /* 横幅を統一 */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.section-title-gray .section-icon {
    margin-right: 15px;
    font-size: 1.1em;
    color: #ef8700; /* アイコン色をアクセントに */
}
/* 【あなただけのミカタ】などのH2 */
.section-title-gray.wide-text-h2 { /* クラス名を変更 */
    background-color: transparent; /* 背景色なし */
    color: #333; /* 文字色 */
    box-shadow: none; /* 影なし */
    font-size: 1.8em; /* 文字サイズ調整 */
    padding: 0; /* パディングなし */
    margin-bottom: 20px;
    display: block; /* ブロック要素に */
    text-align: center; /* 中央寄せを維持 */
    line-height: 1.4; /* 行間調整 */
    max-width: 960px; /* 幅を広げる */
}
.section-title-gray.wide-text-h2 .section-icon {
    display: block; /* アイコンを独立して配置 */
    margin: 0 auto 10px auto; /* アイコン中央寄せ */
    font-size: 1.5em; /* アイコンサイズ調整 */
    color: #ef8700;
}


/* ヘッダー部 */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 5px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    min-height: 50px;
}
.header-content .logo-area { /* Flexコンテナに */
    display: flex;
    align-items: center;
    gap: 15px; /* ロゴとタグラインの間のスペース */
}
.header-content .logo-area img { /* ロゴ画像を左に */
    order: -1; /* Flexアイテムの順序を一番最初に */
}
.header-content .logo-area p {
    font-size: 0.9em;
    margin: 0; /* マージンをリセット */
    line-height: 1.4;
    color: #555;
    white-space: nowrap;
}
.header-content .contact-button a {
    background-color: #ef8700;
    color: white;
    padding: 12px 25px; /* 大きさ200%に調整 (元の8px 18pxから) */
    font-size: 1.2em; /* 文字サイズも調整 */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s;
}
.header-content .contact-button a:hover {
    background-color: #d87600;
}
.header-content .contact-button a i {
    margin-left: 8px;
}

/* ナビゲーションメニュー */
.main-nav {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 10px 0;
    position: sticky;
    top: 60px; /* ヘッダーの高さに合わせて調整 */
    z-index: 999;
}
.main-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-around;
}
.main-nav li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}
.main-nav li a:hover {
    color: #ef8700;
}
.main-nav li a i {
    margin-right: 8px;
}

/* メインビジュアル */
.hero-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* サービス紹介セクション */
.service-intro-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: stretch; /* 高さ揃え */
}
.service-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 300px;
    max-width: 45%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (max-width: 767px) {
    .service-item {
        max-width: 90%;
    }
}
.service-item-title {
    color: white;
    background-color: #ef8700;
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap; /* 各種試作作製サポートとものづくりサポートを一行に */
}
.service-item ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

/* コンテンツと画像の横並び (サービスCTAブロック) */
.service-cta-block {
    margin-top: 50px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 中央に揃えて高さを合わせる */
    gap: 30px;
}
.service-cta-block .image-half {
    flex: 1 1 40%; /* 画像の幅を調整 */
    max-width: 40%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0; /* 画像とテキストの間に余白はギャップで */
}
.service-cta-block .text-half {
    flex: 1 1 55%; /* テキストの幅を調整 */
    max-width: 55%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0; /* テキストと画像の間に余白はギャップで */
}
.service-cta-block img {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 100%;
    height: auto;
}
.service-cta-block .text-half p.no-break-paragraph { /* 新しいクラス名 */
    margin: 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    min-height: auto; /* 最低限の高さ指定を解除 */
    display: block; /* Flexを解除して自動改行を許可 */
    line-height: 1.6;
    margin-bottom: 15px; /* 段落間の余白 */
    white-space: normal; /* 改行を許可 */
}
.service-cta-block .text-half p:last-of-type {
    margin-bottom: 0;
}


/* 試作フロー画像 */
.full-width-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 得意分野 */
.specialty-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); /* 3つのブロックと2つのX */
    gap: 0px; /* ギャップを0に設定 */
    align-items: stretch;
    justify-content: center;
}
.specialty-item {
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
    min-width: 180px; /* ブロックの最小幅を設定 */
}
.specialty-item img {
    border-radius: 8px;
    margin-top: 8px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
.specialty-text {
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: auto;
    word-break: break-word;
    white-space: normal;
    font-size: 1.4em; /* 文字を大きく */
}
.x-separator {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px; /* Xのパディングを最小限に */
    font-size: 2.5em; /* Xを大きく */
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}
.x-separator p {
    margin: 0;
    padding: 0;
    display: inline-block;
}
.ng-items {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #fce4e4;
    border-radius: 8px;
    border: 1px solid red;
    color: #333;
}

/* 実績ギャラリー */
.gallery-grid-performance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.gallery-item-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gallery-item-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}
.gallery-item-content {
    padding: 15px;
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.6;
}
.gallery-item-content u {
    color: #ef8700;
}

/* 何でも”気軽”に相談できるブロック（テキストと画像の横並び） */
.image-text-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.image-text-block .text-content {
    flex: 1;
    min-width: 300px;
}
.image-text-block .image-content {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-text-block .image-content img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.block-heading {
    font-size: 2em;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.3;
}
.block-heading .text-red {
    color: red;
}

/* モノづくり悩みブロック */
.problem-statement {
    margin-top: 60px;
}
.problem-box {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
    line-height: 1.8;
}
.problem-box.large-text p { /* 文字を大きく */
    font-size: 1.15em;
    line-height: 2; /* 行間を調整 */
}

/* 例えばこんなことありませんか？ */
.example-problems {
    margin-top: 60px;
}
.problem-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}
.problem-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    flex: 1;
    min-width: 280px;
    max-width: 30%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.problem-card-title {
    background-color: #ef8700;
    color: white;
    padding: 20px 15px;
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}
.problem-card-title .text-red {
    color: red;
}
.problem-card-text {
    padding: 20px;
    background-color: #fff;
    flex-grow: 1;
}

/* お客様の声 スライダー */
.customer-voice-section {
    margin-top: 60px;
    text-align: center;
}
.customer-voice-slider {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
}
.customer-voice-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    box-sizing: border-box;
}
.customer-voice-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 3px solid #eee;
}
.customer-voice-card .case-number {
    font-size: 1.1em;
    font-weight: bold;
    background-color: #FBC02D;
    padding: 2px 5px;
    border-radius: 3px;
}
.customer-voice-card p {
    text-align: left;
    margin-top: 15px;
    flex-grow: 1;
}
.swiper-button-prev,
.swiper-button-next {
    color: #333 !important;
    background-color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    top: 50%;
    transform: translateY(-50%);
}
.swiper-button-prev {
    left: 10px;
}
.swiper-button-next {
    right: 10px;
}
.swiper-pagination-bullet-active {
    background-color: #ef8700 !important;
}

/* 匠紹介セクション */
.expert-intro-section {
    margin-top: 60px;
}
.expert-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}
.expert-block:last-child {
    margin-bottom: 0;
}
.expert-block.reverse-layout {
    flex-direction: row-reverse; /* 画像とテキストの順序を反転 */
}
.expert-block .expert-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.expert-block .expert-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.expert-block .expert-text {
    flex: 2;
    min-width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* FAQアコーディオン */
.accordion {
    max-width: 700px;
    margin: 0 auto;
}
.accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    overflow: hidden;
}
.accordion-header {
    padding: 18px 25px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s;
}
.accordion-header:hover {
    background-color: #f8f9fa;
}
.accordion-header .accordion-icon {
    margin-right: 15px;
    color: #ef8700;
}
.accordion-header .accordion-title-text {
    flex-grow: 1;
}
.accordion-toggle-icon {
    margin-left: 15px;
    transition: transform 0.3s;
}
.accordion-item.active .accordion-header {
    color: #ef8700;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    border-top: 1px solid #e9ecef;
    background-color: #fff;
}
.accordion-item.active .accordion-content {
    max-height: 600px;
    padding-top: 10px;
    padding-bottom: 25px;
    transition: max-height 0.5s ease-in, padding 0.5s ease-in;
}
.accordion-item.active .accordion-toggle-icon {
    transform: rotate(180deg);
}

/* フォーム */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
form table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}
form th, form td {
    border: 1px solid #eee;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}
form th {
    width: 30%;
    background-color: #f7f7f7;
    font-weight: normal;
    white-space: nowrap;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    width: calc(100% - 16px);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}
form .required {
    color: red;
    margin-left: 5px;
    font-size: 0.9em;
}
.submit-button-wrapper {
    text-align: center;
    margin-top: 30px;
}
.inquiry-form-submit-button {
    background-color: #ef8700;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 22px;
    padding: 18px 36px;
    display: inline-block;
    width: fit-content;
    transition: background-color 0.3s;
}
.inquiry-form-submit-button:hover {
    background-color: #d87600;
}

/* フッター */
.site-footer {
    background-color: #ffffff;
    padding: 40px 0;
    border-top: 1px solid #eee;
}
.footer-content-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央寄せ */
    align-items: flex-start;
    gap: 30px;
}
.footer-logo {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.footer-logo img {
    width: 160px;
    height: auto;
}
.company-info {
    flex: 1 1 auto;
    min-width: 300px;
    max-width: 500px;
    font-size: 0.9em;
    text-align: center;
}
.company-info table {
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;
}
.company-info td {
    border: 1px solid #eee;
    padding: 8px 15px;
    text-align: left;
}
.company-info tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.copyright {
    flex-basis: 100%;
    text-align: center; /* 中央寄せ */
    margin-top: 20px;
    font-size: 0.8em;
    color: #777;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .header-content,
    .main-nav ul,
    .service-intro-grid,
    .content-with-image,
    .specialty-grid,
    .problem-cards-grid,
    .expert-block {
        flex-direction: column;
        align-items: center;
    }
    .header-content {
        align-items: center; /* ヘッダーの配置を調整 */
    }
    .header-content .logo-area,
    .header-content .contact-button {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .header-content .contact-button {
        margin-bottom: 0;
    }
    .main-nav ul li {
        width: 100%;
        text-align: center;
    }
    .service-item,
    .specialty-item,
    .problem-card {
        max-width: 100%;
    }
    .customer-voice-slider {
        padding: 0 20px;
    }
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
    .section-title-gray {
        font-size: 1.8em;
    }
    .section-title-gray.wide-text-h2 {
        font-size: 1.5em;
        max-width: 100%; /* スマホでは幅を100%に */
    }
    .image-text-block {
        padding: 20px;
    }
    .service-cta-block .image-half,
    .service-cta-block .text-half {
        max-width: 100%; /* スマホでは100% */
        padding: 0;
    }
    .expert-block.reverse-layout {
        flex-direction: column;
    }
    .company-info {
        min-width: unset;
        width: 100%;
    }
    .footer-content-grid {
        justify-content: center;
        text-align: center;
    }
    .company-info table {
        width: 100%;
    }
    .company-info td {
        white-space: normal;
    }
    .specialty-grid { /* スマホでは得意分野も1列に */
        grid-template-columns: 1fr;
    }
    .x-separator { /* スマホではXを非表示に */
        display: none;
    }
}

@media (max-width: 480px) {
    .section-title-gray {
        font-size: 1.5em;
        padding: 10px 15px;
    }
    .section-title-gray.wide-text-h2 {
        font-size: 1.2em;
    }
    .inquiry-form-submit-button {
        font-size: 18px;
        padding: 15px 30px;
    }
    form th, form td {
        display: block;
        width: 100%;
    }
    form th {
        text-align: left;
    }
    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea {
        width: 100%;
    }
    .required {
        font-size: 0.7em;
        padding: 2px 6px;
    }
    .contact-form button[type="submit"] {
        font-size: 1.1em;
        padding: 12px 30px;
    }
    .company-table td {
        font-size: 0.9em;
        padding: 10px;
    }
    .company-table td:first-child {
        width: 120px;
    }
    .footer-text h2 {
        font-size: 1.8em;
    }
    .footer-text p {
        font-size: 0.9em;
    }
    .cta-content h2 {
        font-size: 2em;
    }
    .cta-content p {
        font-size: 1em;
    }
    .cta-button {
        font-size: 1.2em;
        padding: 15px 30px;
    }
    .cta-ribbon {
        font-size: 1em;
        padding: 5px 25px;
        transform: rotate(45deg) translate(30px, -10px);
    }
}

/* /Users/ryujiizumi/Desktop/gemini cli/public_html/service/service.css */
/* service.html専用のスタイル */
.page-content section {
    margin-bottom: 80px;
}

/* ▼▼▼ ミッションセクションのスタイル ▼▼▼ */
.mission-section {
  padding: 80px 0;
  overflow: hidden;
}
.mission-container {
  display: flex;
  align-items: center;
  gap: 40px;
}
.mission-text-content {
  flex: 1.1;
  padding-right: 20px;
}
.mission-statement {
  font-size: 2.1rem;
  font-weight: 700;
  color: #0A1E3E;
  margin: 0;
  line-height: 1.75;
}
.mission-image-collage {
  flex: 1;
  position: relative;
  height: 480px;
}
.mission-image-collage img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 15px 40px -15px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  object-fit: cover;
  border: 6px solid #fff;
}
.mission-image-collage:hover img {
   box-shadow: 0 20px 50px -15px rgba(0,0,0,0.4);
}
/* 3番目(一番後ろ)の画像: sekai.jpeg */
.mission-img-bg2 {
  width: 75%;
  height: 300px;
  top: 0;
  right: -15%;
  z-index: 1;
}
.mission-image-collage:hover .mission-img-bg2 {
    transform: translateY(-5px) rotate(5deg) scale(1.05);
}
/* 2番目(中間)の画像: blueprint.jpeg */
.mission-img-bg1 {
  width: 70%;
  height: 280px;
  top: 40px;
  left: -10%;
  z-index: 2;
}
 .mission-image-collage:hover .mission-img-bg1 {
    transform: translateY(-10px) rotate(-6deg) scale(1.03);
}
/* 1番目(手前)の画像: value_chain.jpg */
.mission-img-main {
  width: 85%;
  height: 330px;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.mission-image-collage:hover .mission-img-main {
    transform: translateY(10px) rotate(2deg) scale(1.05);
}

/* 強みセクション */
.strengths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.strength-card {
    background-color: #f9fafb;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}
.strength-card .icon { font-size: 3rem; color: #72AEE6; margin-bottom: 20px; }
.strength-card h3 { font-size: 1.2rem; color: #0A1E3E; margin: 0 0 10px 0; }
.strength-card p { font-size: 0.95rem; line-height: 1.8; color: #555; margin: 0; flex-grow: 1; }

/* サービスの流れセクション */
.flow-steps { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; position: relative; }
.flow-step { background-color: #fff; border-radius: 12px; padding: 25px; text-align: center; width: 23%; position: relative; box-shadow: 0 10px 30px -15px rgba(0,30,80,0.1); display: flex; flex-direction: column; }
.flow-step .step-number { background-color: #72AEE6; color: #fff; font-weight: bold; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; margin: 0 auto 15px auto; flex-shrink: 0; }
.flow-step h3 { font-size: 1.1rem; margin: 0 0 10px 0; color: #0A1E3E; flex-grow: 1; }
.flow-step p { font-size: 0.9rem; color: #555; margin: 0; line-height: 1.7; }
.flow-steps .flow-arrow { font-size: 2rem; color: #d0d0d0; position: relative; align-self: center; top: -20px; }

/* 各サービス詳細セクション */
.service-container { display: flex; align-items: center; gap: 50px; }
.service-container.reverse { flex-direction: row-reverse; }
.service-image { flex: 1; min-width: 300px; }
.service-image img { width: 100%; height: auto; border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 15px 40px -15px rgba(0,30,80,0.2); }
.service-content { flex: 1.2; }
.service-description { font-size: 1rem; line-height: 2; }
.service-description p { margin: 0; }
.service-description strong { color: #0A1E3E; font-weight: 700; }
.page-content h2 .fa-solid { margin-right: 15px; font-size: 2rem; vertical-align: middle; color: #72AEE6; }
    
/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .flow-steps { flex-wrap: wrap; justify-content: center;}
    .flow-step { width: 48%; margin-bottom: 20px; }
    .flow-steps .flow-arrow { display: none; }
}
@media (max-width: 900px) {
    .mission-section { padding: 40px 0; }
    .mission-container { flex-direction: column; gap: 40px; }
    .mission-text-content { order: 2; padding-right: 0; text-align: center; }
    .mission-image-collage { order: 1; width: 100%; max-width: 400px; height: 350px; margin-bottom: 20px; }
    .mission-statement { font-size: 1.5rem; }
    .service-container,
    .service-container.reverse { flex-direction: column; gap: 30px; }
    .service-image { width: 100%; }
}
@media (max-width: 600px) { 
    .flow-step { width: 100%; } 
}