/*ヘッダーフッター消したの*/
.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%;
}
h4{
font-size: 2rem;
line-height: 1.5;
font-weight: bold;
color: #171c61;
margin-bottom: 10px;
}
img{
vertical-align:top;
}
section{
margin: 40px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
p {
font-size: 15px;
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;
}
h2 span, h3 span{
font-size: 2.5rem;
}
}
/*ヘッダー*/
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: #3f9bf4;
}
.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;
}
}
/*オススメ講座*/
.koza_bg {
margin: 0 calc(50% - 50vw);
padding: 40px 0;
background-image: url(/lp/general-b/img/koza-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.koza{
margin: 0 auto;
width: 480px;
position: sticky;
}
.koza img{
margin: 20px 0;
}
@media screen and (max-width:767px) {
.koza{
width: 100%;
padding: 0 20px;
}
}
/*ボックス*/
.box_bg{
background-color: #036eb6;
margin: 0 calc(50% - 50vw);
padding: 40px 0 100px;
}
.box-about {
margin: 0 auto;
width: 480px;
z-index: 0;
position: relative;
padding: 30px 0;
}
.box-about p{
color: #fff;
margin: 20px 0;
}
.box-about h2 span {
background-image: linear-gradient(135deg, #ffff5b 0%,#75f3ff 100%);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 15%;
padding-bottom: 0.2em; 
font-size: 3rem;
line-height: 1.75;
font-weight: bold;
color: #fff;
}
.box {
margin: 0 auto;
width: 480px;
z-index: 0;
position: relative;
padding: 30px 0;
}
.box::before {
content: "";
display: block;
width: 100vw;
height: 100%;
background-color: #ffff6e;
position: absolute;
z-index: -1;
top: 0;
border-radius: 20px;
}
.box + .box {
margin-top: 100px;
}
.box:nth-child(odd)::before {
left: -30px;
}
.box:nth-child(even)::before {
right: -30px;
}
.box-text{
margin: 10px 0;
}
.box h3 {
position: relative;
margin: 10px 0;
}
.box h3 img {
width: 90%;
}
@media screen and (max-width:767px) {
.box {
width: 100%;
padding: 20px 20px 20px 30px;
}
.box-b {
width: 100%;
padding: 20px 30px 20px 20px;
}
.box + .box {
margin-top: 80px;
}
.box-about {
width: 100%;
padding: 20px;
}
.box:nth-child(odd)::before {
left: -10px;
}
.box:nth-child(even)::before {
right: -10px;
}
.box_bg {
padding: 40px 0 80px;
}
}
/*吹き出し*/
.hukidashi-box {
margin: 0 auto;
width: 480px;
z-index: 0;
position: relative;
padding: 30px 0;
}
.hukidashi-box h2 {
margin: 20px 0;
text-align: center;
}
.hukidashi-box h2 span{
background-image: linear-gradient(135deg, #ffff5b 0%,#75f3ff 100%);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 15%;
padding-bottom: 0.2em; 
font-size: 3rem;
line-height: 1.75;
font-weight: bold;
}
.hukidashi-box-a {
width: 60%;
margin-right: 40%;
}
.hukidashi-box-b {
width: 60%;
margin-left: 40%;
}
.hukidashi-box-a img ,.hukidashi-box-b img{
width: 100%;
}
@media screen and (max-width:767px) {
.hukidashi-box {
width: 100%;
padding: 20px;
}
.hukidashi-box-a {
width: 80%;
margin-right: 20%;
}
.hukidashi-box-b {
width: 80%;
margin-left: 20%;
}
}
/*カリキュラム*/
.curriculum_bg{
background-color: #a7dff9;
margin: 0 calc(50% - 50vw);
padding: 40px 0;
}
.curriculum{
width: 480px;
margin: 0 auto;
}
.curriculum-box {
z-index: 0;
position: relative;
padding: 30px 20px;
background-color: #fff;
border-radius: 20px;
margin: 30px auto;
}
.curriculum-box h3{
margin: 20px 0;
text-align: center;
}
.curriculum-box h3 span{
background-image: linear-gradient(135deg, #ffff5b 0%,#75f3ff 100%);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 15%;
padding-bottom: 0.2em; 
font-size: 3rem;
line-height: 1.75;
font-weight: bold;
}
.step{
display: flex;
margin: 15px 0;
}
.step img {
width: 15%;
height: 100%;
}
.step p{
margin: 0 10px;
}
.step span{
font-size: 2rem;
font-weight: bold;
}
.step .step1 span{
color: #49c27e;
}
.step .step2 span{
color: #e56960;
}
.step .step3 span{
color: #289ecc;
}
.step .step4 span{
color: #fbb603;
}
@media screen and (max-width:767px) {
.curriculum{
width: 100%;
padding: 20px;
}
}
/*オープンキャンパス*/
.oc_bg {
background-image: url(/lp/general-b/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%;
}
}
/*よくある質問*/
.faq{
margin: 0 auto;
width: 480px;
}
.faq_bg{
background-color: #daeaf5;
margin: 0 calc(50% - 50vw);
padding: 40px 0;
text-align: center;
}
.faq_top{
max-width: 480px;
margin: 0 auto;
}
.accordion {
margin: 0 auto;
}
.accordion-item {
margin-bottom: 2rem;
}
.accordion-check {
display: none;
}
.accordion-label {
position: relative;
display: block;
cursor: pointer;
padding: 15px;
border-right: 40px solid #036EAE;
border-top: solid 3px #036EAE;
border-left: solid 3px #036EAE;
border-bottom: solid 3px #036EAE;
background-color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-align: left;
}
.accordion-label::after {
width: 20px;
transform: translateY(-50%);
color: #ffffff;
font-size: 30px;
content: '+';
z-index: 2;
position: absolute;
right: -30px;
top: 50%;
}
.accordion-box {
height: 0;
overflow: hidden;
opacity: 0;
background-color: #fff;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 2rem;
text-align: left;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-label span{
color: #036EAE;
font-size: 2rem;
}
.accordion-box span{
color: #ff7178;
font-size: 2rem;
}
.accordion-box{
font-size: 20px;
}
@media screen and (max-width:767px) {
.faq_bg{
margin: 0;
}
.faq{
width: 100%;
}
.accordion {
width: 100%;
}
.faq_top img{
width: 100%;
}
.accordion {
width: 90%;
}
.accordion-label {
padding: 10px;
font-size: 15px;
}
.accordion-label span, .accordion-box span{
font-size: 1.5rem;
}
.accordion-item {
margin-bottom: 1.5rem;
}
.accordion-check:checked~.accordion-box {
padding: 1rem;
}
}
/*フッター*/
footer {
text-align: center;
margin: 40px 0 200px;
}
@media screen and (max-width:767px) {
footer {
margin: 20px 0 80px;
}
}
/*ボタン*/
.btn_bg{
background-color: #fff;
margin: 0 calc(50% - 50vw);
padding: 40px 0;
}
.lp_btn{
display: flex;
margin: 0 auto;
justify-content: center;
}
.lp_btn a {
width: 450px;
padding: 0 50px;
}
.lp_btn img {
width: 100%;
}
@media screen and (max-width:767px) {
.btn_bg{
margin: 0;
padding: 20px 0;
}
.lp_btn {
display: block;
}
.lp_btn a {
width: 100%;
padding: 10px 15px;
}
}
/*アニメーション*/
.js-fade {
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.scroll {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/*フローティング*/
.floating-banner {
position: fixed;
bottom: 0;
z-index: 999;
background-color: #ffff80;
display: flex;
justify-content: center;
width: 100%;
}
.floating-banner__image {
max-width: 100%; 
}
.floating-button{
display: block;
width: 50vw;
max-width: 400px;
padding: 20px 20px;
}
.cta_wrap_short{
display: none;
}
@media screen and (max-width:767px) {
.floating-button{
padding: 0;
max-width: 100%;
}
}
/*飾り*/
.kazari01{
position: absolute;
width: 150px;
right: -40px;
top: -25px;
}
.kazari02{
position: absolute;
width: 150px;
left: -150px;
top: -25px;
}
.kazari03{
position: absolute;
top: -20px;
right: -100px;
z-index: -1;
width: 30%;
}
.kazari04{
position: absolute;
top: -20px;
left: -100px;
z-index: -1;
width: 30%;
}
.kazari05{
position: absolute;
right: -100px;
z-index: -1;
width: 30%;
bottom: 0;
}
.kazari06{
position: absolute;
top: -20px;
left: -100px;
z-index: -1;
width: 30%;
}
.kazari07{
position: absolute;
top: -20px;
right: -200px;
z-index: -1;
width: 60%;
}
@media screen and (max-width:767px) {
.kazari01{
width: 100px;
right: 0px;
top: -30px;
}
.kazari02{
width: 100px;
left: 10px;
top: -40px;
}
.kazari03, .kazari06, .kazari07{
display: none;
}
.kazari04{
top: -20px;
left: 0px;
width: 30%;
}
.kazari05{
right: 0px;
width: 30%;
bottom: -20px;
}
}