@charset "utf-8";

/*========================

entry.css

========================*/

#main #main_cont .section#form_table .step {
 display:none;
}

#main #main_cont .section#form_table .section_cont form {
 display:flex;
 flex-direction:column;
 row-gap:20px;
}

.section .section_title h2 {
 padding: 50px 0 70px;
}

.section .section_title h2:after {
 bottom:30px;
}

/*---------------------------------------------
left_nav
---------------------------------------------*/
#left_nav #left_nav_cont {
 display:flex;
 flex-direction:column;
 row-gap:20px;
}

#left_nav #left_nav_cont h1 {
 align-items:center;
 display:flex;
 justify-content:center;
}

#left_nav #left_nav_cont h1 img {
 height:auto;
 max-width:160px;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
}

#left_nav #left_nav_cont h1 img.lazyloaded {
 opacity:1;
}

#left_nav #left_nav_cont h2 img {
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
}

#left_nav #left_nav_cont h2 img.lazyloaded {
 opacity:1;
}

#left_nav #left_nav_cont .flow {
 background-color:var(--white);
 border-radius:6px;
 display:flex;
 flex-direction:column;
 row-gap:15px;
 padding:20px 10px 15px;
}

#left_nav #left_nav_cont .flow h3 {
 border-bottom:1px solid var(--gray_dd);
 font-size: 1.5rem;
 font-weight:600;
 padding-bottom:15px;
 text-align:center;
}

#left_nav #left_nav_cont .flow ol {
 display:flex;
 flex-direction:column;
 row-gap:10px;
 position:relative;
}

#left_nav #left_nav_cont .flow ol li:before {
 background-color:var(--black);
 content:" ";
 height:100%;
 position:absolute;
 left:14px;
 top:30px;
 width:2px;
 z-index:1;
}

#left_nav #left_nav_cont .flow ol li {
 align-items: start;
 column-gap:10px;
 display:flex;
 position:relative;
}

#left_nav #left_nav_cont .flow ol li:last-child:before {
 content:none;
}

#left_nav #left_nav_cont .flow ol li .number {
 align-items:center;
 display:flex;
 justify-content:center;
}

#left_nav #left_nav_cont .flow ol li .number span {
 background-color:var(--black);
 border-radius:15px;
 color:var(--white);
 font-size: 1.1rem;
 font-weight:600;
 height:30px;
 line-height:30px;
 position:relative;
 text-align:center;
 width:30px;
 z-index:2;
}

#left_nav #left_nav_cont .flow ol li dl {
 display:flex;
 flex-direction:column;
 row-gap:5px;
}

#left_nav #left_nav_cont .flow ol li dl dt {
 font-size: 1.4rem;
 font-weight:600;
 line-height:1.4;
}

#left_nav #left_nav_cont .flow ol li dl dd {
 font-size: 1.0rem; 
 line-height:1.6;
}

#left_nav #left_nav_cont .tel {
 align-items:center;
 display:flex;
 flex-direction:column;
 row-gap:10px;
 justify-content:center;
}

#left_nav #left_nav_cont .tel > dl {
 display:flex;
 flex-direction:column;
 row-gap:10px;
 max-width:300px;
}

#left_nav #left_nav_cont .tel > dl > dt {
 align-items:center;
 background-color:var(--sub);
 border-radius:20px;
 color:var(--white);
 display:flex;
 justify-content:center;
 font-size:1.1rem;
 font-weight:600;
 line-height:1;
 padding:6px 8px;
 text-align:center;
}

#left_nav #left_nav_cont .tel > dl > dd a {
 align-items:center;
 display:flex;
 justify-content:center;
}

#left_nav #left_nav_cont .tel > dl > dd a img {
 width: 100%;
 height: 100%;
 aspect-ratio: 261 / 27;
}

#left_nav #left_nav_cont .tel > dl > dd a:hover img {
 opacity:0.7;
}

#left_nav #left_nav_cont .tel .open_hour {
 align-items:center;
 column-gap:5px;
 display:flex;
 justify-content:start;
}

#left_nav #left_nav_cont .tel .open_hour > p {
background-color: var(--sub);
border-radius: 15px;
color: var(--white);
font-weight: 600;
font-size: 1.0rem;
line-height: 1.6;
padding: 2px 8px;
}

#left_nav #left_nav_cont .tel .open_hour ul {
 display:flex;
 flex-direction:column;
 flex-grow:1;
 row-gap:10px;
}

#left_nav #left_nav_cont .tel .open_hour ul li {

}

#left_nav #left_nav_cont .tel .open_hour dl {
 align-items:center;
 column-gap:3px;
 display:flex;
 justify-content:start;
}

#left_nav #left_nav_cont .tel .open_hour dl dt {
 font-size: 1.1rem;
 line-height:1.6;
 padding:0px;
 white-space: nowrap;
 /*min-width:50px;*/
}

#left_nav #left_nav_cont .tel .open_hour dl dd {
 letter-spacing:-0.03em;
 line-height:1.6;
 white-space: nowrap;
}

#left_nav #left_nav_cont .tel .open_hour dl dd span:first-child {
 font-size: 1.3rem;
 font-family: Arial;
 font-weight:600;
 line-height:1.6;
 letter-spacing:-0.01em;
}

#left_nav #left_nav_cont .tel .open_hour dl dd span:nth-child(2) {
 font-size: 1.1rem;
 line-height:1.6;
 letter-spacing:-0.03em;
}

/*---------------------------------------------
layerBoard
---------------------------------------------*/
.layer_board .layer_board_cont ul {
 column-gap:20px;
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 row-gap:60px;
 padding-top:50px;
}

.layer_board .layer_board_cont ul li {
 align-items: center;
 border: 1px solid var(--gray_dd);
 border-radius: 10px;
 display: flex;
 flex-direction: column;
 justify-content: start;
 padding: 65px 20px 20px;
 row-gap: 10px;
 position: relative;
 width: calc(100% / 3 - 20px);
}

.layer_board .layer_board_cont ul li .image {
 align-items:center;
 background-color: var(--yellow);
 border-radius: 50px;
 display: flex;
 height: 100px;
 justify-content: center;
 position: absolute;
 top: -50px;
 left: 50%;
 margin-left: -50px;
 width: 100px;
}

.layer_board .layer_board_cont ul li .image img {
 height:40px;
 width: auto;
}

.layer_board .layer_board_cont ul li:first-child .image img,
.layer_board .layer_board_cont ul li:nth-child(2) .image img,
.layer_board .layer_board_cont ul li:nth-child(3) .image img {
 margin-right:-5px;
}

.layer_board .layer_board_cont ul li .en {
 color: var(--gray_cc);
 font-size:1.5rem;
 font-weight:600;
}

.layer_board .layer_board_cont ul li dl {
 display:flex;
 flex-direction:column; 
 row-gap:15px;
}

.layer_board .layer_board_cont ul li dl dt {
 font-size: 2.0rem;
 font-weight: 600;
 line-height: 1.5;
 text-align: center;
}

.layer_board .layer_board_cont ul li dl dd {
 font-size: 1.4rem;
 line-height: 1.6;
 position: relative;
}

/*------------------------------------------
step
------------------------------------------*/
.step {
 /*display: flex;*/
 /*justify-content: center;*/
 padding:0;
 /*flex: 1 1 auto;*/
 width: 100%;
 overflow-x: auto;
 scroll-snap-type: x mandatory; 
}

.step ol {
 display: flex;
 justify-content: space-between;
 margin-bottom:0;
 padding:0;
 position: relative;
 width: 100%;
 width: max-content;
}

.step ol:before {}

.step ol li {
 display: flex;
 justify-content: center;
 position: relative;
 flex: 0 0 auto;
 width: calc(100% / 3);
}

.step ol li:before {
 background-color: var(--gray_eb);
 bottom: 19px;
 content: " ";
 height: 2px;
 right: calc(100% / 3 + 30px);
 position: absolute;
 width: 100%;
}

.step ol li:first-child:before {
 content: none;
}

.step ol li dl {
 display: flex;
 flex-direction: column;
 justify-content: center;
 position: relative;
}

.step ol li dl dt {
 font-size: 1.6rem;
 font-weight: 600;
 text-align: center;
}

.step ol li dl dd {
 align-items: center;
 align-content: center;
 display: flex;
 flex: 0 0 40px;
 justify-content: center;
 margin-top: 10px;
 z-index: 1;
}

.step ol li dl dd span {
 background-color: var(--gray_eb);
 border-radius: 50%;
 font-size: 1.8rem;
 font-weight: 600;
 display: inline-block;
 height: 40px;
 line-height: 40px;
 text-align: center;
 vertical-align: middle;
 width: 40px;
}

.step ol li.selected dl dt {
 color: var(--orange);
}

.step ol li.selected dl dd span {
 background-color: var(--orange);
 color: var(--white);
}

/*---------------------------------------------
confirm
---------------------------------------------*/


#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child{
 border-radius:6px;
 margin-bottom:15px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(6),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(7),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(8),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(9) {
 border-radius:6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(3),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(5),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(6),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(7),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(8) {
 margin-bottom:15px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(6) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(7) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(8) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(9) > label {
 border-radius:6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:first-child .course_detail,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(3) .course_detail 
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(5) .course_detail {
 border-radius:0 0 6px 6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(2) {
 border-radius:6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(2) > label {
 border-top:1px solid var(--gray_dd);
 border-radius:6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(2) .course_detail {
 border-radius:0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(3),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(3) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(5),
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(5) > label {
 border-radius:0 0 6px 6px;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(4) {
 border-radius:6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(4) > label {
 border-top:1px solid var(--gray_dd);
 border-radius:6px 6px 0 0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(4) .course_detail {
 border-radius:0;
}

#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(6) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(7) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(8) > label,
#form_table #form_table_cont > ul > li > dl > dd > ol > li:nth-child(9) > label {
 border-top:1px solid var(--gray_dd);
}


/*---------------------------------------------
confirm
---------------------------------------------*/
.confirm #form_table #form_table_cont > ul {
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li {
 flex:0 1 auto;
}

.confirm #form_table #form_table_cont > ul > li > dl {
 align-items:center;
 column-gap:10px;
 flex:0 1 auto;
}

.confirm #form_table #form_table_cont > ul > li > dl dt {
 font-size:1.5rem;
 font-weight:600;
 flex:0 1 20%;
 padding:0;
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li > dl dd {
 column-gap:5px;
 display:flex;
 flex-direction:unset;
}

.confirm #form_table #form_table_cont > ul > li > dl dd > span {
 font-size:1.5rem;
 line-height:1;
}

.confirm #form_table #form_table_cont > ul > li > dl dd ul {
 display:flex;
 flex-direction:column;
 padding-bottom:0;
 row-gap:10px;
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li > dl dd ul li {
 border-bottom:1px dotted var(--gray_dd);
 display:flex;
 flex-direction:column;
 row-gap:15px;
 padding-bottom:10px;
}

.confirm #form_table #form_table_cont > ul > li > dl dd ul li:last-child {
 border-bottom:0;
 padding-bottom:0; 
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course {
 display:flex;
 column-gap:10px; 
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course > span {
 font-size:1.5rem;
 line-height:1.8;
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course_detail {
 background-color:transparent;
 border:none;
 border-radius:0;
 padding:0;
 row-gap:10px;
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course_detail dl {
 align-items:center;
 column-gap:10px;
 display:flex;
 flex-direction:unset;
 width:100%;
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course_detail dl dt {
 flex: 0 0 145px;
}

.confirm #form_table #form_table_cont > ul > li > dl > dd ul li .course_detail dl dd {
 display:flex;
 flex-direction:unset;
}

/*---------------------------------------------
thanks
---------------------------------------------*/
.thanks #thanks_message {
 display:flex;
 flex-direction:column;
 justify-content:center;
 row-gap:30px;
}

.thanks #thanks_message p {
 font-size: 1.5rem;
 line-height:1.6;
}

.thanks #thanks_message ul.gallery {
 align-items:center;
 display:flex;
 gap:10px;
 flex-wrap:wrap;
 justify-content:center;
}

.thanks #thanks_message ul.gallery li {
 aspect-ratio: 1 / 1;
 width:calc(100% / 6 - 10px);
}

.thanks #thanks_message ul.gallery li img {
 height:100%;
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

.thanks #thanks_message ul.gallery li img.lazyloaded {
 opacity:1;
}

.thanks #thanks_message .btn {
 display:flex;
 justify-content:center;
}

.thanks #thanks_message .btn a {
 max-width:300px;
}