/* =========================
  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;
}

.message .signature{
margin-top: 5rem;
text-align: right;
}

ruby[data-ruby]::after {
transform: translate(-50%, -0.6em);
}

/* ============= */
@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;
}

/* テーブル */
.outline table{
width: 100%;
border-collapse: collapse;
}

.outline table tr:nth-child(odd){
background: #FFF6E4;
}
.outline table tr:nth-child(even){
background: #FFF;
}

.outline table td{
padding: 2rem 1.2rem;
vertical-align: middle;
}

.outline table td:first-of-type{
white-space:nowrap;
width:25rem;
}


/* ============= */
@media (max-width: 767px) {
.outline article{
width:90%;
margin:0 auto;
}
.outline .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
.outline table tr:nth-child(odd){
background: #FFF;
}
.outline table tr:nth-child(even){
background: #FFF;
}
.outline table td:first-of-type{
background: #FFF6E4;
width:auto;
}
.outline table td{
display:block;
padding: 1.5rem 1rem;
border:0px #FF0000 solid;
}

}

/* ---------------------------------
  Googleマップで見る
--------------------------------- */
/* 地図リンクが入ってるtdだけflexにする */
.map-td{
display: flex;
align-items: center;
gap: 1.5rem;
}

/* 左側テキスト */
.map-td p{
flex: 1;  /* ← 残り幅を全部使う */
}

/* 右側リンク */
.map-td .map-link{
display: inline-flex;
align-items: center;
gap: .6rem;
margin-left: auto;
white-space: nowrap;
text-decoration: none;
color: inherit;
}

/* 丸囲み */
.map-link::before{
content: "";
width: 2.2rem;
height: 2.2rem;
border-radius: 999px;
background: #FDAAB2;

/* アイコンを丸の中に */
background-image: url("../../image/icon-arrow.png");
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
transform: rotate(90deg);
}

/* hover */
.map-link:hover{
opacity:.6;
}

/* ============= */
@media (max-width: 767px) {
.map-link{
margin-top:1rem;
}
}


/* ---------------------------------
  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;
}


/* =========================
  net-work
========================= */
.net-work{
padding:15rem 0 0 0;
}

.net-work article{
width:85%;
margin:0 auto;
}

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

.net-work .grid{
display: grid;
grid-template-columns: 4fr 3fr;
gap: 10rem;
align-items: start;
}

/* 画像 */
.net-work .image img{
width: 100%;
height: auto;
display: block;
}

/* テキスト */
.net-work .text{
margin-bottom: 4rem;
font-size:1.5rem;
}

/* ============= */
@media (max-width: 767px) {
.net-work article{
width:90%;
}
.net-work .sub-title h2{
font-size: 3.3rem;
line-height: 1.4;
}
.net-work .grid{
grid-template-columns: 1fr;
gap: 3rem;
}
}


/* ---------------------------------
  リンク装飾
--------------------------------- */
.net-work section a{
display: block;
padding: 1rem 0;
color: inherit;
text-decoration: none;
}

/* 先頭アイコン */
.net-work section a::before{
content: "";
display: inline-block;
width: 2.3rem;
height: 2.3rem;
margin-right: .6rem;
vertical-align: middle;
background: url("../../image/icon-window.png") no-repeat center / contain;
}

/* hover */
.net-work section a:hover{
opacity: .6;
}


/* =========================
　背景
========================= */
.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;
}
}