/*全体的なこと*/
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, li{
overflow: hidden;
color: #303030;
font-size: 15px;
line-height: 1.7rem;
}
a {
text-decoration: none;
}
ul,li {
list-style: none;
}
.h2-img{
width: 100%;
}
h3{
font-size: 2rem;
line-height: 1.75;
}
img{
vertical-align:top;
width: 100%;
}
section{
margin: 40px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
.lp {
border: 1px solid #000;
background-attachment: fixed;
background-size: 32px 32px;
background-position: 50% 50%;
background-image: repeating-linear-gradient(90deg, #e6e6e2, #e6e6e2 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #e6e6e2, #e6e6e2 1px, #fff 1px, #fff 32px);
max-width: 480px;
margin: 0 auto;
}
.lp-bg{
background-attachment: fixed;
background-size: cover;
background-position: center;
background-image: url(https://www.ksb.ac.jp/lp/it/img/bg.png);
display: flex;
}
@media screen and (max-width:767px) {
body {
min-width: 100%;
}
.main{
width: 100%;
}
p {
font-size: 15px;
line-height: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
h2{
text-align: center;
}
.lp{
width: 100%;
margin: 0 auto;
border: 0px solid #000;
}
}
/*ヘッダー*/
header {
position: sticky;
z-index: 2;
top: 0;
width: 100%;
height: 60px;
background-color: #fff;
padding: 10px 0;
}
.logo img {
height: 60px;
width: auto;
}
@media screen and (max-width:767px) {
header{
height: 40px;
}
.logo img{
height: 50px;
}
}
/*TOP画像*/
.lpimg{
width: 100%; 
text-align: center;
height: auto;
}
.lpimg img{
width: 100%; 
}
.sp {
display: none;
}
/*ボタン*/
.btn_bg{
position: relative;
margin: 0 auto;
padding: 15px 10px;
background-color: #ffff96;
}
.lp_btn img {
width: 100%;
margin: 0 auto;
}
.lp_btn {
display: flex;
width: 100%;
margin: 0 auto;
}
/*目指せる職業＆こんな人におすすめ*/
.job-list {
margin-top: 10px;
}
.job-list li {
padding-left: 12px;
position: relative;
margin-bottom: 5px;
}
.job-list li::before {
content: "";
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
position: absolute;
top: 7px;
left: 0;
}
.osusume_bg{
margin: 30px;
padding: 20px;
border-radius: 20px;
background: #f0f0e6;
}
.osusume_img{
width: 40%;
height: auto;
}
.osusume {
display: flex;
flex-direction: column; 
margin: 0 auto;
}
.osusume_item{
display: flex;
align-items: center; 
gap: 15px; 
}
@media screen and (max-width:767px) {
.osusume_item{
display: flex;
}
}
/*ポイント*/
.point_title_bg {
background-color: #d4eede;
padding: 15px 0;
}
.point_bg{
position: relative;
margin: 0 auto;
}
.point{
width: 100%; 
height: auto;
}
.point img{
width: 100%; 
}
.point_memo{
background-color: #ffffff;
position: relative;
margin: 20px 15px;
border: solid 3px #595757;
padding: 15px;
}
h3.third_point1 {
margin: 20px 0;
font-weight: bold;
font-size: 22px;
line-height: 2rem;
color: #2caca5;
}
h3.third_point2 {
margin: 20px 0;
font-weight: bold;
font-size: 22px;
line-height: 2rem;
color: #ff7178;
}
h3.third_point3 {
margin: 20px 0;
font-weight: bold;
font-size: 22px;
line-height: 2rem;
color: #134c80;
}
.text_area {
margin: 20px 0 10px;
}
.point_b1{
font-weight: bold;
font-size: 1.2rem;
line-height: 1rem;
color: #2caca5;
}
.point_s1{
font-size: 16px;
color: #2caca5;
font-weight: bold;
}
.point_b2{
padding: 5px 10px;
margin: 10px auto;
background: #ff7178;
}
.point_b2 p{
font-weight: bold;
font-size: 1.2rem;
color: #fff;
}
.point_s2{
font-size: 16px;
color: #ff7178;
font-weight: bold;
}
.point_b3{
font-weight: bold;
font-size: 1.2rem;
line-height: 1rem;
color: #134c80;
}
.pont_img{
width: 100%;
}
@media screen and (max-width:767px) {
.point_memo {
}
}
/*在校生の声*/
.voice_bg{
position: relative;
margin: 40px auto 20px;
padding: 15px;
background-color: #f6f6ee;
border-radius: 10px;
}
.voice_img{
width: 100%;
}
.voice_b{
font-weight: bold;
}
/*OC*/
.motto{
width: 70%;
margin: 0 auto;
}
.oc-title {
text-align: center;
}
.oc-title-box {
color: #fff;
}
.oc-title-box span {
font-size: 15px;
background: #000;
color: #fff;
padding: 5px 8px 5px;
font-weight: bold;
}
.oc-h2 {
margin-bottom: 30px;
}
.oc-h2-box {
display: block;
margin-bottom: 15px;
position: relative;
}
.oc-h2-box span {
letter-spacing: 0.05em;
font-size: 23px;
font-weight: bold;
position: relative;
border: 2px solid #000;
padding: 5px 6px;
background-color: #fff;
}
.oc_bg{
position: relative;
padding: 15px;
margin: 15px 15px 30px;
background-color: #d2ecfa;
border-radius: 10px;
}
.oc-link{
margin-bottom: 20px;
}
/*よくある質問*/
.faq{
position: relative;
margin: 0 auto;
	padding: 20px 20px;
	background-color: #d4eede;
}
.faq_bg{
text-align: center;
}
.faq_top {
margin: 20px;
}
.faq_top img {
width: 100%;
}
.accordion {
margin: 0 auto;
}
.accordion-item {
margin-bottom: 1.5rem;
}
.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: 15px;
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: 1.5rem;
text-align: left;
}
.accordion-check:checked+.accordion-label:after {
content: '-';
}
.accordion-label span{
color: #036EAE;
font-size: 1.5rem;
}
.accordion-box span{
color: #ff7178;
font-size: 1.5rem;
}
.accordion-box{
font-size: 15px;
}
@media screen and (max-width:767px) {
.faq_bg{
margin: 0;
}
.accordion {
width: 100%;
}
.faq_top img{
width: 100%;
}
.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;
padding: 20px 0 120px;
background:linear-gradient(45deg, #008880, #adffd3);
}
/*フローティング*/
.floating-banner {
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
width: 480px;
background-color: #fff352;
}
.floating-button {
display: block;
width: 50%;
padding: 10px 5px;
}
.floating-banner__image {
max-width: 100%;
}
@media only screen and (max-width: 767px) {
.floating-banner {
width: 100%;
}
}
/*アニメーション*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeUpTrigger{
opacity: 0;
}