@charset "UTF-8";


/*表示設定/*




/* 769px以上のときｐｃ */
@media screen and (min-width: 1301px) and (max-width: 2500px){


  .footer-mobile{
    display: none; }
.header-mobile{
  display: none; }
  .content-mobile{
    display: none;
  }
  .mobil-php{
    display: none;
  }
  .hero-mobile{
display: none;
}

}

/* 768px以下のとき－スマホ */
@media screen and (max-width: 1300px) {
  .footer-PC {
    display: none;
  }
  .header-pc{
    display: none; }
    .content-pc{
      display: none;
    }
.pc-php{
  display: none;
}

.hero-pc{
display: none;




}
}



/*タブレット*/
/* 768px以下のとき－タブレット */
@media screen and (max-width: 400px){
.tablet-nav{
  display: none;



  
}  


.navbtn-2{
  display: none;
}


}






/* 769px以上のときｐｃ タブレット*/
@media screen and (min-width: 400px) and (max-width: 1300px){

  .mobile-nav {
    display: none;
  }

  .navbtn{
  display: none;
}




}


/*タブレットラインナップ*/

/* 550px以下のとき－タブレット */
@media screen and (max-width: 550px){

.LINEUP-tav{
  display: none;
}

}

/* 550ｐｘx以上のときｐｃ タブレット*/
@media screen and (min-width: 550px) and (max-width: 1300px){



.LINEUP-mobile{
  display: none;
}



}





/**/


/* -------------------全体のレイアウト設定 ------------------*/


/*フォント設定*/
img{
  margin: 0;
  padding: 0;
}

image{
  margin: 0;
  padding: 0;
}
/*線細く*/
.lighter{
  font-weight: 300;
}

/*線細く*/
.lighter2{
  font-weight: 100;
}

/*線太く*/
.bold{
   font-weight: 650;
}
.nomal{
font-weight: normal;
}
p{
  margin: 0;
}
/*デフォルト14px*/
.pc-body{
  font-size: 14px;
  margin: 0;
   font-family: "Noto Sans JP", sans-serif;
}
/*pc-14px*/
.pctext-14{
  font-size:14px;
  margin: 0;
   font-family: "Noto Sans JP", sans-serif; 
}

/*.pctext-16*/
.pctext-15{
  font-size: 15px;
  margin: 0;
}

/*pc-18*/
.pctext-16{
  font-size: 18px;
  margin: 0;
   font-family: "Noto Sans JP", sans-serif; 
}

/*pc-24px~16px*/
.pctext-24{
  font-size:24px;
  margin: 0;
}

/*pc-40px~25px*/
.pctext-40{
    font-size:40px;
    margin: 0;
}

.pctext-50{
  font-size: 50px;
  margin: 0;
}
.pctext-36{
  font-size: 36px;
  margin: 0;
}

.pctext-100{
  font-size: 100px;
  width: fit-content;
  height: fit-content;
  padding: 0;
  margin: 0;
}
.orenzi{
  color: #EC6C00;
}
.white{
  color: #ffffff;
}

.black{
  color: #ffffff;
}

.blue{
  color: #006EBA;
}





.title-text h2{
color: #004B9E;
margin: 3%;
}

.title-text{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10%;
}


.title-text-m h2{
color: #004B9E;
}

.title-text-m{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 10%;
  padding-bottom: 8%;
}

/*スマホフォント*/


/*50~80*/
.mobil-50{
  font-size:clamp(3.125rem, 2.365rem + 3.24vw, 5rem);
  margin: 0;}

.mobil-20{
  font-size: 20px;
  margin: 0;
}


.mobil-14{
  font-size: 14px;
  margin: 0;
}

.mobil-16{
font-size: 16px;
margin: 0;
}
.mobil-12{
  font-size: 12px;
  margin: 0;
}

.mobil-18{
  font-size: 18px;
  margin: 0;
}

h2{
  margin: 0;
}




  /*横幅と左右の余白*/
  /*スマホ幅*/
.w-container{
  width: min(93.6%, 1330px);
    margin: auto;
  }

  /*スマホコンテンツ幅さらに内側　ｗ330*/
  .mw-container{  width: min(88.5%, 1330px);
    margin: auto;

  }



  .t-container{
  width: min(93.6%, 769px);
    margin: auto;
  }
  
/*pcコンテンツ幅*/
 .p-container{
    width: min(97%,1440px);
    margin: auto;
  }
/*pcコンテンツ幅さらに内側　ｗ800*/
  .pw-content-container{
    width: min(56%,1440px);
    margin: auto;
  }

/*モニター幅*/
   .p-container-2{
   width: min(100%, 1440px);
  margin-right: auto;
margin-left: auto;
  }

  /*コンテンツ幅*/
  .p-content-container{
     width: min(68%, 980px);
    margin: auto;
  }


  /*ヘッダー*/

body{
  margin: 0;
}

/*---------ヘッダー------------------------------*/
/*モバイルヘッダー*/
/*モバイルヘッダー*/
.header-mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 45px;
  width: 100%;
  background: white;
  z-index: 1000;
}

.header-mobile-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}






/*  ハンバーガー*/

/*ボタン*/
.navbtn{
  cursor: pointer;
  background: transparent;
  border: none;
    z-index: 1100;

}

.mobile-nav{
  position: fixed;
  inset: 45px -100% 0 100%;
  z-index: 100;
  background-color: #262626;
  transition: transform 0.3s;
  text-align: center;
  margin: auto;
  font-size: 10px;
 
}

.mobile-nav ul{
  list-style-type: none;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin: auto;
  padding: 0;
}


.mobile-nav ul li a{
  color: #ffffff;
  text-decoration-line: none;
}
.open .mobile-nav{
  transform: translate(-100%, 0);
}

.open body{
  position: fixed;
  overflow: hidden;
}

.open .nav-open{
  display: none;
}


.navbtn{
  z-index: 110;
  
}

.nav-close{
display: none;
}

.open .nav-close{
  display: block;
}



.mobile-nav li {
  height: 93px;
  display: flex;
  align-items: center; /* ← 縦方向中央揃え */
  justify-content: start; /* ← 横方向中央揃え（必要なら） */
}

.mobile-nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; ← これを削除 or */
  align-items: stretch;  /* ← これに変更 */
  color: #ffffff;
  margin: auto;
  padding: 0;
}

.mobile-nav details summary {
  border-top: 1px solid #ffffff;
  width: 100%;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
}


.mobile-nav ul > li:not(:first-of-type) {
  border-top: 1px solid #ffffff;
  width: 100%; /* 横幅いっぱいに */
}

.mobile-nav .menu-details ul li {
  border-top: none;
  height: fit-content;
  padding: 10px;
}

details .mobil-14{
  padding-left: 10px;
}

.mobile-nav .menu-details ul li{
 padding-bottom: 31px;}

/*資料ダウンロード*/
.mobile-nav .mobil-20:last-of-type a::after {
   content: "";
  display: inline-block;
  background-image: url("img/download-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 1.2em;  /* 同じく高さ */
  vertical-align: middle;
  margin-left: 0.5em;
}

/*アイコン*/





.heder-icon {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap; /* 常に横並び */
  padding: 10px;
}

/* ボタン共通スタイル */
.btn-icon {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 220 / 52; /* アスペクト比固定 */
  width: clamp(80px, 15vw, 220px); /* 最小80px〜最大220pxの可変幅 */
  transition: background-image 0.3s ease;
}

/* お見積りボタン */
.mitumori-btn {
  background-image: url('img/mitumori-btn.svg');
}
.mitumori-btn:hover {
  background-image: url('img/mitumori-btn-hover.svg');
}

/* お問い合わせボタン */
.contact-btn {
  background-image: url('img/contact-btn.svg');
}
.contact-btn:hover {
  background-image: url('img/contact-btn-hover.svg');
}




    /*アコーディオン*/
    



.toggle-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.submenu{
  color: #f6f6f6;
  list-style-type:none ;
}

/* Chrome / Edge / Safari 対応 */
summary::-webkit-details-marker {
  display: none;
}

/* Firefox 対応 */
summary {
  list-style: none;      /* Firefox の marker を消す */
}



/*スマホここまで*/







  /*PC*/




   .heder {
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); /* 40%不透明の黒 */
  display: flex;
  justify-content: flex-start;
  position: fixed; /* ← 上部に固定 */
  top: -10px;
  left: 0;
  z-index: 1000;

}


  .tel-icon:before {
   content: "";
  display: inline-block;
  background-image: url("img/tel.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.3em;   /* フォントサイズに比例する幅 */
  height: 1em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.2em;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tel-icon{
  margin: 0;
  width: fit-content;
  padding: 0;
}
.heder-tel{
  display: flex;
  color: #ffffff;
  gap: 15px;
  align-items: flex-end;
  margin: 0;
  width: fit-content;

 

  
}
.heder-tel>span{
  margin: auto;
  
}

.heder-menu{
  list-style-type: none;
  color: #ffffff;
  display: flex;
  gap: 2em;
  width: fit-content;
  white-space: nowrap;
  padding: 0;
  

}



.heder-menu a{
  color: #ffffff;
}

.heder-menu a:hover{
  color: #004B9E;
    transition: color 0.3s ease;
}
.heder-menu2::after {
  content: "";
  display: inline-block;
  background-image: url("img/yazirusi.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.5em;  /* 同じく高さ */
  vertical-align: middle;
  margin-left: 0.5em;
}

.heder-menu4::before{
  content: "";
  display: inline-block;
  background-image: url("img/download-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.9em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.5em;
}



  .heder-menu-auter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* ← これが「右揃え」に効く */
  margin-left: auto;       /* ← ヘッダー全体で右に押し出す */
  margin: 0;
}


.heder-menu2:hover{
  color: #004B9E;
    transition: color 0.3s ease;
}


.heder2{
 
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 30px;
    padding: 0;

  gap: 10px;
}






.heder-icon img {
  width: 100%;
  padding: 0;
}


.heder-icon {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}



.header-migi{
  display: flex;
  justify-content: flex-end;
  gap: 1.5em;
  padding: 0;
}


a{
  text-decoration: none;
}

.heder-img{
  width: 100%;
  max-width: 200px;
  min-width: 120px;

}

.heder-img img{
  width: 100%;
  
}



/**/



/**/

/* テキストの色変化 */
.heder-menu4:hover a {
  color: #004B9E;
  transition: color 0.3s ease;
}

/* ホバー時のアイコン画像を変更 */
.heder-menu4:hover::before {
  background-image: url("img/download-icon3.png");
}



/* 資料ダウンロード用アイコン追加 */

.heder-menu2:hover::after {

  background-image: url("img/yazirusi3.png");

}

/* テキストの色変化 */
.heder-menu2:hover  {
  color: #004B9E;
  transition: color 0.3s ease;
}



/*MAXAM*/
   .heder-maxam-c{
  width: 100%;
  height: 140px;
background-color: #262626;
  display: flex;
  justify-content: flex-start;
  position: fixed; /* ← 上部に固定 */
  top: -10px;
  left: 0;
  z-index: 1000;

}


.heder-maxam{
width: 100%;
height: 60px;
background-color: #000000;
position: absolute;
top: 104px;
display: flex;
align-items: center;

}

.MAXAM-log{
  width: 200px;
  height:31px;
}
.maxam-migi{
  display: flex;
  align-items: center;
}

.maxam-migi p{
color: #ffffff;
border-left: 1px #ffffff solid;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
padding-right: 40px;
}

.MAXAM-flex{

  display: flex;
  justify-content: space-between;
  align-items: center;
}



/*  サブメニュー*/
.submenu-text1{
  color: #004B9E;
  font-size: clamp(0.625rem, -0.469rem + 2.19vw, 1.5rem);
  margin: 0;
  font-weight: bold;
  
}
.submenu-text2{
  color: black;
}

.submenu-text {
  border-right: #c0c0c0 2px solid;
  width: fit-content;
  padding: 20px;
  height: auto;  /* ←高さをコンテンツ（画像）に合わせる */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* テキストも中央に */
  
}




.submenu-auter{
display: flex;
gap: 20px;
padding: 1.2em;
background-color: #ffffff;
align-items: center;
}

.submenu {
  display: none;
  position: absolute;
  top: 300%; /* 商品ラインナップの下に表示 */
 
   right: -400px;  /* メニュー右に合わせる（必要に応じて left: 0; に） */
  background: transparent;
  z-index: 1000;
   min-width: 53.6vw;
    height: 6.67vw;
 }

ul.submenu.show {
  display: block;
  padding: 0;
  width: fit-content;
}

ul.submenu li {
  margin: 5px 0;
  list-style-type: none;
    margin: 0;
  padding: 0;height: 6.67vw;
 
}

ul.submenu li a {
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0;
  width: 100%;
}




.submenu img {
  width: auto;
height: 6.67vw;
  object-fit: contain;
  align-items: center;
}

.submenu-img{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
 
}
   .has-submenu.open .submenu {
      display: flex; /* .open クラスで表示 */
    }

/* オーバーレイ構造のベース */
/* 親要素に合わせて文字を重ねる */
.img-overlay {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* 画像 */
.img-overlay img {
  height: 6.67vw;
  width: auto;
  display: block;
  object-fit: contain;
}

/* 重ねるテキスト */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  line-height: 1.2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.overlay-text p{
  color: white;
}



/* フォントサイズを画面幅に連動させる */
.text-large {
  font-size: calc(1.25vw); /* ≒18px @1440px */
  font-weight: bold;
  margin-bottom: 0.2em;  /* RIBとリブタイヤの間：文字サイズに応じて可変。18px時 ≒ 9px */
}

.text-small {
  margin-top:0.2em;
  font-size: calc(0.83vw); /* ≒12px @1440px */
}
/* 横並び */
.submenu-img {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}


.img-overlay:hover img {
  opacity: 0.5;
  transition: background-image 0.3s ease;
}

/*----------ヘッダ-ここまで------------------*/










/*フッター*/
.footer-PC{
  background-color: #262626;
  width:100% ;
  height: 414px;
}

.footer-banner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: auto;
  gap: 10px; /* 中央の隙間だけ発生させる */
  box-sizing: border-box;
}

.footer-banner img{

  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
 
}


img[src="img/tel-banner.png"]:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}

img[src="img/contact-banner.png"]:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}



.footer-logo {
  width: 312px;
  height: auto;
  margin: auto;
  padding-bottom: 30px;
}

.footer-text{
  color: #f6f6f6;
  display: flex;
  justify-content: flex-end;
}

.Copyright{
  color: #f6f6f6;
  display: flex;
  justify-content: center;
  border-top: #ffffff solid 1px;
  padding: 10px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
   font-weight: normal;

}


.footer-PC-inner{
margin: auto;
}

.footer-text{
  padding-top: 15px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
   font-weight: normal;
}

.footer-text a{
  color: #ffffff;
}


.footer-text a:hover{
  color: #004B9E;
  transition: background-image 0.3s ease;
}


.footer-PC-img{
  padding-top: 60px;
  padding-bottom: 60px;
}






/*------------スマホフッター--------------*/

/*フッター*/
.footer-mobile{
   background-color: #262626;
  width:100% ;
  height: auto;
}
.footer-banner-m{
 
  width: 100%;}

  .footer-banner-m img{
 
  width: 100%;}





.footer-logo-m img{
  width: 50%;
  height: auto;
  padding: 40px;
}

.footer-text-m{
  color: #ffffff;
  display: flex;
  justify-content: flex-end;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.footer-text-m a{
  color: #ffffff;
}

.footer-banner-m img{
  padding-bottom: 16px;
}


.Copyright{
  color: #f6f6f6;
  display: flex;
  justify-content: center;
  border-top: #ffffff solid 1px;
  padding: 10px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
   font-weight: normal;

}


.footer-m-inner{
margin: auto;
}

.footer-text-m{
  padding-top: 15px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
   font-weight: normal;
}


.footer-m-img{
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}



.hambager-img-1{
  width: 100%;
  margin-bottom: 17px;
}
.hambager-img img {
  width: 100%;              /* aタグ内で画像を幅いっぱいに */
  height: auto;
  display: block;
}

.hambager-img {
  display: flex;
  width: 100%;              /* 横幅いっぱいに広げる */
  gap: 10px;                /* ボタン間のスペース（任意） */
}

.hambager-img a {
  flex: 1;                  /* 各画像が均等な幅になる */
}


/*-------------*/







/*---------------コンテンツ----------------------------------*/
/*コンテンツｐｃ*/
.content-pc{
background-color: #f6f6f6;
}

.content-mobile{
background-color: #f6f6f6;
}

/*-------------------コンテンツ終了----------------------------------------*/








/*タブレット*/
.header-mobile {
  position: fixed;
  top: 0;
  left: 0;
  height: 45px;
  width: 100%;
  background: white;
  z-index: 1000;
}

.header-mobile-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}



/*  ハンバーガー*/

/*ボタン*/
.navbtn-2{
  cursor: pointer;
  background: transparent;
  border: none;
    z-index: 1100;

}

.tablet-nav{
  position: fixed;
  inset: 0 -100% 0 100%;
  z-index: 100;
  background-color: #262626;
  transition: transform 0.3s;
  text-align: center;
  margin: auto;
  font-size: 10px;
 
}

.tablet-nav ul{
  list-style-type: none;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin: auto;
  padding: 0;
}


.tablet-nav ul li a{
  color: #ffffff;
  text-decoration-line: none;
}
.open .tablet-nav{
  transform: translate(-100%, 0);
}

.open body{
  position: fixed;
  overflow: hidden;
}

.open .nav-open{
  display: none;
}


.navbtn{
  z-index: 110;
  
}

.nav-close{
display: none;
}

.open .nav-close{
  display: block;
}



.tablet-nav li {
  height: 93px;
  display: flex;
  align-items: center; /* ← 縦方向中央揃え */
  justify-content: start; /* ← 横方向中央揃え（必要なら） */
}

.tablet-nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; ← これを削除 or */
  align-items: stretch;  /* ← これに変更 */
  color: #ffffff;
  margin: auto;
  padding: 0;
}

.tablet-nav details summary {
  border-top: 1px solid #ffffff;
  width: 100%;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
}


.tablet-nav ul > li:not(:first-of-type) {
  border-top: 1px solid #ffffff;
  width: 100%; /* 横幅いっぱいに */
}

.tablet-nav .menu-details-tblet ul li {
  border-top: none;
  height: fit-content;
  width: fit-content;
  margin: 0;

}

details .mobil-14{
  padding-left: 10px;
}


/*資料ダウンロード*/
.tablet-nav .mobil-20:last-of-type a::after {
   content: "";
  display: inline-block;
  background-image: url("img/download-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 1.2em;  /* 同じく高さ */
  vertical-align: middle;
  margin-left: 0.5em;
}


.logo-tablet-nav{
  padding-top: 15px;
}

/*アイコン*/





.heder-icon {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap; /* 常に横並び */
  padding: 0;}

/* ボタン共通スタイル */
.btn-icon {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 220 / 52; /* アスペクト比固定 */
  width: clamp(80px, 15vw, 220px); /* 最小80px〜最大220pxの可変幅 */
  transition: background-image 0.3s ease;
}

/* お見積りボタン */
.mitumori-btn {
  background-image: url('img/mitumori-btn.svg');
}
.mitumori-btn:hover {
  background-image: url('img/mitumori-btn-hover.svg');
}

/* お問い合わせボタン */
.contact-btn {
  background-image: url('img/contact-btn.svg');
}
.contact-btn:hover {
  background-image: url('img/contact-btn-hover.svg');
}




    /*アコーディオン*/
    



.toggle-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.submenu{
  color: #f6f6f6;
  list-style-type:none ;
}

/* Chrome / Edge / Safari 対応 */
summary::-webkit-details-marker {
  display: none;
}

/* Firefox 対応 */
summary {
  list-style: none;      /* Firefox の marker を消す */
}





/*画像*/

.submenu img {
  width: auto;
height: 6.67vw;
  object-fit: contain;
  align-items: center;
}

.submenu-img{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
 
}
   .has-submenu.open .submenu {
      display: flex; /* .open クラスで表示 */
    }

/* オーバーレイ構造のベース */
/* 親要素に合わせて文字を重ねる */
.img-overlay-tablet {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* 画像 */
.img-overlay-tablet img {
  height: 6.67vw;
  width: auto;
  display: block;
  object-fit: contain;
}

/* 重ねるテキスト */
.overlay-text-tablet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  line-height: 1.2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* フォントサイズを画面幅に連動させる */
.text-large {
  font-size: calc(1.25vw); /* ≒18px @1440px */
  font-weight: bold;
  margin-bottom: 0.2em;  /* RIBとリブタイヤの間：文字サイズに応じて可変。18px時 ≒ 9px */
}

.text-small {
  margin-top:0.2em;
  font-size: calc(0.83vw); /* ≒12px @1440px */
}
/* 横並び */
.submenu-img {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}



/*タブレット*/
/*画像*/
.tblet-details-img-1 {
  display: flex;
  width: 100%;
  gap: 16px;
  padding: 0;
  margin: 0;

}

.tblet-details-img-1 li {
margin: 0;
padding: 0;
width: fit-content;
}

.tblet-details-img-1 img {
width: 100%;
}

.tblet-details-img-2 {
display: flex;
  width: 100%;
  gap: 16px;
  padding: 0;
  margin: 0;
justify-content: space-between;
}

.tblet-details-img-2 li {
margin: 0;
padding: 0;
width: fit-content;
}


.tblet-details-img-2 img {
width: 100%;
}






.tblet-details-img{
   display: flex;
  flex-direction: column;
  gap: 16px;
  width: fit-content;

}



.tblet-details-img li{
  padding: 0;
  margin: 0;
}

.tablet-nav li{
  padding: 0;
  margin: 0;
}


.tblet-details-img-1-1{
  padding: 0;
  margin: 0;
}

.tblet-details-img-3 img{
  padding-bottom: 41px;
}




/*タブレット*/


/*ヘッダ-2*/


/*追記*/
  .tel-icon-blue:before {
      content: "";
  display: inline-block;
  background-image: url("img/tel2.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.3em;   /* フォントサイズに比例する幅 */
  height: 1em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.2em;
  margin-bottom: 0;
  padding-bottom: 0;

}
/*追記*/
.tel-icon-blue{
  margin: 0;
  width: fit-content;
  padding: 0;
}

/*追記*/
.heder-tel-blue{
  display: flex;
  color: #004B9E;
  gap: 15px;
  align-items: flex-end;
  margin: 0;
  width: fit-content;

 

  
}
/*追記*/
.heder-tel-blue>span{
  margin: auto;
  
}
/*追記*/
.heder-menu-blue{
  list-style-type: none;
  color:#000000;
  display: flex;
  gap: 35px;
  width: fit-content;
  white-space: nowrap;
  padding: 0;
  

}


/*追記*/
.heder-menu-blue a{
  color: #000000;
}
/*追記*/
.heder-menu-blue a:hover{
  color: #004B9E;
    transition: color 0.3s ease;
}
/*追記*/
.heder-menu2-blue::after {
  content: "";
  display: inline-block;
  background-image: url("img/yazirusi2.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.5em;  /* 同じく高さ */
  vertical-align: middle;
  margin-left: 0.5em;
}




.heder-menu2-blue:hover{
  color: #004B9E;
    transition: color 0.3s ease;
}
/*t追記2*/
.heder-menu4-blue::before{
  content: "";
  display: inline-block;
  background-image: url("img/download-icon2.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.9em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.5em;
}

/* お見積りボタン */
.mitumori-btn-blue {
  background-image: url('img/mitumori-btn-hover.svg');
}
.mitumori-btn-blue:hover {
  background-image: url('img/mitumori-btn.svg');
}

/* お問い合わせボタン */
.contact-btn-blue {
  background-image: url('img/contact-btn-hover.svg');
}
.contact-btn-blue:hover {
  background-image: url('img/contact-btn.svg');
}

.logo-tablet-nav{
  margin-bottom: 10px;
}


/*ヒーロー*/

.hero-pc {
  position: relative;
 padding: 0;
 margin: 0;
}

.content-pc{

  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #f6f6f6;
  
}

.news{
  position: absolute;
  background-color: #ffffff;
  bottom: 0;
  right: 0;
  padding: 1.2em
}

.news-top{
  color: #004B9E;
  padding: 1em;
}

.news-top::after{
   content: "|";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 1.9em;
  vertical-align: middle;
  color: #C9C9C9;
  padding-left: 1em;
}

.news-detail{
  padding: 1.2em
}


/*コンテンツ*/

/*コンテンツpc*/

/*ラインナップ*/


.pc-picture {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 0;
}

.picture-1, .picture-2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5%;
}

.picture-1 img,
.picture-2 img {
  width: 100%;
  height: auto;
  max-width: 316px; /* 画像の実サイズに合わせて調整してください */
  min-width: 150px;
  object-fit: contain;
}






.picture-2 img:hover {
  opacity: 0.5; /* 例：半透明に */
   transition: color 0.3s ease;
}

.picture-1 img:hover {
  opacity: 0.5; /* 例：半透明に */
   transition: color 0.3s ease;
}



/*ページネーション*/


.pagination{
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
  margin: 0;
}

/*-------ラインナップリンク-------*/
.LINEUP-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top:10% ;
  padding-bottom:10% ;
}


.LINEUP-link img {
  width: 100%;
  height: auto;
  max-width: 330px; /* 画像の実サイズに合わせて調整してください */
  min-width: 100px;
  object-fit: contain;
}

.LINEUP-link img:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


.LINEUP-link-MAXAM img{
  text-align: center;
  width: 90%;
  margin: auto;
}
.LINEUP-link-MAXAM{
  text-align: center;
  margin: auto;
  margin-bottom: 15%;
}

.LINEUP-link-MAXAM:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


/*商品ラインナップここまで*/

/*SAILUNについて*/
.about-sailun{
  background-image: url(img/ABOUTSAILUN_ph4.png);
  height: 3600px;
width: 100%;
min-width: 1300px;
max-width: 2500px;
background-size:130%;
background-position: top;
}

.about-sailun-title{
  text-align: center;
  color: #ffffff;
  padding-top: 10%;
  padding-bottom: 5%;
}

/*トピックテキスト*/



.box {
  width: 100%;
  padding-top: 0.1;
  padding-bottom: 0.1%;
}

.Topic-1-text {
color: #ffffff;
  /* はみ出し防止オプション（任意） */
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.8em;
}
/*トピック1*/
.Topic-1{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;

}

/*トピック2*/
.Topic-2-img{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.Topic-2-img img{
  width: 100%;
  height: auto;
  max-width: 316px; /* 画像の実サイズに合わせて調整してください */
  min-width: 100px;
  object-fit: contain;
}

.Topic-2{
  display: flex;
  flex-direction: column;
  margin-top: 10%;
  margin-bottom: 5%;

}














/*------------------SPコンテンツ----------------*/
/*ヒーローモバイル*/
.news-mobile{
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

/*ヒーローモバイルここまで*/



/*ラインナップ*/


.LINEUP-img1 ,.LINEUP-img2 ,.LINEUP-img3{
  display: flex;
  justify-content: space-between;
  gap: 16px;
}



.LINEUP-img1 img ,.LINEUP-img2 img ,.LINEUP-img3 img {
   
   max-width: 100%;
   min-width: 167px;
   
 
}




.LINEUP-img{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}


/*ページネーションモバイル*/

.pagination-m{
   display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
  margin: 0;
  margin-top: 5%;
  margin-bottom: 20%;
  /**/

  /**/
}

/*モバイルバナートップページ*/
.mobil-baner-top{
margin-bottom: 20%;
}

.mobil-baner-top img{


   width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 1%;
  margin-bottom: 1%;
}
/*モバイルバナートップページここまで*/


/*SAILUNについて*/

.about-sailun-m {
background-image: url(img/ABOUTSAILUN_ph3.jpg);
width: 100%;
height:auto;
min-width: 375px;
max-width: 1300px;
background-size:100%;

}

.about-sailun-title-m{
  color: #ffffff;
  text-align: center;
  padding-top: 30%;
  padding-bottom: 15%;
}

.Topic-1-m h2{
  color: #ffffff;
  text-align: center;
  padding-top: 15%;
  padding-bottom: 15%;
}

.Topic-2-m-img{
  display: flex;
}

.Topic-2-m-img img{
  width: 100%;
  min-width: 167px;
}




.Topic-2-m img{
  width: 100%;
}



/*トピック3~5*/
.Topic-3-m, .Topic-4-m, .Topic-5-m{
  padding-top: 15%;
}

.Topic-3-m img, .Topic-4-m img, .Topic-5-m img{
  width: 100%;
}

.Topic-3-m h2 ,.Topic-3-m span,.Topic-4-m h2 ,.Topic-4-m span,.Topic-5-m h2 ,.Topic-5-m span{
 color: #ffffff;
 padding-top: 5%;
 padding-bottom: 5%;
}
.Topic-5-m{
  padding-bottom: 30%;
}


/*トピック3~5ここまで*/


/*SAILUNについてここまで*/



/*コンタクトバナー*/

.contact-baner-top img {
width: 800px;
height: 150px;
margin: 0 auto;
}


.contact-banner-top img:hover {
  opacity: 0.8; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


.contact-banner-top{
  position: relative;
  transform: translateY(-50%); 
  margin: 0 auto;
width: fit-content;
}




/*divをクリッピングし背景色に白を入れる
これで透けずにホバーできる
後で追記
.contact-banner-top{
background-color: #ffffff;
clip-path
}*/


/*お知らせ*/

.news-pc-2{
padding-bottom: 30%;
}
/*タイトル*/
.NEWS-title-m h2{
color: #004B9E;
}

.NEWS-title-m{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8%;
}



/*時刻*/

.news-article-p{

  border-bottom: 1px solid #707070;
  display: flex;

}

.news-article-p span:hover{
opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


.news-article-p span{
  padding: 2em;
  
}

.category-p{
  color: #004B9E;
}


































/*コンタクトバナーモバイルトップ*/
.contact-banner-m-top img{
width: 100%;
}

.contact-banner-m-top{
  position: relative;
  transform: translateY(-50%); 
}



/*コンタクトバナーモバイルトップ-ここまで*/


/*お知らせ*/






/*------------------------------------会社概要-----------------------------*/
.company-m{
  padding-top: 15%;
  padding-bottom: 30%;
}

.company-m-1{
  display: flex;
  flex-direction: column;
}
.company-m-1-text1{
  padding-bottom: 1em;
  padding-top: 1em;
}
.company-m-1-text2{
  padding-bottom: 1em;
}

.map iframe{
  
  padding-top: 8%;
  padding-bottom: 8%;
 width: 100%;
}




.company-m-1:nth-of-type(2) {
  border-bottom: 1px solid #707070;
}
.company-m-1:nth-of-type(3) {
  border-bottom: 1px solid #707070;
}
.company-m-1:nth-of-type(4) {
  border-bottom: 1px solid #707070;
}

.company-contact {
  width: 100%;
}


/*ヘッダ-ブルー*/



   .heder-b {
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); /* 40%不透明の黒 */
  display: flex;
  justify-content: flex-start;
  position: fixed; /* ← 上部に固定 */
  top: -10px;
  left: 0;
  z-index: 1000;

}


  .tel-icon-b:before {
   content: "";
  display: inline-block;
  background-image: url("img/tel2.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.3em;   /* フォントサイズに比例する幅 */
  height: 1em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.2em;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tel-icon-b{
  margin: 0;
  width: fit-content;
  padding: 0;
}
.heder-tel-b{
  display: flex;
  color: #004B9E;
  gap: 15px;
  align-items: flex-end;
  margin: 0;
  width: fit-content;

 

  
}
.heder-tel-b>span{
  margin: auto;
  
}

.heder-menu-b{
  list-style-type: none;
  color: #000000;
  display: flex;
  gap: 2em;
  width: fit-content;
  white-space: nowrap;
  padding: 0;
  

}



.heder-menu-b a{
  color: #000000;
}

.heder-menu-b a:hover{
  color:#004B9E;
}
.heder-menu2-b::after {
  content: "";
  display: inline-block;
  background-image: url("img/yazirusi2.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.5em;  /* 同じく高さ */
  vertical-align: middle;
  margin-left: 0.5em;
}

.heder-menu4-b::before{
  content: "";
  display: inline-block;
  background-image: url("img/download-icon2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.9em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.5em;
}

.heder-menu4-b:hover::before{
  content: "";
  display: inline-block;
  background-image: url("img/download-icon3.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 0.9em;  /* 同じく高さ */
  vertical-align: middle;
  margin-right: 0.5em;
    color: #004B9E;
}








/**/
/* 資料ダウンロード用アイコン追加 */
.heder-menu4-b::before {
  content: "";
  display: inline-block;
  background-image: url("img/download-icon2.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height: 0.9em;
  vertical-align: middle;
  margin-right: 0.5em;
  transition: background-image 0.3s ease;
}

/* テキストの色変化 */
.heder-menu4-b:hover a {
  color: #004B9E;
  transition: color 0.3s ease;
}

/* ホバー時のアイコン画像を変更 */
.heder-menu4-b:hover::before {
  background-image: url("img/download-icon3.png");
}



/* 資料ダウンロード用アイコン追加 */

.heder-menu2-b:hover::after {

  background-image: url("img/yazirusi3.png");

}

/* テキストの色変化 */
.heder-menu2-b:hover  {
  color: #004B9E;
  transition: color 0.3s ease;
}


















/*アイコン*/

/* お見積りボタン-b */
.mitumori-btn-b {
  background-image: url('img/mitumori-btn-hover.svg');
}
.mitumori-btn-b:hover {
  background-image: url('img/mitumori-btn.svg');
}

/* お問い合わせボタン-b */
.contact-btn-b {
  background-image: url('img/contact-btn-hover.svg');
}
.contact-btn-b:hover {
  background-image: url('img/contact-btn.svg');
}

/*pc会社概要*/


.company-pp{
  display: flex;


}

.company-pp .text1{
width: 185px;
margin-top: auto;
margin-bottom: auto;
}

.company-pp .text2{
padding-bottom: 1em;
padding-top: 1em;
}


.company-pp:nth-of-type(2) {
  border-bottom: 1px solid #707070;
}
.company-pp:nth-of-type(3) {
  border-bottom: 1px solid #707070;
}
.company-pp:nth-of-type(4) {
  border-bottom: 1px solid #707070;
}

/*プライバシーポリシー*/
.Privacy-policy-font{
  color: #004B9E;
}
.Privacy-policy-text{
  padding-bottom: 50px;

}

.Privacy-policy-tm

{  width: min(90%, 1300px);
    margin: auto;
}

.Privacy-policy-tm .bold{
padding-bottom: 1em;
}



.company-contact:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


/*カタログ*/

.catalog-pc-img{
  width: 134px;
  height:190px;
}

.catalog-box2{
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}




.catalog-box2 img:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}



.catalog-box{
display: flex;
gap: 50px;
justify-content: center;
}




/*カタログモバイル*/
.catalog-dl-btn{
 width: 266px;
 height: 52px;
 margin: 0;
}

.catalog-dl-btn img{
  width: 100%;
}

.catalog-dl-m-img{
  width: 134px;
  height: 190px;
  text-align: center;
}



.catalog-dl-m-box {
  display: flex;
  flex-direction: column;
  align-items: center;       /* 横方向の中央揃え */
  justify-content: center;   /* 縦方向（行内）中央揃え */
  text-align: center;        /* テキスト中央揃え */
  gap: 30px;
}


/*商品ラインナップ*/
.catalog-pc{
  background-color: #000000;
}

.Lineup-MIX{
 background-image: url(img/LINEUP_header_MIX.png);
  height: 800px;
width: 100%;
min-width: 1300px;
max-width: 2500px;
background-size:100%;

}

.Lineup-RIM{
 background-image: url(img/LINEUP_header_RIB.png);
  height: 800px;
width: 100%;
min-width: 1300px;
max-width: 2500px;
background-size:100%;

}

.Lineup-ONOF-ROAD{
 background-image: url(img/LINEUP_header_ONOFF-ROAD.png
 );
  height: 800px;
width: 100%;
min-width: 1300px;
max-width: 2500px;
background-size:100%;

}

.Lineup-STUDLESS{
 background-image: url(img/LINEUP_header_STUDLESS.png
 );
  height: 800px;
width: 100%;
min-width: 1300px;
max-width: 2500px;
background-size:100%;

}


.Lineup-img-p{
  width: 260px;
  height:auto;
}

.TIRE-kinds{
  display: flex;
}


.TIRE-number-img{
height: 22px;
width: auto;
padding-left: 1em;

}

.TIRE-text{
  width: 511px;
  height: 119px;
  line-height: 1.5;
}


.tire-catalog-box{
  display: flex;
  flex-direction: column;
}
.TIRE-number{
  width: fit-content;
}

.tire-catalog{
  display: flex;
  justify-content: center;
  gap: 10%;
  align-items: center;
  margin-bottom: 5%;
}

.japan{
  border: #ffffff solid 1px;
  padding-left: 0.5em;
  padding-right: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;

  margin-left: 1em;
  text-align: center;

}

.TIRE-kinds .text{
  margin-right: 0.2em;
}

.tire-catalog-p {
  background-color: #262626;
  color: #ffffff;
  width: 100%;
  max-width: 1400px;       /* 最大幅を設定して中央寄せを有効に */
  margin: 0 auto;          /* 左右中央に配置 */
  padding: 8% 3%;         /* 上下 5%、左右 10% のパディング */
  box-sizing: border-box;  /* パディング込みで幅を扱う */
 margin-bottom: 5%;
 border-radius: 15px;
}


.TIRE-table-p{

  border-collapse: collapse;
}





.Quotation-banner-p img{
  width: 800px;
  height: auto;

}

.Quotation-banner-p{
display: flex;
justify-content: center;
align-items: center;

}

.Quotation-banner-p:hover {
  opacity: 0.5; /* 例：半透明に */
  transition: background-image 0.3s ease;
}


.catalog-p-box{
  padding-bottom: 15%;
}





.TIRE-table-p .th-1{
border-right: 1px solid #ffffff;
border-top: 1px solid #000;
padding-top: 0.5em;
padding-bottom: 0.5em;
}


.TIRE-table-p .th-2{
border-right: 1px solid #000000;
border-bottom: 1px solid #000;
font-weight: 300;
}

.TIRE-table-p .th-2-2{
border-left: 1px solid #000000;
border-bottom: 1px solid #000;
font-weight: 300;
}


.TIRE-table-p .th-3{
border-right: 1px solid #000000;
font-weight: 300;
}

.TIRE-table-p .th-3-2{
border-left: 1px solid #000000;
font-weight: 300;
}



/*スマホカタログ*/

.Lineup-MIX-m{
width: 100%;
min-width: 375px;
min-height: 232px;
max-height: 917px;
max-width: 1440px;
background-size:100%;
margin-top: 45px;

}


.Lineup-img-m {
  width: clamp(130px, 13.89vw, 200px);
  height: auto;
}


.tire-catalog-m{
  padding-top: 8%;
  padding-bottom: 8%;
    background-color: #262626;
  color: #ffffff;
 
  max-width: 1400px;       /* 最大幅を設定して中央寄せを有効に */
  margin: 0 auto;          /* 左右中央に配置 */     /* 上下 5%、左右 10% のパディング */
  box-sizing: border-box;  /* パディング込みで幅を扱う */
 margin-bottom: 5%;
 border-radius: 15px
}

.japan-m{
  border: #ffffff solid 1px;
  padding-left: 0.2em;
  padding-right: 0.2em;
  margin-left: 0;
 margin-bottom: 0.2em;
 margin: 0;
 text-align: center;
}

.TIRE-kinds-m{
  display: flex;
  align-items: center;
margin: 0;
margin-top: 1em;
gap: 0.5em;
}


.TIRE-text-m{
  margin-top: 5%;
margin-bottom: 5%;
  line-height: 1.5;
}

.tire-catalog-m2{
  display: flex;
  justify-content: flex-start;
  gap: 5%;
  padding-left: 5%;

  align-items: center;
}

.table-wrap {
  overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}


.table-wrap table th {

  padding-left:2em ;
  padding-right: 2em;
}



.TIRE-table-p .th-1-1{
border-right: 1px solid #ffffff;
border-top: 1px solid #000;
padding-top: 0.5em;
padding-bottom: 0.5em;
color: #000000;
background-color: #ffffff
}

.tire-catalog-box-m{

  display: flex;
  flex-direction: column;
  align-content: space-between;

}

.table-title{
  border-left: solid 2px black;
  padding-left: 0.5em;
  margin-bottom: 1em;
  margin-top: 2em;
}



.graybody{
background-color: #262626
;
}

.black-body{
  background-color: #000000;
}

.TIRE-number2{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*商品ラインナップ終了*/


/*MAXAM*/


.Lineup-MAXAM{
 background-image: url(img/MAXAM_about_ph.jpg
 );


 

  margin: auto;
  display: flex;
  flex-direction: column;
align-items: center;


}

.Lineup-MAXAM2{
  margin-top: 164px;
  height: 436px;
  width: 100%;
  min-width: 1300px;
max-width: 2500px;
  object-fit:cover;



}

.MAXAM-log2{
  width: auto;
  height: 62px;
  padding-top: 15%;
}


.MAXAM-about-text{

   padding: 3em;
}

.MAXAM-about-text2{
  border-left: #004B9E solid 2px;
  padding-left: 1em;

}

.MAXAM-about-img{
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 0;
  padding-bottom: 8%;
}

.MAXAM-about-img img{
  height: 215px;
  width: auto;
  display: block;

}

.maxam-img-flex2{
display: flex;
flex-direction: column;
}

.maxam-img-flex{
 width: fit-content; /* 画像に合わせてサイズを決める */
 margin: auto;
}

.MAXAM-about-text2{
  margin: 0 0 1.5em 0;

}

/*MAMAPラインナップ*/
.maxam-tire{
  background-image: url(img/MAXAM_haikei_ph.jpg);

 padding-bottom: 15%;
}

/*ヘッダー*/
.maxam-heder-m {
  position: absolute;
  background-color: #000000;
  height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* 共通の子要素幅を1/3に */
.maxam-heder-m a {
  width: 33.3333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  font-weight: bold;
  box-sizing: border-box;
}

/* ロゴ画像を中央揃えに */
.maxam-m-baner-img {
  width: 103px;
  height: 16px;
}

/* 真ん中2つのリンクに縦線を表示 */
.maxam-heder-m a:nth-child(2),
.maxam-heder-m a:nth-child(3) {
  border-left: 1px solid #ffffff;
}


/*マクサムモバイル*/
.maxam-m-header{
  margin-top: 90px;
  width: 100%;
  height: auto;

}

.maxam-img-flex-m{
  display: flex;
  gap: 15px;
  justify-content: center;
  padding-top: 10%;
  padding-bottom: 15%;

}

.maxam-img-flex-m img{
  width: 30%;
  height: auto;
}



.maxam-m-logo img{

  text-align: center;


}

.maxam-m-logo{
  height: 34px;
  width: auto;
text-align: center;
display: block;
  margin: 0 auto;
  padding-top: 15%;
}

.maxam-top-m-text1{
  padding-top: 2em;
  padding-bottom: 2em;
}

.maxam-top-m-text2{
  border-left: 3px solid #004B9E;
  padding-left: 0.5em;
}

.maxam-m-top{
background-image: url(img/MAXAM_about_ph-m.jpg);
margin-top: -5px;
}

/*MAMAモバイルラインナップ*/

.maxam-lineup-m{
  background-image: url(img/MAXAM_haikei_ph-m.jpg);
}

.maxam-m-CONTACT{
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  padding-bottom: 30%;
}


.MS913_img1{
  display: flex;
  align-items: flex-start;
  padding-bottom: 5%;
  gap: 0.5em;
}

.MS913_img1 img{
  width: 68px;
  height: auto;
}

.MS913_img2{
  display: flex;
  align-items: flex-start;
  padding-bottom: 5%;
  gap: 0.5em;
}
.MS913_img2 img{
  width: 68px;
  height: auto;
}

.MS913_flex{

  display: flex;
}

/*モバイル*/
.ms913-m{
  display: flex; 
  align-items: center; 
  padding-bottom: 5%;
  gap: 1em;
}

.ms913-m img{
  width: 68px;
  height: auto;
 
 
}


/*お問い合わせフォーム*/
.contact-img-m{
 display: block;
  margin: 0 auto;
}

.flex-m1{
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.flex-m1  p{
color: #004B9E;
  font-weight: bold;
}

.flex-m1  span{
color: #004B9E;
  font-weight: bold;
}

.form-item span{
color: #004B9E;
}

label{
  font-weight: bold;
  padding-top: 5%;
}
.form-item-text-2 a{
  color: #707070;
}

.form-m{
  display: flex;
  flex-direction: column;
}

.form-m #shop-name, #email ,#phne ,#name {
height: 4em;
 width: 100%;
 border-radius: 5px;
 border:0.5px solid #707070 ;

}


.form-m textarea{
  width: 100%;
  border-radius: 5px;
   border: 0.5 solid #707070;
}

.form-item{
  margin-top: 2em;
}

.form-item-text{
  margin-bottom: 0.2em;
}

.checkbox{
transform:		scale(1.4);
}

.form-item-text-2 span{
  padding-bottom: 0.2em;
  border-bottom: #004B9E 1px solid;
}
.form-item-text-2{
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
}

.submit{
width: 230px;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  border-radius: 100px;
background-color: #004B9E;
color: #ffffff;
border-style: none;
text-align: center;
margin: 0 auto;
display: block;
margin-top: 1em;
font-size: 16px;
}

.submit:hover{
    opacity: 0.5; /* 例：半透明に */
  transition: 0.3s ease;
}

/*訂正ボタン*/
.return-btn{
width: 230px;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  border-radius: 100px;
background-color:#AAAAAA;
color: #ffffff;
border-style: none;
text-align: center;
margin: 0 auto;
display: block;
margin-top: 1em;
font-size: 16px;

}

.return-btn:hover{
    opacity: 0.5; /* 例：半透明に */
  transition: 0.3s ease;
}

/**/
.submit-flex{
  display: flex;
  flex-direction: column;
  width: 80%;

}



/*pc*/

.form-item #shop-name, #email ,#phne ,#name{
  height: 3.5em;
 width: 100%;
 border-radius: 5px;
 border:0.5px solid #707070;
}

/*完了画面ｐｃ*/
.contact-masege {
  padding-top:15%;
  width: 500px;
  color: #004B9E;
  padding-bottom: 0.5em;
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid #004B9E;
  font-weight: bolder;
}

.contact-masege2{
padding-top: 1.5em;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 15%;

}

.contact-masege3{
  color: #004B9E;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
}

/*完了画面モバイル*/
.contact-masege-m {
  width: 280px;
  padding-top:15%;
  color: #004B9E;
  padding-bottom: 0.5em;
  font-size: 20px;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid #004B9E;
  font-weight: bolder;
}


/**/

/* style.css に追加または修正 */

/* 電話番号入力グループのコンテナ (PC版のみに影響) */
.phone-input-group {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: space-between;
  gap: 0;
}

/* 個々の電話番号入力フィールド (PC版のみに影響) */
.phone-input-group input[type="number"],
.phone-input-group input[type="text"] { /* 必要であれば type="text" も含める */
   height: 3em;
 width: 1000px;
 border-radius: 5px;
 border:0.5px solid #707070 ;
}

#phone1,#phone2,#phone3{
  width: 1000px;
  border: solid 0.5px #707070;
}

#phone1-haisou,#phone2-haisou,#phone3-haisou{
  width: 1000px;
  border: solid 0.5px #707070;
}













/* Chrome, Safari, Edge の number input の矢印を非表示 (PC版のみに影響) */
.phone-input-group input[type="number"]::-webkit-outer-spin-button,
.phone-input-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ハイフンのスタイル (PC版のみに影響) */
.phone-input-group span {
  font-size: 10px; /* ハイフンのサイズ */
  font-weight: bold;
  color:#707070;
}

/* 既存のフォーム入力フィールド（スマホ版の電話番号入力にも影響） */
/* id="phone" がモバイル版の input type="tel" に設定されているので、このセレクタに影響します */
.form-m #shop-name, .form-m #email, .form-m #phone, .form-m #name { /* .form-m #phne を #phone に変更 */
  height: 4em;
  width: 100%;
  border-radius: 5px;
  border: 0.5px solid #707070;
}

/* その他、既存のCSSはそのまま使用 */

/* エラーメッセージの基本的なスタイル */
.error {
    color: red;
    font-weight: bold;
    list-style: none;
    padding: 10px 20px;
    margin: 20px auto; /* フォーム画像の下で中央寄せ、上下に余白 */
    border: 1px solid red;
    background-color: #ffeaea;
    max-width: 600px; /* フォームの幅に合わせて調整 */
    text-align: left; /* エラーメッセージは左寄せが読みやすい */
}
.error li {
    margin-bottom: 5px;
}
.error li:last-child {
    margin-bottom: 0;
}

/* style.css に追加または修正 */

/* 電話番号入力グループのコンテナ (PC版のみに影響) */
.phone-input-group {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 垂直方向の中央揃え */
  gap: 5px; /* 各要素間の隙間（調整可能） */
}

/* 個々の電話番号入力フィールド (PC版のみに影響) */
.phone-input-group input[type="number"],
.phone-input-group input[type="text"] { /* 必要であれば type="text" も含める */
  width: 80px; /* 入力欄の幅を調整（例：市外局番、それ以降で桁数が異なるため） */
  padding: 8px 10px; /* パディングを調整 */
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center; /* 数字を中央寄せ */
  -moz-appearance: textfield; /* Firefoxのnumber inputの矢印を非表示 */
}

/* Chrome, Safari, Edge の number input の矢印を非表示 (PC版のみに影響) */
.phone-input-group input[type="number"]::-webkit-outer-spin-button,
.phone-input-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ハイフンのスタイル (PC版のみに影響) */
.phone-input-group span {
  font-size: 1.2em; /* ハイフンのサイズ */
  color: #707070;
}

/* 既存のフォーム入力フィールド（スマホ版の電話番号入力にも影響） */
/* id="phone" がモバイル版の input type="tel" に設定されているので、このセレクタに影響します */
.form-m #shop-name, .form-m #email, .form-m #phone, .form-m #name { /* .form-m #phne を #phone に変更 */
  height: 4em;
  width: 100%;
  border-radius: 5px;
  border: 0.5px solid#707070;
}

/* その他、既存のCSSはそのまま使用 */

/* エラーメッセージの基本的なスタイル */
.error {
    color: red;
    font-weight: bold;
    list-style: none;
    padding: 10px 20px;
    margin: 20px auto; /* フォーム画像の下で中央寄せ、上下に余白 */
    border: 1px solid red;
    background-color: #ffeaea;
    max-width: 600px; /* フォームの幅に合わせて調整 */
    text-align: left; /* エラーメッセージは左寄せが読みやすい */
}
.error li {
    margin-bottom: 5px;
}
.error li:last-child {
    margin-bottom: 0;
}

/* 完了画面のテキスト中央寄せの修正 */
.contact-masege {
    padding-top:15%;
    width: 500px;
    color: #004B9E;
    padding-bottom: 0.5em;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    border-bottom: 2px solid #004B9E;
    font-weight: bolder;
}
.contact-masege2{
    padding-top: 1.5em;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 15%;
}

.contact-masege3{
    color: #004B9E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/*完了画面モバイル*/
.contact-masege-m {
    width: 280px;
    padding-top:15%;
    color: #004B9E;
    padding-bottom: 0.5em;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    border-bottom: 2px solid #004B9E;
    font-weight: bolder;
}

/*見積りモバイル*/
.midasi-1-m{
background-color: #004B9E;
color: #ffffff;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
margin-bottom: 0.5em;
}

.midasi-1-m-a{
  color: #004B9E;
  font-weight: bold;
  text-align: right;
  padding-bottom: 0.1em;
}


.form-item-h{
  padding-top: 15%;
}


#shop-name-haisou,#name-haisou,#phone-haisou,#address {
  height: 3.5em;
 width: 100%;
 border-radius: 5px;
 border:0.5px solid #707070 ;
}



.midasi-1-m2{
  background-color: #004B9E;
color: #ffffff;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
margin-bottom: 0.5em;
margin-top: 15%;
}

/*アドレスｐｃ*/




.midasi-1-p{
    background-color: #004B9E;
color: #ffffff;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
margin-bottom: 0.5em;
margin-top: 5%;
}

/*見積りフォームタイヤ*/
.mitumori-title-m{
  border-left: 3px solid #000;
  padding-left: 0.5em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.mitumori-m{

  background-color:#AAAAAA ;
  color: #ffffff;
  text-align: center;
  padding: 0.3em;
  margin-top: 1em;


}


/**/
/* アコーディオン内のテーブルのスタイル */
.accordion-table {
  width: 100%; /* テーブルの幅を親要素に合わせる */
  border-collapse: collapse; /* セルのボーダーを結合する */


border: 1px solid #AAAAAA ;
}

.accordion-table td {
  padding: 8px; /* セルの内側の余白 */
  border-bottom: none; /* セルの下線ボーダーをなくす */
  border-top: none; /* セルの上線ボーダーをなくす */
  border-left: 1px solid #AAAAAA ; /* 左側の縦線ボーダー */
  border-right: 1px solid #AAAAAA ; /* 右側の縦線ボーダー */
  text-align: center; /* テキストを中央揃えにする（任意） */
}





/* 入力フォームのスタイル調整（任意） */
.accordion-table input[type="number"] {
  width: 60px; /* 入力フォームの幅を調整 */
  padding: 5px;
  border: 1px solid #AAAAAA ;
  border-radius: 4px;

}









/**/

/* アコーディオンのサマリー部分のスタイル */
.accordion-summary {
  display: flex;             /* Flexboxを有効にする */
  align-items: center;       /* 垂直方向の中央揃え */
  position: relative;        /* アイコンの絶対配置の基準にするため */
  padding: 8px 15px;         /* 上下左右のパディングを調整。左右はアイコンのスペースを考慮 */
  /* justify-content: space-between; は削除（テキストの中央寄せと競合するため） */
}

/* S880のテキスト部分のスタイル */
.accordion-summary .summary-text {
  flex-grow: 1;              /* 利用可能なスペースを占有 */
  text-align: center;        /* テキストを中央揃えにする */
  
  /* アイコンの幅を考慮した微調整 */
  /* ここでtranslateXの値を調整します。0から始めて少しずつ増やしていくのがおすすめです。 */
  /* 例: アイコンが右にあることでテキストが左に寄って見える場合、プラスの値でテキストを右にずらす */
  /* 例: アイコンがフローから外れたことでテキストが中央に来すぎている場合、マイナスの値でテキストを左にずらす */
  transform: translateX(0px); /* まずは0にリセットし、見ながら調整してみてください */
}

/* SVGアイコンの基本スタイル */
.accordion-icon-svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  color: #333;
  
  /* アイコンを右端に絶対配置 */
  position: absolute; /* 親要素 .accordion-summary に対して絶対配置 */
  right: 15px;      /* .accordion-summary の右パディングと同じ値にするか調整 */
  top: 50%;         /* 垂直方向中央 */
  transform: translateY(-50%) rotate(0deg); /* 自身の高さの半分を上にずらして中央、初期回転 */
}

/* detailsが開いている時のアイコンスタイル */
details[open] .accordion-icon-svg {
  transform: translateY(-50%) rotate(180deg); /* 下向きにする際も垂直方向中央を維持 */
}

/* その他の既存CSSは変更なし */
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
}

.accordion-table {
  width: 100%;
  border-collapse: collapse;
}

.accordion-table td {
  padding: 8px;
  border-top: none;
  border-left: 1px solid #AAAAAA ;
  border-right: 1px solid #AAAAAA ;
  text-align: center;
}


.accordion-table input[type="number"] {
  width: 60px;
  padding: 5px;
  border: 1px solid #AAAAAA ;
  border-radius: 4px;
  text-align: center;

  -moz-appearance: number-input;
  -webkit-appearance: number-input;
  appearance: number-input;
}

.accordion-table input[type="number"]::-webkit-inner-spin-button,
.accordion-table input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  margin: 0;
}




/*お知らせ*/



/*お知らせ*/

.news-pc-2{
padding-bottom: 30%;
}
/*タイトル*/
.NEWS-title-m h2{
color: #004B9E;
}

.NEWS-title-m{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8%;
}



/*カテゴリー*/
.contact-Category_p{
  display: flex;
  gap: 3%;
  align-items: center;
  justify-content: space-between;
  text-wrap: nowrap;
  margin-top: 5%;
  padding-bottom: 5%;
  width: 100%;
}

.contact-Category_p a{

padding-left: 8%;
padding-right: 8%;
padding-top:2% ;
padding-bottom:2% ;
background-color: #ffffff;
color:  #004B9E;

}

.contact-Category_p a:hover{

background-color: #004B9E;
color: #ffffff;
}

/*時刻*/

.news-article-p{

  border-bottom: 1px solid #707070;
  display: flex;

}


.news-article-p{
  padding: 2em;
  
}
.news-article-p a{
  color: #000;
  
}

.category-p{
  color: #004B9E;
}




/**/

.news{
  position: absolute;
  background-color: #ffffff;
  bottom: 0;
  right: 0;
  padding: 1.2em
}

.news-top{
  color: #004B9E;
  padding: 1em;
}

.news-top::after{
   content: "|";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;   /* フォントサイズに比例する幅 */
  height: 1.9em;
  vertical-align: middle;
  color: #C9C9C9;
  padding-left: 1em;
}

.news-detail{
  padding: 1.2em
}


/**/



/*コンタクトバナーモバイルトップ*/
.contact-banner-m-top img{
width: 100%;
}

.contact-banner-m-top{
  position: relative;
  transform: translateY(-50%); 
}



/*コンタクトバナーモバイルトップ-ここまで*/


/*お知らせ*/


/*タイトル*/
.NEWS-title-m h2{
color: #004B9E;
}

.NEWS-title-m{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8%;
}

/*カテゴリー*/
.contact-Category_m{
  display: flex;
  gap: 1%;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  margin-top: 5%;
  padding-bottom: 5%;
  width: 100%;
}

.contact-Category_m span{

padding-left: 4%;
padding-right: 4%;
padding-top:2% ;
padding-bottom:2% ;
background-color: #004B9E;
color: #ffffff;

}

.contact-Category_m a{
  color: #ffffff;
}



/*時刻*/
.time-m{
  display: flex;
  gap: 2%;
  justify-content: flex-start;
 text-wrap: nowrap;
 padding-bottom: 1em;
}

.Category-m span{
  padding: 5%;
}
.news-article>.category{
color: #004B9E;
}


.NEWS-text-m{
  padding-top: 1em;
  padding-bottom: 1em;
  left: 0;
}
.news-article{
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #707070;
}

.news-mobile-2{
  padding-bottom: 30%;
}

.hero-mobile{
  padding-top: 45px;
}

.mobil-news2 a{
  color: #000;
}
.mobil-news2 .category{
color: #004B9E;
}

/*スライドショー*/
         /*.Topic-3 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
        }*/

        /*
        .Topic-3-text1 {
            flex-shrink: 0;
            width: 40%;
            padding-right: 20px;
        }*/

        .Topic-3-slider-container {
            position: relative;
            width: 50%;
            height: 484px;
            overflow: hidden !important;
            clip-path: polygon(27.62% 0, 100% 0, 100% 100%, 0% 100%) !important;
            transform: none !important;
            box-sizing: border-box;
            background-color: transparent;
            max-width: 756px;
        }



        .Topic-3-slider {
            display: flex;
            height: 100%;
        }

        .Topic-3-slider img {
            height: 100%;
            flex-shrink: 0;
            object-fit: cover;}


        /* --- Topic-3-2 のスタイル --- */
        /*.Topic-3-2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            margin-top: 50px;
        }*/

        /*.Topic-3-2-text1 {
            flex-shrink: 0;
            width: 40%;
            padding-left: 20px;
            order: 2;
        }*/

       .Topic-3-2-slider-container {
    position: relative;
    width: 50%;
    height: 484px;
    overflow: hidden !important;
    /* Topic-3-slider-container を左右反転させた clip-path */
    clip-path: polygon(0% 0, 72.38% 0, 100% 100%, 0% 100%) !important;
    transform: none !important;
    box-sizing: border-box;
    background-color: transparent;
    max-width: 756px;
    order: 1; /* 画像を左側に配置 */
}


        .Topic-3-2-slider {
            display: flex;
            height: 100%;
        }

        .Topic-3-2-slider img {
            height: 100%;
            flex-shrink: 0;
            object-fit: cover;
        }

        /* --- Topic-3-3 のスタイル（Topic-3と同じ）--- */
   
        .Topic-3-3-slider-container { /* 新しいクラス名 */
            position: relative;
            width: 50%;
            height: 484px;
            overflow: hidden !important;
            clip-path: polygon(27.62% 0, 100% 0, 100% 100%, 0% 100%) !important; /* Topic-3と同じ台形 */
            transform: none !important;
            box-sizing: border-box;
            background-color: transparent;
            max-width: 756px;
        }

        .Topic-3-3-slider { /* 新しいクラス名 */
            display: flex;
            height: 100%;
        }

        .Topic-3-3-slider img {
            height: 100%;
            flex-shrink: 0;
            object-fit: cover;
        }

        .Topic-3, .Topic-3-2, .Topic-3-3{
          color: #ffffff;
        }

        /*トピック3レイアウト*/

        
/*トピック3*/


.Topic-3 ,.Topic-3-3{
  position: relative; 
  width: 100%; 
  min-height: 500px; 
  margin-top: 3%;
}
/* 画像 */
.Topic-3-slider-container ,.Topic-3-3-slider-container{
  position: absolute;
  top: 0;
  right: 0;
  display: block; 
  height: auto;
}



.Topic-3-text1-2 {
  width: fit-content;
  padding-top: 2em;
  padding-bottom: 2em;

}
.Topic-3-text1 ,.Topic-3-3-text1{
  color: #ffffff;
  top: 0; 
  padding-top: 50px;
}


/*トピック3-2*/

.Topic-3-2 {
  position: relative; 
  width: 100%; 
  min-height: 500px; 
  margin-top: 3%;
}






.Topic-3-2-slider-container{
  position: absolute;
  top: 0;
   width: 100%;
  max-width: 750px;
  min-width: 400px;
}


.Topic-3-2-text1{
  color: #ffffff;
  top: 0; 
  text-align: right;
  padding-top: 50px;
}

.Topic-3-2-text1 p{ 

  text-align: right;
  margin: auto;

    padding-top: 2em;
  padding-bottom: 2em;
 
}

.Topic-3-3-text1 p{ 

  text-align: left;
  margin: auto;

    padding-top: 2em;
  padding-bottom: 2em;
 
}


/*スマホトピック3*/


/*トピック3~5*/
.Topic-3-m, .Topic-4-m, .Topic-5-m{
  padding-top: 15%;
}

.Topic-3-m img, .Topic-4-m img, .Topic-5-m img{
  width: 100%;
}

.Topic-3-m h2 ,.Topic-3-m span,.Topic-4-m h2 ,.Topic-4-m span,.Topic-5-m h2 ,.Topic-5-m span{
 color: #ffffff;
 padding-top: 5%;
 padding-bottom: 5%;
}
.Topic-5-m{
  margin-bottom: 5%;
}



/*スマホ版スライドショー*/


/*3-1*/
.Topic-3-m-slider{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen and (max-width: 1300px){
.Topic-3-m-slider{
   width: 100%;
   height: 200px;
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('img/ABOUTSAILUN_trackshow_ph1.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('img/ABOUTSAILUN_trackshow_ph2.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('img/ABOUTSAILUN_trackshow_ph3.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}}


/*3-2*/
.Topic-3-2-m-slider{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen and (max-width: 1300px){
.Topic-3-2-m-slider{
   width: 100%;
   height: 200px;
}
.img-01-3-2, .img-02-3-2, .img-03-3-2{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01-3-2{
   background-image: url('img/ABOUTSAILUN_attempt_ph1.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-023-2{
   background-image: url('img/ABOUTSAILUN_attempt_ph2.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03-3-2{
   background-image: url('img/ABOUTSAILUN_attempt_ph3.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}}


/*3-3*/
.Topic-3-3-m-slider{
   position: relative;
   width: 100%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen and (max-width: 1300px){
.Topic-3-3-m-slider{
   width: 100%;
   height: 200px;
}
.img-01-3-3, .img-02-3-3, .img-03-3-3{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01-3-3{
   background-image: url('img/ABOUTSAILUN_factory_ph1.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-023-3{
   background-image: url('img/ABOUTSAILUN_factory_ph2.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03-3-3{
   background-image: url('img/ABOUTSAILUN_factory_ph3.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}}



/*ブログpc*/
.blog-datte-p{
  display: flex;
  gap: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
}

.blog-p{
  padding-bottom: 15%;
}

.blog-img-p{
  padding-top: 1em;
}

/*ブログモバイル*/


.blog-datte-m{
  display: flex;
   gap: 1em;
  padding-bottom: 1em;
  padding-top: 1em;
}

.blog-m{
  display: flex;
  flex-direction: column;
  padding-bottom: 15%;
  
}
.blog-title-m{
  font-size: 20px;
}

.blog-img-p{
  width: 100%;
  height: auto;
  padding-top: 15%;
}