/* CSS Document */


/*------------------------------------------------------------
	BASE
------------------------------------------------------------ */
/* IMG */
img { display:block; margin:0 auto; padding:0; border: 0; max-width:100%; }
img.center { display:block; margin:0 auto; }
img.left { float: left; margin: 0 15px 0 0; border: 0; }
img.right { float: right; margin: 0 0 0 15px; border: 0; }


/*------------------------------------------------------------
	BUTTON
------------------------------------------------------------ */
button, [type="button"], [type="reset"], [type="submit"] { background:none; border:0; }
button:active { color:#fff; }
.push { position:relative; color:#fff; text-align:center; margin:2em auto 0; padding:1em 1.5em; line-height: 1; letter-spacing: 1px; display:inline-block; z-index: 2;
 background: #224F91; border-radius: 100px; width: 80%; max-width: 520px; font-weight: bold;}
.push i { padding-left: .4em; font-size: calc(1em + 4px); }
/*hover*/
.push:hover { color: #fff; opacity: .75;}
.push.cts { display: block; margin-top: 4em; padding: 1.2em; font-size: 20px;}
.push.nml { display: block;}

@media(max-width:767px) {
.push { margin-top: 6%; }
.push.cts { margin-top: 10%; padding: .9em 1em 1em; font-size: 1.6rem;}
}
@media(max-width:320px) {
}


/*------------------------------------------------------------
	COMMON
------------------------------------------------------------ */
main { display: block;}
section { position:relative; width:100%; margin:0; padding:5% 0; overflow:hidden; }
.cutin { position:relative; width:80%; max-width: 1100px; margin:4% auto 0; }
.cutin.min { width:70%; }
.cutin.mins { width:60%; margin-bottom:10%; }
.cutin.min-s { width:50%; margin-bottom:5%; }
.cutin.w100 { width:100%; }
.cutin hr { margin:2.5% 0; }

/* column */
.clmBox { position:relative; display:flex; flex-flow: row wrap; justify-content: space-between; }
.clmBox.normal { justify-content:flex-start; align-items:flex-start; }
.clmBox.cont-rev { justify-content:flex-end; align-items:flex-start; }
.clmBox.ali-rev { justify-content:flex-start; align-items:flex-end; }
.clmBox.all-rev { justify-content:flex-end; align-items:flex-end; }
.htmach { align-items:stretch; }
.clmBox > li { display:block; padding:0; border:0; position:relative; }
.clmBox > li.clmBox { display:flex; }
.clm2 > li, .clm2 .clms { width:48%; }
.clm3 > li, .clm3 .clms { width:32%; margin-bottom:4%; }
.clm4 > li, .clm4 .clms { width:24%; }
.clm5 > li, .clm5 .clms { width:19%; }
.clm2.box2 .clms { width:50%; }
.clms { position:relative; }
.clm3::after{content:"";display: block;width:32%;}
.clm4::before{content:"";display: block;width:24%;order:1;}
.clm4::after{content:"";display: block;width:24%;}
.clm5 .empty{width:19%; margin:0;}
.clms { margin-bottom:2%; }
.clm2 li img, .clm3 li img, .clm4 li img, .clm5 li img, .clms img { width:100%; height:auto; }
.worksBox img, .jny img { display: block; max-height:30%; object-fit: cover; object-position: 50% 0%; }
.imgauto img { width:auto !important; }
.alignC { align-self:center; }
.alignC img { display:block; margin:auto; }
.clumn { display:flex !important; flex-direction:column; align-items: flex-start;}
.clmBox.nowrap { flex-wrap:nowrap; align-items: flex-start; }
.last-end-row { margin-right:auto; }
.last-end-clm { margin-top:auto; }

@media(max-width:767px) {
section { padding:8% 0; }
.cutin { width:90%; margin:5% auto 0; }
.cutin.min { width:90%; }
.cutin.mins, .cutin.min-s { width:90%; margin-bottom:10%; }
.cutin img { max-width:100%; }
.cutin.brd { padding-bottom:10%; }

.bg { padding: 8% 0;}

.clm2 li, .clm2 .clms, .clm3 li, .clm3 .clms, .clm4 li, .clm4 .clms, .clm5 li, .clm5 .clms { width:100%; }
.clm2 li { margin-bottom:8%; }
.clm2 li:last-child { margin-bottom:0; }
.clm3 li, .clm3 .clms, .clm4 li, .clm4 .clms, .clm5 li, .clm5 .clms { width:48%; }
.clm4::before{content:"";display: block;width:48.5%;order:1;}
.clm4::after{content:"";display: block;width:48.5%;}

a.gopage { font-size:2rem; letter-spacing:3px; margin:1.2em auto 0; padding:.1em 1em; }
.arrowLink { font-size:180%; bottom:0; }

}






/*------------------------------------------------------------
	STAFF
------------------------------------------------------------ */
.staff .pglink { flex-wrap: wrap; justify-content: space-between;}
.staff .pglink .push { width: 32%; margin: 2% 0 0;}
#stafflist > a { width: 70%; max-width: 750px; display: block; margin: 0 auto;}
#stafflist .cutin > h3 { text-align: center; color: #fff; padding: .6em 1.2em; background: #224F91; max-width: 460px; margin: 0 auto 1.5em;}
#stafflist .clmBox { justify-content: center;}
#stafflist li { border: 1px solid #fff; background: #fff; margin: 0 .5% 1%; width: 32%;}
#stafflist li > div { padding: 1.2em;}
#stafflist li h4 { color: #224F91; padding-bottom: .4em; margin-bottom: .5em; border-bottom: 1px solid #224F91;}
#stafflist li h4 span { font-size: calc(1em - 5px); display: block; font-weight: normal;}
#stafflist #yakushokusha .shacho li:first-of-type { width: 65%; margin: 0 auto 2%;}


@media(max-width:767px) {
    #stafflist li > div { padding: 1em;}
    #stafflist li p {  font-size: 1.2rem; line-height: 1.4;}
    #stafflist li.w100 { width: 100%;}
    #stafflist .clmBox { justify-content: space-between; align-items: flex-start;}
    #stafflist li { margin: 0 0 3%; width: 48.5%;}
    #stafflist #yakushokusha .shacho li:first-of-type { width: 100%; margin: 0 auto 3%;}

}