@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
color
#4CAF50　緑
-----------------------------------------------*/

main .image {
margin-bottom:1.5em;
}

main .tab > section {
display:none;
}
main .menu {
overflow:hidden;
}
main .menu li {
float:left;
width:220px;
margin:10px 0 0 10px;
line-height:1.2;
text-align:center;
border:1px solid #4CAF50;
box-sizing:border-box;
}
main .menu li:nth-child(3n+1) {
margin-left:0;
}
main .menu a {
display:block;
padding:2em 0;
color:#4CAF50;
text-decoration:none;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
main .menu a:hover {
color:#FFF;
background:#4CAF50;
}

main strong {
color:#4CAF50;
}


/* カプセル内視鏡 */

#capsule .column {
display:none;
}
#capsule h4 {
padding:1em 1em;
font-size:1.1em;
}
#capsule h4 span {
display:block;
float:right;
padding:0.2em 0.8em;
font-size:0.8em;
letter-spacing:0;
color:#4CAF50;
background:#FFF;
border-radius:0.2em;
transition:all 0.2s ease-out;
}
#capsule h4:hover {
cursor:pointer;
}
#capsule h4:hover span {
cursor:pointer;
opacity:0.7;
}
#capsule .lead {
overflow:hidden;
}
#capsule .lead img {
float:right;
margin-left:2em;
}
#capsule h5 {
width:9em;
padding:0.4em 1em;
font-size:1.1em;
letter-spacing:0.1em;
text-align:center;
color:#4CAF50;
border:1px solid #4CAF50;
}
#capsule h5 + p {
margin:0 2.5em;
}
#capsule .flow > div {
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
align-items:flex-start;
margin:0 2.5em;
padding:1.5em 0;
border-bottom:1px solid #4CAF50;
}
#capsule .flow > div.center {
align-items:center;
}
#capsule .flow > div:first-child {
padding-top:0;
}
#capsule .flow > div:last-child {
padding-bottom:0;
border-bottom:none;
}
#capsule .flow dt {
font-size:1.1em;
letter-spacing:0.1em;
color:#4CAF50;
}
#capsule .flow dd {
margin-left:1.1em;
}
#capsule .flow .box1 dl {
width:66%;
}
#capsule .flow .box1 img {
width:30%;
}
#capsule .flow .box2 dl {
width:44%;
}
#capsule .flow .box2 img {
width:52%;
}
#capsule .video {
margin:1em auto 0 auto;
text-align:center;
}
#capsule .video video {
width:calc(100% - 5em);
}
#capsule .note {
display:block;
margin-top:0.5em;
padding-left:1em;
text-indent:-1em;
font-size:0.85em;
}


@media screen and (max-width:600px) {
main .image {
width:112%;
margin-left:-6%;
}
main .tab {
border-top:1px solid #4CAF50;
}
main .tab .menu {
display:none;
}
main .tab > section {
display:block;
margin:0;
padding:0;
background:#FFF;
border-bottom:1px solid #4CAF50;
border-radius:0;
}
main .tab .detail {
display:none;
padding:5%;
background:#F5F5F5;
}
main .tab .detail :first-child {
margin-top:0;
}
main .tab .detail :last-child {
margin-bottom:0;
}
main .tab h3 {
margin:0;
padding:0.75em 1em 0.75em calc(5% + 1em);
background:#F0F0F0 url(../../img/common/arw_right_green.png) 5% center no-repeat;
background-size:0.5em;
border:0;
}
main .tab h3.active {
color:#FFF;
background:#4CAF50 url(../../img/common/arw_down_white.png) 5% center no-repeat;
background-size:0.5em;
}
main .tab h3:hover {
cursor:pointer;
}

/* カプセル内視鏡 */

#capsule h4 {
text-align:center;
}
#capsule h4 span {
display:block;
float:none;
width:8em;
margin:0.5em auto 0 auto;
}
#capsule .lead img {
width:50%;
margin-left:1em;
}
#capsule h5 {
width:100%;
font-size:1em;
margin:2em auto 1em auto;
box-sizing:border-box;
}
#capsule h5 + p {
margin:0;
}
#capsule .flow > div {
display:block;
margin:0;
}
#capsule .flow .box1 dl {
width:100%;
}
#capsule .flow dt {
font-size:1em;
}
#capsule .flow .box1 img {
width:50%;
margin:0 auto;
}
#capsule .flow .box2 dl {
width:100%;
}
#capsule .flow .box2 img {
width:100%;
}
#capsule .video {
margin:1em auto 0 auto;
text-align:center;
}
#capsule .video video {
width:100%;
}

}