@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --key: #333;
  --sub: #f18d46;
  --bg-soft: #f7f3eb; /* 山家向け：柔らかい薄いベージュ */
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: #fff;
}
body{
	font-family: "Noto Sans JP", sans-serif;
    overflow-x: clip;
    color: #333;
}
img{
	width: 100%;
	display: block;
}
p{
	line-height: 2;
	letter-spacing: 2px;
}
h1,h2,h3,h4{
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 3px;
    font-family: "Noto Serif JP", serif;
}
table{
	width: 100%;
}
table , td, th {
	border-collapse: collapse;
    letter-spacing: 2px;
	border: 1px solid #d8d8db;
}
th, td{
	padding: 10px 20px;
	height: 25px;
	line-height: 1.5
}
th{
    white-space: nowrap;
}
dt, dd {
	line-height: 1.5
}
section{
    margin-bottom: 120px;
}

@media screen and (max-width:768px){
	p{
		font-size: 14px;
	}
    th, td {
        line-height: 1.5;
        font-size: 13px;
        padding: 10px;
    }
    section{
        margin-bottom: 50px;
    }
}

.width-sss{
	max-width: 800px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-ss{
	max-width: 900px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-s{
	max-width: 1000px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-sm{
	max-width: 1100px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-m{
	max-width: 1200px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-l{
	max-width: 1400px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-xl{
	max-width: 1600px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}


.flex, .flex-always{
	display: flex;
	flex-wrap: wrap;
}
.flex-sb, .flex-sb-always{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.rev{
	flex-direction: row-reverse;
}
.flex-3items article{
	flex-basis: 32%;
}
.flex-3items img{
	margin-bottom: 15px;
    aspect-ratio: 5/3;
    object-fit: cover;
}
.flex-3items h3{
	font-size: 18px;
	margin-bottom: 15px;
}
@media screen and (max-width:768px){
	.flex,.flex-sb {
		display: block;
	}
    .flex-3items img {
        margin-bottom: 10px;
    }
    .flex-3items h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .flex-3items article {
        margin-bottom: 50px;
    }
}


.f2-bg{
	background: var(--bg-soft);
	padding: 80px 0;
	margin-bottom: 80px;
}
.bk-bg{
	background: #000;
	padding: 80px 0;
	margin-bottom: 80px;
}
.f2-bg section,.f8-bg section{
	margin-bottom: 0;
}
@media screen and (max-width:768px){
	.f2-bg, .f8-bg {
		padding: 50px 0;
		margin-bottom: 50px;
	}
}


.text-r{
	text-align: right;
}
.text-c{
	text-align: center;
}
.key{
    color: var(--key);
}


.sec-title{
    margin-bottom: 80px;
}
.sec-title .title-main{
    position: relative;
    font-size: 16px;
    text-align: center;
}
.sec-title span{
    font-size: 45px;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}
.sec-title p{
    margin: 60px auto 0;
    width: 90%;
    max-width: 700px;
}
.sec-title2{
    margin-bottom: 20px;
}
.sec-title2 h2{
    font-size: 28px;
    font-weight: 400;
    display: flex;
    align-items: center;
	gap: 1rem;
}
.sec-title2 h2::after{
	content: "";
	flex-grow: 1;
	border-top: 1px solid;
}
.sec-line-title{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 50px;
    text-align: right;
}
.sec-line-title h2{
    font-size: 45px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 1em;
}
.sec-line-title h2::before{
    content: "";
    flex-grow: 1;
    border-top: 1px solid;
}
.sec-line-title p{
    margin-top: 30px;
}


.cards{
	margin-bottom: 50px;
	gap: 2%;
}
.cards article{
	flex-basis: 23.5%;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    background: #fff;
}
.cards a{
    display: flex;
    flex-direction: column;
	height: 100%;
}
.card-info{
    background: #fff;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-info h3{
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.card-info>p{
	margin-bottom: 20px;
}
.card-info>time{
    font-size: 13px;
    margin-bottom: 15px;
    color: #949497;
    letter-spacing: 1px;
}
.card-img img{
    object-fit: cover;
    aspect-ratio: 3/2;
}

@media screen and (min-width: 769px) {
  .cards article {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cards article:hover {
    transform: translateY(-4px);
  }
}

@media screen and (max-width:768px){
    .sec-title {
        margin-bottom: 50px;
    }
    .sec-title .title-main {
        font-size: 12px;
    }
    .sec-title span {
        font-size: 26px;
        margin-bottom: 5px;
    }
    .sec-line-title {
        font-size: 13px;
        margin-bottom: 30px;
    }
    .sec-line-title h2 {
        font-size: 30px;
    }
    .sec-line-title p {
        margin-top: 20px;
    }
	.card-info{
		padding: 10px;
	}
	.card-info h3 {
		margin-bottom: 10px;
	}
	.cards.slick-dotted.slick-slider{
		margin-bottom: 80px!important;
	}
	.front-page .cards article{
	    margin-right: 20px;
		margin-bottom: 20px;
    	width: 250px;
	}
	.simple-slider{
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}
	.simple-slider article {
		width: 250px;
		flex: 0 0 250px;
		scroll-snap-align: start;
        margin-bottom: 10px;
	}
}


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

.josefin{
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
}
.serif{
    font-family: "Noto Serif JP", serif;
}


.marker-yellow{
    background: linear-gradient(transparent 60%,#fefd9b 0);
    display: inline!important;
    padding: 0 10px;
}

.tag-area{
    margin-bottom: 20px;	
}
.tag{
    font-size: 12px;
    border: 1px solid #ebebeb;
    color: #949497;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
	margin-bottom: 3px;
	margin-right: 3px;
}

.link-info{
    color: #757578;
    font-size: 14px;
    padding-top: 10px;
    border-top: 1px solid #ebebeb;
	margin-top: auto;
}
.link-pict{
	position: relative;	
}

.link-pict::after{
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background-image: url("../img/arrow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	transition: opacity 0.3s ease-in-out;
}
.link-pict::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("../img/arrow-hover.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 0.3s ease-in-out; /* フェードイン・フェードアウト */
}
.link-a:hover .link-pict::after{
	opacity: 0;
}
.link-a:hover .link-pict::before{
	opacity: 1;
}
.link-text{
	color: blue;
	text-decoration: underline;
}



.link-btn{
    border: 1px solid var(--sub);
    padding: 13px 60px 13px 30px;
    display: inline-block;
    background: var(--sub);
    color: #fff;
    position: relative;
}
.link-btn::after{
    content: "";
    background-image: url("../img/arrow2-w.svg");
    width: 20px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translate(0px, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}
.link-btn:hover::after{
    transform: translate(5px, -50%);
}

.link-btn2 {
	border: 1px solid #333;
	border-radius: 30px;
	padding: 15px 80px;
	font-size: 16px;
	display: inline-block;
	background-color: transparent;
	color: #333;
	transition: all 0.3s ease;
}

.link-btn2:hover {
	background-color: rgba(0, 0, 0, 0.075); /* うっすら背景 */
	border-color: #000;                   /* 枠を濃く */
	transform: translateY(-2px);          /* 少し浮く */
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); /* 影で立体感 */
}

.btn-r{
	text-align: right;
}

.btn-bk{
    background: #000;
    padding: 10px 20px;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 1px;
}

.btn-flex2{
    display: flex;
    justify-content: center;
    gap: 30px;
}
.btn-flex2 a{
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #000;
    border-radius: 50px;
    padding: 20px 40px;
}
.btn-flex2 a img{
    width: 20px;
}
.bk-btn{
    background: #000;
    color: #fff;
}

.inner-item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover{
    height: 100%;
    object-fit: cover;
}
.pattern-bg1{
    background-color: transparent;
    background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 25px 25px, 25px 25px, 5px 5px, 5px 5px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.img-pattern{
    background-color: #555555;
    opacity: 0.3;
    background-image: radial-gradient(#000000 1px, transparent 1px), radial-gradient(#000000 1px, #555555 1px);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}


@media screen and (max-width:768px){
	.link-btn {
		padding: 12px;
		width: 90%;
		display: block;
		margin: auto;
		text-align: center;
		font-size: 14px;
	}
	.btn-r{
		text-align: center;
	}
}

/**********************************************************************/
/*************************  アコーディオンメニュー *************************/
/**********************************************************************/

.accordion{
	border: 2px solid #ddd;
	margin-bottom: 50px;
}
.accordion-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f1f1f4;
}
.accordion-pict{
	width: 20px;
}
.accordion-header p{
	flex-basis: calc(100% - 80px);
}
.toggle-pict{
	width: 30px;
}
.toggle-pict img{
	transition: opacity 0.2s;
}
.accordion-content{
    padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-out;
}
.accordion-content.open{
	opacity: 1;
	visibility: visible;
	padding: 20px;
}
.accordion-content:not(:last-of-type).open{
	border-bottom: 2px solid #ddd;
}
.accordion-content .tag{
	margin-bottom: 0;
	cursor: pointer;
}

@media screen and (max-width:768px){
	.accordion {
		margin-bottom: 30px;
	}
	.accordion p{
		line-height: 1.6;
	}
	.accordion-header {
		padding: 5px 10px;
	}
	.toggle-pict {
		width: 20px;
	}
	.accordion-content{
		padding: 0 10px;
	}
	.accordion-content.open {
		padding: 10px;
	}	
}




/**********************************************************************/
/*************************  ホバーアニメーション  *************************/
/**********************************************************************/
@media screen and (min-width:768px){
	.hov-underline {
	  position: relative;
	  display: inline-block;
	  text-decoration: none;
	  color: inherit;
	}

	/* 下線の初期状態（非表示） */
	.hov-underline::after {
	  content: "";
	  position: absolute;
	  bottom: -5px;
	  left: 0;
	  height: 2px;
	  width: 100%;
	  background: var(--key);
	  transform: scaleX(0);     /* 横幅を0に */
	  transform-origin: left;   /* 左から伸びる */
	  transition: transform 0.3s ease;
	}
	/* ホバー時にアンダーラインを伸ばす */
	.hov-underline:hover::after {
	  transform: scaleX(1);     /* 横幅を元に戻す */
	}

	.hov-zoom {
	  overflow: hidden;
	}
	.hov-zoom img {
	  transition: transform 0.4s ease, opacity 0.4s ease;
	}
	.hov-zoom:hover img {
	  transform: scale(1.05);  /* 少し拡大 */
	  opacity: 0.8;            /* ちょっと薄くする */
	}

	.hov-opa{
		transition: opacity 0.3s ease;
	}
	.hov-opa:hover{
		opacity: 0.8;
	}
	.hov-btn {
		background-color: transparent;
		transition: all 0.3s ease;
	}
	.hov-btn:hover {
		background-color: rgba(0, 0, 0, 0.05);
		border-color: var(--key);
        color: var(--key);
		transform: translateY(-2px);
	}

	.hov-up {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.hov-up:hover {
		transform: translateY(-4px);
	}
}


/**********************************************************************/
/*****************************  ヘッダー  *****************************/
/**********************************************************************/

.header-fix{
    border-bottom: 1px solid #f1f1f4;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    background: #fff;
	height: 72px;
    padding: 2px;
}
.header-container{
    display: flex;
    justify-content: space-between;
	align-items: center;
    height: 100%;
}
.site-title{
    margin: 0;
}
.logo-lockup{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
}
.logo-mark{
    display: block;
    width: auto;
    height: 52px;
    flex-shrink: 0;
}
.logo-name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    letter-spacing: 0.12em;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
}
.logo-name-corp{
    font-size: 13px;
}
.logo-name-main{
    font-size: 20px;
}
.logo-name-sub{
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #555;
    margin-top: 2px;
    font-weight: 400;
}
.header-logo .logo-lockup{
    height: 68px;
}
.header-container nav{
	flex-basis: calc(100% - 250px);
}
@media screen and (max-width:1150px){
	.header-container nav{
		display: none;
	}
}

.header-nav{
    display: flex;
    align-items: center;
    justify-content: right;
	margin-right: 25px;
}
.header-nav>li{
	margin-left: 3%;
	font-size: 14px;
	position: relative;
}
.header-nav>li::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}
.header-nav>li ul {
    position: absolute;
    top: 100%;
    left: 50%;
    background: #fff;
    padding: 20px;
    white-space: nowrap;
    width: max-content;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    letter-spacing: 1px;
    margin-top: 10px;
    transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}
.header-nav>li ul li:not(:last-of-type){
	padding-bottom: 15px;
}
.header-nav>li:hover ul{
	opacity: 1;
	visibility: visible;
}
.header-nav-btn{
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid;
}

@media screen and (max-width:768px){
    .header-fix{
        height: 52px;
    }
    .header-logo {
        height: 50px;
    }
    .header-logo .logo-lockup {
        height: 50px;
        gap: 8px;
    }
    .header-logo .logo-mark {
        height: 36px;
    }
    .header-logo .logo-name-corp {
        font-size: 9px;
    }
    .header-logo .logo-name-main {
        font-size: 13px;
    }
    .header-logo .logo-name-sub {
        display: none;
    }
}


/**********************************************************************/
/*************************  ハンバーガーメニュー  *************************/
/**********************************************************************/

.hamburger-area {
    position: fixed;
    top: 19px;
    right: 28px;
    z-index: 100;
}
.hamburger {
  position: relative;
  width: 30px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
}
/* 各線（span） */
.hamburger span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease;
}
/* 上の線 */
.hamburger span:nth-child(1) {
  top: 0;
}
/* 真ん中の線 */
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
/* 下の線 */
.hamburger span:nth-child(3) {
  bottom: 0;
}
/* ✕ に変わるときの状態 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 50%;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: auto;
  top: 50%;
}
/* ドロワーメニュー初期状態 */
.drawer-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  transition: right 0.4s ease;
  z-index: 110;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.drawer-menu.open {
  right: 0;
}
body.drawer-open,
html:has(body.drawer-open) {
  overflow: hidden;
}
.drawer-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
}
.drawer-close span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    top: 50%;
    left: 0;
}
.drawer-close span:nth-child(1) {
    transform: rotate(45deg);
}
.drawer-close span:nth-child(2) {
    transform: rotate(-45deg);
}
@media screen and (max-width:768px) {
    .drawer-close {
        top: 14px;
        right: 16px;
    }
}
.drawer-in{
    height: 100%;
    align-items: stretch;
    flex-wrap: nowrap;
    max-width: 1800px;
    margin: auto;
}
.drawer-img{
    flex: 1;
    overflow: hidden;
}
.drawer-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}
.drawer-text{
	flex-basis: 70%;
    max-width: 1100px;
    padding: 48px 56px 48px 60px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    justify-content: center;
}
.drawer-logo{
    margin-bottom: 28px;
    flex-shrink: 0;
}
.drawer-logo .logo-mark {
    height: 64px;
}
.drawer-body{
    min-height: 0;
    flex-wrap: nowrap;
    gap: 32px;
    align-items: flex-start;
}
.drawer-cols{
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 32px;
    align-items: flex-start;
}
.drawer-col{
    flex: 1;
    min-width: 0;
}
.drawer-group{
    margin-bottom: 40px;
}
.drawer-group:last-child{
    margin-bottom: 0;
}
.drawer-group .drawer-group-title{
    color: var(--sub);
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    line-height: 1.3;
}
.drawer-group li{
    margin-bottom: 15px;
}
.drawer-group li a{
    position: relative;
    display: inline-block;
    padding-left: 12px;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: #333;
}
.drawer-group li a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3.5px 0 3.5px 5px;
    border-color: transparent transparent transparent #cfcfcf;
}
.drawer-aside{
    flex-basis: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: flex-start;
}
.drawer-cta{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.drawer-contact{
    width: 100%;
    margin: 0;
}
.drawer-contact a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.drawer-aside .contact-btn{
    background: var(--sub);
    color: #fff;
}
.drawer-aside .contact-btn a{
    border-color: var(--sub);
    color: #fff;
}
.drawer-sns-area{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 0 8px;
}
.drawer-sns-area a{
    width: 38px;
}
.drawer-tel{
    margin-top: 28px;
    text-align: left;
    border: 1px solid;
    padding: 20px;
    border-radius: 20px;
}
.drawer-tel-label{
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin-bottom: 10px;
}
.drawer-tel-number{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 33px;
    font-weight: 700;
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #333;
}
.drawer-tel-icon{
    display: inline-flex;
    width: 28px;
    flex-shrink: 0;
    transform: translateY(-3px);
}
.drawer-tel-hours{
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin-top: 6px;
    color: #666;
}
.drawer-btn {
    background: var(--sub);
    text-align: center;
    color: #fff;
    width: 90%;
    margin: 0 auto 20px;
}
.drawer-btn a {
    display: block;
    padding: 15px 0;
}
.drawer-insta {
    width: 80%;
    margin: 40px auto 30px;
}
.drawer-l {
    flex-basis: 62%;
}
.drawer-nav-top nav, .drawer-nav-foot nav {
    flex-basis: 50%;
}
.drawer-flex nav {
    margin-bottom: 30px;
}
.drawer-flex h2 {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    position: relative;
    font-weight: bold;
}
.drawer-flex h2::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-image: url("../img/drawer-arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    top: 13px;
    left: -27px;
}
.drawer-flex nav li {
    margin-bottom: 26px;
}
.drawer-nav-foot nav div{
	margin-bottom: 40px;
}

@media screen and (max-width:1300px){
    .drawer-img{
        display: none;
    }
    .drawer-in {
        justify-content: center;
    }
    .drawer-text{
        padding: 48px 60px 48px;
        flex-basis: 100%;
    }
}

@media screen and (max-width:1100px){
}

@media screen and (max-width:768px){
	.hamburger-area {
		top: 14px;
		right: 16px;
	}
    .drawer-menu {
        overflow-y: auto;
    }
    .drawer-in {
        height: auto;
        min-height: 100%;
        display: block;
    }
	.drawer-text {
		padding: 72px 28px 100px;
        overflow: visible;
        display: block;
	}
    .drawer-logo .logo-mark {
        height: 48px;
    }
    .drawer-logo .logo-name-main {
        font-size: 15px;
    }
    .drawer-body {
        display: block;
    }
    .drawer-cols {
        display: block;
        margin-bottom: 36px;
    }
    .drawer-col {
        margin-bottom: 8px;
    }
    .drawer-group {
        margin-bottom: 28px;
    }
    .drawer-group .drawer-group-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .drawer-group li {
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .drawer-group li a {
        font-size: 14px;
        display: block;
    }
    .drawer-aside {
        width: 100%;
    }
    .drawer-cta {
        margin-bottom: 24px;
    }
    .drawer-contact {
        width: 100%;
        margin: 0 0 10px;
    }
    .drawer-contact a {
        padding: 15px;
        font-size: 16px;
    }
    .drawer-sns-area {
        justify-content: flex-start;
        margin-bottom: 28px;
    }
    .drawer-sns-area a {
        width: 44px;
    }
    .drawer-tel {
        margin-top: 0;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 16px;
    }
    .drawer-tel-number {
        font-size: 26px;
        justify-content: center;
    }
	.drawer-l {
		padding-left: 30px;
	}
	.drawer-flex nav li {
		position: relative;
		border-bottom: 1px solid #aaa;
		margin-bottom: 18px;
	}
	.drawer-flex nav li a {
		font-size: 14px;
		padding-bottom: 10px;
		display: block;
	}
	.drawer-flex nav li::after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		background-image: url("../img/icon-btn-right-w.png");
		background-size: contain;
		background-repeat: no-repeat;
	}
}

/**********************************************************************/
/***************************  フロントページ  ***************************/
/**********************************************************************/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.home{
    margin-top: 70px;
}
.front-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.front-slider-wrapper{
    margin: 0 auto;
    overflow: hidden;
}
.front-slider-area{
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.front-slider .slick-track{
    height: calc(100vh - 300px);
}
.front-slider .slick-slide{
    height: 100%;
}

.front-slider .slick-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    animation: none;
    transform: scale(1);
}
.front-slider .slick-slide img.zooming{
    animation: zoomInOut 15s ease-in-out infinite alternate;
}
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}
.front-slider .slick-dots{
    display: none!important;
}
.f-news{
    margin-bottom: 100px;
}
.f-news-in{
    justify-content: center;
    background: var(--bg-soft);
    padding: 40px;
    margin: auto;
}
.f-news-title{
    display: flex;
    flex-direction: column;
    border-right: 1px solid;
    padding-right: 40px;
    margin-right: 40px;
    justify-content: center;
    gap: 20px;
}
.f-news-title .sec-title{
    margin: 0;
}
.f-news-item{
    padding: 10px 0;
}
.f-news-item:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}
.f-news-item a{
    align-items: center;
}
.f-news-item a time{
    font-size: 14px;
    margin-right: 20px;
}
.f-news-item h3{
    padding-right: 60px;
    min-width: 200px;
}
.f-concept-l{
    flex-basis: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    text-align: center;
}
.f-concept-l h3{
    font-size: 14px;
}
.f-concept-l h3 span{
    display: block;
    font-size: 24px;
    border-bottom: 1px solid #999;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.f-concept-l a{
    align-self: center;
    letter-spacing: 2px;
}
.f-concept-l-img{
    flex-grow: 1;
}
.f-concept-r{
    flex-basis: 48%;
}
.f-concept-r img, .f-concept-l-img img{
    height: 100%;
    object-fit: cover;
}
.f-event{
    background: var(--bg-soft);
    padding: 80px 0;
}
.f-event-l{
    flex-basis: 120px;
    display: flex;
}
.f-event-l-in{
    writing-mode: vertical-rl;
}
.f-event-title h2{
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.f-event-title p{
    line-height: 1.5;
    flex-grow: 1;
    border-right: 1px solid #333;
    padding-right: 10px;
}
.f-event-r{
    flex-basis: calc(100% - 220px);
}
.f-event-items{
    gap: 50px 6%;
    margin-bottom: 40px;
}
.f-event-item{
    flex-basis: 47%;
}
.f-event-item a{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.f-event-img{
    background: #fff;
}
.f-event-img img{
    aspect-ratio: 1/1;
    object-fit: contain;
}
.f-event-status{
    width: 100%;
    display: inline-block;
    background: red;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    letter-spacing: 2px;
}
.f-event-status.open{
    background-color: var(--sub);
}
.f-event-status.closed{
    background-color: var(--key);
}
.f-event-item h3{
    font-size: 18px;
    background: #fff;
    padding: 20px;
    flex-grow: 1;
	font-family: "Noto Sans JP", sans-serif;
}
.f-lineup-items{
    gap: 10px;
}
.f-lineup-item{
    flex: 0 0 calc(50% - 5px);
    background: var(--bg-soft);
}
.f-lineup-img img{
    aspect-ratio: 3/2;
    object-fit: cover;
    transition: filter 0.8s ease;
}
.f-lineup-img img:hover{
    filter: brightness(60%);
}
.f-lineup-info{
    background: var(--bg-soft);
    padding: 36px 28px;
    text-align: center;
    position: relative;
}
.f-lineup-info .f-lineup-lead,
.f-lineup-info h4{
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.f-lineup-info h3{
    font-size: 24px;
    margin-bottom: 16px;
}
.f-lineup-info p{
    font-size: 14px;
    line-height: 1.8;
}
.f-lineup .text-c{
    margin-top: 40px;
}
.f-works{
    background: var(--bg-soft);
    padding: 80px 0;
}
.f-works a{
    transition: opacity 0.3s ease;
}
.f-works a:hover{
    opacity: 0.7;
}
.f-works-slider{
    margin-bottom: 50px;
}
.f-works-item{
    padding: 0 10px;
}
.f-works-img{
    aspect-ratio: 1/1;
    overflow: hidden;
}
.f-works-head{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 90%;
    margin: 10px auto;
}
.f-works-head .works-cate{
    flex-shrink: 0;
}
.f-works-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.f-blog-items .card-img img {
    aspect-ratio: 3/2;
}
.f-voice{
    background: #fff;
}
.f-voice .sec-line-title{
    margin-bottom: 56px;
}
.f-voice-block{
    padding: 0;
}
.f-voice-block--video{
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid #e5e2da;
}
.f-voice-block--articles{
    padding-bottom: 8px;
}
.f-voice-block--articles-first{
    padding-top: 8px;
}
.f-voice-block .voice-items{
    margin-bottom: 0;
}
.f-voice-more{
    margin-top: 40px;
}
/* フロント：サブ見出しは線なし・余白で区切る */
.f-voice .voice-archive-head--simple{
    margin-bottom: 32px;
}
.f-voice .voice-archive-head--simple.voice-archive-head--center .voice-archive-head-title::before,
.f-voice .voice-archive-head--simple.voice-archive-head--center .voice-archive-head-title::after,
.f-voice .voice-archive-head--simple.voice-archive-head--articles .voice-archive-head-title::after{
    content: none;
    display: none;
}
.f-voice .voice-archive-head--simple.voice-archive-head--center .voice-archive-head-title{
    font-size: 20px;
    display: block;
}
.f-voice .voice-archive-head--simple.voice-archive-head--articles .voice-archive-head-title{
    font-size: 20px;
    font-weight: 500;
    display: block;
}
.f-voice-excerpt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 16px;
}
.f-works-item h3{
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    text-align: justify;
}
.f-newsletter{
    padding: 80px 0;
    background: var(--bg-soft);
    margin-bottom: 0;
}
.f-newsletter-in{
    align-items: flex-start;
    gap: 60px;
}
.f-newsletter-cover{
    flex: 0 0 34%;
    max-width: 320px;
}
.f-newsletter-cover-link{
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.f-newsletter-cover img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.f-newsletter-cover-label{
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--sub);
    margin-bottom: 6px;
}
.f-newsletter-cover h3{
    font-size: 22px;
    margin-bottom: 8px;
}
.f-newsletter-cover-note{
    font-size: 13px;
    color: #777;
}
.f-newsletter-archive{
    flex: 1 1 auto;
    min-width: 0;
}
.f-newsletter-archive-title{
    font-size: 22px;
    margin-bottom: 8px;
}
.f-newsletter-archive-lead{
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}
.f-newsletter-year{
    border-bottom: 1px solid #e5e5e5;
}
.f-newsletter-year-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: var(--key);
    text-align: left;
}
.f-newsletter-year-btn::after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--key);
    border-bottom: 2px solid var(--key);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.f-newsletter-year.is-open .f-newsletter-year-btn::after{
    transform: rotate(-135deg);
    margin-top: 6px;
}
.f-newsletter-months{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 18px;
}
.f-newsletter-year.is-open .f-newsletter-months{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.f-newsletter-months a,
.f-newsletter-months span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 8px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: var(--key);
    font-size: 15px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.f-newsletter-months a:hover{
    background: var(--sub);
    border-color: var(--sub);
    color: #fff;
}
.f-newsletter-empty{
    padding: 20px 0 40px;
    color: #666;
}
.nl-viewer{
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.nl-viewer[hidden]{
    display: none;
}
.nl-viewer-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}
.nl-viewer-panel{
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    height: min(92vh, 980px);
    background: #1f1f1f;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.nl-viewer-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}
.nl-viewer-title{
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.nl-viewer-actions{
    display: flex;
    align-items: center;
    gap: 14px;
}
.nl-viewer-open{
    font-size: 13px;
    color: var(--sub);
    text-decoration: underline;
}
.nl-viewer-close{
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--key);
}
.nl-viewer-frame-wrap{
    flex: 1 1 auto;
    min-height: 0;
    background: #525659;
}
.nl-viewer-frame-wrap iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #525659;
}
.insta{
    padding: 80px 0;
    margin: 0;
}
.insta-info{
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
}
.insta-info a{
    margin-top: auto;
    align-self: center;
}
.insta-logo{
    width: 60px;
    margin: 0 auto 10px;
}
.insta-logo-text{
    max-width: 300px;
    margin: 0 auto 20px;
    text-align: right;
    font-size: 14px;
}
.insta-items{
    flex-basis: 68%;
}
.insta-items>a{
    display: block;
    flex-basis: 24.5%;
    margin-bottom: 5px;
}
.insta-items>a img{
    aspect-ratio: 1/1;
    object-fit: cover;
}
@media screen and (max-width:768px){
    .home{
        margin-top: 50px;
    }
    .front-slider-wrapper {
        padding: 0;
        height: auto;
        min-height: auto;
    }
    .f-slider-in div {
        width: 60px;
        margin: 0 auto 20px;
    }
    .f-slider-in h1 {
        font-size: 20px;
        text-align: center;
    }
    .front-slider.slick-slider {
        margin-bottom: 0;
    }
    .f-news {
        margin-bottom: 50px;
        padding: 0;
    }
    .f-news-in {
        padding: 30px 20px;
    }
    .f-news-title {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }    
    .f-news-title .sec-title .title-main {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-direction: row-reverse;
    }
    .f-news-title .sec-title span {
        font-size: 26px;
        margin-bottom: 5px;
    }
    .f-news-item {
        padding: 5px 0;
    }
    .f-news-item:nth-of-type(n + 3){
        display: none;
    }
    .f-news-item a time {
        font-size: 12px;
        margin-bottom: 2px;
        display: inline-block;
    }
    .f-news-item h3 {
        font-size: 14px;
    }
    .f-news-items{
        margin-bottom: 30px;
    }
    .btn{
        text-align: right;
    }
    .f-news .btn a {
        padding: 13px 30px;
        font-size: 14px;
    }
    .f-concept-r img{
        height: 220px;
        width: 90%;
        margin: auto;
    }
    .f-event {
        padding: 50px 0;
    }
    .f-event-items {
        margin-bottom: 30px;
    }
    .f-event-l {
        width: 100%;
        display: block;
        margin-bottom: 30px;
        text-align: right;
        font-size: 13px;
    }
    .f-event-l-in{
        writing-mode: horizontal-tb;
        display: block;
    }
    .f-event-title h2 {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 1em;
    }
    .f-event-title h2::before{
        content: "";
        flex-grow: 1;
        border-top: 1px solid;
    }
    .f-event-subtitle{
        margin: 0;
    }
    .f-event-title p{
        border: none;
        padding: 0;
    }
    .f-event-title > p:last-child{
        margin-top: 5px;
    }
    .f-event-r {
        width: 100%;
    }
    .f-event-status {
        padding: 6px;
        font-size: 15px;
    }
    .f-event-item h3 {
        font-size: 14px;
    }
    .f-concept-l {
        margin-bottom: 30px;
    }
    .f-concept-l h3 span {
        font-size: 20px;
    }
    .f-concept-l a {
        padding: 15px 50px;
        font-size: 14px;
    }
    .f-concept-l>div{
        display: none;
    }
    .f-lineup-items {
        gap: 0;
    }
    .f-lineup-item {
        flex: 0 0 100%;
        margin-bottom: 20px;
    }
    .f-lineup-info {
        padding: 30px 15px;
    }
    .f-lineup-info h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }
    .f-lineup-info h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .f-lineup-info p {
        font-size: 13px;
    }
    .f-works {
        padding: 40px 0;
    }
    .f-works-slider {
        margin-bottom: 30px;
    }
    .f-works-item h3 {
        font-size: 14px;
        text-align: left;
    }
    .f-voice {
        padding: 50px 0;
    }
    .f-voice .sec-line-title {
        margin-bottom: 40px;
    }
    .f-voice-block--video {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }
    .f-voice-more {
        margin-top: 28px;
    }
    .f-newsletter {
        padding: 50px 0;
    }
    .f-newsletter-in {
        flex-direction: column;
        gap: 36px;
    }
    .f-newsletter-cover {
        flex: none;
        margin: 0 auto;
    }
    .f-newsletter-cover h3 {
        font-size: 18px;
    }
    .f-newsletter-archive-title {
        font-size: 18px;
        text-align: center;
    }
    .f-newsletter-archive-lead {
        text-align: center;
        margin-bottom: 16px;
    }
    .f-newsletter-year-btn {
        font-size: 16px;
        padding: 16px 2px;
    }
    .f-newsletter-year.is-open .f-newsletter-months {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .f-newsletter-months a,
    .f-newsletter-months span {
        min-height: 44px;
        font-size: 14px;
    }
    .nl-viewer {
        padding: 0;
    }
    .nl-viewer-panel {
        width: 100%;
        height: 100%;
    }
    .nl-viewer-bar {
        padding: 10px 12px;
    }
    .nl-viewer-title {
        font-size: 13px;
    }
    .insta {
        padding: 50px 0;
    }
    .insta-items {
        margin-bottom: 20px;
    }
    .insta-info {
        margin-bottom: 40px;
    }
    .insta-logo {
        width: 40px;
    }
    .insta-logo-text {
        max-width: 230px;
    }
    .insta-p{
        text-align: center;
        margin-bottom: 30px;
    }
    .insta-items>a {
        flex-basis: 49%;
    }
}


/**********************************************************************/
/******************************  footer  ******************************/
/**********************************************************************/
.map-area{
    height: 400px;
}
.footer{
    border-top: 1px solid #f1f1f4;
    padding-top: 50px;
    background: #fff;
}
.footer-wrapper{
	margin-bottom: 50px;
}
.footer-info{
	flex-basis: 280px;
}
.footer-logo{
    margin-bottom: 20px;
}
.footer-logo .logo-mark{
    height: 56px;
}
.footer-info p{
	margin-bottom: 20px;
}
.footer-sns{
    display: flex;
    gap: 15px;
    justify-content: center;
}
.footer-sns a{
	flex-basis: 30px;
}
.footer-wrapper nav{
	flex-basis: calc(100% - 330px);
    justify-content: flex-end;
}
.footer-support-area, .footer-company-area{
	flex-basis: 26%;
}
.footer-contact-area{
    flex-basis: 38%;
    padding-left: 20px;
}
.footer-contact-area li{
    border-radius: 10px;
}
.footer-nav h3{
    font-size: 20px;
    border-bottom: 2px solid var(--key);
    margin-bottom: 25px;
    padding-bottom: 10px;
    text-align: center;
}
.footer-nav li a{
	margin-bottom: 20px;
}
.footer-nav li ul li{
	font-size: 14px;
	margin-left: 10px;
	white-space: nowrap;
    height: 39px;
}
.footer-nav li ul li::before{
	content: "- "
}
.footer-nav .drawer-sns-area {
    width: 100%;
    margin: 0;
}
.footer-contact{
    margin-bottom: 10px!important;
}
.footer-contact a{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 13px 10px;
    border-radius: 10px;
    letter-spacing: 3px;
    justify-content: center;
    font-size: 18px;
    border: 1px solid;
}

/* フッターナビ（カテゴリー分け） */
.footer-nav-groups{
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.footer-nav-col{
    flex: 1;
    min-width: 0;
}
.footer-nav-heading{
    color: var(--sub);
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    margin-top: 24px;
    line-height: 1.3;
    border-bottom: none;
    text-align: left;
    padding-bottom: 0;
}
.footer-nav-col .footer-nav-heading:first-child{
    margin-top: 0;
}
.footer-nav-col ul{
    margin-bottom: 4px;
}
.footer-nav-col ul li{
    margin-bottom: 8px;
}
.footer-nav-col ul li a{
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #333;
    display: inline-block;
    margin-bottom: 10px;
}
.footer-nav-cta{
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.footer-cta-btn{
    width: 100%;
}
.footer-cta-btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 10px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.footer-cta-btn.contact-btn a{
    color: #fff;
    border-color: var(--sub);
}
.footer-cta-btn.event-btn a{
    border-color: #ccc;
}
.footer-sns-area{
    display: flex;
    gap: 0.8rem;
    margin-top: 8px;
    justify-content: end;
    padding: 0 6px;
}
.footer-sns-area a{
    width: 38px;
}

@media screen and (max-width:1100px){
    .footer-nav-groups{
        gap: 24px;
    }
    .footer-nav-cta{
        flex-basis: 170px;
    }
}

@media screen and (max-width:768px){
    .footer-nav-groups{
        flex-wrap: wrap;
        gap: 0;
    }
    .footer-nav-col{
        width: 100%;
        flex: none;
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }
    .footer-nav-cta{
        flex-basis: auto;
        border-bottom: none;
        padding-top: 24px;
    }
    .footer-nav-heading{
        margin-top: 20px;
    }
    .footer-nav-col ul li a{
        font-size: 13px;
    }
}
.event-btn{
    background: #ccc;
}
.event-btn a{
    border-color: #ccc;
}
.contact-btn{
    color: #fff;
    background: var(--sub);
}
.contact-btn a{
    border-color: var(--sub);
}
.catalog-btn{
    background: var(--bg-soft);
}
.copyright {
    background: var(--bg-soft);
    padding: 10px;
    text-align: center;
    font-size: 13px;
}
.bottom-nav{
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 100%;
    justify-content: center;
    background: #fff;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid #f1f1f4;
	transition: bottom 0.3s ease;
    z-index: 100;
}
.bottom-nav.show{
	bottom: 0;
}
.bottom-nav.hide{
	bottom: -100px;
}
.bottom-nav a{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 80px;
    border-radius: 10px;
    font-size: 20px;
}
.bottom-tel{
    background: #ccc;
	border: 1px solid #ccc;	
}
.bottom-mail{
	background: var(--sub);
	border: 1px solid var(--sub);
    color: #fff;
}
.bottom-catalog{
	background: var(--bg-soft);
	border: 1px solid #333;
}
.bottom-nav a img{
	width: 25px;
}
.grecaptcha-badge {
  transition: bottom 0.3s ease !important;
  z-index: 1000;
}

@media screen and (max-width:768px){
	.footer {
		padding-top: 30px;
	}
	.footer-wrapper {
		margin-bottom: 30px;
	}
	.footer-logo {
		margin-bottom: 0px;
	}
    .footer-logo .logo-lockup {
        justify-content: center;
    }
    .footer-logo .logo-mark {
        height: 44px;
    }
    .footer-logo .logo-name-main {
        font-size: 14px;
    }
    .footer-info {
        margin-bottom: 30px;
        text-align: center;
    }
	.footer-info p {
		margin-bottom: 10px;
	}
    .footer-contact-area {
        padding-left: 0;
    }
    .footer-contact-area li a {
        margin-bottom: 10px;
    }
    .footer-tel a {
        font-size: 20px;
    }
    .footer-contact a {
        font-size: 16px;
    }

	.footer-sns {
		margin-bottom: 30px;
        margin-top: 40px;
	}
	.footer-wrapper nav {
		margin: 0 5%;
	}
    .footer-nav{
        margin-bottom: 30px;
    }
    .footer-nav h3 {
        font-size: 16px;
    }
    .footer-nav li {
        margin-bottom: 30px;
        font-size: 14px;
    }
    .footer-nav>ul>li>ul{
        margin-top: 30px;
    }
    .footer-nav>ul>li>ul li {
        height: auto;
    }
    .footer-company-area{
        margin-bottom: 50px;
    }
    
	.copyright {
		font-size: 12px;
	}
	.bottom-nav{
		padding: 8px;
	}
	.bottom-nav a {
		padding: 10px;
		border-radius: 5px;
		font-size: 14px;
		flex-basis: 30%;
		display: block;
		text-align: center;
	}
	.bottom-nav a img {
		width: 23px;
		margin: 0 auto 5px;
	}
    
}

/**********************************************************************/
/*****************************  page共通  *****************************/
/**********************************************************************/
.page, .single, .archive{
	margin-top: 72px;
}
.page-top{
    margin-bottom: 70px;
    text-align: center;
}
.page-top h2{
    font-size: 28px;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-family: "Noto Serif JP", serif;
}
.page-top > p{
    margin: 28px auto 0;
    max-width: 760px;
    text-align: center;
    line-height: 2.2;
}
.breadcrumb{
    padding: 10px;
    border-bottom: 1px solid #f1f1f4;
    background: #fff;
    margin-bottom: 100px;
}
.breadcrumb ul{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;
    flex-wrap: wrap;
}
.breadcrumb ul li{
    letter-spacing: 2px;
    line-height: 1.5;
}
.breadcrumb ul li:not(:last-of-type)::after{
	content: "＞";
	font-size: 12px;
	margin: 0 15px;
}
.page-header{
    position: relative;
    margin-bottom: 0;
}
.page-header-img{
    height: 300px;
}
.header-text{
    color: #fff;
    font-size: 44px;
    text-align: center;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 3px;
    font-family: "Noto Serif JP", serif;
}
.header-text span{
    display: block;
    font-size: 18px;
}
.comingsoon p{
    text-align: center;
    font-size: 18px;
}
.thanks-page h2{
    font-size: 30px;
    text-align: center;
    margin-bottom: 50px;
}
.thanks-main{
    padding: 80px 0 100px;
}
.thanks-main p{
    font-size: 16px;
    line-height: 2;
    text-align: center;
}
.thanks-main p + p{
    margin-top: 1em;
}
.thanks-note{
    margin-top: 2em;
    font-size: 14px;
}
.thanks-back{
    margin-top: 60px;
}
.junbichu{
    padding-top: 120px;
    text-align: center;
}
.junbichu h2{
    font-size: 30px;
    margin-bottom: 60px;
}
.junbichu p{
    font-size: 18px;
}


@media screen and (max-width:768px){
    .page, .single, .archive {
        margin-top: 52px;
    }
	.breadcrumb {
		padding-bottom: 10px;
		margin-bottom: 30px;
	}
    .breadcrumb ul {
        font-size: 12px;
        gap: 5px;
    }
    .breadcrumb ul li:not(:last-of-type)::after {
        margin: 0 10px;
    }
    .page-header-img {
        height: 220px;
    }
    .header-text {
        font-size: 32px;
    }
    .header-text span {
        font-size: 16px;
    }
    .page-top{
        margin-bottom: 40px;
    }
    .page-top h2 {
        font-size: 22px;
    }
    .page-top > p {
        margin-top: 20px;
        text-align: left;
        line-height: 2;
    }
    .thanks-page h2 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
    }
    .thanks-main {
        padding: 50px 0 70px;
    }
    .thanks-main p {
        text-align: left;
    }
    .thanks-back {
        margin-top: 40px;
    }
}


/**********************************************************************/
/**************************  カンパニーページ  **************************/
/**********************************************************************/
.company-page table, .company-page td, .company-page th {
    border: none;
}
.company-message-flex{
    margin-bottom: 40px;
    align-items: center;
}
.company-message-img{
    flex-basis: 350px;
}
.company-message-img img{
    object-fit: cover;
    height: 100%;
}
.company-message-p{
    margin-bottom: 40px;
}
.company-message-info{
    flex-basis: calc(100% - 380px);
}
.company-message-info h3{
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.company-message-info h4{
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.company-message-info p{
    line-height: 1.9;
    letter-spacing: 1px;
}
.company-message-info p:first-of-type{
    margin-bottom: 16px;
}
.company-message-cert{
    display: block;
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 1px;
}
.company-quals{
    margin-bottom: 80px;
    padding: 44px 40px 48px;
    background: var(--bg-soft);
    box-sizing: border-box;
}
.company-quals-title{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 0;
    border-bottom: none;
    color: var(--key);
}
.company-quals-title::after{
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    background: var(--sub);
    margin: 14px auto 0;
}
.company-quals-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.company-quals-item{
    background: #fff;
    padding: 22px 24px 24px;
    border-left: 4px solid var(--sub);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.company-quals-name{
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.55;
    margin: 0 0 10px;
    color: #5c4a32;
}
.company-quals-note{
    font-size: 13px;
    line-height: 1.85;
    letter-spacing: 0.3px;
    color: #555;
    margin: 0;
}
.company-message2-img{
    flex-basis: 52%;
}
.company-message2-info{
    flex-basis: 45%;
}
.ceo-name{
    line-height: 1.7;
    margin-top: 15px;
}
.ceo-name span{
    font-size: 20px;
    font-weight: 500;
}

.company-sec-title{
    background-image: url("../img/beige-bg.png");
    padding: 30px 0;
    margin-bottom: 80px;
}
.company-sec-title h2{
    max-width: 1000px;
    width: 90%;
    margin: auto;
    border-left: 5px solid;
    padding: 5px 20px;
    font-size: 18px;
}
.company-sec-title h2 span{
    display: block;
    font-size: 40px;
}
.company-sub-title{
    margin: 0 auto 50px;
}
.company-sub-title div{
    display: flex;
    gap: 80px;
    align-items: center;
}
.company-sub-title>div::before, .company-sub-title>div::after {
    content: "";
    flex-grow: 1;
    border-top: 1px solid;
}
.company-sub-title div h3{
    text-align: center;
    font-size: 16px;
}
.company-sub-title div h3 span{
    display: block;
    font-size: 40px;
    line-height: 1.2;
}

/* 山家工務店の特徴 */
.company-features{
    margin-bottom: 80px;
}
.company-features-img{
    margin-bottom: 30px;
}
.company-features-img img{
    width: 100%;
    height: auto;
    display: block;
}
.company-features-text h3{
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 18px;
    line-height: 1.6;
}
.company-features-text p{
    line-height: 1.9;
    letter-spacing: 1px;
    margin-bottom: 1em;
}
.company-features-text p:last-child{
    margin-bottom: 0;
}

/* 家づくりへの5つの想い */
.company-thoughts{
    margin-bottom: 80px;
    padding: 70px 0;
    background: var(--bg-soft);
}
.company-thoughts .company-sec-title{
    margin-bottom: 50px;
}
.thoughts-items{
    display: grid;
    gap: 28px;
}
.thought-item{
    display: flex;
    align-items: stretch;
    gap: 32px;
    background: #fff;
    padding: 20px;
}
.thought-img{
    flex: 0 0 38%;
    max-width: 380px;
    overflow: hidden;
}
.thought-img img{
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}
.thought-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px 8px 0;
}
.thought-num{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    letter-spacing: 2px;
    color: var(--sub);
    font-weight: 600;
}
.thought-num span{
    font-family: "Josefin Sans", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
}
.thought-info h3{
    font-size: 22px;
    margin-bottom: 12px;
    letter-spacing: 2px;
}
.thought-info > p:last-child{
    margin: 0;
    line-height: 1.9;
    letter-spacing: 1px;
}
@media screen and (max-width: 768px){
    .company-sec-title {
        padding: 20px 0;
        margin-bottom: 40px;
    }
    .company-sec-title h2 {
        font-size: 14px;
    }
    .company-sec-title h2 span {
        font-size: 28px;
    }
    .company-message-flex {
        padding-bottom: 0;
        border-bottom: none;
    }
    .company-thoughts{
        padding: 40px 0;
        margin-bottom: 50px;
    }
    .company-thoughts .company-sec-title {
        margin-bottom: 10px;
    }
    .thought-item{
        flex-direction: column;
        gap: 16px;
        padding: 14px;
    }
    .thought-img{
        flex: none;
        max-width: none;
        width: 100%;
    }
    .thought-img img{
        min-height: 0;
        aspect-ratio: 16/10;
    }
    .thought-info{
        padding: 0 4px 4px;
    }
    .thought-num span{
        font-size: 22px;
    }
    .thought-info h3{
        font-size: 18px;
    }
}

.company-info{
	padding: 50px 0;
	background-image: url("../img/beige-bg.png");
}
.company-info-img{
	flex-basis: 40%;
}
.company-info-img img{
	height: 100%;
	object-fit: cover;
    max-height: 1150px;
}
.company-info-text{
    flex-basis: 50%;
    margin-right: 3%;
}
.company-info th{
    text-align: center;
    padding: 10px 0;
    border-right: 1px solid #6b5537;
    width: 150px;
}
.company-info td{
	padding: 10px 2em;
	line-height: 1.5;
}

.company-access .page-title2{
	margin-bottom: 0;
}
@media screen and (max-width:768px){
    .company-message-img{
        width: 85%;
        margin: 0 auto 15px;
    }
    .company-message-info h3 {
        font-size: 18px;
        text-align: center;
    }
    .company-message-info h4 {
        font-size: 16px;
        text-align: center;
    }
    .company-quals{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
        padding: 32px 18px 36px;
    }
    .company-quals-title{
        font-size: 17px;
        margin-bottom: 28px;
    }
    .company-quals-list{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .company-quals-item{
        padding: 18px 16px 20px;
    }
    .company-message2-img {
        margin-bottom: 15px;
    }
    .company-features{
        margin-bottom: 50px;
    }
    .company-features-text h3{
        font-size: 18px;
    }
    .company-info {
        padding: 30px 0;
    }
    .company-info-flex{
        width: 90%;
        margin: auto;
    }
    .company-info-text {
        margin-right: 0;
    }
    .company-info-img{
        width: 85%;
        margin: 0 auto 20px;
    }
    .company-info-img img {
        max-height: 360px;
        object-position: bottom;
    }
    .company-page tr {
        font-size: 14px;
    }
    .company-info th {
        padding: 15px 0;
        width: 95px;
    }
    .company-info td {
        padding: 15px 1em;
    }
}


/**********************************************************************/
/**************************  コンセプト  **************************/
/**********************************************************************/
.concept2{
    background-image: url("../img/beige-bg.png");
    padding: 80px 0;
}
.concept2-info{
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.concept2-info h2{
    font-size: 24px;
    margin-bottom: 20px;
    border-left: 5px solid var(--key);
    padding: 5px 0 5px 20px;
}
.concept2-img{
    flex-basis: 47%;
}
.concept2-img img{
    height: 100%;
    object-fit: cover;
}
.con3-item{
    padding: 80px 0;
}
.con3-item:first-of-type{
    padding-top: 0;
}
.con3-item:last-of-type{
    padding-bottom: 0;
}
.con3-item:nth-of-type(even){
    background: var(--bg-soft);
}
.con3-item-info{
    flex-basis: 57%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.con3-item-title{
    display: flex;
    color: var(--key);
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
}
.con3-num{
    font-weight: 700;
    font-size: 50px;
}
.con3-item-info h3{
    flex-basis: calc(100% - 75px);
    font-size: 18px;
	font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
}
.con3-item-img{
    flex-basis: 40%;
}
.con3-item-img img{
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width:768px){
    .concept2 {
        padding: 40px 0;
    }
    .concept2-info h2 {
        font-size: 18px;
        margin-bottom: 15px;
        border-left: 5px solid var(--key);
        padding: 5px 0 5px 15px;
    }
    .concept2-info p{
        margin-top: 15px;
    }
    .con3-num {
        font-weight: 600;
        font-size: 40px;
    }
    .con3-item-info h3 {
        flex-basis: calc(100% - 60px);
        font-size: 16px;
        font-weight: 500;
    }
    .con3-item-img{
        width: 90%;
        margin: 0 auto 15px;
    }
    .con3-item {
        padding: 40px 0;
    }
}

/**********************************************************************/
/**************************  商品  **************************/
/**********************************************************************/
.s-lineup-top{
    text-align: center;
    margin-bottom: 80px;
}
.s-lineup-top h2{
    text-align: center;
    margin-bottom: 60px;
    display: inline-block;
    font-size: 40px;
}
.s-lineup-top h2 img{
    width: 200px;
}
.s-lineup-top h2 span{
    display: block;
    font-size: 16px;
}
.s-lineup-text1{
    font-size: 18px;
    letter-spacing: 5px;
    margin-bottom: 80px;
}
.s-lineup-img{
    max-width: 1320px;
    margin: auto;
}
.s-lineup2 h3{
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 50px;
}
.s-lineup2 p{
    max-width: 900px;
    margin: 0 auto 60px;
}
.s-lineup-items{
    gap: 2%;
}
.s-lineup-items div{
    flex-basis: 32%;
    margin-bottom: 20px;
}
.s-lineup-items div img{
    aspect-ratio: 1/1;
    object-fit: cover;
}
.s-lineup3{
    background: var(--bg-soft);
    padding: 100px 0;
    margin-bottom: 80px;
}
.s-lineup3-item{
    background: #fff;
    padding: 40px;
    margin-bottom: 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.s-line3-img{
    flex-basis: 30%;
}
.s-line3-info{
    flex-basis: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.s-line3-info h3{
    font-size: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

@media screen and (max-width:768px){
    .s-lineup-top {
        margin-bottom: 50px;
    }
    .s-lineup-top h2 {
        margin-bottom: 30px;
    }
    .s-lineup-top h2 img {
        width: 160px;
    }
    .s-lineup-top span{
        font-size: 13px;
    }
.s-lineup-text1 {
    font-size: 16px;
    width: 90%;
    margin: 0 auto 50px;
}
.s-lineup2 h3 {
    font-size: 20px;
    margin-bottom: 30px;
}
.s-lineup2 p {
    margin: 0 auto 40px;
}
.s-lineup-items div {
    flex-basis: 49%;
    margin-bottom: 10px;
}
.s-lineup3 {
    padding: 50px 0;
    margin-bottom: 30px;
}
.s-lineup3-item {
    padding: 20px;
    margin-bottom: 30px;
}
.s-lineup3-item:last-of-type{
    margin-bottom: 0;
}
.s-line3-info h3 {
    font-size: 18px;
    margin: 10px 0 15px;
    text-align: center;
}


}



/**********************************************************************/
/**************************  長期保証  **************************/
/**********************************************************************/
.warranty-sec-title{
    background-image: url("../img/beige-bg.png");
    padding: 30px 0;
    margin-bottom: 60px;
    text-align: center;
}
.warranty-sec-title h3{
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
    margin: 0;
}
.warranty-block{
    margin-bottom: 70px;
}
.warranty-lead-row,
.warranty-check-row,
.warranty-consult-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.warranty-lead-row.is-rev .warranty-lead-text{
    order: 2;
}
.warranty-lead-row.is-rev .warranty-photo{
    order: 1;
}
.warranty-lead-text h4,
.warranty-panel h4,
.warranty-schedule h4{
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: 0.06em;
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
}
.warranty-lead-text p,
.warranty-panel p,
.warranty-schedule > p,
.warranty-consult-text p{
    margin: 0 0 1em;
    line-height: 2;
}
.warranty-lead-text p:last-child,
.warranty-consult-text p:last-child{
    margin-bottom: 0;
}
.warranty-photo{
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--bg-soft);
    border-radius: 8px;
    overflow: hidden;
}
.warranty-photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.warranty-panel{
    margin-top: 48px;
    padding: 36px 40px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 16px;
    background: #fff;
}
.warranty-panel-note{
    margin-bottom: 20px !important;
    font-size: 14px;
    color: #555;
}
.warranty-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}
.warranty-list li{
    position: relative;
    padding-left: 1.1em;
    line-height: 1.8;
}
.warranty-list li::before{
    content: "・";
    position: absolute;
    left: 0;
    color: var(--sub);
    font-weight: 700;
}
.warranty-kome{
    margin: 24px 0 0 !important;
    font-size: 12px;
    color: #777;
    line-height: 1.8 !important;
}
.warranty-schedule{
    margin: 48px 0;
    text-align: center;
}
.warranty-years{
    list-style: none;
    margin: 0 auto 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 720px;
}
.warranty-years li{
    background: var(--bg-soft);
    border-radius: 12px;
    padding: 22px 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.warranty-years span{
    display: block;
    font-size: 28px;
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: var(--sub);
    line-height: 1.2;
    margin-bottom: 6px;
}
.warranty-check-row{
    margin-top: 48px;
}
.warranty-check-row .warranty-panel{
    margin-top: 0;
}
.warranty-consult{
    margin-bottom: 80px;
    padding: 60px 0;
    background: var(--bg-soft);
}
.warranty-consult-text h3{
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px;
    letter-spacing: 0.06em;
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
}
.warranty-voice{
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.warranty-voice li{
    margin-bottom: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    line-height: 1.7;
}
.warranty-consult-btn{
    margin-top: 28px;
}

@media screen and (max-width:768px){
    .warranty-sec-title{
        padding: 22px 16px;
        margin-bottom: 36px;
    }
    .warranty-sec-title h3{
        font-size: 18px;
    }
    .warranty-block{
        margin-bottom: 50px;
    }
    .warranty-lead-row,
    .warranty-lead-row.is-rev,
    .warranty-check-row,
    .warranty-consult-inner{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .warranty-lead-row.is-rev .warranty-lead-text,
    .warranty-lead-row.is-rev .warranty-photo{
        order: initial;
    }
    .warranty-lead-text h4,
    .warranty-panel h4,
    .warranty-schedule h4{
        font-size: 18px;
    }
    .warranty-panel{
        margin-top: 32px;
        padding: 24px 18px;
    }
    .warranty-list{
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .warranty-list li {
        font-size: 14px;
    }
    .warranty-schedule{
        margin: 36px 0;
        text-align: left;
    }
    .warranty-years{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    .warranty-years li{
        padding: 18px 8px;
        font-size: 13px;
        text-align: center;
    }
    .warranty-years span{
        font-size: 24px;
    }
    .warranty-check-row{
        margin-top: 32px;
    }
    .warranty-consult{
        margin-bottom: 50px;
        padding: 20px 0;
    }
    .warranty-consult-inner{
        padding: 24px 16px;
    }
    .warranty-consult-text h3{
        font-size: 18px;
    }
    .warranty-voice li{
        font-size: 14px;
    }


}




/**********************************************************************/
/**************************  採用情報  **************************/
/**********************************************************************/
.rec-ceo .company-message-flex {
    margin-top: 70px;
}
.rec-ceo .company-message-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
}
.rec-sec-title{
    background: var(--key);
    color: #fff;
    padding: 14px;
    font-size: 20px;
    margin-bottom: 30px;
}
.rec-message-name img{
    width: 250px;
    margin: 20px 0 0 auto;
}
.info-table dl{
    display: flex;
}
.info-table dl:not(:last-of-type){
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info-table dl dt{
    flex-basis: 180px;
    background: var(--bg-soft);
    padding: 20px;
    border-radius: 5px;
    line-height: 1.8;
}
.info-table dl dd{
    flex-basis: calc(100% - 180px);
    padding: 20px 30px;
    line-height: 1.8;
}

@media screen and (max-width:768px){
.info-table dl {
    display: block;
}
.info-table dl:not(:last-of-type) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.info-table dl dt {
    padding: 5px 20px;
    font-size: 14px;
}
.info-table dl dd {
    padding: 10px 20px;
    font-size: 14px;
}


}



/**********************************************************************/
/**************************  カタログページ  **************************/
/**********************************************************************/
.catalog-items{
    gap: 50px;
}
.catalog-item{
    flex-basis: calc(100% / 2 - 25px);
}
.catalog-sec-title{
    text-align: center;
    margin-bottom: 60px;
}
.catalog-sec-title h2{
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
}
.catalog-sec-title div{
    max-width: 1000px;
    margin: 0 auto 50px;
}
.catalog-sec-title p{
    display: inline-block;
    text-align: left;
    font-size: 18px;
}
.catalog-item h3{
    border: 1px solid;
    padding: 15px;
    text-align: center;
    background: var(--sub);
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}
.catalog-item div{
    border: 1px solid #ccc;
}
.catalog-item p {
    padding: 20px 20px 0;
    line-height: 1.8;
}

@media screen and (max-width:768px){
.catalog-sec-title {
    margin-bottom: 40px;
}
.catalog-sec-title h2 {
    font-size: 20px;
    margin-bottom: 30px;
}
.catalog-sec-title div {
    margin: 0 auto 30px;
}
.catalog-sec-title p {
    font-size: 15px;
}
.catalog-item {
    margin-bottom: 30px;
}
.catalog-item h3 {
    padding: 8px;
    font-size: 16px;
}
.catalog-item p {
    padding: 20px 0px 0;
}



}


/**********************************************************************/
/**************************  プライバシー  **************************/
/**********************************************************************/
.page-privacy-policy .img-pattern,
.page-id-55 .img-pattern{
    display: none;
}
.page-privacy-policy .header-text,
.page-id-55 .header-text{
    color: #000;
}
.page-privacy-policy .header-text span,
.page-id-55 .header-text span{
    color: #999;
}
.policy-main{
    margin-top: 50px;
    margin-bottom: 80px;
}
.policy-main h2{
    border-left: 7px solid var(--key);
    padding: 3px 0 3px 10px;
    margin-bottom: 20px;
    font-size: 26px;
}
.policy-operator{
    font-size: 14px;
    margin-bottom: 24px;
}
.policy-main h3{
	font-size: 24px;
	margin-bottom: 20px;
}
.policy-main p{
	margin-bottom: 30px;
    font-weight: 300;
}
.policy-main ul{
    background: var(--bg-soft);
    padding: 20px;
    margin-bottom: 30px;
}
.policy-main li{
    text-indent: -20px;
    margin-left: 20px;
    line-height: 1.5;
}
.policy-main li:not(:last-of-type){
    margin-bottom: 20px;
}

@media screen and (max-width:768px){
    .policy-main {
        margin-bottom: 50px;
    }
	.policy-main h2 {
		border-left: 5px solid var(--key);
		margin-bottom: 10px;
		font-size: 18px;
	}
	.policy-main h3 {
		font-size: 16px;
		margin-bottom: 10px;
	}
    .policy-main li {
        font-size: 14px;
        line-height: 1.7;
    }
    .policy-main li:not(:last-of-type) {
        margin-bottom: 15px;
    }
}


/**********************************************************************/
/**************************  お問い合わせ  **************************/
/**********************************************************************/
.contact-intro{
    margin-bottom: 40px;
}
.contact-lead-row{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px;
}
.contact-lead-text h2{
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.6;
    margin: 0 0 24px;
}
.contact-lead-text p{
    margin: 0 0 1em;
    line-height: 2;
}
.contact-lead-text p:last-child{
    margin-bottom: 0;
}
.contact-lead-emphasis{
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.04em;
    line-height: 2 !important;
}
.contact-photo{
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
}
.contact-photo img{
    display: block;
    width: 100%;
    height: auto;
}
.contact-body{
    margin-bottom: 20px;
}
.contact-body > p{
    margin: 0 0 1em;
    line-height: 2;
}
.contact-voice{
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.contact-voice li{
    margin-bottom: 10px;
    padding: 14px 20px;
    background: var(--bg-soft);
    border-radius: 8px;
    line-height: 1.8;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.contact-voice li:last-child{
    margin-bottom: 0;
}
.contact-tel{
    margin-top: 36px;
    padding: 36px 40px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.contact-tel-label{
    margin: 0 0 16px;
    font-size: 15px;
    letter-spacing: 0.06em;
}
.contact-tel-btn{
    display: inline-block;
    min-width: 280px;
    padding: 16px 40px;
    background: var(--sub);
    border: 1px solid var(--sub);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 5px;
    font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
    transition: opacity 0.3s ease;
}
.contact-tel-btn:hover{
    opacity: 0.85;
}
.contact-mail{
    margin: 18px 0 0;
    font-size: 14px;
    letter-spacing: 0.04em;
}
.contact-mail a{
    color: inherit;
    text-decoration: underline;
}

@media screen and (max-width:768px){
.contact-lead-row{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
.contact-lead-text{
    order: 2;
}
.contact-photo{
    order: 1;
    max-width: 220px;
    margin: 0 auto;
}
.contact-lead-text h2{
    font-size: 20px;
    margin-bottom: 18px;
    text-align: center;
}
.contact-lead-emphasis{
    font-size: 15px;
}
.contact-voice li{
    padding: 12px 16px;
    font-size: 14px;
}
.contact-tel{
    margin-top: 28px;
    padding: 20px;
}
.contact-tel-btn{
    min-width: 0;
    width: 100%;
    font-size: 20px;
    padding: 14px 20px;
}
.contact-mail{
    font-size: 13px;
}
}

/**********************************************************************/
/**************************  コンタクトフォーム  **************************/
/**********************************************************************/
.contact-top-p{
    margin-bottom: 30px;
    text-align: center;
}
.contact-operator{
    text-align: center;
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}
.contact-part-legal,
.catalog-operator{
    font-size: 12px;
    color: #777;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}
.catalog-operator{
    margin-top: 20px;
    text-align: center;
}
.contact-form {
    padding: 60px 40px 30px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 2px rgba(0,0,0,0.1);
}
/* 郵便番号自動入力用（Japan）。autop解除後はspan直置きになるため両方対応 */
form > p:first-of-type,
.contact-form .p-country-name{
    display: none;
}
.form-title{
    text-align: center;
}
.form-title h2{
    font-size: 24px;
    margin-bottom: 60px;
    display: inline-block;
    position: relative;
}
.form-title h2::after{
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: #333;
}
.form-group {
    margin-bottom: 30px;
}
.form-label {
    font-size: 16px!important;
    margin-bottom: 15px!important;
    display: flex;
    align-items: center;
}
.required {
    color: #fff;
    background: var(--sub);
	border: 1px solid var(--sub);
    margin-left: 10px;
    font-size: 12px;
    padding: 3px 10px;
    letter-spacing: 2px;
}
.optional {
    color: var(--key);
	border: 1px solid var(--key);
    margin-left: 10px;
    font-size: 12px;
    padding: 3px 10px;
    letter-spacing: 2px;
}
/* autop解除後は .input-group 直下に label + span が並ぶため、p 前提の指定を両方に適用 */
.input-group,
.input-group p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    line-height: 1;
}
.input-group:last-child,
.input-group p:last-child {
    margin-bottom: 0;
}
.input-label {
    flex: 0 0 70px;
    width: 70px;
	font-size: 13px;
	color: #949497;
}
.input-group > span,
.input-group p span{
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}
.has-label > span,
.has-label p span{
    width: calc(100% - 70px)!important;
}
.input-group3,
.input-group3 p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    line-height: 1;
}
.input-group3:last-child {
    margin-bottom: 0;
}
.input-group3 .input-label{
    flex: 0 0 90px;
    width: 90px;
}
.input-3items{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.input-3items .wpcf7-form-control-wrap{
    flex: 0 1 auto;
}
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 5px;
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    flex: 0 0 18px;
    cursor: pointer;
}
.checkbox-group .wpcf7-form-control{
    display: flex;
    gap: 5px 20px;
    flex-wrap: wrap;
}
.checkbox-group .wpcf7-list-item-label {
    flex: 1 1 auto; /* 残りを自動で折り返して使う */
    word-break: break-word;
}
.contact-form input.postal-short {
    max-width: 365px;
}
.form-message-text{
    color: #949497;
    font-size: 13px;
    margin-bottom: 15px;
}
input, select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
textarea {
    resize: vertical;
}
.hogo{
    margin-bottom: 30px!important;
}
.hogo a,.contact-bottom-p a{
    letter-spacing: 1px;
    color: blue;
    text-decoration: underline;
}
.submit-button {
    width: 250px;
    text-align: center;
    background: var(--sub);
    margin: 0 auto;
    display: inline-block;
    color: #fff;
    padding: 15px;
    letter-spacing: 2px;
    border-radius: 5px;
}
.wpcf7-spinner{
    display: none!important;
}
.wpcf7 .screen-reader-response{
    display: none;
}
.wpcf7-not-valid-tip {
    font-size: 14px;
    margin-top: 10px;
    display: block;
    color: crimson;
}
.contact-bottom-p{
    margin-top: 20px;
    line-height: 1.5;
}
.form-harf{
    flex-basis: 48%;
}
/* 参加人数：横並び2列では .input-group:last-child 以外にも下マージンが付くため解除 */
.participant-count{
    align-items: center;
}
.participant-count > .input-group,
.participant-count > .input-group p{
    margin-bottom: 0;
}

.form-turnstile{
    margin: 40px auto 30px;
    text-align: center;
}

@media screen and (max-width:768px){
	.contact-form {
		padding: 30px 20px 10px;
	}
	.input-label {
		width: 70px;
	}
	input, select, textarea {
		font-size: 14px;
	}
    .form-title h2 {
        font-size: 18px;
        margin-bottom: 50px;
    }
	.form-label {
		font-size: 14px!important;
	}
	.required{
		white-space: nowrap;
		width: 60px;
		text-align: center;
	}
	.optional {
		width: 70px;
		text-align: center;
	}
    .contact-bottom-p {
        font-size: 13px;
    }
    .checkbox-group .wpcf7-list-item-label {
        font-size: 14px;
    }
    .participant-count > .input-group:first-child {
        margin-bottom: 8px;
    }
}
/**********************************************************************/
/*****************************  アーカイブ  *****************************/
/**********************************************************************/
.search .accordion-content.open{
	max-height: 70px;
}
.search .accordion-content{
    display: flex;
    align-items: center;
	flex-wrap: wrap;
}
.search .accordion-content p{
	margin: 0 20px 0 5px;
}
.filter-clear{
    margin-left: auto;
    border: 1px solid;
    padding: 10px;
    font-size: 14px;
}
.archive-items article{
    margin-bottom: 30px;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.page-numbers {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background 0.3s;
}
.page-numbers:hover {
    background: var(--bg-soft);
}
.page-numbers.current {
    background: var(--sub);
    color: #fff;
    border-color: var(--sub);
}
.item-none{
    text-align: center;
    font-size: 18px;
    width: 100%;
    margin-top: 50px;
}

/*ーーーーーーーーーーーニュースーーーーーーーーーーーー*/
.news-item{
    width: 100%;
    padding: 20px;
    box-shadow: 3px 3px 6px rgba(0,0,0,.3);
    border-radius: 7px;
    margin-bottom: 20px;
    background: #fff;
}
.single-news .entry-header {
    margin-bottom: 50px;
}
.news-item a {
    gap: 1.5rem;
    align-items: center;
}
.news-item a time {
    font-size: 13px;
    color: #949497;
    letter-spacing: 1px;
}
@media screen and (max-width:768px){
    .news-item h3 {
        padding-right: 30px;
        font-size: 14px;
    }
}

/*ーーーーーーーーーーーブログーーーーーーーーーーーー*/
.a-blog-items{
    gap: 4%;
}
.a-blog-item{
    flex-basis: 48%;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 30px;
}
.a-blog-item a{
    height: 100%;
}
.a-blog-img{
    flex-basis: 48%;
}
.a-blog-img img{
    aspect-ratio: 3/2;
    object-fit: cover;
}
.a-blog-info{
    flex-basis: 48%;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}
.a-blog-info time{
    margin-bottom: 10px;
    display: block;
}
.a-blog-info h3{
    
    margin-bottom: 10px;
}
.blog-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.6;
    max-height: calc(1.6em * 2);
    margin: auto 0;
    font-size: 15px;
    color: #999;
}
@media screen and (max-width:768px){
    .a-blog-info time {
        font-size: 14px;
    }
}


/*ーーーーーーーーーーー施工事例ーーーーーーーーーーーー*/
.works-items{
    gap:3.5%;
}
.works-item{
    flex-basis: 31%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.works-cate{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.works-cate span{
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    padding: 5px 14px;
    background: var(--sub);
    color: #fff;
}
.works-cate span.works-cate-new{
    background: var(--sub);
}
.works-cate span.works-cate-reform{
    background: #3d7ab5;
}
.works-cate span.works-cate-non-residential{
    background: #2f7d62;
}
.works-item a{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.works-img img{
    aspect-ratio: 1/1;
    object-fit: cover;
}
.works-info{
    padding: 20px;
    flex-grow: 1;
    flex-direction: column;
}
.works-head{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}
.works-head .works-cate{
    flex-shrink: 0;
}
.works-info h3{
    width: 100%;
    margin: 0;
}
.works-tag{
    color: #999;
    font-size: 15px;
    margin-top: 20px;
}

/*ーーーーーーーーーーーイベントーーーーーーーーーーーー*/
.a-category{
    gap: 2px;
    margin-bottom: 50px;
}
.a-category a{
    display: inline-block;
    flex: 1 1 16%;
    background: #888;
    padding: 15px;
    color: #fff;
    text-align: center;
}
@media screen and (max-width:1000px){
    .a-category a{
        flex: 1 1 33%;
    }
}
.a-category a.active{
    background: #404040;
}

.event-items{
    margin-bottom: 50px;
    gap: 4%;
}
.event-item {
    flex-basis: 48%;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    background: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 30px;
}
.event-page .f-event-status {
    padding: 8px;
    font-size: 16px;
    margin-bottom: 20px;
}

@media screen and (max-width: 1000px){
    .event-item-in{
        display: block;
    }
}
@media screen and (min-width: 769px) {
  .event-item:hover {
    transform: translateY(-4px);
  }
}
.event-item a{
    display: block;
    padding: 30px;
}
.event-item h3{
    font-size: 18px;
    margin-bottom: 20px;
}
.event-img{
    flex-basis: 48%;
}
.event-img img{
    aspect-ratio: 1/1;
    object-fit: cover;
}
.event-info{
    flex-basis: 48%;
    display: flex;
    flex-direction: column;
}
.event-info dl{
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 7px 5px;
    margin-bottom: 20px;
    background: var(--bg-soft);
    padding: 15px;
}
.event-info dt{
    flex-basis: 45px;
}
.event-info dd{
    flex-basis: calc(100% - 50px);
}


/*ーーーーーーーーーーーお客様の声ーーーーーーーーーーーー*/
.voice-archive-band{
    width: 100%;
    background: var(--bg-soft);
    padding: 56px 0 64px;
    margin-bottom: 64px;
}
.voice-archive-section{
    margin-bottom: 0;
}
.voice-archive-section--video .voice-items,
.f-voice-block--video .voice-items{
    margin-bottom: 0;
    justify-content: center;
    column-gap: 3.5%;
    row-gap: 32px;
}
.voice-archive-section--video .voice-item--thumb-only,
.f-voice-block--video .voice-item--thumb-only{
    flex: 0 1 31%;
    max-width: 400px;
    min-width: min(100%, 280px);
}
.voice-archive-section--articles .voice-items{
    margin-bottom: 50px;
}
.voice-item--video .voice-img{
    position: relative;
    overflow: hidden;
}
.voice-item--thumb-only .voice-img{
    width: 100%;
    aspect-ratio: 16/9;
    background: #222;
}
.voice-item--thumb-only .voice-img img{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.voice-item--video:not(.voice-item--thumb-only) .voice-img::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent rgba(255,255,255,0.95);
    pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
}
.voice-item--video .voice-img::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    pointer-events: none;
    z-index: 1;
}
.voice-item--thumb-only .voice-img::before{
    background: rgba(0,0,0,0.22);
    transition: background 0.25s ease;
}
.voice-item--thumb-only:hover .voice-img::before{
    background: rgba(0,0,0,0.32);
}
.voice-play-label{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: none;
}
.voice-play-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ff0000;
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.voice-play-icon::after{
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}
.voice-play-text{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.voice-item--thumb-only{
    box-shadow: 2px 2px 10px rgba(0,0,0,0.22);
}
.voice-archive-head{
    margin-bottom: 40px;
}
.voice-archive-head-en{
    font-size: 12px;
    letter-spacing: 0.25em;
    color: #949497;
    margin-bottom: 10px;
    font-family: "Noto Sans JP", sans-serif;
}
.voice-archive-head--center{
    text-align: center;
}
.voice-archive-head--center .voice-archive-head-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.voice-archive-head--center .voice-archive-head-title::before,
.voice-archive-head--center .voice-archive-head-title::after{
    content: "";
    flex: 0 1 56px;
    width: 56px;
    border-top: 1px solid #bbb;
}
.voice-archive-head--articles .voice-archive-head-en{
    margin-bottom: 6px;
}
.voice-archive-head--articles .voice-archive-head-title{
    font-size: 28px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 1rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.voice-archive-head--articles .voice-archive-head-title::after{
    content: "";
    flex-grow: 1;
    border-top: 1px solid;
}
.voice-archive-back{
    margin: 0 auto 40px;
    font-size: 14px;
}
.voice-archive-empty{
    text-align: center;
    color: #555;
    margin-bottom: 20px;
}
.voice-items{
    gap: 3.5%;
    row-gap: 40px;
    margin-bottom: 50px;
}
.voice-page .archive-main.voice-archive-section--articles{
    padding-bottom: 20px;
}
.voice-item{
    flex-basis: 31%;
    margin-bottom: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    background: #fff;
}
.voice-item a{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.voice-img img{
    aspect-ratio: 3/2;
    object-fit: cover;
    width: 100%;
    display: block;
}
.voice-info{
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.voice-info h3{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.voice-excerpt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}
@media screen and (min-width: 769px) {
    .voice-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .voice-item:hover {
        transform: translateY(-4px);
    }
}



@media screen and (max-width:768px){
	.search .accordion-content.open {
		max-height: 120px;
        gap: 3px;
	}
	.archive-items article{
		margin-bottom: 20px;
	}
    .filter-clear{
        margin-top: 5px;
        font-size: 12px;
        padding: 5px 10px;
    }
    .pagination {
        margin-bottom: 30px;
    }
    .news-item {
        padding: 15px;
        margin-bottom: 15px;
    }
    .news-item a time {
        font-size: 12px;
        display: inline-block;
        margin-bottom: 5px;
    }
    .works-info h3 {
        font-size: 14px;
    }
    .voice-items {
        gap: 4%;
        row-gap: 24px;
    }
    .voice-item {
        margin-bottom: 25px;
    }
    .voice-info {
        padding: 12px;
    }
    .voice-info h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }
    .voice-excerpt {
        font-size: 13px;
    }
    .voice-archive-band{
        padding: 40px 0 48px;
        margin-bottom: 48px;
    }
    .voice-archive-head{
        margin-bottom: 28px;
    }
    .voice-archive-head--center .voice-archive-head-title{
        font-size: 18px;
        gap: 0.75rem;
    }
    .voice-archive-head--center .voice-archive-head-title::before,
    .voice-archive-head--center .voice-archive-head-title::after{
        flex-basis: 32px;
        width: 32px;
    }
    .voice-archive-head--articles .voice-archive-head-title{
        font-size: 22px;
    }
    .voice-archive-section--video .voice-item--thumb-only,
    .f-voice-block--video .voice-item--thumb-only{
        flex: 0 1 100%;
        max-width: 100%;
    }
    .voice-play-icon{
        width: 56px;
        height: 56px;
    }
    .voice-play-text{
        font-size: 13px;
    }
    .single-news .entry-header {
        margin-bottom: 30px;
    }
    .single-news h1{
        font-size: 18px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 10px;    
    }
    .event-item a {
        padding: 20px;
    }
    .event-item h3 {
        font-size: 16px;
        margin-bottom: 15px;
        margin-top: 10px;
    }
    .event-info dl {
        font-size: 14px;
    }
}

/**********************************************************************/
/*****************************  シングル  *****************************/
/**********************************************************************/
.single{
    background-size: 3px 3px;
    background-image: repeating-linear-gradient(0deg, var(--bg-soft), var(--bg-soft) 1px, transparent 1px, transparent);
}
.single-in{
    padding: 80px;
    background: #fff;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.2);
    border-radius: 10px;
    margin-bottom: 50px;
}
.eyecatch{
    margin-bottom: 50px;
}
.single-page .eyecatch img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.entry-header{
    margin-bottom: 20px;
}
.entry-title{
    font-size: 30px;
    margin-bottom: 20px;
    text-align: center;
}
.single time{
    margin-bottom: 10px;
    display: block;
    letter-spacing: 2px;
    color: #949497;
}
.entry-content h2{
    color: #ffffff;
    background-color: #ed9a00;
    font-size: 20px;
    padding: 10px 20px;
    margin: 30px auto;
}
.entry-content h3{
    font-size: 20px;
    border-bottom: 1px solid #777;
    padding: 0 20px 7px;
    margin: 30px auto 20px;
}
.entry-content p{
    margin-bottom: 20px;
}
.entry-content ul{
    margin-bottom: 20px;
    background: antiquewhite;
    padding: 1rem 1.5rem;
}
.entry-content li{
    letter-spacing: 2px;
    line-height: 2;
}

@media screen and (max-width:768px){
.entry-content h2 {
    font-size: 16px;
    padding: 8px 15px;
}
.entry-content h3 {
    font-size: 16px;
}
.entry-content ul {
    font-size: 14px;
}
.entry-content li:not(:last-of-type) {
    margin-bottom: 10px;
}
}

.entry-content .blog-fixed-text{
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #ccc;
    font-size: 15px;
    line-height: 1.9;
}

/*ーーーーーーーーーーーイベントーーーーーーーーーーーー*/
.s-event-info{
    margin-bottom: 50px;
}
.event-slots{
    margin: 20px auto;
}
.event-slots-open{
    margin-top: 10px;
}
.event-slots-table th{
    background: var(--bg-soft);
    text-align: left;
    font-weight: 500;
}
.event-slots-table .event-slots-date{
    vertical-align: middle;
    white-space: nowrap;
}
.event-slots-table .slot-remain{
    font-weight: 500;
    white-space: nowrap;
}
.event-slots-table .slot-mark{
    display: inline-block;
    margin-right: 0.4em;
    letter-spacing: 0;
}
.event-slots-table tr.is-few td:not(.is-merged){
    background: #fce8d6;
    color: #c45c12;
}
.event-slots-table tr.is-full td:not(.is-merged){
    background: #ececec;
    color: #888;
}
.booking-slot-group .checkbox-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.booking-slot-group .wpcf7-form-control{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 20px;
    row-gap: 15px;
    justify-content: start;
}
.booking-slot-group .wpcf7-list-item{
    margin: 0;
    display: inline-flex;
}
.booking-slot-group .wpcf7-list-item label{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0;
    letter-spacing: 1px;
}
.booking-slot-group .wpcf7-list-item-label{
    flex: 0 1 auto;
    width: auto;
}
.booking-slot-group input[type="radio"]{
    -webkit-appearance: checkbox;
    appearance: checkbox;
    -moz-appearance: checkbox;
    flex: 0 0 18px;
    width: 18px;
    max-width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}
.booking-slot-group .wpcf7-list-item.is-full{
    opacity: 0.55;
}
.booking-slot-group .wpcf7-list-item.is-full label{
    cursor: not-allowed;
}
.s-event-title{
    text-align: center;
    margin-bottom: 40px;
    font-size: 24px;
    background: #777;
    color: #fff;
    padding: 10px;
}
.event-closed{
    text-align: center;
    background: #333;
    color: #fff;
    font-size: 20px;
    margin-top: 50px;
    padding: 5px;
    line-height: 1.7;
}
.single-event .page-back-btns{
    margin-top: 50px;
}

@media screen and (max-width:768px){
.single-event .page-back-btns{
    margin-top: 30px;
}

}

/*ーーーーーーーーーーーお客様の声ーーーーーーーーーーーー*/
.single-voice .wp-block-image{
  font-size: 15px;
  color: coral;
}
.single-voice .wp-block-image:not(:last-of-type) img {
    max-width: 500px;
}
.single-voice .wp-block-image:not(:last-of-type) .wp-element-caption{
    margin-bottom: 30px;
}
.single-voice h3{
    font-size: 18px;
    font-weight: bold;
}
/* YouTube埋め込みのみ：横幅100%・16:9（写真.wp-block-imageには影響しない） */
.entry-content .voice-video-embed,
.entry-content .wp-block-embed-youtube{
    width: 100%;
    max-width: 100%;
    margin: 0 0 2em;
}
.entry-content .voice-video-embed .wp-block-embed__wrapper,
.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper{
    position: relative;
    width: 100%;
}
.entry-content .voice-video-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before,
.entry-content .wp-block-embed-youtube.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.entry-content .voice-video-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed-youtube.wp-has-aspect-ratio .wp-block-embed__wrapper iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:768px){
.single-voice h3 {
    font-size: 16px;
}
.single-voice .wp-block-image {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.4;
}

}

/*ーーーーーーーーーーーブログーーーーーーーーーーーー*/
.single-blog .entry-content p img{
    width: auto;
}
.single-blog h2.wp-block-heading{
    font-size: 24px;
    margin: 80px 0 30px;
}
.single-blog h3.wp-block-heading{
    font-size: 20px;
    margin: 80px 0 30px;
}
.single-blog h4.wp-block-heading{
    font-size: 18px;
    margin: 30px 0 20px;
}
.single-blog hr{
    margin-bottom: 20px!important;
}
.single-blog ul.wp-block-list{
    padding-left: 2%;
    margin-bottom: 20px;
}



/*ーーーーーーーーーーーワークスーーーーーーーーーーーー*/
.s-works-title{
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    margin: 20px auto 40px;
}
.s-works-cate{
    justify-content: center;
    margin-top: 20px;
}
.s-works-cate span{
    font-size: 15px;
    padding: 6px 16px;
}
.s-works-sectitle{
    border-bottom: 2px solid;
    margin-bottom: 20px;
    font-size: 24px;
    padding: 0 20px 10px;
}
.s-works-sectitle span{
    font-size: 16px;
    margin-left: 1rem;
}
.s-works-info{
    margin-bottom: 50px;
}
.s-works-info-items{
    background: var(--bg-soft);
    padding: 10px 20px;
    margin-bottom: 30px;
}
.s-works-info-items dl{
    flex-basis: 50%;
}
.s-works-info-items dt{
    flex-basis: 120px;
}
.s-works-info-items dd{
    flex-basis: calc(100% - 140px);
}
.s-works-info>p{
    max-width: 820px;
    margin: auto;
}
.s-works-gallery{
    margin-bottom: 40px;
}
.s-works-imgs{
    gap: 5px;
}
.s-works-img{
    flex-basis: calc((100% - 10px) / 3);
    max-width: calc((100% - 10px) / 3);
    overflow: hidden;
}
.s-works-img a{
    display: block;
    width: 100%;
    height: 100%;
}
.s-works-img img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 100%;
}
.related-link-wrap{
    margin: 40px 0 0;
}
.s-works-page .related-link-wrap{
    margin: 0 0 40px;
}
.related-link{
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 440px;
    margin: 0 auto;
    padding: 12px 18px 12px 12px;
    border: 2px solid var(--sub);
    background: #fff8f2;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(241, 141, 70, 0.16);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.related-link::after{
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-top: 2px solid var(--sub);
    border-right: 2px solid var(--sub);
    transform: rotate(45deg);
}
.related-link:hover{
    background: #fff;
    box-shadow: 0 6px 20px rgba(241, 141, 70, 0.24);
    transform: translateY(-1px);
}
.related-link-thumb{
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    overflow: hidden;
}
.related-link-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.related-link-body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.related-link-label{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sub);
    line-height: 1.4;
}
.related-link-title{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.works-lb{
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.works-lb[hidden]{
    display: none;
}
.works-lb-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.works-lb-inner{
    position: relative;
    z-index: 1;
    width: min(920px, calc(100% - 80px));
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.works-lb-img{
    display: block;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.works-lb-close,
.works-lb-prev,
.works-lb-next{
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    text-align: center;
    transition: background 0.2s ease;
}
.works-lb-close:hover,
.works-lb-prev:hover,
.works-lb-next:hover{
    background: rgba(255, 255, 255, 0.28);
}
.works-lb-close{
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
}
.works-lb-prev,
.works-lb-next{
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}
.works-lb-close svg,
.works-lb-prev svg,
.works-lb-next svg{
    display: block;
    flex-shrink: 0;
}
.works-lb-prev{
    left: 12px;
}
.works-lb-next{
    right: 12px;
}
.works-lb-counter{
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.04em;
}
body.works-lb-open{
    overflow: hidden;
}
@media screen and (max-width:768px){
    .works-lb-inner{
        width: calc(100% - 24px);
    }
    .works-lb-prev,
    .works-lb-next{
        width: 40px;
        height: 40px;
    }
    .works-lb-prev{
        left: 4px;
    }
    .works-lb-next{
        right: 4px;
    }
    .s-works-title {
        font-size: 18px;
        margin: 10px auto 30px;
    }
.s-works-sectitle {
    border-bottom: 1px solid;
    font-size: 20px;
    padding: 0 10px 10px;
}
.s-works-sectitle span {
    font-size: 14px;
}
.s-works-info-items {
    margin-bottom: 20px;
}
.s-works-info-items dl{
    font-size: 14px;
}
.s-works-info-items dl:first-of-type {
    margin-bottom: 10px;
}
.s-works-info-items dt {
    flex-basis: 90px;
}
.s-works-info-items dd {
    flex-basis: calc(100% - 90px);
}
.s-works-img {
    flex-basis: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
}


}



@media screen and (max-width:768px){
    .single {
        background-image: none;
    }
    .single-page {
        padding: 0;
    }
    .single-in {
        padding: 0 30px;
        border-radius: 0;
        width: 100%;
        box-shadow: none;
    }
    .entry-title {
        font-size: 20px;
        margin-bottom: 5px;
    }
    .has-text-align-center{
        text-align: left!important;
    }
    .single time {
        font-size: 13px;
    }
    .event {
        margin: 30px auto;
    }
    .entry-content h2.s-event-title, .s-event-title {
        font-size: 18px;
        padding: 5px;
        margin: 0 calc(50% - 50vw) 25px;
    }
    .s-event .contact-form {
        padding: 30px 30px 10px;
        width: 100vw;
        margin: 0 calc(50% - 50vw);
    }
    .event-closed {
        font-size: 16px;
    }
    .event-slots-table th,
    .event-slots-table td {
        font-size: 13px;
        padding: 8px 10px;
    }


    .single-blog h2.wp-block-heading{
        font-size: 20px!important;
        margin: 40px 0 20px;
    }
    .single-blog h3.wp-block-heading{
        font-size: 18px!important;
        margin: 40px 0 20px;
    }
    .single-blog h4.wp-block-heading{
        font-size: 16px!important;
        margin-top: 20px;
    }
    .single-blog .eyecatch {
        margin-bottom: 30px;
    }
    .single-blog ul{
        font-size: 14px;
    }
}

.single-adjacent {
    display: flex;
    gap: 5%;
    margin: 80px auto 30px;
    justify-content: space-between;
}
.single-adjacent .adjacent {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 8px 15px;
    flex: 1;
    min-width: 0;
}
.single-adjacent .adjacent.prev {
    justify-content: flex-end;
    text-align: right;
}
.single-adjacent .thumb {
    flex-shrink: 0;
}
.single-adjacent .thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.single-adjacent .meta {
    flex: 1;
    min-width: 0;
}
.single-adjacent .meta .label {
    display: block;
    font-size: 13px;
    color: #949497;
    margin-bottom: 6px;
}
.single-adjacent .meta .title {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.single-adjacent--text-only .adjacent {
    gap: 0;
}
.page-back-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.page-back-btns .link-btn {
    margin: 0;
    min-width: 260px;
    text-align: center;
}
.page-back-btns .link-btn-outline {
    background: #fff;
    color: var(--sub);
}
.page-back-btns .link-btn-outline::after {
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url("../img/arrow2-k.svg");
    mask-image: url("../img/arrow2-k.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.page-back-btns .link-btn-outline:hover {
    background: var(--sub);
    color: #fff;
}
.single-in .page-back-btns--archive {
    margin-top: 10px;
}
.single-works .page-back-btns--archive {
    margin-bottom: 80px;
}

@media screen and (max-width:768px){
    .single-adjacent {
        flex-direction: column;
        gap: 12px;
        margin: 30px auto 20px;
    }
    .single-adjacent .thumb img {
        width: 72px;
        height: 72px;
    }
    .single-adjacent .meta .label {
        font-size: 12px;
    }
    .single-adjacent .meta .title {
        font-size: 14px;
    }
    .single-in .page-back-btns--archive {
        padding-bottom: 40px;
    }
}


/**********************************************************************/
/*****************************  マージン  *****************************/
/**********************************************************************/

.mb-0{
    margin-bottom: 0!important;
}
.mb-5{
	margin-bottom: 5px!important;
}
.mb-10{
	margin-bottom: 10px!important;
}
.mb-20{
	margin-bottom: 20px!important;
}
.mb-30{
	margin-bottom: 30px!important;
}
.mb-50{
	margin-bottom: 50px!important;
}
.mb-80{
	margin-bottom: 80px!important;
}
.mb-100{
	margin-bottom: 100px!important;
}
.mt-30{
	margin-top: 30px;
}
.mt-50{
	margin-top: 50px;
}

@media screen and (max-width:768px){
    .mb-0-sp{
        margin-bottom: 0!important;
    }
	.mb-30{
		margin-bottom: 20px!important;
	}
	.mb-50{
		margin-bottom: 30px!important;
	}
	.mb-80{
		margin-bottom: 30px!important;
	}
	.mb-100{
		margin-bottom: 50px!important;
	}
	.mt-30{
		margin-top: 20px!important;
	}
	.mt-50{
		margin-top: 20px!important;
	}
}

/**********************************************************************/
/**************************  PCスマホ切り替え  **************************/
/**********************************************************************/

.pc {
  display: block !important;
}
/*pcのみ表示ブロック*/
.sp {
  display: none !important;
}
/*スマホのみ表示ブロック*/
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  /*pcのみ表示ブロック*/
  .sp {
    display: block !important;
  }
  /*スマホのみ表示ブロック*/
}


/* ===== 山家工務店 content pages ===== */
.yanbe-content-page {
  padding-bottom: 60px;
}
.yanbe-article {
  padding: 40px 20px 60px;
  line-height: 1.9;
}
.yanbe-lead {
  margin-bottom: 2.5em;
  font-size: 1.05em;
}
.yanbe-article h2 {
  margin: 2.5em 0 1em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #ccc;
  font-size: 1.35em;
  font-weight: 700;
}
.yanbe-article h3 {
  margin: 1.8em 0 0.6em;
  font-size: 1.1em;
  font-weight: 700;
}
.yanbe-article p {
  margin-bottom: 1em;
}
.point-page .con3-item-info p {
  margin-bottom: 0.8em;
}
@media screen and (max-width: 768px) {
  .yanbe-article {
    padding: 24px 16px 40px;
  }
  .yanbe-article h2 {
    font-size: 1.2em;
  }
}

.yanbe-article ul{
  margin: 1em 0 1.5em 1.2em;
  list-style: disc;
}
.yanbe-article ul li{
  margin-bottom: 0.5em;
}
/* story page photo placeholders */
.img-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 280px;
  background: var(--bg-soft);
  border: 1px dashed #bfbbb3;
  color: #888;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
}
.img-placeholder--wide{
  min-height: 360px;
}
.story-page .con3-item-info p{
  margin-bottom: 0.9em;
  line-height: 1.9;
}
.story-page .company-message-info p{
  margin-bottom: 0.8em;
}
.story-page .con3-item-in{
  align-items: flex-start;
}
.story-page .con3-item-info{
  justify-content: flex-start;
}
.story-page .con3-item-img.pc{
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  align-self: flex-start;
  z-index: 1;
  flex-basis: 40%;
  width: 40%;
  max-width: 40%;
}
.story-page .story-last-img{
  display: block;
  width: 100%;
  height: auto;
}
.story-page .company-message-img img,
.story-page .con3-item-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media screen and (max-width: 768px){
  .img-placeholder{
    min-height: 200px;
  }
  .img-placeholder--wide{
    min-height: 240px;
  }
  .story-page .con3-item-img.pc{
    position: static;
  }
}

/* front single hero */
.front-hero{
  height: 100%;
  overflow: hidden;
}
.front-hero img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    max-height: calc(100vh - 72px);
}
@media screen and (max-width: 768px){
  .front-hero-wrapper{
    height: auto;
    min-height: auto;
  }
  .front-hero{
    height: auto;
  }
  .front-hero img{
    height: auto;
    object-fit: contain;
  }
}

/* story banner CTA */
.story-bnr{
  margin: 40px auto;
  text-align: center;
  box-sizing: border-box;
}
.front-page .f-concept .story-bnr{
    margin: 40px auto 0;
  }
.story-bnr-link{
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.story-bnr-link:hover{
  transform: translateY(-2px);
  opacity: 0.92;
}
.story-bnr-link img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
}
@media screen and (max-width: 768px){
  .story-bnr{
    margin: 28px auto;
  }
  .front-page .f-concept .story-bnr{
    margin: 20px auto 0;
  }
  .story-bnr-link img{
    max-width: 300px;
  }
}

.company-story .yanbe-article{
  padding-top: 0;
  margin-bottom: 60px;
}
.company-story .story-bnr{
  margin: 28px auto 0;
}

.concept-top{
  margin-bottom: 80px;
}
.concept-top-img{
  margin: 50px auto 0;
  max-width: 560px;
}
.concept-top-img img{
  display: block;
  width: 100%;
  height: auto;
}
.concept-related{
  margin-bottom: 80px;
}
.concept-related-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.f-concept-story{
    margin: 60px auto 0;
    text-align: center;
    display: block;
    padding: 40px;
    border-radius: 16px;
    background: var(--bg-soft);
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 14px rgba(91, 143, 99, 0.07);
}
.concept-page .f-concept-story{
  margin: 50px auto 0;
}
.concept-page .f-concept-story .story-bnr{
  margin: 40px auto 0;
}
@media screen and (max-width: 768px){
  .concept-top{
    margin-bottom: 50px;
  }
  .concept-top-img{
    margin-top: 30px;
  }
  .concept-related{
    margin-bottom: 50px;
  }
  .concept-related-links{
    gap: 12px;
  }
  .concept-related-links .link-btn{
    width: 100%;
  }
  .f-concept{
    margin-bottom: 60px;
  }
  .f-concept-story{
    margin-top: 40px;
    padding: 28px 20px;
  }
  .concept-page .f-concept-story{
    margin: 30px auto 0;
  }
  .concept-page .f-concept-story .story-bnr{
    margin: 20px auto 0;
  }
}

/* Q&A accordion page */
.qa-list{
  margin-bottom: 80px;
}
.qa-category{
  font-size: 18px;
  font-weight: 600;
  margin: 48px 0 20px;
  padding-left: 14px;
  border-left: 4px solid var(--sub);
}
.qa-category:first-of-type{
  margin-top: 0;
}
.qa-items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qa-item{
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
}
.qa-question{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.qa-question::-webkit-details-marker{
  display: none;
}
.qa-q-icon{
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.qa-q-text{
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}
.qa-toggle{
  flex-shrink: 0;
  position: relative;
  width: 18px;
  height: 18px;
}
.qa-toggle::before,
.qa-toggle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.qa-toggle::before{
  width: 16px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.qa-toggle::after{
  width: 1.5px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.qa-item[open] .qa-question{
  background: #4a3f35;
  color: #fff;
}
.qa-item[open] .qa-toggle::after{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}
.qa-answer{
  background: #fff;
  padding: 24px 28px 28px;
  border: 1px solid rgba(0,0,0,0.06);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.qa-answer p{
  line-height: 2;
  margin: 0;
}
.qa-mark{
  background: linear-gradient(transparent 60%, #ffe08a 60%);
  padding: 0 2px;
}
@media screen and (max-width: 768px){
  .qa-list{
    margin-bottom: 50px;
  }
  .qa-category{
    font-size: 16px;
    margin: 36px 0 14px;
  }
  .qa-question{
    gap: 10px;
    padding: 14px 14px;
  }
  .qa-q-icon{
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  .qa-q-text{
    font-size: 14px;
  }
  .qa-answer{
    padding: 18px 16px 20px;
  }
  .qa-answer p{
    line-height: 1.9;
  }
}

/* flow timeline & steps */
.flow-process{
  background: #fff;
}
.flow-timeline{
  display: grid;
  grid-template-columns: 3fr 5fr 3fr;
  column-gap: 8px;
  margin-bottom: 50px;
  padding: 28px 24px 24px;
  background: var(--bg-soft);
  border-radius: 12px;
}
.flow-tl-period{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.flow-duration-item{
  position: relative;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  padding-bottom: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.flow-duration-item::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: #d8d0c4;
}
.flow-duration-1::after{ background: #f18d46; }
.flow-duration-2::after{ background: #6f9e78; }
.flow-duration-3::after{ background: #8b7355; }

.flow-timeline-sequence{
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  column-gap: 6px;
  row-gap: 12px;
  min-width: 0;
}
.flow-tl-period-1 .flow-timeline-sequence{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flow-tl-period-2 .flow-timeline-sequence{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flow-tl-period-3 .flow-timeline-sequence{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flow-tl-item{
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 10px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #333;
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}
.flow-tl-item.flow-tl-start{
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  border-radius: 6px 0 0 6px;
}
.flow-tl-item.flow-tl-end{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
  border-radius: 0 6px 6px 0;
}
.flow-tl-item.phase-1{ background: #f7c39a; }
.flow-tl-item.phase-2{ background: #c5dbc8; }
.flow-tl-item.phase-3{ background: #c5d6e0; }
.flow-tl-item.phase-4{ background: #d4c4b0; }

.flow-tl-note{
  grid-row: 2;
  background: #fff;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: #555;
}
.flow-tl-period-1 .flow-tl-note{
  grid-column: 1 / -1;
}
.flow-tl-period-2 .note-phase-2{
  grid-column: 1 / 3;
}
.flow-tl-period-2 .note-phase-3{
  grid-column: 3 / 6;
}
.flow-tl-period-3 .note-phase-4{
  grid-column: 1;
}
.flow-tl-period-3 .note-phase-5{
  grid-column: 2 / 4;
}
.flow-tl-note span{
  display: block;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
  font-size: 12px;
}
.flow-tl-note.note-phase-4{
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
}

.flow-steps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 0;
}
.flow-step{
  padding: 28px 26px 24px;
  border-radius: 12px;
  border: none;
  border-left: 5px solid transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.flow-step.phase-1{
  background: #fff4ea;
  border-left-color: #f18d46;
}
.flow-step.phase-2{
  background: #eef6f0;
  border-left-color: #6f9e78;
}
.flow-step.phase-3{
  background: #eef4f8;
  border-left-color: #6f8fa0;
}
.flow-step.phase-4{
  background: #f4efe9;
  border-left-color: #8b7355;
}
.flow-step h3{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  font-family: "Noto Serif JP", serif;
  color: #2f2a26;
}
.flow-step h3 span{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  text-transform: uppercase;
}
.flow-step.phase-1 h3 span{ color: #e07a2f; }
.flow-step.phase-2 h3 span{ color: #5a8a63; }
.flow-step.phase-3 h3 span{ color: #5a7c8f; }
.flow-step.phase-4 h3 span{ color: #7a6348; }
.flow-step ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-step li + li{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.flow-step li strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}
.flow-step.phase-1 li strong{ color: #b35f1c; }
.flow-step.phase-2 li strong{ color: #456f4d; }
.flow-step.phase-3 li strong{ color: #456574; }
.flow-step.phase-4 li strong{ color: #63503a; }
.flow-step li p{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #555;
  font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 900px){
  .flow-timeline{
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .flow-tl-period{
    display: block;
  }
  .flow-duration-item{
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #333;
    padding: 0;
    margin: 0 0 10px;
  }
  .flow-duration-item::before{
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .flow-duration-1::before{ background: #f18d46; }
  .flow-duration-2::before{ background: #6f9e78; }
  .flow-duration-3::before{ background: #8b7355; }
  .flow-duration-item::after{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1;
    height: 3px;
  }
  .flow-timeline-sequence{
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 8px;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .flow-tl-item{
    clip-path: none;
    border-radius: 6px;
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px 12px 36px;
    font-size: 14px;
    position: relative;
  }
  .flow-tl-item.flow-tl-start,
  .flow-tl-item.flow-tl-end{
    clip-path: none;
    border-radius: 6px;
  }
  .flow-tl-item::before{
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.28);
  }
  .flow-tl-item.phase-1::before{ background: #e07a2f; }
  .flow-tl-item.phase-2::before{ background: #5a8a63; }
  .flow-tl-item.phase-3::before{ background: #5a7c8f; }
  .flow-tl-item.phase-4::before{ background: #7a6348; }
  .flow-tl-note{
    position: relative;
    margin: -2px 0 2px 20px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.7;
  }
  .flow-tl-note.note-phase-4{
    padding-left: 12px;
    padding-right: 12px;
    text-align: left;
  }
  .flow-tl-note::before{
    content: "";
    position: absolute;
    left: -12px;
    top: -8px;
    width: 10px;
    height: 18px;
    border-left: 2px solid #d8d0c4;
    border-bottom: 2px solid #d8d0c4;
    border-radius: 0 0 0 6px;
  }
}

@media screen and (max-width: 768px){
  .flow-timeline{
    margin-bottom: 28px;
    padding: 18px 14px 20px;
  }
  .flow-steps{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .flow-step{
    padding: 20px 16px 18px;
  }
  .flow-step h3{
    font-size: 17px;
    margin-bottom: 16px;
  }
  .flow-step li p{
    line-height: 1.8;
  }
}

/* flow planning section */
.flow-planning{
    padding: 90px 0;
    background: var(--bg-soft);
}
.flow-planning-title{
  margin-bottom: 36px;
  padding: 24px 0;
  border-top: 1px solid rgba(74, 100, 78, 0.28);
  border-bottom: 1px solid rgba(74, 100, 78, 0.28);
  text-align: center;
}
.flow-planning-title h2{
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-family: "Noto Serif JP", serif;
  line-height: 1.3;
  color: #3d5341;
}
.flow-planning-title h2 span{
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.2em;
  font-weight: 400;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  color: #6f8a72;
}
.flow-planning-lead{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #3d5341;
}
.flow-planning-intro{
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: left;
  line-height: 2;
}
.flow-planning-main{
  margin-bottom: 40px;
}
.flow-planning-main img{
  display: block;
  width: 100%;
  height: auto;
}
.flow-planning-points{
  background: #fff;
  padding: 40px 36px;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(61, 83, 65, 0.06);
}
.flow-planning-point{
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.flow-planning-point + .flow-planning-point{
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.flow-planning-point-img{
  flex: 0 0 180px;
  width: 180px;
}
.flow-planning-point-img img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.flow-planning-point-info{
  flex: 1;
  min-width: 0;
}
.flow-planning-point-info h3{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.5;
  color: #3d5341;
}
.flow-planning-point-info p{
  line-height: 2;
  margin: 0;
}
@media screen and (max-width: 768px){
  .flow-planning{
    padding: 50px 0;
  }
  .flow-planning-title{
    margin-bottom: 24px;
    padding: 18px 0;
  }
  .flow-planning-title h2{
    font-size: 24px;
  }
  .flow-planning-title h2 span{
    font-size: 12px;
  }
  .flow-planning-lead{
    font-size: 15px;
    text-align: left;
    margin-bottom: 16px;
  }
  .flow-planning-intro{
    margin-bottom: 28px;
    line-height: 1.9;
  }
  .flow-planning-main{
    margin-bottom: 24px;
  }
  .flow-planning-points{
    padding: 24px 16px;
  }
  .flow-planning-point{
    flex-direction: column;
    gap: 14px;
  }
  .flow-planning-point + .flow-planning-point{
    margin-top: 24px;
    padding-top: 24px;
  }
  .flow-planning-point-img{
    flex-basis: auto;
    width: 100%;
    max-width: 280px;
  }
  .flow-planning-point-info h3{
    font-size: 16px;
    margin-bottom: 15px;
  }
  .flow-planning-point-info p{
    line-height: 1.9;
  }
}

/* performance page */
.perf-top{
  margin-bottom: 70px;
}
.perf-comfort{
    max-width: 800px;
    margin: 50px auto 0;
    border: 1px solid;
    padding: 40px;
    border-radius: 30px;
}
.perf-comfort h4{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  font-family: "Noto Serif JP", serif;
  text-align: center;
}
.perf-comfort p{
  margin: 0;
  line-height: 2;
}
.perf-sec-title{
  background-image: url("../img/beige-bg.png");
  padding: 30px 0;
  margin-bottom: 60px;
  text-align: center;
}
.perf-sec-title h3{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
  margin: 0;
}
.perf-metrics{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
}
.perf-metrics li{
  text-align: center;
}
.perf-metrics img{
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}
.perf-note{
  text-align: center;
  font-size: 12px;
  color: #777;
  margin-top: 20px;
}

.perf-quake{
    background: var(--bg-soft);
    padding: 40px;
    margin-bottom: 0;
    border-radius: 30px;
}
.perf-quake-inner{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 50px;
}
.perf-quake-head h4{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-family: "Noto Serif JP", serif;
}
.perf-quake-head p{
  line-height: 2;
  margin: 0;
}
.perf-quake-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.perf-grades{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.perf-grade{
  flex: 1;
  max-width: 220px;
  background: #fff;
  border-radius: 12px;
  padding: 20px 14px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.perf-grade-icon{
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perf-grade-icon img{
  width: 100%;
  height: auto;
  display: block;
}
.perf-grade h5{
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
}
.perf-grade p{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  letter-spacing: 0.03em;
}
.perf-grade p span{
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 2px;
}
.perf-grade.is-top{
  border: 2px solid var(--sub);
}
.perf-grade.is-top h5{
  color: #d97830;
}
.perf-grade-arrow{
  flex: 0 0 auto;
  color: var(--sub);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  position: relative;
  padding: 0 4px;
  align-self: center;
}
.perf-grade-arrow span{
  display: block;
  white-space: nowrap;
}
.perf-grade-arrow::after{
  content: "›";
  display: block;
  text-align: center;
  font-size: 28px;
  line-height: 1;
  margin-top: -2px;
}

.perf-build{
  margin-bottom: 70px;
}
.perf-build-lead{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  line-height: 2;
}
.perf-build-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
.perf-build-item:last-child{
  margin-bottom: 0;
}
.perf-build-item.is-rev .perf-build-photo{
  order: 2;
}
.perf-build-item.is-rev .perf-build-body{
  order: 1;
}
.perf-build-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.perf-build-body h4{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  font-family: "Noto Serif JP", serif;
}
.perf-build-body p{
  margin: 0;
  line-height: 2;
}

@media screen and (max-width: 768px){
  .perf-top{
    margin-bottom: 40px;
  }
  .perf-sec-title{
    padding: 22px 16px;
    margin-bottom: 36px;
  }
  .perf-sec-title h3{
    font-size: 18px;
  }
  .perf-metrics{
    gap: 0;
  }
  .perf-comfort{
    margin-top: 30px;
    text-align: left;
    padding: 20px;
  }
  .perf-comfort h4{
    font-size: 16px;
  }
  .perf-quake{
    padding: 40px 0 50px;
  }
  .perf-quake-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 28px;
    padding: 0 20px;
  }
  .perf-quake-head h4{
    font-size: 18px;
  }
  .perf-grades{
    flex-direction: column;
    gap: 10px;
  }
  .perf-grade{
    max-width: none;
    width: 100%;
    padding: 10px 10px 20px;
  }
  .perf-grade-arrow{
    transform: rotate(90deg);
    padding: 6px 0;
  }
  .perf-build{
    margin-bottom: 50px;
  }
  .perf-build-lead{
    text-align: left;
    margin-bottom: 32px;
  }
  .perf-build-item,
  .perf-build-item.is-rev{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .perf-build-item.is-rev .perf-build-photo,
  .perf-build-item.is-rev .perf-build-body{
    order: initial;
  }
  .perf-build-body h4{
    font-size: 18px;
    margin-bottom: 12px;
  }
}

/**********************************************************************/
/**************************  ラインナップ一覧  **************************/
/**********************************************************************/
.lineup-order{
    margin-bottom: 60px;
}
.lineup-order-sub{
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 30px;
    line-height: 1.6;
}
.lineup-order-lead{
    text-align: center;
    line-height: 2.2;
    font-size: 16px;
}
.lineup-gallery{
    margin-bottom: 80px;
}
.lineup-gallery-grid{
    gap: 2%;
    row-gap: 20px;
}
.lineup-gallery-item{
    flex-basis: 49%;
}
.lineup-gallery-item img{
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}
.lineup-custom{
    margin-bottom: 60px;
    text-align: center;
}
.lineup-custom-title{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
}
.lineup-custom p{
    line-height: 2.2;
}
.lineup-main-img,
.lineup-sub-img{
    margin-bottom: 40px;
}
.lineup-main-img img,
.lineup-sub-img img{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.lineup-products{
    margin: 80px 0 40px;
}
.lineup-products .f-lineup-items{
    margin: 0 auto;
}

@media screen and (max-width:768px){
    .lineup-order{
        margin-bottom: 40px;
    }
    .lineup-order-sub{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .lineup-order-lead{
        text-align: left;
        font-size: 15px;
    }
    .lineup-gallery{
        margin-bottom: 50px;
    }
    .lineup-gallery-grid{
        gap: 10px;
        row-gap: 10px;
    }
    .lineup-gallery-item{
        flex-basis: calc(50% - 5px);
    }
    .lineup-custom{
        margin-bottom: 40px;
        text-align: left;
    }
    .lineup-custom-title{
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    .lineup-main-img,
    .lineup-sub-img{
        margin-bottom: 24px;
    }
    .lineup-products{
        margin: 50px 0 20px;
    }
}

/**********************************************************************/
/**********************  オブザーバーアニメーション  ***********************/
/**********************************************************************/
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/**********************************************************************/
/************************  ワンエッジ商品詳細ページ  ************************/
/**********************************************************************/
.width-full{
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Hero */
.one-page .hero-slider{
    position: relative;
    padding: 0;
    margin-bottom: 0;
}
.one-page > .breadcrumb{
    margin-bottom: 0;
}
.one-slider{
    position: relative;
    overflow: hidden;
    height: 75vh;
    min-height: 480px;
    max-height: 800px;
}
.one-slider.slick-dotted.slick-slider{
    margin-bottom: 0;
}
.one-slide,
.one-slide-img{
    height: 75vh;
    min-height: 480px;
    max-height: 800px;
}
.one-slide-img{
    overflow: hidden;
}
.one-slide-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
}
.one-slide-img img.zooming{
    animation: oneZoomInOut 15s ease-in-out infinite alternate;
}
@keyframes oneZoomInOut {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); }
}
.one-slider .slick-dots{
    bottom: 24px;
    z-index: 3;
}
.one-slider .slick-dots li button:before{
    color: #fff;
    opacity: 0.5;
}
.one-slider .slick-dots li.slick-active button:before{
    color: #fff;
    opacity: 1;
}
.one-page .hero-slider-text{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
}
.one-hero-text .one-hero-label{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-bottom: 12px;
    color: #fff;
}
.one-hero-text .fv-title{
    margin-bottom: 30px;
    color: #fff;
}
.one-hero-text .fv-title1{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: block;
    line-height: 1;
}
.one-hero-text .fv-title2{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.4em;
    margin-top: 8px;
    display: block;
}
.one-hero-text p{
    font-size: 18px;
    line-height: 2;
    color: #fff;
}

/* Intro */
.one-intro{
    background: var(--bg-soft);
    padding: 100px 0;
    margin-bottom: 0;
}
.one-intro-img{
    flex-basis: 50%;
}
.one-intro-info{
    flex-basis: 47%;
}
.one-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    list-style: none;
    padding: 0;
}
.one-badges li span{
    display: inline-block;
    background: var(--key);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 8px 16px;
    border-radius: 4px;
}
.one-intro-info h2{
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.6;
}
.one-intro-lead{
    font-size: 18px;
    font-weight: 600;
    color: var(--sub);
    margin-bottom: 20px;
    line-height: 1.8;
}
.one-intro-info > p{
    margin-bottom: 1.2em;
}

/* Features */
.one-features{
    background: #fff;
    padding: 100px 0 60px;
    margin-bottom: 0;
}
.one-features .sec-title{
    margin-bottom: 50px;
}
.line-con-item{
    margin-bottom: 70px;
}
.line-con-info{
    flex-basis: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.line-con-head{
    align-items: center;
    margin-bottom: 20px;
    display: flex;
}
.line-con-head span{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 55px;
    margin-right: 15px;
    transform: translateY(5px);
    font-weight: 600;
    font-style: italic;
    color: var(--sub);
}
.line-con-head p{
    font-size: 28px;
    color: var(--key);
}
.line-con-info h3{
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--key);
}
.line-con-info > p{
    margin-bottom: 20px;
}
.line-con-img{
    flex-basis: 48%;
}
.line-con-img img{
    height: 100%;
    object-fit: cover;
}

/* Plan / madori */
.one-plan-area{
    background: var(--bg-soft);
}
section.line-madori{
    padding-top: 0;
    margin-bottom: 0;
}
.one-madori{
    padding-top: 0;
}
.plan-balloon{
    position: relative;
    max-width: 700px;
    width: 80%;
    margin: 0 auto 20px;
    padding: 25px;
    background: #fff;
    border: 2px solid var(--sub);
    border-radius: 36px;
    box-shadow: 10px 10px 0 var(--sub);
    text-align: center;
    transform: translateY(-80px);
}
.plan-balloon::before{
    content: "";
    position: absolute;
    bottom: -49px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border-right: 10px solid var(--sub);
    border-bottom: 3px solid var(--sub);
    rotate: 50deg;
}
.plan-balloon span{
    position: relative;
    z-index: 2;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--key);
    letter-spacing: 0.05em;
}
.line-madori1{
    position: relative;
    margin-bottom: 150px;
}
.line-madori1-img{
    flex-basis: 55%;
    position: relative;
    z-index: 1;
}
.line-madori1-info{
    flex-basis: 55%;
    margin-left: -10%;
    background: #fff;
    transform: translateY(60px);
    padding: 40px 5% 100px 13%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.line-madori1-info h3{
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}
.line-madori-img.one-madori-photos{
    max-width: 1600px;
    width: 94%;
    margin: 120px auto 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 40px 0;
}
.one-madori-photo{
    background: #fff;
    padding: 5px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.09);
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.one-madori-photo img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.one-madori-photo:hover{
    box-shadow: 0 10px 24px rgba(0,0,0,0.13);
}

/* Spec */
.one-spec{
    padding: 80px 0 100px;
    margin-bottom: 0;
}
.line-spec-title{
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    color: var(--key);
    letter-spacing: 0.08em;
    margin-bottom: 40px;
    font-family: "Noto Serif JP", serif;
}
.line-spec-title span{
    font-size: 0.85em;
}
.line-spec-table-wrap{
    overflow: hidden;
}
.line-spec-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.line-spec-table{
    width: 100%;
    min-width: 720px;
    background: #fff;
    border-collapse: collapse;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    font-size: 15px;
    line-height: 1.6;
}
.line-spec-table th,
.line-spec-table td{
    border: 1px solid #e5dfd4;
    padding: 10px 12px;
    vertical-align: middle;
    text-align: center;
}
.line-spec-table thead th{
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 10px;
}
.line-spec-table thead th small{
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
}
.line-spec-table .spec-col-item{
    background: var(--key);
    width: 22%;
}
.line-spec-table .spec-col-one1{
    background: #555;
    width: 26%;
}
.line-spec-table .spec-col-one2{
    background: var(--sub);
    width: 26%;
}
.line-spec-table .spec-col-one3{
    background: #c9945a;
    width: 26%;
}
.line-spec-table tbody th[scope="row"]{
    background: #faf8f4;
    color: var(--key);
    font-weight: 500;
    text-align: left;
    font-size: 16px;
}
.line-spec-table tbody th[scope="row"] small{
    display: block;
    font-size: 10px;
    color: #777;
    font-weight: 400;
}
.line-spec-table tr.spec-category th{
    background: #ebe6dc;
    color: var(--key);
    font-weight: 700;
    text-align: left;
    padding: 8px 20px;
    font-size: 16px;
}
.line-spec-table td{
    color: #333;
}
.line-spec-table td.spec-span{
    text-align: center;
}
.line-spec-table td.spec-cell-mark{
    text-align: center;
    vertical-align: middle;
}
.spec-mark{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
    vertical-align: middle;
}
.spec-mark-svg{
    display: block;
    width: 18px;
    height: 18px;
}
.line-spec-table td.spec-na{
    position: relative;
    background: #f5f3ef;
    padding: 0;
}
.line-spec-table td.spec-na::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), #ccc calc(50% - 0.5px), #ccc calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Price */
section.line-price{
    padding: 0 0 80px;
    margin-bottom: 0;
}
.one-price{
    background: #fff;
    padding-top: 0;
}
.line-bg-title{
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    position: relative;
    color: #fff;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.7);
    margin-bottom: 50px;
}
.line-bg-title::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.line-bg-title > div{
    position: relative;
    z-index: 1;
}
.line-bg-title h2{
    border-left: 5px solid var(--sub);
    margin-bottom: 40px;
    padding: 0 0 5px 15px;
    font-size: 34px;
    font-weight: bold;
}
.line-bg-title h2 span{
    display: block;
    font-size: 21px;
    font-weight: 500;
}
.one1 .one-price-title{
    background-image: url("../img/one1/p1.webp");
    background-position: center center;
}
.one2 .one-price-title{
    background-image: url("../img/one2/s1.webp");
}
.one3 .one-price-title{
    background-image: url("../img/one3/e1.webp");
}
.line-price-table-wrap{
    overflow: hidden;
}
.line-price-table-scroll{
    overflow: hidden;
}
.line-price-table-brand{
    padding: 14px 24px;
    text-align: center;
    border-radius: 4px 4px 0 0;
}
.line-price-table-title{
    font-size: 28px;
    font-weight: 500;
    color: var(--key);
    letter-spacing: 0.08em;
    font-family: "Noto Serif JP", serif;
}
.line-price-table-title span{
    font-size: 0.85em;
}
.line-price-table{
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    margin-bottom: 30px;
}
.line-price-table-detail{
    width: 100%;
    border-collapse: collapse;
}
.line-price-table-detail th,
.line-price-table-detail td{
    border: 1px solid #e5e0d8;
    text-align: center;
}
.line-price-table-detail thead th{
    font-size: 14px;
    padding: 12px 16px;
    color: #fff;
    font-weight: 600;
}
.line-price-table-detail.line-price-plan-one1 th{
    background: #555;
}
.line-price-table-detail.line-price-plan-one2 th{
    background: var(--sub);
}
.line-price-table-detail.line-price-plan-one3 th{
    background: #c9945a;
}
.line-price-table-detail tbody td{
    padding: 12px 14px;
    background: #fff;
}
.line-price-table-detail tbody tr:nth-child(even) td{
    background: #f7f5f1;
}
.line-price-table-detail .price-area-sqm{
    width: 14%;
    font-size: 15px;
    color: #555;
}
.line-price-table-detail .price-area-tsubo{
    width: 10%;
}
.line-price-table-detail .price-area-tsubo strong{
    font-size: 22px;
    color: var(--key);
    letter-spacing: 0.05em;
}
.line-price-table-detail .price-amount{
    width: 38%;
    text-align: right;
    padding-right: 20px;
    line-height: 1.5;
}
.line-price-table-detail .price-ex{
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.02em;
}
.line-price-table-detail .price-in{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sub);
}
.line-price-table-detail .price-yen{
    font-size: 0.72em;
    font-weight: 600;
    margin-left: 2px;
}
.line-price-note p{
    margin-top: 20px;
}

/* Page foot */
.one-page .page-foot{
    text-align: center;
    padding: 80px 0 100px;
    margin-bottom: 0;
    background: var(--bg-soft);
    max-width: none;
    width: 100%;
}
.one-page .page-foot .line{
    width: 1px;
    height: 100px;
    background: var(--key);
    margin: 0 auto 50px;
}
.one-page .page-foot h2{
    font-size: 28px;
    margin-bottom: 50px;
    color: var(--key);
    font-weight: 600;
}
.one-page .page-foot p{
    font-size: 18px;
    margin-bottom: 1.2rem;
}
.one-foot-cta{
    margin-top: 40px;
}

/* 他商品へのリンク */
.one-other-lineup{
    margin: 0 0 80px;
    padding: 80px 0 0;
    background: #fff;
}
.one-other-lineup .sec-title{
    margin-bottom: 40px;
}
.one-other-items{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}
.one-other-item{
    flex: 1 1 25%;
    min-width: 0;
    display: block;
    background: var(--bg-soft);
    transition: opacity 0.3s ease;
}
.one-other-item:hover{
    opacity: 0.85;
}
.one-other-item.is-current{
    outline: 2px solid var(--sub);
    outline-offset: -2px;
}
.one-other-img img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.one-other-info{
    padding: 20px 16px 24px;
    text-align: center;
}
.one-other-sub{
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #666;
}
.one-other-info h3{
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0;
}

@media screen and (max-width: 768px){
    .one-slider,
    .one-slide,
    .one-slide-img{
        height: 55vh;
        min-height: 360px;
    }
    .one-hero-text .fv-title1{
        font-size: 42px;
    }
    .one-hero-text .fv-title2{
        font-size: 16px;
    }
    .one-hero-text p{
        font-size: 14px;
    }
    .one-intro{
        padding: 50px 0;
    }
    .one-intro-inner{
        flex-direction: column;
    }
    .one-intro-img,
    .one-intro-info{
        flex-basis: 100%;
    }
    .one-intro-img{
        margin-bottom: 24px;
    }
    .one-intro-info h2{
        font-size: 18px;
    }
    .one-intro-lead{
        font-size: 15px;
    }
    .one-features{
        padding: 50px 0 20px;
    }
    .line-con-item{
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
    }
    .line-con-info,
    .line-con-img{
        flex-basis: 100%;
    }
    .line-con-img{
        order: -1;
        margin-bottom: 20px;
    }
    .line-con-head span{
        font-size: 36px;
    }
    .line-con-head p{
        font-size: 18px;
    }
    .line-con-info h3{
        font-size: 16px;
        line-height: 1.7;
    }
    .plan-balloon{
        width: 90%;
        padding: 18px;
        transform: translateY(-40px);
        box-shadow: 6px 6px 0 var(--sub);
    }
    .plan-balloon span{
        font-size: 16px;
    }
    .plan-balloon::before{
        bottom: -36px;
        width: 36px;
        height: 36px;
        border-right-width: 6px;
        border-bottom-width: 2px;
    }
    .line-madori1{
        flex-direction: column;
        margin-bottom: 60px;
    }
    .line-madori1-img{
        padding-top: 0;
    }
    .line-madori1-info{
        flex-basis: 100%;
        margin-left: 0;
        transform: none;
        padding: 30px 5%;
    }
    .line-madori1-info h3{
        font-size: 18px;
        margin-bottom: 16px;
    }
    .line-madori-img.one-madori-photos{
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 16px 0;
        margin: 0 auto;
    }
    .one-spec{
        padding: 50px 0 60px;
    }
    .line-spec-title{
        font-size: 22px;
        margin-bottom: 24px;
    }
    .line-spec-table{
        font-size: 11px;
    }
    .line-spec-table th,
    .line-spec-table td{
        padding: 8px 15px;
        font-size: 14px !important;
    }
    .line-spec-table thead th{
        font-size: 13px;
    }
    .line-spec-table tbody th[scope="row"] {
        font-size: 14px;
    }
    .line-bg-title{
        padding: 36px 0;
        margin-bottom: 28px;
    }
    .line-bg-title h2{
        font-size: 22px;
        margin-bottom: 16px;
        padding-left: 12px;
    }
    .line-bg-title h2 span{
        font-size: 14px;
        margin-top: 6px;
    }
    .line-bg-title p{
        font-size: 14px;
        line-height: 2;
    }
    section.line-price{
        padding-bottom: 80px;
    }
    .line-price-table-scroll{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .line-price-table-detail{
        min-width: 640px;
    }
    .line-price-table-title{
        font-size: 22px;
    }
    .line-price-table-detail .price-ex{
        font-size: 16px;
    }
    .line-price-table-detail .price-area-tsubo strong {
        font-size: 18px;
    }
    .one-page .page-foot{
        padding: 50px 0 60px;
    }
    .one-page .page-foot .line{
        height: 60px;
        margin-bottom: 30px;
    }
    .one-page .page-foot h2{
        font-size: 20px;
        margin-bottom: 24px;
    }
    .one-page .page-foot p{
        font-size: 14px;
    }
    .one-other-lineup{
        margin-bottom: 50px;
        padding-top: 50px;
    }
    .one-other-items{
        flex-wrap: wrap;
    }
    .one-other-item{
        flex: 0 0 calc(50% - 5px);
    }
    .one-other-info{
        padding: 14px 10px 18px;
    }
    .one-other-sub{
        font-size: 11px;
    }
    .one-other-info h3{
        font-size: 16px;
    }
}

/* page-guide */
.page-guide {
    padding: 40px 0;
    background: var(--bg-soft);
    margin-bottom: 50px;
}
.page-guide-inner {
    background: #fff;
    border: 1px solid #e6ded2;
    padding: 30px;
}
.page-guide-head {
    text-align: center;
    margin-bottom: 10px;
}
.page-guide-legal{
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #777;
    margin-bottom: 8px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
.page-guide-head h2 {
    font-size: 20px;
}
.page-guide-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-guide-list li {
    position: relative;
    flex: 1;
}
.page-guide-list li:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    color: #9c8f80;
    font-size: 2rem;
}
.page-guide-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 999px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}
.page-guide-list li span {
    font-family: "Josefin Sans", sans-serif;
    letter-spacing: 1px;
    transform: translateY(2px);
}
.page-guide-list li p {
    font-size: 15px;
    padding-left: 5px;
    letter-spacing: 1px;
    line-height: 1.4;
}
.page-guide-list li.is-current a {
    background: #fde8d8;
    color: #c45f1a;
}
@media screen and (max-width: 768px) {
    .page-guide {
        padding: 24px 0;
    }
    .page-guide-inner {
        padding: 20px 16px;
    }
    .page-guide-head h2 {
        font-size: 16px;
    }
    .page-guide-list {
        flex-direction: column;
        gap: 8px;
    }
    .page-guide-list li {
        width: 100%;
    }
    .page-guide-list li:not(:last-child)::after {
        display: none;
    }
    .page-guide-list li a {
        min-height: 46px;
        padding: 10px 12px;
    }
    .page-guide-list li p {
        font-size: 13px;
    }
}

/**********************************************************************/
/**************************  ペットとの暮らし  **************************/
/**********************************************************************/
.pet-page .warranty-lead-row{
    margin-bottom: 56px;
}
.pet-page .warranty-lead-row:last-child{
    margin-bottom: 0;
}
.pet-animal-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.pet-animal-card{
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(90, 70, 50, 0.08);
    border: 1px solid #e6ded2;
}
.pet-animal-photo{
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-soft);
}
.pet-animal-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-animal-body{
    padding: 28px 32px 32px;
}
.pet-animal-label{
    font-family: "Josefin Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--sub);
    margin: 0 0 8px;
    line-height: 1;
}
.pet-animal-body h4{
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: 0.06em;
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
}
.pet-animal-body > p{
    font-size: 16px;
    line-height: 1.9;
    margin: 0 0 20px;
    color: #555;
}
.pet-animal-tags{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pet-animal-tags li{
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 14px;
    background: var(--bg-soft);
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.pet-animal-note{
    margin: 28px auto 0;
    text-align: center;
    line-height: 2;
    max-width: 760px;
    font-size: 16px;
}
.pet-works-lead{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 32px;
    line-height: 2;
}
.pet-works .related-link-wrap{
    margin: 0 auto 0;
}
.pet-catalog-cover{
    margin: 0 auto;
    max-width: 360px;
    background: var(--bg-soft);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.pet-catalog-cover img{
    display: block;
    width: 100%;
    height: auto;
}
.pet-catalog-btn{
    margin-top: 28px;
}
.pet-renew .warranty-lead-row.is-stack{
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}
.pet-renew .warranty-lead-row.is-stack .warranty-lead-text{
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.pet-renew .warranty-lead-row.is-stack .warranty-photo{
    aspect-ratio: auto;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}
.pet-renew .warranty-lead-row.is-stack .warranty-photo img{
    height: auto;
    object-fit: contain;
}

@media screen and (max-width:768px){
    .pet-page .warranty-lead-row{
        margin-bottom: 40px;
    }
    .pet-animal-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pet-animal-body{
        padding: 22px 20px 24px;
    }
    .pet-animal-body h4{
        font-size: 18px;
    }
    .pet-animal-body > p,
    .pet-animal-note{
        font-size: 14px;
    }
    .pet-animal-tags li{
        font-size: 13px;
    }
    .pet-animal-note,
    .pet-works-lead{
        text-align: left;
        margin-top: 20px;
    }
    .pet-catalog-btn{
        margin-top: 20px;
    }
    .pet-renew .warranty-lead-row.is-stack{
        gap: 20px;
    }
    .pet-renew .warranty-lead-row.is-stack .warranty-lead-text{
        text-align: left;
    }
}