@charset "utf-8";
img, object, embed, video {
width: 100%;
margin: auto;
}

/* =========================================================
keyframes
========================================================= */
/* 左から表示 */
@keyframes reveal-text {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}

/* グラデーション移動 */
@keyframes shimmer {
0% {
background-position: 100% 0%;
}

100% {
background-position: 0% 0%;
}
}

.btn_com{

}

.btn_com a{
display: inline-flex;
gap: 16px;
padding-bottom: 7px;
border-bottom: 1px solid;
font-size: 11px;
letter-spacing: .1em
}

 #style .product-copy a, #style-intro .two a, #aging .two a, #story .two a, #story a, #shop a, #care a, #closing a, #products .title-row a, #journal .title-row a {
    font-size: 11px;
    letter-spacing: .1em;
  }


/* =========================================================
PC
========================================================= */
@media print, screen and (min-width: 768px) {
.pc {
display: block !important;
}
.sp {
display: none !important;
}
body {
min-width: 1240px;
line-height: 2;
}
/* =====================================================
スクロールトップ
===================================================== */
#totop {
bottom: 140px;
display: block;
position: fixed;
right: 20px;
z-index: 50;
}
#totop a {
display: block;
width: 54px;
height: 54px;
text-indent: -1000em;
overflow: hidden;
background: url("https://file003.shop-pro.jp/PA01489/644/images/com/btn_scroll_top.png") 0 0 no-repeat;
background-size: 100% auto;
}
/* =====================================================
共通
===================================================== */
.pcBr {
display: inline-block;
}
.spBr {
display: none;
}
.pc {
display: block;
}
.sp {
display: none !important;
}
/* =====================================================
header
===================================================== */
header {
z-index: 100;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
opacity: 1;
visibility: visible;
transition:
opacity .6s ease,
visibility .6s ease;
}

/* footer表示領域に入ったらフェードアウト */
header.is-footer {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* -----------------------------------------------------
#header
初期状態：背景透明
----------------------------------------------------- */
#header {
width: 100%;
height: 80px;
display: grid;
grid-template-columns: 160px 1fr 130px;
align-items: center;
gap: 10px;
position: relative;
padding: 0 2vw 0 3vw;
box-sizing: border-box;
background: #fff;
transition:
background-color .4s ease, box-shadow .4s ease;
}
/* -----------------------------------------------------
ロゴ
----------------------------------------------------- */
#header .logo_wrap {
position: relative;
width: 160px;
}
#header .logo_wrap a {
display: block;
}
#header .logo_wrap img {
display: block;
width: 100%;
height: auto;
/* 初期状態：白 */
transition: filter .4s ease;
}
/* -----------------------------------------------------
通常ナビゲーション
初期状態：非表示
----------------------------------------------------- */
#header .menu_wrap {
position: relative;
display: flex;
justify-content: flex-end;
opacity: 1;
visibility:visible;
transform: translateY(0);
transition:
opacity .4s ease, visibility .4s ease, transform .4s ease;
}
#header .menu_wrap .menu {
display: flex;
flex-wrap: wrap;
margin-right: 16px;
}
#header .menu_wrap .menu li {
font-size: 12px;
font-weight: 400;
margin-right: 20px;
}
#header .menu_wrap .menu li:last-child {
margin-right: 0;
margin-bottom: 0;
}
#header .menu_wrap .menu li a {
display: block;
color: #000;
transition: opacity .3s ease;
}
#header .menu_wrap .menu li a:hover {
opacity: .6;
}
/* -----------------------------------------------------
LOGIN / CART / MENU BUTTON
----------------------------------------------------- */
.header-actions {
align-items: center;
display: flex;
gap: 28px;
justify-content: flex-end;
}
.header-actions ul {
width: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
padding: 0;
}
.header-actions ul li {
width: 44%;
}
.header-actions ul li a {
display: block;
}
.header-actions ul li a img {
width: 100%;
height: auto;
}
/* -----------------------------------------------------
ハンバーガーボタン
----------------------------------------------------- */
.menu-button {
background: none;
border: 0;
cursor: pointer;
height: 28px;
width: 30px;
padding: 6px 0;
/* 初期状態：白 */
color: #000;
transition: color .4s ease;
}
.menu-button span {
background: currentColor;
display: block;
height: 1px;
width: 100%;
margin: 0 0 7px auto;
transition:
width .3s ease, background-color .4s ease;
}
.menu-button span:last-child {
width: 68%;
}
/* =====================================================
スクロール後
header.is-scrolled
===================================================== */
header.is-scrolled #header {
/* 背景を白 */
background: #fff;

/* 必要なら影を付ける場合はこちら */
/* box-shadow: 0 2px 10px rgba(0,0,0,.05); */
}
/* ロゴを黒 */
header.is-scrolled #header .logo_wrap img {
filter: brightness(0);
}
/* LOGIN / CARTを黒 */
header.is-scrolled #header .header-actions img {
filter: brightness(0);
}
/* ハンバーガーを黒 */
header.is-scrolled #header .menu-button {
color: #000;
}
/* メニューを表示 */
header.is-scrolled #header .menu_wrap {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* =====================================================
menu overlay
===================================================== */
.menu-overlay {
background: #1d1c19;
color: #fff;
inset: 0;
opacity: 0;
padding: 9vw 8vw;
pointer-events: none;
position: fixed;
transform: translateY(-2%);
transition:
opacity .55s ease, transform .55s ease;
z-index: 100;
height: 100dvh;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.menu-overlay.is-open {
opacity: 1;
pointer-events: auto;
transform: none;
}
.menu-overlay > div {
width: 220px;
margin:0 auto 40px;
}
.menu-overlay > div img {
filter: brightness(0) invert(1);
}

.menu-overlay .s_ttl,
.menu-overlay .s_ttl a{
font-size: .8rem;
line-height: 1;
margin-bottom:30px;
color: #FFF;
}

.menu-overlay nav {
display: grid;
grid-template-columns:repeat(3,1fr);
gap: 50px;
margin-bottom: 80px;
}

.menu-overlay nav a {
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, .16);
display: flex;
font-family: "Yu Mincho", serif;
font-size: clamp(12px, 1.2vw, 16px);
justify-content: space-between;
padding: 10px 0;
color: #fff;
text-decoration: none;
}

.menu-overlay .sns_list {
width: 100px;
display: grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin: auto;
}

.menu-overlay .sns_list li img{
filter: brightness(0) invert(1);
}

.menu-close {
background: none;
border: 0;
cursor: pointer;
letter-spacing: .16em;
position: absolute;
right: 6vw;
top: 45px;
color: #fff;
}
.menu-store {
align-self: end;
border-bottom: 1px solid #fff;
font-size: 13px;
justify-self: start;
letter-spacing: .18em;
padding: 0 0 12px;
}
/* =====================================================
footer
===================================================== */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
color: #fff;
display: flex;
flex-direction: column;
}
/* -----------------------------------------------------
背景画像
----------------------------------------------------- */
.footer__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.footer__bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,.3);
z-index: 1;
}
.footer__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.footer__bg::after {
content: "";
position: absolute;
inset: 0;
background: transparent;
}
/* -----------------------------------------------------
footer内部
----------------------------------------------------- */
.footer__inner {
position: relative;
z-index: 1;
flex: 1;
padding: 23.5px 3vw 40px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.footer__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 60px;
}
/* -----------------------------------------------------
ロゴ
----------------------------------------------------- */
.footer__logo img {
height: 34px;
width: auto;
display: block;
filter: brightness(0) invert(1);
}
/* -----------------------------------------------------
SHOPボタン
----------------------------------------------------- */
.footer__shop-btn {
font-family: Marcellus, Georgia, serif;
font-size: 14px;
letter-spacing: 2px;
color: #fff;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 10px 22px;
transition: opacity .2s;
white-space: nowrap;
}
.footer__shop-btn:hover {
opacity: .6;
}
/* -----------------------------------------------------
ナビゲーション
----------------------------------------------------- */
.footer__nav {
margin-bottom: 30px;
}

.footer__nav .s_ttl{
font-size: .7rem;
line-height: 1;
margin: 0 0 20px;
}

.footer__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.footer__nav-list li{
margin-right: 30px;
}

.footer__nav-list a {
font-family: Marcellus, Georgia, serif;
font-size: .9vw;
line-height: 1;
color: #fff;
text-decoration: none;
transition: opacity .2s;
}
.footer__nav-list a:hover {
opacity: .6;
}
.footer__nav-list a.is-current {
position: relative;
display: inline-block;
text-decoration: none;
}
.footer__nav-list a.is-current::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1px;
background: currentColor;
transform-origin: left;
transform: scaleX(1);
pointer-events: none;
}
.footer__nav-list a.is-current:hover::after {
animation: hover-underline-redraw .7s ease;
}
.footer__nav-list a.is-current:hover {
opacity: 1;
}
/* -----------------------------------------------------
コピーライト
----------------------------------------------------- */
.footer__bottom {
margin-top: 0;
}
.footer__copy {
font-family: Marcellus, Georgia, serif;
font-size: 12px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 1);
margin: 0;
}
/* -----------------------------------------------------
下部ワードマーク
----------------------------------------------------- */
.footer__wordmark {
position: relative;
z-index: 1;
width: 66%;
display: block;
margin: auto;
}
.footer__wordmark-img {
width: 100%;
height: auto;
display: block;
filter: brightness(0) invert(1);
opacity: 1;
transform: translateY(60px);
will-change: transform, opacity;
}
/* -----------------------------------------------------
SHARE
----------------------------------------------------- */
.site-share--footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
margin-top: 40px;
margin-bottom: 56px;
}
.site-share__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.site-share__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
text-decoration: none;
transition: opacity .2s ease;
}
.site-share__btn img {
filter: brightness(0) invert(1);
display: block;
width: 20px;
height: 20px;
}

.arrow-link {
align-items: center;
border-bottom: 1px solid #222;
display: flex;
font-size: 14px;
font-weight: 700;
justify-content: space-between;
letter-spacing: .06em;
max-width: 330px;
padding: 10px 2px;
transition: border-color .3s, padding .3s;
width: 100%;
}

.arrow-link:hover {
border-color: #222;
padding-left: 10px
}

.arrow-link i {
font-size: 20px;
font-style: normal;
font-weight: 400;
}

/*main
--------------------------------------*/
main {
width: 100%;
position: relative;
z-index: 1;
background: #fff;
margin-bottom: 100vh;
}


/*hed
-------------------------------------*/
#hed{
padding:160px clamp(28px, 7vw, 118px) 110px;
}

.hline01 {
position: relative;
display: flex;
align-items: baseline;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0;
padding-bottom: 30px;
}

.hline01::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 2px;
background-color:#734201;
z-index: 1;
}

.hline01:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color:#C8C8C8;
}

/* 日本語見出し */
.hline01-jp {
display: flex;
align-items: center;
margin-bottom: 0.4rem;
padding-left: 5px;
font-size: 1rem;
color: #000;
font-weight: 700;
line-height: 1.3;
}

.hline01-jp::before {
content: "";
flex-shrink: 0;
width: 5px;
margin-right: 0.5rem;
position: relative;
top: -0.1rem;
aspect-ratio: 1 / 1;
background-color: #734201;
border-radius: 50%;
}

/* 英語見出しの表示領域 */
.hline01-box {
clip-path: inset(0 100% 0 0);
animation: reveal-text 1s ease forwards;
animation-delay: 0.5s;
mix-blend-mode: multiply;
}

/* 英語見出し */
.hline01-en {
display: inline-block;
font-size: 4rem;
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
background: linear-gradient(
to right,
#a7a7a7 8%,
#838383 33%,
#a7a7a7 66%
);
background-position: 100% 0%;
background-size: 300% 100%;

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

/* JSでactiveが付いたとき */
.hline01-en.active {
animation: shimmer 2s ease-in-out forwards;
animation-delay: 1.5s;
}

/******************/
/* パンくず */
/******************/
.l-breadcrumbs {
margin-top: 5px;
text-align: right
}
.l-breadcrumbs-item {
font-size:.8rem;
display: inline-block;
padding: 3px 0;
}
.l-breadcrumbs-item a{
color: rgba(0, 0, 0, 0.3);
}

.l-breadcrumbs-second {
position: relative;
padding-left: 20px;
}
.l-breadcrumbs-second::before {
display: inline-block;
position: absolute;
width: 0.3rem;
height: 0.3rem;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.3);
content: "";
top: 12px;
left: 7px;
}
.l-breadcrumbs-item a:hover {
text-decoration: underline;
}

}
/* =========================================================
SP
========================================================= */
@media only screen and (max-width: 767px) {

/* =====================================================
基本
===================================================== */
html,
body {
width: 100%;
min-width: 0;
overflow-x: hidden;
}

body {
line-height: 1.8;
}

.pc,
.pcBr {
display: none !important;
}

.sp {
display: block !important;
}

.spBr {
display: inline-block;
}

img,
object,
embed,
video {
max-width: 100%;
height: auto;
}

/* =====================================================
スクロールトップ
===================================================== */
#totop {
position: fixed;
right: 14px;
bottom: 20px;
z-index: 50;
}

#totop a {
display: block;
width: 42px;
height: 42px;
overflow: hidden;
text-indent: -1000em;
background: url("https://file003.shop-pro.jp/PA01489/644/images/com/btn_scroll_top.png") center / 100% auto no-repeat;
}

/* =====================================================
header
===================================================== */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100;
opacity: 1;
visibility: visible;
transition:
opacity .6s ease,
visibility .6s ease;
}

header.is-footer {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

#header {
width: 100%;
height: 64px;
display: grid;
grid-template-columns: 120px 1fr auto;
align-items: center;
gap: 10px;
position: relative;
padding: 0 16px;
box-sizing: border-box;
background: #fff;
transition:
background-color .4s ease,
box-shadow .4s ease;
}

#header .logo_wrap {
position: relative;
width: 120px;
}

#header .logo_wrap a {
display: block;
}

#header .logo_wrap img {
display: block;
width: 100%;
height: auto;
transition: filter .4s ease;
}

/* PC用通常ナビはスマホでは非表示 */
#header .menu_wrap {
display: none !important;
}

.header-actions {
grid-column: 3;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}

.header-actions ul {
width: auto;
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}

.header-actions ul li {
width: 22px;
margin: 0;
}

.header-actions ul li a {
display: block;
line-height: 0;
}

.header-actions ul li a img {
display: block;
width: 100%;
height: auto;
transition: filter .4s ease;
}

.menu-button {
width: 28px;
height: 28px;
padding: 6px 0;
background: none;
border: 0;
color: #000;
cursor: pointer;
transition: color .4s ease;
}

.menu-button span {
display: block;
width: 100%;
height: 1px;
margin: 0 0 7px auto;
background: currentColor;
transition:
width .3s ease,
background-color .4s ease;
}

.menu-button span:last-child {
width: 68%;
margin-bottom: 0;
}

/* =====================================================
スクロール後
===================================================== */
header.is-scrolled #header {
background: #fff;
}

header.is-scrolled #header .logo_wrap img,
header.is-scrolled #header .header-actions img {
filter: brightness(0);
}

header.is-scrolled #header .menu-button {
color: #000;
}

/* =====================================================
menu overlay
===================================================== */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 200;
width: 100%;
height: 100dvh;
box-sizing: border-box;
padding: 82px 24px 40px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #1d1c19;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-12px);
transition:
opacity .45s ease,
visibility .45s ease,
transform .45s ease;
}

.menu-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.menu-overlay > div {
width: 140px;
margin: 0 auto 38px;
}

.menu-overlay > div img {
display: block;
width: 100%;
filter: brightness(0) invert(1);
}

.menu-overlay .s_ttl {
margin: 0 0 12px;
font-size: 10px;
line-height: 1.4;
letter-spacing: .12em;
}

.menu-overlay .s_ttl a {
margin: 0;
padding: 10px 0;
font-size: 10px;
line-height: 1.4;
color: #fff;
text-decoration: none;
}

.menu-overlay nav {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0 0 34px;
}

.menu-overlay nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
border-bottom: 1px solid rgba(255,255,255,.16);
font-family: "Yu Mincho", serif;
font-size: 14px;
line-height: 1.4;
color: #fff;
text-decoration: none;
}

.menu-overlay .sns_list {
width: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin: 42px auto 10px;
padding: 0;
list-style: none;
}

.menu-overlay .sns_list li {
width: 22px;
}

.menu-overlay .sns_list li img {
display: block;
width: 100%;
filter: brightness(0) invert(1);
}

.menu-close {
position: absolute;
top: 22px;
right: 20px;
padding: 8px 0;
background: none;
border: 0;
color: #fff;
font-size: 11px;
letter-spacing: .14em;
cursor: pointer;
}

/* =====================================================
footer
===================================================== */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100dvh;
overflow: hidden;
z-index: 0;
display: flex;
flex-direction: column;
color: #fff;
padding: 35px 0 35px 5%;
}

.footer__bg {
position: absolute;
inset: 0;
z-index: 0;
}

.footer__bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0,0,0,.35);
}

.footer__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.footer__bg::after {
content: "";
position: absolute;
inset: 0;
background: transparent;
}

.footer__inner {
position: relative;
z-index: 2;
flex: 1;
box-sizing: border-box;
padding: 24px 0 36px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 38px;
}

.footer__logo {
display: block;
width: 120px;
}

.footer__logo img {
display: block;
width: 100%;
height: auto;
filter: brightness(0) invert(1);
}

.footer__shop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50px;
font-family: Marcellus, Georgia, serif;
font-size: 10px;
line-height: 1.2;
letter-spacing: 1px;
white-space: nowrap;
color: #fff;
text-decoration: none;
}

.footer__nav {
margin-bottom: 30px;
}

.footer__nav .s_ttl {
margin: 0 0 8px;
font-size: 8px;
line-height: 1.4;
letter-spacing: .12em;
}

.footer__nav-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
row-gap: 0;
margin: 0;
padding: 0;
list-style: none;
}

.footer__nav-list li {
margin: 0;
min-width: 0;
}

.footer__nav-list a {
position: relative;
display: block;
padding: 6px 0;
font-family: Marcellus, Georgia, serif;
font-size: 12px;
line-height: 1.35;
color: #fff;
text-decoration: none;
}

.footer__nav-list a.is-current {
display: inline-block;
}

.footer__nav-list a.is-current::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 1px;
background: currentColor;
}

.site-share--footer {
display: flex;
align-items: center;
gap: 16px;
margin: 34px 0 28px;
}

.site-share__label {
margin: 0;
font-size: 11px;
letter-spacing: .1em;
}

.site-share__list {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}

.site-share__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
color: #fff;
text-decoration: none;
}

.site-share__btn img {
display: block;
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}

.footer__bottom {
margin-top: 0;
}

.footer__copy {
margin: 0;
font-family: Marcellus, Georgia, serif;
font-size: 10px;
line-height: 1.6;
letter-spacing: .5px;
color: rgba(255,255,255,1);
}

.footer__wordmark {
position: relative;
z-index: 1;
display: block;
width: 60%;
margin: 0 auto 20px;
}

.footer__wordmark-img {
display: block;
width: 100%;
height: auto;
filter: brightness(0) invert(1);
opacity: 1;
transform: translateY(20px);
will-change: transform, opacity;
}


.arrow-link {
align-items: center;
border-bottom: 1px solid #222;
display: flex;
font-size: 14px;
font-weight: 700;
justify-content: space-between;
letter-spacing: .06em;
max-width: 330px;
padding: 10px 2px;
transition: border-color .3s, padding .3s;
width: 100%;
}

.arrow-link:hover {
border-color: #222;
padding-left: 10px
}

.arrow-link i {
font-size: 20px;
font-style: normal;
font-weight: 400;
}

/*main
---------------------------------------*/
main {
width: 100%;
position: relative;
z-index: 1;
background: #fff;
margin-bottom: 100vh;
}

/*hed
-------------------------------------*/
#hed{
padding:70px 5vw 40px;
}

.hline01 {
position: relative;
display: flex;
align-items: baseline;
flex-direction: column;
padding-bottom: 1.4rem;
}

.hline01::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 1px;
background-color:#734201;
z-index: 1;
}

.hline01:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color:#C8C8C8;
}

/* 日本語見出し */
.hline01-jp {
display: flex;
align-items: center;
margin-bottom:.6rem;
padding-left: 0;
font-size: .7rem;
color: #000;
font-weight: 700;
line-height: 1.3;
}

.hline01-jp::before {
content: "";
flex-shrink: 0;
width: 4px;
margin-right: 0.5rem;
position: relative;
top: -0.1rem;
aspect-ratio: 1 / 1;
background-color: #734201;
border-radius: 50%;
}

/* 英語見出しの表示領域 */
.hline01-box {
clip-path: inset(0 100% 0 0);
animation: reveal-text 1s ease forwards;
animation-delay: 0.5s;
mix-blend-mode: multiply;
}

/* 英語見出し */
.hline01-en {
display: inline-block;
font-size: 2rem;
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;

color: transparent;
background: linear-gradient(
to right,
#a7a7a7 8%,
#838383 33%,
#a7a7a7 66%
);
background-position: 100% 0%;
background-size: 300% 100%;

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

/* JSでactiveが付いたとき */
.hline01-en.active {
animation: shimmer 2s ease-in-out forwards;
animation-delay: 1.5s;
}

/******************/
/* パンくず */
/******************/
.l-breadcrumbs {
text-align: right;
margin-bottom: 20px;
}
.l-breadcrumbs-item {
font-size:.6rem;
display: inline-block;
padding: 3px 0;
}
.l-breadcrumbs-item a{
color: rgba(0, 0, 0, 0.3);
}

.l-breadcrumbs-second {
position: relative;
padding-left: 20px;
}
.l-breadcrumbs-second::before {
display: inline-block;
position: absolute;
width: 0.3rem;
height: 0.3rem;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.3);
content: "";
top: 10px;
left: 5px;
}
.l-breadcrumbs-item a:hover {
text-decoration: underline;
}


}