img{
vertical-align:top;
}
/*全体的なこと*/
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;
font-family: "Lato","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
line-height: 1.5;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
p {
overflow: hidden;
color: #303030;
font-size: 15px;
line-height: 2rem;
}
a {
text-decoration: none;
}
ul,li {
list-style: none;
}
.h2-img{
width: 100%;
}
h3{
font-size: 2rem;
line-height: 1.75;
vertical-align:top;
}
section{
margin: 10px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
.lp{
max-width: 480px;
margin: 0 auto;
border: 1px solid #000;
background: #fff;
}
.lp-bg{
background-attachment: fixed;
background-size: cover;
background-position: center;
background-image: url('https://www.nsb.ac.jp//lp/oc/img/bg.png');
}
@media screen and (max-width:767px) {
body {
min-width: 100%;
}
.main{
width: 100%;
}
p {
font-size: 14px;
line-height: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
h2{
text-align: center;
}
.lp{
max-width: 100%;
border: 0px solid #000;
}
}
/*ヘッダー*/
header {
position: fixed;
z-index: 2;
top: 0;
height: 40px;
background-color: #fff;
padding: 10px;
width: 100%;
}
.logo img {
height: 40px;
}
/*TOP画像*/
.lpimg{
width: 100%; 
text-align: center;
height: auto;
}
.lpimg img {
width: 100%;
margin-top: 60px;
}
/*ボタン*/
.btn_bg{
background-color: #fff;
}
.lp_btn{
display: flex;
margin: 0 auto;
justify-content: center;
}
.lp_btn a {
width: 33%;
padding: 8px;
}
.lp_btn img {
width: 100%;
}
.lp_btn_oc{
width: 90%;
margin: 0 auto;
padding-bottom: 20px;
}
.lp_btn_oc img{
width: 100%;
margin: 3px 0;
}
/*学べる分野*/
.job{
margin: 0 auto;
width: 100%;
}
.job_bg{
background: #84ccce;
background-image: linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 0),linear-gradient(rgba(255,255,255,0.3) 1px, transparent 0), linear-gradient(rgba(255,255,255,0.3) 1px, transparent 0);
background-size: 30px 30px;
padding: 30px 0;
}
.job-box{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
width: 100%;
}
.job-box-a {
margin: 10px;
font-weight: 500;
background: #FFF;
border-radius: 40px;
width: 42%;
text-align: center;
padding: 6px;
border: 1.5px solid #000;
display: inline-block;
box-shadow: 6px 6px 0 0 #f08080, 6px 6px 0 1px #000;
}
@media screen and (max-width:767px) {
.job-box-a {
padding: 5px;
margin: 8px;
}
.job-box-a p{
font-size: 13px;
}
}
/*ポップアップ*/
center{
display: none;
}
.modal-wrapper {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 40px 10px;
text-align: center;
}
.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: ""
}
.modal-wrapper .modal-window {
box-sizing: border-box;
display: inline-block;
z-index: 20;
position: relative;
width: 70%;
max-width: 600px;
border-radius: 2px;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
max-height: 80vh;
overflow-y: auto;
text-align: left
}
.modal-overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8)
}
.modal-wrapper .modal-close {
z-index: 20;
position: absolute;
top: 36px;
right: 25px;
width: 34px;
color: #95979c !important;
font-size: 45px;
font-weight: 700;
line-height: 35px;
text-align: center;
text-decoration: none;
text-indent: 0;
}
.modal-wrapper .modal-close:hover {
color: #2b2e38 !important
}
.modal-img {
width: 100%;
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
.far {
font-weight: 400;
}
.fa-times-circle:before {
content: "\f057";
}
@media screen and (max-width:767px) {
.modal-wrapper .modal-window {
width: 90%;
}
.modal-wrapper .modal-close {
top: 20px;
right: 3px;
font-size: 30px;
}
}	
/*オープンキャンパス*/
.oc_bg {
background: linear-gradient(to top,#65d1e2 0%,#f3fa89 52%,#ffd994 100%);
padding: 40px 0;
position: relative;
}
.oc{
width: 100%;
margin: 0 auto;
}
.oc p{
margin: 20px 0;
}
.oc-box{
padding: 0.7em;
margin: 0.7em ;
background: #fff;
}
.oc-time {
text-align: center;
margin: 20px 0;
}
.oc_title img, .oc-time-title img{
width: 100%;
}
.oc-time-title-a img, .oc-time-title-b img {
width: 80%;
}
.fa-circle-check{
content: "\f057";
}
/*来校*/
.oc-time-title-a{
background: linear-gradient(180deg,rgba(244,244,244,0) 50% 50%,#ffd994 50%);
background-size: auto auto;
margin: 0;
}
.scroll_content-a { 
display: flex;
max-width: 100%;
overflow-x: auto;
background-color: #ffd994;
}
.point{
position: sticky;
}
.point-box1 {
padding: 0.5em;
margin: 1em 0;
background: #f5ac3f;
}
.point-box1 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.point li {
font-size: 16px;
line-height: 2.5rem;
}
.pop1 {
width: 180px;
position: absolute;
top: 330px;
left: -140px;
}
.oc-btn{
width: 70%;
margin: 20px auto;
}
.oc-btn img{
width: 100%;
}
.support h2{
font-size: 1.5rem;
margin: 20px 0;
text-align: center;
}
.support p{
font-size: 16px;
line-height: 2rem;
margin-bottom: 20px;
}
.support img{
width: 100%;
}
/*学校説明*/
.point-box2 {
padding: 0.5em;
margin: 1em 0;
background: #84ccce;
}
.point-box2 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.pop2 {
width: 180px;
position: absolute;
top: 150px;
right: -120px;
}
/*個別*/
.point-box3 {
padding: 0.5em;
margin: 1em 0;
background: #65b2e2;
}
.point-box3 h2 {
font-size: 1.2rem;
color: #fff;
font-weight: bold;
text-align: center;
}
.pop3 {
width: 180px;
position: absolute;
top: 91px;
left: -154px;
}
/*スケジュール*/
.scroll_content-a li ,.scroll_content-b li { 
width: 90%;
padding: 20px;
margin: 5px;
flex-shrink: 0;
}
.scroll_content-a img ,.scroll_content-b img{ 
width: 100%;
}
.scroll_content-a::-webkit-scrollbar {
height: 12px; 
}
.scroll_content-b::-webkit-scrollbar {
height: 12px; 
}
.scroll_content-a::-webkit-scrollbar-thumb {
background: #aaa; 
border-radius: 6px; 
}
.scroll_content-b::-webkit-scrollbar-thumb {
background: #aaa; 
border-radius: 6px; 
}
.scroll_content-a::-webkit-scrollbar-track {
background: #ddd; 
border-radius: 6px; 
}
.scroll_content-b::-webkit-scrollbar-track {
background: #ddd; 
border-radius: 6px; 
}
.oc_btn{
display: flex;
}
.oc_btn img{
margin: 20px;
}
@media screen and (max-width:767px) {
.oc_title img, .oc-time-title img{
width: 100%;
}
.oc-time-title-a img, .oc-time-title-b img {
width: 80%;
}
.scroll_content-a, .scroll_content-b{
padding: 0px;
}
.scroll_content-a li, .scroll_content-b li {
width: 280px;
padding: 10px;
}
.pop1,.pop2 ,.pop3 {
display: none;
}
}
/*よくある質問*/
.faq_bg{
background-color: #84ccce;
padding: 40px 0;
text-align: center;
}
.faq_top img{
width: 100%;
}
.accordion {
width: 90%;
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 #26798d;
border-top: solid 3px #26798d;
border-left: solid 3px #26798d;
border-bottom: solid 3px #26798d;
background-color: #fff;
font-size: 16px;
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;
transition: all .5s;
}
.accordion-check:checked~.accordion-box {
height: auto;
opacity: 1;
padding: 1rem;
text-align: left;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-label span{
color: #26798d;
font-size: 1.8rem;
}
.accordion-box span{
color: #ff7178;
font-size: 1.8rem;
}
.accordion-box{
font-size: 20px;
}
@media screen and (max-width:767px) {
.accordion-label {
padding: 10px;
font-size: 15px;
}
.accordion-label span, .accordion-box span{
font-size: 1.5rem;
}
}
/*フッター*/
footer {
text-align: center;
margin: 10px 0;
}
}