@charset "utf-8";
/* CSS Document */

/*@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Roboto:ital,wght@0,100;1,100&display=swap');

@font-face {
  font-family: 'Noto Sans JP';
  src: url('font.woff2') format('woff2');
  font-display: swap; 
}
*/

@media screen and (max-width: 767px){

/* reset css
==============================================================*/

*{
box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ol, ul, dl, dt, dd, form,
figure {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

strong {
  font-weight: normal;
}

table, td, th, tr, thead, tbody {
  border: none;
}

table th {
  text-align: left;
  font-weight: normal;
}

table {
  border-collapse: collapse;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
	display: block;
}

textarea {
  font-size: 1em;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select {
  font-size: 1em;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
select::-ms-expand {
  display: none;
}

header, footer, section, nav, main,
figure, figcaption, time, small {
  display: block;
}

input[type="submit"], input[type="image"] {
  border: none;
  padding: 0;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"] {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}

button {
  border: none;
  margin: 0;
  cursor: pointer;
}

input[type="submit"], input[type="image"], input[type="reset"] {
  cursor: pointer;
}

address {
  font-style: normal;
}

/*
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
}
*/

input::placeholder {
  color: #929799;
}

i {
  font-style: normal;
}

/* reset css
==============================================================*/



html {
scroll-behavior: smooth;
}	
a{
color: #f25fba;
/*text-decoration: underline;*/
}
body{
font-size: 1.0rem;
color:#555;
font-family: 'Noto Sans JP','Jost', sans-serif;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.1em;
}
p{
color:#555;
font-size: 1.08rem;
line-height: 1.2;
}
.pc{
display: none !important;
}
/*
.btn{
display: block;
width: 100%;
margin: auto;	
padding: 5% 0;
border-radius: 100px;
background:#f25fba; 
font-weight: 700;
font-size: clamp(17px,5vw,19px);
text-align: center;
text-decoration: none;
color: #fff;
transition: ease .2s;
}
.btn:hover{
color: #f25fba;
background: #fff;
transform: scale(1.06);
}
*/
/*↓lpここから---------------------------------------------------------------	*/
	
#fv-area {
	width: 100%;
	height: auto;
	aspect-ratio: 86 / 153;
	position: relative;
	overflow: hidden;
}
	#fv-area .fv-main{
		width: 100%;
		height: 100%;
/*
		aspect-ratio: 86 / 115;
		overflow: hidden;
*/
	}
	#fv-area .fv-main img{
		width: 100%;
		height: auto;
		aspect-ratio: 86 / 115;
		object-fit: cover;
/*
		position: absolute;
		left: 0;
*/

	}
	#fv-area .mamaedu-logo{
		width: clamp(105px,13.8vw,266px);
		position: absolute;
		top: 20px;
		left: 6%;
	}
	#fv-area h1{
		position: absolute;
		top:60px;
		left: 6%;
		
	}
	#fv-area h1 .title01{
		display: block;
		font-weight: 500;
		font-size: clamp(15px,4vw,32px);
		margin-bottom: 2%;
	}
	#fv-area h1 .title01 span{
		color: #f25fba;
	}
	#fv-area h1 .title02{
		display: block;
		font-weight: 500;
		font-size: clamp(29px,7.9vw,60px);
		line-height: 1.3em;
	}
	#fv-area h1 .title02 span{
		color: #f25fba;
		font-weight: 700;
	}	
	
	#fv-area .fv-cta{
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;	
		margin: auto;
		width: 84.88%;
		height: auto;
	}
	#fv-area .fv-cta .fv-payment{
		width: 80%;
		height: auto;
		margin: auto;
		margin-bottom: 5%;
	}
	#fv-area .fv-cta .fv-ctabtn{	
		width: 100%;
		text-align: center;
		font-size: clamp(19px,5.11vw,39px);
		font-weight: 500;
		line-height: 100%;	
	}
#fv-area .fv-cta .fv-ctabtn span{
	position: relative;
    display: block;
    margin: auto;
    width: 80%;
    z-index: 1;
    text-align: center;
    color: #333;
	font-size: clamp(14px,3.72vw,28px);
    background-color: #fff;
   	padding: 0.2% 2%;
    border-radius: 100px;
	border: 1px solid #ff33a0;
}
	#fv-area .fv-cta .fv-ctabtn a{
	display: block;
	height: auto;
	padding: 5% 0 4%;
	text-decoration: none;
	color:#fff;
/*	filter: drop-shadow(0 0 5px rgba(0,67,118,0.2));*/
/*	transition: all 0.3s ease;*/
	border-radius: 100px;
    background: linear-gradient(90deg, rgb(255, 51, 160), rgb(255, 129, 5));
	margin: auto;
	width: 100%;
	position:relative;
	top:-12px;
	font-size: clamp(19px,5.11vw,39px);
	line-height: 1.2;
	letter-spacing: 0.075rem;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
		
}		
	#banner01,#banner02{
		width: 84.88%;
		height: auto;
		margin: 8% auto;
		border-radius: 5px;
		border: solid 1px #bb7a01;
		overflow: hidden
	}
	#banner01 img,#banner02 img{
		width: 100%;
		height: auto;
	}
	#turning-point,#news,#QandA{
		width: 100%;
		height: auto;
		padding: 8% 6%;
	}
	#turning-point{
		background-color: #f8f6f8;
	}
	h2 span{
		display: block;
		font-family: 'Jost';
		font-weight: 700;
		color: #f25fba;
		font-size: clamp(14px,3.7vw,28px);
		letter-spacing: 0;
		margin-bottom: 5px
	}
	h2{
		font-weight: 500;
		font-size:clamp(22px,6.04vw,46px);
		line-height: 1.2;
		margin-bottom: 5%;
	}
	
	.interview-list{
		width: 100%;
		height: auto;
	}
	.interview-list li{
		display: flex;
		justify-content: space-between;
		width: 97%;
		height: auto;
		margin: 0 auto 8%;
		padding-bottom:8%;
		border-bottom: solid 1px #ccc;
	}
	
	.interview-list li:last-child{
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.interview-list li .int-photo{
		width: 28.15%;
		height: auto;
	}
	.interview-list li .int-photo figure{
		text-align: center;
	}

	.interview-list li .int-photo img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	.interview-list li .int-photo figcaption{
		font-size: clamp(12px,0.85vw,16px);
		font-weight: 400;
	}
	.interview-list li .int-detail{
		width: 68.85%;
		height: auto;
	}
	
	.interview-list li .int-detail picture img{
		width: 100%;
		height: auto;
		margin-bottom: 3%;
	}
	.interview-list li .int-detail p:first-of-type {
		font-size: clamp(16px,4.41vw,34px);
		font-weight: 500;
		margin-bottom: 3%;
		padding-left: 5%;
	}
	.interview-list li .int-detail p:last-of-type {
		font-size: clamp(12px,3.25vw,25px);
		font-weight: 500;
		padding-left: 5%;
	}
	.interview-list li .int-detail p:last-of-type span{
		color: #f25fba;
		display: block;
		margin-top: 5px;
	}
	#news .news-photo{
		width: 69.75%;
		height: auto;
		margin: auto;
	}
	#news .news-photo div{
		width: 100%;
		height: auto;
		border-radius: 5px;
		overflow: hidden;
		margin-bottom: 5%;
	}
	#news .news-photo div:last-child{
		margin-bottom:0;
		
	}
	#news .news-photo div img{
		width: 100%;
		height: auto;
	}
	#mission{
		width: 100%;
		height: auto;
	}
	#mission .mission-about{
		width: 100%;
		height: auto;
		padding: 8% 6%;
		background-color: #f8f6f8;
	}
	#mission .mission-about .mission-contents{
		align-items: center; 
	}
	#mission .mission-about .mission-contents div{
		border-radius: 5px;
		width: 53.5%;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		margin: 0 auto 5%;
		position: relative;
	}
	
	#mission .mission-about .mission-contents div img{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
	}
	#mission .mission-about .mission-contents p{
		font-size: clamp(15px,3.95vw,30px);
		font-weight: 400;
		line-height: 1.5;
		margin: auto;
		width: 91%;
	}
	#mission .support,#mission .merit{
		width: 100%;
		height: auto;
		padding: 8% 6%;
	}
	#mission .support h3{
		display: block;
		margin: 0 auto 4%;
		font-size: clamp(20px,5.34vw,41px);
		font-weight: 500;
		width: fit-content;
	}
	#mission .support h3 span{
		color: #f25fba;
		font-weight: 700;
	}
	#mission .support ul{
		width: 100%;
		height: auto;
	}
	
	#mission .support ul li{
		width: 100%;
		height: auto;
		padding: 4%;
		background-color: #f0f0f0;
		border-radius: 5px;
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-bottom: 5%;
	}
	#mission .support ul li:first-child::before{
		content: "";
 		display: block;
		background-image: url("../images/supporttag_01.webp");
		background-size: contain; 
		background-repeat: no-repeat;
  		background-position: center;
		position: absolute;
		top: 0;
		left: 2%;
		width: 10%;
		aspect-ratio:6/7;
		z-index: 10;		
	}
	#mission .support ul li:nth-child(2)::before{
		content: "";
 		display: block;
		background-image: url("../images/supporttag_02.webp");
		background-size: contain; 
		background-repeat: no-repeat;
  		background-position: center;
		position: absolute;
		top: 0;
		left: 2%;
		width: 10%;
		aspect-ratio:6/7;
		z-index: 10;		
	}
	#mission .support ul li:last-child::before{
		content: "";
 		display: block;
		background-image: url("../images/supporttag_03.webp");
		background-size: contain; 
		background-repeat: no-repeat;
  		background-position: center;
		position: absolute;
		top: 0;
		left: 2%;
		width: 10%;
		aspect-ratio:6/7;
		z-index: 10;		
	}

	#mission .support ul li div:first-of-type{
		width: 70%;
		aspect-ratio: 25 / 23;
		background-color: #fff;
		margin: 0 5% 0 0;
		border-radius: 5px;
		display: flex;
  		justify-content: center;
  		align-items: center; 
		padding-top: 5%;
	}
	#mission .support ul li div:first-of-type img{
		width: 90%;
		height: auto;
	}
	#mission .support ul li div:last-of-type{
		width: 100%;
		height: auto;	
		padding-top: 5%;
	}
	#mission .support ul li:nth-of-type(n + 2) div:last-of-type{
		padding-top: 1%;
	}
	
	#mission .support ul li div:last-of-type h4{
		color: #f25fba;
		width: fit-content;
		height: auto;
		margin: 0 0 4%;
		font-size: clamp(15px,4.1vw,32px);
		font-weight: 500;
	}
	#mission .support ul li div:last-of-type p{
		width: fit-content;
		height: auto;
		margin: 0 auto;
		font-size: clamp(13px,3.6vw,27px);
		font-weight: 400;
		text-align: justify;
	}
	#mission .support ul li div:last-of-type p span{
		display: block;
		font-size: clamp(11px,3vw,23px);
		line-height: 2;
	}
	#mission .course{
		width: 100%;
		height: auto;
		padding: 5% 6% 8%;
	}
	}
	
	#mission .course h3{
		font-size: clamp(20px,6.27vw,41px);
		font-weight: 500;
		text-align: center;
		margin: 0 auto 3%;
	}
	#mission .course h3 span{
		font-size: clamp(14px,3.72vw,29px);
		display: block;
		font-weight: 500;
	}
	#mission .course h3 strong{
		font-weight: 700;
		color: #ff33a0;
	}
	#mission .course ul:first-of-type{
		width: clamp(277px,73.8vw,566px);
		height:auto;
		margin: 0 auto 5%;
		display: flex;
		justify-content: space-between;
	}
	
	#mission .course ul :first-of-type li{
		max-width: 100%;
		height: auto;
	}	
	#mission .course ul :first-of-type li:last-child{
	width: 13.2%;
	height: auto;
}
	#mission .course ul li img{
		width: 100%;
		height: auto;
	}	
	#mission .course .course-contents{
		width: 100%;
		height: auto;
		margin-bottom: 1%;
	}
	#mission .course .course-contents li{
		width: 100%;
		height: auto;
		background-color: #fef4fa;
		border-radius: 10px;
		padding: 8% 10%;
		margin-bottom: 5%;
	}
	#mission .course .course-contents li:last-of-type{
	margin-bottom: 0;
}
	#mission .course .course-contents li h4{
		font-size: clamp(22px,5.8vw,45px);
		font-weight: 700;
		color: #ff33a0;
		text-align: center;
		margin-bottom: 4%;
	}
	#mission .course .course-contents li h4 span{
		display: block;
		font-size: clamp(14px,3.72vw,29px);
		font-weight: 500;
		color: #555;	
		margin-bottom: 1%;
	}
	#mission .course .course-contents li div:first-of-type{
		width: 65.75%;
		aspect-ratio: 17 / 10;
		border-radius: 5px;
		margin: 0 auto 4%;
		overflow: hidden;
	}
	#mission .course .course-contents li p:first-of-type{
		width: 100%;
		height: auto;
		font-size: clamp(13px,3.72vw,29px);
		text-align: justify;
		word-break: break-all;
		line-break: strict;
		margin-bottom: 4%;
		
	}
	#mission .course .course-contents li h5{
		font-size: clamp(13px,3.72vw,29px);
		color: #f25fba;
		font-weight: 700;
	}	
	#mission .course .course-contents li .course-skill{
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start; 
		margin: 2% auto 5%;
	}
	#mission .course .course-contents li .course-skill li{
		display: block;
		font-size: clamp(10px,2.7vw,21px);
		line-height: 1;
		width: fit-content;
		padding: 1.5% 1% 1%;
		border-radius: 3px;
		margin: 0 1% 2% ;
		background-color: #fff;
		color: #f25fba;
		letter-spacing: 0;
	}

	#mission .course .course-contents li .course-skill .break{
		width: 100%;
		height: 1px;
		margin: 0;
		padding: 0;
		background-color: transparent;
			
	}
	#mission .course .course-contents li .course-fee{
		width: 100%;
		height: auto;
		border-top: solid 1px #f25fba;
		padding-top: 5%;
	}
	#mission .course .course-contents li .course-fee div:first-of-type{
		width: 100%;
		aspect-ratio: 23 / 3;
		position: relative;
		display: flex;
		flex-wrap: wrap; 
  		justify-content: space-between;
	}
	#mission .course .course-contents li .course-fee div:first-of-type::before{
		content: "";
  		position: absolute;
		top: 2.5%;
		left: 50%; 
  		transform: translateX(-50%);
  		width: 10%;
		aspect-ratio: 1 / 1;
		background-image: url("../images/arrow.webp");
		background-size: cover; 
		background-repeat: no-repeat;
	}
	
	#mission .course .course-contents li .course-fee div:first-of-type p{
		font-size: clamp(14px,3.8vw,22px);
		text-align: center;
		width:43.4%;
		height: 22%;
		font-weight: 500;
	}
	#mission .course .course-contents li .course-fee div:first-of-type p strong{
		display: block;
		font-weight: 500;
	}
	#mission .course .course-contents li .course-fee div:first-of-type p:first-of-type strong{
		text-decoration: line-through;
	}
	#mission .course .course-contents li .course-fee div:first-of-type p:last-of-type strong{
		color: #ff33a0;
		font-weight: 700;
	}
	#mission .course .course-contents li .course-fee div:first-of-type p:last-of-type strong span{
		font-size: clamp(9px,1.1vw,21px);
		font-weight: 500;
	}
	#mission .course .course-contents li .course-fee div:last-of-type{
		width: 75%;
		height: auto;
		margin: 0 auto 3%;
	}
	#mission .course .course-contents li .course-fee div:last-of-type img{
		width: 100%;
		height: auto;
	}
	#mission .annotation{
		font-size: clamp(12px,3.2vw,25px);
		text-align: right;
  		margin-top: 2%;
	}


	#mission .merit .merit-contents{
		width: 100%;
		height: auto;
		background-color: #fff2e6;
		border-radius: 10px;
		padding: 7% 9%;
		position: relative;
	}
	#mission .merit .merit-contents::after{
		content: "";
  		display: block;
		background-image: url("../images/merit_arrow.svg");
  		background-size: contain;
  		background-repeat: no-repeat;
  		background-position: center;
		width: 20%;
		aspect-ratio: 3 / 2;
		position: absolute;
		bottom: -3.5%;
		left: 50%;
		transform: translateX(-50%);
	}



	#mission .merit .merit-contents h3{
		font-size: clamp(21px,2.8vw,53px);
		font-weight: 500;
		color: #ff8105;
		text-align: center;
		margin-bottom: 5%;
		line-height: 1.2;
	}
	#mission .merit .merit-contents ul{
		width: 100%;
		height: auto;
		margin: auto;
}
	#mission .merit .merit-contents ul li{
		position: relative;
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 6%;
		padding: 7% 3% 54%;
	}
	
	#mission .merit .merit-contents ul li:last-child{
		margin-bottom: 0;
	}
	#mission .merit .merit-contents ul li h4{
		font-size: clamp(14px,3.8vw,17px);
		font-weight: 500;
		color: #555;
		text-align: center;
		letter-spacing: 0.125em;
	}
	#mission .merit .merit-contents ul li h4 span{
		font-size: clamp(16px,4.2vw,32px);
		color: #ff8105;
		display: block;
	}
	#mission .merit .merit-contents ul li p{
		font-size: clamp(12px,1.25vw,27px);
		font-weight: 400;
		color: #555;
		text-align: center;
		margin-top: 1%;
	}	
	#mission .merit .merit-contents ul li:nth-child(1),#mission .merit .merit-contents ul li:nth-child(2),#mission .merit .merit-contents ul li:nth-child(3),#mission .merit .merit-contents ul li:nth-child(4){
		background-repeat: no-repeat;
		background-size: 70%;
		background-position: center bottom 10%
}
	#mission .merit .merit-contents ul li:nth-child(1){
		background-image: url("../images/merit_01.webp");
	}
	#mission .merit .merit-contents ul li:nth-child(2){
		background-image: url("../images/merit_02.webp");
		
	}	
	#mission .merit .merit-contents ul li:nth-child(3){
		background-image: url("../images/merit_03.webp");
	}	
	#mission .merit .merit-contents ul li:nth-child(4){
		background-image: url("../images/merit_04.webp");
	}
	#mission .merit .merit-contents + img{
		width: 20.5%;
		aspect-ratio: 3 / 2;
		margin: auto;
	}
	.merit > p:last-of-type{
		font-size: clamp(21px,2.8vw,53px);
		font-weight: 500;
		text-align: center;
		color: #ff8105;
		margin-top: 15%;
	}
	
	#banner02{
		border: none;
	}
	
		
#QandA details:not([open]) {
margin-bottom: 14px;
}

#QandA details summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 2em;
border-radius: 100px;
background-color: #fde7f5;
cursor: pointer;

}
#QandA details summary span{
	width: 90%;
	height: auto;
	color: #f25fba;
	font-size: clamp(15px,3.95vw,30px);
	font-weight: 500;
	line-height: 140%;
	text-align: justify;
	letter-spacing: 0.075em;
}

#QandA details summary::-webkit-details-marker {
display: none;
}
#QandA details summary::before,
#QandA details summary::after {
width: 3px;
height: .9em;
border-radius: 5px;
background-color: #f25fba;
content: '';
}

#QandA details summary::before {
position: absolute;
right: 2em;
rotate: 90deg;
}

#QandA details summary::after {
transition: rotate .3s;
}

#QandA details[open] summary::after {
rotate: 90deg;
}

#QandA details div {
transform: translateY(-10px);
opacity: 0;
margin: 0.5em 0 1.4em;
padding: 1.4em 2em;
transition: transform .5s, opacity .5s;
background: #f3f6f8;
border-radius: 10px;
display: flex;
flex-direction: column;
}
#QandA details div p {
	color: #555;
	font-size: clamp(13px,3.6vw,27px);
}
#QandA details[open] div {
transform:none;
opacity: 1;
}
#QandA details[open] figure {
width: 100%;
margin: 15px auto 0;
}
#QandA details[open] figure img{
width: 100%;
}
	#Flow{
		width: 100%;
		height: auto;
		padding: 8% 6%;
		background-color: #f8f6f8;
		border-bottom: solid 1px #555;
	}

	#Flow>p{
		font-size: clamp(15px,3.95vw,30px);	
		line-height: 1.4;
		text-align: justify;
	}
	
#Flow ol{
font-size: 1.1rem;
line-height: 164%;
width: 100%;
margin: 10% auto 0;
counter-reset: li;
}
#Flow ol h3{
font-size: clamp(20px,5.3vw,41px);
font-weight: 500;
color: #f25fba;
margin-bottom: 2%;
}
#Flow li{
position: relative;
margin-bottom: 8%;
padding: 8%;
background: #fff;
border-radius: 10px;
}

#Flow li p{
font-size: clamp(15px,3.95vw,30px);
  line-height: 1.4;
	text-align: justify;
}



#Flow li::before{
	font-family: 'Jost';
position: absolute;
top: -10px;
left: -10px;
background: #f25fba;
border-radius: 50%;
width: 10%;
aspect-ratio: 1 / 1; 
text-align: center;
font-weight: 700;
font-size: clamp(18px,5vw,38px);
color: #fff;
counter-increment: li;/*要素の連番（カウンタ）の値を進める*/
content: counter(li);/*自動連番を付ける関数*/
	line-height: 1;
	display: flex;
  align-items: center; /* 上下中央 */
  justify-content: center;
}	


#Flow .btn{
display: block;
width: 100%;
margin: auto;	
padding: 5% 0;
border-radius: 100px;
background:#f25fba; 
font-weight: 700;
font-size: clamp(17px,5vw,19px);
text-align: center;
text-decoration: none;
color: #fff;
/*transition: ease .2s;*/
}






footer{
width: 100%;
padding: 10% 5% 5%;
}	
	
footer #education{
margin: 0 auto 50px;
	width: 92%;
}
	
footer #education h3{
text-align: center;
font-size: clamp(25px,6.95vw,29px);
font-weight: 700;
letter-spacing: 0.2rem;
margin: 0 0 7%;
}	
footer #education h3 span{
font-size: 1.0rem;
display: block;
}	
footer #education p:nth-child(2){
	font-size: clamp(15px,3.95vw,30px);
    font-weight: 400;
    line-height: 1.5;
	text-align: justify; 
width: 100%;
margin: auto;
}
footer #education p:nth-child(4){
text-align: center;
font-size: 0.9rem;
}
footer #education ul{
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
}	
footer #education li{
width: 48%;
margin: 4% 0;
}
footer #education li a{
display: block;
width: 100%;
font-weight: 700;
text-align: center;
font-size: 0.9rem;
padding: 8%;
border: 2px solid #f25fba;
border-radius: 100px;
text-decoration: none;
transition: ease .2s;
}
footer #education li a:hover{
color: #fff;
background: #f25fba;
transform: scale(1.06);
}	
	
footer #advertiser{
width: 100%;
height: auto;
margin: auto;
padding: 15% 0 10%;
border-top: 1px solid #555;

}
	
footer #advertiser h2{
margin: 0 auto 30px;
color: #555;
font-size: 1.9rem;
line-height: 1;
text-align: center;
padding: 0;
}
footer #advertiser p{
line-height: 1.9em;
}
	
footer #advertiser ul{
width: 100%;
height: auto;
margin: auto;
list-style: none;
}
	

footer #advertiser ul li{
	display: flex;
	margin-bottom: 20px;
	
}
footer #advertiser ul li .adhead{
	width: 30%;
	height: 1.7em;
	text-align: center;
	background-color: #555;
	color: #fff;
	letter-spacing: 0.1em;
	font-size: clamp(12px,3.16vw,24px);
	line-height: 1.7em;
}

footer #advertiser ul li .adcontent{
	width: 68%;
	margin: 0 0 0 2%;
	color: #555;
	letter-spacing: 0.05em;
	line-height: 1.2;
	font-size: clamp(12px,3.16vw,24px);

}

footer #advertiser ul li .adcontent a{
	color: #555;
	font-size: 1em;
	text-underline-offset:0.3em;
}		
footer #ia{
	width: 100%;
	text-align: center;
    padding: 10% 0 25%;
    color: #555;
	border-top: 1px solid #555;
	margin: auto;

	}	
	
footer #ia div{
	width: 80%;
	margin: auto;
	padding: 50px 0 0;

}
footer #ia a{
	display: block;
	width: 15%;
	height: auto;
	margin: auto;
}
footer #ia a img{
		width: 100%;
		height: auto;
	}

footer #ia img {
    width: 60%;
	height: auto;
	margin: 0px auto 20px;
}

footer #ia p {
    margin-bottom: 0;
	font-size: clamp(12px,1.8vw,14px);
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/*↑lpここまで---------------------------------------------------------------	*/
/*/↓popupバナー---------------------------------------------------------------	*/
.shine {
  overflow: hidden;
}

.shine::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%);
  animation: shine-loop 2.2s linear infinite;
mix-blend-mode:screen;

}
.popup-bnr{
position: fixed;
z-index: 20;
bottom: -5px;
left: 50%;
transform: translateX(-50%) translateY(200px);
width: 94%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
line-height: 120%;
visibility: hidden;
transition: opacity 0.4s, transform 0.4s;
}
	
.popup-bnr.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.popup-bnr span{
position:relative;
display:block;
margin:auto;
width:80%;
z-index:1;
text-align:center;
color: #555;
font-size: clamp(14px,3.72vw,28px);
font-weight: 500;
line-height: 1;
background-color:#fff;
padding:1.5% 0;
border-radius:100px;
border: solid 1px #ff33a0;
}

.popup-bnr a{
display: block;
height: auto;
padding: 7.5% 0 5.5%;
text-decoration: none;
color:#fff;
filter: drop-shadow(0 0 6px rgba(0,67,118,0.2));
transition: all 0.3s ease;
border-radius: 50px;
background: linear-gradient(90deg, rgb(255, 51, 160), rgb(255, 129, 5));
position: relative;
top: -15px;
font-size: clamp(19px,5.1vw,39px);
font-weight: 500;
	line-height: 1;
letter-spacing: 0.075rem;
width:100%;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	}
	
	
	
/*↑poopupバナーここまで---------------------------------------------------------------	*/		
	
	
.reflection{
display:inline-block;
overflow:hidden;
position:relative;
}
.reflection::before {
content: "";	/* 文字は表示しないので中身無しを指定 */
position: absolute;	/* ボタンの位置を基準に絶対値指定する */
display: block;	/* 形式はblock */
/*background: #fff;	 背景色は分かりやすく青色にしておく */
width: 30px;	/* 横幅 */
height: 30px;	/* 縦幅 */
top: -100px;	/* ボタン左上を基準に上へ60pxの位置 */
left: -100px;	/* ボタン左上を基準に左へ60pxの位置 */
animation-name:shine-run;   /* アニメーション名の指定 */
animation-delay:1s;   /* アニメーションの開始時間指定 */
animation-duration: 3s;   /* アニメーション動作時間の指定 */
animation-timing-function: ease-in;
/* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite; 
/* アニメーションの無限繰り返しの指定 */
background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.9));
}	
	




	


/* アニメーションのタイミングとボックスの拡大率、角度、透過率の指定*/
@keyframes shine-run {
0% {
transform: scale(0) rotate(50deg);
/* アニメ開始時は大きさ0、50度の傾き */
opacity: 0;
/* アニメ開始時は全透過 */
}
40% {
transform: scale(1) rotate(50deg);
/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
opacity: 0.4;
/* 透過しない（しっかり表示される）ように1を設定 */
}
100% {
transform: scale(500) rotate(50deg);
/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
opacity: 0;
/* 全透過になるようにして、徐々に消えるような変化を付ける */
}
}


@keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.2) ;
    }
    100% { 
		opacity: 0;
		transform: scale(1.2) ;}
}

@keyframes button-move {
  0%, 40%, 60%, 80%, 00% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
@keyframes shine-loop {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}
	
@keyframes shine {
           0% { transform: translateX(-100%) skewX(-15deg); }
           50%, 100% { transform: translateX(200%) skewX(-15deg); }
       }
       .animate-shine {
           position: absolute; top: 0; left: 0; width: 100%; height: 100%;
           background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
/*           transform: skewX(-15deg);*/
           animation: shine 3s infinite;
       }
       .glow-text {
           text-shadow: 0 0 10px rgba(147, 197, 253, 0.5);
       }