/*全体的なこと*/
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.5rem;
}
a {
text-decoration: none;
}
ul,li {
list-style: none;
}
.h2-img{
width: 100%;
}
h3{
font-size: 2rem;
line-height: 1.75rem;
}
img{
vertical-align:top;
}
section{
margin: 40px auto;
}
.sp {
display: none;
}
.br-sp {
display: none;
}
.lp{
border: 1px solid #000;
background: #fff;
width: clamp(400px, 45vw, 750px);
margin-left: 42.5vw;
max-width: 480px;
}
.lp-bg{
background-attachment: fixed;
background-size: cover;
background-position: center;
background-image: url(../img/bg.png);
display: flex;
}
@media screen and (max-width:767px) {
body {
min-width: 100%;
}
.main{
width: 100%;
}
p {
font-size: 14px;
}
h3 {
font-size: 1.5rem;
}
h2{
text-align: center;
}
.lp{
width: 100%;
margin: 0 auto;
border: 0px solid #000;
}
a.anchor {
display: none;
}
}
/*ヘッダー*/
header {
position: sticky;
top: 0;
z-index: 2;
width: 100%;
height: 60px;
background-color: #fff;
padding: 10px 0;
box-sizing: border-box;
display: flex;
align-items: center;
}
.logo{
height: 100%;
width: auto;
}
.logo img {
height: 100%;
width: auto;
}
/*TOP画像*/
.lpimg{
width: 100%; 
text-align: center;
height: auto;
}
.lpimg img{
width: 100%; 
}
.sp {
display: none;
}
/*ボタン*/
.btn_bg{
position: relative;
margin: 0 auto;
padding: 20px 0;
background-color: #ffff96;
}
.lp_btn img {
width: 100%;
padding: 5px 0;
}
.lp_btn{
display: block;
margin: 0 auto;
width: 90%;
}
/*市場*/
.hito{
margin: 0 0 20px;
}
.hito_bg{
position: relative;
margin: 0 auto;
padding: 20px 4% 0px 4%;
background-color: #f2f2f2;
}
.hito img{
width: 100%; 
}
.chance_img{
text-align: center;
display: block;
}
.chance_img img{
margin: 10px 0;
width: 100%;
}
/*おすすめ*/
.hito-box1 {
padding: 0 20px 20px;
position: relative;
}
.hito-box2 {
padding: 10px;
border: solid 3px #000000;
background: #fff;
margin: 1em auto;
}
.hito-box2 p {
font-size: 15px;
text-align: center;
font-weight: bold;
}
.pop1 {
width: 100px;
position: absolute;
top: 320px;
left: -13px 
}
.pop2 {
width: 100px;
position: absolute;
top: 320px;
right: -19px;
}
@media screen and (max-width:767px) {
.pop1, .pop2 {
display: none;
}
.hito-box1 {
padding: 0 0px 20px;
}
}
/*ポイント*/
.point_title_bg{
background: linear-gradient(180deg,#f2f2f2 50%,#fff 50%);
background-size: auto auto;
margin: 0;
}
.point_bg{
position: relative;
margin: 0 auto;
}
.point{
width: 100%; 
text-align: center;
height: auto;
}
.point img{
width: 100%; 
}
.point_memo{
background-color: #ffffff;
position: relative;
margin: 50px 15px 100px;
border: solid 5px #595757;
padding: 25px 20px;
}
h3.third_point1 {
margin: 20px 0;
font-weight: bold;
font-size: 1.5rem;
line-height: 2rem;
color: #134c80;
}
h3.third_point2 {
	margin: 20px 0;
font-weight: bold;
font-size: 1.5rem;
line-height: 2rem;
color: #2caca5;
}
h3.third_point3 {
margin: 20px 0;
font-weight: bold;
font-size: 1.5rem;
line-height: 2rem;
color: #ff7178;
}
.text_area {
margin: 20px 0 10px;
}
.point_b1{
font-weight: bold;
font-size: 1.2rem;
line-height: 1rem;
color: #2caca5;
}
.point_s1{
font-size: 15px;
color: #2caca5;
font-weight: bold;
}
.point_b2{
font-weight: bold;
font-size: 1.2rem;
line-height: 1rem;
color: #ff7178;
}
.point_s2{
font-size: 15px;
color: #ff7178;
font-weight: bold;
}
.point_b3{
font-weight: bold;
font-size: 1.2rem;
line-height: 1rem;
color: #134c80;
}
.point_no {
margin: 0 auto;
width: 130px;
position: absolute;
top: -90px;
left: -20px;
}
.pont_img{
width: 100%;
}
@media screen and (max-width:767px) {
.point_memo {
margin: 50px 15px 80px;
}
.point_no {
width:115px;
top: -70px;
}
}
/*在校生の声*/
.voice_bg{
position: relative;
margin: 0 auto;
padding: 10px 0;
background-color: #f2f2f2;
}
.voice_flame {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
max-width: 100%;
margin: 0px 30px 30px;
}
.voice_top{
margin: 20px;
}
.voice_top img{
width: 100%; 
}
.voice_img{
width: 100%;
}
.voice_b{
color: #40bbaa;
font-size: 17px;
line-height: 1.5rem;
font-weight: bold;
}
/*スライダー*/
.carousel {
position: relative;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
.carousel__viewport {
display: flex;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
counter-increment: item;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
}
@media (hover: hover) {
.carousel__snapper {
animation-name: tonext, snap;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.carousel__slide:last-child .carousel__snapper {
animation-name: tostart, snap;
}
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
display: inline-block;
}
.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
position: absolute;
top: 0;
margin-top: 100%;
width: 3rem;
height: 3rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
}
.carousel::before,
.carousel__prev {
left: 0.5rem;
}
.carousel::after,
.carousel__next {
right: 0.5rem;
}
.carousel::before,
.carousel::after {
content: '';
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
font-size: 2.5rem;
text-align: center;
pointer-events: none;
}
.carousel::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}
.carousel::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
@media screen and (max-width:767px) {
.voice_flame {
margin: 0px 30px;
}
}
/*OC*/
.oc_title{
background-color: #f2f2f2;
}
.oc_bg{
position: relative;
margin: 0 auto;
padding: 20px;
background-color: #40c0af;
}
.oc_title img{
width: 100%; 
}
.oc_bg img{
width: 100%; 
}
.thumb_cont_list.column_2 > li {
margin-bottom: 24px;
}
.thumb_cont_list.column_2 {
margin: 0 auto -20px;
}
.thumb_cont_list.column_2 > li .ttl {
color: yellow;
}
.thumb_cont_list.column_2 > li p {
margin: 16px 0 8px;
color: #ffffff;
}
/*よくある質問*/
.faq{
position: relative;
margin: 0 auto;
padding: 20px 20px 0px;
}
.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: 2rem;
}
.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;
background:linear-gradient(45deg, #008880, #adffd3);
	}
					footer .logo img {
 height: 50px;
}
/*サイドの固定部分*/
.lp-pc{
max-width: 450px;
height: 100vh;
position: fixed;
top: 100px;
width: 25.5vw;
margin-left: 5%;
}
.lp-pc img {
max-width: 100%;
margin-bottom: 20px;
}
.lp-link{
width: 80%;
margin: 0 auto;
}
a.anchor{
display: block;
padding-top: 100px;
margin-top:-100px;
}
@media screen and (max-width:767px) {
.lp-pc {
display: none;
}
}
/*アニメーション*/
.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;
}