@charset "utf-8";

#content dt {
color: #26a3de;
border-left: 4px solid #26a3de;
font-weight: bold;
padding-left: 6px;
}
#content dd:nth-last-child(1) {
margin-bottom: 0;
}
#content dd ul {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#content dd p {
border-radius: 3px;
background: #eee;
}

#side iframe {
width: 100%;
} 

@media (max-width: 560px){
.hero h1 div {
font-size: 1.5rem;
bottom: 3px;
}

#content {
padding-bottom: 60px;
}
#content dt {
font-size: 1.6rem;
margin-bottom: 10px;
}
#content dd {
margin-bottom: 30px;
}
#content dd p {
padding: 3px 6px;
margin-bottom: 6px;
font-size: 1.3rem;
}
#content dd ul {
padding-bottom: 8px;
}
#content dd li {
padding-bottom: 8px;
}
#content dd li a {
font-size: 1.5rem;
}

#side iframe {
height: 300px;
}
}

@media (min-width: 561px){
#main {
display: flex;
}
#side {
padding-left: 20px;
box-sizing: border-box;
}

#side iframe {
height: 100%;
}
}

@media (min-width:561px) and (max-width:1023px){
.hero h1 div {
font-size: 2.4rem;
bottom: 10px;
}

#content {
width: 50%;
}
#side {
width: 50%;
}
	
#content dt {
font-size: 1.8rem;
margin-bottom: 16px;
}
#content dd {
margin-bottom: 40px;
}
#content dd p {
padding: 6px 12px;
margin-bottom: 8px;
}
#content dd ul {
padding-bottom: 10px;
}
#content dd li {
padding-bottom: 10px;
}
}

@media (max-width: 1023px){
.hero h1 div {
width: 90%;
}
.hero h1 span {
margin-top: 3px;
}
#content dd ul li {
width: 50%;
box-sizing: border-box;
}
}

@media (min-width: 1024px){
.hero {
margin-top: 110px;
}
.hero h1 div {
width: 1024px;
font-size: 32px;
font-size: 3.2rem;
bottom: 30px;
}
.hero h1 span {
margin-top: 5px;
}

#content {
width: 664px;
}
#side {
width: 360px;
}	
#content dt {
font-size: 20px;
font-size: 2rem;
margin-bottom: 20px;
}
#content dd {
margin-bottom: 50px;
}
#content dd p {
padding: 8px 16px;
margin-bottom: 10px;
}
#content dd ul {
list-style-type: square;
padding-bottom: 20px;
}
#content dd li {
padding-left: 8px;
margin-left: 40px;
}
}