/* ------------------------------- 
br
---------------------------------*/
.pc-only{
display:unset;
}
.tb-only{
display:none;
}
.sp-only{
display:none;
}

/* SP */
@media(max-width:1000px){
.tb-only{
display:unset;
}
}

@media(max-width:600px){
.pc-only{
display:none;
}
.sp-only{
display:unset;
}
}

.under-line{
text-decoration:underline;
}

/* ------------------------------- 
トグル
---------------------------------*/
.toggle dd,
.toggle-checkbox dd{
display:none;
}


/* ----------------------------------
エラーページ
----------------------------------- */
.error{
padding:20rem 0 12rem 0;
}

.error-text{
text-align:center;
padding:0 0 6rem 0;
}


/* ------------------------------- 
ボタン
---------------------------------*/
.submit,
.button{
padding-top:3rem;
}

/* -------------------------------
ボタン
---------------------------------*/
.button-black a,
.button-black button,
.button-red a,
.button-red button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
padding:2.6rem;
border:0;
border-radius:.4rem;
max-width:var(--width-max2);
margin:0 auto;
color:#fff;
text-decoration:none;
font-family:"mincho", serif;
font-weight:500;
font-size:2rem;
letter-spacing:.08em;
cursor:pointer;
transition:.3s ease;
}

/* -------------------------------
ボタンカラー
---------------------------------*/
.button-black a,
.button-black button{
background:var(--color-gray1);
}
.button-black a:hover,
.button-black button:hover{
background:var(--color-gray2);
}

.button-red a,
.button-red button{
background:var(--color-red1);
}
.button-red a:hover,
.button-red button:hover{
background:var(--color-red2);
}


/* -------------------------------
白ボタン
---------------------------------*/
.button-white a,
.button-white button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
padding:1rem;
border:0;
border-radius:.3rem;
background:#FFF;
color:var(--color-link1);
border:1px var(--color-line2) solid;
text-decoration:none;
font-family:"mincho", serif;
font-weight:500;
font-size:1.6rem;
letter-spacing:.08em;
cursor:pointer;
transition:.3s ease;
}

.button-white a:hover,
.button-white button:hover{
background:var(--color-gray6);
}

/* --------------------------------
ヘルプボタン
-------------------------------- */
.button-help{
display:flex;
justify-content:flex-end;
margin-top:1rem;
}

.button-help a,
.button-help button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:3.2rem;
padding:1rem 2rem;
border-radius:999px;
background:var(--color-gray4);
color:#FFF;
font-size:1.4rem;
line-height:1;
text-decoration:none;
transition:
background .3s ease;
}

.button-help a:hover,
.button-help button:hover{
background:var(--color-gray5);
}


/* ----------------------------------
セクション　ヘッダー
---------------------------------- */
.section-container {
padding:0 2rem;
max-width:var(--width-max1);
margin:0 auto;
}

.section-heading {
text-align: center;
padding:0 0 8rem 0;
}

.section-heading__label {
margin:0 0 3rem 0;
color:var(--color-gray3);
font-family:"notera", serif;
font-style: normal;
font-size:2.6rem;
/*
font-size:1.8rem;
text-transform:uppercase;
letter-spacing:.26em;
*/
}

.section-heading__label::before,
.section-heading__label::after{
content:"";
display:inline-block;
width:5rem;
height:1px;
margin:0 1.6rem .3rem 1.6rem;
background:linear-gradient(90deg, transparent, var(--color-gray4), transparent);
}

.section-heading__title {
margin: 0;
font-family:"mincho", serif;
font-size:3.9rem;
font-weight: 500;
line-height:1;
letter-spacing: 0.16rem;
white-space:nowrap;
}

.section-heading__title i{
font-style:normal;
letter-spacing:0;
}

.section-heading__title small{
font-size: 2.7rem;
letter-spacing: 0.3rem;
}

.section-heading__title strong{
display:block;
font-weight:400;
}

.section-heading__title::after{
content: "";
display: block;
width:5rem;
height: 1px;
margin:3.6rem auto 0;
background:linear-gradient(90deg, transparent, var(--color-gray4), transparent);
}

.section-heading__lead {
margin:3.6rem 0 0 0;
color: var(--color-gray3);
font-family:"mincho", serif;
font-size: 1.7rem;
line-height: 2;
letter-spacing: 0.08rem;
}

.section-heading__left .section-heading__title,
.section-heading__left .section-heading__lead,
.section-heading__left .section-heading__text {
text-align: left;
padding-right:2rem;
}


/* SP */
@media (max-width: 500px) {
.section-heading{
padding:0 0 6rem 0;
}

.section-heading__label{
margin:0 0 3.2rem 0;
font-size:1.3rem;
letter-spacing:.16rem;
}

.section-heading__title{
font-size:2.3rem;
line-height:1.35;
letter-spacing: 0.16rem;
}

.section-heading__title i{
letter-spacing:-.2rem;
}

.section-heading__title small{
display:block;
margin-bottom:2rem;
font-size:1.35rem;
}

.section-heading__lead{
margin-top:3rem;
font-size:1.6rem;
line-height:1.9;
letter-spacing:.1rem;
}

.detail-tabs__content:not(:first-child) .section-heading{
display:none;
}

.detail-tabs__content:not(:first-child) > section{
padding:3rem 0;
}

}


/* ------------------------------- 
テーブル（枠なし・カートで使用）
---------------------------------*/
.table-list{
padding:0;
}
.table-list table{
width:100%;
}
.table-list tr{
border-top:1px solid var(--color-line2);
}
.table-list tr:first-child{
border:0;
}

.table-list th{
font-size:1.5rem;
font-weight:normal;
text-align:left;
padding:1rem 0 1rem 0;
line-height:1.4;
white-space:nowrap;
vertical-align:top;
}
.table-list td{
font-size:1.5rem;
padding:1rem 0 1rem 1rem;
line-height:1.2;
}


/* SP */
@media(max-width:600px){
.table-list th,
.table-list td{
display:block;
}
.table-list th{
padding:1rem 0 .5rem 0;
}
.table-list td{
padding:.5rem 0 2rem 0;
}

}


/* ------------------------------- 
アニメーション
---------------------------------*/
.zoomOutTrigger{
opacity:0;
}

.zoomOut{
animation: zoomOutAnime .8s cubic-bezier(.22,1,.36,1) forwards;
opacity:0;
}

@keyframes zoomOutAnime{
from {
transform: scale(3);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}


/* -------------------------------- */
.fadeUpTrigger{
animation-delay:0s;
opacity:0;
}

.fadeUp{
animation: fadeUpAnime 1.8s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* -------------------------------- */
.fadeLeftTrigger{
animation-delay:0s;
opacity:0;
}

.fadeLeft{
animation: fadeLeftAnime 1.8s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes fadeLeftAnime{
from {
opacity: 0;
transform: translateX(-5rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}


/* -------------------------------- */
.fadeRightTrigger{
opacity:0;
}

.fadeRight{
animation: fadeRightAnime 1.8s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes fadeRightAnime{
from {
opacity: 0;
transform: translateX(5rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}


/* -------------------------------- */
.flipDownTrigger{
opacity:0;
}

.flipDown{
animation: flipDownAnime 1s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes flipDownAnime{
from {
transform: perspective(2500px) rotateX(100deg);
opacity: 0;
}

to {
transform: perspective(2500px) rotateX(0);
opacity: 1;
}
}


/* -------------------------------- */
.eachTextAnime span{
display:inline-block;
opacity: 0;
}
.eachTextAnime.appeartext span{
animation:text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
from {
opacity:0;
}
to {
opacity:1;
}
}