/* =========================
  category title
========================= */
.category-title{
position: relative;
}

/* 背景ベタ */
.category-title::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 92%;
height: 100%;
background: #FDAAB2;
border-radius: 3rem 0 0 3rem;
z-index: 0;
}

/* h1 */
.category-title h1{
position: relative;
z-index: 1;
text-align: center;
padding: 5rem 0;
font-size: 3.6rem;
line-height: 1.2;
color:#FFF;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1;
}


/* ============= */
@media (max-width: 767px){
.category-title::before{
width: 95%;
border-radius: 2rem 0 0 2rem;
}
.category-title h1{
padding: 4rem 0;
}
}


/* =========================
  breadcrumb
========================= */
.breadcrumb{
display: flex;
padding:1.5rem 10rem 0 0;
}

.breadcrumb nav{
margin-left: auto;
border:0px #FF0000 solid;
display: inline-flex;
}

.breadcrumb ol{
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: .8rem;
font-size:1.4rem;
}

.breadcrumb li{
display: inline-flex;
align-items: center;
}

/* 区切り */
.breadcrumb li + li::before{
content: "";
border-top:2px #FDAAB2 solid;
border-right:2px #FDAAB2 solid;
width:.7rem;
height:.7rem;
margin-right: .8rem;
display: inline-block;
transform: rotate(45deg);
}

.breadcrumb a{
color: inherit;
text-decoration: none;
}


/* ============= */
@media (max-width: 767px) {
.breadcrumb{
padding:1.5rem 5% 0 0;
}
}


/* =========================
  message
========================= */
/* 全体 */
.message article{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: start;
padding:7rem 0 0 0;
}

.message section:first-of-type{
order: 2; 
position: relative;
padding:7rem 0 0 0;
}

.message section:last-of-type{
order: 1;
padding:0 14% 0 16%;
border:0px #FF0000 solid;
}

/* 画像側 */
.message .image{
width: 100%;
display: flex;
justify-content: flex-end;
}

.message .image img{
width: 100%;
height: auto;
display: block;
border-radius: 3rem 0 0 3rem;
object-fit: cover;
}

/* 見出し */
.message .sub-title h2{
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight:500;
font-size: 3.6rem;
padding: 0 0 3rem 0;
}

/* 本文と署名 */
.message .text{
line-height: 1.9;
}

/* ============= */
@media (max-width: 767px) {
.message article{
grid-template-columns: 1fr;
}
.message .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
.message section:first-of-type{
order: 2; 
padding:4rem 0 0 5%;
}
.message section:last-of-type{
order: 1;
padding:0 5% 0 5%;
}
.message .image img{
border-radius: 2rem 0 0 2rem;
}
}


/* =========================
  outline
========================= */
.outline{
position: relative;
padding:14rem 0 0 0;
}

.outline article{
width:85%;
margin:0 auto;
}

/* 見出し */
.outline .sub-title h2{
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight:500;
font-size: 3.6rem;
padding: 0 0 4rem 0;
}

/* ============= */
@media (max-width: 767px) {
.outline article{
width:90%;
margin:0 auto;
}
.outline .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
}


/* ---------------------------------
  h3
--------------------------------- */
.outline h3{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2.3rem;
margin: 8rem 0 3rem 0;
display: inline-flex;
align-items: center;
gap: .6rem;
}

.outline h3::before{
content: "";
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #FDAAB2;
margin-right:.3rem;
}


/* ---------------------------------
  list
--------------------------------- */
.list{
}

.list li{
position: relative;
padding-left: 1em;
text-indent: -1em;
}

.list li::before,
.sale li::before{
content: "・";
}


/* ---------------------------------
  photos
--------------------------------- */
.photos{
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 3rem;
margin-top: 4rem;
}

.photos img{
width: 100%;
height: auto;
display: block;
border-radius: 3rem;
object-fit: cover;
}

/* ============= */
@media (max-width: 767px) {
.photos img{
border-radius: 2rem;
}
}

/* ============= */
@media (max-width: 400px){
.photos{
grid-template-columns: 1fr; 
}
}


/* =========================
  environment
========================= */
.environment{
padding:15rem 0 0 0;
}

.environment article{
width:85%;
margin:0 auto;
}

/* 見出し */
.environment .sub-title h2{
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight:500;
font-size: 3.6rem;
padding: 0 0 4rem 0;
}

/* テキスト */
.environment .text{
font-size:1.5rem;
}

/* ============= */
@media (max-width: 767px) {
.environment article{
width:90%;
}
.environment .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
}


/* ---------------------------------
  h3
--------------------------------- */
.environment h3{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2.3rem;
margin: 4rem 0 3rem 0;
display: inline-flex;
align-items: center;
gap: .6rem;
}

.environment h3::before{
content: "";
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #FDAAB2;
margin-right:.3rem;
}


/* ---------------------------------
  contact
--------------------------------- */
.inquiry{
position: relative;
margin-top: 8rem;
z-index:1;
display: grid;
}
.inquiry .sub-title{
display: inline-grid;
grid-auto-flow: column;
align-items: center;
gap: .6rem;
font-size: 1.8rem;
font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
letter-spacing: .08em;
font-weight: 700;
color: #FAABB1;
border:0px #FF0000 solid;
}
.inquiry .article-title{
padding:0;
border:0px #FF0000 solid;
}
.inquiry .article-title h2{
padding:1rem 0 0 0;
font-size: 3.3rem;
letter-spacing:.4rem;
font-family: "M PLUS Rounded 1c", sans-serif;
line-height:1.4;
font-weight: 500;
border:0px #FF0000 solid;
white-space:nowrap;
}
.inquiry .text{
padding:3rem 0 0 0;
}
@media (max-width: 499px){
.inquiry .article-title h2{
font-size: 2.8rem;
}
}


/* wrap */
.inquiry .wrap{
position: relative;
border: 2px solid #ddd; /* 色は後で上書き */
border-radius: 2rem;
padding: 5rem 5rem 7rem 5rem;
background: #FFF; 
text-align: center;
}


/* icon */
.inquiry .wrap:before{
content: "";
position: absolute;
top: -3rem;
left: -1.2rem;
width: 7.7rem;
height: 7.7rem;
border-radius: 999px;
display: grid;
place-items: center;
background: #ddd url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 21.51"><path fill="white" d="M30.91.12c-.23-.07-.47-.12-.73-.12H2.32c-.26,0-.5.05-.73.12l14.66,11.48L30.91.12ZM32.3,1.29l-16.05,12.58L.2,1.29c-.13.27-.2.57-.2.88v17.17c0,1.2,1.04,2.17,2.32,2.17h27.86c1.28,0,2.32-.97,2.32-2.17V2.17c0-.31-.07-.61-.2-.88Z"/></svg>') no-repeat center / 50% ; /* 色は後で上書き */
}

.inquiry .icon img{
width: 70%;
object-fit: contain;
display: block;
border:0px #FF0000 solid;
}


/* 色分け（CONTACT） */
.inquiry .wrap{
border-color: #FFB96D;
}
.inquiry .wrap:before{
background-color: #FFB96D;
}
.inquiry .sub-title{
color: #FFB96D;
}
.inquiry .link-button{
text-align: center;
order: -1;
margin-bottom: 4rem;
}
.inquiry .link-button a{
background: #FFB96D;
border:2px #FFB96D solid;
}
.inquiry .link-button a::after{
color: #FFB96D !important;
}

/* hover */
.inquiry .link-button a:hover {
background: #FFF;
color: #FFB96D;
border:2px #FFB96D solid;
}
.inquiry .link-button a:hover::after{
background: #FFB96D;
color:#FFF !important;
}


/* =========================
　背景
========================= */
.bg-wrap{
border:0px #FF0000 solid;
position: relative;
z-index: 0;
}

.bg1{
position: absolute;
left: 0;
width: 100%;
height: 150vh;
z-index: 0;
overflow:hidden;
top: 10vw;
border:0px #FF0000 solid;
}

.bg1::before{
content:"";
display:block;
position: absolute;
width: 80%;
aspect-ratio:1.81/1;
left: -15vw;
background: url("../../image/bg1.png") no-repeat center / cover;
border:0px #FF0000 solid;
will-change: transform;
animation: bgPulse1 10s ease-in-out infinite;
}
@keyframes bgPulse1{
0%,100%{ transform: scale(1); }
50%{ transform: scale(.8); }
}


/* ============ */
@media (max-width: 1024px){
.bg1{
top: 20vh;
}
.bg1::before{
width: 100%;
left: -30vw;
}
}

@media (max-width: 764px){
.bg1{
top: 30vh;
}
.bg1::before{
width: 120%;
left: -30vw;
}
}

@media (max-width: 599px){
.bg1{
top: 50vh;
}
.bg1::before{
width: 180%;
left: -90vw;
}
}