/* Kode & Muse inspired redesign layer
   既存のagency.min.cssの後に読み込む上書き用CSS */
:root{
  --km-ink:#1d1a17;
  --km-brown:#5a3b28;
  --km-camel:#b7834d;
  --km-cream:#f4efe7;
  --km-paper:#fffaf2;
  --km-line:rgba(90,59,40,.18);
}

html{scroll-behavior:auto;}
body{
  color:var(--km-ink);
  background:var(--km-paper);
  font-family:"Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  letter-spacing:.03em;
}
a{color:var(--km-brown);} 
a:hover{color:var(--km-camel);text-decoration:none;}

#mainNav{
  background:rgba(29,26,23,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
@media (min-width:992px){
  #mainNav{background:linear-gradient(180deg,rgba(29,26,23,.78),rgba(29,26,23,0));box-shadow:none;}
  #mainNav.navbar-shrink{background:rgba(29,26,23,.94);box-shadow:0 10px 30px rgba(0,0,0,.18);}
}
#mainNav .navbar-brand img{max-height:32px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));}
#mainNav .navbar-nav .nav-item .nav-link{font-size:82%;letter-spacing:.12em;color:#f8efe3;}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active{color:var(--km-camel);}
#mainNav .navbar-toggler{background:var(--km-brown);}

header.masthead{
  position:relative;
  min-height:92vh;
  background-image:linear-gradient(90deg,rgba(20,17,14,.82) 0%,rgba(20,17,14,.48) 48%,rgba(20,17,14,.16) 100%),url("../img/gaiyou_bg.jpg");
  background-position:center;
}
header.masthead:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  background:linear-gradient(180deg,rgba(255,250,242,0),var(--km-paper));
  pointer-events:none;
}
header.masthead .container{position:relative;z-index:1;}
header.masthead .intro-text{padding-top:220px;padding-bottom:120px;text-align:left;}
.km-kicker{color:var(--km-camel);font-size:.78rem;font-weight:700;letter-spacing:.22em;margin-bottom:1.3rem;}
.km-title{color:#fff8ed;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.8rem,7vw,6.8rem);line-height:1.02;font-weight:500;letter-spacing:.05em;text-shadow:0 18px 40px rgba(0,0,0,.38);}
.km-copy{max-width:750px;color:#f4e8d7;font-size:1.05rem;line-height:2;margin:1.7rem 0 2.2rem;}
.km-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
.btn-primary{background:var(--km-brown);border-color:var(--km-brown);color:#fff;border-radius:999px;box-shadow:0 16px 30px rgba(90,59,40,.26);}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background:var(--km-camel)!important;border-color:var(--km-camel)!important;}
.km-btn-outline{border:1px solid rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.06);border-radius:999px;}
.km-btn-outline:hover{color:#fff;background:rgba(255,255,255,.16);}
.km-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:3rem;}
.km-stats div{min-width:150px;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:18px;color:#fff;}
.km-stats strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;font-weight:500;line-height:1;}
.km-stats span{display:block;margin-top:.45rem;color:#ead9c3;font-size:.82rem;}

.km-section{padding:110px 0;background:var(--km-paper);}
.km-section-alt{background:var(--km-cream);}
.km-section .container{position:relative;}
h1.oomidashi{color:var(--km-brown);letter-spacing:.18em;font-family:Georgia,"Times New Roman",serif;font-weight:500;-webkit-box-reflect:unset;margin-bottom:.7rem;}
h3.section-subheading{color:var(--km-camel)!important;letter-spacing:.16em;font-style:normal!important;text-transform:uppercase;}
.lead_title{color:var(--km-brown);font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.55;}
.font_l{font-size:1.05rem!important;line-height:2.1;}
.toplead_bg{background:linear-gradient(135deg,#fffaf2 0%,#eee1d0 100%);border:1px solid var(--km-line);border-radius:30px;padding:2rem;box-shadow:0 24px 60px rgba(76,48,28,.08);}
.toplead_img img,img.radius_20,.col-md-4>img,.col-md-6>img{border-radius:24px!important;}
h5.komidashi{color:var(--km-brown);font-size:1.05rem;letter-spacing:.12em;}
h5.komidashi i{color:var(--km-camel);} 
h5.komidashi:after{height:1px;background:linear-gradient(90deg,var(--km-camel),transparent);}

.table,.kei{background:rgba(255,255,255,.42);}
table.kei{width:100%;border-collapse:separate;border-spacing:0 8px;}
table.kei th{border-bottom:1px solid var(--km-line);color:var(--km-brown);font-weight:700;padding:13px 15px;}
table.kei td{border-bottom:1px solid var(--km-line);padding:13px 15px 16px;line-height:1.75;}
#page-equipment .row:nth-of-type(2),#page-bosyuu .row.justify-content-center.mt-5,#page-contact form{
  background:rgba(255,255,255,.55);
  border:1px solid var(--km-line);
  border-radius:30px;
  padding:2rem;
  box-shadow:0 24px 60px rgba(76,48,28,.08);
}
#page-equipment .col-md-4 img{margin-bottom:1.2rem;}
#page-bosyuu .text-success{color:var(--km-brown)!important;}

.form-control{border:1px solid var(--km-line);border-radius:14px;background:#fffaf7;color:var(--km-ink);}
.form-control:focus{border-color:var(--km-camel);box-shadow:0 0 0 .2rem rgba(183,131,77,.18);}
#sendMessageButton{min-width:180px;}
.footer{background:var(--km-ink);color:#f8efe3;text-align:left;padding:44px 0;}
.footer a{color:#f8efe3;}
.footer img{border-radius:10px;background:#fff;padding:4px;}
.map{border-radius:24px;overflow:hidden;box-shadow:0 22px 48px rgba(55,35,20,.13);}
.map iframe{left:0;}

@media (max-width:767.98px){
  header.masthead{min-height:82vh;}
  header.masthead .intro-text{padding-top:150px;padding-bottom:90px;}
  .km-title{font-size:3rem;}
  .km-copy{font-size:.95rem;}
  .km-stats div{min-width:130px;flex:1 1 130px;}
  .km-section{padding:78px 0;}
  .toplead_bg,#page-equipment .row:nth-of-type(2),#page-bosyuu .row.justify-content-center.mt-5,#page-contact form{padding:1.3rem;border-radius:22px;}
  h1.oomidashi{font-size:2rem;letter-spacing:.12em;}
}

/* Sub pages: privacy / thanks */
#mainNav2{
  background:rgba(29,26,23,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
#mainNav2 .navbar-brand img{max-height:32px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));}
#mainNav2 .navbar-nav .nav-item .nav-link{font-size:82%;letter-spacing:.12em;color:#f8efe3;}
#mainNav2 .navbar-nav .nav-item .nav-link:hover{color:var(--km-camel);}
#mainNav2 .navbar-toggler{background:var(--km-brown);}
.km-subpage{background:var(--km-paper);}
.km-page-hero{
  position:relative;
  padding:168px 0 86px;
  background-image:linear-gradient(90deg,rgba(20,17,14,.86),rgba(20,17,14,.54)),url("../img/gaiyou_bg.jpg");
  background-size:cover;
  background-position:center;
  color:#fff8ed;
  overflow:hidden;
}
.km-page-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:42%;
  background:linear-gradient(180deg,rgba(255,250,242,0),var(--km-cream));
  pointer-events:none;
}
.km-page-hero .container{position:relative;z-index:1;}
.km-page-title{
  max-width:920px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.2rem,5vw,4.7rem);
  line-height:1.16;
  font-weight:500;
  letter-spacing:.08em;
  text-shadow:0 18px 40px rgba(0,0,0,.35);
}
.km-page-copy{
  max-width:680px;
  margin:1.4rem 0 0;
  color:#f4e8d7;
  line-height:2;
  font-size:1.02rem;
}
.km-content-card,.km-thanks-card{
  position:relative;
  margin-top:-24px;
  background:rgba(255,250,242,.88);
  border:1px solid var(--km-line);
  border-radius:32px;
  padding:clamp(1.6rem,4vw,3.4rem);
  box-shadow:0 28px 70px rgba(76,48,28,.10);
  backdrop-filter:blur(10px);
}
.km-content-card:before,.km-thanks-card:before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(183,131,77,.18);
  border-radius:24px;
  pointer-events:none;
}
.km-content-card p,.km-content-card li{
  color:#3b332d;
  line-height:2.05;
}
.km-content-card h2,.km-thanks-card h2{
  margin:2.2rem 0 1rem;
  color:var(--km-brown);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:.08em;
}
.km-content-card h2:first-of-type{margin-top:1.2rem;}
.km-content-card h2:after{
  content:"";
  display:block;
  width:86px;
  height:1px;
  margin-top:.72rem;
  background:linear-gradient(90deg,var(--km-camel),transparent);
}
.km-lead-text{
  padding:1.2rem 1.4rem;
  background:#fff;
  border-left:4px solid var(--km-camel);
  border-radius:16px;
}
.km-content-card ul{
  padding:1.1rem 1.2rem 1.1rem 2.4rem;
  background:rgba(255,255,255,.5);
  border-radius:18px;
}
.km-contact-box{
  margin-top:2.4rem;
  padding:1.6rem;
  border-radius:22px;
  background:linear-gradient(135deg,#fff,#f1e5d6);
  border:1px solid var(--km-line);
}
.km-thanks-mark{
  width:78px;
  height:78px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:var(--km-brown);
  box-shadow:0 18px 40px rgba(90,59,40,.24);
  font-size:1.8rem;
  margin-bottom:1.4rem;
}
.km-thanks-card p{
  color:#3b332d;
  line-height:2;
  font-size:1.02rem;
}
.km-note{
  display:inline-block;
  margin:1rem auto 1.8rem;
  padding:1rem 1.4rem;
  background:rgba(255,255,255,.58);
  border:1px solid var(--km-line);
  border-radius:18px;
}
.km-thanks-image img{
  margin-top:2.4rem;
  border-radius:26px;
  box-shadow:0 22px 48px rgba(55,35,20,.16);
}
@media (max-width:767.98px){
  .km-page-hero{padding:128px 0 64px;}
  .km-page-title{font-size:2.25rem;}
  .km-content-card,.km-thanks-card{border-radius:24px;}
  .km-content-card:before,.km-thanks-card:before{display:none;}
}

/* =========================================================
   Mobile horizontal overflow fix
   スマホ表示で右側に白い余白が出たり、画面が左にずれる問題の対策
========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
iframe {
  max-width: 100%;
}

.map iframe {
  width: 100%;
  display: block;
}

@media (max-width: 767.98px) {
  header.masthead {
    overflow: hidden;
    background-size: cover;
    background-position: center center;
  }

  header.masthead .container {
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }

  .km-kicker {
    font-size: .68rem;
    line-height: 1.8;
    letter-spacing: .12em;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .km-title {
    font-size: clamp(2.35rem, 10.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: .02em;
    word-break: keep-all;
  }

  .km-copy {
    max-width: 100%;
    font-size: .92rem;
    line-height: 1.9;
  }

  .km-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .km-hero-actions .btn {
    width: min(100%, 260px);
    text-align: center;
  }

  .toplead_bg,
  #page-equipment .row:nth-of-type(2),
  #page-bosyuu .row.justify-content-center.mt-5,
  #page-contact form {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  table.kei {
    width: 100%;
    table-layout: fixed;
  }

  table.kei th,
  table.kei td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* Googleマップのスマホ横ズレ対策 */
.map {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 24px;
  overflow: hidden;
}

.map iframe {
  width: 100% !important;
  height: 420px;
  display: block;
  border: 0;
}

@media (max-width: 767.98px) {
  .map {
    width: 100%;
  }

  .map iframe {
    height: 360px;
  }
}
