@charset "UTF-8";
/* main visual
========================= */
#mainvisual{
	position: relative;
	min-height: calc(725 / 390 * 100vw);
}
#mainvisual .catch-anim{
	opacity: 0;
}
#mainvisual .back{
	position: absolute;
	width: calc(345 / 390 * 100vw);
	top: calc(88 / 390 * 100vw);
	left: calc(22.5 / 390 * 100vw);
}
#mainvisual .back.active{
	animation: FadeAnime 2s ease forwards;
}
@keyframes FadeAnime{
  from {
    opacity: 0;
		transform: translateY(0);
  }
  to {
    opacity: 1;
		transform: translateY(0);
  }
}
#mainvisual .illust{
	position: absolute;
	width: 100%;
	top: calc(88 / 390 * 100vw);
	left: 0;
}
#mainvisual .catch{
	position: absolute;
	width: calc(127 / 390 * 100vw);
	top: calc(117 / 390 * 100vw);
	left: calc(122 / 390 * 100vw);
}
#mainvisual .illust.active{
	animation: UpAnime 1s ease 1s forwards;
}
#mainvisual .catch.active{
	animation: UpAnime 1s ease 1.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
		transform: translateY(20px);
  }
  to {
    opacity: 1;
		transform: translateY(0);
  }
}
/*PC*/
@media (min-width: 999px){
	#mainvisual{
		width: 90%;
		position: relative;
		min-height: calc(735 / 1400 * 100vw);
		margin-left: auto;
		margin-right: auto;
	}
	#mainvisual .back{
		position: absolute;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	#mainvisual .illust{
		position: absolute;
		width: 89%;
		max-width: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	#mainvisual .catch{
		position: absolute;
		width: calc(141 / 1400 * 100vw);
		top: 5rem;
		right: 0;
		left: 0;
		margin: auto;
	}
}

/* common
========================= */
.tit-area h2{
	font-size: 4rem;
}
.tit-area h2 p{
	font-size: 1.4rem;
}

/* about / strength
========================= */
section#about h3,
section#strength h3{
	font-size: 2.4rem;
	line-height: 1.4;
}
section#about .btn,
section#strength .btn{
	width: 212px;
}
/*PC*/
@media (min-width: 999px){
	section#about h3,
	section#strength h3{
		font-size: 2.6rem;
	}
	section#about .dispflex,
	section#strength .dispflex{
		gap: 60px;
		-webkit-align-items: center;
		        align-items: center;
	}
	section#about .dispflex .image,
	section#strength .dispflex .image{
		width: 503px;
	}
	section#about .dispflex .text-area,
	section#strength .dispflex .text-area{
		width: calc( 100% - 563px );
	}
	section#strength .dispflex{
		-webkit-flex-direction: row-reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
	section#about .btn,
	section#strength .btn{
		width: 222px;
	}
}

/* service
========================= */
section#service ul{
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	gap: 30px;
	-webkit-justify-content: center;
	        justify-content: center;
}
section#service ul li{
	width: calc((100% - 30px ) / 2 );
}
section#service ul li img{
	display: block;
}
/*PC*/
@media (min-width: 999px){
	section#service ul{
		gap: 40px 30px;
	}
	section#service ul li{
		width: calc((100% - 90px ) / 4 );
	}
}

/* works
========================= */
section#works{
	background: #FBFAF7;
	padding-top: 4rem;
}
section#works ul{
	max-width: calc(300 / 390 * 100vw);
	margin-left: auto;
	margin-right: auto;
}
section#works ul li{
	width: 100%;
	margin-bottom: 3rem;
}
section#works ul li .image{
	-webkit-border-radius: 10px;
	        border-radius: 10px;
		overflow:hidden;
}
section#works ul li .text{
	width: 100%;
	display: flex;
	-webkit-justify-content: space-between;
	        justify-content: space-between;
	vertical-align: middle;
}
section#works ul li .text .icon{
	width: 26px;
	height: 26px;
}
section#works ul li:last-child{
	margin-bottom: 0;
}
/*PC*/
@media (min-width: 999px){
	section#works{
		padding-top: 6rem;
	}
	section#works ul{
		max-width: 840px;
		margin-left: auto;
		margin-right: auto;
		gap: 40px 30px;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	section#works ul li{
		width: calc((100% - 60px ) / 3 );
		margin-bottom: 0;
	}
	section#works ul li:hover{
		cursor: pointer;
	}
	section#works ul li .image{
		width: 100%;
		aspect-ratio: 1 / 0.78;
		transition:1s all;
	}
	section#works ul li:hover .image img{
	  transform:scale(1.2,1.2);
	  transition:1s all;
	}
}

/* modal
========================= */
.modalArea{
  display: none;
  position: fixed;
  z-index: 9999; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modalBg{
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}
.modalWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  height: 90%;
  max-width: 970px;
  background: #fff;
  padding: 3rem;
  border: 5px solid #EA5514;
}
.modalContents{
	width: 100%;
	height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  text-align: left;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.modalContents::-webkit-scrollbar {
	display:none;
}
.closeModal{
  position: absolute;
  top: 1rem;
  right: 1rem;
  line-height: 3rem;
  cursor: pointer;
  font-size: 3rem;
}
/*PC*/
@media (min-width: 999px){
	.modalWrapper{
	  height: auto;
	  padding: 4rem;
	}
	.modalContents{
	  overflow-y: none;
	  overscroll-behavior-y: none;
	}
	.modalContents .dispflex{
		-webkit-align-items: center;
		        align-items: center;
	    gap: 30px;
	}
	.modalContents .before{
		margin-bottom: 0;
	}
	.modalContents
}

/* flow
========================= */
section#flow{
	padding-top: 4rem;
}
section#flow h2{
	font-size: 2rem;
}
section#flow ul{
	max-width: calc(272 / 390 * 100vw);
	margin-left: auto;
	margin-right: auto;

}

/*PC*/
@media (min-width: 999px){
	section#flow{
		padding-top: 6rem;
	}
	section#flow h2{
		font-size: 2.6rem;
	}
	section#flow ul{
		max-width: 933px;
		gap: 80px 60px;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	section#flow ul li{
		width: calc((100% - 120px ) / 3 );
		margin-bottom: 0;
	}
}

.b-anim{
	opacity : 0;
	visibility: hidden;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.b-anim.active{
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/*PC*/
@media (min-width: 999px){
	.b-anim.second {
	  -webkit-animation-delay: .2s;
	  animation-delay: .2s;
	}
	.b-anim.third {
	  -webkit-animation-delay: .4s;
	  animation-delay: .4s;
	}
	.b-anim.fourth {
	  -webkit-animation-delay: .6s;
	  animation-delay: .6s;
	}
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1);
    -ms-transform: scale3d(.1, .1, .1);
    transform: scale3d(.1, .1, .1);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -ms-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    -ms-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
  }

  80% {
    -webkit-transform: scale3d(.99, .99, .99);
    -ms-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}




@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.b-anim.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    -ms-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.b-anim.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}


/* funa2追加 */
.funa2-btn{
	margin-top: 8rem;
}
.funa2-btn a {
	display: block;
	max-width: 740px;
	margin: 0 auto;
}
.funa2-btn a :hover{
	opacity: .7;
}
@media (max-width: 1000px){
	.funa2-btn{
		margin-top: 5rem;
	}
}