@charset "utf-8";

/***************************************************
information
	filename : app_article.css;
***************************************************/
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/****************** 幅指定 ******************/
.articleBox {}

.mce-content-body.articleBox {
    width: var(--app-main-width-con);
}

.formThanks .articleBox p,
.formThanks .articleBox table,
.formThanks .DLBox,
.formThanks .articleBox ul,
.formThanks .articleBox ol,
.formThanks .videoMax,
.formThanks .policy {
    width: 100%;
}

.formThanks .articleBox p.widths {
    width: 90%;
}

.sp_prev .mainVisual,
.sp_prev .articleBox,
.sp_prev .articleBox p,
.sp_prev .articleBox table,
.sp_prev .DLBox,
.sp_prev .articleBox ul,
.sp_prev .articleBox ol,
.sp_prev .videoMax,
.sp_prev .policy {
    width: 100%;
}

.sp_prev .articleBox p.widths {
    width: 90%;
}

/****************** 記事エリア ******************/

/* 記事エリア */
.articleBox {
    margin: 0 auto;
    padding: 0;
}


/**** span要素基本 ****/
.articleBox span.ubdr {
    color: var(--main-txt-ub);
    border-bottom: 2px solid var(--app-main-txt-ub);
}

/**** table要素基本 ****/
.articleBox table {
    margin: 20px auto;
    border: 1px solid var(--app-main-brd);
}

.articleBox th {
    padding: 15px;
    background: var(--app-main-cr-a);
    border: 1px solid var(--app-main-brd);
}

.articleBox td {
    padding: 15px;
    border: 1px solid var(--app-main-brd);
}

/* DLタグ */
.DLBox {
    margin: 30px auto;
    padding: 0;
    font-size: 16px;
    border-top: 1px solid var(--app-main-brd-a);
}

.DLBox dl {
    margin: 0 auto;
    padding: 0;
    border-bottom: 1px solid var(--app-main-brd-a);
}

.DLBox dt {
    float: left;
    width: 25%;
    margin: 0;
    padding: 15px 10px;
}

.DLBox dd {
    float: left;
    width: 60%;
    margin: 0;
    padding: 15px 10px;
}

.DLBox dl.bga {
    background: var(--app-main-cr-u);
}

.DLBox dl.bgb {
    background: var(--app-main-cr-u);
}

/* リスト */
.articleBox ul,
.articleBox ol {
    margin: 0 auto;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.4em;
}

.articleBox ul li {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.articleBox ol li {
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

/* 個別画像サイズ指定 */
.articleBox img {
    max-width: 100%;
    height: auto;
}

/*** ビデオ埋め込み共通 ***/
.videoMax {
    margin: 0 auto;
    max-width: 100%;
}

/* *************************
テンプレート対応 
************************* */
/* プライバシーポリシー */
.policy {
    margin: 0 auto;
}

.articleBox .policy h2 {
    padding: 10px 15px;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid var(--app-main-brd);
}

.articleBox .policy h3 {
    margin: 20px auto;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}

/* 囲みリスト */
.LiBox_style1 {
    margin: 30px auto;
    padding: 10px 15px;
    background: var(--app-main-cr-a);
    border: 2px solid var(--app-main-brd);
    border-radius: 3px;
}

/* サービス購入ボタン */
.sv_order {
    margin: 30px auto;
    padding: 10px 0;
}

.sv_order .payAre {
    margin: 20px auto;
    padding: 20px 0;
    text-align: center;
}

.sv_order .payAre .pay_b {
    font-size: 20px;
    line-height: 1.0em;
}

.sv_order .payAre .pay_b span.payB {
    font-size: 50px;
    font-weight: bold;
}

.sv_order .payAre .pay_s {
    font-size: 18px;
    line-height: 1.4em;
}

.sv_order .payAre .pay_caut {
    margin: 10px auto;
    padding: 15px 15px 0 15px;
    background: var(--app-main-cr-a);
    border: 2px solid var(--app-main-brd);
    border-radius: 3px;
}

/* 画像（上） */
.gallary_t {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px auto;
}

.gallary_t .img {
    max-width: 90%;
    margin: 0 auto 16px;
}

.gallary_t .text {
    background: var(--app-main-cr-a);
    padding: 10px 20px;
}

/* 画像（左） */
.gallary_l {
    display: flex;
    justify-content: flex-start;
    margin: 24px auto;
}

.gallary_l .img {
    width: 36%;
    flex-shrink: 0;
    margin-right: 16px;
}

.gallary_l .chara {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 19px;
}

.gallary_l .chara .title {
    font-size: 14px;
}

.introBox {
    background: var(--app-main-cr-a);
    border: 4px solid var(--app-main-brd);
    padding: 8px 16px;
}

/* 画像（右） */
.gallary_r {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 24px auto;
}

.gallary_r .img {
    width: 36%;
    flex-shrink: 0;
    margin-left: 16px;
}

.articleBox .LayoutR,
.articleBox .LayoutL {
    margin: 0 16px 16px;
}

.float .text p {
    display: grid;
    width: auto;
}

.float .text p:not([class]) {
    display: block;
}

/* イベント/地図 */
.event .info dl {
    display: flex;
    flex-direction: column;
    border: solid var(--app-glnv-cr);
    border-width: 1px 1px 1px 4px;
}

.event .info dt {
    border-bottom: 1px solid var(--app-glnv-cr);
    background: var(--app-main-cr-a);
    font-size: 14px;
    padding: 0.5em 16px;
}

.event .info dd {
    padding: 0.5em 16px;
}

.event .map {
    width: 100%;
    height: 450px;
    text-align: center;
}

.event .map iframe {
    width: 90%;
    padding: 24px 0;
    height: 100%;
    max-height: 90vw;
}

/* 購入画面対応 */
.order_Box .articleBox,
.order_Box .articleBox .h2.style1,
.order_Box .articleBox .h2.style2,
.order_Box .articleBox .h2.style3,
.order_Box .articleBox h3.style1,
.order_Box .articleBox h3.style2,
.order_Box .articleBox h3.style3,
.order_Box .articleBox table,
.order_Box .DLBox,
.order_Box .articleBox ul,
.order_Box .articleBox ol,
.order_Box .videoMax,
.order_Box .policy,
.order_Box .articleBox p.widths,
.order_Box .articleBox h4.style1,
.order_Box .articleBox h4.style2,
.order_Box .articleBox h4.style3,
.order_Box .articleBox h5.style1 {
    width: 90%;
}

/* ===================================================================================
for Ipad max-width: 1024px
=================================================================================== */
@media screen and (min-width:768px) and (max-width:1024px) {

    /****************** 幅指定 ******************/
    .articleBox {
        width: var(--main-width-con-ipad);
    }

    .mainVisual,
    .articleBox h2.style1,
    .articleBox h2.style2,
    .articleBox h2.style3,
    .articleBox h3.style1,
    .articleBox h3.style2,
    .articleBox h3.style3,
    .articleBox table,
    .DLBox,
    .articleBox ul,
    .articleBox ol,
    .videoMax,
    .policy {
        width: var(--app-main-width-con-ipad);
    }

    .articleBox p.widths,
    .articleBox h4.style1,
    .articleBox h4.style2,
    .articleBox h4.style3,
    .articleBox h5.style1 {
        width: var(--app-main-width-con-s-ipad);
    }

    .popup .mainVisual {
        width: 100%;
    }

    .popup .articleBox,
    .popup .articleBox h2.style1,
    .popup .articleBox h2.style2,
    .popup .articleBox h2.style3,
    .popup .articleBox h3.style1,
    .popup .articleBox h3.style2,
    .popup .articleBox h3.style3,
    .popup .articleBox table,
    .popup .DLBox,
    .popup .articleBox ul,
    .popup .articleBox ol,
    .popup .videoMax,
    .popup .policy,
    .popup .articleBox p.widths,
    .popup .articleBox h4.style1,
    .popup .articleBox h4.style2,
    .popup .articleBox h4.style3,
    .popup .articleBox h5.style1 {
        width: 90%;
    }

}

/* ===================================================================================
for SP max-width: 480px
=================================================================================== */
@media screen and (max-width: 480px) {

    /* メインビジュアル（システム登録反映箇所） */
    .mainVisual {
        width: 100%;
    }

    /**** pタグ要素基本 ****/
    .articleBox {
        width: 100%;
    }

    .articleBox p {
        width: 90%;
        padding: 20px 10px;
        font-size: 4.2vw;
        line-height: 1.8em;
    }

    .articleBox p.style1,
    .articleBox p.style2,
    .articleBox p.style3,
    .articleBox p.style4,
    .articleBox p.style5 {
        margin: 20px auto;
    }

    .articleBox p.widths {
        width: 85%;
    }

    /**** タイトル要素基本 ****/
    .articleBox h2 {
        padding: 20px 10px;
        font-size: 5.0vw;
        font-weight: bold;
    }

    .articleBox h2.style1 {
        width: 100%;
    }

    .articleBox h2.style2,
    .articleBox h2.style3 {
        width: 90%;
    }

    .articleBox h3 {
        padding: 10px 5px;
        font-size: 5.0vw;
        font-weight: bold;
    }

    .articleBox h3.style1,
    .articleBox h3.style2,
    .articleBox h3.style3 {
        width: 90%;
    }

    .articleBox h4 {
        margin: 20px auto 10px auto;
        padding: 10px;
        font-size: 5.0vw;
    }

    .articleBox h4.style1,
    .articleBox h4.style2 {
        width: 90%;
    }

    .articleBox h4.style3 {
        width: 90%;
        padding: 10px 10px 15px 10px;
    }

    .articleBox h5 {
        margin: 5px auto;
        padding: 10px;
        font-size: 5.0vw;
    }

    .articleBox h5.style1 {
        width: 85%;
    }

    /**** table要素基本 ****/
    .articleBox table {
        width: 90%;
    }

    .articleBox th {
        padding: 10px;
    }

    .articleBox td {
        padding: 10px;
    }

    /* DLタグ */
    .DLBox {
        width: 90%;
        margin: 30px auto;
        padding: 0;
        font-size: 4.2vw;
    }

    .DLBox dl {}

    .DLBox dt {
        float: left;
        width: 30%;
        margin: 0;
        padding: 15px 5px;
    }

    .DLBox dd {
        float: left;
        width: 65%;
        margin: 0;
        padding: 15px 5px;
    }

    /* リスト */
    .articleBox ul,
    .articleBox ol {
        width: 90%;
        margin: 0 auto;
        padding: 0 10px;
        font-size: 4.2vw;
        line-height: 1.6em;
    }

    /* 個別画像サイズ指定 */

    /**** テンプレート基本 ****/
    .policy {
        width: 90%;
    }

    .articleBox .policy h2 {
        padding: 10px 5px;
        font-size: 5.0vw;
    }

    .articleBox .policy h3 {
        padding: 10px 15px;
        font-size: 4.2vw;
    }

    /* *************************
	テンプレート対応 
	************************* */
    /*  award  */
    #award {
        background: url(../../../../images/site/award_header_sp.png)center top / 100% no-repeat, url(../../../../images/site/award_footer_sp.png)center bottom/ 100% no-repeat, #F4F0E6;
        padding: 20vw 4%;
    }

    #award h2 {
        margin: 1em auto;
    }

    .gallary_l {
        flex-direction: column;
    }

    .gallary_r {
        flex-direction: column-reverse;
    }

    .gallary_l .img,
    .gallary_r .img {
        width: 90%;
        margin: auto;
        text-align: center;
    }

    .gallary_l .text,
    .gallary_r .text {
        padding: 10px 20px;
    }

    .gallary_t,
    .gallary_l,
    .gallary_r,
    .float,
    .event {
        margin: 16px;
    }

    /* 囲みリスト */
    .LiBox_style1 {
        margin: 10px auto;
        padding: 10px 5px;
    }
}

/* 以下樋口追加分　220723*/
.media_box {
    display: flex;
    /* gap: 52px; */
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--app-header-cr);
    border-radius: 10px;
    padding: 14px 40px;
    height: 244px;
    width: 70%;
    margin: 0 auto;
}

.book_image {
    max-width: 40%;
    height: 100%;
}

.book_image img {
    object-fit: contain;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1.6;
    border-radius: 5px;
}

.book_link_btn {
    background-color: orange;
    width: 80%;
    height: 35px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.book_info {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 48px 0;
}

.articleBox .book_info a {
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

.articleBox .book_link_btn a {
    color: #fff;
}

@media screen and (max-width: 540px) {
    .media_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--app-header-cr);
        border-radius: 10px;
        padding: 16px 20px;
        height: 180px;
        width: 100%;
        margin: 0 auto;
    }

    .book_image {
        max-width: 40%;
        height: 100%;
    }

    .book_image img {
        object-fit: contain;
        height: 100%;
        width: auto;
        aspect-ratio: 1 / 1.6;
        border-radius: 5px;
    }

    .book_link_btn {
        background-color: orange;
        width: 90%;
        height: 30px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
    }

    .book_info {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 60%;
        padding: 20px 0;
    }

    .articleBox .book_info .book_name p {
        margin: 0;
    }

}

/* 以下樋口追加分22/07/27*/
.articleBox .myp_box {
    padding: 0px 30px 20px;
    margin-bottom: 60px;
}

.articleBox p.box_title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

.articleBox .myp_box ul {
    /* background-color: #eee; */
    list-style: none;
    border-radius: 10px;
    border: 1px dotted #acacac;
    /* padding: 10px 30px; */
}

.articleBox .myp_box ul li {
    display:
        flex;
    justify-content: space-between;
    align-items: center;
    height: 75px;
    border-bottom: 1px dotted #acacac;
}

.articleBox .myp_box ul li:last-child {
    border: none
}

.articleBox .myp_box p.todo_btn {
    background-color: var(--app-glnv-cr);
    width: 110px;
    height: 35px;
    border-radius: 2.5rem;
}

.articleBox .todo_btn a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
}

.articleBox .myp_box img {
    margin: 0 auto;
    display: block;
    max-width: 500px;
}

@media screen and (max-width: 540px) {
    .articleBox .myp_box {
        padding: 0px;
    }

    .articleBox p.box_title {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .articleBox .myp_box ul {
        width: 100%;
    }

    .articleBox .myp_box ul li {
        display:
            flex;
        justify-content: space-between;
        align-items: center;
        height: 75px;
        border-bottom: 1px dotted #acacac;
    }

    .articleBox .myp_box ul li:last-child {
        border: none
    }

    .articleBox .myp_box p.todo_title {
        width: 70%;
    }

    .articleBox .myp_box p.todo_btn {
        background-color: var(--app-glnv-cr);
        width: 25%;
        height: 35px;
        border-radius: 2.5rem;
    }

    .articleBox .todo_btn a {
        font-size: 12px;
    }

    .articleBox .myp_box img {
        max-width: 100%;
    }


}

.articleBox .checklist-template {
    list-style-type: none;
}

.articleBox .checklist-template li {
    position: relative;
}

.articleBox .checklist-template li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0.4em;
    left: -1em;
    width: 14px;
    height: 7px;
    border-left: 3px solid var(--app-header-cr);
    border-bottom: 3px solid var(--app-header-cr);
    transform: rotate(-45deg);
}

.articleBox .outlineBox {
    background-color: #f3f3f3;
    padding: 5px 25px 30px;
    margin-bottom: 50px;
    border-radius: 10px;
}

.outlineBox .outlineBoxTitle {
    border-bottom: 1px dotted;
    padding-bottom: 8px;
    padding-left: 8px;
}



.articleBox .check-title {
    font-size: 20px;
    position: relative;
    padding-left: 24px;
    display: flex;
    align-items: center;
}

.articleBox .check-title::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    background-color: #8acdbd;
    border-radius: 50%;
}

.articleBox .check-title::after {
    content: '';
    position: absolute;
    left: 4px;
    z-index: 2;
    width: 12px;
    height: 7px;
    margin-bottom: 4px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-43deg);
}

.articleBox .speech-bubble-box {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.articleBox .speech-bubble-box .spch-bbl-img{
    margin-top: 15px;
}

.articleBox .speech-bubble-box .spch-bbl-img img {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    border: 2px solid #ddd;
    padding: 5px;
}

.articleBox .speech-bubble-box .spch-bbl-img p {
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.articleBox .speech-bubble-box .spch-bbl-area {
    position: relative;
    display: inline-block;
    padding: 20px 28px;
    min-width: 120px;
    width: calc(100% - 70px);
    color: #555;
    font-size: 16px;
    border-radius: 8px;
}
@media screen and (max-width: 540px) {
    
    .articleBox .speech-bubble-box .spch-bbl-area {
        padding: 16px 20px;
    }
    
    .articleBox .speech-bubble-box .spch-bbl-area p{
        font-size:14px;
    }
}

.articleBox .speech-bubble-box .spch-bbl-area::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
}

.articleBox .speech-bubble-box .spch-bbl-area.left {
    margin: 15px 0 0 24px;
}

.articleBox .speech-bubble-box .spch-bbl-area.right {
    margin: 15px 24px 0 0;
}

.articleBox .speech-bubble-box .spch-bbl-area::before {
    transform: rotate(45deg);
    left: -8px;
    top: 15px;
    background: #fff;
    border-left: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}
.articleBox .speech-bubble-box .spch-bbl-area.right::before {
    transform: rotate(225deg);
	left:auto;
    right: -8px;
}

.articleBox .speech-bubble-box.wh .spch-bbl-area {
    background: #fff;
    /* border: ; */
    border: 2px solid #ddd;
}


.articleBox .speech-bubble-box .spch-bbl-area p{
    margin: 0;
    padding: 0;
    width: 100%;
}

.articleBox .speech-bubble-box.blue .spch-bbl-area {
    background: #E9EAF6;
    border: none;
}
.articleBox .speech-bubble-box.blue .spch-bbl-area::before {
    background: #E9EAF6;
    border: none;
}


.articleBox .bg-box-red,
.articleBox .bg-box-blue,
.articleBox .bg-box-yellow{
    border-radius: 8px;
    padding: 20px 28px;
}

.articleBox .bg-box-red{background-color: #EFE9DF;}
.articleBox .bg-box-blue{background-color: #F5F9FE;}
.articleBox .bg-box-yellow{background-color: #FFFDEB;}

.articleBox .bg-box-red p,
.articleBox .bg-box-blue p,
.articleBox .bg-box-yellow p{
    margin: 0;
}

.articleBox .borderBox p{
    margin: 12px 0;
}