/*ヘッダーフッター消したの*/
.l-header {
display: none;
}
/*全体的なこと*/
body {
position: relative;
min-width: 980px;
height: 100%;
background: #fff;
color: #222;
margin: 0;
word-wrap: break-word;
letter-spacing: .1em;
font-weight: 400;
font-size: 1.4rem;
line-height: 1.5;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
.main {
margin: 0 auto;
max-width: 480px;
}
a{
 display: block;
}
.h2-img{
width: 100%;
}
h3{
font-size: 2rem;
line-height: 1.75;
font-weight: bold;
}
img{
vertical-align:top;
}
section{
margin: 40px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
p {
font-size: 14px;
line-height: 1.7em;
}
@media screen and (max-width:767px) {
body {
min-width: 100%;
}
.main{
width: 100%;
}
.pc {
display: none;
}
.sp {
display: block;
}
.br-sp {
display: block;
}
}
/*ヘッダー*/
header {
position: fixed;
z-index: 2;
top: 0;
width: 100%;
height: 80px;
background-color: #fff;
padding: 10px 20px;
}
.logo img {
height: 60px;
}
@media screen and (max-width:767px) {
header{
height: 60px;
padding: 10px 0px;
}
.logo img{
height: 50px;
}
}
/*TOP画像*/
.lpimg {
width: 100%;
text-align: center;
height: auto;
background-color: #dbf3fe;
}
.lpimg img {
width: 800px;
margin-top: 80px;
}
.lpimg-last{
margin: 0 calc(50% - 50vw);
}
.lpimg-last img{
width: 100%; 
}
@media screen and (max-width:767px) {
.lpimg img {
margin-top: 60px;
width: 100%;
}
.lpimg-last{
margin: 0;
}
}
/*ボタン*/
.btn_bg{
background: linear-gradient(90deg, rgb(72, 168, 217), rgb(118, 224, 238));
margin: 0 calc(50% - 50vw);
padding: 40px 0;
}
.lp_btn {
display: flex;
margin: 0 auto;
justify-content: center;
max-width: 480px;
}
.lp_btn a{
padding: 0 20px;
}
.lp_btn img {
width: 100%;
}
@media screen and (max-width:767px) {
.lp_btn a{
padding: 0 10px;
}
.btn_bg {
padding: 20px 0;
}
}
/*アバウト*/
.worries_bg {
background-image: url(/lp/general/img/worries-bg.png);
margin: 0 calc(50% - 50vw);
padding: 40px 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.worries {
margin: 0 auto;
width: 480px;
position: sticky;
}
.worries-box1 {
padding: 1em;
margin: 2em 0;
color: #2c2c2f;
background: #69aed3;
}
.worries-box1 h2 {
font-size: 2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.worries-box2 {
padding: 1em;
margin: 1em 0;
border: solid 3px #000000;
background: #fff;
margin: 1em auto;
}
.worries-box2 p {
font-size: 1.5rem;
text-align: center;;
}
.pop1 {
width: 100px;
position: absolute;
top: 250px;
left: -100px;
}
.pop2 {
width: 100px;
position: absolute;
top: 250px;
right: -100px;
}
.worries-box3 {
padding: 1em;
background: #ffffe5;
}
.worries-box3 img{
width: 100%;
margin: 20px 0;
}
.worries-box3-2column-a p{
margin: 20px;
}
@media screen and (max-width:767px) {
.worries_bg {
padding: 0px;
}
.worries{
width: 90%;
}
.worries-box1 {
padding: 10px;
}
.worries-box2 {
width: 100%;
padding: 10px 15px;
}
.pop1 {
width: 60px;
top: 0px;
left: -40px;
}
.pop2{
width: 60px;
top: 0px;
right: -40px;
}
.worries-box3-2column-a p{
margin: 0px;
}
.worries-box3 {
margin: 20px 0;
}
}
/*目指せる職業*/
.job{
margin: 0 auto;
}
.job_bg{
background-color: #a7dff9;
margin: 0 calc(50% - 50vw);
padding: 40px 0;
display: flex;
}
.job-box{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
width: 800px;
}
.job-box-a {
margin: 10px;
font-weight: bold;
background: #FFF;
border-radius: 40px;
width: 28%;
text-align: center;
padding: 10px;
border: 1px solid #000;
box-shadow: 5px 10px 0px #adb4de;
}
@media screen and (max-width:767px) {
.job, .job-box{
width: 100%;
}
.job_bg{
margin: 0;
}
.job-box-a {
padding: 10px;
margin: 10px;
width: 45%;
}
}
/*ポップアップ*/
button {
display: contents;
}
.modal {
display: none;
position: fixed;
z-index: 8887;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
transition: all 1s ease-in-out;
}
.modal-container .img {
background: #f1f1f1;
margin-bottom: 15px;
}
.modal-container p {
margin-bottom: 10px;
}
.modal-container p:last-child {
margin-bottom: 0;
}
.modal-content {
background: #FFF;
overflow-y: auto;
padding: 20px 25px;
width: 90%;
max-width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: show 0.6s linear 0s;
filter: drop-shadow(0px 2px 6px #777);
}
.modal-top {
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}
.modal-close {
font-size: 2rem;
padding: 0 8px;
background: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
}
.modal-close:hover, .modal-close:focus {
text-decoration: none;
cursor: pointer;
}
.modal-title {
color: #FFF;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
/*ポイント*/
.point_bg:after {
background-color: #daeaf5;
border-radius: 999px 0 0 999px;
content: "";
display: block;
height: 500px;
position: absolute;
right: 0;
top: 0;
width: 40vw;
z-index: -1;
margin: 0 calc(50% - 50vw);
}
.point_bg {
margin-bottom: 80px;
position: relative;
z-index: 1;
}
.point_bg.-reverse:after {
border-radius: 0 999px 999px 0;
left: 0;
right: auto;
}
.point-title, .point-img{
text-align: center;
}
.point-title img{
width: 200px;
}
.point-txt{
margin: 20px 0;
}
@media screen and (max-width:767px) {
.point, .h2-img{
width: 90%;
}
.point h2{
text-align: center;
}
.point-img img{
width: 100%;
}
.point-title img{
width: 30%;
}
.point_bg {
margin-bottom: 40px;
}
.point_bg:after {
height: 400px;
width: 60vw;
top: 100px;
}
}
/*オープンキャンパス*/
.oc_bg {
background-image: url(/lp/general/img/oc-bg.png);
margin: 0 calc(50% - 50vw);
padding: 40px 0;
background-repeat: no-repeat;
 background-size: cover;
background-position: center;
}
.oc {
width: 480px;
margin: 0 auto;
}
.oc p{
margin: 20px 0;
}
.oc_btn img{
margin: 20px;
}
@media screen and (max-width:767px) {
.oc{
width: 90%;
}
.oc_btn img{
width: 90%;
}
}
/*フッター*/
footer {
text-align: center;
margin: 40px 0;
}
@media screen and (max-width:767px) {
footer {
margin: 20px 0;
}
}
/*アニメーション*/
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}