@charset "UTF-8";

.cam-container{max-width: 100%;}
.cam-container *, .cam-container *::before, .cam-container *::after{
    box-sizing: border-box;
}

.block-freepage.area-gray{max-width: 100%;background-color: #f5f5f5;border-bottom: 1px solid #fafafa; padding: 1px 20px;margin-bottom: 32px;}
.block-freepage.area-gray:last-child{margin-bottom: 0;}
.block-freepage.area-gray .chart-area{max-width: 1280px;width: 100%;margin: 0 auto;padding: 0;box-sizing: border-box;}


.chart-title{margin: 16px 0 24px;font-size: 24px;font-weight: bold;line-height: 1.3;text-align: center;}
.chart-heading{margin: 20px 0 16px;padding: 0;border: none;font-weight: bold;line-height: 1.3;text-align: center;}
.chart-heading-point{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background-color: #808080;border-radius: 50%;margin: 0 auto 12px;font-size: 14px;color: #fff;}
.chart-heading p{margin: 0;font-size: 20px;}

.chart-text{margin-bottom: 32px;}
.chart-text p{margin-bottom: 10px;text-align: center;}
.chart-text strong{font-size: 105%;color: #ff0000;}
.chrat-text-note{font-size: 80% !important;}
.chart-link-area{display: flex;align-items: center;justify-content: center;gap: 8px;flex-direction: column;text-align: center;}
.chart-flex-box{border: 1px solid #000;border-radius: 4px;margin: 0 auto 20px;padding: 16px;}
.chart-flex-box:last-child{margin: 0;}
.chart-flex-box .chart-heading-sub{margin: 0 auto 20px;padding: 0 0 8px;border-bottom: 1px solid #000;font-size: 16px;text-align: center;}
.chart-flex-box.box-general{border: 1px solid #cc0033;}
.chart-flex-box.box-general .chart-heading-sub{border-bottom: 1px solid #cc0033;color: #cc0033;}
.chart-flex-box.box-business{border: 1px solid #0281D0;}
.chart-flex-box.box-business .chart-heading-sub{border-bottom: 1px solid #0281D0;color: #0281D0;}
.chart-link-list{margin: 0;padding: 0;list-style: none;}
.chart-link-list-item{display: flex;align-items: center;margin-bottom: 4px;}
.chart-link-list-item:last-child{margin-bottom: 0;}
.chart-link-list-item span{display: inline-block;margin-right: 4px;font-size: 65%;}
.chart-flex-box.chart-flex-box.box-general .chart-link-list-item span{color: #cc0033;}
.chart-flex-box.box-business .chart-link-list-item span{color: #0281D0;}
.chart-link-list-item a{display: flex; color: #081f2c;}
.chart-link-list-item a:hover{text-decoration: none;}

/* button ----------*/

.chart-button-area{display: flex;flex-direction: column;gap: 20px;margin-bottom: 32px;}
.chart-button-area.button-2col{max-width: 880px;margin-left: auto;margin-right: auto;}
.chart-button-area.button-1col{max-width: 480px;margin-left: auto;margin-right: auto;}
.chart-button{width: 100%;display: flex;}
.chart-button a{position: relative;background-color: #fff;display: flex;align-items: center;justify-content: center;width: 100%;min-height: 80px;padding: 8px 44px 8px 20px;border-radius: 8px;text-decoration: none;box-sizing: border-box;font-weight: bold;text-align: center;line-height: 1.5;transition: background-color 0.2s, color 0.2s;}
.chart-button-area.button-2col a,.chart-button-area.button-1col a{min-height: 64px;}
.chart-button a::after{content: "";position: absolute;top: 50%;right: 20px;width: 10px;height: 10px;border-top: 2px solid currentColor;border-right: 2px solid currentColor;transform: translateY(-50%) rotate(45deg);}
.chart-button.button-blue a{border: 2px solid #0499de;color: #0499de;}
.chart-button.button-orange a{border: 2px solid #ff7f00;color: #ff7f00;}
.chart-button.button-green a{border: 2px solid #00a300;color: #00a300;}
.chart-button.button-general a{border: 2px solid #cc0033;color: #cc0033;}
.chart-button.button-business a{border: 2px solid #0281D0;color: #0281D0;}
.chart-button.button-shop a{border: 2px solid #272727;color: #272727;}
.chart-button.button-blue a:hover{background-color: #0499de;color: #fff;}
.chart-button.button-orange a:hover{background-color: #ff7f00;color: #fff;}
.chart-button.button-green a:hover{background-color: #00a300;color: #fff;}
.chart-button.button-general a:hover{background-color: #cc0033;color: #fff;}
.chart-button.button-business a:hover{background-color: #0281D0;color: #fff;}
.chart-button.button-shop a:hover{background-color: #272727;color: #fff;}

/* help ----------*/

.chart-heading.heading-passkey{margin-bottom: 32px;}
.chart-heading.heading-passkey .chart-heading-point{display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;background-color: #808080;border-radius: 50%;margin: 0 auto 8px;font-size: 16px;color: #fff;}
.chart-heading.heading-passkey p{margin: 0;font-size: 16px;}
.chart-list-step{margin: 0 auto;padding: 0;list-style: none;text-align: center;}
.chart-list-step-item{margin: 0 auto 16px;padding: 0;}
.chart-list-step-item:last-child{margin: 0 auto 32px;}
.chart-list-step-item p{margin: 0;padding: 0;}
.chart-list{margin: 0 auto 32px;padding: 0;list-style: none;text-align: center;}
.chart-list-item{margin-bottom: 8px;}
.chart-list-item;:last-child{margin-bottom: 0;}
.chart-list-item p{margin: 0;padding: 0;}
.chart-image{max-width: 556px;background-color: #fff;border: 1px solid #E9E9E9;padding: 20px;margin: 16px auto 32px; text-align: center;}

/* indention ----------*/

.br-pc{display: none;}

@media screen and (min-width: 768px){
    .block-freepage.area-gray{margin-bottom: 40px;}
    .area-gray .chart-area{padding: 0 clamp(14px, 3.5vw, 40px);}
    .chart-content-area{margin-bottom: 40px;padding: 1px;}

    .chart-title{margin: 40px 0 60px; font-size: 36px;}
    .chart-heading{margin: 40px 0;font-size: 28px;font-weight: bold;line-height: 1.3;text-align: center;}
    .chart-heading-point{width: 45px;height: 45px;font-size: 18px;}
    .chart-heading p{margin: 0;font-size: 28px;}

    .chart-link-area{flex-direction: row;}
    .chart-link-area{gap: 40px;}
    .chart-flex-area{display: flex;justify-content: center;gap: 20px;max-width: 880px;margin: 0 auto;}
    .chart-flex-box{flex: 1;margin: 0;padding: 20px 24px;}
    .chart-flex-box .chart-heading-sub{font-size: 18px;}

    .chart-button-area{flex-direction: row;align-items: stretch;}
    .chart-button{flex: 1;}

    .chart-heading.heading-passkey p{margin: 0;font-size: 18px;}
    .chart-heading.heading-passkey .chart-heading-point{width: 35px;height: 35px;font-size: 18px;}
    
    .br-pc{display: inline;}
}