/***** コンテンツに対するＣＳＳ *****/

main {
	width: 100%;
	height: auto;
	letter-spacing: 0.1vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.top_area {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin-top: 3vw;
	display: flex;
	justify-content: center;
	align-items: center;
	}

.anime-frame {
	overflow: hidden;
	position: relative;
	aspect-ratio: 16/9;
	width: 95%;
	height: auto;
	border-radius: 2vw;
	z-index: -10;
	display: flex;
	justify-content: center;
	align-items: center;
	}

.in-frame {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}

.anime-00 {
	animation: slide-animation-00 38s infinite;
	}

.anime-01 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/auction.webp) center center / auto 100% no-repeat;
	animation: slide-animation-01 38s infinite;
	}

.anime-02 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/nail1.webp) center center / auto 100% no-repeat;
	animation: slide-animation-02 38s infinite;
	}

.anime-03 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/nail2.webp) center center / auto 100% no-repeat;
	animation: slide-animation-03 38s infinite;
	}

.anime-04 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/top/desk.webp) center top / auto 100% no-repeat;
	animation: slide-animation-04 38s infinite;
	}

.message {
	position: relative;
	width: 95%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	z-index: 100;
	}

.message-img {
	width: 100%;
	height: 13vw;
	background: url(../images/top/message.svg) center center / 100% auto no-repeat;
	transform: rotate(355deg);
	}

.message .decoration {
	position: absolute;
	top: 0;
	left: 3%;
	width: 100%;
	height: 15vw;
	background: url(../images/top/ライン.svg) center center / 100% auto no-repeat;
	}

/*****   足跡   *****/

.footprint {
	position: absolute;
	top: 98%;
	width: 100%;
	height: 2.2vw;
	transform: rotate(353deg);
	display: flex;
	flex-direction: column;
	}

.footprint-left {
	width: 90%;
	height: 100%;
	margin-left: 2%;
	display: flex;
	justify-content: space-between;
	}

.footprint-right {
	width: 90%;
	height: 100%;
	margin-left: 9%;
	display: flex;
	justify-content: space-between;
	}

.styles {
	width: 4vw;
	height: 3vw;
	background: url(../images/top/footprint.svg) center center / auto 80% no-repeat;
	transform: rotate(75deg);
	opacity: 0;
	}

.footprint1 {
	animation: step-animation-01 10s infinite;
	}

.footprint2 {
	animation: step-animation-02 10s infinite;
	}

.footprint3 {
	animation: step-animation-03 10s infinite;
	}

.footprint4 {
	animation: step-animation-04 10s infinite;
	}

.footprint5 {
	animation: step-animation-05 10s infinite;
	}

.footprint6 {
	animation: step-animation-06 10s infinite;
	}

.footprint7 {
	animation: step-animation-07 10s infinite;
	}

.footprint8 {
	animation: step-animation-08 10s infinite;
	}

.footprint9 {
	animation: step-animation-09 10s infinite;
	}

.footprint10 {
	animation: step-animation-10 10s infinite;
	}

.footprint11 {
	animation: step-animation-11 10s infinite;
	}

.footprint12 {
	animation: step-animation-12 10s infinite;
	}

.footprint13 {
	animation: step-animation-13 10s infinite;
	}

.footprint14 {
	animation: step-animation-14 10s infinite;
	}

.in-frame img {
	position: absolute;
	width: 100%;
	height: auto;
	}

/*****     News     *****/
.news {
	box-sizing: border-box;
	width: 80%;
	margin: 20% 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.news p {
	width: 100%;
	font-size: 1.5vw;
	font-weight: bold;
	letter-spacing: 0.1vw;
	text-align: justify;
	}

.news_content {
	box-sizing: border-box;
	width: 100%;
	padding: 7% 0;
	border-top: solid 0.5vw #ccc;
	border-bottom: solid 0.5vw #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.news dl {
	box-sizing: border-box;
	width: 90%;
	margin: 2% 0;
	padding: 1% 0;
	font-size: 1.2vw;
	display: flex;
	}

.news dl dt {
	width: 25%;
	}

.news dl dd {
	width: 75%;
	}

.news dl dd a {
	background: url(../images/header-footer/rink_yajirushi.svg) right center / auto 80% no-repeat;
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 0.2vw;
	}

.news dl dd a:hover {
	color: var(--color-1);
	transition: color 0.3s ease;
	}

/*****     YouTube     *****/

.youtube_area {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.youtube_area p {
	background: url(../images/top/icon_youtube.svg) left center / auto 90% no-repeat;
	font-size: 2.5vw;
	font-weight: bold;
	letter-spacing: 0.1vw;
	text-align: center;
	}

.youtube {
	aspect-ratio: 16/9;
	max-width: 100vw;
	width: 70%;
	height: auto;
	margin-top: 3%;
	box-shadow: 0.5vw 0.5vw 1vw 0 var(--color-4);
	}

/*****     セクション共通     *****/

article {
	box-sizing: border-box;
	width: 100%;
	padding: 23vw 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	
section {
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	height: 80vw;
	display: flex;
	justify-content: center;
	align-items: center;
	}

.left_area {
	box-sizing: border-box;
	width: 65%;
	height: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	z-index: -400;
	}

.in-top {
	position: relative;
	}

hgroup {
	box-sizing: border-box;
	width: 97%;
	height: 20%;
	display: flex;
	align-items: flex-end;
	z-index: -100;
	}

.in-top hgroup {
	position: absolute;
	top: 5vw;
	}

.number {
	width: 12vw;
	height: 12vw;
	font-size: 0;
	transition: none;
	}

.number-1 {
	background:url(../images/top/1.svg) center bottom / 100% auto no-repeat;
	}

.number-2 {
	background:url(../images/top/2.svg) center bottom / 100% auto no-repeat;
	}

.number-3 {
	background:url(../images/top/3.svg) center bottom / 100% auto no-repeat;
	}

h2 {
	padding-bottom: 1%;
	font-size: 2.8vw;
	letter-spacing: 0.1vw;
	text-orientation: upright;
	}

/*****     セクション1     *****/

.sentence {
	box-sizing: border-box;
	width: 97%;
	padding: 1%;
	letter-spacing: 0.1vw;
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: -100;
	}

.sentence p {
	width: 95%;
	font-size: 1.5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.features {
	box-sizing: border-box;
	font-size: 1.1vw;
	line-height: 1.8vw;
	letter-spacing: 0.1vw;
	text-align: justify;
	}

.box1 {
	position: absolute;
	top: 43vw;
	left: 1.5vw;
	width: 65vw;
	height: 27%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

.feature {
	position: relative;
	box-sizing: border-box;
	width: 31%;
	height: 100%;
	box-shadow: 0.5vw 0.5vw 0.8vw #ccc;
	z-index: -100;
	}

.feature-object {
	background: #c1e1dc;
	position: absolute;
	top: 4.2vw;
	left: 5.2vw;
	box-sizing: border-box;
	width: 80%;
	height: 80%;
	border-radius: 0 0 1vw 0;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	z-index: -200;
	}

.feature dl {
	background: rgba(255, 255, 255, 1);
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 2% 5%;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.feature dl dt {
	line-height: 3.5vw;
	background: #fff;
	text-align: center;
	}

/*****     セクション2     *****/

.sentence2 p {
	font-size: 1.5vw;
	z-index: -100;
	}

.box2 {
	width: 100%;
	height: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	z-index: -300;
	}

.box2 dl {
	position: relative;
	box-sizing: border-box;
	width: 40%;
	height: 45%;
	padding: 2%;
	background: #ffeb94;
	border-radius: 1vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: -100;
	}

.box2 div {
	position: absolute;
	bottom: 1.5vw;
	right: 1.5vw;
	width: 6vw;
	height: 6vw;
	z-index: -200;
	}

.item-1 {
	background: url(../images/top/work.svg) center center / auto 100% no-repeat;
	}

.item-2 {
	background: url(../images/top/rhythm.svg) center center / auto 100% no-repeat;
	}

.item-3 {
	background: url(../images/top/kouchin.svg) center center / auto 100% no-repeat;
	}

.item-4 {
	background: url(../images/top/launch.svg) center center / auto 100% no-repeat;
	}

.box2 dl dt {
	margin-bottom: 3%;
	font-weight: bold;
	text-decoration: underline;
	}

.box2 dl dd {
	line-height: 1.5vw;
	}

/*****     セクション3     *****/

.sentence3 {
	box-sizing: border-box;
	width: 95%;
	margin: 3% 0;
	padding: 1%;
	line-height: 2.5vw;
	letter-spacing: 0.1vw;
	text-align: justify;
	z-index: -100;
	}

.sentence3 p {
	font-size: 1.5vw;
	}

.sentence4 {
	box-sizing: border-box;
	width: 95%;
	margin-top: 3%;
	padding: 1%;
	border-radius: 2vw;
	font-size: 1.1vw;
	/* font-size: 1em; */
	line-height: 3vw;
	letter-spacing: 0.1vw;
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: -100;
	}

.sentence4 h3 {
	height: auto;
	text-align: left;
	background: url(../images/top/jinbutu.svg) left center / auto 70% no-repeat;
	}

.sentence4 p {
	width: 95%;
	height: auto;
	text-align: left;
	}

.sentence4 dl {
	background: #fff2e5;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 3% 0;
	padding: 1% 2%;
	border-radius: 1vw;
	line-height: 2.5vw;
	letter-spacing: 0.1vw;
	text-align: justify;
	display: flex;
	flex-wrap: wrap;
	}

.sentence4 dl dt {
	width: 2%;
	font-weight: bold;
	}

.sentence4 dl dd {
	width: 98%;
	}

.certificate {
	box-sizing: border-box;
	width: 95%;
	letter-spacing: 0.1vw;
	text-align: justify;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	z-index: -100;
	}

.certificate dl {
	box-sizing: border-box;
	width: 100%;
	margin: 3% 0 1% 1%;
	padding: 0.5% 1%;
	background: #ffffff;
	border-left: solid 0.8vw #fccc9d;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

.certificate dl dt {
	width: 100%;
	padding-bottom: 1%;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 0.3vw;
	}

.certificate dl dd {
	width: 100%;
	}

.hosoku {
	margin-top: 2%;
	text-align: center;
	font-size: 1.2vw;
	font-weight: bold;
	z-index: -100;
	}


/*****     セクション共通の右エリア     *****/

.right_area {
	position: relative;
	box-sizing: border-box;
	width: 35%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -500;
	}

.image_photo {
	width: 25vw;
	height: 25vw;
	border: solid 0.1vw #ccc;
	border-radius: 1vw;
	box-shadow: 0.5vw 0.5vw 1vw #ccc;
	z-index: -350;
	}

.photo1 {
	background: url(../images/top/koala-a.webp) center bottom 30% / 130% auto no-repeat;
	}

.photo2 {
	background: url(../images/top/koala-b.webp) center center / cover no-repeat;
	}

.photo3 {
	background: url(../images/top/koala-c.webp) center center / auto 100% no-repeat;
	}

.line_group {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: 100%;
	transform: translate(-50%, -50%) ;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -400;
	}

.line_color1 {
	background: linear-gradient(180deg,#fff, #c1e1dc 15%,#c1e1dc 85% , #ffeb94 100%);
	}

.line_color2 {
	background: linear-gradient(180deg,#ffeb94, #ffeb94 15% ,#ffeb94 85% , #fff2e5 100%);
	}

.line_color3 {
	background: linear-gradient(180deg,#fff2e5, #fff2e5 15% ,#fff2e5 85% , #fff 100%);
	}

.line1 {
	width: 30%;
	height: 100%;
	background: #fff;
	}

.svg_area {
	position: absolute;
	top: 12%;
	left: -45%;
	width: 60vw;
	height: 60vw;
	border-radius: 50vw;
	z-index: -300;
	}



/* 円周テキストを回す */
.rotater {
	transform-origin: 50% 50%;
	animation: spin 38s linear infinite;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	}

/* 前景テキスト */
.text-fg {
	font-size: 2.2em;
	fill: #e8e8e8;
	}





/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media (max-width: 1024px){



	

/***** コンテンツに対するＣＳＳ *****/

.top_area {
	margin-top: 5vw;
	}

.anime-frame {
	aspect-ratio: 4/3;
	width: 90%;
	}

.message-img {
	height: 15vw;
	width: 108%;
	}

/*****   足跡   *****/

.footprint {
	height: 3vw;
	}

.styles {
	background: url(../images/top/footprint.svg) center center / auto 110% no-repeat;
	}

/*****     News     *****/
.news {
	width: 90%;
	}

.news p {
	font-size: 3vw;
	}

.news dl {
	width: 95%;
	font-size: 2.5vw;
	}

/*****     YouTube     *****/

.youtube_area p {
	font-size: 4vw;
	}

/*****     セクション共通     *****/

section {
	height: 250vw;
	flex-direction: column-reverse;
	}

.left_area {
	width: 90%;
	height: 100%;
	}

.in-top {
	position: static;
	}

hgroup {
	height: auto;
	justify-content: center;
	}

.in-top hgroup {
	position: static;
	}

.number {
	width: 15vw;
	height: 15vw;
	}

h2 {
	font-size: 4vw;
	}

/*****     セクション1     *****/

.sentence {
	line-height: 5vw;
	}

.sentence p {
	font-size: 3vw;
	}

.features {
	font-size: 2.5vw;
	line-height: 3.5vw;
	}

.box1 {
	position: static;
	width: 100%;
	height: 45%;
	margin: 5% 0;
	flex-direction: column;
	}

.feature {
	width: 95%;
	height: 28%;
	}

.feature-object {
	top: 2vw;
	left: 2vw;
	width: 100%;
	height: 100%;
	}

.feature dl dt {
	line-height: 6vw;
	}

.mobile {
	display: none;
	}

/*****     セクション2     *****/

.sentence2 p {
	font-size: 3vw;
	}

.box2 {
	height: 70%;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-evenly;
	}

.box2 dl {
	width: 90%;
	height: auto;
	font-size: 2.5vw;
	align-items: flex-start;
	}

.box2 div {
	width: 10vw;
	height: 10vw;
	}

.box2 dl dt {
	line-height: 3vw;
	}

.box2 dl dd {
	line-height: 3.5vw;
	}

/*****     セクション3     *****/

.sentence3 {
	line-height: 5vw;
	}

.sentence3 p {
	font-size: 3vw;
	}

.sentence4 {
	font-size: 3vw;
	}

.sentence4 h3 {
	background: url(../images/top/jinbutu.svg) left center / auto 100% no-repeat;
	}

.sentence4 dl {
	font-size: 2.5vw;
	line-height: 4vw;
	}

.sentence4 dl dt {
	width: 5%;
	}

.sentence4 dl dd {
	width: 95%;
	}

.certificate {
	height: 25%;
	}

.certificate dl {
	font-size: 2.5vw;
	border-left: solid 1.5vw #fccc9d;
	}

.hosoku {
	font-size: 2.5vw;
	}


/*****     セクション共通の右エリア     *****/

.right_area {
	width: 90%;
	height: 55%;
	}

.image_photo {
	width: 40vw;
	height: 40vw;
	}

.line_group {
	width: 15%;
	}

.line_color1 {
	background: linear-gradient(180deg,#fff, #c1e1dc 15%,#c1e1dc 85% , #fff 100%);
	}

.line_color2 {
	background: linear-gradient(180deg,#fff, #ffeb94 15% ,#ffeb94 85% , #fff 100%);
	}

.line_color3 {
	background: linear-gradient(180deg,#fff, #fff2e5 15% ,#fff2e5 85% , #fff 100%);
	}

.svg_area {
	top: 3%;
	left: 2%;
	width: 85vw;
	height: 85vw;
	}

}





/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/

@media (max-width: 500px){



	

.anime-frame {
	aspect-ratio: 1/1;
	}
}