@charset "utf-8";
@import url('common.css');
@import url('amime.css');
@import url('slick-theme.css');
@import url('slick.css');


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
TOP PAGE
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/



/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
PCページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */


@media all and (min-width: 1025px) {


/* visu */


#visu{
	position: relative;
	vertical-align:middle;
	width:100%;
	height:100vh;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background:url(../images/visu_top01.jpg) no-repeat center;
	background-size: cover;
	z-index:1;
}

#visu div.txt{
	height:calc(92vh - 90px);
	margin:0 auto 0 auto;
	padding:calc(90px + 8vh) 5vw 0 5vw;
	font-family: "Klee One", cursive;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	background:url(../images/bg_visu_txt.png) no-repeat center bottom var(--color-WH);
	background-size: 75vh auto;
}

#visu p{
	margin:0 0 0 0;
	padding:0 0;
	font-size:1.8vh;
	font-weight:600;
	line-height:1.8;
}

#visu h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:3vh;
	font-weight:600;
	line-height:1.5;
}










/* topAbout */

#topAbout{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:180px 0 200px 0;
	background:var(--color-Gf5);
}

#topAbout div.block{
	display:block;
	position: relative;
	width:90%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:center;
	align-items:stretch;
	flex-wrap:wrap;
	gap:5%;
}


#topAbout div.ph{
	width:45%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


.speed01 {
	position: absolute;
	max-width:360px;
	width:22vw;
	aspect-ratio: 1 / 1;
	top: 5vw;
	left: -5vw;
	animation: speed01 linear;
	animation-timeline: scroll();
}

.speed02 {
	position: absolute;
	max-width:400px;
	width:25vw;
	aspect-ratio: 1 / 1;
	top: 40vw;
	left: 0;
	animation: speed02 linear;
	animation-timeline: scroll();
}

.normal {
	position: absolute;
	max-width:456px;
	width:30vw;
	aspect-ratio: 1 / 1;
	top: 0;
	left: 10vw;
}

.speed01 img,
.speed02 img,
.normal img{
	width:100%;
}


@keyframes speed01 {
  from {
    transform: translateY(-25vw);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes speed02 {
  from {
    transform: translateY(-30vw);
  }
  to {
    transform: translateY(-5vw);
  }
}







#topAbout div.title{
	position: relative;
	width:50%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#topAbout div.title h2{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:min(2vw,180%);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 1px;
	font-family: "Klee One", cursive;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	right:10vw;
}
#topAbout div.title h3{
	display:block;
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:min(1.4vw,146%);
	font-weight:500;
	line-height:1.4;
	letter-spacing: 2px;
}
#topAbout div.title h4{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family: "Caveat", cursive;
	font-size:min(6vw,500%);
	font-weight:300;
	line-height:1.4;
	color:var(--color-Gdd);
	top:25vw;
	right:10vw;
	letter-spacing: -1px;
  transform: rotate(-10deg);
}

#topAbout div.title p{
	display:inline-block;
	position: relative;
	margin:0 0 0 0;
	padding:50px 0 0 0;
	font-size:min(1vw,90%);
	font-weight:400;
	line-height:2;
	letter-spacing: 1px;
}


#topAbout div.block div.btn{
	display:block;
	position: relative;
	margin:50px 0 0 0;
	padding:0 0 0 0;
	position: relative;
	width:100%;
	display: flex;
	align-items:stretch;
	flex-wrap:wrap;
}

#topAbout div.block div.btn a{
	display: block;
	margin:0 0 0 0;
	padding:0 0 0 20px;
	display: flex;
	align-items:center;
	font-size:var(--font-16);
	font-weight:500;
	line-height:1.7;
	letter-spacing: 1px;
	border:1px solid var(--color-BLU1);
	color:var(--color-BLU1);
	background:url(../images/icon_arrow.webp) no-repeat right 20px top 50%;
	background-size: 13px auto;
	border-radius: 50px;
}

#topAbout div.block div.btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#topAbout div.block div.btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 60%;
	left: calc(40px + 3vw);
	width: 70px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
}

#topAbout div.block div.btn a:hover{
	color:var(--color-G99);
}

#topAbout div.block div.btn a:hover:before {
	border-top: solid 1px var(--color-G99);
	border-right: solid 1px var(--color-G99);
}

#topAbout div.block div.btn a:hover:after {
	border-top: solid 1px var(--color-G99);
}






/* topService */

#topService{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:150px 0 150px 0;
	background:var(--color-WH);
	z-index:1;
}

#topService div.block{
	display:block;
	position: relative;
	width:90%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
	display: flex;
	justify-content:center;
	align-items:stretch;
	flex-wrap:wrap;
	gap:5%;
	flex-direction:row-reverse;
}


#topService div.ph{
	max-width:456px;
	width:30vw;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#topService div.ph img{
	width:100%;
}


#topService div.title{
	position: relative;
	width:40%;
	margin:0 0 0 10%;
	padding:0 0 0 0;
}

#topService div.title h2{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:min(2vw,180%);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 1px;
	font-family: "Klee One", cursive;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	right:5vw;
}
#topService div.title h3{
	display:block;
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:min(1.4vw,146%);
	font-weight:500;
	line-height:1.4;
	letter-spacing: 2px;
}
#topService div.title h4{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family: "Caveat", cursive;
	font-size:min(6vw,500%);
	font-weight:300;
	line-height:1.4;
	color:var(--color-Gdd);
	top:26vw;
	right:-8vw;
	letter-spacing: -1px;
  transform: rotate(-10deg);
}

#topService div.title p{
	display:inline-block;
	position: relative;
	margin:0 0 0 0;
	padding:50px 0 0 0;
	font-size:min(1vw,90%);
	font-weight:400;
	line-height:2;
	letter-spacing: 1px;
}


#topService div.block div.btn{
	display:block;
	position: relative;
	margin:50px 0 0 0;
	padding:0 0 0 0;
	position: relative;
	width:100%;
	display: flex;
	align-items:stretch;
	flex-wrap:wrap;
}

#topService div.block div.btn a{
	display: block;
	margin:0 0 0 0;
	padding:0 0 0 20px;
	display: flex;
	align-items:center;
	font-size:var(--font-16);
	font-weight:500;
	line-height:1.7;
	letter-spacing: 1px;
	border:1px solid var(--color-BLU1);
	color:var(--color-BLU1);
	background:url(../images/icon_arrow.webp) no-repeat right 20px top 50%;
	background-size: 13px auto;
	border-radius: 50px;
}

#topService div.block div.btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#topService div.block div.btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 60%;
	left: calc(40px + 3vw);
	width: 70px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
}

#topService div.block div.btn a:hover{
	color:var(--color-G99);
}

#topService div.block div.btn a:hover:before {
	border-top: solid 1px var(--color-G99);
	border-right: solid 1px var(--color-G99);
}

#topService div.block div.btn a:hover:after {
	border-top: solid 1px var(--color-G99);
}





}













/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
SPページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

@media all and (max-width: 1024px) {


/* visu */


#visu{
	position: relative;
	vertical-align:middle;
	width:100%;
	height:100vh;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background:url(../images/visu_top01_sp.jpg) no-repeat center;
	background-size: cover;
	z-index:1;
	display: flex;
	justify-content:flex-end;
	align-items:center;
	flex-wrap:wrap;
}

#visu div.txt{
	margin:-25vw 5vw 0 0;
	padding:10% 7%;
	font-family: "Klee One", cursive;
	background:var(--color-WH);
	text-align: left;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

#visu p{
	margin:0 0 0 0;
	padding:0 0;
	font-size:2vh;
	font-weight:700;
	line-height:1.5;
}

#visu h2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:2.6vh;
	font-weight:800;
	line-height:1.4;
}










/* topAbout */

#topAbout{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:50px 0 50px 0;
	background:var(--color-Gf5);
}

#topAbout div.block{
	display:block;
	position: relative;
	width:86%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}


#topAbout div.ph{
	position: relative;
	width:100%;
	height:80vw;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


.speed01 {
	position: absolute;
	width:30vw;
	aspect-ratio: 1 / 1;
	top: 5vw;
	left: -5vw;
	animation: speed01 linear;
	animation-timeline: scroll();
}

.speed02 {
	position: absolute;
	width:36vw;
	aspect-ratio: 1 / 1;
	top: 55vw;
	left: 5vw;
	animation: speed02 linear;
	animation-timeline: scroll();
}

.normal {
	position: absolute;
	width:50vw;
	aspect-ratio: 1 / 1;
	top: 0;
	right: 0;
}

.speed01 img,
.speed02 img,
.normal img{
	width:100%;
}


@keyframes speed01 {
  from {
    transform: translateY(-25vw);
  }
  to {
    transform: translateY(0px);
  }
}
@keyframes speed02 {
  from {
    transform: translateY(-30vw);
  }
  to {
    transform: translateY(-5vw);
  }
}







#topAbout div.title{
	position: relative;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#topAbout div.title h2{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-20);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 1px;
	font-family: "Klee One", cursive;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	right:2vw;
}
#topAbout div.title h3{
	display:block;
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-20);
	font-weight:500;
	line-height:1.4;
	letter-spacing: 2px;
}
#topAbout div.title h4{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family: "Caveat", cursive;
	font-size:12vw;
	font-weight:300;
	line-height:1.4;
	color:var(--color-Gdd);
	top:-65vw;
	left:15vw;
	letter-spacing: -1px;
  transform: rotate(-10deg);
}

#topAbout div.title p{
	width:70%;
	display:inline-block;
	position: relative;
	margin:0 0 0 0;
	padding:40px 0 0 0;
	font-size:var(--font-13);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
}


#topAbout div.block div.btn{
	display:block;
	position: relative;
	margin:40px 0 0 0;
	padding:0 0 0 0;
	position: relative;
	width:100%;
	display: flex;
	align-items:stretch;
	flex-wrap:wrap;
}

#topAbout div.block div.btn a{
	display: block;
	margin:0 0 0 0;
	padding:0 0 0 20px;
	display: flex;
	align-items:center;
	font-size:var(--font-16);
	font-weight:500;
	line-height:1.7;
	letter-spacing: 1px;
	border:1px solid var(--color-BLU1);
	color:var(--color-BLU1);
	background:url(../images/icon_arrow.webp) no-repeat right 20px top 50%;
	background-size: 13px auto;
	border-radius: 50px;
}

#topAbout div.block div.btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#topAbout div.block div.btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 60%;
	left: calc(70px + 3vw);
	width: 70px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
}

#topAbout div.block div.btn a:hover{
	color:var(--color-G99);
}

#topAbout div.block div.btn a:hover:before {
	border-top: solid 1px var(--color-G99);
	border-right: solid 1px var(--color-G99);
}

#topAbout div.block div.btn a:hover:after {
	border-top: solid 1px var(--color-G99);
}






/* topService */

#topService{
	position: relative;
	width:100%;
	margin:0 auto 0 auto;
	padding:50px 0 50px 0;
	background:var(--color-WH);
	z-index:1;
}

#topService div.block{
	display:block;
	position: relative;
	width:86%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}


#topService div.ph{
	position: relative;
	width:50vw;
	height:75vw;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#topService div.ph img{
	width:100%;
}


#topService div.title{
	position: relative;
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#topService div.title h2{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-20);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 1px;
	font-family: "Klee One", cursive;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-o-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	left:2vw;
}
#topService div.title h3{
	display:block;
	position: relative;
	margin:0 0 0 30%;
	padding:0 0 0 0;
	font-size:var(--font-20);
	font-weight:500;
	line-height:1.4;
	letter-spacing: 2px;
}
#topService div.title h4{
	display:block;
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family: "Caveat", cursive;
	font-size:12vw;
	font-weight:300;
	line-height:1.4;
	color:var(--color-Gdd);
	top:-40vw;
	left:36vw;
	letter-spacing: -1px;
  transform: rotate(-10deg);
}

#topService div.title p{
	display:inline-block;
	position: relative;
	margin:0 0 0 30%;
	padding:40px 0 0 0;
	font-size:var(--font-13);
	font-weight:400;
	line-height:1.8;
	letter-spacing: 1px;
}


#topService div.block div.btn{
	display:block;
	position: relative;
	margin:40px 0 0 30%;
	padding:0 0 0 0;
	position: relative;
	display: flex;
	align-items:stretch;
	flex-wrap:wrap;
}

#topService div.block div.btn a{
	display: block;
	margin:0 0 0 0;
	padding:0 0 0 20px;
	display: flex;
	align-items:center;
	font-size:var(--font-16);
	font-weight:500;
	line-height:1.7;
	letter-spacing: 1px;
	border:1px solid var(--color-BLU1);
	color:var(--color-BLU1);
	background:url(../images/icon_arrow.webp) no-repeat right 20px top 50%;
	background-size: 13px auto;
	border-radius: 50px;
}

#topService div.block div.btn a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#topService div.block div.btn a:after {
	display: block;
	content: "";
	position: absolute;
	top: 60%;
	left: calc(70px + 3vw);
	width: 70px;
	margin: 0 0 0 0;
	border-top: solid 1px #333;
}

#topService div.block div.btn a:hover{
	color:var(--color-G99);
}

#topService div.block div.btn a:hover:before {
	border-top: solid 1px var(--color-G99);
	border-right: solid 1px var(--color-G99);
}

#topService div.block div.btn a:hover:after {
	border-top: solid 1px var(--color-G99);
}







}