@charset "UTF-8";
/*************************
*  component
*************************/
/* common parts
___________________________________________________________________________*/

@import "header.css";
@import "footer.css";
@import "chatbot.css";
@import "function.css";


/*************************
*  default
*************************/
:root{
    /* カラー */
    --jcom-red:#D9161B;
    --jcom-orange:#E93817;
    --jcom-sub-orange:#EE5D44;
    --bg-gray:#F8F8F8;
    --bg-pink:#FFF2F0;
    --link-blue:#406FAF;
    --text-color:#333;
    --text-orange:#fe6600;
    --color-wh:#fff;

    /* 基準フォントサイズ */
    font-size: 62.5%;
    
    /* 最大幅と余白 */
    --max-width: 96rem;
    --min-side-space: 10vw;

    /* グリッドの隙間 */
    --grid-gap-md: 2.4rem;
    --grid-gap-lg: 4.0rem;
}


/* element
___________________________________________________________________________*/
html{
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'sans-serif';
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    color: var(--text-color);
    line-height: 1.7;
}

main{
    margin: 0 auto;
    overflow: hidden;
}

img{max-width: 100%;}


/* rayout 
___________________________________________________________________________*/
.side-space{padding-inline: max(var(--min-side-space), calc(50% - var(--max-width) / 2));}
.grid-2 {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  display: grid;
  gap: var(--grid-gap-md);
  grid-template-columns: repeat(3, 1fr);
}
.sp_only{display: none;}
.sp-img{display: none;}

@media screen and (max-width: 768px) {
    .grid-2,.grid-3 {
        grid-template-columns: 1fr;
    }
    .sp_only{
        display: block;
    }
    .pc_only{
        display: none;
    }
    .sp-img{
        display: unset;
    }
    .pc-img{
        display: none;
    }
}


/* main
___________________________________________________________________________*/

/* heading */
.sec_title_lv1{
    font-size: 3.2rem;
    border-bottom: 4px solid var(--jcom-red);
    margin-bottom: 2.8rem;
    padding-bottom: 1rem;
}

.sec_title_lv2{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap:1.2rem;
    margin-bottom: 2rem;
    font-size: 2.4rem;
    font-weight: bold;
    &::before{
        content: '';
        display: block;
        border-right: 25px solid transparent;
        border-top: 40px solid var(--jcom-red);        
    }
}

.sec_title_lv3{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap:1.2rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: bold;
    &::before{
        display: block;
        content: "\25B6";
        color: var(--jcom-red);   
    }
}

/* list */
.dl_list{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap:0.8rem;
    dd{
        grid-column: 2;
        @media screen and (max-width: 768px) {
            grid-column: 1;
            &:not(:last-of-type){margin-bottom: 0.8rem;}
        }
    }
}

.list_notice{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap:0.7rem;
    font-size:1.4rem;
    &::before{content:'※';}
}

.qa_list{
    /* detailsタグを使用すること */
    interpolate-size: allow-keywords;
    background: #fff;
    border-radius: 1rem;

    --qa_marker_q:#e93817;
    --qa_marker_a:#0265CB;

    &:not(:last-of-type){margin-bottom: 1.6rem;}

    &::details-content {
        height: 0;
        overflow: clip;
        opacity: 0;
        transition: height 0.8s ease, opacity 0.8s ease,content-visibility 0.8s ease allow-discrete;
        background-color: var(--color-wh);
    }

    &[open]::details-content {
        height: auto; /* for unsupported browser */
        height: calc-size(auto, size);
        opacity: 1;
        border-radius:0 0 1rem 1rem;
    }

    summary{
        display:grid;
        grid-template-columns: auto 1fr auto;
        grid-column-gap: 1.6rem;
        align-items: baseline;
        padding: 2rem;
        font-size: 1.8rem;
        font-weight: bold;
        cursor: pointer;
        list-style: none;
        
        &::-webkit-details-marker {display: none;}

        &::before{
            content:'Q';
            display: grid;
            place-content: center;
            height: 3rem;
            width: 3rem;
            margin-top: 0.8rem;
            padding-bottom: 0.4rem;
            font-size: 1.8rem;
            border-radius: 1.5rem;
            background-color: var(--qa_marker_q);
            color:#fff;

        }
        &::after{content: "＋";}
        [open] &::after {content: "ー";}
    }
    & > div{
        display:grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: 1.6rem;
        align-items: baseline;
        padding: 2rem;
        border-top: dotted 2px #dedede;
        &::before{
            content: 'A';
            display: grid;
            place-content: center;
            height: 3rem;
            width: 3rem;
            margin-top: 0.8rem;
            padding-bottom: 0.4rem;
            font-size: 1.8rem;
            font-weight: bold;
            border-radius: 1.5rem;
            background-color: var(--qa_marker_a);
            color:#fff;
        }
        & > *{grid-column: 2;}
    }    
}

/* page-topボタン */
#btn_page-top{
    display: block;
    width: 60px;
    height: 60px;
    background: url(../img/PageTop.png) no-repeat left center;
    position: fixed;
    bottom: 5vh;
    right: 3vw;
    cursor: pointer;
    z-index: 2;

    a {
        display: block;
        height: 100%;
    }
}

/*************************
* utilities
*************************/

.img{place-self: center;}
.b{font-weight: bold;}
.sm{font-size: 1.2rem;}