/* ===== 基本設定 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: inherit;
}

body {
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
line-height: 1.6;
color: #333;
}

h1, h2, h3, h4, h5, h6 {
font-family: inherit;
}

p, span, div, a, button {
font-family: inherit;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.section {
padding-top: 30px;
padding-bottom: 20px;
}

/* ===== ヘッダー ===== */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
}

.header__content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.header__logo {
}

.logo-image {
height: 40px;
width: auto;
}

.desktop-nav {
margin-left: auto;
margin-right: 30px;
}

.nav__list {
display: flex;
list-style: none;
gap: 30px;
}

.nav__link {
text-decoration: none;
color: #000 !important;
font-weight: 500;
transition: color 0.3s ease;
font-family: inherit;
}

.nav__link:hover {
color: #FA8D62;
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
padding: 10px;
width: 44px;
height: 44px;
position: relative;
outline: none;
box-sizing: border-box;
border-radius: 4px;
}

.hamburger-line {
width: 24px;
height: 3px;
background: #000 !important;
transition: all 0.3s ease;
display: block;
border-radius: 2px;
margin: 0;
position: relative;
}

.mobile-nav {
display: none;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-nav__list {
list-style: none;
padding: 20px 0;
}

.mobile-nav__item {
padding: 10px 20px;
}

.mobile-nav__link {
text-decoration: none;
color: #000 !important;
font-weight: 500;
font-family: inherit;
}

.mobile-nav__cta {
padding: 20px;
}

/* ===== ヒーローセクション ===== */
.hero {
background-color: #FEF2E4;
padding: 100px 0 30px;
min-height: 60vh;
display: flex;
align-items: center;
}

.hero__row {
display: flex;
align-items: center;
gap: 40px;
border: 1.5px solid white;
padding: 39px;
}

.hero__text-column {
flex: 1;
max-width: 50%;
}

.hero__image-column {
flex: 1;
max-width: 50%;
}

.hero__title {
margin-bottom: 50px;
font-family: inherit;
line-height: 1;
}

.hero__title-line {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #805A3B;
line-height: 0.9;
font-family: inherit;
margin-bottom: -5px;
}

.hero__title-line--small {
font-size: 1.4rem;
color: #C60000;
margin-top: -5px;
font-family: inherit;
line-height: 1;
}

.hero__subtitle-wrapper {
margin-bottom: 25px;
}

.hero__subtitle {
background: #805A3B;
color: white;
padding: 20px;
border-radius: 10px;
font-size: 1.1rem;
line-height: 1.8;
font-family: inherit;
font-weight: 1000;
}

.hero__image {
width: 100%;
max-width: 650px;
height: auto;
max-height: 430px;
border-radius: 15px;
object-fit: cover;
}

/* ===== CTAボタン ===== */
.cta-button {
display: inline-block;
background-color: white;
color: #C60000;
padding: 15px 30px;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
box-shadow: 0 6px 25px rgba(32, 55, 77, 0.3);
border: 1px solid #C60000;
transition: all 0.3s ease;
font-family: inherit;
}

.cta-button:hover {
background-color: #C60000;
color: white;
}

.cta-button--primary {
background-color: white;
color: #C60000;
}

.cta-button--secondary {
background-color: white;
color: #C60000;
}

.cta-button--mobile {
width: 100%;
text-align: center;
}

/* ===== CTAセクション ===== */
.cta-section {
padding: 60px 0;
text-align: center;
background: white;
}

/* ===== 会社セクション ===== */
.company {
padding-top: 40px;
}

.section__subtitle {
font-size: 1rem;
color: #816b62;
text-align: center;
margin-bottom: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
font-family: inherit;
}

.section__title {
color: #805A3B;
font-size: 2.8rem;
text-align: center;
margin-bottom: 40px;
font-weight: 700;
font-family: inherit;
}

.section__title span {
background: linear-gradient(transparent 65%, #e3d4b8 0);
}

.emphasized-text {
font-size: 1.4rem;
border-bottom: 1px solid #000;
display: inline-block;
padding-bottom: 2px;
font-family: inherit;
}

.company__subtitle {
color: #000000;
font-size: 1.4rem;
text-align: center;
margin-bottom: 60px;
line-height: 1.8;
font-family: inherit;
}

.company__content {
display: flex;
align-items: center;
gap: 60px;
margin-bottom: 60px;
}

.company__content--reverse {
flex-direction: row-reverse;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
align-items: center;
margin-bottom: 0px;
margin-top: 60px;
}

.company__content--reverse .company__text {
flex: 2;
}

.company__content--reverse .company__image {
flex: 1;
}

.company__text {
flex: 2;
max-width: 670px;
}

.company__image {
flex: 1;
}

.company__text-block {
margin-bottom: 30px;
}

.company__heading {
color: #20374D;
font-size: 1.4rem;
margin-bottom: 15px;
font-weight: 600;
font-family: inherit;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}

.company__heading:hover {
transform: translateX(5px);
color: #FA8D62;
}

.company__heading::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: #FA8D62;
transition: width 0.3s ease;
}

.company__heading:hover::before {
width: 15px;
}

.company__description {
color: #000000;
font-size: 1.2rem;
line-height: 1.8;
font-family: inherit;
}

.highlight-pink {
background: linear-gradient(transparent 74%, rgba(198, 0, 0, 0.4) 40%); ;
transition: all 0.3s ease;
position: relative;
}

.highlight-pink:hover {
background: linear-gradient(transparent 40%, rgba(250, 141, 98, 0.3) 60%);
transform: scale(1.02);
}

.company__banner {
width: 110%;
height: auto;
border-radius: 15px;
}

.features__description {
background: #805A3B;
border-radius: 15px;
color: #ffffff;
padding: 30px;
font-size: 1.2rem;
line-height: 1.8;
font-family: inherit;
margin: 0 auto;
max-width: 900px;
font-weight: bold;
}

/* ===== プロセスセクション ===== */
.process {
background: #f8f8f8;
}

.process__timeline {
margin-top: 60px;
}

.process__flow {
display: flex;
flex-direction: row;
gap: 30px;
justify-content: space-between;
align-items: stretch;
position: relative;
}

.process__item {
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
flex: 1;
text-align: center;
position: relative;
}

.process__number {
background: #FD974F;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
flex-shrink: 0;
box-shadow: 0 8px 25px rgb(162 97 13 / 30%);
border: 4px solid white;
margin: 0 auto;
font-family: inherit;
position: relative;
z-index: 2;
transition: all 0.3s ease;
animation: pulse 2s infinite;
}

.process__number:hover {
transform: scale(1.1);
background: #FA8D62;
box-shadow: 0 12px 30px rgba(250, 141, 98, 0.4);
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}

.process__step {
background: white;
border-radius: 15px;
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
min-height: 180px;
}

/* PC画面のみ数字を線で繋ぐ */
@media (min-width: 769px) {
.process__flow::before {
content: '';
position: absolute;
top: 30px;
left: calc(10% + 30px);
right: calc(10% + 30px);
height: 2px;
background: #B2DBD5;
z-index: 1;
}
}

.process__step:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.step__title {
font-size: 1rem;
color: #322802;
margin-bottom: 15px;
font-weight: 600;
text-align: center;
font-family: inherit;
background: linear-gradient(transparent 74%, rgba(198, 0, 0, 0.4) 40%);
}

.step__description {
color: #000000
line-height: 1.7;
text-align: left;
font-family: inherit;
font-size: 1.1rem;
}

/* ===== ケーススタディセクション ===== */
.case-study {
background: linear-gradient(135deg, #fcf0ec, #FFFFFF);
}

.case-study .company__subtitle {
font-size: 1.2rem;
color: #000000;
font-family: inherit;
}

.case-study-table {
margin-top: 40px;
overflow-x: auto;
}

.cases-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
font-family: inherit;
}

.cases-table th,
.cases-table td {
padding: 15px;
text-align: center;
border-bottom: 1px solid #eee;
font-family: inherit;
}

.cases-table th {
background: #f8f9fa;
font-weight: 600;
color: #333;
font-family: inherit;
}

.cases-table td:first-child {
color: #000000;
font-weight: 600;
font-family: inherit;
}

.cases-table tr:nth-child(even) {
background: #fafafa;
}

.cases-table th:nth-child(4) {
background: linear-gradient(to right, #A65E2E, #D4B657);
color: white;
border-left: 7px solid #C60000;
border-right: 7px solid #C60000;
border-top: 7px solid #C60000;
font-family: inherit;
}

.cases-table td:nth-child(4) {
border-left: 7px solid #C60000;
border-right: 7px solid #C60000;
background-color: rgba(255, 140, 0, 0.05);
color: #000000;
font-family: inherit;
font-size: 1.1rem;
}

.cases-table tr:last-child td:nth-child(4) {
border-bottom: 7px solid #C60000;
}

/* ===== 料金セクション ===== */
.pricing {
background: #f8f8f8;
overflow: visible;
}

.pricing .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.pricing__right {
margin-top: 40px;
width: 100%;
overflow: visible;
}

.pricing__right h3 {
color: #2B616D;
font-size: 2rem;
margin-bottom: 30px;
text-align: center;
font-family: inherit;
}

.pricing__examples {
display: flex;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}

.pricing__subtitle{
color: #000000;
font-size: 1.8rem;
text-align: center;
margin-bottom: 60px;
line-height: 1.8;
font-family: inherit;
}

.example__item {
flex: 1;
min-width: 300px;
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.example__name {
color: rgb(43, 97, 109);
background: linear-gradient(135deg, rgb(128, 90, 59), rgb(232, 244, 241));
border-radius: 8px;
font-size: 1.3rem;
padding: 15px;
margin-bottom: 20px;
text-align: center;
font-weight: 600;
font-family: inherit;
color: #ffff;
}

.example__detail {
margin-bottom: 10px;
line-height: 1.6;
font-family: inherit;
}

.example__label {
color: rgb(51, 51, 51);
font-weight: 600;
font-family: inherit;
}

.example__total {
background: #FEF2E4;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
color: #805A3B;
font-weight: 600;
text-align: center;
font-family: inherit;
}

.example__note {
font-size: 0.75rem;
border-top: 1px solid rgb(224, 224, 224);
padding-top: 15px;
color: #666;
line-height: 1.4;
font-family: inherit;
word-wrap: break-word;
}

.pricing__image {
text-align: center;
margin-top: 40px;
}

.price__image {
max-width: 100%;
height: auto;
border-radius: 15px;
}

/* ===== フッター ===== */
.footer {
    background-color: #20374D;
    color: #ffffff;
    padding: 30px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* リンク部分のスタイル */
.footer__links {
    margin-bottom: 15px;
}

.footer__link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.footer__link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.footer__separator {
    color: #ffffff;
    margin: 0 10px;
    opacity: 0.7;
}

/* コピーライト部分のスタイル */
.footer__info {
    margin-top: 5px;
}

.footer__text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

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

.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}

/* ===== スクロールトップボタン ===== */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: #805A3B;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 1000;
font-family: inherit;
}

.scroll-to-top.show {
display: flex;
}

/* ===== レスポンシブ対応 ===== */

/* タブレット対応（1024px以下） */
@media (max-width: 1024px) {
.process__flow {
flex-direction: column;
gap: 40px;
align-items: stretch;
}

.process__flow::before {
display: none;
}

.process__item {
flex-direction:row;
align-items: flex-start;
text-aline:left;
max-width:100%
gap: 20px;
}

.process__number {
mardin: 0;
flex-shrink: 0;
}

.process__step {
min-height: auto;
height: auto;
flex: 1;
width: 100%;
}

.step__title {
text-align: left;
background: none;
}
}

/* タブレット・スマホ対応（768px以下） */
@media (max-width: 768px) {
.desktop-nav {
display: none;
}

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

.mobile-nav.active {
display: block;
}

.header__content {
padding: 0 15px;
}

.logo-image {
height: 35px;
}

.hero {
padding: 120px 0 50px;
min-height: auto;
}

.hero__row {
flex-direction: column;
gap: 30px;
}

.hero__text-column,
.hero__image-column {
max-width: 100%;
flex: none;
}

.hero__title-line {
font-size: 2rem;
}

.hero__title-line--small {
font-size: 1.2rem;
}

.hero__subtitle {
font-size: 1rem;
}

.hero__image {
max-width: 400px;
}

.hero__cta {
display: none;
}

.section__title {
font-size: 1.8rem;
}

.section__subtitle {
font-size: 0.9rem;
margin-bottom: 15px;
}

.company__content,
.company__content--reverse {
flex-direction: column;
gap: 30px;
display: flex;
}

.company__banner {
width: 100%;
height: auto;
}

.company__text,
.company__image {
max-width: 100%;
}

.company__heading {
font-size: 1.1rem;
}

.company__description {
font-size: 0.95rem;
}

.emphasized-text {
font-size: 0.95rem;
padding: 8px 12px;
}

.process__flow::before {
display: none;
}

.process__item {
flex-direction: column;
align-items: center;
text-align: center;
}

.step__title {
background: linear-gradient(transparent 74%, rgba(198, 0, 0, 0.4) 40%);
text-align: left;
}

.process__number {
margin-bottom: 15px;
margin-left: 0;
margin-right: auto;
}

.process__step {
max-width: 100%;
margin-left: 0;
text-align: left;
}

.case-study-table {
overflow-x: auto;
margin: 0 -15px;
}

.cases-table {
min-width: 600px;
}

.cases-table th,
.cases-table td {
padding: 8px;
font-size: 0.85rem;
}

.pricing__examples {
gap: 30px;
}

.example__item {
padding: 20px;
}

.example__name {
font-size: 1.1rem;
}

.pricing__right h3 {
font-size: 1.4rem;
margin-bottom: 25px;
}

.cta-button {
padding: 12px 24px;
font-size: 1rem;
}

.footer__content {
padding: 30px 0;
}

.container {
padding: 0 15px;
}

.section {
padding: 50px 0;
}
   
.footer {
        padding: 20px 0;
    }
    
.footer__links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
.footer__separator {
        display: none;
    }
}

/* スマホ対応（480px以下） */
@media (max-width: 480px) {
/* ヒーロー */
.hero__title-line {
font-size: 1.8rem;
}
.hero__title-line--small {
font-size: 1rem;
}
.hero__subtitle {
font-size: 0.9rem;
padding: 15px;
}
/* セクションタイトル */
.section__title {
font-size: 1.8rem;
}
/* 会社セクション */
.company__heading {
font-size: 1.1rem;
}
.company__description {
font-size: 1rem;
}
.emphasized-text {
font-size: 1.1rem;
}
.company__subtitle {
font-size: 1.15rem;
}

.company__banner {
width: 90%;
height: auto;
}

/* プロセス */
.step__title {
font-size: 1rem;
}
.step__description {
font-size: 0.9rem;
}
/* テーブル */
.cases-table th,
.cases-table td {
padding: 8px;
font-size: 0.8rem;
}
.cases-table td:nth-child(4) ,
.cases-table th:nth-child(4){
padding: 8px;
font-size: 0.8rem;
}
.case-study 
.company__subtitle {
    font-size: 1rem;
}

.cases-table {
min-width: 530px;
}

/* 料金 */
.example__name {
font-size: 1rem;
padding: 12px;
}
.example__detail {
font-size: 0.9rem;
}
.example__total {
font-size: 0.9rem;
padding: 12px;
}
.example__note {
font-size: 0.7rem;
}
/* CTAボタン */
.cta-button {
font-size: 0.9rem;
padding: 10px 20px;
}
/* コンテナ */
.container {
padding: 0 10px;
}
/* セクションパディング */
.section {
padding: 40px 0;
}
/* ヘッダー */
.header {
padding: 5px 0;
}
.hero {
padding: 70px 0 20px;
}
}