@charset "UTF-8";



#content {padding: 90px 0 0;}
@media screen and (max-width: 1120px) {
#content {padding: 8.03vw 0 0;}
}
@media screen and (max-width: 767px) {
#content {padding: 57px 0 0;}
}


#link01,
#link02,
#link03 {
  scroll-margin-top: 100px;
}

@media screen and (max-width: 767px) {
  #link01,
  #link02,
  #link03 {
    scroll-margin-top: 70px;
  }
}



.hero-section { color: #fff;position: relative;}
.hero-section img {width: 100%;height: auto;vertical-align: bottom;}
.hero-inner { width: 1060px;text-align: left; position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);}
.hero-section .sub-title { font-size: 28px;font-weight: 700; display: block; margin-bottom: 20px; }
.hero-section .main-title { font-size: 54px; font-weight: bold; margin-bottom: 40px; }
.hero-section .hero-desc { font-size: 18px; line-height: 1.8; }
@media screen and (max-width: 1120px) {
.hero-inner { width: 94.64vw;}
.hero-section .sub-title { font-size: 2.5vw;margin-bottom: 1.78vw;}
.hero-section .main-title { font-size: 4.82vw;margin-bottom: 3.57vw;}
.hero-section .hero-desc { font-size: 1.60vw;}

}
@media screen and (max-width: 767px) {
.hero-inner { width: 90vw;}
.hero-section .sub-title { font-size: 2.8vw;margin-bottom: 1.78vw;}
.hero-section .main-title { font-size: 4.82vw;margin-bottom: 3.57vw;}
.hero-section .hero-desc { font-size: 2.8vw;}
}

/* ベースコンテナ */
.mission_back { position: relative; overflow: hidden; aspect-ratio: 1280 / 650; width: 100%; display: flex; align-items: center; }
/* 背景画像（初期状態：透明＆微ズーム） */
.mission_back::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: url('images/mission.jpg'); background-image: -webkit-image-set(url('images/mission.jpg') 1x, url('images/mission@2x.jpg') 2x); background-image: image-set(url('images/mission.jpg') 1x, url('images/mission@2x.jpg') 2x); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1.08); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
/* 2x画像切り替え */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .mission_back::before { background-image: url('images/mission@2x.jpg'); } }
/* 表示時（ふわっとズームアウト発火） */
.mission_back.is-active::before { opacity: 1; transform: scale(1); }
/* 子要素の前面配置 */
.mission_back > * { position: relative; z-index: 1; }

.mission { width: 1080px; margin: auto; text-align: left; z-index: 1; box-sizing: border-box; }
.mission .copy { font-size: 44px; font-weight: 700; line-height: 1.5; color: #000000; margin-bottom: 50px; }
.mission p { font-size: 16px; line-height: 1.8; margin-bottom: 20px; }

@media screen and (max-width: 1120px) {
.mission { width: 96.42vw; }
.mission .copy { font-size: 3.92vw; margin-bottom: 4.46vw; }
.mission p { font-size: 1.42vw; margin-bottom: 1.78vw; }
}

@media screen and (max-width: 767px) {
.mission_back { aspect-ratio: auto; min-height: 400px; padding: 10vw 0; }
.mission { width: 90vw; }
.mission .copy { font-size: 4.4vw; text-align: left; margin-bottom: 4vw; }
.mission p { font-size: 3vw; text-align: left; }
}

/* ベースコンテナ */
.strengths_back { position: relative; padding: 100px 0; background-color: #fff; overflow: hidden; text-align: left; }
/* 背景画像（初期状態：透明） */
.strengths_back::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: url('images/strengths1.jpg'), url('images/strengths2.jpg'); background-image: -webkit-image-set(url('images/strengths1.jpg') 1x, url('images/strengths1@2x.jpg') 2x), -webkit-image-set(url('images/strengths2.jpg') 1x, url('images/strengths2@2x.jpg') 2x); background-image: image-set(url('images/strengths1.jpg') 1x, url('images/strengths1@2x.jpg') 2x), image-set(url('images/strengths2.jpg') 1x, url('images/strengths2@2x.jpg') 2x); background-position: right top, left bottom; background-repeat: no-repeat, no-repeat; background-size: contain, contain; opacity: 0; transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; }

/* Retina対応（2倍画像） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .strengths_back::before { background-image: url('images/strengths1@2x.jpg'), url('images/strengths2@2x.jpg'); } }

/* 表示時（スケール変化なしでふわっと表示） */
.strengths_back.is-active::before { opacity: 1; }

/* 子要素の前面配置 */
.strengths_back > * { position: relative; z-index: 1; }
.strengths { width: 1080px; margin: 0 auto; box-sizing: border-box; }
/* 見出し・強み共通パーツ */
.strength-header { display: flex; align-items: center; gap: 20px; margin-top: 90px; }
.strength-header .badge { background-color: #f8c058; color: #fff; padding:12px 10px 10px; border-radius: 4px; font-weight: bold; font-size: 16px; }
.strength-header .strength-title { color: #0058a2; font-size: 32px; font-weight: 700; margin: 0; }
.strengths .copy { font-size: 42px; font-weight: 700; margin: 50px 0; line-height: 1.4; }
/* 01: Vender free (グリッド・お悩み・実績タグ) */
.strength-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 100px; }
.concerns-box h4, .products-box h4 { font-size: 24px; color: #0058a2; margin: 0 0 30px; font-weight: 700; }
.concern-list { list-style: none; padding: 0; margin: 0; }
.concern-list li { background-color: #fff; padding: 16px 20px; margin-bottom: 20px; border-radius: 8px; font-size: 16px;font-weight: 700; line-height: 1.6; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); border: 1px solid #eef2f5; list-style: none; }
.concern-list li span {font-size: 14px;display: block;}
/* 解決ボックス（矢印を配置するための相対位置指定と上部余白調整） */
.solution-box { position: relative; border: 4px solid #0058a2; padding: 20px; text-align: center; border-radius: 6px; margin-top: 30px; font-weight: 700; color: #0058a2; font-size: 15px; line-height: 1.6; }
/* SVG画像をボックスの上部中央（40px × 40px）に配置 */
.solution-box::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background-image: url('images/yajirushi.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.solution-box p {font-size: 16px; line-height: 1.6;text-align: left;}
.solution-box p span{font-size: 14px;display: block;}
.tag-group { margin-bottom: 40px; }
.tag-group h5 { font-size: 16px;  margin: 0 0 20px; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { background-color: #e6eef6; padding: 12px 6px; border-radius: 10px; font-size: 14px;font-weight: 700; }

/* 02: Vender bass (全国拠点・サポート) */
.support-subtitle { font-size: 24px; font-weight: 700; color: #0058a2;}
.vender-bass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; /*align-items: center;*/ margin-bottom: 60px; }
.support-info { display: flex; flex-direction: column; gap: 50px; }
.support-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.feature-item { display: flex; align-items: flex-start; gap: 16px;align-items: center; }
.feature-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon img { width: 100%; height: auto; }
.feature-text h4 { font-size: 20px; color: #0058a2; margin: 0 0 10px; font-weight: 700; }
.feature-text p { font-size: 14px; margin: 0; line-height: 1.5; }
.customer-voice-card { background-color: #fff; border: 1px solid #eef2f5; border-radius: 8px; padding: 20px; font-size: 18px;font-weight: 700; line-height: 1.6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.customer-voice-card .voice-source { display: block; margin-top: 8px; font-size: 14px; }
.location-map-wrapper { position: relative; text-align: center; }
.map-image { position: relative; display: inline-block; width: 100%; max-width: 480px; }
.map-image img { width: 100%; height: auto; }
.badge-拠点 { position: absolute; top: 15%; right: 5%; background-color: #0058a2; color: #fff; border-radius: 50%; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; text-align: center; line-height: 1.2; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

.location-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px;}
.location-item .loc-name { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.location-item .loc-address { font-size: 14px; margin: 0 0 10px; line-height: 1.4; }
.location-item .loc-tel { font-size: 14px;margin: 0; }
@media screen and (max-width: 1120px) {
.strengths_back {padding: 8.92vw 0;}
.strengths { width: 94vw;}

.strength-header {gap: 1.78vw; margin-top: 8.03vw; }
.strength-header .badge {padding:1.07vw 0.89vw 0.89vw; border-radius: 0.35vw;font-size: 1.42vw; }
.strength-header .strength-title {font-size: 2.85vw;}
.strengths .copy { font-size: 3.75vw; margin: 4.46vw 0; }

.strength-grid {gap: 7.14vw; margin-bottom: 8.92vw; }
.concerns-box h4, .products-box h4 { font-size: 2.14vw;margin: 0 0 2.67vw;}
.concern-list li {padding: 1.42vw 1.78vw; margin-bottom: 1.78vw; border-radius: 0.71vw; font-size: 1.42vw;box-shadow: 0 0.26vw 0.89vw rgba(0, 0, 0, 0.06);}
.concern-list li span {font-size: 1.25vw;}
.solution-box { position: relative; border: 0.35vw solid #0058a2; padding: 1.78vw;border-radius: 0.53vw; margin-top: 2.67vw;font-size: 1.33vw;}
.solution-box::before {top: -1.78vw;width: 3.57vw; height: 3.57vw;}
.solution-box p {font-size: 1.42vw;}
.solution-box p span{font-size: 1.25vw;}
.tag-group { margin-bottom: 3.57vw; }
.tag-group h5 { font-size: 1.42vw;  margin: 0 0 1.78vw;}
.tags {gap: 0.89vw; }
.tags span {padding: 1.07vw 0.53vw; border-radius: 0.89vw; font-size: 1.25vw;}
.support-subtitle { font-size: 2.14vw;}
.vender-bass-grid {gap: 5.35vw;margin-bottom: 5.35vw; }
.support-info {gap: 4.46vw; }
.support-features {gap: 1.78vw; }
.feature-item {gap: 1.42vw;}
.feature-icon { width: 5.35vw; height: 5.35vw;}
.feature-text h4 { font-size: 1.78vw;margin: 0 0 0.89vw;}
.feature-text p { font-size: 1.25vw;}
.customer-voice-card {border-radius: 0.71vw; padding: 1.78vw; font-size: 1.60vw; box-shadow: 0 0.35vw 1.07vw rgba(0, 0, 0, 0.08); }
.customer-voice-card .voice-source { margin-top: 0.71vw; font-size: 1.25vw; }
.location-list {gap: 2.14vw 1.42vw;}
.location-item .loc-name { font-size: 1.42vw;margin: 0 0 0.89vw; }
.location-item .loc-address { font-size: 1.25vw; margin: 0 0 0.89vw;}
.location-item .loc-tel { font-size: 1.25vw;}

}
@media screen and (max-width: 767px) {
.strengths_back {padding: 10vw 0;}
.strengths { width: 90vw;}

.strength-header {gap: 2.5vw; margin-top: 10vw; }
.strength-header .badge {padding:2.5vw; border-radius: 1vw;font-size: 3vw; }
.strength-header .strength-title {font-size: 4vw;}
.strengths .copy { font-size: 5vw; margin: 5vw 0; }

.strength-grid {gap: 7.14vw; margin-bottom: 8.92vw; }
.concerns-box h4, .products-box h4 { font-size: 3.4vw;margin: 0 0 5vw;}
.concern-list li {padding: 2vw; margin-bottom: 2.5vw; border-radius: 0.71vw; font-size: 3vw;box-shadow: 0 0.26vw 0.89vw rgba(0, 0, 0, 0.06);}
.concern-list li span {font-size: 2.8vw;}
.solution-box { position: relative; border: 0.35vw solid #0058a2; padding: 1.78vw;border-radius: 0.53vw; margin-top: 5vw;font-size: 3vw;}
.solution-box::before {top: -3vw;width: 6vw; height: 6vw;}
.solution-box p {font-size: 3vw;}
.solution-box p span{font-size: 2.8vw;}
.tag-group { margin-bottom: 5vw; }
.tag-group h5 { font-size: 3.4vw;  margin: 0 0 2.5vw;}
.tags {gap: 2vw; }
.tags span {padding: 2vw; border-radius: 2vw; font-size: 3vw;}
.support-subtitle { font-size: 3.4vw;}
.vender-bass-grid {gap: 5.35vw;margin-bottom: 5.35vw; }
.support-info {gap: 4.46vw; }
.support-features {gap: 2.5vw; }
.feature-item {gap: 2vw;}
.feature-icon { width: 10vw; height: 10vw;}
.feature-text h4 { font-size: 3.4vw;margin: 0 0 1vw;}
.feature-text p { font-size: 2.8vw;}
.customer-voice-card {border-radius: 2vw; padding: 2vw; font-size: 3vw; box-shadow: 0 0.35vw 1.07vw rgba(0, 0, 0, 0.08); }
.customer-voice-card .voice-source { margin-top: 0.71vw; font-size: 2.8vw; }
.location-list { grid-template-columns: repeat(1, 1fr); gap: 5vw; }
.location-item .loc-name { font-size: 3.4vw;margin: 0 0 2vw; }
.location-item .loc-address { font-size: 3vw; margin: 0 0 1vw;}
.location-item .loc-tel { font-size: 3vw;}

}

/* 全体・グリッド配置 */
.solve-section {  }
.solve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;}
/* 左側：青色メインカード設定 */
.solve-left-card .sub-copy { font-size: 24px; color: #0058a2; font-weight: 700; margin-bottom: 35px; line-height: 1.4; }
.blue-box { background: linear-gradient(135deg, #0058a2 0%, #004080 100%); color: #fff; padding: 35px 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 91, 172, 0.15); }
.blue-box .en-tag { font-size: 14px; color: #f8c058; font-weight: 700; display: block; margin-bottom: 30px; text-transform: uppercase; }
.blue-box .box-title { font-size: 22px; font-weight: 700; margin: 0 0 40px; line-height: 1.4; }
.blue-box .box-desc { font-size: 16px; line-height: 1.7;margin: 0 0 60px; }
.blue-box .pill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blue-box .pill-tags span { background-color: #e6eef6;color: #000; padding:12px 16px; border-radius: 10px; font-size: 12px; font-weight: 700; }
/* 右側：Before / After 事例カード設定 */
.solve-right-list { display: flex; flex-direction: column; gap: 16px; }
.ba-card { background-color: #fff; border-radius: 10px; padding: 26px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.ba-card .category { font-size: 14px;  font-weight: 700;margin: 0 0 20px; }
.ba-card .category span {color: #0058a2;}
.ba-card .ba-title { font-size: 20px; font-weight: 700; margin: 0 0 20px; }
.ba-box-wrapper { display: flex; align-items: center; gap: 10px; }
.ba-box { flex: 1; padding: 12px 14px; border-radius: 6px; font-size: 14px; }
.ba-box.before { background-color: rgba(93, 182, 231, 0.2); }
.ba-box.after { background-color: rgba(248, 192, 88, 0.2); }
.ba-box .label { font-size: 12px; font-weight: 700; display: block; margin-bottom: 20px; text-transform: uppercase; }
.ba-box p { margin: 0; font-weight: 700; }
.ba-arrow { color: #f8c058; font-size: 20px; flex-shrink: 0; }

@media screen and (max-width: 1120px) {
.solve-section {  }
.solve-grid {gap: 3.57vw; }
.solve-left-card .sub-copy { font-size: 2.14vw;margin-bottom: 3.12vw;}
.blue-box {padding: 3.12vw 2.67vw; border-radius: 1.07vw; box-shadow: 0 0.35vw 1.78vw rgba(0, 91, 172, 0.15); }
.blue-box .en-tag { font-size: 1.25vw;margin-bottom: 2.67vw;}
.blue-box .box-title { font-size: 1.96vw;margin: 0 0 3.57vw;}
.blue-box .box-desc { font-size: 1.42vw;margin: 0 0 5.35vw; }
.blue-box .pill-tags {gap: 0.71vw; }
.blue-box .pill-tags span {padding:1.07vw 1.42vw; border-radius: 0.89vw; font-size: 1.07vw;}
.solve-right-list { gap: 1.42vw; }
.ba-card {border-radius: 0.89vw; padding: 2.32vw; box-shadow: 0 0.35vw 1.33vw rgba(0,0,0,0.05);}
.ba-card .category { font-size: 1.25vw;margin: 0 0 1.78vw; }
.ba-card .ba-title { font-size: 1.78vw;margin: 0 0 1.78vw; }
.ba-box-wrapper {gap: 0.89vw; }
.ba-box {padding: 1.07vw 1.25vw; border-radius: 0.53vw; font-size: 1.25vw; }
.ba-box .label { font-size: 1.07vw;margin-bottom: 1.78vw;}
.ba-arrow {font-size: 1.78vw;}

}
@media screen and (max-width: 767px) {

.solve-section {}
.solve-grid {gap: 3.57vw; }
.solve-left-card .sub-copy { font-size: 3.4vw;margin-bottom: 5vw;}
.blue-box {padding: 3.12vw 2.67vw; border-radius: 1.07vw; box-shadow: 0 0.35vw 1.78vw rgba(0, 91, 172, 0.15); }
.blue-box .en-tag { font-size: 2.8vw;margin-bottom: 2.67vw;}
.blue-box .box-title { font-size: 3.4vw;margin: 0 0 3.57vw;}
.blue-box .box-desc { font-size: 3vw;margin: 0 0 5.35vw; }
.blue-box .pill-tags {gap: 2vw; }
.blue-box .pill-tags span {padding:2vw; border-radius: 2vw; font-size: 2.8vw;}
.solve-right-list { gap: 2.5vw; }
.ba-card {border-radius: 1vw; padding: 2.5vw; box-shadow: 0 0.35vw 1.33vw rgba(0,0,0,0.05);}
.ba-card .category { font-size: 3vw;margin: 0 0 2vw; }
.ba-card .ba-title { font-size: 3.4vw;margin: 0 0 2.5vw; }
.ba-box-wrapper {gap: 1vw; }
.ba-box {padding: 2vw 1.25vw; border-radius: 0.53vw; font-size: 2.8vw; }
.ba-box .label { font-size: 2.8vw;margin-bottom: 1w;}
.ba-arrow {font-size: 2vw;}
}


/* レスポンシブ対応（767px以下） */
@media screen and (max-width: 767px) { 
.solve-grid { grid-template-columns: 1fr; gap: 30px; } 

}


/* スマホ対応（767px以下） */
@media screen and (max-width: 767px) {
.strength-grid, .vender-bass-grid { grid-template-columns: 1fr; gap: 30px; }
}