@charset "utf-8";
/* CSS Document */

/* image余白ツメ」 */
img {vertical-align: bottom;}

/* float横並びパーツ */
.clearfix{clear: both}
.f-Left{float: left;}
.f-Right{float: right}

/* 文字色ゴールド */
.t-gold{
color: #9F7220;
}
/* 文字色白 */
.t-white{
color: #fff;
}
/* test BOX */
/* 赤001 */
.radius-box-red01
{
	border-radius: 3px; border: 2px solid red;
}
/* 赤002 */
.radius-box-red02
{
	border-radius: 3px; background-color: red;
}
.frame_01{background-color:#fff; padding:10px ; border:solid 1px #000; width:50%}

/* リンク下線消し */
.link_anchor, .internal_link, .external_link {text-decoration: none !important;}

/* 内部リンク アイコン付き _target */
a.internal_link[target=_blank]:after {
content: "";
width: 12px;
height: 12px;
background: url(../images/global/icon_blank.svg) no-repeat top center/contain;
display: inline-block;
margin-left: 6px;
}

/* link_anchorの囲みあありり版 */
.link_anchor_frame {
font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, "游明朝体", "Yu Mincho", YuMincho, serif;
border: 1px solid currentColor;
padding: 13px 30px;
font-size: 1.8rem;
letter-spacing: 0.05em;
display: flex;
justify-content: center;
align-items: center;
-moz-column-gap: 16px;
column-gap: 16px;
color: #1B120F !important;
position: relative;
}
.link_anchor_frame  > li a {
color: #1B120F !important;
text-decoration: none !important;
}


/* link_bnrのアンカーアイコン版 */
.link_bnr_anchor {
display: flex;
align-items: center;
border: 1px solid #1B120F;
color: #1B120F !important;
position: relative;
padding-right: 25px;
max-width: 600px;
margin: 0 auto;
}

.link_bnr_anchor .pic {
width: 15%;
flex-shrink: 0;
}
.link_bnr_anchor.pic img {
display: block;
}
.link_bnr_anchor .txt {
flex-grow: 1;
text-align: center;
font-size: 1.2rem;
letter-spacing: 0.1em;
line-height: 1.5;
}
.link_bnr_anchor .txt strong {
font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, "游明朝体", "Yu Mincho", YuMincho, serif;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.05em;
margin-bottom: 4px;
display: inline-block;
}
.link_bnr_anchor:after {
content: "";
width: 6px;
height: 6px;
border-right: 2px solid #E7190A;
border-bottom: 2px solid #E7190A;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
}


/* 外部リンク アイコン付き _target */
/*a.external_link[target=_blank]:after {
content: "";
width: 12px;
height: 12px;
background: url(../images/common/icon_blank02.svg) no-repeat center/contain;
display: inline-block;
margin-left: 6px;
}*/


/*--------------------------
Flexbox系
--------------------------*/
/* [PC] 画像・テキスト 2カラム  */
.flexbox-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, "游明朝体", "Yu Mincho", YuMincho, serif;
}

.flexbox-img-col2, .flexbox-txt-col2 {
  width: 48%; /* 横並びの幅調整 */
	/*
	flex-img：画像（PCで左・スマホで下）
	flex-txt：文章（PCで右・スマホで上）
	*/
}
.flexbox-align-top{align-items: flex-start;}/*上揃え*/
.flexbox-align-center{align-items: center;}/*上下中央揃え*/
.flexbox-align-middle{align-items: center;}/*上下中央揃え*/
.flexbox-align-bottom{align-items: flex-end;}/*下揃え*/


/*--------------------------
タブ
--------------------------*/
/* 1. コンテンツエリアの基本設定（デフォルトは非表示にする） */
.tab-1-content, .tab-2-content, .tab-3-content, .tab-4-content, .tab-5-content {
	display: none;    /* 初期状態は非表示 */
	overflow-y: auto;
	min-height: 350px;
	max-height: 400px;
	width: 100%;
	padding: 1.5em 1em;
	background-color: #fff;
}

/* 2. 親コンテナの指定 */
.tab-1, .tab-2, .tab-3, .tab-4, .tab-5 {
	display: flex;
	flex-wrap: wrap;
	min-height: 300px; 
}

/* 3. タブボタン（通常時） */
:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) > label  {
	flex: 1 1;
	order: -1;
	min-width: 70px;
	min-height: 50px;	
	padding: .7em 1em .5em ;
	border-bottom: 1px solid #f0f0f0;
	border-radius: 0;
	background-color: #F8F8F5;
	color: #535353;
	font-size: 1.0em;
	text-align: center;
	cursor: pointer;
}

:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) > label:hover {
	opacity: .8;
}

/* 4. ラジオボタン本体は非表示 */
:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) input[type="radio"] {
	display: none;
}

/* 5. 選択されているタブボタンのスタイル */
:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) label:has(:checked) {
	background-color: #fff;
	border-color: #E7190A #f0f0f0 #fff;
	border-style: solid;
	border-width: 4px 1px 1px;
	border-radius: 5px 5px 0 0;
	color: #333333;
}

/* 6. 選択されているタブのコンテンツを表示する（ここを修正） */
:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) label:has(:checked) + [class$="-content"] {
	display: block; /* 選択されたタブの隣にあるコンテンツを表示 */
}


/* SP表示 */
@media screen and (max-width: 768px){
/*--------------------------
タブ SP
--------------------------*/
.tab-1, .tab-2, .tab-3, .tab-4, .tab-5 {
 min-height: 300px;
}
.tab-1-content, .tab-2-content, .tab-3-content, .tab-4-content, .tab-5-content {
max-height: 350px;
}
/* 3. タブボタン（通常時） */
:is(.tab-1, .tab-2, .tab-3, .tab-4, .tab-5) > label  {
        font-size: 0.8em;
        padding: 10px 0;
}
}

/*--------------------------
カルーセル
--------------------------*/
.carousel-container {
width: 100%;
min-height: 100px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.carousel-inner {
width: 100%;
height: 100%;
display: flex;
transition: transform 0.3s ease;
}

.carousel-box {
height: 100%;
min-width: 100%;
}

:is(.clbox-1, .clbox-2, .clbox-3, .clbox-4) { }

.cl-btn-prev,
.cl-btn-next {
position: absolute;
top: 60%;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 1.1em;
width: 30px;
height: 30px;
cursor: pointer;
}

.cl-btn-prev { left: 10px; }
.cl-btn-next { right: 10px; }

.cl-btn-prev:hover,
.cl-btn-next:hover { background: rgba(231, 25, 10, 0.85); }


/*--------------------------
QA
--------------------------*/
.qa-01 {
    max-width: 1000px;
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa-01 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-01 summary::before,
.qa-01 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-01 summary::before {
    color: #494949;
    content: "Q";
}

.qa-01 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-01[open] summary::after {
    transform: rotate(225deg);
}

.qa-01 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-01[open] p {
    transform: none;
    opacity: 1;
}

.qa-01 p::before {
    color: #E7190A;
    line-height: 1.2;
    content: "A";
}

/*--------------------------
モーダル
--------------------------*/
.open-modal-btn {
min-height:48px; /* ボタンの最小高さ */
padding:12px 16px; /* ボタン内側の上下・左右余白 */
border:solid 1px currentColor; /* ボタンの枠線を非表示 */
border-radius:30px; /* ボタンの角丸 */
background:#fff; /* ボタンの背景色 */
color: #1B120F !important; /* ボタンの文字色 */
font-size: 1.6rem;
letter-spacing: 0.1em;
font-weight:500; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
padding: 13px 30px;
display: block;
position: relative;
width:100%;
text-align:center;
gap:12px; /* ボタン同士の間隔 */
}
.open-modal-btn:after{
content: "";
width: 6px;
height: 6px;
border-right: 2px solid #E7190A;
border-bottom: 2px solid #E7190A;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(-45deg);
}

.modal-btn_gold {
background: #9F7220;
color: #FFFFFF !important;
border: 0;
}
.modal-btn_gold:after {
border-color: currentColor;
}

.close-btn {
position: absolute;
top: -15px;
right: -2%;
z-index: 99999;
width: 40px;
height: 40px;
padding: 0;
border: 3px #fff solid;
border-radius: 50%;
background: #111827;
color: #fff;
font-size: 30px;
font-weight: 500;
line-height: 1;
cursor: pointer;
}

/* モーダル背景 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(79, 79, 79, 0.5);
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

/* モーダル表示状態 */
.modal.active {
display: flex;
opacity: 1;
pointer-events: auto;
}

/* モーダルの中身*/
.modal-container {
background: #fff;
padding: 15px 10px 15px 15px;
border-radius: 10px;
width: 80%;
max-width: 500px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
position: relative;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
height: auto;
max-height: 70%;
}
.modal-content {
overflow-y: scroll;
max-width: 100%;
max-height: 95%;
padding: 0 10px 0 0;
}

/* アニメーション*/
.modal.active .modal-container {
animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}




/* SP表示 */
@media screen and (max-width: 768px){
/*--------------------------
リンク系 SP
--------------------------*/
.link_anchor {
font-family: "ヒラギノ明朝 ProN", HiraMinProN-W3, "游明朝体", "Yu Mincho", YuMincho, serif;
font-size: 1.6rem !important;
text-decoration: none !important;
letter-spacing: 0.05em;
display: flex;
justify-content: center;
align-items: center;
-moz-column-gap: 16px;
column-gap: 16px;
color: #1B120F !important;
}

.link_anchor {
font-size: 2.1rem;
-moz-column-gap: 20px;
column-gap: 20px;
}
.link_anchor {
font-size: 2.1rem;
}
.link_bnr_anchor {
padding-right: 7.5%;
}	
.link_bnr_anchor .pic {
width: 27.027027027%;
}
.link_bnr_anchor .txt {
/*font-size: 1.6rem;*/
}
.link_bnr_anchor .txt strong {
font-size: 2rem;
}
.link_bnr_anchor:after {
right: 7%;
}

/*--------------------------
Flexbox系 SP
--------------------------*/
/* [PC] 画像・テキスト 2カラム/[SP]縦並び  */
.flexbox-col {
flex-direction: column; /* 要素を縦並びにする */
}

  .flexbox-reverse {
    flex-direction: column-reverse; /* 縦並びにして、HTMLの記述順と逆にする */
  }
  .flexbox-img-col2, .flexbox-txt-col2 {
    width: 100%; /* スマホでは横幅いっぱいに */
	/*
	flex-img：画像（PCで左・スマホで下）
	flex-txt：文章（PCで右・スマホで上）
	*/
}


}/*@media screen and (max-width: 768px)*/


/* margin-left パーツ */
.ml0{ margin-left:0px; }
.ml10{ margin-left:10px; }
.ml15{ margin-left:15px; }
.ml20{ margin-left:20px; }
.ml25{ margin-left:25px; }
.ml30{ margin-left:30px; }
.ml35{ margin-left:35px; }
.ml40{ margin-left:40px; }
.ml45{ margin-left:45px; }
.ml50{ margin-left:50px; }
.ml55{ margin-left:55px; }
.ml60{ margin-left:60px; }
.ml65{ margin-left:65px; }
.ml70{ margin-left:70px; }
.ml75{ margin-left:75px; }
.ml80{ margin-left:80px; }
.ml85{ margin-left:85px; }
.ml90{ margin-left:90px; }
.ml95{ margin-left:95px; }
.ml100{ margin-left:100px; }
.ml105{ margin-left:105px; }
.ml110{ margin-left:110px; }
.ml115{ margin-left:115px; }
.ml120{ margin-left:120px; }
.ml125{ margin-left:125px; }
.ml130{ margin-left:130px; }
.ml135{ margin-left:135px; }
.ml140{ margin-left:140px; }
.ml145{ margin-left:145px; }
.ml150{ margin-left:150px; }

/* margin-right パーツ */
.mr0{ margin-right:0px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr25{ margin-right:25px; }
.mr30{ margin-right:30px; }
.mr35{ margin-right:35px; }
.mr40{ margin-right:40px; }
.mr45{ margin-right:45px; }
.mr50{ margin-right:50px; }
.mr55{ margin-right:55px; }
.mr60{ margin-right:60px; }
.mr65{ margin-right:65px; }
.mr70{ margin-right:70px; }
.mr75{ margin-right:75px; }
.mr80{ margin-right:80px; }
.mr85{ margin-right:85px; }
.mr90{ margin-right:90px; }
.mr95{ margin-right:95px; }
.mr100{ margin-right:100px; }
.mr105{ margin-right:105px; }
.mr110{ margin-right:110px; }
.mr115{ margin-right:115px; }
.mr120{ margin-right:120px; }
.mr125{ margin-right:125px; }
.mr130{ margin-right:130px; }
.mr135{ margin-right:135px; }
.mr140{ margin-right:140px; }
.mr145{ margin-right:145px; }
.mr150{ margin-right:150px; }

/* padding-left パーツ */
.pl0{ padding-left:0px; }
.pl10{ padding-left:10px; }
.pl15{ padding-left:15px; }
.pl20{ padding-left:20px; }
.pl25{ padding-left:25px; }
.pl30{ padding-left:30px; }
.pl35{ padding-left:35px; }
.pl40{ padding-left:40px; }
.pl45{ padding-left:45px; }
.pl50{ padding-left:50px; }
.pl55{ padding-left:55px; }
.pl60{ padding-left:60px; }
.pl65{ padding-left:65px; }
.pl70{ padding-left:70px; }
.pl75{ padding-left:75px; }
.pl80{ padding-left:80px; }
.pl85{ padding-left:85px; }
.pl90{ padding-left:90px; }
.pl95{ padding-left:95px; }
.pl100{ padding-left:100px; }
.pl105{ padding-left:105px; }
.pl110{ padding-left:110px; }
.pl115{ padding-left:115px; }
.pl120{ padding-left:120px; }
.pl125{ padding-left:125px; }
.pl130{ padding-left:130px; }
.pl135{ padding-left:135px; }
.pl140{ padding-left:140px; }
.pl145{ padding-left:145px; }
.pl150{ padding-left:150px; }

/* padding-right パーツ */
.pr0{ padding-right:0px; }
.pr10{ padding-right:10px; }
.pr15{ padding-right:15px; }
.pr20{ padding-right:20px; }
.pr25{ padding-right:25px; }
.pr30{ padding-right:30px; }
.pr35{ padding-right:35px; }
.pr40{ padding-right:40px; }
.pr45{ padding-right:45px; }
.pr50{ padding-right:50px; }
.pr55{ padding-right:55px; }
.pr60{ padding-right:60px; }
.pr65{ padding-right:65px; }
.pr70{ padding-right:70px; }
.pr75{ padding-right:75px; }
.pr80{ padding-right:80px; }
.pr85{ padding-right:85px; }
.pr90{ padding-right:90px; }
.pr95{ padding-right:95px; }
.pr100{ padding-right:100px; }
.pr105{ padding-right:105px; }
.pr110{ padding-right:110px; }
.pr115{ padding-right:115px; }
.pr120{ padding-right:120px; }
.pr125{ padding-right:125px; }
.pr130{ padding-right:130px; }
.pr135{ padding-right:135px; }
.pr140{ padding-right:140px; }
.pr145{ padding-right:145px; }
.pr150{ padding-right:150px; }