@charset "utf-8";
@import 'base-styles.css';

#container{
/*opacity:0;
transition:opacity .2s;*/
}

body.staff .writer{
width:100%;
display: inline-block;
}
body.staff .photo{
margin: 0;
display: inline-block;
vertical-align: top;
}
body.staff .photo img{
width:min(70vw , 100%);
}
body.staff .comment .name{
margin: min(6vw , 15px) 0 20px;
font-size: min(4.7vw , 130%);
line-height: 1.2!important;
}
body.staff .comment small{
font-size: 60%;
display: inline-block;
}
body.staff .comment{
display: inline-block;
}
body.staff .comment h3{
color: #72A334;
margin-top: 10px;
margin-bottom: 8px;
border-left: #72A334 solid 2px;
padding-left: 8px;
line-height: 1.2;
font-size: 100%;
}
.table-scroll {
overflow-x: auto;
display: block;
}


.entryBody #recruit dl{
border-bottom:1px solid #eee;
font-size:90%;
}
.entryBody #recruit dl:first-of-type{
border-top:1px solid #eee;
}
.entryBody #recruit dt{
vertical-align:top;
font-weight:bold;
display:inline-block;
padding:10px 0;
width:100%;
}
.entryBody #recruit dd{
display:inline-block;
padding:0 0 10px;
}

.entryBody #recruit a.btn-entry{
background-color:#72A334;
color:#fff;
padding:5px 10px;
margin:40px 0;
border-radius:4px;
display:inline-block;
width:100%;
box-sizing:border-box;
text-align:center;
font-size:120%;
transition:background-color .2s;
}

.entryBody #recruit a.btn-entry:hover{
background-color:#4e7123;
}



/* SDGs */
#contents p.sdgs{
border:2px solid #F2F0EC;
width:100%;
box-sizing:border-box;
margin-bottom:2em;
}
#contents p.sdgs img{
float: none!important;
margin: 0!important;
padding-top:0px!important;
vertical-align:middle;
display:inline-block!important;
max-height:20%!important;
}
#contents p.sdgs img:first-of-type{
max-height:100%!important;
transition:opacity .2s;
}
#contents p.sdgs img:first-of-type:hover{
opacity:.8;
cursor:pointer;
}
@media screen and (max-width:768px) {
#contents p.sdgs{
height:50px;
}
#contents p.sdgs img{
max-height:50%!important;
}
}
@media screen and (max-width:330px) {
#contents p.sdgs{
height:44px;
}
}







@media screen and (min-width:768px) {

/* staff */
body.staff .photo{
width:55%;
margin-bottom: 20px;
}
body.staff .comment{
width:40%;
margin-left: 4%;
position: relative;
top:-8px;
margin-bottom: 20px;
}

/* recruit */
.entryBody #recruit dt{
width:20%;
}
.entryBody #recruit dd{
width:78%;
margin-left:1%;
padding:10px 0;
}



















}



@media screen and (min-width:960px) {





















}

























/*loader*/
.loader {
position: absolute;
top:calc(50vh - 100px);
left:calc(50vw - 25px);
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #ddd;
border-radius: 50%;
-webkit-animation: spin 0.75s infinite linear;
animation: spin 0.75s infinite linear;
border-top-color: transparent;
}
.loader::after {
left: -2px;
top: -2px;
position: absolute;
content: '';
width: inherit;
height: inherit;
border: inherit;
border-radius: inherit;
display: block;
-webkit-transform: rotate(65deg);
transform: rotate(65deg);
}
@-webkit-keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg)};
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg)};
}