@charset "UTF-8";

.visual {
	width: 100%;
	position: relative;
	z-index: -1;

}
@media print, screen and (min-width: 769px) {
	.visual {
		min-width: 1140px;
		height: 400px;
	}
}
@media only screen and (max-width: 768px) {
	.visual {
		min-width: 320px;
		padding: 0 20px 0 20px;
	}
}

.visual > h1 {
	font-weight: 700;
	z-index: +3;
}
@media print, screen and (min-width: 769px) {
	.visual > h1 {
		font-size: 6.7rem;
		position: absolute;
		top: 140px;
		left: 4%;
	}
}
@media only screen and (max-width: 768px) {
	.visual > h1 {
		font-size: 3.1rem;
		margin: 100px 0 0 0;
		position: relative;
	}
}

@media print, screen and (min-width: 769px) {
	.visual > h1 > img {
		width: auto;
		height: 75px;
	}
}
@media only screen and (max-width: 768px) {
	.visual > h1 > img {
		width: auto;
		height: 40px;
	}
}


.visual > .visual-headline {
	position: absolute;
	animation-duration: 30.0s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	z-index: +1;
}
@media print, screen and (min-width: 769px) {
	.visual > .visual-headline {
		width: 480px;
		height: 480px;
		top: -80px;
		left: -80px;
	}
}
@media only screen and (max-width: 768px) {
	.visual > .visual-headline {
		width: 320px;
		height: 320px;
		top: -160px;
		left: -80px;
	}
}

  
.visual > .visual-headline ul {
	position: relative;
}

.visual > .visual-headline ul li {
	position: absolute;
}
@media print, screen and (min-width: 769px) {
	.visual > .visual-headline ul li {
		width: 480px;
		height: 480px;
	}
}
@media only screen and (max-width: 768px) {
	.visual > .visual-headline ul li {
		width: 320px;
		height: 320px;
	}
}

.visual > .visual-headline ul li:nth-of-type(1) {
	background-color: rgba(128,203,196,0.7);
	mix-blend-mode: hard-light;
	top: 0;
	left: 0;
	animation-name: visual-headline-anm;
	animation-duration: 30.0s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
  
.visual > .visual-headline ul li:nth-of-type(2) {
	background-color: rgba(100,181,246,0.7);
	mix-blend-mode: hard-light;
	top: 5px;
	left: 5px;  
	animation-name: visual-headline-anm;
	animation-duration: 20.0s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
  
.visual > .visual-headline ul li:nth-of-type(3) {	
	background-color: #fff59db3;
	
	mix-blend-mode: normal;
	top: 10px;
	left: 10px;
	animation-name: visual-headline-anm;
	animation-duration: 10.0s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
  
@keyframes visual-headline-anm {  
	0%{
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
		top: 0px;
		left: 0px;
	}
	14%{
		border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
		top: 10px;
		left: 10px;
	}
	28%{
		border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
		top: 20px;
		left: 20px;
	}
	42%{
		border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
		top: 30px;
		left: 30px;
	}
	50%{
		border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
		top: 20px;
		left: 20px;
	}
	70%{
		border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
		top: 10px;
		left: 10px;
	}
	84%{
		border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
	}
	100%{
		border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
		top: 0px;
		left: 0px;
	}
}


.visual > .visual-text {
	z-index: +2;
}
@media print, screen and (min-width: 769px) {
	.visual > .visual-text {
		width: 640px;
		height: 640px;
		background-color: rgba(236,245,226,1.0);
		border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
		position: absolute;
		top: -160px;
		right: -20px;
	}
}
@media only screen and (max-width: 768px) {
	.visual > .visual-text {
		padding: 30px 0 0 0;
		position: relative;
	}
}


.visual > .visual-text > p {
	font-weight: 500;
}
@media print, screen and (min-width: 769px) {
	.visual > .visual-text > p {
		width: 480px;
		font-size: 1.7rem;
		margin: 300px 0 0 80px;
	}
}
@media only screen and (max-width: 768px) {
	.visual > .visual-text > p {
		font-size: 1.5rem;
	}
}

@media print, screen and (min-width: 769px) {
	.visual-circle {
		opacity: 0.2;
	}
}
@media only screen and (max-width: 768px) {
	.visual-circle {
		opacity: 0.1;
	}
}



.entry.index .mypage {
	width: 100%;
	background-color: #edc3c0;
	position: relative;
	z-index: +1;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage {
		max-width: 1600px;
		min-width: 1140px;
		padding: 0 0 80px 0;
		margin: 150px auto 150px auto;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage {
		min-width: 320px;
		margin: 60px auto 60px auto;
		padding: 0 0 80px 0;
	}
}

.entry.index .mypage::before {
	content: '';
	width: 100%;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 240"><path fill="%23edc3c0" id="svg-1" data-name="svg-1" class="svg-1" d="M1280,240H0V78S240,0,639.059,0C1040,0,1280,78,1280,78V240Z"/></svg>');
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	z-index: -1;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage::before {
		min-width: 1140px;
		height: 240px;
		top: -120px;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage::before {
		min-width: 320px;
		height: 120px;
		top: -48px;
	}
}


.entry.index .mypage::after {
	content: '';
	width: 100%;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 240"><path fill="%23edc3c0" id="svg-1" data-name="svg-2" class="svg-2" d="M0,0H1280V240s-240-78-639.059-78C240,162,0,240,0,240V0Z"/></svg>');
	background-size: 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	z-index: -1;	
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage::after {
		min-width: 1140px;
		height: 240px;
		bottom: -120px;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage::after {
		min-width: 320px;
		height: 120px;
		bottom: -48px;
	}
}


.entry.index .mypage > div {
	text-align: center;
	margin: 0 auto 0 auto;
	position: relative;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div {
		max-width: 1280px;
		padding: 0 2% 0 2%;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div {
		padding: 0 4% 0 4%;
	}
}

.entry.index .mypage > div > h2 {
	font-weight: 700;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > h2 {
		font-size: 3.1rem;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > h2 {
		font-size: 1.7rem;
	}
}


.entry.index .mypage > div > p {
	font-weight: 500;
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > p {
		text-align: left;
	}

	.entry.index .mypage > div > p > br {
		display: none;
	}
}


.entry.index .mypage > div > ul {
	display: flex;
	flex-wrap: wrap;
	margin: 25px 0 25px 0;
}


.entry.index .mypage > div > ul > li {
	text-align: left;
	background-color: rgba(255,255,255,1.0);
	border-radius: 25px;
	padding: 25px;
}

@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li:nth-of-type(1) {
		width: calc(50% - 10px);
		margin: 0 10px 20px 0;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li:nth-of-type(1) {
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li:nth-of-type(2) {
		width: calc(50% - 10px);
		margin: 0 0 20px 10px;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li:nth-of-type(2) {
		width: 100%;
		margin: 0 0 20px 0;
	}
}


@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li:nth-of-type(1) {
		width: calc(50% - 10px);
		margin: 0 10px 20px 0;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li:nth-of-type(1) {
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li:nth-of-type(2) {
		width: calc(50% - 10px);
		margin: 0 0 20px 10px;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li:nth-of-type(2) {
		width: 100%;
		margin: 0 0 20px 0;
	}
}


.entry.index .mypage > div > ul > li > h3 {
	font-weight: 700;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li > h3 {
		font-size: 2.1rem;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li > h3 {
		font-size: 1.5rem;
	}
}

@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li > p {
		margin: 10px 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li > p {
		margin: 5px 0 0 0;
	}
}


.entry.index .mypage > div > ul > li > a,
.entry.index .mypage > div > ul > li > label {
	font-weight: 700;
	padding: 10px 50px 10px 50px;
	margin: 15px 0 0 0;
	background: rgb(255 255 255);
	border: solid 1px rgb(105 105 105);
	border-radius: 50px;
	display: inline-block;
	transition: all 0.5s ease 0s;
}
@media print, screen and (min-width: 769px) {
	.entry.index .mypage > div > ul > li > a,
	.entry.index .mypage > div > ul > li > label {
		font-size: 2.1rem;
	}
}
@media only screen and (max-width: 768px) {
	.entry.index .mypage > div > ul > li > a,
	.entry.index .mypage > div > ul > li > label {
		font-size: 1.5rem;
	}
}

.entry.index .mypage > div > ul > li > a:hover {
	color: rgb(255 255 255);
	background: rgb(224 93 93);
}

.entry.index .mypage > div > ul > li > a > img,
.entry.index .mypage > div > ul > li > label > img {
	width: 16px;
	height: 16px;
	margin: -6px 0 0 0;
	vertical-align: middle;
	transition: all 0.5s ease 0s;
}

.entry.index .mypage > div > ul > li > a:hover > img {
	color: rgb(255 255 255);
	filter: invert(200%);
}

.entry.index .mypage > div > ul > li > label {
	color: rgb(205 205 205);
	background: rgb(105 105 105);
}

.entry.index .mypage > div > ul > li > label > img {
	filter: invert(75%);
}