@charset "utf-8";

#layout-top,
#layout-body,
#layout-foot{ width: 1570px;}
#layout-top .inner{ width: 100%;}
#layout-gnb{ margin-bottom: 0;}
#layout-body{ background-color: transparent; padding: 0;}
.visual-box{ display: flex; flex: 1; justify-content: center;}
.visual-box .box-body{ width: 100%;}
.visual-box .box-body::after{ display: none;}
.visual-box .box-body .link{ height: 100%; background-size: auto; background-color: transparent; position: relative;}
.visual-box .box-body .link::before{ width: 261px; height: 67px; background: url(../img/main/mark.png) no-repeat center center; content: ''; position: absolute; left: 0; bottom: 34px;}

.info-box h2{ font-weight: 600; font-size: 36px; color: #606060; text-align: center;}
.info-box > .inner{ display: flex; flex-direction: column;}
.info-box > .inner > .box-head{ padding: 30px 0;}
.info-box > .inner > .box-body{ display: flex;}

.repertoire-box{ display: flex; flex-direction: column; flex: 1;}
.repertoire-box h3{ font-weight: 600; font-size: 20px; color: #282828; line-height: 32px; display: inline-block;}
.repertoire-box .box-head{ display: flex; align-items: center;}
.repertoire-box .box-head::after{ height: 1px; background-color: #ebebeb; content: ''; margin-left: 10px; flex: 1;}
.repertoire-box .box-body{ margin-top: 30px; display: flex; flex-direction: column;}
.repertoire-box + .host-box{ margin-left: 40px;}

.host-box{ width: 400px; display: flex; flex-direction: column;}
.host-box h3{ font-weight: 600; font-size: 20px; color: #282828; line-height: 32px; display: inline-block;}
.host-box .box-head{ display: flex; align-items: center;}
.host-box .box-head::after{ height: 1px; background-color: #ebebeb; content: ''; margin-left: 10px; flex: 1;}
.host-box .box-body{ margin-top: 30px; display: flex;}
.host-box .box-body .logo{ width: 60px;}
.host-box .box-body .logo img{ width: 60px;}
.host-box .box-body .logo + .address{ margin-left: 40px;}
.host-box .box-body .address{ display: flex; flex-direction: column;}
.host-box .box-body .address dt{ font-weight: 600; font-size: 16px; color: #606060; margin-bottom: 15px;}
.host-box .box-body .address dd{ font-weight: 400; font-size: 16px; color: #606060; line-height: 24px;}
.host-box .box-body .address dd + dd{ margin-top: 10px;}
.host-box .box-body .address dd a{ color: #ab8e48;}

.dl-col-box{ display: flex; flex-direction: column;}
.dl-col-box + .dl-col-box{ margin-top: 40px;}
.dl-col-box > dt{ background-color: #ffff00; font-weight: 400; font-size: 20px; color: #606060; line-height: 26px; align-self: flex-start;}
.dl-col-box > dd{ font-weight: 400; font-size: 18px; color: #353535; line-height: 22px; margin-top: 15px;}

.num-col-box{ display: flex; flex-direction: column;}
.num-col-box > li{ font-weight: 400; font-size: 18px; color: #353535; line-height: 22px; display: flex; flex-direction: column; padding: 0 0 0 30px; position: relative;}
.num-col-box > li + li{ margin-top: 5px;}
.num-col-box > li .num{ width: 30px; height: 22px; font-weight: 400; font-size: 16px; color: #353535; text-align: right; line-height: 22px; position: absolute; top: 0; left: 0;}
.num-col-box > li .num + .txt{ margin-left: 4px;}
.num-col-box > li .txt{ height: 22px; font-weight: 400; font-size: 16px; color: #353535; text-align: left; line-height: 22px; flex: 1;}
.num-col-box > li .txt b{ display: inline-block;}
.num-col-box > li > .num-col-box{ margin: 10px 0 20px 0;}
.num-col-box.type2 > li{ padding-left: 22px;}
.num-col-box.type2 > li .num{ width: 22px; font-size: 12px; text-align: center; line-height: 20px; border: 1px solid #ccc; border-radius: 50%;}

@media (max-width:1609px){
    #layout-top .inner{ width: calc(100% - 40px); margin-left: 20px; margin-right: 20px;}
}

@media (max-width:1569px){
    #layout-top,
    #layout-body,
    #layout-foot,
    #layout-foot .inner{ width: 100%;}
    #layout-foot{ padding-left: 20px; padding-right: 20px;}
    .visual-box .box-body .link{ height: 100%; padding: 0;}
    .visual-box .box-body .link::before{ left: 20px;}
}

@media (max-width:990px){
    .host-box{ width: 340px;}
}

@media (max-width:900px){
    .visual-box .box-body .link{  background-size: cover;}
}

@media (max-width:767px){
    .info-box > .inner > .box-body{ flex-direction: column;}
    .repertoire-box,
    .host-box{ width: 100%;}
    .repertoire-box + .host-box{ margin: 50px 0 0 0;}
}