@charset "utf-8";
/* CSS Document */
#main{
position:relative;
width:100%;
overflow:hidden;
}
#main img{
width:100%;
height:auto;
padding-top:30px;
}
#main img:nth-of-type(2){display:none;}
#contents{
margin:0 auto;
padding-top:7em;
}
@media screen and (max-width: 768px) {
#main-visual span img{
width:1500px;
margin-top:10px;
margin-left: -750px; 
}
}
@media screen and (max-width: 640px) {
#main img:nth-of-type(1){display:none;}
#main img:nth-of-type(2){display:inline;}
#main-visual span img{
width:1000px;
margin-top:10px;
margin-left: -480px; 
}
}
#top_message{
position:absolute;
width:100%;
display:block;
top:100px;
left:8%;
margin:0; 
padding:0;
}
#top_copy{
color:#fff;
font-size:200%;
display:inline-block;
vertical-align:middle;
font-weight:500;
line-height:1.2;
padding-left:2em;
padding-bottom:0.5em;
}
#top_copy span{color:#f44779;}
#top_copy span:nth-of-type(2){
border:1px solid #f44779;
width:5em;
height:5em;
display:block;
border-radius:50%;
position:absolute;
bottom:-1em;
left:0;
}
#main p{
position:relative;
margin:0;
padding:0;
top:0;
left:0;
}
#top_message p{
color:#fff;
padding:0 0 0 4.7em;
font-size:90%;
font-family: 'Open Sans';
font-weight:600;
}
@media screen and (min-width:1200px) {
#top_message{
top:180px;
left:12%;
}
#top_copy{
font-size:250%;
padding-left:2em;
padding-bottom:0.5em;
}
#top_message p{padding:0 0 0 6em;}
}
@media screen and (max-width:768px) {
#top_message{
top:80px;
left:8%;
}
#top_copy{
font-size:150%;
padding-left:2em;
padding-bottom:0.2em;
}
#top_message p{
padding:0 0 0 4.5em;
font-size:70%;
}
}
#about1{
text-align:center;
margin-bottom:3em;
}
#about1 dl{
margin-top:3em;
}
#about1 dt{
font-size:150%;
padding-bottom:0.8em;
line-height:1.3;
}
#about1 dt span{
font-size:45%;
letter-spacing:0.2em;
}
#about1 ul{
font-size:80%;
text-align:center;
display:block;
padding-top:2em;
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#about1 li{
display:block;
width:45%;
line-height:1.7;
margin:0 15px 30px;
}
#about1 li img{
display:ininline-block;
width:100%;
height:auto;
margin:1em auto 0.5em;
}
#about1 li img:nth-of-type(1){
display:block;
width:80%;
height:auto;
}
#about1 li span{
font-size:110%;
display:inline-block;
}
#about1 li span:nth-of-type(n + 2){
margin-top:0.5em;
}
@media screen and (max-width:768px) {
#contents{
padding-top:1em;
width:100%;
}
#about1{padding-bottom:2em;}
#about1 dl{margin:1em auto 0;}
#about1 ul{font-size:70%;}
}
@media screen and (max-width: 640px) {
#contents{width:90%;}
#about1{
margin-bottom:0;
padding-bottom:0;
}
#about1 ul{
font-size:80%;
padding-top:1em;
}
#about1 li{
display:block;
width:100%;
margin-bottom:2em;
}
#about1 li:nth-of-type(2){float:none;}
#about1 li:nth-of-type(3){float:none;}
}
#about2{
clear:both;
background:#fff;
border:1px solid #999;
border-radius:10px;
padding:2em 0 2em 2em;
margin:1em auto 2em;
}
#re{
display:inline-block;
width:40%;
height:180px;
overflow:hidden;
margin-right:1.5em;
position:relative;
}
#re img{
position:absolute;
width:400px;
height:auto;
right:50%;
margin-right:-200px;
}
#about2 div{
display:inline-block;
vertical-align:top;
width:55%;
}
#about2 dl{
display:inline-block;
text-align:center;
padding-right:0.5em;
}
#about2 dd {font-size:85%;}
#about2 dd span{font-size:170%;}
#re1{
vertical-align:top;
color:#fff;
display:inline-block;
font-weight:bold;
font-size:100%;
}
#re1 a{
border:none;
border-radius:10px;
background:#5480ff;
display:block;
width:13em;
text-align:center;
padding:1em;
}
#re1 a:hover{
color:#fff;
background:#00b457;
}
#re2{
font-size:85%;
line-height:1.7;
width:100%;
padding-top:1.7em;
}
@media screen and (max-width:900px) {
#about2 dl{padding-right:0.1em;}
#about2 dd {font-size:85%;}
#re1{font-size:80%;}
#re1 a{
background:#5480ff;
width:12em;
padding:1.5em 0.3em;
}
}
@media screen and (max-width:768px) {
#about2{
clear:both;
background:#fff;
border:1px solid #999;
border-radius:10px;
padding:2em 1em 2em 2em;
margin-top:1em;
}
#about2 div{width:55%;}
#re{
width:40%;
height:250px;
margin-right:1em;
}
#re img{
width:350px;
height:auto;
right:50%;
margin-right:-175px;
}
#about2 section{
margin:0 auto;
text-align:center;
}
#about2 dl{
display:inline-block;
text-align:center;
padding-right:0.5em;
}
#about2 dd {font-size:85%;}
#about2 dd span{font-size:170%;}
#re1{
vertical-align:top;
color:#fff;
display:inline-block;
font-weight:bold;
font-size:100%;
}
#re1 a{
border:none;
border-radius:10px;
background:#5480ff;
display:block;
width:13em;
text-align:center;
padding:1em;
margin-top:0.5em;
}
#re2{
padding-top:1em;
font-size:80%;
}
}
@media screen and (max-width:640px) {
#about2{padding:2em;}
#about2 div{
width:100%;
margin:1em 0 0;
}
#about2 dl{padding-right:0;}
#re{
display:block;
width:100%;
height:250px;
margin-right:1.5em;
}
#re img{
position:absolute;
width:100%;
height:auto;
right:0;
margin-right:0;
}
#re2{
padding-top:1em;
font-size:90%;
}
}
@media screen and (max-width:500px) {
#re{
width:100%;
height:150px;
}
}
h3{
font-weight:normal;
font-size:150%;
text-align:center;
}
#about3{margin-bottom:2em;}
#about3 p{
text-align:center;
font-size:90%;
margin-bottom:2em;
}
#about3 ul{
width:100%;
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#about3 ul li{
width:32%;
margin-right:2%;
padding-bottom:1em;
}
#about3 ul li:nth-of-type(3){margin-right:0%;}
#about3 li dl{width:100%;}
#about3 li dt{
text-align:center;
padding:0.5em;
}
#about3 li:nth-of-type(1) dt{background:#ffe783;}
#about3 li:nth-of-type(2) dt{background:#ffbec7;}
#about3 li:nth-of-type(3) dt{background:#ffab8b;}
#about3 li dd img{
width:100%;
height:auto;
}
#about3 li dd span{
display:block;
padding:1em 1em 0;
text-align:justify;
line-height:1.7;
font-size:90%;
}
#about3 li:nth-of-type(1){background:#ffffd0;}
#about3 li:nth-of-type(2){background:#ffe4e8;}
#about3 li:nth-of-type(3){background:#ffd5c5;}
@media screen and (max-width:640px) {
#about3 ul{display:block;}
#about3 ul li{
width:100%;
margin-bottom:2em;
}
h3{font-size:130%;}
#about3 p{text-align:justify;}
#about3 p br{display:none;}
}
#about4 p{
text-align:center;
font-size:90%;
margin-bottom:2em;
}
#about4 p span{font-size:80%;}
#about4 ul{
width:100%;
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#about4 ul li:nth-of-type(1){
color:#ff2e80;
background:#ffe4e8;
margin-bottom:2em;
}
#about4 ul li:nth-of-type(2){
color:#5480ff;
background:#cfe7ff;
margin-bottom:2em;
}
#about4 ul li:nth-of-type(3){
color:#974000;
background:#ffe4ba;
}
#about4 ul li:nth-of-type(4){
color:#717071;
background:#ddd;
}
#about4 ul li{
width:48%;
margin-right:4%;
padding:3em;
}
#about4 ul li:nth-of-type(2),#about4 ul li:nth-of-type(4){margin-right:0%;}
#about4 li dl{width:100%;}
#about4 li dt{
text-align:center;
font-size:160%;
width:3em;
line-height:1;
margin:0 auto 1em;
padding:1em 1em 0.9em;
border-radius:2em;
}
#about4 li:nth-of-type(1) dt{border:1px solid #ff2e80;}
#about4 li:nth-of-type(2) dt{border:1px solid #5480ff;}
#about4 li:nth-of-type(3) dt{border:1px solid #974000;}
#about4 li:nth-of-type(4) dt{border:1px solid #717071;}
#about4 li dd{line-height:2;}
#about4 li dd img{
width:100%;
height:auto;
padding-top:1em;
}
@media screen and (max-width:768px) {#about4 li dt{font-size:120%;}}
@media screen and (max-width:640px) {
#about4 p{
text-align:justify;
margin-bottom:1em;
}
#about4 p br{display:none;}
#about4 p br:nth-of-type(2){display:inline;}
#about4 ul{display:block;}
#about4 ul li,
#about4 ul li:nth-of-type(1),
#about4 ul li:nth-of-type(2){
width:100%;
padding:2em 1em 1em;
font-size:90%;
margin-bottom:1em;
}
}