@charset "utf-8";

/*-----------------------
    page_top.css
------------------------*/

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

.top_mv .frame {
    display: flex;
}
.top_mv .frame .title {
    width: 18.75%;
    display: flex;
    justify-content: center;
}
.top_mv .frame .title .inner {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}
.top_mv .frame .title .inner > div {
    margin: 10px;
}
.top_mv .frame .title .inner > div:nth-of-type(1) {
    order: 2;
}
.top_mv .frame .title .text {
    display: inline;
    font-size: 40px;
}
.top_mv .frame .title .p {
    display: none;
}
.top_mv .frame .conts {
    width: 81.25%;
    order: 2;
}
.top_mv .frame .conts img {
    border-radius: 10px 0 0 10px;
    aspect-ratio: 195/91;
}
.top_mv .frame .conts .p {
    margin: 50px 20px 30px;
}

@media screen and (min-width: 768px){
    
    .top_mv .frame .title .inner > div {
        writing-mode: vertical-lr;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1700px){
    
    .top_mv .frame .title .inner {
        margin-top: 20px;
    }
    .top_mv .frame .title .text {
        font-size: 2.5vw;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
    .top_mv .frame .title {
        width: 14%;
    }
    .top_mv .frame .title .inner {
        margin-top: 0;
    }
    .top_mv .frame .title .inner > div {
        margin: .2vw;
    }
    .top_mv .frame .title .text {
        font-size: 2.875vw;
    }
    .top_mv .frame .conts {
        width: 86%;
    }
    .top_mv .frame .conts .p {
        margin: 4vw 0 0;
    }

}
@media screen and (max-width: 767px){
    
    .top_mv .frame {
        display: block;
    }
    .top_mv .frame .title {
        width: 100%;
        display: block;
    }
    .top_mv .frame .title .inner {
        display: block;
        margin-top: 20px;
    }
    .top_mv .frame .title .inner > div {
        margin: 0 6vw 10px;
    }
    .top_mv .frame .title .text {
        font-size: min(5.5vw,24px);
        font-weight: bold;
    }
    .top_mv .frame .title .p {
        display: block;
        margin: 20px 6vw 0;
        line-height: 2;
    }
    .top_mv .frame .conts {
        width: 100%;
    }
    .top_mv .frame .conts img {
        border-radius: 0;
    }
    .top_mv .frame .conts .p {
        display: none;
    }
    
}

/*----- concept -----*/

.top_concept {
	padding: 80px 0 160px;
}
.top_concept .m_wave .frame {
	padding: 110px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top_concept .m_wave .frame .title {
	width: 30%;
}
.top_concept .m_wave .frame .conts {
	width: 66.66%;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_concept {
		padding: 6vw 0 10vw;
	}
	.top_concept .m_wave .frame {
		padding: 8vw 0;
	}
	.top_concept .m_wave .frame .title {
		width: 30%;
	}
	.top_concept .m_wave .frame .conts {
		width: 66.66%;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_concept {
		padding: 50px 0;
	}
	.top_concept .m_title_h3 {
		text-align: center;
	}
	.top_concept .m_title_h3 .text br {
		display: none;
	}
	.top_concept .m_wave .frame {
		padding: 40px 0;
		display: block;
	}
	.top_concept .m_wave .frame .title {
		width: 100%;
		margin-bottom: 45px;
	}
	.top_concept .m_wave .frame .conts {
		width: 100%;
	}
	
}

/*----- case -----*/

.top_case {
	padding: 90px 0 0;
}
.top_case .frame {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top_case .frame > .title {
	width: 22%;
}
.top_case .case_ul {
	width: 75%;
}
.top_case .case_ul .webgene-blog {
	display: flex;
	gap: 42px;
}
.top_case .case_ul .webgene-blog .li {
	width: calc(33.33% - 28px);
}
.top_case .case_ul .webgene-blog .li a:hover {
    opacity: .8;
}
.top_case .case_ul .webgene-blog .li .pict {
    display: block;
    width: 100%;
    height: 300px;
    background: var(--yellow_light);
    border-radius: 10px;
}
.top_case .case_ul .webgene-blog .li .pict img {
    height: 300px;
    aspect-ratio: 4/3;
    border-radius: 10px;
}
.top_case .case_ul .webgene-blog .li a .title {
    margin-top: 10px;
    color: var(--text);
    line-height: 2;
}

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

	.top_case .case_ul .webgene-blog {
		gap: 2.7vw;
	}
	.top_case .case_ul .webgene-blog .li {
		width: calc(33.33% - 1.8vw);
	}
	.top_case .case_ul .webgene-blog .li .pict,
	.top_case .case_ul .webgene-blog .li .pict img {
		height: 20vw;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_case {
		padding: 7vw 0 0;
	}
	.top_case .frame > .title {
		width: 24vw;
	}
	.top_case .case_ul {
		width: calc(100% - 30vw);
	}
	.top_case .case_ul .webgene-blog {
		gap: 1.8vw;
	}
	.top_case .case_ul .webgene-blog .li {
		width: calc(33.33% - 1.2vw);
	}
	.top_case .case_ul .webgene-blog .li .pict,
	.top_case .case_ul .webgene-blog .li .pict img {
		height: 18vw;
	}
	.top_case .case_ul .webgene-blog .li a .title {
		margin-top: 1vw;
	}
	
}
@media screen and (max-width: 767px){
      
	.top_case {
		padding: 20px 0 0;
	}
	.top_case .frame {
		display: block;
	}
	.top_case .frame > .title {
		width: 100%;
	}
	.top_case .case_ul {
		width: 100%;
	}
	.top_case .case_ul .webgene-blog {
		display: block;
	}
	.top_case .case_ul .webgene-blog .li {
		width: min(400px,100%);
		margin: 30px auto 0;
	}
	.top_case .case_ul .webgene-blog .li .pict,
	.top_case .case_ul .webgene-blog .li .pict img {
		height: 75vw;
	}
  
}

/*----- bnr -----*/

.top_friends {
	padding: 150px 0;
}
.top_friends a {
	display: block;
	padding: 7px;
    background: url("/system_panel/uploads/images/bg_bnr.jpg") center no-repeat;
    background-size: cover;
	border-radius: 10px;
	color: var(--white);
}
.top_friends a:hover {
	opacity: .8;
}
.top_friends a .inner {
	padding: 40px 70px 30px;
	border: 2px solid var(--white);
	border-radius: 8px;
}
.top_friends a .inner .ttl {
	width: 411px;
	margin-bottom: 30px;
}
.top_friends a .inner .p {
	line-height: 2.5;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_friends {
		padding: 10vw 0;
	}
	.top_friends a {
		padding: .7vw;
	}
	.top_friends a .inner {
		padding: 3vw 5vw 2.5vw;
	}
	.top_friends a .inner .ttl {
		width: 32vw;
		margin-bottom: 2vw;
	}
	.top_friends a .inner .p {
		line-height: 2.25;
	}

}
@media screen and (max-width: 767px){
        
	.top_friends {
		padding: 50px 0;
	}
	.top_friends a .inner {
		padding: 20px 4vw;
	}
	.top_friends a .inner .ttl {
		width: min(300px,100%);
		margin: 0 auto 20px;
	}
	.top_friends a .inner .p {
		line-height: 2;
      text-shadow: 1px 1px 3px black;
	}

}