@charset "UTF-8";
/* CSS Document */

html{
    height: 100%;
	max-width: 2560px;
	margin: 0 auto;
}

body{
	background-color:#EDEDED;
	margin: 0;
	font-family: din-2014, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 20pt;
	transition: 0.5s;
	max-height: 7500px;
}

header{
	text-align: left;
	padding: 10px;
	height: 100vh;
	margin-bottom: 60px;
}



.title02 {
    opacity: 0;
}
.title03 {
    opacity: 0;
}
.title04 {
    opacity: 0;
}
.title05 {
    opacity: 0;
}

*:focus {
outline: none;
}

img {
-webkit-user-drag: none;
}



.navigation{
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	right: 10px;
	z-index: 1
}



a.title01{
	text-decoration: none;
	color: black;
	margin-left: 27px;
	margin-top: 9px;
	position:fixed;
}

a.title02{
	text-decoration: none;
	color: black;
	margin-left: 27px;
	margin-top: 50px;
	position:fixed;
}

a.title03{
	text-decoration: none;
	color: black;
	margin-left: 27px;
	margin-top: 50px;
	position:fixed;
}

a.title04{
	text-decoration: none;
	color: black;
	line-height: 1em;
	margin-left: 27px;
	margin-top: 55px;
	position:fixed;
}

a.title05{
	text-decoration: none;
	color: black;
	margin-left: 27px;
	margin-top: 50px;
	position:fixed;
}

span.t_ls01{
	letter-spacing: -0.1em;
}

span.t_ls02{
	letter-spacing: 0.05em;
}

span.t_ls03{
	letter-spacing: -0.03em;
}

span.t_ls04{
	letter-spacing: 0.15em;
}

span.t_ls05{
	letter-spacing: 0.03em;
}



.pclink{
	position: fixed;
	bottom: 0;
	left: 40px;
	margin-bottom: -15px;
	z-index: 1
}

.pclink span{
	position: fixed;
	bottom: 0;
	left: 40px;
	margin-bottom: 40px;
	filter: opacity(0);
	transition: 0.3s;
	z-index: 1
}

.pclink:hover span{
	filter: opacity(1);
	transform: translateY(-10px);
}

.area01{
	position: fixed;
	bottom: 0;
	left: -10px;
	margin-bottom: -15px;
	opacity: 0;
	z-index: 1
}

.area01 img{
	cursor : pointer;
}

.pclink img{
	cursor : pointer;
}

.pc_popup_hide{
	filter: opacity(0);
	transition: 0.3s;
}



.footercontents{
	text-align: center;
	padding: 20px 0;
}

.footericon img{
	transition: 0.5s;
}

.footericon img:hover{
	transform: translateY(-7px);
}



.wrap01 {
	width: 835px;
	margin: 0 auto;
	margin-bottom: 300px;
}
  
#graphicgallery {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
  
.item01 {
width: 400px;
}
  
.item01 img {
	width: 100%;
	border-radius: 4px;
	vertical-align: bottom;
	margin-bottom: 30px;
}

.item01 img{
	filter: brightness(100%);
	transition: 1.0s;
}

.item01 img:hover{
	filter: brightness(125%);
	transform: translateY(-15px) translateX(-15px);
	transition: 0.5s;
}

.item01 img:active{
	filter: brightness(125%);
	transform: translateY(-10px) translateX(-10px);
	transition: 0.2s;
}


.wrap02 {
  width: 835px;
  margin: 0 auto;
	margin-bottom: 300px;
}
  
#packagegallery {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  margin-bottom: 200px;
}

.item02 {
  width: 835px;
}
  
.item02 img {
	width: 100%;
	border-radius: 4px;
	margin-bottom: 30px;
}

.item02 img{
	filter: brightness(100%);
	transition: 1.0s;
}

.item02 img:hover{
	filter: brightness(125%);
	transform: translateY(-15px) translateX(-15px);
	transition: 0.5s;
}

.item02 img:active{
	filter: brightness(125%);
	transform: translateY(-10px) translateX(-10px);
	transition: 0.2s;
}


.wrap03 {
  width: 835px;
  margin: 0 auto;
	margin-bottom: 300px;
}
  
#bookgallery {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  margin-bottom: 200px;
}
  
.item03 {
  width: 400px;
}
  
.item03 img {
	width: 100%;
	border-radius: 4px;
	margin-bottom: 20px;
}

.item03 img{
	filter: brightness(100%);
	transition: 1.0s;
}

.item03 img:hover{
	filter: brightness(125%);
	transform: translateY(-15px) translateX(-15px);
	transition: 0.5s;
}

.item03 img:active{
	filter: brightness(125%);
	transform: translateY(-10px) translateX(-10px);
	transition: 0.2s;
}


.wrap04 {
  width: 835px;
  margin: 0 auto;
	margin-bottom: 150px;
}
  
#illustrationgallery {
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
  
.item04 {
  width: 260px;
}
  
.item04 img {
	width: 100%;
	border-radius: 4px;
	margin-bottom: 10px;
}

.item04 img{
	filter: brightness(100%);
	transition: 0.8s;
}

.item04 img:hover{
	filter: brightness(125%);
	transform: translateY(-10px) translateX(-10px);
	transition: 0.4s;
}

.item04 img:active{
	filter: brightness(125%);
	transform: translateY(-7px) translateX(-7px);
	transition: 0.1s;
}



.fadein {
opacity : 0;
transition: all 1s;
}



.menu01{
  position: relative;
}
.tooltip01::after {
  position: absolute;
  margin-top: -35px;
  left: -78px;
  visibility:hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s;
}
.tooltip01::after {
  content: attr(data-tooltip);
  display: block;
  font-size: 15pt;
}
.tooltip01:hover::after{
  position: absolute;
  margin-top: -35px;
  left: -78px;
  visibility:visible;
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s;
}

.menu02{
	position: relative;
}
.tooltip02::after {
  position: absolute;
  margin-top: -35px;
  left: -83px;
  visibility:hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s;
}
.tooltip02::after {
  content: attr(data-tooltip);
  display: block;
  font-size: 15pt;
}
.tooltip02:hover::after{
  position: absolute;
  margin-top: -35px;
  left: -83px;
  visibility:visible;
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s;
}

.menu03{
	position: relative;
}
.tooltip03::after {
  position: absolute;
  margin-top: -35px;
  left: -135px;
  visibility:hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s;
}
.tooltip03::after {
  content: attr(data-tooltip);
  display: block;
  font-size: 15pt;
}
.tooltip03:hover::after{
  position: absolute;
  margin-top: -35px;
  left: -135px;
  visibility:visible;
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s;
}

.menu04{
	position: relative;
}
.tooltip04::after {
  position: absolute;
  margin-top: -35px;
  left: -145px;
  visibility:hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.5s;
}
.tooltip04::after {
  content: attr(data-tooltip);
  display: block;
  font-size: 15pt;
}
.tooltip04:hover::after{
  position: absolute;
  margin-top: -35px;
  left: -145px;
  visibility:visible;
  opacity: 1;
  transform: translateX(0px);
  transition: 0.5s;
}



.menu01 img {
	display: block;
	transition-duration: 0.2s;
}
.menu01 img:hover {
	transform: scale(1.5);
	transition-duration: 0.2s;
}
.menu01 img:active{
	transform: scale(1.3);
	transition-duration: 0.1s;
}

.menu02 img {
	display: block;
	transition-duration: 0.2s;
}
.menu02 img:hover {
	transform: scale(1.5);
	transition-duration: 0.2s;
}
.menu02 img:active{
	transform: scale(1.3);
	transition-duration: 0.1s;
}

.menu03 img {
	display: block;
	transition-duration: 0.2s;
}
.menu03 img:hover {
	transform: scale(1.5);
	transition-duration: 0.2s;
}
.menu03 img:active{
	transform: scale(1.3);
	transition-duration: 0.1s;
}

.menu04 img {
	display: block;
	transition-duration: 0.2s;
}
.menu04 img:hover {
	transform: scale(1.5);
	transition-duration: 0.2s;
}
.menu04 img:active{
	transform: scale(1.3);
	transition-duration: 0.1s;
}



.close{
	position: fixed;
	top: 30px;
	right: 30px;
}

.close{
	display: block;
	transition-duration: 0.2s;
}

.close:hover{
	filter:  opacity(0.6);
	transition-duration: 0.2s;
}

.close:active{
	transform: scale(0.9);
}

.next{
	position: fixed;
	top: 80px;
	right: 30px;
}

.next{
	display: block;
	transition-duration: 0.2s;
}

.next:hover{
	filter:  opacity(0.6);
	transition-duration: 0.2s;
}

.next:active{
	transform: scale(0.9);
}

.prev{
	position: fixed;
	top: 130px;
	right: 30px;
}

.prev{
	display: block;
	transition-duration: 0.2s;
}

.prev:hover{
	filter:  opacity(0.6);
	transition-duration: 0.2s;
}

.prev:active{
	transform: scale(0.9);
}

.prev_n{
	position: fixed;
	top: 130px;
	right: 30px;
}

.prev_n{
	display: block;
	transition-duration: 0.1s;
}

.prev_n:active{
	filter:  opacity(0.5);
}

.next_n{
	position: fixed;
	top: 80px;
	right: 30px;
}

.next_n{
	display: block;
	transition-duration: 0.1s;
}

.next_n:active{
	filter:  opacity(0.5);
}



.profile{
	margin: 0 auto;
	width: 600px;
	height: 390px;
	margin-top: calc(50vh + 15px);
	transform: translate(0%, -50%);
	position: relative;
}

.mb{
	position: absolute;
	right: 30px;
	top: 90px;
}

.mb{
	transition-duration: 0.2s;
}

.mb:hover{
	filter:  opacity(0.6);
	transition-duration: 0.2s;
}

.mb:active{
	transform: scale(0.9);
}

.cc{
	position: absolute;
	right: 30px;
	top: 30px;
}

.cc{
	transition-duration: 0.2s;
}

.cc:hover{
	filter:  opacity(0.6);
	transition-duration: 0.2s;
}

.cc:active{
	transform: scale(0.9);
}



.modal_cn{
	position: fixed;
	top: 2px;
	right: 85px;
	color: white;
}



.modalcontents{
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 70px;
}

.swiper-container {
    width: 700px;
    height: 100vh;
}

.swiper-slide img {
	width: 700px;
	height: 700px;
	object-fit: contain;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}

.caption{
	width: 550px;
	height: 100vh;
}

.caption img{
	width: 550px;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}



.black{
	filter: invert(100%);
}

.pm_01{
	width: 100vw;
	height: 100vh;
	text-align: center;
}

.pm_01 img{
	width: 700px;
	height: 700px;
	object-fit: contain;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}

.pm_02{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
    height: 100vh;
}

.packageimage01{
	width: 600px;
    height: 100vh;
	margin-bottom: 120px;
	margin-right: 25px;
}

.packageimage02{
	width: 600px;
    height: 100vh;
	margin-top: 120px;
	margin-left: 25px;
}

.packageimage01 img{
	width: 600px;
	height: 100vh;
	object-fit: contain;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}

.packageimage02 img{
	width: 600px;
	height: 100vh;
	object-fit: contain;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}

.pm_03{
	width: 100vw;
	height: 100vh;
	text-align: center;
}

.pm_03 img{
	width: 750px;
	height: 750px;
	object-fit: contain;
	margin-top: 50vh;
	transform: translate(0%, -50%);
}



.background01 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease-out 0s;
}

.background01 img{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.background02 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease-out 0s;
}

.background02 img{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.background03 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease-out 0s;
}

.background03 img{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.background04 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease-out 0s;
}

.background04 img{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.fade01{
	opacity: 1;
}



.st1{
  fill:none;
  stroke:none;
}

.add97{
  fill:#000;
  stroke:#000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 2;
  -webkit-animation: hello 3s ease-in 0s;
  animation: hello 3s ease-in 0s;
}

.add98{
  fill:#000;
  stroke:#000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 2;
}

@-webkit-keyframes hello {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      20% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      60% {
        fill:transparent;
      }
	  70% {
        fill:#000;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#000;
      }
    }


.toplogo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1
}

.toplogo svg{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}


.add99{
 fill:#000;
 stroke:#000;
 stroke-dasharray: 2000;
 stroke-dashoffset: 0;
 stroke-width: 2;
 -webkit-animation: add99 5.5s linear 0s;
 animation: add99 5.5s linear 0s;
}

@-webkit-keyframes add99 {
 0% {
 fill:#000;
 stroke:#000;
 stroke-dasharray: 2000;
 stroke-dashoffset: 0;
 }
 5% {
 fill:#000;
 stroke:#000;
 }
 10% {
 fill:#f0504b;
 stroke:#f0504b;
 stroke-dasharray: 60;
 }
 18% {
 fill:#f5c600;
 stroke:#f5c600;
 stroke-dasharray: 60;
 }
 26% {
 fill:#14b4c8;
 stroke:#14b4c8;
 stroke-dasharray: 60;
 }
 34% {
 fill:#f0504b;
 stroke:#f0504b;
 stroke-dasharray: 60;
 stroke-dashoffset: 2000;
 }
 42% {
 fill:#f5c600;
 stroke:#f5c600;
 stroke-dasharray: 60;
 }
 50% {
 fill:#14b4c8;
 stroke:#14b4c8;
 stroke-dasharray: 60;
 }
 58% {
 fill:#f0504b;
 stroke:#f0504b;
 stroke-dasharray: 60;
 }
 63% {
 fill:#000;
 stroke:#000;
 }
 74% {
 fill:#000;
 stroke:#000;
 stroke-dasharray: 2000;
 stroke-dashoffset: 0;
 }
 100% {
 fill:#000;
 stroke:#000;
 stroke-dasharray: 2000;
 stroke-dashoffset: 0;
 }
 }


.logoclick {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0
}
.logoclick img {
	display: block;
	width: 18vw;
	height: 24vh;
	margin: 0 auto;
	margin-top: 50vh;
	transform: translate(0%, -50%);
	opacity: 0;
	cursor : pointer;
}



.human{
	transition: 0.4s;
}
.human_a1{
	transform: translateY(60px);
	transition: 0.4s;
}

.pchuman{
	position: fixed;
	bottom: 0;
	left: 50vw;
	margin-bottom: -110px;
	z-index: 1000
}
.pchuman img{
	width: 60px;
	height: 100px;
	margin-left: -30px;
}

.human02{
	transition: 0.5s;
	filter: opacity(0);
}
.human_a2{
	transform: translateY(-95px);
	transition: 0.5s;
}

.human_a3{
	transform: translateY(-95px) translateX(-1100px);
	transition: 0.2s;
	transition-timing-function: ease-in;
}
.human_a4{
	transform: translateY(0px) translateX(-1100px);
	transition: 0.01s;
}

.btt{
	transform: translateY(0px);
	transition: 0.3s;
}
.btt_hide{
	transform: translateY(80px);
	transition: 0.3s;
}

.human_a5{
	filter: opacity(1);
}

.human_tag{
	transform: translateY(60px);
	transition: 0.4s;
}



.tag{
	position: fixed;
	left: 0px;	
	top: 50vh;
}
.tag img{
	width: 125px;
	height: 50px;
	margin-top: -25px;
}

.tag01{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}
.tag02{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}
.tag03{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}
.tag04{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}
.tag05{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}
.tag06{
	transform: translateX(-100px) rotate(-50deg);
	filter: opacity(0);
	transition: 0.6s;
}

.tagopacity{
	transform: translateX(30px) rotate(-5deg);
	filter: opacity(1);
}