/*
Theme Name: yumi-clinic
*/

body#wp-page #content {
font-size: 62.5%;
}

#wp-page-content article {
width: 95%;
border: 1px solid #fafafa;
margin: 64px auto;
padding: 24px;
background: white;
box-shadow: 0 0 4px #ccc;
line-height: 1.8;
letter-spacing: .8px;
font-size: 1.5em;
color: #555;
}

@media only screen and (min-width: 481px) {
#wp-page-content article {
width: 90%;
max-width: 960px;
margin: 96px auto;
padding: 56px;
}
}

#wp-page-content article,
#wp-page-content article * {
box-sizing: border-box;
}

#wp-page-content article h2 {
font-size: 1.5em;
color: #333;
margin-bottom: 48px;
}
@media only screen and (min-width: 481px) {
#wp-page-conten article h2 {
font-size: 2em;
margin-bottom: 56px;
}
}

#wp-page-content article h2 span {
color: #aaa;
font-size: .4em;
display: block;
font-weight: normal;
margin-top: 8px;
}
@media only screen and (min-width: 481px) {
#wp-page-content article h2 span {
margin-top: 0;
}
}

#wp-page-content article h3 {
margin: 56px 0 24px 0;
padding: 8px 16px;
background: #EE9C93;
border-left: 3px solid #de5f55;
font-size: 1.3em;
color: white;
line-height: 1.5;
}
@media only screen and (min-width: 481px) {
#wp-page-content article h3 {
margin-top: 64px;
font-size: 1.5em;
padding: 8px 16px 8px 24px;
}
}

#wp-page-content article p + p {
margin-top: 24px;
}

#wp-page-content article img {
max-width: 100%;
border: 1px solid #ccc;
padding: 3px;
box-sizing: border-box;
background: white;
}

div.ranks {
margin: 24px 0;
padding: 24px;
box-sizing: border-box;
border: 3px solid #ccc;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQYV2NkQAP////3ZUQWAwswMm6GC8IEQIrAgsgCYEF0AZAgANP9E1CXVxkjAAAAAElFTkSuQmCC) repeat;
background-color: #fafafa;
font-weight: bolder;
font-size: 1.1em;
}

div.ranks > p {
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 0;
} 

div.ranks > p > span:nth-of-type(odd) {
white-space: nowrap;
}

div.experience {
margin: 24px 0;
padding: 24px;
box-sizing: border-box;
border: 3px solid #ccc;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJ0lEQVQYV2NkQAP////3ZUQWAwswMm6GC8IEQIrAgsgCYEF0AZAgANP9E1CXVxkjAAAAAElFTkSuQmCC) repeat;
background-color: #fafafa;
font-weight: bolder;
font-size: 1.1em;
text-align: center;
}

div.experience h4 {
text-align: center;
display: inline-block;
padding: 8px 32px;
background: #eee;
color: #555;
}

div.experience h4 span {
display: inline-block;
}

div.experience p.grid {
margin: auto;
margin-top: -32px !important;
display: inline-grid;
width: auto;
grid-template: auto / 1fr 1fr 80px;
grid-gap: 0 24px;
text-align: left;
}

div.experience p.grid > span:nth-of-type(odd) {
white-space: nowrap;
text-align: right;
}

div.experience div {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;	
}

div.experience p.grid img {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
height: 120px;
margin-right: 16px;
}

div.experience p.grid span.img {
grid-row: 1 / 5;
grid-column: 3 / 4;
height: 120px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
transform: translateX(-16px);
}

div.experience p.grid {
transform: translateX(32px);
}

@media only screen and (min-width: 481px) {
br.pc {
display: none;
}
}

#nav7 .current7 {
    border-bottom: solid #ee9c93 5px;
}