@charset "utf-8";
/* CSS Document------------------------------------------------------------------------------------------
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
body {.fix-nav.nav-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-100%) !important;
}
  min-width: 344px; /* Galaxy Z fold5の幅参照。短すぎる対策 */
  min-height: 100vh; /* ビューポートの高さに変更 */
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
section {overflow: hidden;
  max-width: 1200px;
  width: 100%;
  margin: 1% auto;
  padding: 1%;
  text-align: center;
}
main {
  flex: 1; /* メインコンテンツが残り領域を占有 */
}
section p{margin-top: 2%;
  line-height: 1.75;
}
/*文字関連------------------------------------------------------------------------------------------
*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
p{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.75;
  font-size: calc(18px + 0.5vw);
}
a{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: calc(14px + 0.5vw);
  font-style: normal;
  line-height: 1.75;
}
/*aタグ関連*/
/*
a:active {text-decoration: underline;color: #fdc479;}
a img{transition:0.3s;}
*/
a:link{text-decoration: none;
  color:#ffffff;
}
a:hover{text-decoration: underline;
  color: #FFEC50;
  transition-duration: 0.7s;
}
a:visited {text-decoration: none;
  color: #ffffff;
}
a img:hover{opacity:0.7;
  transition-duration: 0.7s;
}
.content-img-bike{width:100%;
  margin:2% auto;
  height: auto;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition-duration: 0.7s;
  }
.content-img-bike:hover {
  box-shadow: 0px 0px 15px 2px rgba(255, 236, 80, 0.781);
  transform: scale(0.9);
  transition-duration: 0.7s;
}
.content-img-bike img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4/3; /* 例: 画像比率を統一 */
  object-fit: contain;
  height: auto;
  display: block;
  margin: 0 auto;
}
/*下線アニメーション*/
.c-txt.line {
  padding-bottom: 5px;
  position: relative;
}
.c-txt.line::before {
  background: #ff701e;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.c-txt.line:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*ハンバーガーメニュー------------------------------------------------------------------------------------------
*/
.drawer-nav{
  color: #fff;
  background-color: #203239;
}
/* drawer.min.cssの設定を確実に適用 */
.drawer--right .drawer-nav {
  right: -16.25rem !important;
}
/* drawer-openクラスが適用された時の表示設定 */
.drawer--right.drawer-open .drawer-nav {
  right: 0 !important;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon span {
  background-color: #141e27; 
  display: block;
  width: 30px;
  height: 4px;
  margin: 6px auto;
  border-radius: 5px;
  transition: 0.3s;
}
.drawer-hamburger-icon {
  background-color: #ff701e !important;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
  background-color: #141e27 !important;
}
.drawer-open .drawer-hamburger-icon {
  background-color: transparent !important;
}
.drawer-open .drawer-hamburger-icon::before,
.drawer-open .drawer-hamburger-icon::after {
  background-color: #ff701e !important;
}
/*YouTubeボタン------------------------------------------------------------------------------------------
*/
.youtube-button {
  position: fixed;
  z-index: 4;
  top: 66px; /* ハンバーガーメニューボタンの下に配置 */
  right: 0;
  display: block;
  box-sizing: content-box;
  width: 2rem;
  height: 2rem;
  padding: 8px .75rem 8px;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateZ(0);
  border: 0;
  border-radius: 3px;
  outline: 0;
  background-color: #ff701e;
  cursor: pointer;
}
.youtube-button:hover {
  background-color: #cc0000; /* ホバー時の濃い赤 */
}
.youtube-icon {
  color: white;
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
}

/* YouTubeレスポンシブ対応 */
.youtube-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  overflow: hidden;
}

.youtube-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}

/* レスポンシブ対応 */
@media only screen and (max-width: 767px) {
  .youtube-button {
    top: 66px;
    padding: 15px .6rem 15px;
  }
  .youtube-icon {
    width: 20px;
    height: 20px;
  }
}
.drawer-menu {background-color: #203239;
  padding: calc(10% + 50px) 0 0 0 ;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 200;
}
.drawer-menu ul{
  margin: 100px auto 5% auto;
}
.drawer-menu li {
  width: 100%;
  text-align: center;
  line-height: 1.75;
}
.drawer-menu p{margin:5% auto;
  text-align: center;
  font-size: 18px;
}
.drawer-nav,
.drawer-menu,
.drawer-menu li,
.drawer-menu a {
  background-color: #203239;
  color: #fff;
  font-size: 18px;
  line-height: 2.0;
}
.drawer-nav a[href="Used Motorcycles/index.html"],
.drawer-nav a[href="keihin/index.html"],
.drawer-nav a[href="kobutu/index.html"] {
  font-size: calc(10px + 0.5vw);
}
@media only screen and (max-width:767px) {
  .drawer-nav a[href="../Used Motorcycles/index.html"],
  .drawer-nav a[href="../keihin/index.html"],
  .drawer-nav a[href="../kobutu/index.html"] {
    font-size: 16px !important;
  }
  .fix-nav a {
    padding: 0.4em 0.2em;
    font-size: clamp(10px, 2.5vw, 14px);
    min-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .fix-nav ul li {
    min-width: 0;
    flex-shrink: 1;
  }
}
.drawer-menu a:hover {color: #FFEC50;
  transition: color 0.7s;
  transition-duration: 0.7s;
}
.drawer-open body {
    transition: transform .6s cubic-bezier(.19,1,.22,1);
    position: fixed;
    width: 100%;
    transform: translateY(0);
    overflow: visible !important;
}
/*固定ナビゲーション------------------------------------------------------------------------------------------
*/
.fix-nav{
  max-width: 1200px;
  width: 100%;
  position: fixed;
  top: 0%;
  z-index: 100;
  background-color: #203239;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1; /* 初期状態は表示 */
  transition: opacity 0.5s, transform 0.5s, visibility 0.5s; /* スムーズなトランジション */
}
.fix-nav.nav-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-100%) !important;
}
.fix-nav,
.fix-nav ul,
.fix-nav li,
.fix-nav a {
  text-align: center;
}
.fix-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 100%;
  padding: 0.8em 1em;
  text-align: center;
  line-height: 1.4;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1vw, 16px);
}
.fix-nav ul{padding: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  width:100%;
  height: 15vh;
  max-height: 120px; /* 高さ制限を追加 */
}
.fix-nav ul li{background-color:#203239;
  width: 20%;
  min-width: 0;
  flex: 1;
  height: 10vh;
  max-height: 80px; /* 高さ制限を追加 */
  display: flex;
  justify-content: center; /* 水平中央揃え */
  align-items: center; /* 垂直中央揃え */
  color:#FFF;
  font-size: 16px;
  overflow: hidden; /* はみ出し防止 */
}

.fix-nav ul li:has(.fix-nav-convert-btn) {
  background-color: #fbdf42;
}

.fix-nav a:hover {color: #f9be3f;
  letter-spacing: 0.1em;
  transition-duration: 0.7s;
}

/* 現在のページを示すアクティブ状態のスタイル */
.fix-nav .current-page {
  background-color: #FFEC50 !important;
}

.fix-nav .current-page a {
  color: #203239 !important;
  font-weight: bold;
}
/*CTA関連------------------------------------------------------------------------------------------
*/
.cta-btn-main{background-color: #203239;
  box-shadow: 0 4px 0 #FFEC50;
  width: 30%;
  margin: 5% auto;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
}
.cta-btn-main a {color: #ffffff !important;
  transition: color 0.3s;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center !important;
  line-height: inherit;
  font-size: calc(10px + 0.2vw);
}
.cta-btn-main:hover {
  transform: translateY(4px);
  transition-duration: 0.3s;
  box-shadow: none;
}
.cta-btn-convert{
  box-shadow: 0 4px 0 #203239;
  background-color: #FFEC50;
  color: #203239;
  font-size: calc(10px + 0.2vw);
  width:30%;
  padding: 10px 0;
  margin: 5% auto; 
  }  
  .drawer-nav{
    position: fixed;
    top: 0;
    overflow: hidden;
    width: 16.25rem;
    height: 100%;
    color: #fff;
    background-color: #203239;
    z-index: 200;
  }
.cta-btn-convert a {color: #191919;
  transition: color 0.3s;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  line-height: inherit;
}
.cta-btn-convert:hover {
  transform: translateY(4px);
  transition-duration: 0.3s;
  box-shadow: none;
}
.cta-nav-convert{
  background-color: #FFEC50;
  width:20%;
  height: 10vh;
}
/*header関連------------------------------------------------------------------------------------------
*/
header {
  height: 500px;
  width: 100%; /* 画面幅いっぱい */
  text-align: center;
  margin: 0;
  padding-top: 5%;
  background-repeat: no-repeat;
}
.t-logo {
  width: min(80vw, 800px); /* 画面幅の80%、最大800px */
  max-width: 90%; /* 親要素に対する最大幅 */
  height: auto;
  margin:0 auto;
  display: flex;
  align-items: center;   /* 縦（天地）中央揃え */
  justify-content: center; /* 横中央揃え */
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 4px #fff);
  transition: filter 0.5s;
}
.t-logo:hover {
  filter: drop-shadow(0 0 24px #FFEC50) drop-shadow(0 0 20px #FFEC50);
}
.t-logo img {
  max-width: 100vw;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  transition: max-width 0.3s, width 0.3s;
}
.t-logo:hover,
.t-logo img:hover {
  opacity: 1 !important;
}
/*footer関連------------------------------------------------------------------------------------------
*/
footer {
  background-color: #203239;
  color: #203239;
  text-align: center;
  padding: 10px 0 0 0; /* 下のパディングを0に */
  width: 100%;
  height: 70vh;
  margin: 0 !important; /* 全マージンを確実に0 */
  margin-top: auto !important; /* フッターを下部に押し下げ */
  flex-shrink: 0; /* フッターが縮まないように */
  position: relative;
  bottom: 0;
  border: none;
  outline: none;
}
footer a{color:#203239;
  letter-spacing: 0.1em;
}
footer a[href="Used Motorcycles/index.html"],
footer a[href="keihin/index.html"],
footer a[href="kobutu/index.html"],
footer a[href="../Used Motorcycles/index.html"],
footer a[href="../keihin/index.html"],
footer a[href="../kobutu/index.html"] {
  font-size: clamp(8px, 1.5vw, 12px);
  white-space: nowrap;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  display: inline-block;
  font-family: inherit;
}

footer a:hover {color: #f9be3f;
  transition: color 0.7s;
}
footer p{
  color: #ffefef;
  font-size: 14px;
  text-align: center;
  margin-top:30px;
  margin-bottom: 150px;
  padding: 0 !important;
  line-height: 1;
}
footer h2{color:#ffefef;
  font-size:12px;
  margin: 2% auto;
  text-align: center;
}
.simmba-footer-box01{
  font-size: 14px;
  color: #cfd1d1;
  padding: 20px;
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}
footer ul {
  list-style: none;
  padding-left: 0;
}
footer li {font-size: calc(14px + 0.5vw);
  line-height: 2.5em;
}
.simmba-footer-box02{
  background-color: #203239;
  width:30%;
  padding: 20px 30px;
}
.simmba-footer-logobox {width: 300px;
  height: 200px;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
}
/*その他*/
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
  .content-img-bike img,
  .slider img,
  .t-logo img,
  .simmba-footer-logobox img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
.slider img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.slick-dots li::marker:before{
  content: ''!important;
  height:100%!important;
  width: 100%!important;
}
.pankuzu {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin:2% auto 0% auto;
  padding: 0 5%;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: nowrap;
}
.pankuzu a{color:#203239;
  text-align: center;
}
/*main関連------------------------------------------------------------------------------------------
*/
.endsection{
  margin-bottom: 8%;
  padding-bottom: 2%;
}

/*TOP------------------------------------------------------------------------------------------
*/
.t-logo{
  width: min(90vw, 1600px); /* 画面幅の90%、最大1600pxに拡張 */
  max-width: 100%; /* 親要素に対する最大幅 */
  margin: 10% auto;
  height: 400px;
}
.t-logo img {
  width: 100%;
  height: 100vh;
  display: block;
  margin: 10% auto;
}
.t-c-simmba-syokai h1{font-size: 35px;
  text-align: center;
  padding: 0;
}
.t-c-simmba-syokai p{
  font-size: 16px;
  line-height: 1.5em;
  text-align: center;
}

.t-s-whatsimmba{
  padding: 0;
}
.t-s-whatsimmba p{text-align: center;
}
.t-s-whatsimmba img{margin-top: 0;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
  transform: scale(0.9);
  transition-duration: 0.7s;
}
.t-s-GALLERY{border: 1px solid #000;}
.t-c-GALLERY .slider {
  flex-direction: row;
  gap: 3%; 
}
.t-c-GALLERY .slider > div {
  flex: 0 0 auto;
}
.t-c-GALLERY .slider img {
  width: 100%;
  height: auto;
  display: block;
}
.t-c-info-box{
  padding:2% 5%;
}
.t-c-info-box h2{margin-bottom: 5%;
}
.t-c-info-box h3 {
  color: #203239;
}
.t-c-info-bar{border-bottom: 1px solid #203239;
  width: 100%;
  margin: 5% auto 3% 0;
}
.t-c-info-box a {
  color: #203239;
  text-align: left;
  font-size: 16px;
  line-height: 1.5em;
}
.t-c-info-box a:visited {
  color: #141e27;
}
.t-c-info-box .cta-btn-main{
  margin: 5% auto;
}
.c-c-midabox{
  width:100%;
  background-color: #203239 !important;
  padding: 2%;
}
.c-c-midabox h1 {
  color: #ffffff !important; 
}
/* ギャラリーページでのセクション調整 */
.gallery-page section {
  margin-bottom: 10vh;
  min-height: calc(100vh - 15vh - 70vh);
}
/*CUSTOM------------------------------------------------------------------------------------------
*/
.c-c-custom-main{
  width: 100%;
  height: auto; 
  min-height: 300px;
  max-height: none; 
  overflow: visible;
  padding: 2%;
  margin: 2% auto;
}
.c-c-custom-main p{
  text-align: left;
  font-size: calc(10px + 0.2vw);
  line-height: 1.5em;
  word-break: break-all;
  margin:2% auto 5% auto;
}
.c-c-custom-main,
.c-c-custom-sr {
  min-height: 45vh;
}
.c-c-custom-sr .content-img-bike {
  max-width: 100%;
  box-sizing: border-box;
}
.c-c-custom-sr .content-img-bike img {
  max-width: 100%;
  height: auto;
  display: block;
}
.c-c-custom-sr{
  width:100%;
  height:60vh;
  max-height: fit-content;
  min-height: fit-content;
  display: flex;
  gap: 0%;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}
.c-c-custom-sr .content-img-bike {
  width: 32%;
  max-width: 100%;
  min-height: 30vh;
  height: auto;
  display: block;
  margin:40px auto;
  padding: 1%;
  gap: 0;
  text-align: center;
}
.c-c-custom-parts-sec{
  width: 100%;
  height: auto;
}
.c-c-custom-main {
  height: auto;
  overflow: hidden;
}
.c-c-custom-parts{
  height: auto;
  width:100%;
  display: flex;
  gap: 1%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.c-c-custom-parts .content-img-bike {
  width: 38%;
  box-sizing: border-box;
  margin-bottom: 1%;
  overflow: visible;
}
.c-c-custom-parts .content-img-bike img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.c-c-custom-parts2{
  height: auto;
  width:100%;
  gap: 1%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.c-c-custom-parts2 .content-img-bike img {
  max-width: 100%;
  height: auto;
  display: block;
}
/*RESTRATION------------------------------------------------------------------------------------------
*/
.c-c-restoration-process {
  width: 100%;
  margin: 2% auto;
  padding: 2%;
  text-align: center;
}
.c-c-restoration-process h2 {
  font-size: 24px;
  margin: 2% auto;
  color: #203239;
  text-align: center;
}
.c-c-restoration-process p {
  font-size: calc(14px + 0.3vw);
  line-height: 1.6;
  margin: 1% auto;
  text-align: center;
}
.c-c-restoration-process .content-img-bike {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
  align-items: center;
  margin: 3% auto;
  width: 100%;
}
.c-c-restoration-process .content-img-bike img {
  flex: 0 0 calc(30% - 2%);
  max-width: calc(30% - 2%);
  height: auto;
  margin: 1%;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}
.c-c-restoration-process .content-img-bike img:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 15px 2px rgba(255, 236, 80, 0.781);
}
.c-c-rastoration-photo{
  width:100%;
  margin:2% auto;
}

.c-c-paintbf{
  width:100%;
  margin:2% auto;
    display: flex;
}
.c-c-paintbf img{
  width:90%;
}
.c-c-paintbf h2{
  margin:2% auto;
  font-size: 10px;
  color: #203239;
  text-align: center;
}
/*GALLERY------------------------------------------------------------------------------------------
基本CUSTOMと同じCSSで対応
*/
.c-c-gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 2% auto;
}
.c-c-gallery .content-img-bike {
  width: 24%;
  max-width: 100%;
  min-height: 30vh;
  height: auto;
  display: block;
  margin: 40px auto;
  padding: 1%;
  gap: 0;
  text-align: center;
}
.c-c-gallery .content-img-bike img {
  max-width: 100%;
  height: auto;
  display: block;
}
.c-c-custom-oldbike {
  width: 24%;
  max-width: 100%;
  min-height: 30vh;
  height: auto;
  display: block;
  margin:40px auto;
  padding: 1%;
  gap: 0;
  text-align: center;
}
.c-c-custom-oldbike .content-img-bike{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1%;
}
.c-c-custom-oldbike .content-img-bike p{
  font-size: calc(10px + 0.5vw);
  line-height: 1.5em;
  text-align: center;
}
/*SR400 CUSTOM------------------------------------------------------------------------------------------
*/
.c-c-bike-photo-box{
  width:100%;
  margin:0 auto;
}
.c-c-bike-photo-slider {
  width: 100%;
  margin: 0 auto;
}
.c-c-bike-photo-slider-main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.c-c-bike-photo-slider-main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.c-c-bike-photo-slider-nav{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 80%;
  opacity: 0.9;
  margin: 2% auto 0 auto;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.c-c-bike-photo-slider-nav img {
  flex: 0 0 auto;         /* 画像の幅を固定し折り返さない */
  width: 80px;            /* 固定サイズ（お好みで調整） */
  height: auto;
  display: block;
}
.c-c-bike-photo-explanation {
  width: 100%;
  padding:10%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.5em;
}
.c-c-bike-photo-explanation p {
  font-size: 16px;
}

.c-c-bike-photo-explanation-margin{
  width: 100%;
  height:60px;
}
/* Slickスライダーのカスタムスタイル */
.c-c-bike-photo-slider-main .slick-slide {
  outline: none;
}
.c-c-bike-photo-slider-main .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.c-c-bike-photo-slider-nav .slick-slide {
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.c-c-bike-photo-slider-nav .slick-slide.slick-current {
  opacity: 1;
}
.c-c-bike-photo-slider-nav .slick-slide:hover {
  opacity: 1;
}
/*INFORMATION------------------------------------------------------------------------------------------
*/
.c-c-info-box{
  width:100%;
  padding:2%;
  margin:15% auto;
}
.c-c-info-box h1 {font-size:large;}
.c-c-info-box p{
  text-align: left;
  font-size: 18px;
  line-height: 1.75em;
}
.c-c-info-box a{
  color:#203239;
  font-size: 18px;
  margin-right:95%;
  border-bottom: #141e27 solid 3px;
}
/*プライバシーポリシーの改定------------------------------------------------------------------------------------------
*/
.c-c-policy-box{width:100%;
  padding:2%;
  margin:2% auto;
}
.c-c-policy-box li ,.c-c-policy-box p{
  font-size: calc(10px + 0.5vw);
  line-height: 1.5em;
  text-align: left;
}
.c-c-policy-box h3 ,.c-c-policy-box h4 {
  color: #203239;
  margin: 5% auto 2% auto;
}
.c-c-policy-box ul,
.c-c-policy-box ol {
  list-style: none;
  padding-left: 0;
}
/*景品表示法に基づく表記------------------------------------------------------------------------------------------
*/
ol {
  list-style: none;
  padding-left: 0;
}

/**/
.c-c-usedmotor-plot{
  width:100%;
  padding:2%;
  margin:2% auto;
}
.c-c-usedmotor-plot p {
  text-align: left !important;
  margin-top: 1%;
  line-height: 1.6;
  font-size: calc(14px + 0.3vw);
  line-height: 1.75;
}
.c-c-usedmotor-plot h2 {
  font-size: 18px;
  margin: 3% auto;
  color: #203239;
  text-align: left;
}

/*レスポンシブ対応------------------------------------------------------------------------------------------
*/
/* タブレット・中サイズ画面用 */
@media only screen and (max-width:1024px) and (min-width:768px) {
  .t-logo {
    width: min(85vw, 600px); /* タブレットサイズ対応 */
    max-width: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
}

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

body {
  margin: 0 auto;
  min-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* 横スクロールを防ぐ */
}
section{
  width: 100%;
  margin: 5% auto;
}
header{
  background-size: cover;
  margin-top: 15vh; /* fix-navの高さ分の余白を追加 */
}
footer{
  height: auto;
  margin-top: 5vh !important;
}
footer a[href="Used Motorcycles/index.html"],
footer a[href="keihin/index.html"],
footer a[href="kobutu/index.html"],
footer a[href="../Used Motorcycles/index.html"],
footer a[href="../keihin/index.html"],
footer a[href="../kobutu/index.html"] {
  font-size:14px;
}
.gallery-page footer {
  margin-top: 10vh !important;
}
h1, h2, h3, h4, h5, h6 {
  font-size:20px;
}

p{
  font-size: 20px;
  line-height: 1.5em;
}
a{font-size: 20px;
  line-height: 1.5em;
}
img {
  max-width: 100%;
  margin: 0 auto;
}

.content-img-bike {
  height: auto; /* 例：お好みの高さに調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
.content-img-bike p{
  font-size: 20px;
  line-height: 1.5em;
  text-align: center;
}
.content-img-bike img {
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.cta-btn-main,.cta-btn-convert {
  width: 80%;
  margin-top: 2%;
  padding: 2%;
}
.cta-btn-main a,.cta-btn-convert a {
  transition: color 0.3s;
  line-height: inherit;
  text-align: center !important;
  margin: 12px 0;
  display: inline-block;
  font-size: 20px; /* レスポンシブ時の文字サイズ */
}

.t-logo {
  width: 70%;
  position: relative; /* absoluteから変更 */
  margin: 0 auto; /* 中央配置 */
  margin-top: calc(15vh + 100px); /* fix-navの高さ分 + 余白 */
  padding: 20px 0; /* 上下の余白 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-logo img {
  width: 200px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.simmba-footer-box01{
  flex-direction: column;
  width: 100%;
}
.simmba-footer-box02{
  width: 80%;
  margin: 1% auto;
}
/* ハンバーガーメニューがfooterと重なったら非表示 */
.drawer-nav.hide-on-footer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.drawer-hamburger-icon.hide-on-footer {
  background-color: #fff !important;
  transition: background-color 0.5s;
}
/*CUSTOMレスポンシブ時*/
.c-c-midabox{
  font-size: 14px;
}
.c-c-midabox h1 {
  white-space: nowrap; /* 折り返しを防ぐ */
  overflow: hidden; /* はみ出し部分を隠す */
  text-overflow: ellipsis; /* 必要に応じて省略記号を表示 */
  text-align: center; /* 中央揃え */
}
.c-c-custom-main{
  font-size:10px;
  padding: 1%;
}
/* RESTORATION レスポンシブ対応 */
.c-c-restoration-process .content-img-bike img {
  flex: 0 0 calc(48% - 1%);
  max-width: calc(48% - 1%);
}
.c-c-custom-sr {
  width: 100%;
  height: auto;
  max-height: fit-content;
  display: flex;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr; /* 2カラム */                   
  justify-content: left;
  align-items: flex-start;
}
.c-c-custom-sr .content-img-bike {
  width: 100%;
  box-sizing: border-box;
}
.c-c-custom-parts {
  justify-content: center;
  display: inline-block;
}
.c-c-custom-oldbike {
  display: block;         /* グリッドやフレックスを解除して縦並びに */
  height: auto;
}
.c-c-custom-oldbike .content-img-bike {
  width: 80%;
  margin: 24px auto;
  display: block;
}
  .c-c-bike-photo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .c-c-bike-photo-slider-main {
    max-width: 100%;
  }
  .c-c-bike-photo-slider-nav {
    width: 90%;
  }
  .c-c-bike-photo-slider-nav img {
    width: 60px;
  }
  .content-img-bike {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }
  .c-c-bike-photo-slider {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .c-c-bike-photo-explanation {
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .c-c-bike-photo-explanation h2 {
    font-size: 20px;
    margin-top:10px;
    text-align: center;
  }
  .c-c-bike-photo-explanation p {
    font-size: 16px;
    word-break: break-word;
    text-align: center;
  }
.simmba-footer-logobox ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.simmba-footer-logobox img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/*表示幅が短すぎるメディア対策。Galaxy Z fold5の幅参照。ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* 中サイズモバイル画面での文字見切れ対策 */
@media only screen and (max-width:500px) {
  .fix-nav a {
    padding: 0.3em 0.15em;
    font-size: clamp(9px, 2.8vw, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fix-nav ul li {
    min-width: 0;
    flex-shrink: 1;
  }
}

@media only screen and (max-width:344px) {
  body {
    margin: 0 auto;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  footer a{text-align: center;
  }
  .t-logo {
    position: relative; /* absoluteから変更 */
    width: 400px;
    margin: 0 auto; /* 中央配置 */
    margin-top: calc(15vh + 15px); /* fix-navの高さ分 + 余白 */
    padding: 15px 0; /* 上下の余白 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .t-logo img {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 0 auto; /* 上マージンを削除 */
    display: block;
  }
  .fix-nav a {
    padding: 0.2em 0.1em;
    font-size: clamp(8px, 3vw, 10px);
    line-height: 1.1;
    min-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fix-nav ul li {
    min-width: 0;
    flex-shrink: 1;
  }
  /* 極小画面でのRESTORATION画像レイアウト */
  .c-c-restoration-process .content-img-bike {
    flex-direction: column;
  }
  .c-c-restoration-process .content-img-bike img {
    flex: 0 0 90%;
    max-width: 90%;
    margin: 2% auto;
  }
  /* 極小画面でのスライダー調整 */
  .c-c-bike-photo-slider-nav {
    width: 95%;
  }
  .c-c-bike-photo-slider-nav img {
    width: 50px;
  }
  .simmba-footer-logobox {
    width: 100%;
    height: auto;
    margin:0 auto;
    padding: 10px 0;
  }
  .simmba-footer-logobox ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap; /* はみ出し防止 */
    box-sizing: border-box;
  }
  .simmba-footer-logobox img {
    width: 100px; /* 画像サイズを固定値にするなど調整 */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* YouTubeレスポンシブ対応 - 動画が見切れないように */
.youtube-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.youtube-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 親要素が動画を確実に包含するように */
.c-c-bike-photo-explanation {
  width: 100%;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .c-c-bike-photo-explanation {
    padding: 0 5px;
  }
  
  .youtube-responsive {
    margin: 10px 0;
  }
}
}
/*endーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/