@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


body {  font-family: 'Noto Sans JP', sans-serif;}
@media (min-width: 1200px){
    .page {width: 1200px;margin: 0 auto;}
}@media (max-width: 1200px){
    .page {width: 100%;margin: 0 auto;}
}

@media (min-width: 769px){
    .sp {display: none;}
        a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}@media (max-width: 768px){
    .pc {display: none;}
}

.bo {font-weight: 600;}
.big {font-size: 130%;}
img {max-width: 100%;height: auto;}

h2.main_copy {
    font-size: 27px;
    font-weight: 600;
    text-align: center;
    margin: 10px auto;
}

h2.sell_copy {
    width: 85%;
    font-size: 27px;
    font-weight: 600;
    margin: 10px auto;
}

h2.sell_copy p {
    text-align:right;
}
h3 {
    padding: 0.5em;
    color: #00B275;
    border-left: solid 10px #00B577;
    font-size: 26px;
    font-weight: 600;
}

h4 {
    font-size: 24px;
    font-weight: 600;
    color: #00b275;
    text-align: center;
    margin: 20px auto;
}
.ore {color: #ffa500;border-left: solid 10px #ffa500;}
.red {color: #E45B54;border-left: solid 10px #E45B54;}
/**********  ヘッダー  **********/
.header_main{
    padding: 0 20px;
    height: 140px;
    border-top: #00B275 solid 10px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    .logo{height: 100%;
        a{
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
    nav.menu_pc{height: 100%;
        ul{height: 100%;display: flex;
            li{height: 100%;
                a{
                    padding: 0 20px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    color: #000;
                    font-size: 18px;
                    transition: .3s;
                    &:hover{color: #00B275;
}}}}}}

@media (max-width: 940px){
    .header_main {height: 130px;padding: 0 20px;}
    .header_main .logo {width: 26%;}
    .header_main nav.menu_pc ul li a{
        font-size: 16px;
        padding: 0 18px;
    }
}

@media (max-width: 600px){
    .header_main {height: 70px;padding: 0 6px;}
    .header_main .logo {width: 17%;}
    .header_main nav.menu_pc ul li a{
        font-size: 14px;
        padding: 0 5px;
    }
}

@media (max-width: 422px){
    .header_main {height: 70px;padding: 0 4px;}
    .header_main .logo {width: 17%;}
    .header_main nav.menu_pc ul li a{
        font-size: 12px;
        padding: 0 5px;
    }
}

@media (max-width: 385px){
    .header_main {height: 70px;padding: 0 2px;}
    .header_main .logo {width: 14%;}
    .header_main nav.menu_pc ul li a{
        font-size: 12px;
        padding: 0 5px;
    }
}

/**********  top_copy  **********/

.top_copy,.page_copy {
    width: 80%;
    margin: 30px auto;
    line-height: 1.5;
}

.top_copy {
  background-image: url("../img/top_back.png");
  background-position: right top;       /* 右上に配置 */
  background-repeat: no-repeat;         /* 繰り返しを防ぐ */
  background-size: 20%;                 /* 画像のサイズを15%に指定 */
}

.main_txt {
    width: 80%;
    margin: 30px auto;
    font-size: 22px;
    line-height: 1.7;
}

.main_txt_buy {
    margin: 30px auto;
    font-size: 22px;
    line-height: 1.7;
}

/**********  top_button  **********/
.top_button {
    width: 80%;
    margin: 30px auto 50px;
    display: flex;
    flex-wrap: wrap;
}

.top_btn {
    width: 33%;
    text-align: center;
}
.top_btn img {width: 70%;}

a:not(.no-effect) img {transition: all 0.3s ease;}
a:not(.no-effect):hover img {transform: translateY(-5px); }

/**********  company  **********/

.company-profile-table {
  width: 80%;
  border-collapse: collapse;
  margin: 40px auto 60px;
  font-size: 17px;
}

.company-profile-table th, 
.company-profile-table td {
  border: 1px solid #ddd;
  padding: 12px;
  vertical-align: top;
  line-height: 1.6; /* 縦の間隔を少し広げて読みやすく */
}

.company-profile-table th {
  background-color: #9CE8BD;
  width: 20%; /* 見出しの横幅 */
  font-weight: bold;
  text-align: left;
}
.company-profile-table td {width: 40%;}

.come {width: 80%;margin: 20px auto 40px;}
.come p {font-size: 20px;line-height: 1.6;}
p.dai {text-align: right;}

/* 親の箱：2つのセットを横並びにする */
.store-gallery {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 80%;
  margin: 20px auto;
}

.store-item {
  flex: 1;
  text-align: center;
}

.store-item img {
  width: 100%;                  /* 横幅は限界まで広げる */
  height: 300px;                /* ★ここで高さを強制的に揃える（好きな数値に変更OK） */
  object-fit: cover;            /* ★縦横比を崩さず、指定したサイズに綺麗にトリミングする */
  display: block;
}

.store-name {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

div.map p {font-size: 20px;margin: 40px 0 10px 20px;}
div.map {margin-bottom: 70px;}


/********** 買いたい **********/
.check {width: 50%;margin: 50px auto 80px;}

#left-box {
  width: 80%;
  margin: 20px auto;
  font-size: 18px;
  overflow: hidden;/*float解除*/
}
#left-box .space {
  float: right;/*画像の位置を右下にしたい場合はright*/
  height: 8.3em/*画像上の余白の高さ*/
}
#left-box .img {
  float: right;/*画像の位置を右下にしたい場合はright*/
  clear: both;/*.spaceのfloat解除*/
  margin: 0;/*画像の周りの余白*/
}

.pcimg {
    width: 300px;
}
/**********  売りたい  **********/
.nagare {width: 90%;margin: 50px auto;display: flex;flex-wrap: wrap;}
.flow {width: 15%;margin: 0 0.5%;}
/**********  借りたい  **********/

.rent_btn {
    width: 80%;
    margin: 60px auto;
}

.chin {
    width: 60%;
    margin: 20px auto;
}

.tenpo {
    width: 45%;
    margin: 20px auto;
}

.btn_flex {
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
}

.btn_div {
    width: 27%;
    margin: 10px 3%;
}

.cons_flex {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
}

.cons {
    width: 42%;
    margin: 20px 5% 20px 3%;
}

/**********  お問い合わせ  **********/
img.cont_top {
    width: 80%;
    margin: 20px 10%;
}

.contact_page {
    width: 80%;
    margin: 50px auto;
}

.contact_tit {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom:20px;
}

.contact_desc {
    font-size: 25px;
    text-align: center;
}

.contact_flex {
    width: 90%;
    margin: 90px auto;
    display: flex;
    flex-wrap: wrap;
}

.cont_icon {
    width: 20%;
}

.cont_tel {
    width: 75%;
    margin: 0 0 0 5%;
}

.gridcen {
    display: grid;
    place-items: center;
}

.tel_time {
   font-size: 22px;
   font-weight:500; 
   text-align: center;
}

.tel_no {
    font-size: 45px;
    font-weight: 600;
    color: #34b157;
    margin: 10px;
    line-height: 1.4;
}

span.tel_ten {
    font-size: 60%;
    margin-right: 3%;
}

span.tel_kome {
    font-size: 60%;
    margin-left: 3%;
}

.line_txt {
    width: 60%;
    font-size: 30px;
    font-weight: 500;
    display: grid;
    place-items: center;
}

.line_qr {
    width: 20%;
}

.line_qr img {
    width: 90%;
    display: grid;
    place-items: center;
    margin-top: 10px;
}

.form_txt {
    font-size: 32px;
    font-weight: 500;
}

.form_btn {
    width: 55%;
    margin: 15px auto;
}

.yoyaku_btn {
    width: 61%;
    margin: -50px 0 10px 30%;
}

.yoyaku_tit{
  background:url(../img/house.png) no-repeat 0 0;
  background-size:auto 55px;
  padding-left: 60px;
  font-size: 30px;
  line-height: 55px;
  color: #34b157;
  font-weight: 600;
}

.yoyaku {
    width: 65%;
    margin: 20px auto;
}

/**********  フッター  **********/
.footer {
  padding: 2rem;
  font-size: 15px;
  color: #999;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.footer a:hover {
  color: #000;
}

@media (min-width: 768px) {
  .footer {
    display: flex;
    justify-content: space-between;
    margin-top: 130px;
  }

  .md-flex {
    display: flex;
  }

  .md-flex li + li {
    margin-left: 16px;
  }
}

/**********  追随ボタン  **********/
.scroll-top-btn {
  position: fixed;
  
  /* ★ここから位置調整の魔法 */
  left: 50%;                     /* 一旦、画面の真ん中に持ってくる */
  margin-left: calc(1250px / 2 - 50px - 24px); 
  /* 
    計算の内訳：
    「1250pxの半分」の位置から、
    「ボタン自身の幅（50px）」と「内側への余白（24px）」を引いた分だけ右にずらす 
  */
  
  bottom: 24px;         /* 下からの距離 */
  z-index: 99;          
  width: 50px;          
  height: 50px;         
  background-color: #333333; 
  border: none;
  border-radius: 50%;   
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* ★画面幅が1250pxより狭くなったとき（スマホやタブレット）の調整 */
@media (max-width: 1300px) {
  .scroll-top-btn {
    left: auto;          /* leftの指定を解除 */
    margin-left: 0;      /* marginの指定を解除 */
    right: 24px;         /* 画面の右端から24pxの位置に固定 */
  }
}

/* --- 以下、矢印やホバーなどのコードは前のままで大丈夫です --- */
.scroll-top-btn .arrow {
  width: 12px;
  height: 12px;
  border-top: 3px solid #ffffff;  
  border-left: 3px solid #ffffff; 
  transform: translateY(2px) rotate(45deg); 
}
.scroll-top-btn:hover {
  background-color: #555555; 
  transform: translateY(-4px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
}
.scroll-top-btn.is-show {
  opacity: 1;
  visibility: visible;
}

/***************************************************************/

/* 追随するボタンのスタイル */
.floating-btn {
  /* ここが一番重要！画面に対する絶対位置で固定します */
  position: fixed; 
  bottom: 90px; /* 画面下からの距離 */
  //right: 30px;  /* 画面右からの距離 */
  right: max(20px, calc(50% - 600px + 20px));
  
  /* ボタンの見た目を整える装飾 */
  //background-color: #007bff; /* ボタンの背景色（青） */
  //color: #ffffff;            /* 文字の色（白） */
  //padding: 15px 25px;        /* ボタン内の余白（上下 左右） */
  //border-radius: 50px;       /* 角を丸くする */
  //text-decoration: none;     /* リンクの下線を消す */
  //font-weight: bold;         /* 文字を太くする */
  
  /* 影をつけて少し浮いているように見せる */
  //box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); 
  
  /* 他の要素（画像やテキスト）より手前に表示させる */
  z-index: 1000;
  opacity: 0.7;
  
  /* ホバーした時の変化を滑らかにする */
  transition: background-color 0.3s, transform 0.3s;
}

/* マウスを乗せた（ホバーした）時のスタイル */
.floating-btn:hover {
  //background-color: #0056b3; /* 背景色を少し暗くする */
  //transform: translateY(-2px); /* 少し上に動かしてクリック感を出す */
}
.floating-btn img{
    width: 180px;
}

@media (max-width: 768px){
    .floating-btn img{width: 110px;}
    .footer {font-size: 16px;margin-top: 50px;}
    h2.main_copy {font-size: 19px;}

    h3 {font-size: 21px;}

    .main_txt {font-size: 16px;line-height: 1.4;width: 95%;}
    .main_txt_buy {width:95%;font-size: 16px;line-height: 1.5;}
    .top_copy,.page_copy {width: 98%;line-height: 1.3}
    .top_button {width: 98%;}
    .top_button img {width: 90%;}
    .com {width: 98%;margin: 0 auto;}
    .company-profile-table {width: 95%;font-size: 15px;}
    .store-gallery {display: block;}
    .store-name {margin: 5px 0 20px 0;}

    .store-item img {width:100%;height: auto;}
    .check {width: 80%;}

    h2.sell_copy {font-size: 18px;}
    h2.sell_copy p {font-size: 92%;}
    .nagare {width: 98%;}
    .flow:nth-child(odd) {width: 40%;margin: 0 3% 10px 6%;}
    .flow:nth-child(even) {width: 40%; margin: 0 7% 10px 2%};

    #left-box {width: 100%;}
    #left-box img {width: 150px;}
    #left-box .space {height: 9.5em/*画像上の余白の高さ*/}
    .rent_btn {width: 98%;}
    .chin {width: 91%;}
    .btn_div {width: 31%;margin: 10px 1%;}
    .cons_flex{width: 98%;}
    .cons {display: block; width: 70%;margin:15px auto;}
    .yoyaku_btn {width: 85%;margin: -20px 0 0 15%;}
    .yoyaku_tit{
        background-size:auto 25px;
        padding-left: 28px;
        font-size: 19px;
        line-height: 25px;
    }
    .tenpo {width: 70%;}

    .contact_page {width: 98%;margin: 20px auto;}
    .contact_tit {font-size: 20px;}
    .contact_desc{width:90%;font-size: 17px;margin: 0 auto;}
    .contact_flex{width: 98%;margin: 30px auto;}
    .cont_icon {width: 15%;display: grid;place-items: center;}
    .cont_tel {width: 84%;margin: 0;}
    .tel_time {font-size: 14px;}
    .tel_no {font-size: 21px;line-height: 1.7;}
    span.tel_ten {margin-right: 2%;}
    span.tel_kome{margin-left: 2%;font-size: 55%;}
    .line_txt {font-size: 19px;width: 58%;}
    .line_qr {width: 22%;}
    .form_btn {width: 70%;}
    .form_txt{font-size: 16px;}
    .yoyaku {width: 69%;margin: 20px 0 20px 14%;}
}

/* =========================================
   スマホ向け：ロゴ上・メニュー横スクロール形式
   ========================================= */
@media (max-width: 768px) {
    /* ヘッダー全体を縦並びにし、高さを自動調整 */
    .header_main {
        flex-direction: column !important;
        height: auto !important;
        padding: 15px 0 0 0 !important; /* 横スクロールを端まで綺麗に見せるため左右余白を0に */
    }

    /* ロゴを中央に配置（ロゴ周りのみ左右に余白を確保） */
    .header_main .logo {
        width: auto !important;
        height: 35px !important;
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
        padding: 0 15px !important;
    }
    .header_main .logo a {
        justify-content: center;
        width: 100%;
    }
    .header_main .logo img.sp {
        height: 100%;
        width: auto;
    }

    /* ナビゲーションエリアを横スクロール可能にする */
    .header_main nav.menu_pc {
        width: 100%;
        height: auto;
        overflow-x: auto; /* 横方向のスクロールを有効化 */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
        border-top: 1px solid #e5e5e5; /* ★この1行を追加（薄いグレーの線） */
    }

    /* デザインをすっきりさせるため、スクロールバーを非表示にする */
    .header_main nav.menu_pc::-webkit-scrollbar {
        display: none;
    }

    /* メニューリストを改行させず、横一列に固定 */
    .header_main nav.menu_pc ul {
        display: flex !important;
        flex-wrap: nowrap !important; /* 絶対に折り返さない */
        padding: 0 15px !important; /* スクロール前後の余白 */
        width: max-content; /* 中身の合計幅に自動追従 */
    }

    /* 各メニューの幅を固定し、自動で縮まないようにする */
    .header_main nav.menu_pc ul li {
        flex: 0 0 auto !important; /* 画面幅に合わせて縮むのを防ぐ */
    }

    /* リンクボタンの文字サイズと余白をタップしやすい大きさに固定 */
    .header_main nav.menu_pc ul li a {
        font-size: 14px !important; /* スマホでも見やすい文字サイズ */
        padding: 12px 14px !important; /* 指で押しやすい十分な上下左右の余白 */
        justify-content: center;
        white-space: nowrap !important; /* 文字列の改行を禁止 */
    }
}