@charset "UTF-8";

*,*:before,*:after{ box-sizing: border-box;}
body {min-width: 1200px; margin: 0; padding: 0; color: #333; font-family: "Noto Sans JP", "メイリオ", "Meiryo", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; background-color: #fff; -webkit-text-size-adjust: 100%;}
img{ max-width: 100%; height: auto; vertical-align: bottom;}
a{ color: #2075AF; text-decoration: underline;}
a:hover{  text-decoration: none;}
ul,ol{  list-style: none; margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,p{  margin: 0;}
.pc_parts{ display: block;}
.sp_parts{ display: none;}

/* header */
header{ padding: 24px 0 16px; text-align: center;}

.contact_form{ margin: 0 auto; padding: 48px 0 0;}
.contact_form h1{ font-size: 32px; font-weight: 900; color: #333; margin-bottom: 32px; text-align: center;}
.form_inner{ margin: 0 auto; width: 770px;}

/* タブ切り替え */
.tab-container { display: flex; justify-content: center; gap: 0 1%; max-width: 770px; margin: 0 auto 20px;}
.tab { padding: 12px 0; font-size: 20px; font-weight: 900; text-align: center; cursor: pointer; background: #fff; border: 1px solid #007DDB; color: #007DDB; transition: all .3s; width: calc(98% / 3); border-radius: 50px;}
.tab.active { background: #007DDB; color: #fff; pointer-events: none; position: relative;}
.tab.active:after{  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-top: 10px solid #007DDB; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.tab:hover { opacity: 0.7;}
.content-container{ width: 780px; margin: 0 auto;}
.content-container .content { display: none;}
.content-container .content.show { display: block; min-height: 800px;}

/* 電話お問合せ */
.tel_contact h2{ font-size: 32px; font-weight: 900; color: #333; margin-bottom: 32px; text-align: center;}
.tel_contact{  padding: 64px 0 80px; text-align: center; border-top: 10px solid #F9F9F9;}
.tel_contact .tel_contact_list{display: flex; justify-content: center; gap: 0 24px; margin: 0 auto 40px; width: 1080px;}
.tel_contact .tel_contact_item{ flex: 1; background: #fff; border-radius: 8px; padding: 16px 0 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.tel_contact .tel_contact_item h3{ font-size: 16px; font-weight: 900; color: #333; margin-bottom: 8px;}
.tel_badge{ display: inline-block; background: #339209; color: #fff; font-size: 15px; font-weight: bold; padding: 7px 9px; border-radius: 3px; margin-right: 4px; vertical-align: middle; line-height: 1; margin-top: 3px;}
.tel_label{ font-size: 20px; font-weight: bold; color: #333; margin-bottom: 8px;}
.tel_number{ font-size: 36px; color: #339209; font-weight: 900; margin-bottom: 20px; line-height: 1.1; display: flex; align-items: center; justify-content: center;}
.tel_info{ font-size: 14px; color: #666; padding: 16px; border-top: 1px solid #e6e6e6; display: flex; justify-content: center; align-items: center;}
.tel_info dt{ color: #339209; background: #fff; border: 1px solid #339209; padding: 2px 8px; margin-right: 4px; border-radius: 4px; font-size: 13px;}
.tel_info dd{font-size: 16px;}
.tel_info dd:first-of-type{ margin-right: 15px;}
.tel_contact .tel_label{ display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: #339209; margin-bottom: 8px;}
.tel_contact .tel_badge{ display: inline-block; background: #339209; color: #fff; font-size: 13px; font-weight: bold; padding: 6px 5px; border-radius: 3px; margin-right: 4px; vertical-align: middle; line-height: 1;}
.tel_contact .tel_info{ background:#F4F4F4; border: none;}
.tel_contact .tel_info dt{border: none;}

.form_back a{color: #003B82; font-size: 14px; text-decoration: none; border: 1px solid #d7d7d7; padding: 12px 32px 12px 8px; border-radius: 5px; display: inline-block;}
.form_back a:before{ content: "«"; padding-right: 32px;}

/********* Responsive *********/ 
@media screen and (max-width: 767px) {
  /* 共通 */
  body{ min-width: auto; overflow-x: hidden;}
  header{ padding: 8px 0;}
  header img { width: 75%;}

  /* parts */
  .u_pc_only{ display: none;}
  .u_sp_only{ display: block;}
  .cont_reservbtn{ display: block; width: 100%; margin: 0 auto; background: none; text-align: center; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);}
  .cont_reservbtn img{ transition: inherit;}
  .cont_reservbtn:hover img{  opacity: 1;}
  .attention{ margin: 0 auto;}
  .attention li{ font-size: 12px; padding-left: 1em; text-indent: -1em; text-align: left;}
  .pc_parts{ display: none;}
  .sp_parts{ display: block;}

  /* ヘッダ */
  header a{ width: 160px;}

  /* フォーム */
  .contact_form{ width: 100%; padding: 40px 0;}
  .contact_form h1{ font-size: 24px; margin-bottom: 24px;}
  .tab-container { width: 96%; margin: 0 auto 20px;}
  .tab { font-size: 14px; padding: 12px 0; }
  .content-container{ width: 96%; margin: 0 auto;}
  .form_inner{ width: 98%; margin: 0 auto;}
  .tel_contact h2{font-size: 24px; margin-bottom: 24px;}
  .tel_contact .tel_contact_item{ width: 98%; padding: 24px 0 8px; box-shadow: none; margin: 0 auto;}
  .tel_contact_item:not(:first-of-type){ border-top: 3px solid #F9F9F9; padding-top: 24px;}
  .tel_label{ font-size: 18px;}
  .tel_badge{ font-size: 12px; padding: 7px;}
  .tel_contact{ padding-bottom: 0; padding-top: 40px;}
  .tel_contact_list{ width: 90%; margin: 0 auto;}
  .tel_info dt{ font-size: 12px; padding: 2px 6px; color: #fff; background: #9CB790;}
  .tel_info dd{ font-size: 14px;}
  .tel_info dd:first-of-type{ margin-right: 8px;}
  .tel_cont_wp{ margin-bottom: 24px;}
  .tel_contact .tel_info{ background: none; padding: 0;}
  .tel_contact .tel_label{ font-size: 13px; color: #fff; margin-bottom: 4px;}
  .tel_contact_item a{  display: block; background: url(/campaign/azuma-nissan-flat7/img/form/form_call_ico.svg) no-repeat 12px center ,linear-gradient(90deg, rgb(51,146,9) 55px, rgb(58,169,9) 55px); width: 94%; border-radius: 8px; margin: 0 auto 8px; padding: 8px 0 8px 50px; text-decoration: none; color: #fff; box-shadow: 0px 0px 6px -1px #777777;}
  .tel_contact .tel_badge{ font-size: 11px; padding: 3px 4px; background:#fff; color: #3AA909;}
  .tel_number{  margin-bottom: 0; font-size: 26px; color: #fff;}
  .tel_contact{ padding: 40px 0 24px;}
  .tel_contact .tel_contact_list{ flex-direction: column; gap: 16px 0; width: 96%;}
}