@charset "utf-8";
/*ーーーーーーーーーーーーーーーーーー横並びーーーーーーーーーーーーーーーーーーーーーー*/
/*PC*/
[id*="layout"][id*="row"] > .aem-Grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
[id*="layout"][id*="row"][id*="pc2"] > .aem-Grid > .container {
    width: calc(100% / 2);
}
[id*="layout"][id*="row"][id*="pc3"] > .aem-Grid > .container {
    width: calc(100% / 3);
}
[id*="layout"][id*="row"][id*="pc4"] > .aem-Grid > .container {
    width: calc(100% / 4);
}
[id*="layout"][id*="row"][id*="pc5"] > .aem-Grid > .container {
    width: calc(100% / 5);
}
[id*="layout"][id*="row"][id*="pc6"] > .aem-Grid > .container {
    width: calc(100% / 6);
}
[id*="layout"][id*="row"][id*="reverse"] > .aem-Grid {
    flex-direction: row-reverse;
}
[id*="layout"][id*="row"][id*="center"] > .aem-Grid {
    align-items: center;
}
[id*="layout"][id*="row"][id*="bottom"] > .aem-Grid {
    align-items: flex-end;
}
.layout_row {
    display: flex;
}
.layout_row.horizontalcenter {
    justify-content: center;
}
.layout_row.verticalcenter {
    align-items: center;
}
.layout_row.bottom {
    align-items: flex-end;
}
.layout_row.reverse {
    flex-direction: row-reverse;
}
.layout_row.right {
    justify-content: flex-end;
}

/*ーーーーーーーーーーーーーーーーーーaタグーーーーーーーーーーーーーーーーーーーーーー*/
/*PDF*/
a[href$=".pdf"]::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin-left: 0px;
    background-image: url(/content/dam/casio/local/jp/online-store/test/PDF_24.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto;
}
/*ーーーーーーーーーーーーーーーーーーattentionーーーーーーーーーーーーーーーーーーーーーー*/
.attention {
    width: fit-content;
    padding: 0.3em 2em;
    border: solid 1px #FF0004;
    margin: 0 auto;
}
.attention, .attention a {
    color: #FF0004;
    font-weight: bold;
    font-size: min(4vw, 18px);
}
/*ーーーーーーーーーーーーーーーーーーインデントーーーーーーーーーーーーーーーーーーーーーー*/
[id*="text_indent"] p {
    text-indent: -1rem;
    padding-left: 1rem;
    margin-bottom: 0px;
}
/*ーーーーーーーーーーーーーーーーーー回り込みーーーーーーーーーーーーーーーーーーーーーー*/
.float_left, .float_right {
    width: 50%;
}
.float_left img, .float_right img {
    width: 100%;
}
.float_left {
    float: left;
    margin-right: 20px;
}
.float_right {
    float: right;
    margin-left: 20px;
}
/*SP*/
@media (max-width: 767px) {
    .float_left, .float_right {
        margin: 0;
        width: 100% !important;
    }
}
/*ーーーーーーーーーーーーーーーーーーbtnーーーーーーーーーーーーーーーーーーーーーー*/
/* common */
[id*="btn_color_"].cmp-button {
    font-weight: bold;
    border: solid 2px;
    border-radius: 12px;
    padding: 0px;
    cursor: pointer;
    /*color*/
    --white: #ffffff;
    --black: #000000;
}
/*--arrow--*/
[id*="btn_color_"].cmp-button::after {
    content: '';
    display: inline-block;
    width: .5em; 
    height: .5em; 
    font-size: 1rem; 
    min-height: auto;
    margin-top: -2px;
    margin-left: 10px; 
    border-top: 2px solid;
    border-right: 2px solid; 
    transform: rotate(45deg);
}
/*--animation--*/
[id*="btn_color_"].cmp-button, [id*="btn_color_"].cmp-button::after {
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    transition-duration: .4s;
}
/*black*/
[id*="btn_color_black"].cmp-button {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}
[id*="btn_color_black"].cmp-button:hover {
    color: var(--black);
    background: var(--white);
    border-color: var(--black);
}
[id*="btn_color_black"].cmp-button::after {
    border-color: var(--white);
}
[id*="btn_color_black"].cmp-button:hover::after {
    border-color: var(--black);
}
/*_white*/
[id*="btn_color_white"].cmp-button {
    color: var(--black);
    background: var(--white);
    border-color: var(--black);
}
[id*="btn_color_white"].cmp-button:hover {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}
[id*="btn_color_white"].cmp-button::after {
    border-color: var(--black);
}
[id*="btn_color_white"].cmp-button:hover::after {
    border-color: var(--white);
}
/*grey*/
[id*="btn_color_grey"].cmp-button {
    color: var(--black);
    background: #c7c7c7;
    border-color: var(--black);
}
[id*="btn_color_grey"].cmp-button:hover {
    color: var(--white);
    background: #606060;
    border-color: var(--black);
}
[id*="btn_color_grey"].cmp-button::after {
    border-color: var(--black);
}
[id*="btn_color_grey"].cmp-button:hover::after {
    border-color: var(--white);
}
/*blue*/
[id*="btn_color_blue"].cmp-button {
    color: var(--white);
    background: #0a3282;
    border: none;
}
[id*="btn_color_blue"].cmp-button:hover {
    opacity: .7;
}
[id*="btn_color_blue"].cmp-button::after {
    border-color: var(--white);
}
[id*="btn_color_blue"].cmp-button:hover::after {
    border-color: var(--white);
}

/*PC*/
@media (min-width: 768px) {
    [id*="width60"] {
        width: 60%;
        margin: 0 auto;
    }
    [id*="width70"] {
        width: 70%;
        margin: 0 auto;
    }
    [id*="width80"] {
        width: 80%;
        margin: 0 auto;
    }
    [id*="width90"] {
        width: 90%;
        margin: 0 auto;
    }
	/* margin */
    [id*="pc-margin-right10"] {
        margin-right: 10px;
    }
    [id*="pc-margin-right20"] {
        margin-right: 20px;
    }
    [id*="pc-margin-right30"] {
        margin-right: 30px;
    }
    [id*="pc-margin-left10"] {
        margin-left: 10px;
    }
    [id*="pc-margin-left20"] {
        margin-left: 20px;
    }
    [id*="pc-margin-left30"] {
        margin-left: 30px;
    }
}
/*SP*/
@media (max-width: 767px) {
    [id*="layout"][id*="row"][id*="sp1"] > .aem-Grid > .container {
        width: 100%;
    }
    [id*="layout"][id*="row"][id*="sp2"] > .aem-Grid > .container {
        width: calc(100% / 2);
    }
    [id*="layout"][id*="row"][id*="sp3"] > .aem-Grid > .container {
        width: calc(100% / 3);
    }
    [id*="layout"][id*="row"][id*="sp4"] > .aem-Grid > .container {
        width: calc(100% / 4);
    }
    [id*="layout"][id*="row"][id*="sp5"] > .aem-Grid > .container {
        width: calc(100% / 5);
    }
    [id*="layout"][id*="row"][id*="sp6"] > .aem-Grid > .container {
        width: calc(100% / 6);
    }
}