/*全体的なこと*/
body:not(#site_index) {
padding-top: 0px;
}
header, .sp_menu #global_header, .breadcrumbs, .sns_p, .sns_icon, .cta_wrap_short, footer, #fixed_bottom_nav, .lp-senyo {
display: none;
}
.lp-bg{
display: flex;
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);
}
.lp {
max-width: 480px;
margin: 0 auto;
border: 1px solid #000;
background: #fff;
}
section {
margin-top: 0px;
}
.text_area {
margin-bottom: 20px;
}
.text_area span{
font-size: 1.5rem;
font-weight: bold;
color: #ff6a1f;
}
h2{
width: 100%;
margin: 0 auto;
}
h2 img{
width: 100%;
}
img{
vertical-align:top;
}
@media screen and (max-width:767px){
.lp{
width: 100%;
border: 0px solid #000;
}
}
/*ヘッダー*/
.lp-header {
position: fixed;
z-index: 3;
top: 0;
width: 100%;
height: 60px;
background-color: #fff;
padding: 10px;
}
.lp-header img{
height: 50px;
}
@media screen and (max-width:767px) {
.lp-header {
height: 50px;
padding: 10px 10px 0;
}
.lp-header img{
height: 40px;
}
}
/*メニュー*/
.lp-pc {
position: fixed;
top: 50px;
left: 25px;
width: 30%;
}
.lp-pc-btn img{
padding: 0 10px;
}
.lp-pc img {
max-width: 100%;
margin-bottom: 20px;
}
.lp-pc-title{
width: 80%;
margin: 40px auto 20px;
}
.lp-pc-btn{
display: flex;
}
.lp-link {
width: 60%;
margin: 0 auto;
}
@media screen and (max-width:1500px) {
.lp-pc {
display: none;
}
}
/*TOP画像*/
.lpimg{
width: 100%; 
text-align: center;
height: auto;
}
.lpimg img {
width: 100%;
margin-top: 60px;
}
@media screen and (max-width:1600px) {
.lpimg img {
margin-top: -15px;
}
}
/*ボタン*/
.btn_bg{
background: #ffeec4;
padding: 20px 0;
}
.lp_btn {
display: flex;
margin: 0 auto;
justify-content: center;
}
.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;
}
}
/* スライダー */
.swiper {
width: 100%;   
}
.swiper-wrapper {
height: 100%;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
color: #333;
font-size: 1.2rem;
height: auto !important;
}
/* 矢印の位置・見た目を調整 */
.swiper-button-next, .swiper-button-prev {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
color: #000;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
transform: translateY(-50%);
border: 2px solid #000;
}
.swiper-pagination-bullet-active{
background:#e7465a;
}
.swiper-pagination-bullet {
width: 15px;
height: 15px;
}
/* 擬似要素 ::after に入る矢印のサイズを調整 */
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 17px;
font-weight: bold;
}
.swiper-pagination {
position: relative;
bottom: -20px;
text-align: center;
}
.slider-box {
background: #ffe4e4;
border-radius: 10px;
padding: 20px;
width: 90%;
 margin: 20px 0;
}
.slider-box img {
width: 100%;
height: auto;
}
.scroll_title {
font-size: 1.5em;
font-weight: bold;
color: #e7465a;
text-align: center;
margin: 10px 0;
box-sizing: border-box;
}
.txt {
padding: 10px 0;
font-size: 13px;
line-height: 2.3rem;
}
/* 2個目のスライダーの設定*/
.slider-box2{
margin: 5px;
background: #ffe4e4;
border-radius: 10px;
padding: 20px;
position: relative;
width: 90%;
margin: 20px 0;
}
.slider-box2 img {
width: 100%;
height: auto;
}
/*授業*/
.secret{
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);
padding: 40px 15px;
position: relative;
}
.secret-img{
width: 100%;
margin-top: 20px;
}
/* サポート */
.support_bg{
background: #ffeeeb;
padding: 40px 15px;
position: relative;
}
.support_box-img{
width: 100%;
}
.support_bg h3{
font-size: 1.8rem;
color: #e7465a;
font-weight: bold;
text-align: center;
margin: 10px auto;
}
.support_box{
position: relative;
margin: 20px 0;
padding: 10px 0;
}
/* 目指せる職業 */
.job-name{
color: #e7465a;
font-size: 15px;
text-align: center;
}
.job {
margin-top: 20px;
padding: 17px 20px 30px;
border-radius: 20px;
background: #f0f0e6;
}
.job__head {
padding-bottom: 17px;
position: relative;
font-size: 1.5em;
text-align: center;
font-weight: bold;
}
.job__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.job__list-item {
position: relative
}
.job__list-item::before {
content: "";
width: 78%;
max-width: 200px;
height: auto;
border-radius: 50%;
position: absolute;
top: calc(50% + 10px);
left: 50%;
translate: -50% -50%;
background: #fff;
aspect-ratio: 1 / 1;
}
.job__list-img {
width: -moz-fit-content;
width: fit-content;
margin-inline:auto;padding: 0 24px;
position: relative;
z-index: 1
}
.job__list-img img{
width: 100%;
block-size: auto;
}
.job__list-txt {
margin-top: 5px;
position: relative;
z-index: 1;
text-align: center
}
.job__employment-list {
margin-top: 25px;
grid-template-columns: 1fr 1fr;
row-gap: 8px
}
.c-list01__item {
padding-left: 12px;
position: relative;
margin-bottom: 5px;
}
.c-list01__item::before {
content: "";
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
position: absolute;
top: 7px;
left: 0;
}
/*オープンキャンパス*/
.oc_bg {
padding: 40px 0;
position: relative;
}
.oc-img{
padding: 0 15px 15px;
width: 100%;
}
.oc{
margin-top: 20px;
padding: 20px;
border-radius: 20px;
background: #ffeec4;
}
@media screen and (max-width:767px) {
.oc-img{
padding: 0;
}
}
/*インスタ*/
.insta_bg{
background: #ffeeeb;
padding: 40px 15px;
position: relative;
}
.insta_bg img{
width: 100%;
}
/*お花の飾り*/
.tape1{
position: absolute;
width: 120px;
right: 0;
top: 182px;
z-index: 2;
}
.tape2{
position: absolute;
width: 120px;
left: 0;
bottom: 310px;
z-index: 2;
}
.pop3{
position: absolute;
width: 90px;
bottom: 130px;
left: -19px;
}
.pop6{
position: absolute;
width: 110px;
bottom: 100px;
right: -19px;
}
.pop5{
position: absolute;
width: 90px;
top: 136px;
left: -19px;
}
.pop2{
position: absolute;
width: 100px;
bottom: -37px;
right: -19px;
}
.pop8{
position: absolute;
width: 100px;
top: 174px;
right: -19px;
}
.pop7{
position: absolute;
width: 100px;
bottom: 407px;
left: -19px;
}
.pop4{
position: absolute;
width: 100px;
bottom: 6px;
right: -19px;
}
@media screen and (max-width:767px) {
.tape1{
top: 150px;
}
.tape2{
bottom: 270px;
}
.pop3{
width: 90px;
bottom: 180px;
}
.pop6{
width: 110px;
bottom: 120px;
}
.pop5{
width: 90px;
top: 110px;
}
.pop2{
width: 100px;
bottom: -37px;
}
.pop8{
display: none;
}
.pop7{
width: 100px;
bottom: 407px;
}
.pop4{
width: 100px;
bottom: 6px;
}
}
/*フッター*/
.lp-footer {
text-align: center;
padding: 40px 0 100px;
background: #fafafa;
}
.lp-footer img{
height: 50px;
}
/*フッター固定*/
.floating-banner {
position: fixed;
bottom: 0;
z-index: 99;
display: flex;
width: 480px;
}
.floating-button {
display: block;
width: 50vw;
}
.floating-banner__image {
max-width: 100%;
}
@media screen and (max-width:767px) {
.floating-banner {
 width: 100%;
}
.floating-button {
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;
}