@charset "utf-8";

/*----------------------------------------------------------------------
共通
----------------------------------------------------------------------*/

.ttl{
	color: #4392F1;
	margin-bottom: 30px;
}

.ttl .en::before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #4392F1;
}

.section_content{
	padding: 120px 0;
}



/*----------------------------------------------------------------------
mv
----------------------------------------------------------------------*/

.mv{
	position: relative;
}

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: 100vh;
	height: 100svh;
}

.mv::before,
.mv::after{
	position: absolute;
	content: '';
	width: 15%;
	height: 100%;
	top: 0;
	mix-blend-mode: multiply;
	z-index: 1;
}

.mv::before{
	background: linear-gradient(90deg, rgba(95,170,235,0) 0%, rgba(75,168,248,0.5) 100%);
	right: 0;
}

.mv::after{
	background: linear-gradient(-90deg, rgba(95,170,235,0) 0%, rgba(75,168,248,0.5) 100%);
	left: 0;

}

.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.catch{
	position: absolute;
    top: 25%;
    left: 15%;
	z-index: 2;
	width: min(520px,60vw);
	filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.1));
}
.btn-slide {
    position: absolute;
    z-index: 100;
	bottom: 30px;
    right: 15px;
}
.btn-slide-box{
    display: flex;
    justify-content: space-between;
}
.btn-slide-box a{
    width:35px;
    height:35px;
    display:block;
    text-decoration:none;
    cursor: pointer;
    transition: 0.3s all;
	border-radius: 50px;
	margin: 0 5px;
	border: 1px solid #fff;
}
.btn-slide-box a:hover{
    opacity: .6;
}
.btn-slide-box a span{
    display:none;
}
.btn-slide-box a.prev,
.btn-slide-box a.next{
    background-position:center;
    background-repeat:no-repeat;
}
.btn-slide-box a.prev{
    background-image:url(../images/arrows_white.svg);
	transform: scaleX(-1);
}
.btn-slide-box a.next{
    background-image:url(../images/arrows_white.svg);
}



.top_about_box {
	padding: 80px 0 40px;
}

.top_about_box .sub_txt{
	font-weight: 500;
	line-height: 2;
}

/*----------------------------------------------------------------------
product
----------------------------------------------------------------------*/

.product{
	position: relative;
	z-index: 0;
}

.product .inner{
	position: relative;
}

.product::before{
    content: "PRODUCT";
    color: #fff;
    bottom: 5%;
    left: 10%;
	z-index: -3;
	writing-mode: vertical-rl;
}

.product_list{
	display: flex;
	flex-wrap: wrap;
	margin: 60px 0 0 -30px;
}

.product_list li{
	width: calc(100% / 4 - 30px);
	aspect-ratio: 1/1;
	margin: 0 0 30px 30px;
}

.product_list a{
	position: relative;
	height: 100%;
	background: #fff;
	color: #4392F1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;
	transition: .2s all;
	border-radius: 10px;
}

.product_list a:hover{
	box-shadow: rgba(0, 0, 0, 0.3) 3px 5px 10px;
	transform: translateY(-3px);
}

.btn::after {
 content: "";
 display: inline-block;
 height: 100%;
 width: 100%;
 border-radius: 10px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 transition: all .5s;
}

.btn::after {
 background: #fff;
}

.btn:hover::after {
 transform: scaleX(1.1) scaleY(1.1);
 opacity: 0;
}

.product_ttl{
	margin-top: 1em
}

.product_img li{
	position: absolute;
	z-index: -2;
}

.product_img-left{
	left: -8vw;
	top: -5%;
	width: min(350px,20vw);
}

.product_img-right{
	right: -8vw;
	top: -15%;
	width: min(350px,20vw);
}


/*----------------------------------------------------------------------
makers
----------------------------------------------------------------------*/

.makers{
  position: relative;
  padding: 120px 0;
}

.makers::before{
    content: "MAKERS";
	color: #EDF2F4;
	top: 7%;
	right: 0;
	z-index: -3;
}

.makers .ttl{
	margin-top: -40px;
	margin-bottom: 80px;
}

.makers_list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	margin-left: -20px;
	margin-bottom: 20px;
}

.makers_list li{
	width: calc(100% / 4 - 20px);
	margin-left: 20px;
	margin-bottom: 20px;
	line-height: 1;
	box-shadow: rgba(0,0,0,.15) 2px 2px 5px;
	background: #fff;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 140px;
	transition: .3s all;
	padding: 1rem;
}

.makers_list span{
	margin-top: 1em;
	display: block;
	color: #5D6A75;
	font-size: 1.4rem;
}

/*----------------------------------------------------------------------
news
----------------------------------------------------------------------*/

.news{
	padding: 120px 0;
	background: url("../images/news_bg.png") no-repeat center / cover;
}

.news .inner{
	padding: 60px 80px;
	background: rgba(255,255,255,.9);
}

.news iframe{
	width: 100%;
}   

.news .more_btn{
	margin-top: 20px;
}


/*----------------------------------------------------------------------
about
----------------------------------------------------------------------*/

.about{
	position: relative;
	padding: 120px 0;
}

.about::before{
    content: "ABOUT";
	color: #EDF2F4;
	bottom: 5%;
	right: 10%;
	z-index: -3;
	writing-mode: vertical-rl;
}

.about_list{
	display: flex;
	flex-wrap: wrap;
	margin-left: -30px;
}

.about_list li{
	height: 300px;
	width: calc(100% / 2 - 30px);
	margin: 0 0 30px 30px;
}

.about_list .en{
	font-weight: 500;
	line-height: 1.4;
	position: relative;
	font-size: clamp(3rem, 2.631rem + 1.64vw, 4.6rem);
	margin-bottom: 10px;
}

.about_list .en::before{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #fff;
	height: 1px;
	width: 85px;
}

.about_list a{
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 1;
	height: 100%;
	color: #fff;
	font-size: clamp(1.4rem, 1.354rem + 0.21vw, 1.6rem);
	font-weight: 700;
	letter-spacing: .05em;
	border-radius: 10px;
}

.about_list a::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(0,63,145,.5);
	mix-blend-mode: multiply;
	z-index: -1;
}

.about_list a::after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
transition: all .3s ease-out;
z-index: -2;
}

.about_list a:hover::after {
opacity: .6;
transform: scale(1.1);
}

.about_list ._01 a::after{
	background: url("../images/top_about_ban01.png") no-repeat center / cover;
}

.about_list ._02 a::after{
	background: url("../images/top_about_ban02.png") no-repeat center / cover;
}

.about_list ._03 a::after{
	background: url("../images/top_about_ban03.png") no-repeat center / cover;
}

.about_list ._04 a::after{
	background: url("../images/top_about_ban04.png") no-repeat center / cover;
}

.sdgs_ban a{
	display: inline-block;
	margin-top: 30px;
	transition: .3s all;
	box-shadow: 0 0 6px rgba(0,0,0,.16);
	line-height: 0;
}

.sdgs_ban a:hover{
	opacity: .6;
	box-shadow: none;
}





 @media screen and (max-width: 1680px) {
.product::before {
    bottom: 10px;
	left: 40px;
	}

.about::before {
    bottom: 0;
	right: 6%;
}
}


@media screen and (min-width: 1061px) {

}

 @media screen and (max-width: 1060px) {
	 
.mv {
    height: 100vh;
	height: 100svh;
}

.catch{
    width: 85%;
    left: 15px;
	bottom: 90px;
	letter-spacing: .5rem;
	padding-left: 1rem;
}

.section_content{
    padding: 80px 0;
}
 
.top_about_box {
    padding: 50px 0 0;
}

.top_about_box .sub_txt {
  width: min(520px,100%);
  margin: 0 auto;
  text-align: left;
}	
	
.product_list {
	justify-content: center;
}

.product_list li{
	width: calc(100% / 3 - 30px);
}

.product_img-left {
  left: -3%;
  top: 3%;
  width: 18vw;
}

.product_img-right {
  right: -2%;
  top: -3%;
  width: 18vw;
}

.makers::before{
  top: 9%;
}

.makers_list li {
	width: calc(100% / 3);
}
.makers .ttl{
	margin-top: -30px;
	margin-bottom: 30px; 
}
.news {
	padding: 60px 0;
}
	 
.news .ttl {
	margin-bottom: 0;
}
.news .inner {
	padding: 40px 20px;
}
	 
.about_list .en::before {
  bottom: -2px;
}
	 
}


@media screen and (max-width: 834px) {

.news_box{
    padding: 20px 0;
}

.product_img-left {
    top: 2%;
    width: 20vw;
}
.product_img-right {
    top: -4%;
    width: 20vw;
}
	
.product_list {
	margin-top: 30px;
	margin-left: -20px;
}

.product_list li{
	width: calc(100% / 2 - 20px);
	margin: 0 0 20px 20px;
}	
	
.product::before {
    bottom: 40px;
    left: 15px;
}
	
.makers::before {
    top: auto;
    bottom: 4%;
    left: -2%;
    right: auto;
}
.makers_list ul {
	align-items: center;
	margin-left: -20px;
}
.makers_list li {
	width: calc(100% / 2 - 20px);
	margin-left: 20px;
}
.makers_list span {
	margin-top: .5em;
    line-height: 1.4;
}
.makers .more_btn {
    margin-right: 0;
}
.about {
    padding: 60px 0 80px;
}
.about_list li {
    height: 200px;
	width: calc(100% / 1 - 30px);
}	
.about::before {
    right: 12%;
}
.sdgs_ban a {
	margin-top: 0;
}
}

 @media screen and (max-width: 480px) {

.makers_list span {
    font-size: 3vw;
}
	 
.product_img-left {
	top: 5%;
}
	 
.product_img-right {
	top: -6%;
}
	 
.intro_logo {
    width: 110px;
}

.about .sub_txt {
	font-size: 4.2vw;
}
.works_txtbox p {
	font-size: 4vw;
} 


}