/* =========================================================
ボタンなど共通デザインのパーツ用のcss(PC)
========================================================= */
/* 色*/
:root {
    --color-caramel: #CA925A;
    --color-turquoise: #2DA9BF;
    --color-cray: #C4BCB3;
    --color-Caramel70: #905F2D;
    --color-Caramel60: #B47D45;
    --color-Caramel50: #CA925A;
    --color-Caramel40: #DFB182;
    --color-Caramel30: #ECD4BA;
    --color-Caramel20: #F8ECE0;
    --color-Caramel10: #FEF8F2;
    --color-turquoise70: #1A6A79;
    --color-turquoise60: #278A9C;
    --color-turquoise50: #2DA9BF;
    --color-turquoise40: #59C9DD;
    --color-turquoise30: #94E1EE;
    --color-turquoise20: #BFEDF5;
    --color-turquoise10: #E9F7FA;
    --color-black100: rgba(0,0,0,1);
    --color-black90: rgba(0,0,0,.88);
    --color-black80: rgba(0,0,0,.80);
    --color-black70: rgba(0,0,0,.72);
    --color-black60: rgba(0,0,0,.64);
    --color-black50: rgba(0,0,0,.40);
    --color-black40: rgba(0,0,0,.24);
    --color-black30: rgba(0,0,0,.12);
    --color-black20: rgba(0,0,0,.06);
    --color-black10: rgba(0,0,0,.03);
    --color-white100: rgba(255,255,255,1);
    --color-white90: rgba(255,255,255,.92);
    --color-white80: rgba(255,255,255,.84);
    --color-white70: rgba(255,255,255,.72);
    --color-white60: rgba(255,255,255,.64);
    --color-white50: rgba(255,255,255,.56);
    --color-white40: rgba(255,255,255,.40);
    --color-white30: rgba(255,255,255,.24);
    --color-white20: rgba(255,255,255,.12);
    --color-white10: rgba(255,255,255,.6);
    --color-error100: rgba(199,34,34,1);
    --color-error90: rgba(199,34,34,.92);
    --color-error20: rgba(199,34,34,.24);
    --color-error10: rgba(199,34,34,.12);
}
/*font*/
:root {
    --grab-txt1-size: 72px;
    --grab-txt2-size: 56px;
    --grab-txt3-size: 40px;
    --heading-txt1-size: 24px;
    --heading-txt2-size: 22px;
    --heading-txt3-size: 18px;
    --subheading-txt-size: 16px;
    --main-txtL-size: 16px;
    --main-txtM-size: 14px;
    --label-txtL-size: 14px;
    --label-txtM-size: 12px;
    --caption-txtL-size: 12px;
    --caption-txtM-size: 10px;
    --btn-txtL-size: 16px;
    --btn-txtM-size: 14px;
    --btn-txtS-size: 12px;
    --grab-txt1-weight: 500;
    --grab-txt2-weight: 500;
    --grab-txt3-weight: 500;
    --heading-txt1-weight: 500;
    --heading-txt2-weight: 500;
    --heading-txt3-weight: 500;
    --subheading-txt-weight: 500;
    --main-txt-weight: 400;
    --label-txt-weight: 500;
    --caption-txt-weight: 400;
    --btn-txt-weight: 500;
    --grab-txt1-height: 1.4;
    --grab-txt2-height: 1.4;
    --grab-txt3-height: 1.4;
    --heading-txt1-height: 1.5;
    --heading-txt2-height: 1.5;
    --heading-txt3-height: 1.5;
    --subheading-txt-height: 1.5;
    --main-txt-height: 1.7;
    --label-txt-height: 1.5;
    --caption-txt-height: 1.7;
    --btn-txt-height: 1.5;
    --grab-txt1-spacing: 0.08em;
    --grab-txt2-spacing: 0.08em;
    --grab-txt3-spacing: 0.08em;
    --heading-txt1-spacing: 0.04em;
    --heading-txt2-spacing: 0.04em;
    --heading-txt3-spacing: 0.04em;
    --subheading-txt-spacing: 0.04em;
    --main-txt-spacing: 0.04em;
    --label-txt-spacing: 0.04em;
    --caption-txt-spacing: 0.02em;
    --btn-txt-spacing: 0.04em;
}

 /*角丸*/
:root {
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-sm: 12px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;
    --radius-100: 100px;
}

:root{
    --viewportwidth:980px;
}

/* =========================================================
茶系のボタン
========================================================= */
.btn_contained, .btn_contained.focus {
    background-color: var(--color-Caramel50);
    color: var(--color-Caramel10);
    border-radius: var(--radius-100);
    border-color: transparent;
}
.btn_contained:hover {
    background-color: var(--color-Caramel60);
    color: var(--color-Caramel10);
}
.btn_contained.active {
    background-color: var(--color-Caramel70);
    color: var(--color-Caramel10);
}
.btn_contained.disable, .btn_outlined.disable {
    background-color: var(--color-black20);
    color: var(--color-black30);
    pointer-events: none;
}
.btn_contained .gicon,.btn_contained:hover .gicon, .btn_contained.active .gicon, .btn_contained.focus .gicon {
    color: var(--color-Caramel10);
}
.btn_contained.disable .gicon, .btn_outlined.disable .gicon {
    color: var(--color-black30);
}
.btn_contained a, .btn_contained.focus a, .btn_contained:hover a, .btn_contained.active a {
    color: var(--color-Caramel10);
}
.btn_contained.disable a {
    color: var(--color-black30);
}
/* =========================================================
外枠のボタン
========================================================= */
.btn_outlined {
    background-color: var(--color-white100);
    color: var(--color-turquoise50);
    border: solid 1px var(--color-black30);
    border-radius: var(--radius-100);
}
.btn_outlined:hover {
    background: linear-gradient(var(--color-black10), var(--color-black10)), #FFFFFF;
    color: var(--color-turquoise50);
    border: solid 1px var(--color-black30);
}
.btn_outlined.active {
    background-color: var(--color-black20);
    color: var(--color-turquoise50);
    border: solid 1px var(--color-black30);
}
.btn_outlined.focus {
    background-color: var(--color-white100);
    color: var(--color-turquoise50);
    border: solid 1px var(--color-turquoise50);
}
.btn_outlined a, .btn_outlined:hover a, .btn_outlined.active a,.btn_outlined.focus a {
    color: var(--color-turquoise50);
} 
/* =========================================================
縁なし青系文字
========================================================= */
.btn_cleared {
    color: var(--color-turquoise40);
    border-color: transparent;
}
.btn_cleared:hover,.btn_cleared.focus {
    color: var(--color-turquoise50);
}
.btn_cleared.active {
    color: var(--color-turquoise60);
}
.btn_cleared.disable {
    color: var(--color-black30);
}
/* =========================================================
ボタンサイズ
========================================================= */
.btn_large {
    height: 48px;
    font-size: var(--btn-txtL-size);
}
.btn_medium {
    height: 40px;
    font-size: var(--btn-txtM-size);
}
.btn_small {
    height: 36px;
    font-size: var(--btn-txtS-size);
}
.btn_large, .btn_medium, .btn_small {
    font-weight: var(--btn-txt-weight);
    line-height: var(--btn-txt-height);
    letter-spacing: var(--btn-txt-spacing);
    padding: 0 24px;
    box-sizing: border-box;
}

/* =========================================================
テキストボックス
========================================================= */
.txtbox_base {
    padding: 8px 16px;
    height: 40px;
    color: var(--color-black100);
    background-color: var(--color-black10);
    border-radius: 16px;
}
.txtbox_base::placeholder {
    color: var(--color-black40);
}
.txtbox_base:hover {
    background-color: var(--color-black20);
}
.txtbox_base:focus {
    background-color: var(--color-white100);
    border: 1px solid var(--color-black60);
    caret-color: var(--color-turquoise50);
}
/* =========================================================
ドロップダウン
========================================================= */
.ddl_base_wrp {
    position: relative;
}
.ddl_base_wrp::after {
    content: "arrow_drop_down";
    font-family: 'Material Symbols Outlined';
    color: var(--color-black40);
    font-size: 24px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ddl_base {
    padding: 8px 40px 8px 16px;
    color: var(--color-black100);
    background-color: var(--color-black10);
    border-radius: 16px;
    width: 100%;
}
/* =========================================================
ラジオボタン
========================================================= */
.rb_base {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-white100);
    border: solid 1px var(--color-black40);
    position: relative;
    cursor: pointer;
}
.rb_base:checked {
    border: solid 1px var(--color-turquoise50);
}
.rb_base:checked::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-turquoise50);
    top: 3px;
    left: 3px;
}
.rb_base_lbl {
    color: var(--color-black60);
}
/* =========================================================
チェックボックス
========================================================= */
.chk_base {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: var(--color-white100);
    border: solid 1px var(--color-black40);
    position: relative;
    flex-shrink: 0;
}
.chk_base:checked {
    border: solid 1px var(--color-turquoise50);
    background-color: var(--color-turquoise50);
}
.chk_base:checked::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 5px;
    transform: rotate(50deg);
    width: 8px;
    height: 14px;
    border-right: 3px solid var(--color-white100);
    border-bottom: 3px solid var(--color-white100);
    border-radius: 2px;
}
.chk_base_lbl {
    color: var(--color-black60);
}



/* =========================================================
テキスト(文字サイズ等)
========================================================= */
.DesktopJaCatch1 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--grab-txt1-size);
    line-height: var(--grab-txt1-height);
    font-weight: var(--grab-txt1-weight);
    letter-spacing: var(--grab-txt1-spacing);
}

.DesktopJaCatch2 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--grab-txt2-size);
    line-height: var(--grab-txt2-height);
    font-weight: var(--grab-txt2-weight);
    letter-spacing: var(--grab-txt2-spacing);
}

.DesktopJaCatch3 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--grab-txt3-size);
    line-height: var(--grab-txt3-height);
    font-weight: var(--grab-txt3-weight);
    letter-spacing: var(--grab-txt3-spacing);
}

.DesktopJaHeading1 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--heading-txt1-size);
    line-height: var(--heading-txt1-height);
    font-weight: var(--heading-txt1-weight);
    letter-spacing: var(--heading-txt1-spacing);
}

.DesktopJaHeading2 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--heading-txt2-size);
    line-height: var(--heading-txt2-height);
    font-weight: var(--heading-txt2-weight);
    letter-spacing: var(--heading-txt2-spacing);
}

.DesktopJaHeading3 {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--heading-txt3-size);
    line-height: var(--heading-txt3-height);
    font-weight: var(--heading-txt3-weight);
    letter-spacing: var(--heading-txt3-spacing);
}

.DesktopJaSubHeading {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--subheading-txt-size);
    line-height: var(--subheading-txt-height);
    font-weight: var(--subheading-txt-weight);
    letter-spacing: var(--subheading-txt-spacing);
}

.DesktopJaBodyL {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--main-txtL-size);
    line-height: var(--main-txt-height);
    font-weight: var(--main-txt-weight);
    letter-spacing: var(--main-txt-spacing);
}

.DesktopJaBodyM {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--main-txtM-size);
    line-height: var(--main-txt-height);
    font-weight: var(--main-txt-weight);
    letter-spacing: var(--main-txt-spacing);
}

.DesktopJaLabelL {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--label-txtL-size);
    line-height: var(--label-txt-height);
    font-weight: var(--label-txt-weight);
    letter-spacing: var(--label-txt-spacing);
}

.DesktopJaLabelM {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--label-txtM-size);
    line-height: var(--label-txt-height);
    font-weight: var(--label-txt-weight);
    letter-spacing: var(--label-txt-spacing);
}

.DesktopJaCaptionL {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--caption-txtL-size);
    line-height: var(--caption-txt-height);
    font-weight: var(--caption-txt-weight);
    letter-spacing: var(--caption-txt-spacing);
}

.DesktopJaCaptionM {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--caption-txtM-size);
    line-height: var(--caption-txt-height);
    font-weight: var(--caption-txt-weight);
    letter-spacing: var(--caption-txt-spacing);
}

.DesktopJaButtonL {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--btn-txtL-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}

.DesktopJaButtonM {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--btn-txtM-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}

.DesktopJaButtonS {
    font-family: "Noto Sans JP",sans-serif;
    font-size: var(--btn-txtS-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}


/* =========================================================
テキスト(文字サイズ等)
========================================================= */
.DesktopEnCatch1 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--grab-txt1-size);
    line-height: var(--grab-txt1-height);
    font-weight: var(--grab-txt1-weight);
    letter-spacing: var(--grab-txt1-spacing);
}

.DesktopEnCatch2 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--grab-txt2-size);
    line-height: var(--grab-txt2-height);
    font-weight: var(--grab-txt2-weight);
    letter-spacing: var(--grab-txt2-spacing);
}

.DesktopEnCatch3 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--grab-txt3-size);
    line-height: var(--grab-txt3-height);
    font-weight: var(--grab-txt3-weight);
    letter-spacing: var(--grab-txt3-spacing);
}

.DesktopEnHeading1 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--heading-txt1-size);
    line-height: var(--heading-txt1-height);
    font-weight: var(--heading-txt1-weight);
    letter-spacing: var(--heading-txt1-spacing);
}

.DesktopEnHeading2 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--heading-txt2-size);
    line-height: var(--heading-txt2-height);
    font-weight: var(--heading-txt2-weight);
    letter-spacing: var(--heading-txt2-spacing);
}

.DesktopEnHeading3 {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--heading-txt3-size);
    line-height: var(--heading-txt3-height);
    font-weight: var(--heading-txt3-weight);
    letter-spacing: var(--heading-txt3-spacing);
}

.DesktopEnSubHeading {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--subheading-txt-size);
    line-height: var(--subheading-txt-height);
    font-weight: var(--subheading-txt-weight);
    letter-spacing: var(--subheading-txt-spacing);
}

.DesktopEnBodyL {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--main-txtL-size);
    line-height: var(--main-txt-height);
    font-weight: var(--main-txt-weight);
    letter-spacing: var(--main-txt-spacing);
}

.DesktopEnBodyM {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--main-txtM-size);
    line-height: var(--main-txt-height);
    font-weight: var(--main-txt-weight);
    letter-spacing: var(--main-txt-spacing);
}

.DesktopEnLabelL {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--label-txtL-size);
    line-height: var(--label-txt-height);
    font-weight: var(--label-txt-weight);
    letter-spacing: var(--label-txt-spacing);
}

.DesktopEnLabelM {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--label-txtM-size);
    line-height: var(--label-txt-height);
    font-weight: var(--label-txt-weight);
    letter-spacing: var(--label-txt-spacing);
}

.DesktopEnCaptionL {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--caption-txtL-size);
    line-height: var(--caption-txt-height);
    font-weight: var(--caption-txt-weight);
    letter-spacing: var(--caption-txt-spacing);
}

.DesktopEnCaptionM {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--caption-txtM-size);
    line-height: var(--caption-txt-height);
    font-weight: var(--caption-txt-weight);
    letter-spacing: var(--caption-txt-spacing);
}

.DesktopEnButtonL {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--btn-txtL-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}

.DesktopEnButtonM {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--btn-txtM-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}

.DesktopEnButtonS {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: var(--btn-txtS-size);
    line-height: var(--btn-txt-height);
    font-weight: var(--btn-txt-weight);
    letter-spacing: var(--btn-txt-spacing);
}

.Black100F {color: var(--color-black100);}
.Black90F  {color: var(--color-black90);}
.Black80F  {color: var(--color-black80);}
.Black70F  {color: var(--color-black70);}
.Black60F  {color: var(--color-black60);}
.Black50F  {color: var(--color-black50);}
.Black40F  {color: var(--color-black40);}
.Black30F  {color: var(--color-black30);}
.Black20F  {color: var(--color-black20);}
.Black10F  {color: var(--color-black10);}

.White100F {color: var(--color-white100);}
.White90F  {color: var(--color-white90);}
.White80F  {color: var(--color-white80);}
.White70F  {color: var(--color-white70);}
.White60F  {color: var(--color-white60);}
.White50F  {color: var(--color-white50);}
.White40F  {color: var(--color-white40);}
.White30F  {color: var(--color-white30);}
.White20F  {color: var(--color-white20);}
.White10F  {color: var(--color-white10);}

.TurquoiseF    {color: var(--color-turquoise);}
.Turquoise70F  {color: var(--color-turquoise70);}
.Turquoise60F  {color: var(--color-turquoise60);}
.Turquoise50F  {color: var(--color-turquoise50);}
.Turquoise40F  {color: var(--color-turquoise40);}
.Turquoise30F  {color: var(--color-turquoise30);}
.Turquoise20F  {color: var(--color-turquoise20);}
.Turquoise10F  {color: var(--color-turquoise10);}

.CaramelF    {color: var(--color-caramel);}
.Caramel70F  {color: var(--color-Caramel70);}
.Caramel60F  {color: var(--color-Caramel60);}
.Caramel50F  {color: var(--color-Caramel50);}
.Caramel40F  {color: var(--color-Caramel40);}
.Caramel30F  {color: var(--color-Caramel30);}
.Caramel20F  {color: var(--color-Caramel20);}
.Caramel10F  {color: var(--color-Caramel10);}

.Error100F  {color: var(--color-error100);}
.Error90F   {color: var(--color-error90);}
.Error20F   {color: var(--color-error20);}
.Error10F   {color: var(--color-error10);}

.CrayF   {color: var(--color-cray);}

.Black100BK {background-color: var(--color-black100);}
.Black90BK {background-color: var(--color-black90);}
.Black80BK {background-color: var(--color-black80);}
.Black70BK {background-color: var(--color-black70);}
.Black60BK {background-color: var(--color-black60);}
.Black50BK {background-color: var(--color-black50);}
.Black40BK {background-color: var(--color-black40);}
.Black30BK {background-color: var(--color-black30);}
.Black20BK {background-color: var(--color-black20);}
.Black10BK {background-color: var(--color-black10);}

.White100BK {background-color: var(--color-white100);}
.White90BK {background-color: var(--color-white90);}
.White80BK {background-color: var(--color-white80);}
.White70BK {background-color: var(--color-white70);}
.White60BK {background-color: var(--color-white60);}
.White50BK {background-color: var(--color-white50);}
.White40BK {background-color: var(--color-white40);}
.White30BK {background-color: var(--color-white30);}
.White20BK {background-color: var(--color-white20);}
.White10BK {background-color: var(--color-white10);}

.Turquoise70BK {background-color: var(--color-turquoise70);}
.Turquoise60BK {background-color: var(--color-turquoise60);}
.Turquoise50BK {background-color: var(--color-turquoise50);}
.Turquoise40BK {background-color: var(--color-turquoise40);}
.Turquoise30BK {background-color: var(--color-turquoise30);}
.Turquoise20BK {background-color: var(--color-turquoise20);}
.Turquoise10BK {background-color: var(--color-turquoise10);}

.Caramel70BK {background-color: var(--color-Caramel70);}
.Caramel60BK {background-color: var(--color-Caramel60);}
.Caramel50BK {background-color: var(--color-Caramel50);}
.Caramel40BK {background-color: var(--color-Caramel40);}
.Caramel30BK {background-color: var(--color-Caramel30);}
.Caramel20BK {background-color: var(--color-Caramel20);}
.Caramel10BK {background-color: var(--color-Caramel10);}

.Error100BK {background-color: var(--color-error100);}
.Error90BK  {background-color: var(--color-error90);}
.Error20BK  {background-color: var(--color-error20);}
.Error10BK  {background-color: var(--color-error10);}

/* =========================================================
counter-style
========================================================= */
/* リストの中黒表現 list-style: middle-dot */
@counter-style middle-dot {
    system: cyclic;
    symbols: ・;
    suffix: " ";
    fallback: disc;
}