@charset "utf-8";

[class*="flex-"]{ display: flex;}
[class*="flex-"][class*="flex-row"]{ flex-direction: row;}
[class*="flex-"][class*="flex-col"]{ flex-direction: column;}
[class*="flex-"][class*="flex-sb"]{ justify-content: space-between;}

[class*="txt-"][class*="-f14-"]{ font-size: 14px;}
[class*="txt-"][class*="-f16-"]{ font-size: 16px;}
[class*="txt-"][class*="-f18-"]{ font-size: 18px;}
[class*="txt-"][class*="-f20-"]{ font-size: 20px;}
[class*="txt-"][class*="-f22-"]{ font-size: 22px;}
[class*="txt-"][class*="-l16"]{ line-height: 16px;}
[class*="txt-"][class*="-l18"]{ line-height: 18px;}
[class*="txt-"][class*="-l20"]{ line-height: 20px;}
[class*="txt-"][class*="-l22"]{ line-height: 22px;}
[class*="txt-"][class*="-l24"]{ line-height: 24px;}
[class*="txt-"][class*="-l26"]{ line-height: 26px;}
[class*="txt-"][class*="-w300-"]{ font-weight: 300;}
[class*="txt-"][class*="-w400-"]{ font-weight: 400;}
[class*="txt-"][class*="-w500-"]{ font-weight: 500;}
[class*="txt-"][class*="-w600-"]{ font-weight: 600;}
[class*="txt-"][class*="-w700-"]{ font-weight: 700;}
[class*="txt-"][class*="-000000-"]{ color: #000000;}
[class*="txt-"][class*="-111111-"]{ color: #111111;}
[class*="txt-"][class*="-222222-"]{ color: #222222;}
[class*="txt-"][class*="-333333-"]{ color: #333333;}
[class*="txt-"][class*="-444444-"]{ color: #444444;}
[class*="txt-"][class*="-555555-"]{ color: #555555;}
[class*="txt-"][class*="-666666-"]{ color: #666666;}
[class*="txt-"][class*="-777777-"]{ color: #777777;}
[class*="txt-"][class*="-888888-"]{ color: #888888;}
[class*="txt-"][class*="-999999-"]{ color: #999999;}

[class*="txt-"] + [class*="txt-"]{ margin-top: 12px;}

.org-box .box1{ display: flex; justify-content: center;}
.org-box .box1 > li{ display: flex; flex-direction: column; align-items: center;}
.org-box .box1 > li .img{ width: 130px; height: 160px; margin-bottom: 10px; overflow: hidden; position: relative;}
.org-box .box1 > li .img img{ width: 180%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.org-box .box2{ margin: 10px 0 0 0; display: flex; flex-direction: column; flex: 1; justify-content: center;}
.org-box .box2 > li{ margin: 10px 0 0 0; display: flex; flex-direction: column; flex: 1; align-items: center;}
.org-box .org1{ min-height: 60px; font-weight: 600; font-size: 18px; color: #333; text-align: center; line-height: 1.2; padding: 0 10px; display: flex; align-items: center; justify-content: center; border: 4px solid #ddd;}
.org-box .org2{ width: 100%; min-height: 40px; font-weight: 400; font-size: 16px; color: #333; text-align: center; line-height: 1.2; padding: 5px 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;}

.dl-col-box > .flex-row > dt + dd{ margin-left: 5px; flex: 1;}
.dl-col-box > .flex-row + .flex-row{ margin: 10px 0 0 0;}
.dl-col-box > .flex-col > dt{ display: flex; align-items: center;}
.dl-col-box > .flex-col > dt::after{ height: 1px; background-color: #eee; content: ''; margin-left: 10px; flex: 1;}
.dl-col-box > .flex-col > dt + dd{ margin-top: 20px; flex: 1;}
.dl-col-box > .flex-col + .flex-col{ margin: 50px 0 0 0;}
.dl-col-box + .dl-col-box{ margin-top: 20px;}

.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%;}

.dash-col-box{ display: flex; flex-direction: column;}
.dash-col-box > li{ font-weight: 300; font-size: 16px; color: #444; line-height: 20px; display: flex; flex-direction: column; padding: 0 0 0 30px; position: relative;}
.dash-col-box > li::before{ width: 10px; height: 1px; background-color: #999; content: ''; position: absolute; top: 10px; left: 15px;}
.dash-col-box > li + li{ margin-top: 5px;}

.tab-row-box{ width: 100%;}
.tab-row-box ul{ display: flex;}
.tab-row-box .item{ flex: 1; border: 1px solid #bbb;}
.tab-row-box .item + .item{ border-left: 0;}
.tab-row-box .item .btn-tab{ width: 100%; height: 40px; background-color: #fff; font-weight: 400; font-size: 14px; color: #444; line-height: 18px; display: flex; align-items: center; justify-content: center;}
.tab-row-box .item .btn-tab:hover,
.tab-row-box .item.on .btn-tab:hover{ background-color: #ddd; text-decoration: underline;}
.tab-row-box .item.on .btn-tab{ background-color: #f1f1f1; font-weight: 600;}

.comingsoon{ width: 500px; background: url(../img/etc/comingsoon.png) no-repeat center 80px; background-size: auto 130px; padding: 220px 0 80px 0; margin: 50px auto; border: 10px solid #f1f1f1;}
.comingsoon .txt{ font-size: 20px; color: #000000; text-align: center;}

@media (max-width:767px){
    .comingsoon{ width: 100%;}
}
@media (max-width:600px){
    .comingsoon{ background-size: auto 80px; padding-top: 170px; margin-bottom: 0;}
}