@charset "UTF-8";
.marcellus-regular {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}
.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
body {
	font-family:"Marcellus","dnp-shuei-gothic-gin-std",  sans-serif;/*"Arial","YuGochic","Times","Shippori Mincho","ten-mincho","YuMincho",serif;*/
	color: #666666;
}
body h1,h2,h3,h4{
	font-family:"Marcellus","dnp-shuei-gothic-gin-std",'serif';
}
@media screen and (max-width: 768px){
	nav{
		display: none}
}
 nav ul{
	display: flex;
	width: 50%;
	position: fixed;
	top: 0px;
	right: -10%;
	z-index: 2;
}
@media screen and (max-width: 1000px){
 	nav ul{
		width: 70%;
		right: -25%;}
}
nav ul li{
	width: calc(100% / 6);
}
nav ul li a{
	display: block;
	color: #666666;
	padding: 20px 0;
	transition:all .3s;
	position: relative;
}
.index-title h4 {
	position: fixed;
	z-index: 5;
	font-size: 1.2rem;
	top: 20px;
	left: 4%;
}
.container-n > div {
	height: 330px;
}
.container-n > div p {
	padding-top: 35vh;
	text-align: center;
}
.colorchange{
  color: #fff; /* defo: blanc */
  font-size: 30px;
  transition: color 0.5s ease; /* 色の変化を滑らかにする */
}
.colorchange.is-scrolled {
	color: #000;} /* apres:noir  */
.colorchange2{
  color: #fff; /* defo: blanc */
  font-size: 30px;
  transition: color 0.5s ease; /* 色の変化を滑らかにする */
}
.colorchange2.is-scrolled {
	color: #000;} /* apres:noir  */
div.hamburger-menu {
	display: none;					
}
@media screen and (max-width: 768px) {
	div.hamburger-menu {
		display: block;}
}
div.hamburger-menu .menu-btn {		
    position: fixed;
    top: 10px;						
    right: 10px;					
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(0,0,0,0.3);
	cursor: pointer;
}
div.hamburger-menu .menu-btn span,		
div.hamburger-menu .menu-btn span:before,
div.hamburger-menu .menu-btn span:after {
    content: "";
    display: block;
    height: 3px;
	width: 35px;
    border-radius: 3px;
    background-color: #fff;			
    position: absolute;
}
div.hamburger-menu .menu-btn span:before {
    bottom: 10px;					
}
div.hamburger-menu .menu-btn span:after {
    top: 10px;						
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
div.hamburger-menu #menu-btn-check {
    display: none;
}
div.hamburger-menu #menu-btn-check:checked ~ .menu-content {
    left: calc(100% - 220px);		
}
div.hamburger-menu .menu-content {	
	width: 100%;
	height: 100vh;					
    position: fixed;
    top: 0;
    left: 100%;
	overflow: auto;
    z-index: 80;
    padding: 0 10px;				
    background-color: rgba(0,0,0,0.7);
    transition: all 0.5s;			
}
div.hamburger-menu .menu-content ul {
	display: block;
	width: 200px;
	padding-top: 50px;
}
div.hamburger-menu .menu-content ul li {
    border-top: solid 1px #fff;		
    list-style: none;
	color:aliceblue;
}
div.hamburger-menu .menu-content ul li:last-child {
    border-bottom: none 1px #fff; 	
}
div.hamburger-menu .menu-content ul li a {
	display: block;
    font-size: 16px;
    text-decoration: none;
    color: #fff;					
	font-weight: bold;
    padding: 10px 0px;
    text-align: center;				
}
div.hamburger-menu .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
}
div.hamburger-menu .menu-content ul li a:hover {
	opacity: 0.6;
}
.menu-content ul li.index-child ul li:hover > ul,
.menu-content ul li.index-child:active > ul,
/*ページトップ*/
#page-top {							
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{					
	from {transform: translateY(100px);}
	to {transform: translateY(0);}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{				
	from {transform: translateY(0);}
	to {transform: translateY(100px);}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {						
	display: block;
	width: 60px;
	height: 60px;
	padding-top: 20px;
	border-radius: 8px;
	background: #255367;			
	opacity: 0.8;
	font-size: 2.2rem;
	line-height: 0.8rem;
	color: #fff;					
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a span {
	font-size: 0.6rem;
}
#page-top a:hover{
	opacity: 0.6;
}
.wrap_original {
overflow: hidden;
}
.btn{
	text-align: center;
	display: block;
	margin-top: 100px;
}
.btn :hover{
	background-color:#006699;
}
.buttonA{
	position: relative;
	border-radius: 15px;
	cursor: pointer;
	color: #666666;
	font-size: 20px;
	padding: 10px 65px;
	background-color: white;
	box-shadow: 0 1px 7px -3px #534741;
	z-index: 10;
	letter-spacing: 0.3rem;
	font-family: 'Marcellus';
	left: 20%;
	top: 550px;
	}
@media screen and (max-width: 599px){
	.buttonA{
		top: 400px;
		}
}
.buttonB{
	position: relative;
	border-radius: 18px;
	cursor: pointer;
	color: whitesmoke;
	font-size: 18px;
	letter-spacing:2px;
	padding: 10px 50px;
	background-color: #ad5d74;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.4);
	z-index: 10;
}
@media screen and (max-width: 599px){
	.buttonB{
	font-size: 16px;
	letter-spacing:1.7px;
	padding: 10px 30px;}
}
a{
	text-decoration: none;
}
@media screen and (max-width: 500px){
	p{
		font-size: 3.2vw !important;
		text-align: center;}
}
#slide img{
	opacity: 0.85;
	margin-top: -20px;
	position:fixed;
}
@media screen and (max-width: 960px){
	#slide img{
		margin-top: 0px;
		width: 150%;}
}
@media screen and (max-width: 599px){
	#slide img{
		display: none;}
}
#slideB img{
	width:80%;
	opacity: 0.7;
	margin:0 auto;	
}
@media screen and (max-width: 768px){
	.br-sp {display: none; }
}
@media screen and (min-width: 768px){
	.br-pc {display: none; }
}
@media screen and (min-width: 600px){
.firstview2 #slide2 img{
		display: none;}
}
@media screen and (max-width: 599px){
	.firstview2 #slide2 img{
		opacity: 0.7;}
}	
.firstview h1{
	font-size: 100px;
	color: #666666;
	position: absolute;
	z-index: 2;
	top: 130px;
	line-height: 6.5rem;
	letter-spacing: 0.3rem;
	right: 15%;
	text-align: center;
}
@media screen and (max-width: 960px){
	.firstview h1{
		font-size: 9vw;
		line-height: 6rem;
		top: 25%;}
}
@media screen and (max-width: 599px){
	.firstview h1{
		right: 6%;
		font-size: 12.5vw;
		z-index: 6;
		top: 35%;
		line-height: 3.5rem;
		text-align: end;
		letter-spacing: 6px;
		color: white;
		}
}	
@media screen and (min-width: 600px){
	.firstview2 img {
		display: none !important;}
}
@media screen and (max-width: 599px){
	.firstview2 img {
		opacity: 0.7;
		margin-top: -135px;
		width: 120%;}
}
@media screen and (max-width: 960px){
	.firstview .btn {
		margin-left: -20%;
		position: relative;
		top: 70px;}
}
@media screen and (max-width: 599px){
	.firstview .btn {
		margin-left: -25%;}
}
.carre {
	background-color: rgba(0,0,0,0.30);
	width:100%;
	position:absolute;
	z-index: 5;
	margin-top: 255px;
}
@media screen and (max-width: 599px){
	.carre{
		margin-top: -100px;
		padding-top: 700px;}
}
.home h3{
	color: #5c5c5c;
	font-size: 3rem;
	line-height: 1;
	margin-left: 200px;
	padding-top: 200px;
	letter-spacing: 0.1rem;
}
@media screen and (max-width: 599px){
	.home h3{
		margin-left: 0px;
		padding-top: 100px;}
}
.concept_1 h3{
	font-family: "Adobe Handwriting Ernie";
	margin: 600px 50% 0 0;
	transform: rotate(-20deg);
	color:#666666;
}
@media screen and (max-width: 599px){
	.concept_1 h3{
		margin: -50px 39% 50px 0;}
}
.concept_2 {
	width: 50%;
	margin-left: 30%;
	line-height: 3;
	font-size:1.09rem;
	position:relative;
	color:#666666;
	margin-bottom:100px;
}
@media screen and (max-width: 599px){
	.concept_2 p{
		width: 80%;
		margin:-30px 0 0px 10%;
		text-align: left;}
	}
.white-area {
	position:relative;
	z-index: 1;
	background-color: white;
	margin-top: 660px;
}
@media screen and (max-width: 599px){
	.white-area{
		margin-top: 670px;}
}
.Works h3 img{
	margin-top: -30px;
	width: 8%;
	margin-bottom: -20px;
	opacity: 0.7;
}
@media screen and (max-width: 599px){
	.Works h3 img{
		width: 15%;}
}
.Works h3{
	font-family: "Adobe Handwriting Ernie";
	font-size: 80px;
}
@media screen and (max-width: 599px){
	.Works h3{
		font-size: 13vw;
		margin-left: 8%;
		margin-top: -680px;}
}
.Works p{
	margin: 50px 0 -20px 14%;
}
@media screen and (max-width: 960px){
	.Works p{
		margin-left: 10%;
		text-align: left;}
}
@media screen and (max-width: 599px){
	.Works p{
		margin: 50px auto -10px;
		width:85%;}
}
.flex{
	margin: 80px auto 0;
	display: flex;
	justify-content: space-between;
	max-width: 960px;
	text-align: center;
}
@media screen and (max-width: 960px){
	.flex{
		width: 80%;}
}
@media screen and (max-width: 599px){
	.flex{
		display: inline;}
}
.flex h4{
	font-size: 1.6rem;
	position:relative;
	z-index: 2;
	color: white;
	text-shadow: 2px 1px 1px darkgray;
	margin-left:15%;
	margin-top: -160px;
}
@media screen and (max-width: 960px){
	.flex h4{
	margin-top: -55%;}
}
@media screen and (max-width: 599px){
	.flex h4{
	font-size: 5vw;
	margin-left: -5%;
	margin-top: -150px;}
}
.flex p{
	text-align: left;
	line-height: 2;
	margin-top: 35px;
	margin-left: -120%;
	font-size: 0.85rem;
	position: relative;
	z-index: 2;
}
@media screen and (max-width: 960px){
	.flex p{
		width: 255%;
		margin: 110px 0 -35px -145%;
		font-size: 0.9rem!important;}
}
@media screen and (max-width: 599px){
	.flex p{
		width: 170%;
		margin: 330px 0 -135px -35%;
		font-size: 0.8rem!important;}
}
.flex img{
	margin: 20px auto -120px;
	width: 120%;
	opacity: 0.8;
	background-color: #EFF1FA;
}
@media screen and (max-width: 599px){
	 .flex img{
		width: 120%;
		margin: 70px auto 75px -10%;}
}
.Profile h3{
	margin: 100px auto -60px;
	text-align: center;
	font-family: "Adobe Handwriting Ernie";
	font-size: 80px;
}
@media screen and (max-width: 599px){
	.Profile h3{
		font-size: 13vw;
		margin-bottom: 0px;}
}
.Profile .flex img{
	background-color: white;
	margin-top: 60px;
}
@media screen and (max-width: 960px){
	.Profile .flex img{
		width: 300%;
		opacity: 0.5;
		margin: 50px 0 0 -50%;}
}
@media screen and (max-width: 599px){
	.Profile .flex img{
		width: 260%;
		opacity: 0.4;
		margin: 0 0 -680px -20%;
		}
}
@media screen and (max-width: 960px){
	.Profile .flex h4{
		width: 100%;
		margin: -70px 0 -100px 50%;}
}
@media screen and (max-width: 599px){
	.Profile .flex h4{
		margin: 0 0 -300px 50%;}
}
.zoom-1 img {
	height: auto;
	animation: animationZoom1 5s ease-in-out forwards;
	overflow: hidden;
	opacity: 0.9;
}
@media screen and (max-width: 960px){
	.zoom-1 img {
		margin-top: -60px;}
}
.Contact-title h3{
	position: relative;
	z-index: 2;
	margin: 200px auto 50px;
	font-family: "Marcellus";
	text-align: center;
}
@media screen and (max-width: 599px){
	.Contact-title h3{
		font-size: 12vw;
		margin-top: 250px;}
}
.Contact-title p{
	text-align: center;
	letter-spacing: 0.1rem;
	margin: 35px auto;
	position: relative;
	z-index: 2;
	line-height: 2.5;
	font-size: smaller;
}
@media screen and (max-width: 960px){
	.Contact .btn{
		margin: 0px auto 100px;}
}
@media screen and (max-width: 599px){
	.Contact .btn{
		margin: 0px auto 150px;}
}
.WORKS {
	background-color: #f0f8ff;
	padding-bottom: 150px;
}
@media screen and (max-width: 960px){
	.WORKS {
		margin-top: 1000px;}
}
@media screen and (max-width: 599px){
	.WORKS {
		margin-top: -625px;}
}
.WORKS h3{
	text-align: center;
	margin: 650px auto 50px;
	font-size: 4.5rem;
	line-height: 1.3;
	padding-top: 150px;
}
@media screen and (max-width: 599px){
	.WORKS h3{
		font-size: 2.7rem !important;}
}
.WORKS p{
	text-align: center;
	line-height: 2;
}
@media screen and (max-width: 599px){
	.WORKS p{
		width: 94%;
		margin: 0 auto;
		line-height: 2.2;}
}
.WORKS img{
	width:65%;
	display: block;
	margin: 20px auto -20px;
}
@media screen and (max-width: 960px){
	.WORKS img{
		width: 80%;}
}
@media screen and (max-width: 599px){
	.WORKS img{
		width: 100%;}
}
.WORKS h5{
	text-align: center;
	font-size: 2rem;
	line-height: 1.3;
}
.Works-website-detail img{
	width:40%;
	display: block;
	margin: 100px auto 20px;
}
@media screen and (max-width: 599px){
	.WORKS img{
		width: 100%;}
}
.WORKS2 .flex_{
	margin-bottom: 112px;
}
.WORKS2 .flex_ h2{
	font-size: 3rem;
	text-align: left;
	width: 170%;
	line-height: 3.5rem;
}
@media screen and (max-width: 599px){
	.WORKS2 .flex_ h2{
		font-size: 2.2rem;
		margin: 100px -15%;}
}
.WORKS2 .flex ul{
	text-align: left;
	margin-left: 90%;
	width: 67%;
	margin-top: 14px;
}
@media screen and (max-width: 599px){
	.WORKS2 .flex ul{
		margin: -60px 0 0 -12%;}
}
.WORKS2 .flex_ img{
	width: 55%;
	margin-left: 30%;
	margin-top: -30px;
	background-color: white;
}
@media screen and (max-width: 599px){
	.WORKS2 .flex_ img{
		margin: -135px 0 0 67%;}
}
.WORKS2 .line{
	max-width: 80%;
	height: 3px;
	border-bottom:  5px solid #357b97;
	margin: -120px auto 75px;
}
.WORKS2 .flex_ h5{
	font-size: 1.3rem;
	text-align: left;
}
@media screen and (max-width: 960px){
	.WORKS2 .flex_ h5{
		width: 110%;}
}
@media screen and (max-width: 599px){
	.WORKS2 .flex_ h5{
		margin: 100px 0 -95px;}
}
.WORKS2 p{
	margin:20px 0 0 -25%;
}
@media screen and (max-width: 960px){
	.WORKS2 p{
		margin-left: -65%;}
}
@media screen and (max-width: 599px){
	.WORKS2 p{
		margin-top: 150px;
		margin-left: -25%;}
}
.WORKS-others img{
	width: 45%;
	margin-bottom: 100px;
}
@media screen and (max-width: 599px){
	.WORKS-others img{
		width: 75%;}
}
.graphique{
	margin-top: -500px;
}
@media screen and (max-width: 599px){
	.graphique{
		margin-top: -700px;}
}
.flex_ {
	width: 26%;
	margin-bottom: 50px;
}
@media screen and (max-width: 599px){
	.flex_{
	
		width: 50%;
		margin: 0 auto;}
}
.Contact img{
	margin: -500px auto -8px;
	opacity: 0.5;
}
@media screen and (max-width: 599px){
	.Contact img{
		margin-bottom: 70px;
		width: 200%;}
}
footer{
	position: relative;
	background-color: #555555;
	opacity: 0.7;
}
footer h4{
	text-align: center;
	color: #F8F0F0;
	font-size: 2.8rem;
	padding-top: 200px;
	/* margin-top: 250px; */
}
@media screen and (max-width: 760px){
	footer h4{
	margin-bottom:50px;
	font-size: 2.5rem;
	margin-left: -6%;}
}
@media screen and (max-width: 599px){
	footer h4{
		padding-top: 150px;}
}
footer  ul{
	display: flex;
	justify-content: space-around;
	width: 50%;
	color: #F8F0F0;
	margin: 50px auto 150px;
	font-family: "Marcellus";
	letter-spacing: 0.1rem;
}
@media screen and (max-width: 760px){
	footer ul{
		display: inline;
		text-align: center;}
}
footer  ul li{
	list-style-type: none;
	height: min-content;
	font-size: 20px;
	}
@media screen and (max-width: 760px){
	footer  ul li{
		margin:10px;	}
}
footer  ul li a{
	color: #F8F0F0;
	text-decoration: none;
}
footer img{
	width: 5%;
	margin-bottom: -25px;
	margin-right: 12px;
}
@media screen and (max-width: 599px){
	footer img{
		width: 12%;
		margin-bottom: -6px;
		margin-left: 3%;}
}
footer p{
	color:#F8F0F0;
	text-align: center;
	margin-top: 130px;
	font-size: 0.8rem;
	padding-bottom: 50px;
}
@media screen and (max-width: 760px){
	footer p{
		margin-top: 100px;}
}