html {
  scroll-behavior: smooth;
}

:root {
  /* フォント定義 */
  --font-zen-kaku: 'Zen Kaku Gothic Antique', "Yu Gothic", YuGothic, "Hiragino Sans", "Meiryo", sans-serif;
  --font-shippori: 'Shippori Mincho B1', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  --font-yugothic: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* カラー定義 */
  --basecolor: #333333;        /* メインカラー */
  --subcolor: #33333312;       /* 薄いアクセントカラー */
  --textcolor: #333333;        /* 本文テキスト色 */
  --subtextcolor: #555555;     /* 補足・日付用テキスト色 */
  --bgcolor: #ffffff;          /* 背景色 */
  --gap: 3rem;
  --gap-s: 1.5rem;
}

body {
  font-family: var(--font-zen-kaku);
  font-weight: 400;
  color: var(--textcolor);
  background-color: var(--bgcolor);
  margin: 0;
  padding: 0;
  line-height: 1.8;
}
*{
  position: relative;
  box-sizing: border-box;

}
ul,ol{
  padding-left: 1rem;
}
ul li::marker {
  color: var(--basecolor);
}

/* フォントユーティリティクラス */
.font-zen {
  font-family: var(--font-zen-kaku);
  font-weight: 400;
}
.font-zen-medium {
  font-family: var(--font-zen-kaku);
  font-weight: 500;
}
.font-shippori {
  font-family: var(--font-shippori);
  font-weight: 400;
}
.font-shippori-semibold {
  font-family: var(--font-shippori);
  font-weight: 600;
}
.font-yugothic {
  font-family: var(--font-yugothic);
}

/* カラーユーティリティクラス */
.text-base {
  color: var(--basecolor);
}
.text-sub {
  color: var(--subcolor);
}
.bg-base {
  background-color: var(--basecolor);
  color: #ffffff;
}
.bg-sub {
  background-color: var(--subcolor);
}
h3.withborder span{
  background: #fff;
}
#voices li,
.biege,
.biege h3.withborder span{
  background: #F9F8F4;
}
.whitebox{
  background:#fff;
  padding:1rem;
  display: flex;
  align-items:center;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.textwrap{
  width: 50%;
}
.train::before{
  content: url('../img/train.svg');
  width: 40px;
}
.parking::before{
  content: url('../img/parking.svg');
}
.whitebox strong{
  display: block;
}
.whitebox p{
  margin: 0;
}
#content h1{
  text-align: center;
  margin: 0 auto var(--gap);
}
#content h1 img{
  display: block;
  margin: 0 auto;
}

/* PC / SP 表示切り替え汎用クラス */
.sp {
  display: none;
}

.pc {
  display: block;
}

.nd{
  display:none !important;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: var(--gap) auto;
}

.flex > * {
  flex-grow: 1;
  flex-basis: calc(50% - var(--gap) / 2);
}

.flex.cols-3 > * {
  flex-basis: calc(33.333% - var(--gap) * 2 / 3);
}

.flex.cols-4 > * {
  flex-basis: calc(25% - var(--gap) * 3 / 4);
}

.flex.reverse {
  flex-direction: row-reverse;
}
img,picture,iframe {
  max-width: 100%;
  height: auto;
}
iframe{
  display: block;
  aspect-ratio: 16/9;
  margin: 0 auto;
  width:450px;
}
a, button { transition: all 0.3s ease; }

.linkbt,
input[type="submit"].linkbt,
button.linkbt {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  background: var(--basecolor);
  color: #ffffff;
  border-radius: 5px;
  max-width: 100%;
  width: 300px;
  margin: 2rem auto;
  gap: 1rem;
  font-family: var(--font-shippori);
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.4;
  cursor: pointer;
}

input[type="submit"].linkbt {
  background-image: url('../img/arrow-out.svg');
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 10px auto;
  text-align: left;
}

.linkbt::after {
  content: url('../img/arrow-out.svg');
  width: 10px;
}

input[type="submit"].linkbt::after {
  content: none;
}

.linkbt:hover,
input[type="submit"].linkbt:hover,
button.linkbt:hover {
  background-color: #622333;
}
.linkbt.foot-kazoku {
  background-color: #8D3349;
}
.linkbt.foot-kazoku:hover {
  background-color: #622333;
}
.linkbt.foot-kojin {
  background-color: #007A88;
}
.linkbt.foot-kojin:hover {
  background-color: #005660;
}
span.linkbt {
  cursor: default;
}
span.linkbt:hover {
  opacity: 1;
}
.movelink{
  padding: 1rem;
  color: var(--textcolor);
  border: 1px solid #707070;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  max-width:100%;
  border-radius: 5px;
  width: 400px;
}
.movelink::after{
  content: url('../img/arrow-in.svg');
  transform: rotate(90deg);
  width: 10px;
}
.mapfile:hover,
.movelink:hover{
  background: var(--subcolor);
}
.mapfile{
  color: var(--textcolor);
  border: 1px solid #707070;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  width: fit-content;
}
.place .movelink{
  width:100%;
}

.wrapper {
  max-width: 1000px;
  padding: 0 var(--gap);
  margin-left: auto;
  margin-right: auto;
}

section,#types>div{
  padding: 3rem 0;
}
strong{
  color: var(--basecolor);
  font-size: 1.1rem;
}

#header {
  display: flex;
  justify-content: space-between;
}

h2 img{
  display: block;
  margin: 0 auto var(--gap);
}
h3{
  margin: var(--gap) auto;
}
h4{
  font-size: 1.2rem;
  margin:2rem auto;
  display: flex;
  gap: 0.5rem;
}
h4::before{
  content:'';
  display: inline-block;
  width: 5px;
  height: 1.8rem;
  background: var(--basecolor);
  border-radius: 10px;
}
.f5{
  padding: var(--gap) 0;
}
h3.withborder{
  text-align: center;
}
h3.withborder::before{
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #707070;
  position: absolute;
  left: 0;
  top: 1rem;
}
h3.withborder span{
  padding:0 1rem;
  display: inline-block;
}
h3 img{
  display: block;
  margin: 1rem auto;
}

header .wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-s);
  width: 100%;
}
header h1 img{
  display: block;
  margin: 0;
}

#mainvisual{
  background: linear-gradient(180deg, #ffffff 70px, #F9F8F4 70px);
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}
#mainvisual .wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
#pagenav {
  width: 270px;
  flex-shrink: 0;
  z-index: 2;
}
#mainvisual .imgbox{
  position: relative;
  min-height: 600px;
  width: calc(100% - 270px - var(--gap));
  flex-grow: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-shippori);
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9);
  z-index: 1;
}
#mainvisual .imgbox::before,
#mainvisual .catch-txt {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 800px;
  max-width: calc(100vw - 270px - var(--gap));
}
#mainvisual .imgbox::before{
  content: '';
  background: url('../img/mainvisual.png') no-repeat center center / cover;
  z-index: -1;
}
#mainvisual .catch-txt{
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#mainvisual ul{
  list-style: none;
  margin: 0 ;
  padding: 0;
  width: 100%;
  border-top: 1px solid #ccc;
}
#mainvisual li a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  color: var(--textcolor);
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}
#mainvisual li a::before{
  content: url('../img/arrow-out.svg');
  background: var(--textcolor);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(90deg);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 2rem;
}



#features .catch{
  font-size: 1.8rem;
  line-height: 2;
  color: var(--basecolor);
}
#features ol{
  list-style: none;
  margin: var(--gap-s) auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
#features ol li{
  display: block;
  background: var(--subcolor);
  width: calc((100% - var(--gap)) / 2);
  text-align: center;
  padding: 2rem 1rem 1rem;
}
#features ol li strong{
  display: block;
  margin: 0.5rem auto;
}

#features ol li::before,
#features ol li span{
  position: absolute;
  top: -1rem;
  left:calc(50% - 1rem);
  width: 2rem;
  height: 2rem;

}
#features ol li span{
  font-family: var(--font-shippori);
  font-size: 1.1rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

}
#features ol li::before{
  content: '';
  background: var(--basecolor);
  transform: rotate(45deg);
}
#types{
  overflow: hidden;
}
#types .catch{
  text-align: center;
  font-family: var(--font-shippori);
  font-size: 1.1rem;
  margin: 1rem 0;
  line-height: 2;
}


#eisyo,#jion{
  background: linear-gradient(180deg, rgba(141, 51, 73, 0.15) 0, #ffffff 600px);
}
#eisyo *,#jion *{
  z-index: 1;
}
#eisyo .wrapper:first-child::before,#jion .wrapper:first-child::before{
  content: url('../img/c-left.svg');
  display: block;
  position: absolute;
  left: -5%;
  top: 0;
  width: 272px;
  height: 247px;
  z-index: 0;
}
#eisyo .wrapper:first-child::after,#jion .wrapper:first-child::after{
  content: url('../img/c-right.svg');
  display: block;
  position: absolute;
  right: -5%;
  top: 10%;
  width: 272px;
  height: 247px;
}
#eisyo h3,#jion h3{
  color: var(--textcolor);
  font-family: var(--font-shippori);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.photobox ul{
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
}
.photobox li{
  max-width: 100%;
  width: calc((100% - var(--gap) * 2 ) / 3 );
  font-size: 0.9rem;
  text-align: center;
}
.photobox li img{
  aspect-ratio: 4/3;
  object-fit: cover;
}
.price{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--subcolor);
  color: var(--textcolor);
  font-weight: normal;
  font-family: var(--font-shippori);
  padding: 1rem 2rem;
  gap: var(--gap);
}
.price h4{
  font-weight: normal;
  font-size: 1rem;
  width: fit-content;
  margin: 0;
}
.price h4::before{
  display: none;
}
.price p{
  display: flex;
  margin: 0;
  gap: var(--gap-s);
  align-items: center;
  justify-content: flex-start;
}
.price em{
  font-size: 3.6rem;
  line-height: 3.6rem;
  font-style: normal;
  margin: 0 0.5rem;
}
.price strong{
  font-weight: normal;
}
#eisyo table td,#jion table td{
  border-top: 1px solid #CCCCCC;
  padding: 0.5rem 1rem;
  background: #fff;
}
#eisyo table th,#jion table th{
  border-top: 1px solid #CCCCCC;
  background: #fff;
  text-align: left;
  padding: 0.5rem 1rem 0.5rem 0;
  font-weight: normal;
  white-space: nowrap;
}
#eisyo table,#jion table{
  width: 100%; 
  border-collapse: collapse;
  border-bottom: 1px solid #CCCCCC;
}
#different table{
  width: calc(100% + var(--gap-s) * 2);
  margin-left: calc(var(--gap-s) * -1);
  margin-right: calc(var(--gap-s) * -1);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--gap-s) 0;
}

#different table th{
  color: #fff;
  background: var(--basecolor);
  font-family: var(--font-shippori);
  font-weight: normal;
  font-size: 1.2rem;
  text-align: center;
  width: 50%;
  padding: 1rem;
}
#different table th span{
  font-size: 0.9rem;
  margin: 0 0 0 0.5rem;
}
#different table td{
  padding: 1rem;
  border-bottom: 1px solid #CCCCCC;
  text-align: center;
  background: #fff;
  width: 50%;
}
#different table td strong{
  color: var(--textcolor);
  font-size: 1.1rem;
  display: block;
}
#different table tr.prices td{
  color: var(--basecolor);
  font-family: var(--font-shippori);
}
#different table tr.prices td em{
  font-size: 2.8rem;
  font-weight: normal;
  font-style: normal;
  margin: 0 0.5rem 0 0;
}

#faq summary::-webkit-details-marker {
  display: none;
}
#faq summary {
  list-style: none;
  padding: 1rem 1.5rem 1rem 0;
  font-size: 1.1rem;
  line-height: 2;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}
#faq summary::after{
  content: url('../img/arrow-faq.svg');
  transform: rotate(90deg);
  position:absolute;
  right: 0.5rem;
}
#faq p{
  margin-top: 0;
}
#faq details[open] summary::after{
  transform: rotate(270deg);
}
#faq summary::before{
  content: 'Q';
  font-family: var(--font-shippori);
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  background: var(--basecolor);
  color: #fff;
  flex-shrink: 0;
}
#faq details {
  border-bottom: 1px solid #ccc;
}
#faq details:first-of-type {
  border-top: 1px solid #ccc;
}


#voices ul{
  list-style: none;
  margin: var(--gap-s) auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s) var(--gap);
}
#voices li{
  padding: 1rem;
}
#voices .voicebox li{
  flex-grow: 1;
  flex-basis: calc(50% - var(--gap) / 2);
}
.leader h4{
  display: flex;
  gap: var(--gap-s);
  align-items: center;
  margin: 0 auto 1rem;
  font-family: var(--font-shippori);
  width:100%;
  font-size: 1rem;
  font-weight: normal;
}
.leader h4 span em{
  display: block;
  font-size: 1.4rem;
  color: var(--textcolor);
  font-style: normal;
  font-weight: bold;
  margin-bottom:1rem;
}
.leader h4::before{
  display: none;
}

#contact{
  background: var(--subcolor);
}
#contact h2{
  font-family: var(--font-shippori);
  text-align: center;
  font-weight: normal;
  color: var(--basecolor);
}
#contact .linkbt{
  margin: 2rem 0;
}

footer{
  padding: var(--gap) 0;
}
footer h2{
  text-align: center;
  font-family: var(--font-shippori);
  font-weight: normal;
  color: var(--textcolor);
  font-size: 1rem;
}
footer ul{
  list-style: none;
  text-align: center;
  margin: var(--gap-s) auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem var(--gap-s);
}
footer li a.linkbt{
  background: #007A88;
  color: #ffffff;
  margin: 0 auto;
}
footer li a.linkbt:hover{
  background: #015059;
}
footer li span.linkbt{
  background: var(--subcolor);
  color: #ffffff;
  margin: 0 auto;
  cursor: default;
}
footer li span.linkbt:hover{
  background: var(--subcolor);
  opacity: 1;
}
footer address{
  font-style: normal;
}
footer .tel{
  font-weight: bold;
  font-size: 1.4rem;
}

.blog-list {
  list-style: none;
  padding: 0;
  margin: var(--gap-s) 0;
}
.blog-list li a {
  display: block;
  text-decoration: none;
  color: var(--textcolor);
  transition: opacity 0.3s ease;
}
.blog-list li a:hover {
  opacity: 0.8;
}
.blog-list .thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: var(--subcolor);
}
.blog-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-list .title {
  display: block;
  font-weight: normal;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.blog-list time {
  display: block;
  font-size: 0.9rem;
  color: var(--subtextcolor);
}

.pagination {
  margin: var(--gap) auto;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border: 1px solid #ccc;
  color: var(--textcolor);
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--basecolor);
  color: #ffffff;
  border-color: var(--basecolor);
}

.blog-detail .entry-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}
.blog-detail time {
  display: block;
  font-size: 0.9rem;
  color: var(--subtextcolor);
  margin-bottom: 0.5rem;
}
.blog-detail .entry-title {
  font-size: 1.8rem;
  line-height: 1.4;
  margin: 0;
  font-weight: normal;
  font-family: var(--font-shippori);
}
.wpcf7-form table{
  width: 100%; 
  border-collapse: collapse;
  margin: var(--gap) auto;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
form table{
  border-collapse: collapse;
}
form th,
form td{
  background: #ffffff;
  border-top: 1px solid #ccc;
  padding: 1rem;
}
form th{
  background: #EDEBE8;
  text-align: left;
  white-space: nowrap;
  min-width: 250px;
}
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
textarea,
select{
  width: 100%;
  padding: 0.5rem 1rem;
  margin: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.1rem;
}
.wpcf7-list-item{
  display: inline-block;
}
.wpcf7-not-valid-that-is[aria-invalid="true"]{
  border-color: #8D3349;
}
form th em{
  color: #8D3349;
  font-size: 0.8rem;
  margin-left: 1rem;
  font-weight: normal;
  font-style: normal;
}
.hidden-fields-container{
  visibility: hidden;
}
form table p{
  margin: 0;
}
.wpcf7-list-item-label{
  margin-right:1rem;
  font-size: 1.1rem;
}

.photobox-controls {
  display: none;
}

/* ページトップボタン */
#pagetop {
  position: sticky;
  bottom: 2rem;
  left: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
#pagetop a {
  pointer-events: auto;
  display: block;
  transition: opacity 0.3s ease;
}
#pagetop a:hover {
  opacity: 0.8;
}
#pagetop img {
  display: block;
}

/* ==========================================
   スマホ表示（max-width: 768px）
   ========================================== */
@media (max-width: 768px) {
  :root {
    --gap: 1.5rem;
    --gap-s: 0.5rem;
  }
  /* PC / SP 表示切り替え */
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }

  /* Flex レイアウト */
  .flex > * {
    flex-basis: 100%;
  }
  .flex.cols-3 > * {
    flex-basis: 100%;
  }
  .flex.cols-4 > * {
    flex-basis: 100%;
  }
  .flex.reverse {
    flex-direction: column-reverse;
  }

  section#contact{
    padding: var(--gap) 0 var(--gap-s);
  }
  #contactus{
    position: absolute;
    top: calc((3rem + 75px) * -1);
    left: -9000px;
  }

  /* ヘッダー */
  #header {
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  #header .wrapper{
    padding: 0 1rem;
  }
  h1{
    margin: 0.5rem 0;
  }
  h3{
    margin: var(--gap) auto;
  }
  #mainmenu ul{
    list-style: none;
    margin: 0 -1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    font-size: 0.85rem;
  }
  #mainmenu a{
    padding: 1rem 3vw;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    border-left: 1px solid #ccc;
    white-space: nowrap;
  }
  #mainmenu a.nav-kazoku {
    color: #fff;
    background: #8D3349;
  }
  #mainmenu a.nav-kojin {
    color: #fff;
    background: #007A88;
  }
  #mainvisual .wrapper{
    flex-direction: column;
  }
  .textwrap{
    width: 100%;
  }
  #mainvisual .imgbox{
    position: relative;
    padding: 0;
    width: calc(100% + var(--gap));
    margin-left: calc(var(--gap) * -1);
    min-height: auto;
    aspect-ratio: 355/450;
  }
  #mainvisual .imgbox::before,
  #mainvisual .catch-txt {
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 355/450;
  }
  #mainvisual .catch-txt{
    font-size: max(1.75rem, 5.75vw);
  }
  #pagenav{
    width: 100%;
  }
  #pagenav ul{
    display: flex;
    flex-wrap: wrap;
    border-top: none;
    gap: 0 1rem;
  }
  #pagenav li{
    width: calc(( 100% - 1rem ) / 2);
  }
  #pagenav li:nth-child(1),#pagenav li:nth-child(2){
    border-top: 1px solid #ccc;
  }
  
  .f5{
    margin: var(--gap-s) 0;
  }
  #features .catch{
    font-size: 1.6rem;
  }
  #features ol{
    gap: calc(2 * var(--gap));
    margin-top: calc(2 * var(--gap));
  }
  #features ol li{
    width: 100%;
  }
  #eisyo .wrapper:first-child::before, #jion .wrapper:first-child::before{
    transform: scale(0.8);
    transform-origin: left top;
    left:-30%;
  }
  #eisyo .wrapper:first-child::after, #jion .wrapper:first-child::after{
    transform: scale(0.8);
    transform-origin: right top;
    right: -30%;
  }
  #voices ul{
    gap: var(--gap);
  }
  #voices .voicebox li{
      flex-basis: auto;
  }
  #different table{
    width: calc(100% + 1rem * 2);
  margin-left: calc(-1rem);
  margin-right: calc(-1rem);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 1rem 0;
  }
  #different table td strong{
    font-size: 1rem;
  }
  #different table th{
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  .photobox {
    position: relative;
  }
  .photobox-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 30vw;
    left: 0;
    width: 100%;
    z-index: 100 !important;
    pointer-events: none;
    padding: 0 0.25rem;
    margin: 0;
    transform: translateY(-50%);
  }
  .photobox-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none !important;
    pointer-events: auto;
  }
  .photobox-controls .photobox-prev::before,
  .photobox-controls .photobox-next::after {
    content: url('../img/arrow-out.svg');
    background: var(--textcolor);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }
  .photobox-controls .photobox-prev::before {
    transform: rotate(180deg);
  }
  .photobox-controls button:hover {
    opacity:0.8;
  }

  .photobox ul {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
    width: 100%;
    margin: 0 0 var(--gap) 0;
    padding: 0 0 0.5rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .photobox ul::-webkit-scrollbar {
    display: none;
  }
  .photobox li {
    flex: 0 0 80%;
    width: 80%;
  }
  #contact .linkbt {
    margin: 2rem auto;
  }
  form th,
  form td {
    display: block;
    width: 100%;
  }
  form td {
    border-top: none;
  }
}

/* ブログ専用追加スタイル */
.blog-detail .entry-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--basecolor);
}

.blog-detail time {
    display: block;
    font-size: 0.9rem;
    color: var(--subtextcolor);
    margin-bottom: 2rem;
}

.blog-detail .entry-content {
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 3rem;
}

.blog-detail .entry-content p {
    margin-bottom: 1.5rem;
}

.blog-detail .entry-content img {
    max-width: 100%;
    height: auto;
}