@charset "utf-8";

/*
************************************************************************
* index TOPページ
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */


#page-title.page-index {
	padding-bottom: 200px;
}
#body.page-index section.bg-wave.bg-wave-beige {
	padding-top: 10em;
	margin-top: -10em;
	background-size: contain;
}


#copy {
	width: 275px;
}

.link-contents {
	margin-top: -200px;
	margin-bottom: 10em;
}


.box-partner {

}
.box-partner .flex-box-item {
	margin-bottom: 2em;
	padding: 1em 0;
	justify-content: space-between;
}

.partner-img {
	width: 35%;
}
.partner-text {
	width: 65%;
	font-size: 1.2em;
}
.partner-text .copy {
	font-size: 1.8em;
}




.circle-animation {
	display: block;
	position: static;
}

.circle-block {
	position: static;

	transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
}

.circle-block > * {
	transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
}
.circle-block .circle-mask{
	position: absolute;
	top: 50%;
	transform:translateY(-50%);

	content: "";
	display: block;
	width: 100%;
  	padding-top: 100%;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.69);

}
.circle-block:hover .circle-mask {
	width: 110%;
	padding-top: 110%;

	transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
}


.circle-block .circle-in {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 2em;
}
.circle-block:hover .circle-in {
	font-size: 1.2em;
	font-weight: bold;
}

.circle-block .circle-in .title {
	color: #FF6000;
	font-size: 1.2em;
	margin-bottom: 0.2em;
}
.circle-block .circle-in .text {
	font-size: 1em;
}





.circle-block .circle-img {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 5%;
	transform: translateY(-47%);
}

.circle-block:hover .circle-img {
	top: 80%;
	left: 10%;
}


.circle-block .circle-back-text {
	position: absolute;
	bottom: -0.2em;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;

	color: rgba(255,96,0,0.55);
	line-height: 1;
	font-size: 10em;
}
.circle-block:hover .circle-back-text {
	opacity: 1;
}