:root{

    --color-business: #005e2d;
    --color-private: #cb8000;
    --color-benefits-title: #e3b600;

    --color-pickup-seat-title-text: #8b9780;
    --color-voice-pickup-bg:#12311b;
    --flex-responsive: flex;
    --grid-responsive: grid;
    --padding-inner-lr: 100px;
    --padding-box30: 30px;
    --padding-description-inner: 110px;
    --padding-points-inner: 25px;

    --owners-benefit-title-orval-height: 6.67vw;

    --color-transition-link-green:  linear-gradient(90deg, rgba(0, 57, 18, 1) 54.48%, rgba(0, 64, 23, 1) 63.57%, rgba(0, 82, 37, 1) 76.52%, rgba(0, 94, 45, 1) 82.78%);

}

@media screen and (max-width: 1024px) {
    :root{
        --padding-inner-lr: 50px;
        --padding-description-inner: 0;
        --padding-points-inner: 20px;
    }
}

@media screen and (max-width: 639px) {
    :root{
        --flex-responsive: block;
        --grid-responsive: block;
        --padding-inner-lr: 0;
        --padding-box30: 15px;
    }
}

p{
    font-feature-settings: "palt";
}

.narrow {
    letter-spacing: -1px;
}

.howto #main-contents {
    padding-bottom: 0;
}

/*--------------------------------------
  コンテンツ部共通
*/
.contents-wrap h3 {
    color: var(--color-business);
    text-align: left;
    font-size: 30px;
    letter-spacing: 10px;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.contents-wrap .contents-row {
    margin-top: 45px;
    width: 100%;
    max-width: 840px;
}

.contents-wrap .users-voice {
    display: grid;
    grid-template-columns: 25% auto 32%;
    padding: 35px 30px;
    column-gap: 45px;
    align-items: center;
    border: 1px solid var(--color-business);
    border-radius: 30px;
}

.contents-wrap .users-voice .voice-title img {
    display: block;
    margin: 0 auto;
}

.contents-wrap .users-voice .voice-title .symbol {
    width: 50px;
    height: auto;
}

.contents-wrap .users-voice .voice-title .title {
    width: 160px;
    height: auto;
    margin-top: 18px;
}

.contents-wrap .users-voice .voice-text {
    letter-spacing: 2px;
    line-height: 1.8;
}

.contents-wrap .useful {
    border-radius: 30px;
    display: grid;
    grid-template-columns: 180px auto;
    column-gap: 30px;
    padding: 30px 40px 25px;
    position: relative;
}

.contents-wrap .useful h3 {
    font-size: 22px;
    letter-spacing: 0;
    line-height: 1.8;
}
.contents-wrap .useful img {
    display: block;
    margin: 0 auto;
}
.contents-wrap .useful .title {
    width: 130px;
}

.contents-wrap .useful .useful-contents ul {
    list-style: none;
    margin-top: 15px;
}

.contents-wrap .useful .useful-contents ul li {
    text-indent: -1em;
    padding-left: 1em;
    font-family: var(--font-family-gothic);
    line-height: 1.4;
    font-size: 14px;
    margin-bottom: 5px;
}

.contents-wrap .useful .useful-contents ul li:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--color-business);
}

.contents-wrap .useful .useful-contents .note {
    font-family: var(--font-family-gothic);
    margin-top: 15px;
    color: var(--color-business);
}

.contents-wrap .useful .useful-points {
    margin-top: 25px;
}

.contents-wrap .useful .note {
    position: relative;
}

.contents-wrap .useful .note p {
    font-size: 14px;
    display: inline-block;
}

.contents-wrap .useful .note p:after {
    content: '';
    display: inline-block;
    width: 35px;
    height: 14px;
    background: url(../img/how_to/useful-note-arrow.svg) no-repeat bottom / contain;
    margin-bottom: 3px;
}

.contents-wrap .useful .useful-contents .note a {
    color: var(--color-business);
    font-weight: bold;
}

.contents-wrap .useful .useful-contents .business-note {
    font-size: 11px;
    margin-top: 5px;
}
.contents-wrap .useful .e-ticket {
    width: 140px;
    height: auto;
    position: absolute;
    right: 30px;
    bottom: 20px;
}

@media (max-width: 999px) {
    .contents-wrap h3 {
        font-size: 22px;
        letter-spacing: 2px;
    }
    .contents-wrap .contents-row {
        width: 95%;
        column-gap: 20px;
    }
    .contents-wrap .users-voice .voice-text br.pc {
        display: none;
    }
    .contents-wrap .useful .useful-contents .note p br.sp {
        display: block !important;
    }
}

@media (min-width: 900px) and (max-width: 999px) {
    .contents-wrap .useful .e-ticket {
            right: 15vw;
    }
}

@media (min-width: 640px) and (max-width: 999px) {
    .contents-wrap .users-voice {
        grid-template-columns: 25% auto;
    }
    .contents-wrap .users-voice .voice-title {
        grid-row: span 2;
    }
    .contents-wrap .users-voice .voice-link {
        text-align: center;
    }
    .contents-wrap .users-voice .anchor-transition {
        width: 60%;
    }
    .contents-wrap .contents-row.useful {
        padding-bottom: 60px;
    }
    .contents-wrap .useful .e-ticket {
        width: 100px;
    }
    .contents-wrap .useful .useful-contents .business-note br.sp {
        display: block !important;
    }
    
}

@media (max-width: 639px) {
    .contents-wrap h3 {
        font-size: 21px;
    }
    .contents-wrap .users-voice {
        grid-template-columns: 1fr;
        row-gap: 20px;
        padding: 25px 15px;
    }
    .contents-wrap .users-voice .voice-title {
        display: flex;
        align-items: center;
    }
    .contents-wrap .users-voice .voice-text {
        letter-spacing: 0;
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
    }
    .contents-wrap .users-voice .voice-link {
        text-align: center;
    }
    .contents-wrap .users-voice .anchor-transition {
        margin-top: 0;
    }
    .contents-wrap .useful {
        grid-template-columns: 1fr;
        padding: 30px 15px 25px;
        row-gap: 20px;

    }
    .contents-wrap .useful .title {
        width: 65%;
    }

    .contents-wrap .useful .note p {
        font-size: 12px;
    }
    .contents-wrap .useful h3 {
        padding: 0;
        font-size: 18px;
        text-align: center;
        line-height: 1.4;
    }
    .contents-wrap .useful .useful-points.sp {
        width: 80%;
    }
    .contents-wrap .useful .useful-contents ul li {
        font-size: 12px;
    }
    .contents-wrap .useful .e-ticket {
        width: 65px;
        right: 10px;
        bottom: 20px;
    }
    .contents-wrap .useful .note p:after {
        width: 25px;
        height: 10px;
    }

    
}

/*--------------------------------------
  メインビジュアル
*/

#main-visual {
    background-image: url(../img/how_to/howto-main-visual.jpg);
}

@media (max-width: 639px) {
    #main-visual {
        background-image: url(../img/how_to/howto-main-visual-sp.jpg);
    }

}



/*--------------------------------------
  コンテンツ
*/

.satisfy-title {
    font-family: var(--font-family-mincho);
    font-weight: 400;
    font-size: 27px;
    background-color: #900811;
    color: #FFF;
    line-height: 1;
    padding: 10px 0;
    margin: 0 auto 25px;
    text-align: center;
}

.satisfy .graph {
    gap: 0;
}

.satisfy .graph img {
    width: 100%;
    height: auto;
}



@media screen and (min-width: 640px) {
    .satisfy .graph > div:first-child {
        padding-right: 30px;
    }
    
    .satisfy .graph > div:last-child {
        padding-left: 30px;
        border-left: 1px solid #ccc;
    }
}

@media screen and (max-width: 639px) {
    .satisfy .graph > div:last-child {
        margin-top: 30px;
    }
}


.category-main-wrap .contents-detail {
    display: grid;
    grid-template-columns: 55% auto;
    column-gap: 40px;
}

.category-main-wrap .contents-detail h3 {
    color: var(--color-font-base);
    font-size: 25px;
    letter-spacing: 8px;
}

.category-main-wrap .contents-detail .detail-text p {
    line-height: 2;
}

@media (max-width: 999px) {
    .category-main-wrap .contents-detail h3 {
        font-size: 22px;
        letter-spacing: 2px;
    }
    .category-main-wrap .contents-detail {
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
    }
    .category-main-wrap .contents-detail .detail-text p {
        font-size: 16px;
        line-height: 1.5;
    }
}


@media (max-width: 639px) {
    .contents-wrap .contents-row:has(> .satisfy-title) {
        margin-top: 30px;
    }
    .contents-wrap .contents-row {
        width: 95%;
    }
    .contents-wrap .contents-row > .two-column {
        row-gap: 5px;   
    }
    .category-main-wrap .contents-row {
        margin-top: 20px;
    }
    .category-main-wrap .contents-detail {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .category-main-wrap .contents-detail h3 {
        font-size: 20px;
        letter-spacing: 1px;
        padding-left: 0;
    }

    .satisfy-title {
        font-size: 16px;
        padding: 10px 0;
        line-height: 1.5;
        margin-bottom: 15px;
    }
}




/* Business */
#business .useful {
    background: #ebf3d8;
}













/*
#staff .heading-h2-wrap,
#business .heading-h2-wrap {
    background: url(../img/how_to/title-bg_grn.jpg) repeat-x center;
}
    */
/*
section:is(#business, #staff) h2.heading::before {
    content: '';
    background: url(../img/how_to/title-bg_grn.jpg) repeat-x center;
}
    */
#private .heading-h2-wrap {
    background: url(../img/how_to/title-bg_rd.jpg) repeat-x center;
}

#howto-header .contents .content-header-lead {
    letter-spacing: 1px;
}

#main-contents #staff,
#main-contents #private {
    margin-top: 100px
}


@media screen and (max-width: 999px) {
    #howto-header.content-header > div {
        background-size: contain;
        background-position: center right -25vw;
    }
}


@media screen and (min-width: 640px) {
    #main-top #main-contents:after {
        display: none;
    }
    .howto #main-contents {
        padding-bottom: 0;
    }
    
    #howto-header.content-header > div {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 639px) {
    #main-contents #staff,
    #main-contents #private {
        margin-top: 30px
    }

    #main-top #main-contents .bottom-right-corner:after {
        display: none;
    }

    #main-contents #howto-header {
        grid-template-columns: 1fr;
        padding-bottom: 20px;
    }

    #howto-header h1>img {
        width: 100%;
        height: auto;
    }
    
    #howto-header h2 {
        margin-top: 40px;
        text-align: center;
        padding: 0;
        letter-spacing: -1px;
    }

    #howto-header.content-header {
        padding-left: 5%;
    }

    #howto-header.content-header > div {
        margin-top: 0;
        background: none;
        padding-right: 5%;
    }

    #howto-header.content-header > div:after {
        display: none;
    }

    #howto-header .content-header-lead {
        margin-top: 30px;
        text-align: center;
        font-size: 16px;
    }

    #howto-header .content-header-lead span {
        display: inline;
    }

    #main-contents #howto-header-wrapper .main-mv-sp {
        margin-bottom: 70px;
    }

    

}

/*--------------------------------------
  活用方法
--------------------------------------*/
.description p {
    letter-spacing: 0.11em;
    line-height: 2;
    font-size: 17px;
}

section>div:not(.category-main) {
    /*
    padding-left: var(--padding-inner-lr);
    padding-right: var(--padding-inner-lr);
    */
    margin-top: 60px;
}

/* カテゴリごとのメイン部分 */

.category-main-wrap img {
    width: 100%;
}


.category-main-wrap .lead-wrap img {
    height: auto;
}

.category-main-wrap .description {
    display: var(--flex-responsive);
    justify-content: space-between;
    align-items: flex-start;
    padding-right: var(--padding-inner-lr);
}

.category-main-wrap .description img {
    height: auto;
}


.category-main-wrap>img:last-child {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 1200px) {
    .inline {
        display: inline-block;
    }

    #business .points .description {
        width: 90%;
    }

}



@media screen and (min-width: 640px) and (max-width: 1240px) {
    .description p {
        letter-spacing: 1px;
    }
}

@media screen and (min-width: 820px) {
    .category-main .sp-tbmini {
        display: none;;
    }
}

@media screen and (max-width: 819px) {
    .category-main .pc-only {
        display: none;
    }
}

@media screen and (min-width: 640px) {
    .category-main-wrap{
        grid-template-columns: repeat(20, 1fr);
        column-gap: 30px;
        row-gap: 50px;
    }
    .category-main-wrap .lead-wrap {
        grid-column: 1 / span 3;
    }
    .category-main-wrap .spectators {
        grid-column: 4 / span 17;
    }
    .category-main-wrap .lead-wrap img {
        width: 122px;
    }
    .category-main-wrap .description-text {
        grid-column: 1 / span 10;
        letter-spacing: 0.11em;
        line-height: 2;
        font-size: 17px;
    }

}

@media screen and (max-width: 639px){
    .heading-h2-wrap {
        margin-bottom: 30px;
    }
    .category-main-wrap{
        grid-template-columns: 23% 1fr;
        gap: 13px;
    }

    .category-main-wrap .lead-wrap {
        order: 1;
        margin-bottom: 0;
    }

    .category-main-wrap .spectators {
        order: 4;
        grid-column: 1 / span 2;
    }

    .category-main-wrap .description-text {
        order: 2;
        padding-top: 1em;
    }

    .category-main-wrap .related-diagram {
        order: 3;
        grid-column: 1 / span 2;
        margin-top: 20px;
    }
}

@media screen and (min-width: 640px) and (max-width: 860px) {

    section>div:not(.category-main) {
        padding-left: 0;
        padding-right: 0;
    }
}



/* 満足度 */
.satisfaction .two-column {
    grid-template-columns: 55% auto;
}

.satisfaction .satisfaction-text {
    font-size: 18px;
    letter-spacing: 4px;
    line-height: 2;
    margin-top: 10px;
}

@media screen and (max-width: 1024px) {
    .satisfaction .satisfaction-text {
        letter-spacing: 1px;
        font-size: 17px;
    }
}

@media screen and (max-width: 639px) {
    
    .satisfaction .two-column {
        grid-template-columns: 1fr;
    }
    .satisfaction .contents img.sp{
        max-width: 50%;
        margin: 0 auto;
        display: block;
    }
    #private .satisfaction {
        margin-top: 20px;
    }
}

/* 写真と活用方法ポイント */
.points {
    margin-top: 60px;
}
.points div:nth-of-type(2){
    margin-top: 35px;
}
.points>div>img {
    width: 100%;
    height: auto;
}

.points div:first-of-type .description> :is(h3, p) {
    padding-left: var(--padding-points-inner);
}

.points div:nth-of-type(2) .description> :is(h3, p) {
    padding-left: var(--padding-description-inner);
}
.points .two-column{
    overflow: hidden;
}

.points .two-column:first-child {
    grid-template-columns: 55% auto;
}

.points .two-column:last-child {
    grid-template-columns: auto 55%;
}

.points .description>h3 {
    font-family: var(--font-family-mincho);
    font-weight: 400;
    font-size: 32px;
    margin-right: auto;
    margin-bottom: 25px;
    text-align: left;
    margin-top: 20px;
    position: relative;
    padding-bottom: 25px;
}

.points .description>h3::after {
    width: calc(100% + 120px);
    content: "";
    height: 1px;
    display: block;
    border-top: #a4b096 solid 1px;
    margin-top: 25px;
    position: absolute;
    z-index: -1;
    bottom: 0;
}

.points>div:first-of-type .description>h3::after {
    margin-left: -75px;
}

.points>div:nth-of-type(2) .description>h3::after {
    margin-left: -75px;
}


@media screen and (min-width: 640px) and (max-width: 1150px){
    #business .box-1 .benefit-contents img.pc {
        width: auto !important;
        height: calc(100vw/1.7) !important;
    }
}



@media screen and (min-width: 640px) and (max-width: 859px){
    .satisfy-title {
        font-size: 22px;
        padding: 20px;
    }
    .points .two-column:first-child {
        grid-template-columns: 53% auto;
        gap: 20px;
    }
    .points .two-column:last-child {
        grid-template-columns: auto 53%;
        gap: 20px;
    }

}

@media screen and (max-width: 639px){

    #main-contents .points {
        margin-top: 60px;
    }

    .contents-wrap .points .two-column {
        grid-template-columns: 1fr;
    }

    .points .description>h3 {
        font-size: 28px;
        text-align: center;
        margin-top: 0;
    }

    .points div:first-of-type>img {
        order: 2;
    }
    .points div:first-of-type>div {
        order: 1;
    }

    .points div:first-of-type .description> :is(h3, p),
    .points div:nth-of-type(2) .description> :is(h3, p) {
        padding-left: 0;
    }

    .points>div:first-of-type>img,
    .points>div:nth-of-type(2)>img {
        border-radius: 0;
    }

    .benefit-box p.benefit-sublead {
        text-align: center;
        font-size: 18px;
    }

}


/* Pickup Seat */

.pickup-seat {
    margin-top: 60px;
    padding: 0;
    position: relative
}
.pickup-seat h3 {
    display: flex;
    gap: 18px;
    align-items: center;
}

.pickup-seat h3 img {
    width: 270px;
}

.pickup-seat .seat-detail {
    font-family: var(--font-family-gothic);
    font-size: 12px;
}

.pickup-seat img{
    display: block;
}

.pickup-seat .pickup-text {
    font-size: 20px;
    color: #8b9780;
    letter-spacing: 3px;
}

@media (max-width: 768) {
    .pickup-seat p {
        font-size: 15px;
    }
}

@media (max-width: 639px) {
    .contents-wrap .category-main-wrap .pickup-seat {
        margin-top: 30px;
    }
    .pickup-seat h3 {
        flex-direction: column;
        row-gap: 3px;
    }

    .pickup-seat h3 img {
        height: 36px;
        width: auto;
    }

}



/* owners benefits */
.owners-benefits-wrap {
    background : linear-gradient(90deg, rgba(185, 148, 152, 1) 0%, rgba(209, 183, 185, 1) 50.25%, rgba(185, 148, 152, 1) 100%);
    position: relative;
    margin-top: 90px;
    padding-top: 60px;
    padding-bottom: 40px;
}


.owners-benefits-wrap h3.heading{
    text-align: center;
}

.owners-benefits-wrap h3.heading img {
    max-width: 100%;
}
.contents .main-text {
    line-height: 2.2;
}

.owners-benefits p.benefits-lead{
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}

.owners-benefits p.benefits-lead span{
    display: inline-block;
}

.owners-benefits-wrap .contents-wrap {
    margin-top: 15px;
}

.owners-benefits-wrap .contents-wrap .owners-benefits {
    margin: 0 auto;
}

.owners-benefits .right-column{
    margin-top: 15px;
    display: flex;
    gap: 15px;
    justify-content: space-between;
}
.benefit-box{
    padding: 25px;
    border:3px solid var(--color-contents-dark-red);
}

.benefit-box .box-2 .benefit-caption {
    font-size: 12px;
}
.benefit-box p.benefit-sublead{
    background: var(--color-contents-dark-red);
    color: var(--color-benefits-title);
    font-family: var(--font-family-mincho);
    display: inline-block;
    font-weight: bold;
    font-size: 17px;
    padding: 8px 20px;
    letter-spacing: 3px;
}

.benefit-box .benefit-lead{
    font-family: var(--font-family-mincho);
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}

.benefit-box .benefit-contents{
    font-size: 14px;
    font-family: var(--font-family-gothic);
}

.benefit-box .benefit-contents .benefit-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.benefit-box .benefit-contents ul.benefit-list{
    margin-bottom: 15px;
    z-index: 1;
    position: relative;
}
.benefit-box .benefit-contents ul.benefit-list li{
    list-style: none;
    margin-bottom: 3px;
}
.benefit-box .benefit-contents ul.benefit-list li::before{
    content: "●";
    color: var(--color-contents-dark-red);
    margin-right: 0.2em;
}
.benefit-box .benefit-contents .benefit-annotation{
    font-size: 11px;
}

.benefit-box .benefit-contents .benefit-annotation ul {
    list-style: none;
}
.benefit-box .benefit-contents .benefit-annotation ul li {
    text-indent: -1em;
  padding-left: 1em;
}
.benefit-box .benefit-contents .benefit-annotation ul li:before {
    content: '※';
}


.benefit-box .benefit-contents img{
    max-width:100%;
    height: auto;
}

.benefit-box .benefit-contents img.souvenir-image{
    margin-top: 15px;
}

a.benefit_btn{
    display: block;
    width: max-content;
    box-sizing: border-box;
    color: #FFF;
    font-family: var(--font-family-mincho);
    font-size: 30px;
    font-weight: 400;
    padding: 15px var(--padding-inner-lr);
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    background: var(--color-contents-dark-red);
    margin-top: 35px;
}

.benefit_btn:hover {
    opacity: .8;
}


section .benefit-box {
    position: relative;
    width: 100%;
    background: #fff;
}

section a.benefit-box {
    text-decoration: none;
    color: #000;
    display: block;
}

.business-note {
    font-size: 13px;
    margin-top: 20px;
    font-family: var(--font-family-mincho);
    text-indent: -1em;
    padding-left: 1em;
}

.owners-benefits .box-1 {
    margin-top: 40px;
}

.benefit-lead .emphasis {
    color: var(--color-contents-dark-red);
}

@media screen and (min-width:639px) and (max-width:820px) {
    .benefit-box .benefit-contents img.souvenir-image {
        width: 70%;
    }
}

.benefit-box .benefit-annotation {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: -.5px;
}

@media screen and (max-width: 999px){
    .contents .main-text br.pc {
        display: none;
    }
}

@media screen and (max-width:639px){
    .category-main-wrap img.category-main {
        aspect-ratio: 296 / 242;
        object-fit: cover;
    }
    .contents .main-text {
        font-size: 16px;
        line-height: 1.5;
    }

    .owners-benefits-wrap {
        margin-top: 60px;
    }

    .owners-benefits-wrap .contents-wrap {
        max-width: 90%;
    }

    .owners-benefits h3.heading {
        font-size: 32px;
    }

    .owners-benefits-wrap h3.heading img {
        width: 80%;
        margin: 0 auto;
    }

    .benefit-box p.benefit-sublead {
        margin-left: 0;
        letter-spacing: -1px;;
    }

    
    a.benefit_btn {
        font-size: 18px;
        padding: 10px 20px;
    }

    section .benefit-box {
        padding: 35px 23px;
        border: 3px solid var(--color-contents-dark-red);
    }

    .benefit-box .benefit-contents ul {
        text-align: left;
    }
    .business-note {
        font-size: 11px;
    }

    .pickup-seat .pickup-text {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .pickup-seat h4 {
        padding-left: 0;
    }

}

/******************************
* for Business
*/
#business .box-1 .benefit-contents {
    width: 650px;
    max-width: 100%;;
    display: grid;
    grid-template-columns: 300px auto;
    gap: 15px;
}

#business .box-1 img.float.pc{
    width: 34%;
    height: auto;
    position: absolute;
    bottom: 50px;
    right: 0;
}

#business .box-1 .present-scene {
    grid-row: span 2;
}

.benefit-box .benefit-lead .standard {
    font-size: .75em;
    letter-spacing: -.5px;
}



@media (min-width: 640px) {
    #business .business-note {
        grid-row: 2;
        grid-column: span 2;
    }
}

@media (max-width:820px) {
    #business .owners-benefits .right-column {
        flex-wrap: wrap;
    }
    #business .box-1 .benefit-contents {
        grid-template-columns: 1fr;
        width: 100%;
    }
    .benefit-box p.benefit-sublead {
        width: 100%;
        text-align: center;
    }
    #business .box-1 .present-scene {
        width: 100%;
    }
    #business .box-1 img.float.pc {
        display: none !important;
    }
    #business .box-1 img.float.sp {
        display: block !important;
        order: 1;
    }
    #business .box-1 .present-scene {
        order: 2;
        width: 400px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #business .box-1 .benefit-annotation br.pc {
        display: none;
    }
    #business .benefit-box .benefit-contents .benefit-annotation {
        order: 3;
    }
    #business .box-1 .benefit-list {
        margin-bottom: 0;
    }
    #business .business-note {
        margin-top: 10px;
    }
}

@media (min-width:640px) and (max-width:820px) {
    .benefit-box .benefit-contents .benefit-detail {
        font-size: 16px;
    }
}

@media (max-width: 639px) {
    #business .box-1 .benefit-contents {
        row-gap: 10px;
    }
    #business .benefit-box .benefit-contents .benefit-annotation {
        margin-top: 0;
    }
}



/***************/
#business .box-2 .benefit-sublead {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: 1px;
    text-align: center;;
}

#business .box-2 .benefit-lead {
    letter-spacing: 0;
}

#business .box-2 .benefit-contents {
    gap: 5px;
    grid-template-columns: 52% auto;
}

#business .box-2 .benefit-more {
    text-align: center;
}

#business .box-2 .anchor-transition {
    width: 55%;
    margin-top: 0;
}

#business .box-2 .anchor-transition:before {
     background : linear-gradient(90deg, rgba(35, 0, 0, 1) 0%, rgba(182, 30, 45, 1) 100%);
}

@media (min-width:821px) {
    #business .box-2 {
        padding-right: 5px;
    }
}

@media (max-width:820px) {
    #business .box-2 .benefit-lead br.pc{
        display: none !important
    }
    #business .box-2 .benefit-contents {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    #business .box-2 .benefit-contents img {
        display: block;
        margin: 0 auto;
    }
    #business .box-2 .benefit-contents img.pc {
        display: none;
    }

    #business .box-2 .benefit-contents img.sp {
        display: block !important;
    }

    #business .box-2 .benefit-contents img.sp2 {
        position: relative;
        top: -20px;
    }
    #business .box-2 .benefit-more {
        margin-top: 20px;
    }
}

@media (min-width:640px) and (max-width:820px) {
    #business .box-2 .benefit-contents img.sp {
        width: 60%;
    }
}

/***************/
#business .box-3{
    flex-grow: 1;
}
#business .box-3 .benefit-contents{
    display: flex;
    gap: 25px;
    margin-top: 15px;
}

#business .benefit-contents-small {
    font-size: 12px;
}

@media screen and (max-width:639px) {
    #business .owners-benefits .two-column .right-column .box-2 {
        padding-bottom: 70px;
    }
}


/******************************
* for Staff
*/
#staff .useful {
    background: #ebf3d8;
}

#staff .benefit-box {
    display: grid;
    grid-template-columns: auto 29% 29%;
    gap: 19px;
}

#staff .benefit-sublead {
    width: 100%;
    text-align: center;
}

#staff .benefit-box .benefit-contents {
    position: relative;
}
#staff .benefit-box .ticket-sample {
    position: absolute;
    width: 182px;
    bottom: -15px;
    right: -35px;
}

#staff .box-2 {
    margin-top: 20px;
}

#staff .box-2 .benefit-contents-small {
    font-size: 12px;
    letter-spacing: -.5px;
}

@media (min-width: 640px) {
    #staff .business-note {
        grid-row: 2;
        grid-column: span 2;
    }
}

@media (max-width: 950px) {
    #staff .benefit-box.box-2 .benefit-contents-small br {
        display: none;
    }
    
}
@media (min-width: 769px) and (max-width: 950px) {
    #staff .benefit-box .ticket-sample {
        position: static;
        display: block;
        margin: 10px auto 0;

    }

}
@media (max-width: 768px) {
   
    #staff .benefit-box .benefit-lead br {
        display: none;
    }
    #staff .benefit-box .benefit-detail br {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
     #staff .benefit-box {
        grid-template-columns: 1fr 1fr;
    }
    #staff .benefit-box > div:first-child {
        grid-column: span 2;
    }
    #staff .benefit-box.box-2 .benefit-contents-small {
        padding-right: 220px;
    }
    #staff .benefit-box .ticket-sample {
        right: 0;
    }
    
}

@media (max-width: 639px) {
    
    #staff .benefit-box {
        grid-template-columns: 1fr;
    }
    #staff .benefit-box .ticket-sample {
        position: static;
        display: block;
        margin: 15px auto;
        width: 70%;
    }
    #staff .business-note {
        margin-top: 10px;
    }
    #staff .box-2 .benefit-contents-small .line {
        display: inline !important;
    }
}





/******************************
* for Private
*/


#private .contents-wrap h3 {
    color: var(--color-private);
}


#private .category-main-wrap .contents-detail h3 {
    color: var(--color-font-base);
    letter-spacing: 5px;
}

#private .category-main-wrap > .contents-row > .two-column:has(.related-diagram) {
    grid-template-columns: 38% auto;
}

#private .related-diagram img{
    width: 100%;;
}

#private .satisfy .graph > div:last-child {
    border-left: none;
}

#private .satisfy .graph > div {
    padding-left: 0;
    padding-right: 0;
}

#private .extended-bg {
    position: relative;
    background: transparent;
    height: 320px;
}

#private .extended-bg:before {
    content: '';
    display: block;
    width: 620px;
    aspect-ratio: 2000 / 1240;
    position: absolute;
    left: -130px;
    bottom: -60px;
    background: url(../img/how_to/private_graph1.jpg) no-repeat center / contain;
    z-index: -1;
}

#private .anchor-transition:before {
    background: linear-gradient(90deg, rgba(203, 128, 0, 1) 54.48%, rgba(203, 130, 7, 1) 60.07%, rgba(204, 136, 25, 1) 68.04%, rgba(204, 146, 56, 1) 77.4%, rgba(205, 153, 77, 1) 82.78%);
}
#private .useful {
    background: #ede4c7;
}
#private .useful .useful-contents ul li:before {
    background: var(--color-private);
}

#private .useful .useful-contents .note {
    color: var(--color-private);
    margin-top: 35px;
}

#private .contents-wrap .useful .note p:after {
background: url(../img/how_to/useful-note-arrow-private.svg) no-repeat bottom / contain;
}

#private .pickup-seat .pickup-text {
    color: #8c784d;
}


#private .owners-benefits .benefit-sublead {
    width: 100%;
    text-align: center;
}

#private .owners-benefits .benefit-detail {
    letter-spacing: -.5px;
}

#private .benefit-box {
    display: grid;
    grid-template-columns: 310px auto;
    gap: 20px;
}

#private .benefit-box.box-2 {
    margin-top: 20px;
}

#private .benefit-box.box-2 {
    margin-top: 20px;
    column-gap: 0;
    row-gap: 20px;
}

#private .contents-wrap .useful .useful-contents .note a {
    color: var(--color-private);
}

@media (max-width: 900px) {
    #private .satisfy p br.pc {
        display: none;
    }
}

@media (max-width: 639px) {
    #private .extended-bg:before {
        content: none;
    }
    #private .benefit-box {
        grid-template-columns: 1fr;
    }
    #private .category-main-wrap > .contents-row > .two-column:has(.related-diagram) {
        grid-template-columns: 1fr;
    }
    #private .category-main-wrap .contents-detail h3 {
        letter-spacing: -.5px;
        font-size: 19px;
    }
}