@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------------------------
 埋没カテゴリページ
 -------------------------------------------------------------------------------

/* 埋没 */

@media (min-width: 1000px){

.hero{
max-width:780px;
margin:auto;
position:relative;
}

/* 画像 */

.hero-img{
width:100%;
display:block;
}

/* テキスト配置 */

.hero-inner{
position:absolute;
top:5vw;
left:0;
width:100%;
min-height:500px;
height:auto;
display:flex;
justify-content:flex-end;
align-items:center;
padding-left:5vw;
}

.hero-text{
width:500px;
}

/* タイトル */

.hero-tl{
font-size:52px;
color:#333;
line-height:1.3;
margin-bottom:12px;
font-weight:600;
font-family: 'Noto Serif JP', serif;
background:none;
letter-spacing: 4px;
margin-left:10px;
}

.hero-sub{
display:block;
font-size:36px;
margin-bottom:8px;
letter-spacing: 3px;
}

/* ボックス */

.menu-box{
background:white;
border-radius:40px;
padding:16px 26px;
margin-bottom:18px;
box-shadow:0 6px 10px rgba(0,0,0,0.1);
position:relative;
letter-spacing: 2px;
background-color: rgba(255, 255, 255, 0.9); /* 白背景で50%の透明度 */
}

.menu-box::after{
content:"";
position:absolute;
right:-50px;
top:50%;
width:50px;
height:6px;
background:#9fd3d6;
transform:translateY(-50%);
}

.small{
font-size:16px;
color:#666;
margin-bottom:4px;
}

.big{
font-size:24px;
color:#7fc5c8;
font-weight:600;

}

.big span{
font-size:14px;
}
	
}

 @media (max-width: 999px) and (min-width: 531px) {
.hero{
max-width:780px;
margin:auto;
position:relative;
}

/* 画像 */

.hero-img{
width:100%;
display:block;
}

/* テキスト配置 */

.hero-inner{
position:absolute;
top:2vw;
left:0;
width:100%;
min-height:500px;
height:auto;
display:flex;
justify-content:flex-end;
align-items:center;
padding-left:5vw;
}

.hero-text{
width:500px;
}

/* タイトル */

.hero-tl{
font-size:52px;
color:#333;
line-height:1.3;
margin-bottom:12px;
font-weight:600;
font-family: 'Noto Serif JP', serif;
background:none;
letter-spacing: 4px;
margin-left:10px;
}

.hero-sub{
display:block;
font-size:36px;
margin-bottom:8px;
letter-spacing: 3px;
}

/* ボックス */

.menu-box{
background:white;
border-radius:40px;
padding:16px 26px;
margin-bottom:18px;
box-shadow:0 6px 10px rgba(0,0,0,0.1);
position:relative;
letter-spacing: 2px;
background-color: rgba(255, 255, 255, 0.9); /* 白背景で50%の透明度 */
}

.menu-box::after{
content:"";
position:absolute;
right:-50px;
top:50%;
width:50px;
height:6px;
background:#9fd3d6;
transform:translateY(-50%);
}

.small{
font-size:16px;
color:#666;
margin-bottom:4px;
}

.big{
font-size:24px;
color:#7fc5c8;
font-weight:600;

}

.big span{
font-size:14px;
}
	
}

@media (max-width: 530px) {
.hero{
max-width:530px;
margin:auto;
position:relative;
margin-bottom:4vh;
}

/* 画像 */

.hero-img{
width:100%;
display:block;
}

/* テキスト配置 */

.hero-inner{
position:absolute;
top:0;
left:0;
width:100%;
min-height:340px;
height:auto;
display:flex;
justify-content:flex-end;
align-items:center;
padding-left:18.99vw;
}

.hero-text{
width:300px;
}

/* タイトル */

.hero-tl{
font-size:30px;
color:#333;
line-height:1.3;
margin-bottom:8px;
font-weight:600;
font-family: 'Noto Serif JP', serif;
background:none;
letter-spacing: 3px;
margin-left:20px;
}

.hero-sub{
display:block;
font-size:20px;
margin-bottom:2px;
letter-spacing: 2px;
}

/* ボックス */

.menu-box{
background:white;
border-radius:40px;
padding:10px 20px;
margin-bottom:10px;
box-shadow:0 6px 10px rgba(0,0,0,0.1);
position:relative;
letter-spacing: 2px;
background-color: rgba(255, 255, 255, 0.8); /* 白背景で50%の透明度 */
}

.menu-box::after{
content:"";
position:absolute;
right:-50px;
top:50%;
width:50px;
height:6px;
background:#9fd3d6;
transform:translateY(-50%);
}

.small{
font-size:11px;
color:#666;
margin-bottom:4px;
}

.big{
font-size:15px;
color:#7fc5c8;
font-weight:600;

}

.big span{
font-size:14px;
}
	
}



.menu-box a:link { color: #7fc5c8; }
.menu-box a:visited { color: #7fc5c8; }
.menu-box a:hover { color: #7fc5c8; } 
.menu-box a:active { color: #7fc5c8; }