@charset "UTF-8";

br {
    line-height: 0;
}

ul li {
    list-style: none;
}

a {
    display: inline-block;
    text-decoration: none;
}

img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/*module*/

body {
    background: url(../images/bg_top_pc.png) no-repeat top center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#top sup{
	font-size: .4em;
	vertical-align: super;
}

#top p.txt_note{
	font-size: .8em;
	line-height: 1.4;
	padding-left: 22px;
	text-indent: -22px;
}

#top p.txt_note a{
	display: inline-block;
	text-indent: 0;
}

#top .inner {
    width: 93%;
    max-width: 1320px;
    margin: 0 auto;
}

#top .mod_ttl_h2 {
    font-size: 3em;
    font-weight: 600;
    color: var(--main-color);
    text-transform: uppercase;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 40px;
}

#top .mod_ttl_h2.custom{
	display: inline-block;
}

#top .mod_ttl_h2 span {
    font-size: 20px;
    font-weight: 600;
    padding-left: 25px;
}

#top .mod_ttl_h2.custom span{
	display: inline-block;
	padding-left: 0;
}

#top .mod_ttl_h3 {
    font-size: 3em;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 30px;
}

#top .mod_txt {
    font-size: 1.125em;
    font-weight: 500;
    color: var(--main-color);
    line-height: 2;
}

#top .mod_txt02 {
	font-size: 1em;
	line-height: 1.3;
	margin: 0 0 20px 10px;
}

#top .mod_btn {
    min-width: 237px;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--main-color);
    position: relative;
    background: var(--sub01-color);
    text-align: center;
    padding: 15px 30px 15px 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#top .mod_btn::after {
    content: "";
    width: 8px;
    height: 12px;
    background: url(../images/icon_arrow.png) no-repeat top center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 20px;
    right: 16px;
}

#top .mod_btn:hover {
	color: var(--sub01-color);
	background: var(--main-color);
	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
	    -ms-transition: all 1s;
	     -o-transition: all 1s;
	        transition: all 1s;
}

#top .mod_btn:hover::after {
	background: url(../images/icon_arrow_wh.png) no-repeat top center;
}
/*end of module*/

/*margin-bottom module*/

#top .mar80 {
	margin-bottom: 80px;
}

#top .mar160 {
	margin-bottom: 160px;
}
/*margin-bottom module*/

/*mv sec*/
#top .sec_mv {
	position: relative;
}

#top .sec_mv .mv_content {
	position: relative;
	flex-direction: row-reverse;
}

#top .mv_content .txt .logo {
	min-width: 120px;
    width: 5.571vw;
    max-width: 120px;
    margin-bottom: 90px;
}

#top .mv_content .mv_slider {
	mask-image: url(../images/img_pc_mask.png);
	-webkit-mask-image: url(../images/img_pc_mask.png);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	position: relative;
    width: 62.071%;
    max-width: 869px;
    height: 55.857vw;
    max-height: 813.267px;
    float: right;
    overflow: hidden;
    
}

#top .mv_slider .slide_img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-position: center center;
	background-size: cover;
}

#top .mv_slider .slide_img img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-position: center center;
	background-size: cover;
	opacity: 0;
	--animation-duration: 25s;
	--animation-delay-base: calc(var(--animation-duration) / 5);
	-webkit-animation: main var(--animation-duration) linear 0s infinite;
		   -moz-animation: main var(--animation-duration) linear 0s infinite;
		     -o-animation: main var(--animation-duration) linear 0s infinite;
		        animation: main var(--animation-duration) linear 0s infinite;
}

@keyframes main {
	0% {
	    opacity: 0;
	    transform: scale(1);
	}

	5% {
	    opacity: 1;
	}

	20% {
	     opacity: 1;
	}

	25% {
	    opacity: 0;
	}

	100% {
	    opacity: 0;
	    transform: scale(1.35);
	}
}

@-webkit-keyframes main {
	0% {
	    opacity: 0;
	    transform: scale(1);
	}

	5% {
	    opacity: 1;
	}

	20% {
	     opacity: 1;
	}

	25% {
	    opacity: 0;
	}

	100% {
	    opacity: 0;
	    transform: scale(1.35);
	}
}

#top .mv_slider .slide_img.img02 img {
		-webkit-animation-delay: var(--animation-delay-base);
		   -moz-animation-delay: var(--animation-delay-base);
		     -o-animation-delay: var(--animation-delay-base);
		        animation-delay: var(--animation-delay-base);
}

#top .mv_slider .slide_img.img03 img {
	-webkit-animation-delay: calc(2 * var(--animation-delay-base));
		   -moz-animation-delay: calc(2 * var(--animation-delay-base));
		     -o-animation-delay: calc(2 * var(--animation-delay-base));
		        animation-delay: calc(2 * var(--animation-delay-base));
}

#top .mv_slider .slide_img.img04 img {
	-webkit-animation-delay: calc(3 * var(--animation-delay-base));
		   -moz-animation-delay: calc(3 * var(--animation-delay-base));
		     -o-animation-delay: calc(3 * var(--animation-delay-base));
		        animation-delay: calc(3 * var(--animation-delay-base));
}

#top .mv_slider .slide_img.img05 img{
	-webkit-animation-delay: calc(4 * var(--animation-delay-base));
		   -moz-animation-delay: calc(4 * var(--animation-delay-base));
		     -o-animation-delay: calc(4 * var(--animation-delay-base));
		        animation-delay: calc(4 * var(--animation-delay-base));
}

#top .mv_content .txt {
    width: 100%;
    padding: 4% 0 0 11%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

#top .txt .txt_mv {
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 3px;
	line-height: 1.2;
	color: var(--main-color);
	margin-bottom: 15px;
}

#top .scroll {
	width: 7.071vw;
	max-width: 113px;
	height: 32.143vw;
	max-height: 590px;
	background: url(../images/bg_scroll_pc.png) no-repeat top left;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	position: absolute;
	left: 0;
	bottom: 0;
}

#top .scroll p span{
	font-size: 1em;
	color: #F2F2F2;
	letter-spacing: 4px;
	position: absolute;
	bottom: 150px;
	left: 48%;
	-webkit-transform: translateX(-50%) rotate(90deg);
	   -moz-transform: translateX(-50%) rotate(90deg);
	    -ms-transform: translateX(-50%) rotate(90deg);
	     -o-transform: translateX(-50%) rotate(90deg);
	        transform: translateX(-50%) rotate(90deg);
	-webkit-animation: text 1s ease-in-out infinite alternate;
	   -moz-animation: text 1s ease-in-out infinite alternate;
	     -o-animation: text 1s ease-in-out infinite alternate;
	        animation: text 1s ease-in-out infinite alternate;
}

@keyframes text {
	0% {
        bottom: 150px;
	}

	100% {
	    bottom: 155px;
	}
}

#top .scroll p::before {
	content: "";
	width: 14px;
	height: 152px;
	background: url(../images/img_scroll.png) no-repeat center left;
    -webkit-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	position: absolute;
	left: 32px;
	bottom: 45px;
	-webkit-animation: arrow 1s ease-in-out infinite alternate;
	   -moz-animation: arrow 1s ease-in-out infinite alternate;
	     -o-animation: arrow 1s ease-in-out infinite alternate;
	        animation: arrow 1s ease-in-out infinite alternate;
}

@keyframes arrow {
	0% {
       bottom: 45px;
	}

	100% {
	    bottom: 50px;
	}
}
/*end of mv sec*/

/*about sec*/

#top .about ul .ablist{
	margin-bottom: 110px;
}

#top .about ul .ablist:nth-child(even) {
	-webkit-flex-direction: row-reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	margin-bottom: 30px;
}

#top .ablist .desc {
	width: 33%;
	margin: 50px 4% 0 0;
} 

#top .ablist:nth-child(even) .desc {
	margin: 50px 0 0 4%;
}

#top .ablist .picture {
	width: 67%;
} 


#top .ablist .pic {
	position: relative;
} 

#top .pic .image {
	width: 100%;
	height: 453px;
	-webkit-border-radius: 24px;
	        border-radius: 24px;
	overflow: hidden;
}

#top .pic .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top .pic .mod_btn {
	position: absolute;
	bottom: 28px;
	left: -70px;
}

#top .ablist:nth-child(even) .pic .mod_btn {
	left: auto;
	right: -48px;
}
/*end of about sec*/

/*works sec*/
#top .works .inner{
	position: relative;
}

#top .mod_btn.list {
	position: absolute;
	top: 40px;
	right: 0;
}

#top .mod_txt.works {
	margin-bottom: 40px;
}

#top .works_list li {
	margin-bottom: 45px;
}

#top .works_list li:last-child {
	margin-bottom: 0;
}

#top .works_item {
	position: relative;
}

#top .works_item .cover {
	width: 100%;
	height: 314px;
	-webkit-border-radius: 24px;
	        border-radius: 24px;
	    overflow: hidden;
}

#top .cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#top .works_item .descr {
	width: 465px;
	min-height: 116px;
	background: var(--sub01-color);
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 26px 35px;
	border-bottom-left-radius: 22px;
}

#top .descr .mod_txt {
	font-size: 1.25em;
	line-height: 1.6;
}

#top .works_item .btn {
	position: absolute;
	bottom: 25px;
	right: 25px;
}
/*end of works sec*/

/*instagram sec*/

#top .sec_insta {
	padding: 120px 0 110px;
}

#top .sec_insta .mod_txt,
#top .sec_insta .mod_ttl_h2 {
	margin-bottom: 20px;
}

#top .sec_insta .left {
	width: 40%;
}

#top .sec_insta .right_slider {
	width: 60%;
}

#top .mySwiper .swiper-slide {
	border-radius: 24px;
	overflow: hidden;
	width: 31%;
	max-width: 244px;
	height: 238px;
	margin-right: 3.8%;
}

#top .mySwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*end of instagram sec*/
@media only screen and (min-width: 1400px) {
	#top .mv_content .txt .logo {
		width: 120px;
	}
	
	#top .mv_content .mv_slider{
		min-height: 813.267px;
		max-width: 100%;
	}
}

/*TB*/
@media only screen and (min-width: 768px) and (max-width: 1280px) {
	/*module*/

	#top .inner {
	    width: 93%;
	    max-width: 1320px;
	    margin: 0 auto;
	}

	#top .mod_ttl_h2 {
	    font-size: 3.750vw;
	    margin-bottom: 3.125vw;
	}

	#top .mod_ttl_h2 span {
	    font-size: 1.563vw;
	    padding-left: 1.953vw;
	}

	#top .mod_ttl_h3 {
	    font-size: 3.750vw;
	    margin-bottom: 2.344vw;
	}

	#top .mod_txt {
	    font-size: 1.406vw;
	}

	#top .mod_txt02 {
		font-size: 1.250vw;
		margin: 0 0 1.563vw 0.781vw;
	}

	#top .mod_btn {
	    min-width: 18.516vw;
	    font-size: 1.563vw;
	    padding: 1.172vw 2.344vw 1.172vw 1.172vw;
	    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	}

	#top .mod_btn::after {
	    width: 0.625vw;
	    height: 0.938vw;
	    top: 1.484vw;
	    right: 1.250vw;
	}
	/*end of module*/

	/*margin-bottom module*/

	#top .mar80 {
		margin-bottom: 6.250vw;
	}

	#top .mar160 {
		margin-bottom: 12.500vw;
	}
	/*margin-bottom module*/

	/*mv sec*/

	#top .mv_content .txt {
	    width: 100%;
	    padding: 4% 0 0 11%;
	}

	#top .txt .txt_mv {
		font-size: 2.8vw;
		margin-bottom: 1.172vw;
	}

	#top .scroll p span{
		font-size: 1.250vw;
	}

	/*end of mv sec*/
	
	/*about sec*/

	#top .about ul .ablist{
		margin-bottom: 8.594vw;
	}

	#top .about ul .ablist:nth-child(even){
		margin-bottom: 2.344vw
	}

	#top .ablist:nth-child(even) .desc {
		margin: 50px 0 0 4%;
	}

	#top .pic .image {
		width: 100%;
		height: 35.391vw;
		-webkit-border-radius: 1.875vw;
		        border-radius: 1.875vw;
	}

	#top .pic .mod_btn {
		bottom: 2.344vw;
		left: -3.5vw;
	}

	#top .ablist:nth-child(even) .pic .mod_btn {
		right: -2.5vw;
	}
	/*end of about sec*/

	/*works sec*/

	#top .mod_btn.list {
		top: 3.125vw;
	}

	#top .mod_txt.works {
		margin-bottom: 3.125vw;
	}

	#top .works_list li {
		margin-bottom: 3.516vw;
	}

	#top .works_item .cover {
		width: 100%;
		height: 24.531vw;
		-webkit-border-radius: 1.875vw;
		        border-radius: 1.875vw;
	}

	#top .works_item .descr {
		width: 36.328vw;
		min-height: auto;
		padding: 2.031vw 2.734vw;
		border-bottom-left-radius: 1.719vw;
	}

	#top .descr .mod_txt {
		font-size: 1.563vw;
	}

	#top .works_item .btn {
		bottom: 1.953vw;
		right: 1.953vw;
	}
	/*end of works sec*/

	/*instagram sec*/

	#top .sec_insta {
		padding: 9.375vw 0 8.594vw;
	}

	#top .sec_insta .mod_txt,
	#top .sec_insta .mod_ttl_h2 {
		margin-bottom: 1.563vw;
	}

	#top .mySwiper .swiper-slide {
		border-radius: 1.875vw;
		height: 18.594vw;
	}

	/*end of instagram sec*/
}


@media only screen and (min-width: 768px) and (max-width: 1180px) {

	#top .mv_content .txt {
	    width: 100%;
	    padding: 7% 0 0 11%;
	}

	#top .mv_content .txt .logo {
		min-width: 10vw;
	    width: 10vw;
	    max-width: 120px;
	    margin-bottom: 2.031vw;
	}

	#top .mod_txt02 {
	    font-size: 2.25vw;
	    margin: 0 0 1.563vw 0.781vw;
	}

	#top .scroll p::before {
		left: 2.5vw;
	}
}

/*SP*/
@media only screen and (max-width: 767px) {
	#top .inner {
	    width: 87%;
	    max-width: 87%;
	}

	#top .mod_ttl_h2 {
	    font-size: 9.231vw;
	    margin-bottom: 11.538vw;
	    display: block;
	}

	#top .mod_ttl_h2 span {
	    font-size: 5.128vw;
	    padding-left: 0;
	    padding-top: 3.846vw;
	    display: block;
	}

	#top .mod_ttl_h3 {
	    font-size: 10.256vw;
	    margin-bottom: 6vw;
	}

	#top .mod_txt {
	    font-size: 3.98vw;
	    line-height: 2.4;
	}

	#top .mod_txt02 {
		font-size: 4.103vw;
		line-height: 1.3;
		margin-left: 20.385vw;
	}

	#top .mod_btn {
	    min-width: 46.923vw;
	    font-size: 3.846vw;
	    padding: 3.846vw 8vw 3.846vw 3.846vw;
	}

	#top .mod_btn::after {
	    width: 2.051vw;
	    height: 3.077vw;
	    top: 4.615vw;
	    right: 4.103vw;
	}
	/*end of module*/

	/*margin-bottom module*/

	#top .mar80 {
		margin-bottom: 20.513vw;
	}

	#top .mar160 {
		margin-bottom: 28.026vw;
	}
	/*margin-bottom module*/

	body {
	    background: url(../images/bg_top_sp.png) no-repeat top center;
	    -webkit-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	}

	/*mv sec*/
	
	#top .sec_mv .mv_content {
		display: block;
	}

	#top .mv_content .txt .logo {
		min-width: auto;
	    width: 21.026vw;
	    max-width: 87px;
	    margin-bottom: 50.692vw;
	}

	#top .mv_content .mv_slider {
		mask-image: url(../images/img_sp_mask.png);
		-webkit-mask-image: url(../images/img_sp_mask.png);
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		mask-size: 100% 100%;
		-webkit-mask-size: 100% 100%;
	    width: 85%;
	    height: 152.564vw;
	    position: absolute;
	    top: 0;
	    right: 0;
	}

	#top .mv_content .txt {
	    width: 100%;
	    position: relative;
		padding: 65vw 0 0 6.974vw;
    	bottom: 0;
	}

	#top .txt .txt_mv {
		font-size: 6.154vw;
		line-height: 1.4;
		margin-bottom: 3.846vw;
    	padding-left: 20.385vw;
	}

	#top .scroll {
		width: 17.179vw;
		max-width: 67px;
		height: 69.231vw;
		max-height: 270px;
		background: url(../images/bg_scroll_sp.png) no-repeat top left;
	    -webkit-background-size: contain;
	    -o-background-size: contain;
	    background-size: contain;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	#top .scroll p span{
		font-size: 3.590vw;
		bottom: auto;
		left: 58%;
		top: 53%;
		-webkit-transform: translate(-50%,-50%) rotate(90deg);
		   -moz-transform: translate(-50%,-50%) rotate(90deg);
		    -ms-transform: translate(-50%,-50%) rotate(90deg);
		     -o-transform: translate(-50%,-50%) rotate(90deg);
		        transform: translate(-50%,-50%) rotate(90deg);
	}

	#top .scroll p::before {
		height: 33.333vw;
		left: 5.128vw;
	}
	/*end of mv sec*/
	
	/*about sec*/

	#top .about ul .ablist{
		margin-bottom: 16.667vw;
		display: block;
	}

	#top .ablist .desc {
		width: 100%;
		margin: 0;
	} 

	#top .ablist:nth-child(even) .desc {
		margin: 0;
	}

	#top .desc .mod_txt02 {
		margin: 0 0 10.256vw 0;
	}

	#top .desc .mod_txt {
		margin-bottom: 12.821vw;
	}

	#top .ablist .picture {
		width: 100%;
	} 

	#top .pic .image {
		width: 100%;
		height: 61.538vw;
		-webkit-border-radius: 6.154vw;
		        border-radius: 6.154vw;
	}

	#top .pic .mod_btn,
	#top .ablist:nth-child(even) .pic .mod_btn {
		bottom: auto;
		top: -6.410vw;
		left: auto;
		right: 0;
	}
	/*end of about sec*/
	
	/*works sec*/

	#top .mod_btn.list {
		top: 37.179vw;
		right: auto;
		left: 0;
	}

	#top .mod_txt.works {
		margin-bottom: 25.641vw;
	}

	#top .works .mod_ttl_h2 {
		margin-bottom: 6.538vw;
	}

	#top .works.mar160 {
		margin-bottom: 29.026vw;
	}

	#top .works_list li {
		margin-bottom: 13.051vw;
	}

	#top .works_item .cover {
		width: 100%;
		height: 58.462vw;
		-webkit-border-radius: 6.154vw;
		        border-radius: 6.154vw;
	}

	#top .works_item .descr {
		width: 100%;
		min-height: 22.051vw;
		position: relative;
		bottom: auto;
		top: -6vw;
		left: 0;
		padding: 3.846vw 5.128vw 7.692vw;
		border-bottom-left-radius: 5.641vw;
	}

	#top .descr .mod_txt {
		font-size: 3.590vw;
		line-height: 1.6;
	}

	#top .works_item .btn {
		bottom: 0;
		right: 0;
	}

	#top .works_item .mod_btn {
		background: var(--main-color);
		color: var(--sub01-color);
	}

	#top .works_item .mod_btn::after {
		background: url(../images/icon_arrow_wh.png) no-repeat top center;
	}
	/*end of works sec*/
	
	/*instagram sec*/

	#top .sec_insta {
		padding: 25.641vw 0;
	}

	#top .sec_insta .inner {
		display: block;
	}

	#top .sec_insta .mod_txt,
	#top .sec_insta .mod_ttl_h2 {
		margin-bottom: 7.692vw;
	}

	#top .sec_insta .left {
		width: 100%;
		margin-bottom: 7.692vw;
	}

	#top .sec_insta .right_slider {
		width: 100%;
	}

	#top .mySwiper .swiper-slide {
		border-radius: 6.154vw;
		width: 62.564vw;
		max-width: 62.564vw;
		height: auto;
		margin-right: 7.692vw;
	}

	/*end of instagram sec*/
}

@media only screen and (min-width: 500px) and (max-width: 766px){
	#top .scroll p span {
		font-size: 2.59vw;
	}

	#top .scroll p::before {
	    height: 23.333vw;
	    left: 2.128vw;
	}
}