@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;
}
*/


/*
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/noto-sans-jp-v56-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/noto-sans-jp-v56-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/noto-sans-jp-v56-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

 
@media screen and (min-width: 768px) {

/* 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;
font-size: 1.1rem;
}
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;
line-height: 1.2;
font-size: 1.24rem;
}
.sp{
display: none !important;		
}
/*
.btn{
display: block;
width: 56%;
margin: auto;	
padding: 2% 0;
border-radius: 100px;
background:#f25fba; 
font-weight: 700;
font-size: 1.6rem;
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%;
	position: relative;
	padding-top: 50.677%;
}
	#fv-area .fv-main img{
		width: 100%;
		height: auto;
		position: absolute;
		top: -100%;
		left: 0;
		padding-top: 50.677%;
;
	}
	#fv-area .mamaedu-logo{
		width: clamp(105px,13.8vw,266px);
		position: absolute;
		top: 2.7%;
		left: 8.3%;
	}
	#fv-area h1{
		position: absolute;
		top:23%;
		left: 8.3%;	
	}
	#fv-area h1 .title01{
		display: block;
		font-weight: 500;
		font-size: clamp(14px,1.8vw,35px);
		margin-bottom: 2%;
	}
	#fv-area h1 .title01 span{
		color: #f25fba;
	}
	#fv-area h1 .title02{
		display: block;
		font-weight: 500;
		font-size: clamp(30px,3.8vw,75px);
		line-height: 1.3em;
	}
	#fv-area h1 .title02 span{
		color: #f25fba;
		font-weight: 700;
	}
	#fv-area .fv-cta{
		position: absolute;
		bottom: 5.4%;
		left: 8.3%;	
		width: 38%;
		height: auto;
	}
	#fv-area .fv-cta .fv-payment{
		width: 64%;
		height: auto;
		margin: auto;
		margin-bottom: 5%;
	}
	#fv-area .fv-cta .fv-ctabtn{	
		width: 100%;
		text-align: center;
		font-size: clamp(15px,1.94vw,37px);
		font-weight: 500;
		line-height: 100%;	
	}
	#fv-area .fv-cta .fv-ctabtn span{
	position: relative;
    display: block;
    margin: auto;
    width: 60%;
    z-index: 1;
    text-align: center;
    color: #333;
	font-size: clamp(10px,1.25vw,24px);
    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:-20px;
	font-size: clamp(12px,1.5vw,20px);
	line-height: 1.2;
	letter-spacing: 0.075rem;
	box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
}	
	
	#banner01,#banner02{
		width: 60%;
		height: auto;
		margin: 5% 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: 4% 11.8%;
	}
		
	
	#turning-point{
		background-color: #f8f6f8;
	}
	h2 span{
		display: block;
		font-family: 'Jost';
		font-weight: 700;
		color: #f25fba;
		font-size: clamp(12px,1.52vw,29px);
		letter-spacing: 0;
	}
	h2{
		font-weight: 500;
		font-size:clamp(24px,3.19vw,61px);
		margin-bottom: 5%;
	}
	
	.interview-list{
		width: 100%;
		height: auto;
		margin: auto;
		display: flex;
		flex-wrap: wrap; 
  		justify-content: space-between;
	}
	.interview-list li{
		display: flex;
		justify-content: space-between;
		width: 47.25%;
		height: auto;
		margin-bottom: 7%;
	}
	.interview-list li .int-photo{
		width: 28.85%;
		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: 69%;
		height: auto;
	}
	
	.interview-list li .int-detail picture img{
		width: 100%;
		height: auto;
		margin-bottom: 2%;
	}
	.interview-list li .int-detail p:first-of-type {
		font-size: clamp(16px,2.08vw,40px);
		font-weight: 500;
		margin-bottom: 3%;
		padding-left: 5%;
	}
	.interview-list li .int-detail p:last-of-type {
		font-size: clamp(11px,1.38vw,27px);
		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: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
	}
	#news .news-photo div{
		width: 47.25%;
		height: auto;
		border-radius: 5px;
		overflow: hidden;
	}
	#news .news-photo div img{
		width: 100%;
		height: auto;
	}
	
	#mission{
		width: 100%;
		height: auto;
	}
	#mission .mission-about{
		width: 100%;
		height: auto;
		padding: 4% 11.8%;
		background-color: #f8f6f8;
	}
	#mission .mission-about .mission-contents{
		display: flex;
		align-items: center; 
	}
	#mission .mission-about .mission-contents div{
		border-radius: 5px;
		width: 27.3%;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		margin-right: 4%;
		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(11px,1.38vw,27px);
		font-weight: 400;
		line-height: 1.5;
	}
	#mission .support{
		width: 100%;
		height: auto;
		padding: 4% 11.8%;
	}
	#mission .support h3{
		display: block;
		margin: 0 auto 2%;
		font-size: clamp(21px,2.7vw,53px);
		font-weight: 500;
		width: fit-content;
	}
	#mission .support h3 span{
		color: #f25fba;
		font-weight: 700;
	}
	
	#mission .support ul{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
	}
	
	#mission .support ul li{
		width: 30%;
		height: auto;
		padding: 2% 1.5% 3%;
		background-color: #f0f0f0;
		border-radius: 10px;
		position: relative;
	}
	#mission .support ul li:first-child::before,#mission .support ul li:nth-child(2)::before,#mission .support ul li:last-child::before{
		content: "";
 		display: block;
		background-size: contain; 
		background-repeat: no-repeat;
  		background-position: center;
		position: absolute;
		top: 0;
		left: 5%;
		width: 18%;
		aspect-ratio:6/7;
		z-index: 10;	
	}
	
	
	#mission .support ul li:first-child::before{
		background-image: url("../images/supporttag_01.webp");
	}
	#mission .support ul li:nth-child(2)::before{
		background-image: url("../images/supporttag_02.webp");
	}
	#mission .support ul li:last-child::before{
		background-image: url("../images/supporttag_03.webp");
	}

	#mission .support ul li div:first-of-type{
		width: 95.7%;
		aspect-ratio: 29 / 24;
		background-color: #fff;
		margin: 0 auto 5%;
		border-radius: 5px;
		display: flex;
  		justify-content: center;
  		align-items: center; 
	}
	#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;		
	}
	#mission .support ul li div:last-of-type h4{
		color: #f25fba;
		width: fit-content;
		height: auto;
		margin: 0 auto 4%;
		font-size: clamp(14px,1.8vw,36px);
		font-weight: 500;
	}
	#mission .support ul li div:last-of-type p{
		width: fit-content;
		height: auto;
		margin: 0 auto;
		font-size: clamp(10px,1.25vw,24px);
		font-weight: 500;
		text-align: justify;
		word-break: break-all;
		line-break: strict;
	}
	#mission .support ul li div:last-of-type p span{
		display: block;
		font-size: clamp(8px,0.97vw,19px);
		margin-top: 2%;
	}
	#mission .course{
		width: 100%;
		height: auto;
		padding: 6% 11.8%;
		margin-bottom: 2%;
	}
	
	#mission .course h3{
		font-size: clamp(21px,2.7vw,53px);
		font-weight: 500;
		text-align: center;
		margin: 0 auto 3%;
	}
	#mission .course h3 span{
		font-size: clamp(13px,1.6vw,32px);
		display: block;
		font-weight: 500;
	}
	#mission .course h3 strong{
		font-weight: 700;
		color: #ff33a0;
	}
	#mission .course ul{
		width: clamp(470px,61.1vw,1173px);
		height:auto;
		margin: 0 auto 3%;
		display: flex;
		justify-content: space-between;
	}
	#mission .course ul li{
		width: 31.5%;
		height: auto;
		
	}	
	#mission .course ul li img{
		width: 100%;
		height: auto;
	}	
	#mission .course .course-contents{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 1%;
		
	}
	#mission .course .course-contents li{
		width: 47.27%;
		height: auto;
		background-color: #fef4fa;
		border-radius: 10px;
		padding: 3% 5%;
	}
	#mission .course .course-contents li h4{
		font-size: clamp(16px,2vw,40px);
		font-weight: 700;
		color: #ff33a0;
		text-align: center;
		margin-bottom: 4%;
	}
	#mission .course .course-contents li h4 span{
		display: block;
		font-size: clamp(10px,1.25vw,24px);
		font-weight: 500;
		color: #555;	
	}
	#mission .course .course-contents li div:first-of-type{
		width: 65.4%;
		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(8px,1.1vw,21px);
		text-align: justify;
		word-break: break-all;
		line-break: strict;
		margin-bottom: 4%;
		
	}
	#mission .course .course-contents li h5{
		font-size: clamp(10px,1.25vw,24px);
		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: 1% auto 5%;
	}
	#mission .course .course-contents li .course-skill li{
		display: block;
		font-size: clamp(8px,0.97vw,18px);
		line-height: 1;
		width: fit-content;
		padding: 1.5% 1%;
		border-radius: 3px;
		margin: 0 1% 1% 0 ;
		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(11px,1.38vw,27px);
		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: 70%;
		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,0.97vw,18px);
		text-align: right;
	}
	#mission .merit{
		width: 100%;
	   	height: auto;
	   	padding: 0 11.8%;
	   	margin-bottom: 5%;
	}
	#mission .merit .merit-contents{
		width: 100%;
		height: auto;
		background-color: #fff2e6;
		border-radius: 10px;
		padding: 3% 0 5%;
		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: 15%;
		aspect-ratio: 3 / 2;
		position: absolute;
		bottom: -11%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	
	#mission .merit .merit-contents h3{
		font-size: clamp(21px,2.7vw,53px);
		font-weight: 500;
		color: #ff8105;
		text-align: center;
		line-height: 1;
		margin-bottom: 3%;
	}
	#mission .merit .merit-contents ul{
		width: 93%;
		height: auto;
		margin: auto;
		display: flex;
		flex-wrap: wrap; 
  		justify-content: space-between;
	}
	#mission .merit .merit-contents ul li{
		position: relative;
		width: 49%;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 2%;
		padding: 3% 3% 25%;
	}
	
	#mission .merit .merit-contents ul li:nth-last-child(-n+2){
		margin-bottom: 0;
	}
	#mission .merit .merit-contents ul li h4{
		font-size: clamp(12px,1.25vw,27px);
		font-weight: 500;
		color: #555;
		text-align: center;
	}
	#mission .merit .merit-contents ul li h4 span{
		font-size: clamp(14px,1.8vw,35px);
		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 .annotation{
		margin: 1% 3% 0 0
	}
/*

*/
	.merit > p:last-of-type{
		font-size: clamp(21px,2.7vw,53px);
		font-weight: 500;
		text-align: center;
		color: #ff8105;
		margin-top: 11%;
	}
	
	#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;
	width: 95%;
  margin: auto;
}
#QandA details summary span{
	color: #f25fba;
	font-size: clamp(10px,1.32vw,25px);
    font-weight: 500;
	width: 90%;
	height: auto;
	}
	
	
#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 auto 1.4em;
    padding: 1.4em 2em;
    transition: transform .5s, opacity .5s;
	background: #f3f6f8;
	border-radius: 10px;
	width: 90%;
	display: flex;
	justify-content: space-between;
}
#QandA details div p {
color: #555;
	font-size: clamp(10px,1.25vw,24px);
}

#QandA details[open] div {
    transform:none;
    opacity: 1;
}
#QandA details[open] div figure{
margin-left: 25px;
}

	#Flow{
		width: 100%;
		height: auto;
		padding: 4% 11.8%;
		background-color: #f8f6f8;
		border-bottom: solid 1px #555;

	}
	#Flow>p{
		font-size: clamp(10px,1.25vw,24px);		
		line-height: 1.4;
	}
	#Flow ol{
		font-size:clamp(16px,2vw,40px);
width: 66%;
margin: 10% auto 0;
counter-reset: li;
}
#Flow  ol h3{
font-size: clamp(14px,1.8vw,35px);
font-weight: 500;
color: #f25fba;
margin-bottom: 2%;
}
#Flow  li{
position: relative;
margin-bottom: 5%;
padding: 4%;
background: #fff;
border-radius: 10px;
}
#Flow  li p{
		font-size: clamp(10px,1.25vw,24px);
	line-height: 1.4;
	}
	
	
	
#Flow  li::before{
	font-family: 'Jost';
position: absolute;
top: -10%;
left: -2%;
background: #f25fba;
border-radius: 50%;
width: 5%;
aspect-ratio: 1 / 1; 
text-align: center;
font-weight: 700;
	font-size: clamp(10px,1.25vw,21px);
color: #fff;
counter-increment: li;/*要素の連番（カウンタ）の値を進める*/
content: counter(li);/*自動連番を付ける関数*/
display: flex;
  align-items: center; /* 上下中央 */
  justify-content: center;
}
#Flow .btn{
display: block;
width: 56%;
margin: auto;	
padding: 2% 0;
border-radius: 100px;
background:#f25fba; 
font-weight: 700;
font-size: 1.6rem;
text-align: center;
text-decoration: none;
color: #fff;
transition: ease .2s;
}
#Flow .btn:hover{
color: #f25fba;
background: #fff;
transform: scale(1.06);
}
	
	
	
	
	
	
	
	
footer{
width: 100%;
padding: 6% 10% 5%;
}	
	
footer #education{
margin: 0 auto 50px;
}
	
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(11px,1.38vw,27px);
    font-weight: 400;
    line-height: 1.5;
	text-align: justify; 
	width: 80%;
	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: 8% 0;
	border-top: 1px solid #555;
}

footer #advertiser h2{
	margin: 0 auto 30px;
	color: #555;
	font-size: 2em;
	line-height: 1;
	text-align: center;
	padding: 0;
	}
footer #advertiser p{
		line-height: 2em;
	}
	
footer #advertiser ul{
	width: 60%;
	height: auto;
	margin: auto;
	list-style: none;
	font-size: clamp(9px,1.1vw,21px);
}
	

footer #advertiser ul li{
	display: flex;
	margin-bottom: 1.5%;
	
}
footer #advertiser ul li .adhead{
	width: clamp(85px,11vw,213px);
	height: 2em;
	text-align: center;
	background-color: #555;
	color: #fff;
	line-height: 2;
	letter-spacing: 0.1em;
}

footer #advertiser ul li .adcontent{
	margin: 0 0 0 20px;
	color: #555;
	letter-spacing: 0.05em;
	font-size: clamp(9px,1.1vw,21px);
}

footer #advertiser ul li .adcontent a{
	color: #555;
	font-size: 1em;
	text-underline-offset:0.3em;
}		
	
footer #ia{
	width: 100%;
	text-align: center;
    padding: 5% 0 7%;
    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: 5%;
	height: auto;
	margin: auto;
}
footer #ia a img{
		width: 100%;
		height: auto;
	}

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

footer #ia p {
    margin-bottom: 0;
	font-size: 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: -80px;
left: 50%;
transform: translateY(100%) translateX(-50%) ;
width: 94%;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
line-height: 120%;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s, transform 0.4s;

}
	
.popup-bnr.is-visible {
	opacity: 1;
	visibility: visible;
	 transform: translateY(-50%) translateX(-50%) ;
	pointer-events: auto;
 	 display: block; 
	margin: auto;
	left: 50%;
}
	
.popup-bnr span{
	position: relative;
    display: block;
    margin: auto;
    width: clamp(266px,34.7vw,666px);
    z-index: 1;
    text-align: center;
    color: #555;
    font-size: clamp(11px,1.38vw,27px);
	font-weight: 500;
    background-color: #fff;
    padding: 0.5%;
    border-radius: 100px;
	border: solid 1px #ff33a0;
}

.popup-bnr a{
display: block;
height: auto;
padding: 2.5% 0 2%;
text-decoration: none;
color:#fff;
filter: drop-shadow(0 0 6px 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: 69.5%;
position:relative;
top:-25px;
font-size: clamp(16px,2vw,40px);
line-height: 1.2;
    letter-spacing: 0.075rem;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
}
	
	
	
/*↑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%, 100% {
    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);
       }