/* 対応地域セクション 背景 */
.area-section{
    background-image: url("./img/area-back.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px 0;
}
/* 全体のスタイル */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
    padding-bottom: 70px;
}

/* 画像は画面幅に収まり比率を維持 */
img {
    max-width: 100%;
    height: auto;
}

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

/* ヘッダーオリジナル */
header {
  background-color: #ffffff;
  padding: 10px;
}

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

/* ヘッダー右のアイコンを横並びに */

.header-left{
  width: 50%;
  max-width:50%;

  
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

/* メールフォーム */
.mail-section {
  padding: 20px 0 30px;
  background: #65c2e7;
}

.formtable {
  width: 95%;
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 18px 18px 8px;
}

.formimg{
 max-width: 60%;
 display: block;
 margin: auto;
}

.formtable dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 16px;
  row-gap: 14px;
}

.formtable dt {
  align-self: center;
  font-weight: 700;
  color: #1f2d3d;
}

.formtable dd {
  margin: 0;
}

.formtable label {
  display: inline-block;
}

.indispensable {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #ff6b6b;
  border-radius: 10px;
  vertical-align: middle;
}

.formtable input[type="text"],
.formtable input[type="email"],
.formtable input[type="tel"],
.formtable select,
.formtable textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d6dde6;
  border-radius: 8px;
  background: #fafcff;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.formtable textarea { min-height: 140px; resize: vertical; }

.formtable input:focus,
.formtable select:focus,
.formtable textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  background: #fff;
}

/* ラジオ/チェックの並び */
.formtable input[type="radio"],
.formtable input[type="checkbox"] {
  margin-right: 6px;
}
.formtable dd label + br { display: none; }
.formtable dd label { margin-right: 14px; margin-bottom: 6px; }

/* 補足テキスト */
.formtable small { color: #64748b; }

/* 同意セクション */
.agree-checkarea {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #d6dde6;
}

/* 送信ボタン（存在する場合） */
.submit-area { text-align: center; margin-top: 20px; }
.submit-area .btn-submit,
.formtable input[type="submit"] {
  appearance: none;
  border: none;
  color: #fff;
  background: #0075cc;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease;
}
.submit-area .btn-submit:hover,
.formtable input[type="submit"]:hover { opacity: .9; }
.submit-area .btn-submit:active,
.formtable input[type="submit"]:active { transform: translateY(1px); }

/* プランのラジオを縦並び */
.plan-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .formtable { padding: 14px; }
  .formtable dl { grid-template-columns: 1fr; row-gap: 10px; }
  .formtable dt { padding-top: 6px; }
}
.header-right a {
  display: inline-flex;
  align-items: center;
}

.header-top {
  background: #f8f8f8;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}




/* ファーストビュー */

.container {
    position: relative;
    width: 100%;
    background-image: url("./img/back.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image1, .image2 {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.container p {
    margin: 8px;
    margin-top: 10px;
    padding: 1em;
    background-color: #fcfbfb;
    border-radius: 16px;
    font-size: 14px;
    width: 95%;
    max-width: 800px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 8s infinite linear 0.5s both;
  }
  .scroll-infinity__item {
    width: calc(100vw / 6);
  }
  .scroll-infinity__item>img {
    width: 100%;
  }

  /* キャンペーンセクション */

  .innerblock{
    background-color: lightblue;
    padding-bottom: 20px;
  }

  .campaign {
    width: 100%;
    height: auto;
    max-width: 100%;
    padding: 10px;
    padding-bottom: 10px;
  }

  .campaign-container {
    margin:0 auto ;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 16px;
    font-size: 14px;
    width: 95%;
    max-width: 800px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: rgb(215, 215, 215);
    padding-bottom: 10px;
  }

/* 問い合わせ */

  .contactblock {
    background-color: rgb(44, 103, 241);
    padding-bottom: 20px;
    padding-top: 10px;
  }

  .time-container {
    margin:0 auto ;
    margin-top:10px;
    padding: 10px;
    font-size: 14px;
    width: 95%;
    
    max-width: 800px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: rgb(255, 255, 255);
    padding-bottom: 10px;
  }

  #currentTime{
    text-emphasis-color: black;
  }

  /* コンタクトのボックス内 */
.bg-black {
  background: #f5f5f5;
  padding: 10px;
  display: inline-block;
}

.connect {
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
}

.time-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.time-box {
  background: #000;
  padding: 5px 10px;
  display: inline-block;
}

.is-text {
  color: #333;
  font-size: 20px;
  margin-left: 10px;
}

.message {
  display: block;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.connect {
  text-align: center;
  background: #fff;
}

.time-label{
font-weight: bold;
color:rgb(255, 255, 255);
padding: 0 5px;
font-size: 24px;
}

.time-value{
font-weight: bold;
color:yellow;
padding: 0 5px;
font-size: 24px; 
}

.contact-container{
  display: flex;
  justify-content: center;
  align-items: center; 
}


.tel-cat{
  width: 25%;
  display: flex;
  align-items: left;
  justify-content: center;  
  padding: 4px;
}

.contact-container p{
  color: #fff;
  align-items: center;
}

/* 価格表セクション */
.price-container {
    background-color:#b9d5ef ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    text-align: left;
    font-size: 14px;
}

.price-container p{
  padding: 15px;
}

.price-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.credit-img {
    width: 75%;
    height: auto;
    max-width: 75%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*選ばれる理由*/

.reason{
  background-image: url("./img/price-background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.reason-img{
  padding-top:20px;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}


/* 注意 */
.attention-container{
  background-image: url("./img/attention-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  text-align: left;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding-bottom: 10px;
}

.attention-container p{
  padding: 15px;
  color: #000000;
  padding-top: 0px;
  background-color: #faf8f8;
  border-radius: 16px;
  width: 95%;
  max-width: 800px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.attention-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

/*お客様の声*/

.customer-voice{
  background-image:url("./img/voice-background.jpg") ;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding-bottom: 10px;
}

.customervoice{

  margin-top:10px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  padding-right: 20px;
}

.voice{
    width: 100%;
    height: auto;
    max-width: 90%;
    display: block;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto ;
}

/*対応地域*/

.area{
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
 
.area img{
    display: block;
    margin: 0 auto;
    max-width: min(90%, 800px);
    max-height: 70vh;
    object-fit: contain;
}

/* フッター */
.footer {
    position: fixed;
    bottom: 0;  /* -100pxから0に変更 */
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%);  /* 初期状態で下に隠す */
}

.footer.show {
    transform: translateY(0); 
     /* 表示状態 */
    background-color: yellow;
}

/* ボトムナビゲーション */
.footnavi {
    background-color: #456686;
    padding: 20px 0;
}

/* 会社概要ページ */
#company {
    background: #f5f9fc;
    padding: 40px 0 50px;
}

.company {
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
}

.company h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #0966d0;
    text-align: center;
    margin-bottom: 22px;
}

.tbl01 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    overflow: hidden;
}

.tbl01 th,
.tbl01 td {
    padding: 16px 18px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.8;
}

.tbl01 th {
    width: 220px;
    background: #acc2d8;
    color: #0f3a5f;
    font-weight: 700;
    border-right: 1px solid #dde7f3;
}

.tbl01 tr + tr th,
.tbl01 tr + tr td {
    border-top: 1px solid #edf1f5;
}

.tbl01 a { color: #0f74d1; text-decoration: underline; }
.tbl01 a:hover { opacity: .85; }

/*プライバシー*/
#privacy {
  background: #f5f9fc;
  padding: 40px 0 50px;
}

.privacy {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto;
}

.privacy h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #0966d0;
  text-align: center;
  margin-bottom: 22px;
}


@media screen and (max-width: 768px) {
    .tbl01 th { width: 36%; }
    .company h1 { font-size: 22px; margin-bottom: 16px; }
    #company { padding: 28px 0 36px; }
}

@media screen and (max-width: 520px) {
    .tbl01 th, .tbl01 td { display: block; width: 100%; }
    .tbl01 th { border-right: none; border-bottom: 1px solid #dde7f3; background: #f6f9fe; }
}
.innerbrock {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footnavlink {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footnavlink li {
    margin: 0;
}

.footnavlink a {
    display: block;
    color: #ecf0f1;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
}

.footnavlink a:hover {
    background-color: #22374b;
    border-color: #3498db;
    color: #3498db;
    transform: translateY(-2px);
}

.footsitename {
    background-color: #9abcdc;
    padding: 15px 0;
    text-align: center;
}

.copyright {
    color: #0b0b0b;
    font-size: 14px;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* アイコン間の間隔を広げる */
    max-width: 500px;
    margin: 0 auto;
}

.footer-container a {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.botommail, .botomtel {
    height: 40px;
    width: auto;
    transition: transform 0.3s ease;
}

/* ホバーエフェクト */
.mail:hover, .tel:hover, .botommail:hover, .botomtel:hover
 {
    transform: scale(1.1);
    cursor: pointer;
}


    /* 右端の要素は右ボーダーを削除 */
    .footnavlink a:nth-child(2n) {
        border-right: none;
    }
    
    /* 下段の要素は下ボーダーを削除 */
    .footnavlink a:nth-child(n+3) {
        border-bottom: none;
    }

    .footnavlink li{
      border: dotted #fff;
    }

.thanks{
   text-align: center;
   font-size: large;
}

.thanks h1{
  font-size: x-large;
  color:#fdfdfd;
  background-color: #194cf5;
  border-radius:40px;
  padding: 20px;
  margin: 20px;
}

.thanks h2{
  font-size: medium;
  margin: 15px;
}


@media screen and (max-width: 768px) {
    .image1, .image2 {
        width: 95%; /* 画面幅に対して95%に */
        margin: 0 auto;
    }

    .container p {
        width: 90%;
        font-size: 13px;
        padding: 15px;
    }

    .carousel {
        padding: 8px 0;
    }
    
    .carousel .innner {
        gap: 15px;
    }

    .footer {
        padding: 10px 0;
    }

    .footer-container {
        gap: 20px;
    }

    .header-right .mail,
    .header-right .tel {
        height: 36px;
        width: auto;
    }

    .connect {
        font-size: 14px;
    }
    
    .brsp {
        display: block;
    }
    
    /* フッターナビゲーション レスポンシブ */
    .footnavlink {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .footnavlink a {
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .image1, .image2 {
        width: 98%; /* さらに小さい画面では98%に */
    }

    .container p {
        width: 95%;
        font-size: 12px;
        padding: 12px;
    }

    .footer-container {
        gap: 15px;
    }

    .header-right .mail,
    .header-right .tel {
        height: 30px;
        width: auto;
    }
    
    /* フッターナビゲーション モバイル */
    .footnavlink {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}