@charset "UTF-8";

#contWrap{
    width: 100%;
    box-sizing: border-box;	
}

.content p{
	color: #797979;
    font-size: 1.4rem;
    line-height: 1.8rem;
}


@charset "UTF-8";
/*//////////----- top -----//////////*/
.content {
	background-color: #ffe7f2;
}
/*//////////----- top -----//////////*/
.top {
    margin-bottom: 20px;
}
.top .link {
    width: 100%;
    margin: 0 auto;
}
@media only screen and (min-width: 790px){
    .top {
        margin-bottom: 40px;
    }
    .top .link {
        width: 680px;
    }
}
/*//////////----- content-wrapp -----//////////*/
.content-wrapp {
	margin: 2%;
	padding: 20px;
	background: #fff;
}
.content-wrapp h4 {
    text-align: center;
    margin-bottom: 10px;
}
@media only screen and (min-width: 790px){
    .content-wrapp {
        padding: 40px;
    }
}
/*//////////----- common -----//////////*/
.section {
    margin-bottom: 30px;
}
.works .wrappBox .ph,
.merit .wrappBox .ph,
.voice .wrappBox .ph {
    width: 200px;
    margin: 0 auto 20px;
}
.works .wrappBox .txt h5 {
    width: 80%;
    margin: 0 auto 15px;
}
.merit .wrappBox .txt h5 {
    margin-bottom: 10px;
}
.salary h5,
.group h5 {
    background: #fff;
    border: 2px solid #968375;
    border-radius: 1em;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    height: 30px;
    margin: 0 auto 20px;
}
.salary-structure,
.group .about,
.group .feature,
.group .system,
.staff,
.guest,
.alibi,
.requirements {
    margin-bottom: 30px;
}
@media only screen and (min-width: 790px){
    .section {
        max-width: 880px;
        margin: 0 auto 40px;
    }
    .section .wrappBox {
        display: flex;
        gap: 30px;
        flex-direction: row;
        justify-content: space-between;
    }
    .works .wrappBox .ph,
    .merit .wrappBox .ph {
        width: 240px;
        margin: 0;
    }
    .works .wrappBox .txt,
    .merit .wrappBox .txt {
        width: 600px;
    }
    .works .wrappBox .txt h5,
    .merit .wrappBox .txt h5 {
        width: auto;
        margin-bottom: 10px;
    }
    .salary h5,
    .group h5 {
        width: 600px;
        font-size: 24px;
        line-height: 44px;
        height: 44px;
        margin: 0 auto 30px;
    }
    .salary-structure,
    .group .about,
    .group .feature,
    .group .system,
    .staff,
    .guest,
    .alibi,
    .requirements {
        margin-bottom: 40px;
    }
}
/*//////////----- merit -----//////////*/
.merit .wrappBox {
    margin-top: 30px;
}
.merit .wrappBox .ph {
    margin: 10px auto 0;
}
@media only screen and (min-width: 790px){
    .merit .wrappBox:nth-of-type(even) {
        flex-direction: row-reverse;
    }
}
/*//////////----- voice -----//////////*/
.voice .wrappBox:nth-of-type(even) {
    margin-top: 30px;
}
.voice .wrappBox .ph {
    margin-bottom: 10px;
}
.voice .wrappBox .txt {
    box-sizing: border-box;
    border: 2px #968375 solid;
    border-radius: 4px;
    padding: 20px;
}
.voice .wrappBox .txt h5 {
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px #968375 dotted;
    margin-bottom: 10px;
}
.voice .wrappBox .txt p {
    line-height: 1.5;
}
@media only screen and (min-width: 790px){
    .voice .wrappBox:nth-of-type(even) {
        flex-direction: row-reverse;
        margin-top: 40px;
    }
    .voice .wrappBox .ph {
        width: 300px;
    }
    .voice .wrappBox .txt {
        width: 520px;
    }
}
/*//////////----- contactBtn -----//////////*/
@media only screen and (min-width: 790px){
    .contactBtn {
        text-align: center;
    }
}
/*//////////----- salary -----//////////*/
.salary,
.requirements {
    padding: 20px;
    box-sizing: border-box;
    background: #feefec;
}
.salary-example .fig li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    text-align: center;
    border-radius: 50%;
}
.salary-example .fig li:nth-of-type(1) {
    background: #fdf5c4;
}
.salary-example .fig li:nth-of-type(2) {
    background: #dee5bb;
}
.salary-example .fig li h6 {
    font-size: clamp(18px, 2.3vw, 24px);
    line-height: 1.5;
    margin-bottom: 10px;
}
.salary-example .fig li h6 span {
    display: block;
    font-size: 10px;
}
.salary-example .fig li .wage {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: bold;
    margin-bottom: 10px;
}
.salary-example .fig li .wage span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #968375;
    color: #FFF;
    font-size: clamp(12px, 1.7vw, 18px);
    text-align: center;
}
.salary-example .fig li .txt {
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.5;
}
@media only screen and (min-width: 790px){
    .salary,
    .requirements {
        max-width: 960px;
        padding: 40px;
    }
    .salary-example .fig {
        display: flex;
        justify-content: center;
    }
    .salary-example .fig li {
        max-width: 400px;
        max-height: 400px;
    }
    .salary-example .fig li h6 {
        margin-bottom: 15px;
    }
    .salary-example .fig li h6 span {
        font-size: 12px;
    }
    .salary-example .fig li .wage {
        margin-bottom: 15px;
    }
    .salary-example .fig li .wage span {
        max-width: 56px;
        max-height: 56px;
    }
    .salary-example .fig li .txt {
        line-height: 1.75em;
    }
}
/*//////////----- group -----//////////*/
.group .feature .list li,
.group .system .list li,
.guest .list li,
.alibi .list li {
    box-sizing: border-box;
    padding: 10px 20px 20px;
    border-top: 3px #968372 solid;
    background: #fff0ed;
    margin-bottom: 30px;
}
.group .feature .list li h6,
.group .system .list li h6,
.guest .list li h6,
.alibi .list li h6 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.group .feature .list li .ph,
.group .system .list li .ph,
.guest li .ph,
.alibi li .ph {
    margin-bottom: 10px;
}
.group .feature .list li p,
.group .system .list li p,
.guest .list li p,
.alibi .list li p {
    line-height: 1.5;
}
@media only screen and (min-width: 790px){
    .group .feature .list,
    .group .system .list,
    .guest .list,
    .alibi .list {
        display: flex;
        gap: 30px;
    }
    .group .feature .list li,
    .group .system .list li,
    .guest .list li,
    .alibi .list li {
        width: calc(100% / 3);
        margin-bottom: 0;
    }
}
/*//////////----- staff -----//////////*/
.staff {
    margin-top: 30px;
}
.staffBox {
    border-top: 3px #968372 solid;
    line-height: 1.5;
    padding: 20px;
    background: #f2dfee;
}
.staffBox .staffFlex {
    margin-bottom: 50px;
}
.staffBox h6 {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
.staffBox .staffFlex .fig {
    width: 180px;
    margin: 0 auto 20px;
}
.staffBox .list li {
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
}
.staffBox .list li .thumb {
    text-align: center;
    margin-bottom: 10px;
}
.staffBox .list li dl {
    text-align: center;
    margin-bottom: 10px;
}
.staffBox .list li dl dt {
    font-size: 24px;
    margin-bottom: 5px;
}
.staffBox .list li dl dd {
    font-size: 18px;
}
.staffBox .list li .blogBtn span,
.staffBox .list li .blogBtn a {
    display: block;
    width: 80%;
    height: 40px;
    border-radius: 4px;
    font-size: 18px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin: 0 auto 10px;
}
.staffBox .list li .blogBtn span {
    background: #aaa;
}
.staffBox .list li .blogBtn a {
    background: #fa909b;
}
@media only screen and (min-width: 790px){
    .staff {
        margin-top: 40px;
    }
    .staffBox {
        position: relative;
        background: #f2dfee;
    }
    .staffBox .staffFlex {
        margin-bottom: 30px;
    }
    .staffBox .staffFlex p {
        width: calc(100% - 220px);
    }
    .staffBox .staffFlex .fig {
        position: absolute;
        top: 30px;
        right: 40px;
        width: 160px;
    }
    .staffBox .list {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
    }
    .staffBox .list li {
        margin-top: 0;
        width: calc((100% - 60px) / 3);
    }
}
/*//////////----- requirements -----//////////*/
.requirements table {
    width: 100%;
    border-collapse: collapse;
}
.requirements table th,
.requirements table td {
    display: block;
    border: 1px solid #968375;
    padding: 10px;
    vertical-align: middle;
}
.requirements table th {
    background: #f2dfee;
}
.requirements table td {
    background: #fff;
}
.entry .free {
    text-align: center;
    margin-bottom: 10px;
}
@media only screen and (min-width: 790px){
    .requirements table th,
    .requirements table td {
        display: table-cell;
    }
    .requirements table th {
        width: 160px;
    }
}
/*//////////----- instructor -----//////////*/
.instructor h5 {
    width: auto;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    color: #8b5f09;
    text-align: left;
    line-height: normal;
    box-sizing: border-box;
    border: dashed 2px white;
    box-shadow: 0px 0px 0px 5px #f1e5cf;
    padding: 5px 10px;
    background: #f1e5cf;
}
.instructor .works p span,
.instructor .salary p span {
    font-weight: bold;
    color: #fd6110;
}
/* works */
.instructor .works .ph {
    text-align: center;
    margin-bottom: 10px;
}
/* flow */
.instructor .flow {
    margin-top: 20px;
}
.instructor .flow .flowBox {
    margin-top: 20px;
}
.instructor .flow .flowBox .ph img {
    border: solid 5px #ffffff;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px 3px #eeeeee;
}
.instructor .flow .flowBox .txt h6 {
    font-weight: bold;
    color: #8b5f09;
}
.instructor .flow .flowBox .txt p span {
    font-weight: bold;
    color: #fd6110;
}
@media only screen and (min-width: 790px){
    .instructor .flow .flowBox {
        display: flex;
        gap: 20px;
    }
    .instructor .flow .flowBox .ph {
        flex: 1;
    }
    .instructor .flow .flowBox .txt {
        flex: 2;
    }
}
/* salary */
@media only screen and (min-width: 790px){
    .instructor .salary {
        max-width: 880px;
    }
    .instructor .salary h5 {
        margin-bottom: 0;
    }
    .instructor .salary .fig {
        text-align: center;
    }
}
/* requirements */
@media only screen and (min-width: 790px){
    .instructor .requirements {
        max-width: 880px;
        margin: 0 auto;
    }
}
/* entry */
.instructor .entry .contactBtn a {
    display: block;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px;
    background: #df4a95;
}
@media only screen and (min-width: 790px){
    .instructor .entry .contactBtn a {
        width: 600px;
        font-size: 24px;
        padding: 15px;
        margin: 0 auto;
    }
    .instructor .entry .contactBtn a:hover {
        text-decoration: none;
        background: #fd6110;
    }
}