.content{
    width: 100%;
    max-width:855px;
    margin: auto;
 
}

.sec1 {
    background-image: url('https://files.bcart.jp/whiterap-test/uploads/contents/aboutus/img/bg-img.jpg');
    background-repeat: no-repeat;
    background-size: auto;
    padding: 20px;
    position: relative;
}

.logo {
    text-align: left;
    max-width: 434px;
    margin-bottom: 20px;
}

.logo img {
    max-width: 434px;
    height: auto;
}

.content_wrap {
    text-align: left;
    max-width: 434px;
}


.content_wrap h1 {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 32px 0;
}

.content_wrap .tit {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 18px 0;
}

.content_wrap p {
    font-size: 16px;
    font-weight: 500;
    line-height: 2.4;
    margin: 10px 0 30px 0;
       color: #1F2937;

}

/* About用 */

.about .concept{
    padding-left: 20px;
}


.about .sec2{
    display: flex;
    align-items: center;
    gap: 20px;
}

.about .sec2 > div:first-child{
    width: 330px;
    flex-shrink: 0;
}

.about .sec2 > div:last-child{
    flex: 2;
}

.about .sec2 .c_name{
   color: #5678B6;
   font-weight: bold;
   font-size: 40px;
   line-height: 0.9;
   margin-bottom: 30px;
}

.about .sec2 .c_name span{
   color: #1F2937;
   font-weight: bold;
   font-size: 20px;
}

.about .sec2 p{
     line-height: 2;
     font-size: 16px;
}

.about .sec3{
    padding-left: 20px;
    margin-bottom: 80px;
}

.about .sec3 h2{
    width: 100%;
    font-size: 24px;
    margin-bottom: 30px;
    color: #1F2937;
}

.about .sec3 .items_wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.about .item_box{
    flex: 1 1 calc(50% - 20px);
    background-color: #F5F5F5;
    border-radius: 10px;
    overflow: hidden;
}

.about .item_box img{
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.about .item_box .i_name{
    font-size: 18px;
    color: #5678B6;
    font-weight: bold;
    padding: 13px 10px 10px 18px;
    margin: 0;
}

.about .item_box p{
    font-size: 14px;
    line-height: 1.6;
    color: #1F2937;
    padding: 0 10px 30px 20px;
    margin: 0;
}

.about .sec4{
    margin-bottom: 40px;
}

.about .sec4 h2{
    font-size: 24px;
    margin-bottom: 20px;
    color: #1F2937;
}

.about .document{
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.about .document .text{
    line-height: 2.2;
}

.about .document > div:first-child{
    flex: 1;
}

.about .document > div:last-child{
    width: 260px;
    flex-shrink: 0;
}

.about .document img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

 .about .document > div:first-child{
        font-size: 16px;
    }

.about .document a{
    font-size: 12px;
    color: #174076;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.about .document a::after{
    content: "";
    width: 16px;
    margin-left: 7px;
    height: 12px;
    background-image: url('./img/blank.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* スマホ用CSS */
@media (max-width: 768px) {
     .content br {
        display: none;
    }
    
    .content {
        padding: 20px 0;
    }
    
    .sec1 {
        padding: 20px 0 20px 20px;
        margin: -20px -20px 0 -20px;
      
    }
    
    .about .sec3 {
        padding-left: 0;
    }

    .logo img{
        width: 70%;
    }
    .about .concept{
        padding-left: 0;
    }
    .content_wrap p{
        margin: 10px 0 0px 0;
    }
    .about .sec2 .c_name {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }
   
    
    .about .sec2 {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .about .sec2 > div:first-child {
        width: 100%;
    }
    
    .about .sec3 .items_wrap {
        flex-direction: column;
    }
    
    .about .item_box {
        flex: 1 1 100%;
    }
    
    .about .document {
        flex-direction: column;
        gap: 20px;
    }

    .about .document a{
        font-size: 15px;
    }
    
    .about .document > div:last-child {
        width: 100%;
    }
}

/* カテゴリー用 */
.cat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 1fr; /* 必要な時だけ行を生成 */
    gap: 24px;
}

.cat a {
    display: block;
    overflow: hidden;
}

.cat img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .cat {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 会員規約用 */
.terms {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.8;
    color: #333;
}

.terms h1 {
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 40px;
    color: #1F2937;
}

.terms h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 40px 0 20px 0;
    color: #1F2937;
    background-color: #f8f9fa;
    padding: 12px 16px;
    border-left: 4px solid #5678B6;
}

.terms p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 24px;
    text-align: justify;
}

.terms ol {
    padding-left: 20px;
    margin-bottom: 30px;
}

.terms li {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 16px;
    text-align: justify;
}

@media (max-width: 768px) {
    .terms {
        padding: 30px 16px;
    }
    
    .terms h1 {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .terms h2 {
        font-size: 18px;
        margin: 30px 0 16px 0;
        padding: 10px 12px;
    }
    
    .terms p,
    .terms li {
        font-size: 15px;
        line-height: 1.9;
    }
    
    .terms ol {
        padding-left: 16px;
    }
}

/* テーブル用スタイル */
.terms table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border: 1px solid #ddd;
}

.terms th {
    background-color: #f8f9fa;
    color: #1F2937;
    font-weight: bold;
    padding: 15px 12px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ddd;
    width: 30%;
    font-size: 16px;
}

.terms td {
    padding: 15px 12px;
    border: 1px solid #ddd;
    vertical-align: top;
    line-height: 1.8;
    font-size: 15px;
    color: #333;
}

.rd-txt{
    color: #C04C32;
}

.law--box{
   border: solid 1px #ddd;
    padding: 17px 20px 0 20px;
    margin: 10px 0;
}



@media (max-width: 768px) {
    .terms table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .terms table th,
    .terms table td {
        display: block;
        width: 100%;
        border: none;
        margin: 0 !important;
    }
    
    .terms table th {
        background-color: #f8f9fa !important;
        color: #1F2937 !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-left: none !important;
        border: none !important;
        border-bottom: 1px solid #ddd !important;
        font-weight: bold !important;
    }
    
    .terms table td {
        padding: 12px 16px !important;
        white-space: normal;
        margin-bottom: 0 !important;
        background-color: #ffffff;
        font-size: 14px;
        border: none !important;
        line-height: 1.8;
    }
    
    .terms table tr {
        display: block;
        margin-bottom: 0;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
    }
    
    .terms table tr:first-child {
        border-top: 1px solid #ddd;
    }
}






/* 会員特典ページ */

.members .benefit .mark {	
position: absolute;	
top: -10px;	
left: 0;
max-width: 90px;
height: auto;
z-index: 1;
}


.content .members .sec1{
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img.jpg);
    background-repeat: no-repeat;
        background-size: contain;
}

.content .members .sec1 .logo{
text-align: center;
margin: auto;
padding-top: 3rem;
    width: 100%;
}

/* メインロゴを15px左に移動 */
.members .logo {
    margin-left: -15px;
}
.content .members .sec1 .logo img{
max-width: 474px;
margin: 0 -0 0 -90px;
}

/* ロゴがコンテンツ枠からはみ出さないように調整 */
.members .logo img {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* conceptのpタグを中央寄せ、line-height 1.5に変更 */
.members .concept p {
    text-align: center;
    line-height: 1.5;
}

/* benefit部分のレイアウトを2行に変更 */
.members .content_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
    text-align: initial;
}

.members .concept {
    width: 100%;
    margin-bottom: 30px;
}

/* 会員特典ページのスタイル */
.members .benefit {
    background-color: #FFF8F2;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
    position: relative;

}

/* 1行目：1-2個目のbenefitは2列表示 */
.members .benefit:nth-child(1),
.members .benefit:nth-child(2) {
    width: calc(50% - 10px);
}

/* 2行目：3-5個目のbenefitは3列表示 */
.members .benefit:nth-child(3),
.members .benefit:nth-child(4),
.members .benefit:nth-child(5) {
    width: calc(33.333% - 14px);
}

.members .benefit .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 51px;
    height: auto;
    z-index: 2;
}

.members .benefit .tit1 {
    font-size: 16px;
    color: #1F2937;
    margin-bottom: 0;
    font-weight: normal;
    z-index: 2;
    position: relative;
    margin-top: 22px;
}

.members .benefit .tit2 {
    font-size: 22px;
    color: #5678B6;
    font-weight: bold;
    margin-bottom: 8px;
    z-index: 2;
    position: relative;
    background: linear-gradient(transparent 60%, #F3E1B9 60%, #F3E1B9 100%, transparent 76%);
    display: inline-block;
    line-height: 1.3;
}

.members .benefit p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    z-index: 2;
    position: relative;
    font-weight: normal;
}

.members .button {
    text-align: center;
    padding: 40px 0;
}

.members .button a {
    display: inline-block;
    background-color: #174076;
    color: white;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
        width: 100%;
    max-width: 300px;
}

.members .button a:hover {
    background-color: #456094;
    transform: translateY(-2px);
}

/* sec2のスタイル */
.members .sec2 {
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
    padding: 0;
}

.members .sec2 .tit {
    font-size: 22px;
    font-weight: bold;
    color: #1F2937;
    margin-bottom: 30px;
    text-align: left;
}

.members .bene--box {
    padding: 0;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 各bene--boxの背景画像設定 */
.members .bene--box:nth-child(2) {
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img2.jpg);
    background-size: cover;
    background-position: center;
}

.members .bene--box:nth-child(3) {
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img3.jpg);
    background-size: cover;
    background-position: center;
}

.members .bene--box:nth-child(4) {
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img4.jpg);
    background-size: cover;
    background-position: center;
}

.members .bene--box:nth-child(5) {
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img5.jpg);
    background-size: cover;
    background-position: center;
}

.members .bene--box:nth-child(6) {
    background: url(https://files.bcart.jp/whiterap-test/uploads/membership/bg-img6.jpg);
    background-size: cover;
    background-position: center;
}

.members .benetitwrap {
    display: flex;
    margin: 0;
    padding: 0;
}

.members .benetit1 {
    background-color: #5678B6;
    color: white;
    font-size: 16px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
}

.members .benetit1 span {
    font-size: 34px;
    font-weight: bold;
}

.members .benetit2 {
    background-color: #6B7280;
    color: white;
    font-size: 22px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-weight: normal;
}

.members .bene--box p {
    font-size: 16px;
    color: #1F2937;
    line-height: 1.8;
    margin: 0;
    max-width: 64%;
    padding: 30px;
    font-weight: normal;
}

.members .bene--box p span {
    color: #C04C32;
}

/* 2番目と4番目のbene--boxの見出しと本文を右寄せ */
.members .bene--box:nth-child(3) .benetitwrap,
.members .bene--box:nth-child(5) .benetitwrap {
    justify-content: flex-end;
}

.members .bene--box:nth-child(3) p,
.members .bene--box:nth-child(5) p {
    text-align: right;
    margin-left: auto;
}

.members .cta {
    text-align: center;
    color: #C04C32;
    font-size: 22px;
}
.members .cta .button{
    padding: 20px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    /* 全体のコンテンツを中央揃えに */
    .content {
        padding: 20px 0;
    }

    
    
    /* sec1のスマホ対応 - 背景は全幅、内側コンテンツのみに余白 */
    .members .sec1 {
        padding: 20px 0;
        margin: -20px -20px 20px -20px;
        text-align: center;
    }
    
    /* sec1内のpタグに余白を追加 */
    .members .sec1 p {
        padding: 0;
        margin: 8px auto;
    }
    
    /* logoのスマホ対応 */
    .members .logo {
        margin-left: 0 !important;
        text-align: center;
    }
    
    .content .members .sec1 .logo img {
        max-width: 280px !important;
        margin: 0 auto 20px 9%  !important;
        width: auto;
        display: block;
    }
    
    .members .logo img {
        max-width: 280px !important;
        width: auto;
        margin: 0 auto;
        display: block;
    }
    
    .members .content_wrap {
        flex-direction: column;
        width: 100%;
        max-width: 350px;
        gap: 12px;
        margin: 0 auto;
    }
    
    .members .benefit {
        width: 100% !important;
        padding: 20px;
        margin-bottom: 12px;
    }
    
    .members .benefit .mark {
        max-width: 70px;
    }
    
    .members .benefit .icon {
        width: 60px;
        height: auto;
        top: 15px;
        right: 25px;
    }
    
    .members .benefit .tit1 {
        font-size: 14px;
        margin-top: 30px;
    }
    
    .members .benefit .tit2 {
        font-size: 18px;
    }
    
    .members .benefit p {
        font-size: 13px;
    }
    
    .members .button {
        padding: 30px 0;
    }
    
    .members .button a {
        padding: 15px 30px;
        font-size: 16px;
    }
    
    /* sec2のスマホ対応 - PCデザインに合わせて調整 */
    .members .sec2 {
        padding: 20px 0;
    }
    
    .members .sec2 .tit {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .members .benetitwrap {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    .members .benetit1 {
        font-size: 12px;
        padding: 10px 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .members .benetit1 span {
        font-size: 22px;
    }
    
    .members .benetit2 {
        font-size: 14px;
        padding: 10px 14px;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }
    
    .members .bene--box p {
        font-size: 14px;
        padding: 20px;
        max-width: 100% !important;
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    /* スマホでは右寄せレイアウトを解除 */
    .members .bene--box:nth-child(3) .benetitwrap,
    .members .bene--box:nth-child(5) .benetitwrap {
        justify-content: flex-start;
    }
    
    .members .bene--box:nth-child(3) p,
    .members .bene--box:nth-child(5) p {
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    /* sec2のスマホ対応強化 - PCデザインに合わせて調整 */
    .members .sec2 {
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
    }
    
    .members .sec2 .tit {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: left;
        padding: 0;
    }
    
    .members .bene--box {
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    
    /* ctaセクションのスマホ対応 */
    .members .cta {
        font-size: 18px;
        padding: 0 20px;
        text-align: center;
    }
    
    .members .cta .button {
        margin-top: 20px;
        padding: 0;
    }
    
    .members .cta .button a {
        padding: 12px 25px;
        font-size: 15px;
        width: 100%;
        max-width: 280px;
    }

    .members .concept {
        padding: 1px 30px !important;
    }

    .main.main--page-detail-1column section:not(.__heading), .main.main--page-detail-2column section:not(.__heading){
        padding: 0;
    }
}

/* よくある質問 */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-title {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 25px;
    color: #1F2937;
    padding-bottom: 10px;
    border-bottom: 3px solid #174076;
    width: 100%;
}

.faq-section {
    margin-bottom: 40px;
    padding-left: 20px;
}

.faq-section-title {
    font-size: 20px;
    font-weight: bold;
    color: #1F2937;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    overflow: hidden;
}

.faq-question {
    background: #EBF4FD;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
    position: relative;
}

.faq-question:hover {
    background: #d6e8fa;
}

.faq-q-mark {
    color: #5678B6;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.faq-q-text {
    font-weight: bold;
    font-size: 14px;
    color: #1F2937;
    line-height: 1.5;
    flex: 1;
}

.faq-toggle {
    color: #5678B6;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
    position: relative;
}

.faq-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #5678B6;
    transform: translate(-50%, -50%);
}

.faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background: #5678B6;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

.faq-item.active .faq-toggle::after {
    opacity: 0;
}

.faq-answer {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    transition: padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.faq-a-mark {
    color: #B69950;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.faq-a-text {
    color: #1F2937;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
}

.faq-emphasis {
    color: #C04C32;
    font-weight: bold;
}

.faq-bold {
    font-weight: bold;
}

@media (max-width: 768px) {
    .faq-container {
        padding:0;
    }
    
    .faq-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .faq-section-title {
        font-size: 1.2rem;
    }
    
    .faq-question,
    .faq-answer {
        /* padding: 15px; */
        gap: 10px;
    }

    .faq-section{
        padding-left: 0;
    }
    
    .faq-q-mark,
    .faq-a-mark,
    .faq-toggle {
        font-size: 12px;
    }
}


/* ご利用ガイド */
.guide-container {
    max-width: 830px;
    margin: 0 auto;
    padding:0;
}

.guide-container h2{
    background-color: #5678B6;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    border-left:8px solid #174076;
}

.guide-title {
    font-size: 22px;
    font-weight: bold;
    border-bottom:3px solid #174076;
    text-align: left;
    margin-bottom: 20px;
    color: #1F2937;
        padding-bottom: 10px;
}

.guide-section {
    margin-bottom: 50px;
}

.guide-section-title {
    font-size: 22px;
    font-weight: bold;
    color: #1F2937;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5678B6;
}

.guide-section-content {
    font-size: 16px;
    line-height: 1.8;
    color: #1F2937;
    margin-bottom: 20px;
}

.guide-step {
    background-color: #f8f9fa;
    border-left: 4px solid #5678B6;
    padding: 20px;
    margin: 20px 0;
}

.guide-step-title {
    font-size: 18px;
    font-weight: bold;
    color: #1F2937;
    margin-bottom: 12px;
}

.guide-step-content {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

.guide-note {
    background-color: #fff9e6;
    border: 1px solid #f0d000;
    padding: 16px;
    margin: 16px 0;
    border-radius: 4px;
}

.guide-note-title {
    font-weight: bold;
    color: #856404;
    margin-bottom: 8px;
}

.guide-note-content {
    font-size: 14px;
    color: #856404;
    line-height: 1.6;
}

.guide-link {
    color: #5678B6;
    text-decoration: underline;
    font-weight: bold;
}

.guide-link:hover {
    color: #456094;
}

/* ご利用ガイドのナビゲーション */
.guide-nav-container {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    margin: 20px 0 40px 0;
    border: 2px solid #D1D5DB;
}

.guide-nav-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap:0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-titletxt{
    font-size: 16px;
    line-height: 2;
}

.guide-nav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #174076;
    text-decoration: none;
    padding: 5px 7px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.guide-nav-item:hover {
    background-color: #e3f2fd;
    color: #174076;
    text-decoration: none;
}

.guide-nav-icon {
    width: 24px;
    height: 24px;
    background-image: url('https://files.bcart.jp/whiterap-test/uploads/contents/guide/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.guide-container p{
    line-height: 1.8;
}


.guide-container li{
margin-bottom: 5px;
}

.guide-wrap{
    padding: 30px 0 0 30px;
}

.guide-wrap h2 {
    margin-left: -30px;
    width: 100%;
    max-width: 830px;
}

.guide-wrap h2 + p {
    margin-left: -30px;
    width: 100%;
    max-width: 830px;
}


.guide-box{
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    
}

.guide-container a{
    color: #174076;
    text-decoration: underline;
}

.guide-box .comment{
    flex: 1;
    font-size: 14px;
}

.guide-box .image{
    flex: 1;
}

.guide-box.cashon .comment{
    flex: 6;
}

.guide-box.cashon .image{
    flex: 4;
}

.guide-box .image img{
    width: 100%;
    height: auto;
}

.guide-box .caution{
    border: #D1D5DB solid 2px;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.guide-box .caution a{
    text-decoration: underline;
    color: #174076;
}

.guide-box .caution .tit{
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guide-box .caution .tit::before{
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('https://files.bcart.jp/whiterap-test/uploads/contents/guide/caution.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.guide-box .caution p{
font-size: 14px;
margin: 5px 0;
}
/* === guide-box スタイル終了 === */

.guide-wrap .tit{
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #5678B6;
}

.guide-wrap .no-box{
    background-color: #5678B6;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    width: 30px;
    height: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-wrap .txt-box{
    margin-bottom: 40px;
    margin-top: 40px;
}

.guide-wrap .content___wrap{
    margin-bottom: 60px;
}



/*
 * .account-guide は .guide-wrap の子孫要素として配置されることを想定
 */

.guide-wrap .account-guide {
  display: flex; 
  border: 1px solid #e0e0e0; 
  border-radius: 4px;
  font-size: 14px; 
  line-height: 1.6; 
  background-color: #fff;
  width: fit-content;
  margin-bottom: 10px;
}


.guide-wrap .account-guide-tit {
  padding:12px;  
  display: flex;
  align-items: flex-start; 
  position: relative;
  font-weight: bold;
}

.guide-wrap .account-guide-tit::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: #e0e0e0;
}

.guide-wrap .account-guide-tit {
  color: #5678B6;
  vertical-align: top;
}


.guide-wrap .account-guide-details {
  padding: 10px 20px;
}

.guide-wrap .account-guide-details dl {
  margin: 0; 
  display: grid;
  grid-template-columns: auto 1fr; 
  gap: 5px 16px;
}


.guide-wrap .account-guide-details dt {
  grid-column: 1; 
  font-weight: bold;
  text-align: right;
}


.guide-wrap .account-guide-details dd {
  grid-column: 2;
  margin: 0;
}

/* account-guideの親コンテナを横並びにする */
.guide-wrap .account-guides-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 40px;
}

.guide-wrap .delivery img{
width: 450px;
}



.guide-wrap ::marker {
    color: #5678B6;
}

.guide-container .btn {
    margin: 50px 0 80px 0;
    text-align: center;
}

.guide-container .btn a {
    display: inline-block;
    background-color: #174076;
    color: white;
    width: 360px;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    transition: background-color 0.3s ease;
}

.guide-container .btn a:hover {
    background-color: #456094;
}

@media (max-width: 768px) {
    .content {
        width: 100%;
        max-width: 100%;
        padding: 20px 10px;
        margin: 0;
    }
    
    .guide-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .guide-title {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .guide-titletxt {
        font-size: 14px;
        text-align: center;
        margin-bottom: 30px;
    }
    
    /* ナビゲーションのスマホ対応 */
    .guide-nav-container {
        width: 100%;
        padding: 15px 10px;
        margin: 20px 0;
    }
    
    .guide-nav-list {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap:0;
    }
    
    .guide-nav-item {
        font-size: 12px;
        gap: 8px;
        padding: 4px 6px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
    }
    
    .guide-nav-icon {
        width: 16px;
        height: 16px;
    }
    
    /* guide-wrapのスマホ対応 */
    .guide-wrap {
        width: 100%;
        padding: 20px 0 0 0;
    }
    
    .guide-wrap h2 {
        width: 100%;
        margin-left: 0;
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .guide-wrap h2 + p {
        width: 100%;
        margin-left: 0;
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    /* guide-boxのスマホ対応 */
    .guide-box {
        width: 100%;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .guide-box .comment,
    .guide-box .image {
        width: 100%;
        flex: 1;
    }
    
    .guide-box .tit {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .guide-box .no-box {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
    
    .guide-box .caution {
        margin: 15px 0;
        padding: 12px;
    }
    
    .guide-box .caution .tit {
        font-size: 13px;
    }
    
    .guide-box .caution p {
        font-size: 12px;
    }
    
    /* txt-boxのスマホ対応 */
    .guide-wrap .txt-box {
        width: 100%;
        padding: 0;
        margin-bottom: 30px;
        margin-top: 20px;
    }
    
    .guide-wrap .txt-box .tit {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .guide-wrap .txt-box p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .guide-wrap .txt-box ul {
        padding-left: 20px;
    }
    
    .guide-wrap .txt-box li {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 8px;
    }
    
    /* account-guideのスマホ対応 */
    .guide-wrap .account-guides-container {
        width: 100%;
        flex-direction: column;
        gap: 15px;
    }
    
    .guide-wrap .account-guide {
        width: 100%;
        margin-bottom: 15px;
        font-size: 12px;
    }
    
    .guide-wrap .account-guide-tit {
        padding: 10px;
        font-size: 14px;
    }
    
    .guide-wrap .account-guide-details {
        padding: 10px;
    }
    
    .guide-wrap .account-guide-details dl {
        gap: 4px 12px;
    }
    
    .guide-wrap .account-guide-details dt {
        font-size: 12px;
        color: #212529;
    }
    
    .guide-wrap .account-guide-details dd {
        font-size: 12px;
        color: #212529;
    }
    
    /* deliveryのスマホ対応 */
    .guide-wrap .delivery img {
        width: 100%;
        max-width: 350px;
    }
    
    /* ボタンのスマホ対応 */
    .guide-container .btn a {
        width: 100%;
        max-width: 280px;
        padding: 12px 15px;
        font-size: 14px;
    }
    
    /* content___wrapのスマホ対応 */
    .guide-wrap .content___wrap {
        width: 100%;
        margin-bottom: 40px;
    }
    
    /* 画像のスマホ対応 */
    .guide-wrap img {
        max-width: 100%;
        height: auto;
    }
    
    /* テーブル風レイアウトのスマホ対応 - PCと同じグリッドレイアウト */
    .guide-wrap .account-guide-details dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px 16px;
    }
    
    .guide-wrap .account-guide-details dt {
        grid-column: 1;
        font-weight: bold;
        text-align: right;
        color: #212529;
        font-size: 12px;
    }
    
    .guide-wrap .account-guide-details dd {
        grid-column: 2;
        margin: 0;
        color: #212529;
        font-size: 12px;
    }
}