@charset "utf-8";

/* ------------------------------------------------------------ firstview */
#firstview { background: url(../images/index/bg_001.png) center top no-repeat; background-size: cover;}
#firstview h2 { padding: 10px 0 80px; text-align :center;}

/* ------------------------------------------------------------ inner */
#top-firstview .wrapper {display:block text-align:center; margin: 10px auto; width:50px;}
/* ------------------------------------------------------------ about */
#about { background: url(../images/index/bg_002.gif) center top; background-repeat: repeat; padding: 60px 0; }
#about .wrapper { margin: 0 0 20px; background: #fff9f0}
#about .wrapper img { float: left; border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px;}
#about .wrapper div { float: left; width: 425px;  border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; padding:10px 35px 45px;}
#about .wrapper div h3 { color: #69c4bb; text-align :center; padding: 1px 0 10px; font-size: 50px; font-family: 'quicksandbold';}
#about .wrapper div h3 span { display: block; font-size:16px; color: #000;}
#about .wrapper div p { font-size: 14px; line-height:2.4;}
#about ul li { float: left; width: 504px; padding: 300px 20px 50px; text-align: center; }
#about ul #information { background: url(../images/index/pic_002.jpg) center center no-repeat; margin: 0 12px 0 0; }
#about ul #ranking { background: url(../images/index/pic_003.jpg) center center no-repeat; }
#about ul #student { background: url(../images/index/student-ladies.jpg) center center no-repeat; margin: 0 12px 0 0; }
#about ul #advicepanda { background: url(../images/index/advicepanda.jpg) center center no-repeat; }
#about ul li div { background: url(../images/index/bg_02.png); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 15px 35px 20px;}
#about ul li div h3 { padding: 0 0 10px; text-align :center;}
#about ul li div h3 span { font-size: 42px; color: #69c4bb; display: block; font-family: 'quicksandbold';}
#about ul li div p.btn { padding: 15px 0 0;}
#about ul li div p.btn a {background: url(../images/index/arrow_01.gif) 97% center no-repeat #69c4bb; color: #fff; font-weight: bold;}

/* 2020/03/06 渡辺追記 */
#about .flexcont {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-width: 1100px;
  background: #fff9f0;
  padding-bottom: 20px;
}
#about .flexcont > .flex {
  display: flex;
  flex-wrap: wrap;
  width: 94vw;
  max-width: 500px;
  margin: 0;
}
#about .flexcont > .flex > h3 {
  color: #69c4bb;
  text-align :center;
  padding: 1px 0 10px;
  font-size: 50px;
  font-family: 'quicksandbold';
  width: 100%;
}
#about .flexcont > .flex > img {
  width: 94vw;
  height: 66.4vw;
  max-width: 500px;
  max-height: 353.3px;
}

/* ------------------------------------------------------------ bnr*/
#sns { padding: 50px 0 50px; }
#sns ul { margin-left: -31px; padding: 75px 0 0; }
#sns ul li { float: left; width: 346px; margin: 0 0 0 31px; }
#sns .sns-fb { float: right; width: 540px; }
#sns .sns-fb .fb-page { width: 540px !important; }
#sns .sns-fb .fb-page span { width: 540px !important; }
#sns .sns-fb .fb-page span iframe { width: 540px !important; float: right; }
#sns .sns-tweet { float: left; width: 1080px; text-align:center }

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ firstview */
#firstview { background: url(../images/index/bg_001.png) center top no-repeat; background-size: cover;}
#firstview h2 { padding: 10px 0 40px; text-align :center;}
#firstview h2 img { width: 200px; height: auto;}


/* ------------------------------------------------------------ about */
#about { background: url(../images/index/bg_002.gif) center top; background-repeat: repeat; padding: 25px 0;}
#about .wrapper { margin: 0 0 20px;}
#about .wrapper img { float: none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; width: 100%; height: auto;}
#about .wrapper div { float: none; width: 94%;  background-color: #fff9f0; border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; padding: 10px 3% 30px; }
#about .wrapper div h3 { color: #69c4bb; text-align :center; padding: 20px 0; font-size: 30px;}
#about .wrapper div h3 span { display: block; font-size:16px; color: #000;}
#about .wrapper div p { font-size: 15px; line-height: 30px;}
#about ul li { float: none; width: 94%; padding: 150px 3% 20px; text-align: center; border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}
#about ul #information { background: url(../images/index/pic_002.jpg) center center no-repeat; margin: 0 0 15px;}
#about ul #ranking { background: url(../images/index/pic_003.jpg) center center no-repeat; }
#about ul li div { background: url(../images/index/bg_02.png); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 15px 3% 20px;}
#about ul li div h3 { padding: 0 0 10px; text-align :center;}
#about ul li div h3 span { font-size: 24px; color: #69c4bb; display: block; }
#about ul li div p.text { font-size: 13px; text-align: left;}
#about ul li div p.btn { padding: 15px 0 0;}
#about ul li div p.btn a {background: url(../images/index/arrow_01.gif) 97% center no-repeat #69c4bb; color: #fff; font-weight: bold;}

/* ------------------------------------------------------------ bnr*/
#sns { padding: 25px 0 25px; text-align: center;}
#sns .cfx .sns-fb { float: none; width: 100%; }
#sns .cfx .sns-fb .fb-page { width: 100% !important; }
#sns .cfx .sns-fb .fb-page span { width: 100% !important; }
#sns .cfx .sns-fb span iframe { width: 100% !important; }
#sns .cfx .sns-tweet { padding: 30px 0 0; float: none; width: 100%; }
#sns ul { margin-left: 0; padding: 30px 0 0; }
#sns ul li { float: none; width: 100%; margin: 0 0 15px; }
#sns ul li img { width: 100%; height: auto;}

}