@charset "UTF-8";

:root {
	--color-main-01: #fff;
	--color-main-02: #f7f7f7;
	--color-main-03: #F4EAE5;
	--color-main-04: #9E7561;
	--color-main-05: #6A4533;
	--color-main-06: #543B2F;
	--color-main-07: #343434;
	--color-sub-01: #24252A;
	--color-point-01: #1462E0;
	--color-point-02: #f7f7f7;
	--color-point-03: #03C75A;
	--color-point-04: #EDF4FF;
	--color-point-05: #C9D6EA;
	--color-point-06: #E8D9D2;
	--color-point-07: #F0C448;
	--color-point-08: #e1e1e1;
	--color-line: #e1e1e1;
	--color-black: #191A18;
	--color-green: #4C9105;
	--color-orange: #FF7600;
	--color-blue: #2568C3;
	--color-kw-01: #D3E6FF;
	--color-kw-02: #D7F4BA;
	--color-kw-03: #FFE9D6;
	--color-kw-04: #CCD8FA;
	--color-kw-05: #F2DFFD;
	--color-kw-06: #FDF6D5;
	--font-size-sss: 11px;
	--font-size-ss: 12px;
	--font-size-s: 13px;
	--font-size-m: 14px;
	--font-size-l: 15px;
	--font-size-ll: 18px;
	--font-size-lll: 24px;
	--font-size-bs: 42px;
	--font-size-b: 56px;
	--font-family-l: GongGothicL;
	--font-family-m: GongGothicM;
	--font-family-b: GongGothicB;
}

/*================================================================================
* Icon
=================================================================================*/
.icon { position: relative; display: flex; }
.icon.icon-star { width: 14px; height: 14px; background: url("../img/icon-star.svg") no-repeat; }


/*=================================================================================
* flex
=================================================================================*/
.flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-flex-start { justify-content: flex-start; }
.justify-flex-end { justify-content: flex-end; }
.space-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.flex-column { flex-direction: column; }

/*=================================================================================
* color
=================================================================================*/
.color-04 { color: var(--color-main-04); }
.color-05 { color: var(--color-main-05); }
.color-06 { color: var(--color-main-06); }
.color-07 { color: var(--color-main-07); }
.color-point-01 { color: var(--color-point-01); }
.color-green { color: #4C9105; }
.color-blue { color: #2568C3; }
.keyword span { padding: 5px 15px; border-radius: 3px; margin-bottom: 10px; }
.bg-01 { background-color: var(--color-point-01); color: var(--color-main-01); }
.bg-02 { background-color: var(--color-point-03); color: var(--color-main-01); }

/*=================================================================================
* font
=================================================================================*/
.fs-s { font-size: var(--font-size-s); }

/*=================================================================================
* box
=================================================================================*/
.box-shadow { background-color: var(--color-main-01); box-shadow: 0 10px 20px rgba(60, 42, 34, 0.16); border-radius: 20px; }
.box-bg-01 { background-color: var(--color-main-05); padding: 7px; color: var(--color-main-01); border-radius: 20px; text-align: center; }
.box-bg-02 {  background-color: var(--color-main-04); padding: 7px; color: var(--color-main-01); border-radius: 20px; text-align: center; }
.box-bg-03 {  background-color: var(--color-main-03); padding: 7px; color: var(--color-main-01); border-radius: 20px; text-align: center; }
.box-bg-04 {  background-color: var(--color-main-02); padding: 7px; border-radius: 20px; }
.box-line { border: solid 1px var(--color-line); border-radius: 3px; padding: 20px; }
.box-col-2 > div, .box-col-2 > li, .box-col-2 > dd { width: 47%; }
.box-col-3 > div, .box-col-3 > li, .box-col-3 > dd { width: 30%; }
.box-col-4 > div, .box-col-4 > li, .box-col-4 > dd { width: 22%; }
.box-col-5 > div, .box-col-5 > li, .box-col-5 > dd { width: 17%; }

/*=================================================================================
* padding
=================================================================================*/
.p-0 { padding: 0!important; }
.p-10 { padding: 10px!important; }
.p-20 { padding: 20px!important; }
.p-30 { padding: 30px!important; }
.p-40 { padding: 40px!important; }
.p-50 { padding: 50px!important; }
.pt-10 { padding-top: 10px!important; }
.pt-20 { padding-top: 20px!important; }
.pt-30 { padding-top: 30px!important; }
.pt-40 { padding-top: 40px!important; }
.pt-50 { padding-top: 50px!important; }
.pr-10 { padding-right: 10px!important; }
.pr-20 { padding-right: 20px!important; }
.pr-30 { padding-right: 30!important; }
.pr-40 { padding-right: 40px!important; }
.pr-50 { padding-right: 50px!important; }
.pb-10 { padding-bottom: 10px!important; }
.pb-20 { padding-bottom: 20px!important; }
.pb-30 { padding-bottom: 30px!important; }
.pb-40 { padding-bottom: 40px!important; }
.pb-50 { padding-bottom: 50px!important; }
.pl-10 { padding-left: 10px!important; }
.pl-20 { padding-left: 20px!important; }
.pl-30 { padding-left: 30px!important; }
.pl-40 { padding-left: 40px!important; }
.pl-50 { padding-left: 50px!important; }

/*=================================================================================
* margin
=================================================================================*/
.m-0 { margin: 0!important; }
.m-5 { margin: 5px!important; }
.m-10 { margin: 10px!important; }
.m-20 { margin: 20px!important; }
.m-30 { margin: 30px!important; }
.m-40 { margin: 40px!important; }
.m-50 { margin: 50px!important; }
.mt-5 { margin-top: 5px!important; }
.mt-10 { margin-top: 10px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-40 { margin-top: 40px!important; }
.mt-50 { margin-top: 50px!important; }
.mr-5 { margin-right: 5px!important; }
.mr-10 { margin-right: 10px!important; }
.mr-20 { margin-right: 20px!important; }
.mr-30 { margin-right: 30px!important; }
.mr-40 { margin-right: 40px!important; }
.mr-50 { margin-right: 50px!important; }
.mb-5 { margin-bottom: 5px!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-30 { margin-bottom: 30px!important; }
.mb-40 { margin-bottom: 40px!important; }
.mb-50 { margin-bottom: 50px!important; }
.ml-5 { margin-left: 5px!important; }
.ml-10 { margin-left: 10px!important; }
.ml-20 { margin-left: 20px!important; }
.ml-30 { margin-left: 30px!important; }
.ml-40 { margin-left: 40px!important; }
.ml-50 { margin-left: 50px!important; }

/*=================================================================================
* width
=================================================================================*/
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

/*=================================================================================
* align
=================================================================================*/
.text-center { text-align: center!important; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }

/*=================================================================================
* button
=================================================================================*/
.btn { display: flex; justify-content: center; align-items: center; padding: 5px 10px; border-radius: 3px; font-size: var(--font-size-ss); }
.btn.middle { padding: 7px 17px; font-size: var(--font-size-m); }
.btn.large { padding: 10px 25px; font-size: var(--font-size-l); }