.display-pc { display: block !important; }
.display-sp { display: none !important; }
.cet {text-align:center;}
.img-fluid2 {
    max-width: 70%;
    height: auto;
}
.img-fluid3 {
    max-width: 300px;
    height: auto;
}

p {
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
  line-height:1.8;
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}

.header_leftbox {
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.left-group {
  display: flex;
  align-items: center;
  gap: 120px; /* ロゴとテキストの距離 */
}

.contact a {
  display: block;
  padding: 1em 2em;
  background-color:#3a81c3;
  color:#fff;
  text-align:center;
  border-radius:100vh;
}
.btn-contact {
  text-align:center;
}
.btn-contact a {
  color:#3a81c3;
}
.btn-contact i {
  font-size:3em;
}
.btn-contact p {
  font-size:70%;
  padding:0;
  margin:0;
  line-height:0;
}

.caption {
  font-size:80%;
  margin-bottom:15px;
}

.navbar {display:none;}

/* 右の罫線 */
#navbar-pc ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5px;
  height: 60%;
  background-color: #9c7e52;
}

.navbar-pc ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar-pc li {
  position: relative;
  width:150px;
}
.navbar-pc a, .navbar-pc a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  transition: 0.3s;
}
.navbar-pc a i, .navbar-pc a:focus i {
  font-size: 1.5em;
  line-height: 1.8;
}
.navbar-pc a:hover, .navbar-pc .active, .navbar-pc .active:focus, .navbar-pc li:hover > a {
  opacity:0.7;
}
.navbar-pc .getstarted, .navbar-pc .getstarted:focus {
  background: #5777ba;
  color: #fff;
  padding: 12px 25px;
  margin-left: 30px;
  color: #fff;
  line-height: 1;
  border-radius: 50px;
}
.navbar-pc .getstarted:hover, .navbar-pc .getstarted:focus:hover {
  background: #748ec6;
  color: #fff;
}
.navbar-pc .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
.navbar-pc .dropdown ul li {
  min-width: 200px;
}
.navbar-pc .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  font-weight: 600;
}
.navbar-pc .dropdown ul a i {
  font-size: 12px;
}
.navbar-pc .dropdown ul a:hover, .navbar-pc .dropdown ul .active:hover, .navbar-pc .dropdown ul li:hover > a {
  color: #5777ba;
}
.navbar-pc .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar-pc .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar-pc .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar-pc .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar-pc .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}


.navbar-pc {
    display:flex;
    justify-content: center;
    background: #d1c8ba;
}
.navbar-pc a, .navbar-pc a:focus {
    padding: 1em 2em;
    display:block;
    text-align:center;
}

#navbar-pc ul li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5px;
  height: 60%;  /* 高さ調整できる */
  background-color: #9c7e52; /* 線の色 */
}

#hero {
    padding: 147px 0 100px 0;
}

.complete-page #main,
.member-store #main {
    padding: 150px 0 0;
}

.main-bg {
    width: 100vw; /* ビューポートの幅100% */
    aspect-ratio: 16 / 7; /* アスペクト比 (16:9 例) */
    background-image: url(/kurosuyasan/assets/img/main.jpg);
    background-size: cover; /* 画像を完全にカバー */
    background-position: center center; /* 中央配置 */
    background-repeat: no-repeat; /* 画像の繰り返しなし */
    display: flex;
    justify-content: center;  /* 左寄せ */
    align-items: center;          /* 垂直中央 */
    height: 100%;
}

.main-bg {
    position: relative;
    width: 100vw;
    aspect-ratio: 16 / 7;
    background-image: url(/kurosuyasan/assets/img/main.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reveal-wall {
    position: absolute;
    inset: 0;
    background: #f3f3f3;
    transform-origin: top right;
}


span.underline_pink {
    background: linear-gradient(transparent 65%,rgba(255,0,0,.2) 0%);
    background-image: linear-gradient(transparent 65%, rgba(255, 0, 0, 0.2) 0%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}


h2.midashi {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  color: #3a81c3;
}

h2.midashi:before,
h2.midashi:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: auto;
  border-top: solid 1px #3a81c3;
  border-bottom: solid 1px #3a81c3;
}

h2.midashi:before {
  left:0;
}
h2.midashi:after {
  right: 0;
}

.section-title p {
    text-align: center;
    margin: 0 auto;
    width:700px;
}

ul.ml-1 li {
  margin-left:-2.5rem;
  list-style:none;
}

ol.ml-2 li {
  margin-left:-0.5rem;
}

.company_info dl {
  display: flex;
  flex-wrap: wrap;
}
.company_info dt {
  width: 28%;
  padding: 20px;
  background-color: #3a81c3;
  color:#fff;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content:  center;
}
.company_info dd {
  width: 72%;
  padding: 20px;
  background-color: #eeeeee;
  text-align:left;
  margin: 0 0 10px 0;
}
.company_info dd:last-child { margin-bottom: 10px!important; }

.company_info ul {
  margin-bottom: 0;
  padding-left: 1.3em;
  line-height: 1.8;
}

table.tbl-r02 {
  margin: 3rem auto;
  width:100%;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
}

.tbl-r02 th {
  background: #ececec;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 0.5rem;
  vertical-align:middle;
  text-align:center;
  font-weight:bold;
  white-space: nowrap;
  box-sizing: border-box;
}

.tbl-r02 td {
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 0.5rem;
  vertical-align:middle;
  box-sizing: border-box;
}

.tbl-r02 ul {
  margin-bottom: 0;
  padding-left: 1.3em!important;
  line-height: 1.8;
  list-style-type: disc!important;
}

.tbl-r02 ul li {
  padding-bottom:0!important;
}

.notes {
font-size:75%;
color:#1d52aa;
margin-top:2rem;
font-style: oblique;
text-align:center;
}

.sns-bg {
padding:0.2em!important;
background-color:#1b3d2f;
color:#fff!important;
display:block;
text-align:center!important;
margin:0;
border-radius:100vh;
}

.sns-bg a:hover {
opacity:0.7;
}

.lh18 {line-height:1.8!important; }

/*----------------------------------
  メンバー用
------------------------------------*/
.member-fx {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:3em 1em;
  padding:0;
}
.member-fx div {
  width: calc((100% - 2em * 2) / 4);
  height:auto;
  overflow:hidden;
  background-color:#fff;
  padding:1em;
  box-sizing: border-box;
}
.member-fx div img {
  width: 70%;
  height:auto;
  overflow:hidden;
  margin:1em 0;
}

/*----------------------------------
  特徴・強み用
------------------------------------*/
.feature-list {
  width:700px;
  list-style: none; /* デフォルト番号を消す */
  padding: 0;
  margin: 2rem 0;
  margin:0 auto;
}

.feature-list li {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.feature-list li h5 {
  margin: 0;
  font-size: 1.2em;
  color: #b3272d;               /* 差し色 */
  font-weight: 700;
  text-align:left;
}

.feature-list li p {
  margin: 0;
  line-height: 1.7;
  color: #333;
  font-size: 1em;
}
.feature-img {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.feature-img img {
  width: 33.333%;
  margin: 0;
  padding: 0;
  display: block;
}


@media screen and (max-width: 768px) {
    .feature-list {
  width:100%;
    }
  .feature-img {
    flex-direction: column;
  }

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


/*----------------------------------
  施工の流れ用
------------------------------------*/

.flow-list {
  width:700px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  counter-reset: flow-step;
}

/* 各ステップ */
.flow-list li {
  position: relative;
  padding-left: 4rem;
  padding-bottom: 2.5rem;
}

/* 丸い番号 */
.flow-list li::before {
  counter-increment: flow-step;
  content: counter(flow-step);
  position: absolute;
  left: 0;
  top: 0;

  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #b3272d;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;

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

/* 縦ライン（▼の代わりの視覚的な流れ） */
.flow-list li::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.4rem;
  width: 1px;
  height: calc(100% - 2.4rem);
  background: #ddd;
}

/* 最後のステップだけラインを消す */
.flow-list li:last-child::after {
  display: none;
}

/* 見出しと本文 */
.flow-list h4 {
  margin: 0 0 .4rem;
  font-size: 1.1em;
  font-weight: 700;
  text-align:left;
}

.flow-list p {
  margin: 0 0 .4rem;
  line-height: 1.7;
  font-size: .95em;
}

/* 少しだけスマホ調整したい場合 */
@media screen and (max-width: 768px) {
  .flow-list {
  width:100%;
  }

  .flow-list li {
    padding-left: 3.5rem;
    padding-bottom: 2rem;
  }
}

/*----------------------------------
  共通
------------------------------------*/
.nowr {white-space: nowrap;}
.bg-col01 {background-color:#ffdfee!important;}
.bg-col02 {background-color:#def1ff!important;}
.bg-col03 {background-color:#ffefb1!important;}

form#mailformpro {
  padding: 0px;
}

.bg-bk {
    padding: 0.2em 1em;
    color: #fff;
    background-color: #000;
}

.box-sdw {
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.row-fx {
    display: flex;
    gap: 5em;
    align-items: stretch;
    justify-content:center;
}
.row-fx .col-md-6 {
    display: flex;
    flex-direction: column;
}


.row-fx .col-md-6 .cet {
    margin-top: auto;
}


@media screen and (max-width: 768px) {
    .row-fx {
        flex-direction: column;
        gap: 2em;
    }
}

/* ================================
   加盟店ページ用
================================ */
.member-store p.error_messe {
  text-align: center;
}

.member button[type=submit] {
  background: #fff;
  border: 2px solid #3a81c3;
  padding: 1em 2em;
  color: #3a81c3;
  transition: 0.4s;
  border-radius: 100vh;
  margin-top: 3em;
  text-shadow:none;
}
.member button[type=submit]:hover {
  background: #3a81c3;
  color: #fff;
}

input::placeholder,
.member-store .php-email-form select {
  color: #6e6e6e!important;  /* 好きな色に変更 */
}

.member-store .php-email-form input {
    padding: 10px 15px;
    margin: 0;
    max-width: 100%;
}

.member-store .php-email-form input, .member-store .php-email-form textarea, .member-store .php-email-form select {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}
.member-store .php-email-form textarea {
  padding: 10px 15px;
  margin:0;
  width:100%!important;
  max-width:100%!important;
  height:10em!important;
}

.member-store .php-email-form button[type=submit] {
  background: #fff;
  border: 2px solid #3a81c3;
  padding: 1em 2em;
  color: #3a81c3;
  transition: 0.4s;
  border-radius: 100vh;
  margin-top: 3em;
  text-shadow:none;
}
.member-store .php-email-form button[type=submit]:hover {
  background: #3a81c3;
  color: #fff;
}
@media (max-width: 1024px) {
  .member-store .php-email-form {
    padding: 30px 15px 15px 15px;
  }
}
@media (max-width: 768px) {
  .member-store .php-email-form {
    padding: 15px 0 0 0;
  }
}

/* 初期：薄くしてクリック不可 */
.disabled-btn {
  opacity: 0.4;              /* 半透明で薄く */
  pointer-events: none;      /* クリックできない */
  transition: all 0.3s ease;
}

/* 有効化時に付与されるクラス */
.enabled-btn {
  opacity: 1;                /* クッキリ */
  pointer-events: auto;      /* クリック可能 */
}
strong.free-call {
font-size: 3rem;
display: inline-block;
padding: 0.8rem 0;
}
.infobox {
margin:2em 0;
padding:0 1em;
}
.infobox p {
line-height:1;
padding:0;
margin:0;
}

/* ================================
   ボタン（PC標準）
================================ */
.formbox {
  text-align: center;
}

.formbox a {
  position: relative;
  display: inline-block;
  background-color: #3a81c3;
  color: #fff;
  padding: 1em 3.2em 1em 2.5em; /* アイコン分だけ右に余白追加 */
  font-size: 1.8em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 100vh;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  letter-spacing: 0.5px;
}

/* after アイコン */
.formbox a::after {
  content: "\ed24";
  font-family: boxicons !important;
  font-weight: 400;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 1.2em;   /* ボタン右側に配置 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  line-height: 1;
  pointer-events: none;
}

.formbox a:hover {
  background-color: #4d96d8;
  transform: translateY(-2px);
}

.formbox a:active {
  transform: translateY(0);
}

.formbox p,
.footer_menu p {
  text-align:center;
  margin:2em 0 0;
}

@media screen and (max-width: 768px) {
  .formbox a {
    font-size: 1.2em;
    padding: 0.9em 3em 0.9em 1.8em;
  }

  .formbox a::after {
    right: 0.8em;
    font-size: 1.3em;
  }
}

.footer_menu .row,
.contact .row {
  width:700px;
  margin:0 auto;
}
.member-store .row {
  width:850px;
  margin:0 auto;
}
.footer_menu ul {
  line-height:3em;
  list-style-type: none;
}

.footer_menu ul li a {
  color:#333;
  text-decoration: underline;
}
.footer_menu ul li a:hover {
  color:#333;
  text-decoration: none;
}




/*----------------------------------
  edit sp
------------------------------------*/


@media screen and (max-width: 768px){
.display-pc { display: none !important; }
.display-sp { display: block !important; }

form#mailformpro {
  padding: 2em 0 0;
}

.footer_menu .row,
.member-store .row,
.contact .row {
  width:100%;
}

.section-title h2 {
  font-size: 28px;
}
.section-title p {
    text-align: left;
    width:100%;
}
.navbar {display:flex;}

#navbar-pc,
.contact a,
.caption {
  display: none;
}

#hero {
    padding: 95px 0 50px 0;
}

.main-bg {
    aspect-ratio: 1200 / 1840;
    background-image: url(/kurosuyasan/assets/img/main-sp.jpg);
    background-size: cover; /* 画像の比率維持 */
    background-position: top center; /* 上部中央に配置 */
    padding-left:0;
    padding:0.8em;
}

.main-bg2 {
    aspect-ratio: 1200 / 1840;
    background-image: url(/assets/img/main_02-sp.jpg);
    background-size: cover; /* 画像の比率維持 */
    background-position: top center; /* 上部中央に配置 */
    padding-left:0;
    padding:0.8em;
    align-items: flex-start;
}

.section-title p {
    width:100%;
}

.company_info dt { width: 100%; margin: 0 0 0 0; }
.company_info dd { width: 100%; padding: 20px 10px; }

.otoiawase {
margin-left:0;
}

.member-fx div {
  width: calc((100% - 0.5em* 2) / 2);
}
.member-fx div img {
  width: 100%;
}
.mpost {
font-size:90%;
text-align:justify;
word-wrap:break-word;
}

}