@charset "utf-8";

/*/--------------------------------------------------------------------------/*/
/* ===== CLEARFIX ===== */
/*/--------------------------------------------------------------------------/*/

body:after{
}


/*/--------------------------------------------------------------------------/*/
/* ===== SECTION ===== */
/*/--------------------------------------------------------------------------/*/

section header{
border-top-color:#AB69D6;
}

section h1{
color:#AB69D6;
}


section h2{
color:#AB69D6;
}

section h2 span,
section h3 span,
section h4{
border-color:#AB69D6;
}
section h4 a{
cursor:pointer;
}

section table{
border-top-color:#AB69D6;
}


section .tab_entry{
position:relative;
width:1000px;
}

section p.person,
section p.group{
display:block;
width:425px;
height:50px;
margin:0;
}

section p.person a,
section p.group a{
display:block;
width:405px;
height:50px;
padding:0 0 0 20px;
}

section p.person,
section p.group{
position:relative;
float:left;
line-height:50px;
font-size:150%;
}

section p.person{
padding:0 20px 0 60px;
}

section nav{
display: flex;
justify-content: space-evenly;
}

section nav label{
display: block;
background:#999 url(../images/common/inquiry-arrow.png) right center no-repeat;
color:#FFF;
width: 405px;
height: 50px;
padding: 0 0 0 20px;
line-height: 50px;
font-size: 150%;
cursor:pointer;
transition: all 0.2s ease-in-out;
}

section nav label:hover,
#entry-type-person:checked + input + nav .btn-person,
#entry-type-group:checked + nav .btn-group{
background-color:#AB69D6;
}

section p.person a{
}

section p.group a{
}

section p.person a:hover,
section p.group a:hover,
section p.person a.active,
section p.group a.active{
background-color:#AB69D6;
}


section .form-wrap{
display: grid;
grid-template-rows: 0fr;
opacity: 0;
}

#entry-type-person,
#entry-type-group{
display: none;
}

#entry-type-person:checked + input + nav + .form-wrap,
#entry-type-group:checked + nav + .form-wrap + .form-wrap{
grid-template-rows: 1fr;
opacity: 1;
}


#entry-type-group:checked + nav + .form-wrap{
grid-template-rows: 0fr;
opacity: 0;
}


section form{
overflow: hidden;
}

section form.active,
section form.check,
section form#back_form{
display:block;
}

section form.check,
section form#back_form{
position:static;
}

section td ul,
section td ol{
margin:0 0 0 1.7em;
font-size:100%;
}

section label{
display: inline-block;
}

section .form td:not(.course_list) div{
border-top: 1px dotted #CCC;
margin-top: 0.5em;
padding-top: 0.5em;
font-size: 87.5%;
}

section #person .form td:not(.course_list) div{
border-bottom: 1px dotted #CCC;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}

section #person .form .pay p,
section #group .form .pay p{
border-bottom: 1px dotted #ccc;
margin:0 0 0.5em 0;
padding-bottom: 0.5em;
font-weight: bold;
}

section #person .form td:not(.course_list) .credit,
section #person .form td:not(.course_list) .card{
border-top: none;
}

section #person .form td:not(.course_list) .credit{
padding-bottom: 1em;
}

section #person .form td:not(.course_list) .card{
border-bottom: none;
margin-bottom: 0;
}

section .form td div.disabled{
color: #BBB;
}
section .form select:disabled,
section .form input:disabled{
color: #B3B3B3;
opacity: 1;
}

section table .credit{
display: flex;
}

section table .credit p{
color: #F00;
margin: 0 0 0 20px;
}

section table .card{
display: flex;
align-items: center;
line-height: 1.8;
}

section table .card span:first-child{
margin-right: 0.5em;
}

section input[type='submit']{
padding: 0.5em 1.5em;
font-size: 110%;
}

@media screen and (max-width: 500px) {

section h2{
margin: 30px auto 20px;
}

section h3 {
font-size:4vw;
margin: 25px auto 20px;
}

section p{
margin: 15px auto;
}

section a{
word-break: break-all;
}

section .tab_entry{
width:100%;
}

section p.person,
section p.group{
width:100%;
}

section p.person a,
section p.group a{
width:100%;
box-sizing: border-box;
}

section p.person,
section p.group{
float:none;
}

section p.person{
padding:0;
margin-bottom: 20px;
}

section form{
top:120px;
width:100%;
}


section .form{
width: 100%;
margin: 0 auto;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}

section .form th,
section .form td{
display: block;
width: 100%;
box-sizing: border-box;
}

section .form td[rowspan="6"],
section .form td[rowspan="4"]{
background-color: #fafafa;
width: 100%;
}

section form table .input_list + td label{
width: auto;
min-width: 50%;
}

section .form td[rowspan="4"] br{
display: none;
}

section .form .text_box input,
section .form .text_box textarea{
width: 100%;
box-sizing: border-box;
}

section .form .input_list{
padding: 8px 10px 9px;
font-weight: bold;
}

section .form table{
width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}

section .form table th,
section .form table td{
display: table-cell;
}

#topicpath {
margin-top: 10%;
}

section nav label{
box-sizing: border-box;
width: 48%;
font-size: 3.7vw;
}

section label{
white-space: nowrap;
}



}


section td[rowspan="6"]{
width: 6em;
white-space: nowrap;
}

section form td[rowspan='3'],
section form table .input_list{
white-space: nowrap;
}

section .course_list{
padding: 0;
}

section .course_list > div{
width: 100%;
}

section .course_list > .first,
section .course_list > .second{
display: flex;
flex-wrap: wrap;
}

section .course_list > div > div:first-child{
display: flex;
align-items: center;
justify-content: center;
border-right: 1px dotted #ddd;
width: 3em;
padding: 0.5em 0;
line-height: 1.1;
text-align: center;
}

section .course_list > div > div:last-child{
width: calc(100% - 4em - 1px);
padding:0.3em 0.5em;
}

section .course_list .second{
border-top: 1px solid #ddd;
}

section .course_list label{
display: flex;
align-items: center;
border-radius: 4px;
padding: 0.4em;
line-height: 1;
transition: all 0.2s ease-in-out;
}

section .course_list label:hover{
background-color: #f2f2f2;
}

section .course_list label:has(input:checked){
background-color: #FFFCE9;
}

section .course_list label input{
margin:0 0.4em 0 0;
}

section .course_list .gansho{
display: flex;
align-items: center;
overflow: hidden;
box-sizing: border-box;
border-top: 1px solid #ddd;
width: 100%;
padding:0 0.4em;
height: 2.8em;
transition: all 0.2s ease-in-out;
}

section .course_list .gansho.disabled{
border-top: 1px solid transparent;
height: 0;
}

section #chk2,
section #chk3,
section #chk4,
section #chk5,
section #chk6,
section #chk7,
section #chk8,
section #chk9,
section #chk10{
display: none;
}

table.form td[rowspan="7"],
table.form tr:nth-child(8) td:first-child,
table.form th{
white-space: nowrap;
}

section #group table.form td.input_list{
width: auto;
white-space: nowrap;
}

@media screen and (max-width: 500px) {
section .form th small{
display: inline-block;
margin-left: 1em;
}
section .form select{
font-size: 3vw;
}

section #group table.form td.input_list{
width: 100%;
white-space: nowrap;
}

}

/*/--------------------------------------------------------------------------/*/
/* ===== DETAIL ===== */
/*/--------------------------------------------------------------------------/*/

.banking{
margin-top: 30px;
}

.banking caption,
#primary caption{
text-align:center;
font-weight: bold;
}

#primary caption{
text-align:center;
}

#primary th,
#primary td{
border:1px solid #CDD3D7;
padding:10px;
}

#primary thead th{
background:#DDD;
text-shadow:-1px 1px 0 #FFF;
text-align:center;
}

#primary th{
background:#EEE;
text-shadow:-1px 1px 0 #FFF;
}

#primary th.inner{
background:#F5F5F5;
}

#primary th .req{
color:#F00;
}

#primary td{
background:#FDFDFD;
text-shadow:-1px 1px 0 #FFF;
}

#detail #primary{
float:none;
width:auto;
padding:5px 5px 0 5px;
}

#detail #primary table{
width:100%;
margin:0 0 5px 0;
}

#detail #primary th{
width:6em;
}

#detail #primary th.mid,
#detail #primary thead th{
width:auto;
}

#detail #primary th.mid{
background:#E4E4E4;
}

#detail #primary table img{
vertical-align:middle;
}