:root{
    /* color */
    --layer-color: rgba(0, 0, 0, 0.02);
    --white-color: #fff;
    --primary-color: #a6764f;
    --secondary-color: #e26762;
    --black-color: #333;
    --darkgray-color: #666;
    --gray-color: #8f8f8f;
    --lightgray-color:#adadad; 
    --palewhite-color: #f4f4f4;
    --palegray-color: #efefef;
    --disable-color: #ddd;
    --primaryhighlight-color: #C57E3F;
    --secondaryhighlight-color: #ff6c58;
    --error-color: #c65651;
    --calendarsut-color: #4f82b1;
    --calendarsun-color: #c65651;
    --highlight-color: #a6764f;
    --pluspoint-color: var(--highlight-color);
    --minuspoint-color: #c65651;
    /* font-size */
    --title--XXL: 3.2rem;
    --title--XL: 2.8rem;
    --title--L: 2.4rem;
    --title--M: 2rem;
    --title--S: 1.6rem;
    --title--XS: 1.4rem;
    --title--XXS: 1.2rem;
    --text--L: 2rem;
    --text--M: 1.6rem;
    --text--S: 1.4rem;
    --text--XS: 1.2rem;
    --text--XXS: 1.0rem;
    --note-M: 1.6rem;
    --note-S: 1.4rem;
    --note-XS: 1.2rem;
    --icon-size: var(--text--L);
    /* line-height */
    --linespacing: 132%;
    --note-linespacing: 160%;
    /* margin */
    --verticalcon-margin: 20px 0 0;
    --horizontalcon-margin: 0 0 0 10px;
    --note-margin: 12px 0 0;
    --notetop-margin: 20px 0 0;
    /* padding */
    --contents-padding: 20px;
    --contentstop-padding: 24px 20px 20px;
    --button-padding: 13px 12px;
    --box-padding: 13px 12px;
    --card-padding: 20px;
    /* border-radius */
    --button-borderradius: 8px;
    --form-borderradius: 8px;
    --box-borderradius: 12px;
}

html, body{
    font-size: 62.5%;
    background-color: #fff;
    line-height: 132%;
}
main{
    background-color: var(--layer-color);
}
img{
    vertical-align: bottom;
}
a:hover{
    cursor: pointer;
    opacity: 1;
}

/*-------------------*/
/*----- テキスト -----*/
/*-------------------*/
[class^="title--"],
[class^="button--"]{
    font-weight: bold;
    line-height: var(--linespacing);
}
.title--XXL{
    font-size: var(--title--XXL);
}
.title--XL{
    font-size: var(--title--XL);
}
.title--L{
    font-size: var(--title--L);
}
.title--M{
    font-size: var(--title--M);
}
.title--S{
    font-size: var(--title--S);
}
.title--XS{
    font-size: var(--title--XS);
}
.title--XXS{
    font-size: var(--title--XXS);
}
[class^="text--"]{
    color: var(--gray-color);
    font-weight: normal;
    line-height: var(--linespacing);
}
.text--L{
    font-size: var(--text--L);
}
.text--M{
    font-size: var(--text--M);
}
.text--S{
    font-size: var(--text--S);
}
.text--XS{
    font-size: var(--text--XS);
}
.text--XXS{
    font-size: var(--text--XXS);
}
.plus-point{
    color: var(--pluspoint-color);
}
.minus-point{
    color: var(--minuspoint-color);
}
/* note */
[class*="note--"]{
    color: var(--gray-color);
    line-height: var(--note-linespacing);
}
.note--M{
    font-size: var(--note-M);
}
.note--S{
    font-size: var(--note-S);
}
.note--XS{
    font-size: var(--note-XS);
}
/* キャプション */
.text--caption{
    color: var(--lightgray-color);
}
/* エラー・注意喚起テキスト */
.text--error{
    color: var(--error-color);
    font-size: var(--text--XS);
    margin: 10px 0 0;
}
.text--attention{
    color: var(--error-color);
}
/* icon */
[class*="icon-"]::before{
    font-size: var(--icon-size);
    font-weight: bold;
}
p[class*="icon-"]{
    display: flex;
    align-items: center;
}