@charset "UTF-8";

.cam-container{max-width: 100%;}

.block-freepage.area-gray{max-width: 100%;background-color: #f5f5f5;padding: 1px 20px;margin-bottom: 40px;}

.chart-title{margin-bottom: 16px;font-size: 24px;font-weight: bold;line-height: 1.3;text-align: center;}
.chart-content-area{margin-bottom: 40px;}
.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%;}
.chart-link-area{display: flex;align-items: center;justify-content: center;gap: 8px;flex-direction: column;text-align: center;}

/* 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;}

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

.br-pc{display: none;}

@media screen and (min-width: 960px){
    .chart-title{margin-bottom: 40px; font-size: 36px;}
    .chart-button-area{flex-direction: row;align-items: stretch;}
    .chart-button{flex: 1;}
    .chart-link-area{flex-direction: row;}
    .chart-link-area{gap: 40px;}

    .br-pc{display: inline;}
}