body {
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

p {
    margin: 2rem 0;
}

.item{
    margin: 1.5rem;
    list-style: none;
}

.title.-lv1{
    color: #525252;
    line-height: 2em;
    display: inline-block;
    border-left: 3px solid #bc000f;
    font-weight: 700;
    text-decoration: none;
    padding-left: 1rem;
}

.seminner_button {
        border: 2px solid #c3000d;
}

.br-sp {
    display: none;
}

@media (min-width: 1200px) {
.header_image {
    background: url(https://cdn.zuuonline.com/contents/lp/assets/integration_lp/framepc2.png) no-repeat 50% 0;
    height: 25vw;
    background-size: cover;
}

.h1sp{
display:none;
}

.integration_contents{
        width: 80%;
        height: auto;
        margin: 0 auto;
    display: flex;
        padding-top: 2rem; /* 5remから2remに変更 */
        padding-bottom: 3rem;
        }

.lp_box{
        width: 24.5vw;
        margin: 0 1vw;
        border: 1px solid #d1d1d1;
        min-height: 650px; /* 最小の高さを設定 */
        border-radius: 1rem;
        border: 2px solid #eee;
        background: #fafafa;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.lp_title{
        height: 10%;
        width: 80%;
        margin: 0 auto;
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
}

.lp_title b {
    font-size: 1.1rem; /* この値を変更して文字の大きさを調整できます */
}

.lp_box_img {
    text-align: center;
}

.lp_img{
    width: 89% !important;
    padding: 1rem;
}

    .footer_logo_image {
        width: 100%;
        background-color: #ffffff;
        text-align: center;
    }

.seminner_title{
        font-size: 1.2rem;
        line-height: 1.7rem;
        padding: 0.5rem 1rem;
        color: #525252;
        text-align: center;
        font-weight: bold;
        border-top: 1px solid #9c9d9d;
        border-bottom: 1px solid #9c9d9d;
        border-style: dotted;
        border-left: none;
        border-right: none;
}

.seminner_tag_box{
display: flex;
    width: fit-content;
    margin: 0 auto;
    margin-top: 1rem;
}

.seminner_tag{
    background: #9d9d9d;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: white;
    margin: 0 0.5rem;
    font-size: 0.7vw;
}

.seminner_txt{
font-size: 0.77rem;
        line-height: 1.5rem;
        color: #525252;
        height: auto;
        margin: 0 auto;
        width: 80%;
        margin-top: 1.1rem;
        font-weight: bold;
}

.seminner_button{
    text-align: center;
    background-color: #bc000d;
    width: 50%;
    margin: 2rem auto; /* 上下のマージンを調整 */
    padding: 0.5rem 1rem;
    font-size: 1vw;
    border-radius: 1rem;
    color: #fff;
}

.detail_Area_inner{
    width: 50%;
    margin: 0 auto;
}
}

@media (min-width: 769px) and (max-width: 1199px) {
.header_image {
    background: url(https://cdn.zuuonline.com/contents/lp/assets/integration_lp/framepc2.png) no-repeat 50% 0;
    height: 25vw;
    background-size: cover;
}

.h1sp{
display:none;
}

.integration_contents{
        width: 100%;
        height: auto;
        margin: 0 auto;
    display: flex;
        padding-top: 1.5rem; /* 3remから1.5remに変更 */
        padding-bottom: 3rem;
        }

.lp_box{
        width: 30.5vw;
        margin: 0 1vw;
        border: 1px solid #d1d1d1;
        min-height: 600px; /* 最小の高さを設定 */
        border-radius: 1rem;
        border: 2px solid #eee;
        background: #fafafa;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.lp_title{
        height: 20%;
        width: 85%;
        margin: 0 auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
}

.lp_title b {
    font-size: 1rem; /* この値を変更して文字の大きさを調整できます */
}

.lp_box_img {
    text-align: center;
}

.lp_img{
    width: 89% !important;
    padding: 1rem;
}

    .footer_logo_image {
        width: 100%;
        background-color: #ffffff;
        text-align: center;
    }

.integration_contents{
    display: flex;
        padding-top: 1.5rem; /* 3remから1.5remに変更 */
        padding-bottom: 3rem;
}

.seminner_title{
        font-size: 1.2rem;
        line-height: 1.7rem;
        padding: 0.5rem 1rem;
        color: #525252;
        text-align: center;
        font-weight: bold;
border-top: 1px solid #9c9d9d;
        border-bottom: 1px solid #9c9d9d;
        border-style: dotted;
        border-left: none;
        border-right: none;
}

.seminner_tag_box{
display: flex;
    width: fit-content;
    margin: 0 auto;
    margin-top: 1rem;
}

.seminner_tag{
    background: #9d9d9d;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: white;
    margin: 0 0.5rem;
    font-size: 1vw;
}

.seminner_txt{
font-size: 0.65rem;
        line-height: 1.5rem;
        color: #525252;
        height: auto;
        margin: 0 auto;
        width: 80%;
        margin-top: 1rem;
        font-weight: bold;
}

.seminner_button{
    text-align: center;
    background-color: #bc000d;
    width: 50%;
    margin: 2rem auto; /* 上下のマージンを調整 */
    padding: 1rem;
    font-size: 1.4vw;
    border-radius: 1rem;
    color: #fff;
}

.detail_Area_inner{
    width: 50%;
    margin: 0 auto;
}

.sponsor{
    background-color: black;
    color: #fff;
    padding: 0.5rem;
    display: block;
    font-size: 1.17em;
    height: 2rem;
    font-weight: bold;
}
}

@media (max-width: 768px){
.header_image{
display:none;
}

.h1sp{
display:flex;
}

.h1sp img {
    height: 30vw; /* この値を調整して高さを変更できます */
    object-fit: cover;
    width: 100%;
}

.integration_contents{
        width: 89%;
        height: auto;
        margin: 0 auto;
        display: block;
        padding-top: 1.5rem; /* 3remから1.5remに変更 */
        }

.lp_box{
        width: 100%;
        margin: 0 auto;
        border: 1px solid #d1d1d1;
        height: auto;
        border-radius: 1rem;
        border: 2px solid #eee;
        background: #fafafa;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
        padding-top: 4%;
        margin-bottom: 2rem;
}

.lp_title{
        height: 20%;
        width: 85%;
        margin: 0 auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
}

.lp_title b {
    font-size: 1.2rem; /* この値を変更して文字の大きさを調整できます */
}

.lp_box_img {
    text-align: center;
}

.lp_img{
    width: 80% !important;
    padding: 1rem;
}

    .footer_logo_image {
        width: 100%;
        background-color: #ffffff;
        text-align: center;
    }

.seminner_title{
        font-size: 1.1rem;
        line-height: 1.4rem;
        padding: 0.5rem;
        color: #525252;
        text-align: center;
        font-weight: bold;
border-top: 1px solid #9c9d9d;
        border-bottom: 1px solid #9c9d9d;
        border-style: dotted;
        border-left: none;
        border-right: none;
}

.seminner_tag_box{
display: flex;
    width: fit-content;
    margin: 0 auto;
    margin-top: 1rem;
}

.seminner_tag{
    background: #9d9d9d;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: white;
    margin: 0 0.5rem;
    font-size: 2.8vw;
}

.seminner_txt{
font-size: 0.8rem;
        line-height: 1.5rem;
        color: #525252;
        height: auto;
        margin: 0 auto;
        width: 80%;
        margin-top: 1rem;
        font-weight: bold;
}

.seminner_button{
    text-align: center;
    background-color: #bc000d;
    width: 50%;
    margin: 2rem auto; /* 上下のマージンを調整 */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 1rem;
    color: #fff;
}

.detail_Area_inner{
    width: 100%;
    margin: 0 auto;
}

.sponsor{
background-color: black;
    color: #fff;
    padding: 0.5rem;
    display: block;
    font-size: 1em;
    height: 1.5rem;
    font-weight: bold;
}

.br-sp {
    display: block;
}
}


/*アコーディオン*/
.toggle {
    display: none;
}
.Label {        /*タイトル*/
    padding: 1em;
    display: block;
    color: #fff;
    background: #383838;
    text-align: center;
    font-weight: bold;
}
.Label::before{     /*タイトル横の矢印*/
    content:"";
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top:calc( 50% - 3px );
    right: 20px;
    transform: rotate(135deg);
}
.Label,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}
.content {      /*本文*/
    height: 0;
    margin-bottom:10px;
    padding:0 20px;
    overflow: hidden;
        line-height: 2rem;
        color: #525252;
}
.toggle:checked + .Label + .content {   /*開閉時*/
    height: auto;
    padding: 20px;
    transition: all .3s;
    width: 80%;
    margin: 0 auto;
    color: #525252;
    background: #fff;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.toggle:checked + .Label::before {
    transform: rotate(-45deg) !important;
}

/* 「本ページについて」セクションの専用スタイル */
.about-section-container {
    padding: 10px 15px; /* 上下のパディングを10pxに、左右を20pxに変更 */
    width: 85%;
    margin: 0.5rem auto;
    background: #fff;
    color: #525252;
}
/* 修正箇所：段落の文字サイズと行間、余白を調整 */
.about-section-container p {
    font-size: 0.9rem; /* 文字の大きさを変更できます (例: 1.2rem) */
    line-height: 1.3rem; /* 行間を調整できます (例: 2.5rem) */
    margin: 1rem 0; /* この行で上下の余白を調整します */
}
.about-section-container p:first-child {
    text-align: center;
    font-size: 1rem; /* この値を変更して文字の大きさを調整できます */
    width: 100%; /* この値を変更して幅を調整できます */
    margin-left: auto;
    margin-right: auto;
}
.about-section-container ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0.5rem; /* リスト下の余白を調整 */
}
/* 修正箇所：リストの文字サイズと行間を調整 */
.about-section-container li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem; /* この値を変更して文字の大きさを調整できます */
    line-height: 1.4rem; /* 行間を調整できます (例: 2rem) */
    font-weight: bold; /* この行で太字にします */
    text-decoration: underline;
    text-decoration-color: #bc000d;
    text-decoration-thickness: 2px; /* 下線の太さを調整 (例: 3px) */
    text-underline-offset: 2px; /* 下線と文字の間隔を調整 (例: 1px) */
}

/* <b>タグのスタイルを追加 */
.about-section-container p b {
    background: linear-gradient(transparent 60%, #ffc107 60%);
    font-weight: bold;
}


.grad-wrap {
        position: relative !important;
        }
        .grad-wrap + .grad-wrap {
        margin-top: 40px;
        }
        .grad-title{
        background-color: #ffffff;
        font-size: 1.8rem;
        font-weight: bold;
        display: block;
        border: 1px solid #D9D9D9;
        padding: 1rem 2rem;
        cursor: pointer;
        position: relative;
color: #525252;
        }
        .grad-btn {
        z-index: 2;
        position: absolute;
        right: 0;
        bottom: auto;
        left: 0;
        width: 60px;
        margin: auto;
        padding: .5em 0;
        border-radius: 2px;
        background: #bc000d;
        color: #fff;
        font-size: 1.3rem;
        text-align: center;
        cursor: pointer;
        transition: .2s ease;
        box-shadow: 0 0 3px rgba(0,0,0,.3);
        }
        .grad-btn::before {
        content: "+"
        }
        .grad-btn:hover {
        background: #fff;
        color: #bc000d;
        }
        .grad-btn .fa {
        margin-right: .5em;
        }
        .grad-item {
        position: relative;
        overflow: hidden;
        height: 10rem; /* 続きを読む前に見えている高さ */
        margin-bottom: 1rem;
        margin-top: 2rem;
        }
        .grad-item p + p {
        margin-top: 1em;
        }
    
        .grad-item::after {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 95%; /* グラデーションで隠す範囲 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0.75) 75%, #fff 100%);
        background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 10%, rgba(255,255,255,0.75) 75%, #fff 100%);
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 100%);
        }
    
        .grad-trigger {
        display: none; /*チェックボックスは常に非表示*/
        }
        .grad-trigger:checked ~ .grad-btn::before {
        content: "-"; /* チェック時、文言を変更する */
        }
        .grad-trigger:checked ~ .grad-item {
        height: auto;/* チェック時、高さを戻す */
        }
        .grad-trigger:checked ~ .grad-item::before {
        display: none; /* チェック時、grad-itemのbeforeを非表示にする */
        }
        .grad-trigger:checked ~ .grad-item::after {
        display: none; /* チェック時、grad-itemのafterを非表示にする */
        }