@charset "UTF-8";

.med_footer {background-color: #e1e2cf;}


/*---------------------------------------------------------
 notice
---------------------------------------------------------*/
#notice .com_box__bg {
    text-align: center;
    color: #fff;
    background: url(../images/firstly/notice-bg@2x.png) no-repeat left top;
    background-size: 50% auto;
    background-color: var(--color_dgrn);
}
#notice .com_box__bg .com_arw i::after {
    background-color: rgba(255,255,255,0.1);
}
/* todo_box */
#notice .todo_box {
    background-color: var(--color_grn);
    padding: 30px 4%;
    margin: 3% auto 2em;
}
#notice .todo_box dt {
    text-align: center;
    font-size: min(1.8vw,137%);
	font-weight: var(--fw_bold);
	line-height: 1.5;
	letter-spacing: .15em;
	margin-bottom: .6em;
}
#notice .todo_box ul {
    display: flex;
    column-gap: 4%;
}
#notice .todo_box ul > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    color: var(--color_base);
    font-size: min(1.8vw,137%);
    font-weight: var(--fw_bold);
    line-height: 1.3;
    background-color: #fff;
    padding: 1.2em 1%;
    border-radius: .85em;
}
#notice .todo_box ul > li:not(:last-of-type)::after {
    position: absolute;
    display: block;
    content: "";
    background-color: var(--color_dgrn);
    width: .7em;
    height: .76em;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    left: 107%;
    top: 50%;
    translate: -50% -50%;
}
#notice .todo_box ul > li small {
    display: block;
    font-size: 78%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#notice .com_box__bg {
    background-size: 80% auto;
}
/* todo_box */
#notice .todo_box {
    padding: 30px 4%;
    margin: 3% auto 2em;
}
#notice .todo_box dt {
    font-size: 105%;
	letter-spacing: .1em;
}
#notice .todo_box ul {
    display: flex;
    column-gap: 4%;
}
#notice .todo_box ul > li {
    font-size: 80%;
}
#notice .todo_box ul > li:not(:last-of-type)::after {
    width: .5em;
    height: .8em;
}
}


/*---------------------------------------------------------
 reservation
---------------------------------------------------------*/
#reservation .com_title2 {
    padding-bottom: .5em;
	border-bottom: 1px solid #e6e6e6;
}
#reservation .com_list {
    max-width: max-content;
    margin-inline: auto;
}
#reservation .com_list > li::before {
    background-color: rgba(0,148,102,0.3);
}
/* app_box */
#reservation .chk_list {
    display: flex;
    gap: 1em 3%;
    margin: 5% 0 1.5em;
}
#reservation .chk_list > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: min(1.7vw,112%);
    font-weight: var(--fw_bold);
    line-height: 1.3;
    background-color: #fff;
    padding: 1.2em 1.5em;
    border-radius: .85em;
}
#reservation .chk_list > li::before {
	position: absolute;
	font-family: 'fontello';
	content: '\e813';
    color: var(--color_mgrn);
    font-size: 135%;
	left: .5em;
	top: -0.6em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#reservation .com_box__s {
    width: 90%;
    max-width: 994px;
}
/* app_box */
#reservation .app_box {
    max-width: 942px;
    display: grid;
    justify-content: space-between;
    grid-template-columns: 25% 71%;
    margin-inline: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/* app_box */
#reservation .app_box .box_img {
    width: 50%;
    margin: 0 auto 5%;
}
#reservation .app_box .com_h__min {
    text-align: center;
}
#reservation .chk_list {
    column-gap: 2%;
    margin: 6% 0;
}
#reservation .chk_list > li {
    font-size: 82%;
    padding: 1.2em 3% 1em 4%;
}
}


/*---------------------------------------------------------
 process
---------------------------------------------------------*/
#process {
    position: relative;
    padding-top: min(15vw,215px);
}
#process .com_bg_color {
    background-color: #e1e2cf;
}
#process .com_bg_img_lg {
    opacity: 0.6;
	-webkit-mask-image: linear-gradient(to top, transparent 30%, black 70%);
	mask-image: linear-gradient(to top, transparent 30%, black 70%);
}
#process .com_bg_img_lg::after {
    position: absolute;
    content: "";
    background: linear-gradient(to bottom, rgba(81,68,29,0.3), rgba(81,68,29,0));
    width: 100%;
    height: 340px;
    left: 0;
    top: 0;
}
#process .com_title1 .ft_eng {
    color: #FFF;
}
.flow_box {
	position: relative;
	padding: min(6.5%,90px) 3.8%;
	margin-inline: auto;
}
.flow_box > .com_ccl_txt {
    position: absolute;
    font: var(--font_min);
    color: #FFF;
    font-size: min(3vw,237%);
    width: min(6em);
    height: min(6em);
    left: -0.3em;
    top: -0.5em;
    z-index: 1;
}
.flow_wrap {
	counter-reset: flowCounter;
}
/* flow_list */
.flow_list {
    list-style: none;
    max-width: 1250px;
    margin-inline: auto;
}
.flow_list > li {
    position: relative;
    background-color: #fff;
    padding: min(5.6%,70px) 6%;
}
.flow_list > li:not(:last-of-type) {
    margin-bottom: 35px;
}
.flow_list > li::after {
    position: absolute;
    display: block;
    content: "";
    background-color: var(--color_base);
    width: 48px;
    height: 35px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 50%;
    top: 100%;
    translate: -50% 0;
}
#process .flow_box:last-child .flow_list > li:last-child:after {
    display: none;
}
.flow_index {
    display: flex;
    margin-bottom: 5%;
}
.flow_index .com_h__min {
    margin-bottom: 0;
}
.flow_no {
    position: relative;
	counter-increment: flowCounter;
    width: 3.2em;
    text-align: center;
	font: var(--font_eng);
	font-size: min(5vw,372%);
	letter-spacing: .1em;
	font-feature-settings: "halt";
    background: url(../images/common/draw-line.svg) no-repeat center bottom;
	background-size: contain;
    padding-bottom: .4em;
    margin-left: -1.2em;
    margin-right: 6%;
}
.flow_no::before {
	content: counter(flowCounter, decimal-leading-zero);
}
.flow_list .com_flt .txt_r .red {
    font-weight: var(--fw_bold);
}

#process-1st {background-color: rgba(161,145,43,0.2);}
#process-1st .com_ccl_txt {background-color: var(--color_och);}
#process-2nd {background-color: rgba(101,148,0,0.3);}
#process-2nd .com_ccl_txt {background-color: var(--color_mgrn);}
#process-4th {background-color: rgba(0,148,102,0.2);}
#process-4th .com_ccl_txt {background-color: var(--color_grn);}
#process-last {background-color: rgba(0,91,63,0.2);}
#process-last .com_ccl_txt {background-color: var(--color_dgrn);}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.flow_list .com_flt .img_l {
    width: 34.5%;
    max-width: 377px;
}
.flow_list .com_flt .txt_r {
    width: 61%;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.flow_index {
    margin-bottom: 3%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#process .com_bg_img_lg {
	-webkit-mask-image: linear-gradient(to top, transparent 10%, black 70%);
	mask-image: linear-gradient(to top, transparent 10%, black 70%);
}
.flow_box {
	padding: 12% 5%;
}
.flow_box > .com_ccl_txt {
    font-size: 100%;
}
/* flow_list */
.flow_list > li {
    padding: 10% 6%;
}
.flow_list > li:not(:last-of-type) {
    margin-bottom: 20px;
}
.flow_list > li::after {
    height: 20px;
}
.flow_index {
    margin-bottom: 4%;
}
.flow_index .com_h__min {
    font-size: 130%;
}
.flow_no {
	font-size: 8vw;
    margin-left: -1em;
}
}

/*flow: flow_col2
---------------------------------------------------------*/
.flow_col2 {
    position: relative;
}
.flow_col2 dt {
    margin-bottom: .4em;
}
.flow_col2 .box_img {
    width: 80%;
    max-width: 340px;
    margin: 0 auto 4%;
}
.flow_col2 .icon {
    position: relative;
    width: 5%;
    max-width: 53px;
    padding: 0;
    margin: auto;
    aspect-ratio: 1;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.flow_col2 {
    display: grid;
    grid-template-columns: 50% 1fr;
}
.flow_col2 > * {
    padding: 0 6%;
}
.flow_col2 > *:first-child {
    border-right: 1px solid #e6e6e6;
}
.flow_col2 dt {
    font-size: min(1.9vw,156%);
}
.flow_col2 .icon {
    position: absolute;
    inset: 0;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.flow_col2 > *:first-child {
    padding-left: 0;
}
.flow_col2 > *:last-child {
    padding-left: 9%;
    padding-right: 0;
}
.flow_col2 dt {
    font-size: 2vw;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.flow_col2 > *:first-child {
    padding-bottom: 10%;
    border-bottom: 1px solid #e6e6e6;
}
.flow_col2 .icon {
    width: 10%;
    translate: 0 -50%;
    margin-bottom: 2%;
}
.flow_col2 dt {
    font-size: 105%;
}
}

/*flow: trt_list
---------------------------------------------------------*/
.flow_list .trt_list > li {
	display: grid;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 0;
    grid-template-columns: 44% 52%;
}
.flow_list .trt_list .img {
    position: relative;
    max-width: 150px;
}
.flow_list .trt_list .img .com_ccl_txt {
    position: absolute;
    font: var(--font_min);
    color: #FFF;
    font-size: min(1.5vw,112%);
    width: min(3.6em);
    height: min(3.6em);
    left: -16%;
    top: -8%;
}
.flow_list .trt_list dt {
    font-size: min(1.8vw,156%);
    line-height: 1.3;
    margin-bottom: .4em;
}
.flow_list .trt_list dt > small {
    font-size: 72%;
}
.flow_list .trt_list dd {
    line-height: 1.7;
}

/* arw_list */
.flow_list .trt_list.arw_list > li::after {
	display: block;
    grid-column: 1/3;
    content: "";
    background-color: var(--color_mgrn);
    width: 2em;
    height: 1.5em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin: 1.5em auto;
}
.flow_list .trt_list.arw_list > li:last-of-type::after {
    display: none;
}
.flow_list .trt_list.arw_list dl {
    align-self: center;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.flow_list .trt_list.col__3 {
	display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(3,31.3%);
    row-gap: 2em;
}

/* arw_list */
.flow_list .trt_list.arw_list > li {
	grid-template-columns: 32% 63%
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.flow_list .trt_list.col__3 > li {
	display: block;
}
.flow_list .trt_list.col__3 .img {
    width: 60%;
    margin: 0 auto 5%;
}
.flow_list .trt_list.col__3 .com_h__min {
    text-align: center;
}

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.flow_list .trt_list > li {
    grid-template-columns: 40% 54%;
}
.flow_list .trt_list > li:nth-of-type(n+2) {
    margin-top: 8%;
}
.flow_list .trt_list .img .com_ccl_txt {
    font-size: 3vw;
    width: min(3.6em);
    height: min(3.6em);
    left: -16%;
    top: -8%;
}
.flow_list .trt_list dt {
    font-size: 110%;
    margin-bottom: .5em;
}
.flow_list .trt_list dd {
    font-size: 85%;
    line-height: 1.5;
}

/* arw_list */
.flow_list .trt_list.arw_list > li {
	grid-template-columns: 30% 65%
}
.flow_list .trt_list.arw_list > li:nth-of-type(n+2) {
    margin-top: 0;
}
.flow_list .trt_list.arw_list > li::after {
    width: 1.6em;
    height: 1em;
    margin: 1em auto;
}
}

/*flow: flow_sub_box
---------------------------------------------------------*/
.flow_sub_box {
	position: relative;
    background-color: #e1e2cf;
	padding: 35px 5.4%;
    margin-top: 3.6%;
}
.flow_sub_box .com_flt .img_r {
	max-width: 290px;
}
.flow_sub_box .bdr_b_s {
	border-color: #FFF;
}
/* mer_list */
.flow_sub_box .mer_list > li {
	display: grid;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 0;
    grid-template-columns: 23.5% 72.6%;
}
.flow_sub_box .mer_list .index {
    position: relative;
    color: var(--color_och);
    font-size: min(1.6vw,118%);
    font-weight: var(--fw_bold);
    line-height: 1.5;
    padding-left: 1.2em;
    margin-bottom: .4em;
}
.flow_sub_box .mer_list .index::before {
    position: absolute;
    content: "";
	background-color: currentColor;
	width: .66em;
	height: .66em;
	border-radius: 50%;
    left: 0;
	top: .4em;
}
.flow_sub_box .mer_list .fs__15 {
    line-height: 1.7;
}
/* iop */
#iop {
    padding-top: 6%;
}
#iop .com_h__min {
    text-align: center;
}
#iop .lead_box .com_h__min::before {
    position: absolute;
    content: "";
    background: url(../images/firstly/icon-camera.svg) no-repeat;
    background-size: contain;
    width: 3.6em;
    height: 2.8em;
    top: 0;
    left: 45%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
/* mer_list */
.flow_sub_box .mer_list {
	display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(2,48%);
    row-gap: 2em;
}
.flow_sub_box .mer_list > li {
    grid-template-rows: subgrid;
    grid-row: span 2;
}
.flow_sub_box .mer_list .img {
    grid-column: 1/2;
    grid-row: 1/3;
}
.flow_sub_box .mer_list .index {
    grid-column: 2/3;
    grid-row: 1/2;
}
.flow_sub_box .mer_list .fs__15 {
    grid-column: 2/3;
    grid-row: 2/3;
}
/* iop */
#iop .lead_box {
    display: grid;
    grid-template-columns: 40% 56%;
    justify-content: space-between;
    gap: 0;
}
#iop .lead_box .box_img {
    grid-row: 1/4;
    grid-column: 1/2;
}
#iop .lead_box .com_h__min {
    grid-row: 1/2;
    grid-column: 2/3;
    text-align: left;
}
#iop .lead_box p {
    grid-row: 2/3;
    grid-column: 2/3;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.flow_sub_box {
    width: 106%;
	padding: 10% 6%;
    margin-top: 8%;
    margin-left: -3%;
}
.flow_sub_box .icon {
    width: 20%;
    top: 1em;
}
/* mer_list */
.flow_sub_box .mer_list > li {
    row-gap: .8em;
    margin-top: 7%;
}
.flow_sub_box .mer_list .img {
    grid-column: 1/2;
    grid-row: 1/2;
}
.flow_sub_box .mer_list .index {
    align-self: center;
    font-size: 105%;
    grid-column: 2/3;
    grid-row: 1/2;
    margin-bottom: 0;
}
.flow_sub_box .mer_list .fs__15 {
    grid-column: 1/3;
    grid-row: 2/3;
}
/* iop */
#iop {
    padding-top: 12%;
}
#iop .lead_box .com_h__min::before {
    top: -0.6em;
    left: 70%;
}
#iop .lead_box .box_img {
   margin-bottom: 6%;
}
}


/*---------------------------------------------------------

---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}