@charset "utf-8";

/* CSS Document */
.flex.more3{
  cursor: pointer;
}
.page_links2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.more3 {
  padding: 10px 20px;
  border: #fff solid 1px;
  min-width: auto;
  width: 100%;
}
.more3 .a {
    display: block;
    width: 100%;
    text-decoration: none;
}
.more3 .a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px; 
    width: 100%;
}
.more3 .icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    transition: transform 0.3s ease;
}
.more3 .a:hover .icon { transform: translateX(5px); }
.more3 .icon img {
    width: 24px;
    height: auto;
}

/* ---------- cate2 ---------- */
.cate2 {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cate2 .titlebox {
    justify-content: center;
    margin-bottom: 40px;
}

.cate2 .bgimg {
    position: absolute;
    top: 50%;
    width: 16%; 
    transform: translateY(-50%);
    z-index: 0; 
}

.cate2 .bgimg1 {
    left: -0%;
	opacity: 0.8;
}

.cate2 .bgimg2 {
    right: 0%;
	opacity: 0.8;
}
.cate2 .movie_wrap {
    position: relative;
    z-index: 1;                 
    max-width: 860px;
    margin: 0 auto;
    overflow: hidden;
}

.cate2 .movie_wrap video {
    width: 70%;
    height: 70%;
	aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #000;           
}
.cate2 { position: relative; z-index: 0; }
.cate2 .bgimg { position: absolute; z-index: -1; }

.cate3{
	
}

.cate3 .imgbox a { 
    display: block; 
}
.cate3 .imgbox img {
    display: block;
    width: 100%;
    height: auto;
}
.cate3 .boxwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.cate3 .boxwrap .box {
    width: calc((100% - 60px) / 3);
}
.cate3 .imgbox a.rectangle-img {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
}
.cate3 .imgbox a { display: block; }
.cate3 .imgbox img {
    display: block;
    width: 100%;
    height: auto;
}

.cate4 .sns_wrap{
	gap:50px;
}
.cate4 .sns_wrap .youtube_wrap,
.cate4 .sns_wrap .instagram_wrap{
	width: calc(50% - 25px);
}
.cate4 .sns_wrap .youtube_wrap .iconbox{
	width: 30px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.cate4 .sns_wrap .instagram_wrap .instagrambox{
	margin: 0 auto;
	width: 315px;
}
.cate4 .sns_wrap .instagram_wrap .iconbox{
	width: 30px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.cate4 .sns_wrap .youtube_wrap .youtubebox{
	margin: 0 auto;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
.cate4 .sns_wrap {
    flex-direction: column;
}
.cate4 .sns_wrap .youtube_wrap,
.cate4 .sns_wrap .instagram_wrap{
	width: 100%;
}
.cate4 .sns_wrap .instagram_wrap .instagrambox{
	width: 100%;
}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.page_links2 {
	  grid-template-columns: repeat(2, 1fr);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.page_links2 {
	  grid-template-columns: repeat(1, 1fr);
	}
    .cate3 .boxwrap .box {
        width: calc((100% - 30px) / 2); /* 2列 */
    }
	.cate2 .movie_wrap video {
		width: 100%;
		height: 100%;         
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
    .cate3 .box_wrap .imgbox {
        width: calc((100% - 30px) / 1);
    }
    .cate3 .boxwrap .box {
        width: 100%; /* 1列 */
    }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}