@charset "UTF-8";


main{
    & .mv{
        overflow: hidden;
        width: 100%;
        aspect-ratio: calc(var(--pc-width) / 800 );
        min-height: 720px;
        position: relative;
        display: flex;
        & .container{
            position: relative;
            /*height: 100%;*/
        }
        & .mv-slider{
            width: 100vw;
            height: 100%;
            position:absolute;
            left:50%;
            top:0;
            transform: translateX(-50%);
            & .swiper{
                height: 100%;

                & .swiper-slide{
                    & img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
        & .mv-title{
            text-shadow: 1px 1px 3px #fff;
            text-orientation: upright;
            writing-mode: vertical-rl;
            font-size: 2.25rem;
            position: absolute;
            left:calc(50% - 28.9%);
            top:50%;
            transform: translate(-50%, -50%);
            text-indent: -2.4em;
            line-height: 1.5em;
            letter-spacing: 0.1em;
            font-weight: normal;
            margin-top: 2em;
            margin-bottom:-2em;
            -webkit-animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                    animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        }
    }
    @media (max-width: 768px) {
        & .mv{
            aspect-ratio:calc(var(--sp-width) / 602);
            height: 100vh;
            min-height: unset;
            & .mv-title{
                margin-top: -2.3em;
                font-size: 1.5rem;
                text-indent: -1em;
            }
        }
        
    }
    & .top-section-title{
        font-size:1rem;
        font-weight: bold;
        letter-spacing: 0.2em;
        margin-bottom: 2.2rem;
    }
    & .top-section-subtitle{
        font-size: 1.75rem;
        font-weight: normal;
        line-height: 1.5em;
        position: relative;
        padding-bottom: 0.9em;
        margin-bottom: 60px;
        &::after{
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            height: 1px;
            background-color: var(--text-color);
        }
    }
    @media (max-width: 768px) {
        & .top-section-title {
            margin-bottom: 2.6rem;
        }
        & .top-section-subtitle{
            padding-bottom: 1em;
        }
    }

    & .top-about{
        display: flex;
        overflow: hidden;
        & .top-about-img{
            width:calc(596 / var(--pc-width) * 100%);
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        & .top-about-content{
            flex: 1;
            display: flex;
            justify-content: center;
            font-size: 1.125rem;
            line-height: 1.8em;
            background-color: rgba(255, 255, 255, 0.8);
            position: relative;
            --bs-gutter-x: 1.5rem;
            padding-top: 7.1vw;
            padding-bottom:1em;
            padding-right: calc(var(--bs-gutter-x) * .5);
            padding-left: calc(var(--bs-gutter-x) * .5);
            & p{
                margin-bottom: 2rem;
            }
            & .top-about-content-inner{
                position: relative;
                z-index: 1;
            }
            & .top-about-content-img{
                position:absolute;
                bottom: calc(-74 / var(--pc-width) * 100vw);
                right: calc(-25 / var(--pc-width) * 100vw);
                height: calc(394 / var(--pc-width) * 100vw);
                width: calc(365 / var(--pc-width) * 100vw);
                object-fit: cover;
                overflow: hidden;
                & img{
                    object-fit: contain;
                    width: 100%;
                    height: 100%;
                }
            }
        }


        @media (max-width:768px){
            &{
                flex-direction: column;
                overflow:hidden;
            }
            & .top-about-img{
                width: 100%;
                height: calc(446 / var(--sp-width) * 100vw);
            }
            & .top-about-content{
                background:unset;
                padding-top:4em;
                padding-bottom:2em;
                & .top-section-subtitle{
                    margin-bottom:3.8em;
                }
                & .top-about-content-img {
                    position:absolute;
                    bottom:unset;
                    top: calc(100vw / var(--sp-width) * 194);
                    height: calc(100vw / var(--sp-width) * 228);
                    width: calc(100vw / var(--sp-width) * 221);
                    right: calc(100vw / var(--sp-width) * -33);
                    z-index:-1;
                }
            }
        }
    }
    & .top-product{
        background:var(--main-color);
        color: #fff;
        position: relative;
        overflow: hidden;
        padding-top: 100px;
        padding-bottom: 100px;
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 密度100%を再現したSVGコード */
            background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" /></filter><rect width="100%" height="100%" filter="url(%23noise)" /></svg>');
  
            /* 色：#000000の25% を再現 */
            mix-blend-mode: multiply;
            opacity: 0.25; 

            pointer-events: none;
            z-index: 1;
        }
        & .top-product-inner{
            display: flex;
        }
        & .top-section-subtitle{
            &::after{
                background-color: #fff;
            }
        }
        & .top-product-content{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.125rem;
            line-height: 1.8em;
            padding:1em;
        }
        & .top-product-slide{
            width:66.6%;
            padding: 1em;
            & figcaption{
                font-size:1.125rem;
                line-height: 1.7em;
                color: #fff;
                margin-top: 0.5em;
            }
            & a::after{
                display: none;
            }
        }
        & .swiper-wrapper{
            margin-bottom :40px;
        }
        & .swiper-button-prev,
        & .swiper-button-next{
            position: relative;
            left: unset;
            right: unset;
            top: unset;
            bottom: unset;
            display: inline-block;
        }
        & .swiper-button-lock{
            opacity: 0;
        }
        @media (max-width:768px){

            & .top-product-inner{
                display:flex;
                flex-wrap: wrap;
                flex-direction:column;
                .top-product-slide{
                    width:100%;
                }
                & .top-product-content{
                    padding:unset;
                }
                & .top-product-slide{
                    padding:unset;
                    width:calc(100vw/ var(--sp-width) * 255);
                    margin: calc(100vw / var(--sp-width) * 30) auto;
                }
            }
        }
        
    }
    & .top-profile{
        position: relative;
        padding: 100px 0;
        background:url('../images/top/bg-profile.jpg') no-repeat center center;
        background-size: cover;
        color: #fff;
        &::before{
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: 0.3;
            display: block;
            top: 0;
            left: 0;
        }
        & .container{
            position: relative;
        }
        & .top-profile-inner{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 60%;
            margin-right:0;
            margin-left:auto;
            gap: 2em;
        }
        & .top-section-subtitle{
            white-space: nowrap;
            margin-bottom:0;
            &::after{
                background-color: #fff;
            }
        }
        & .top-profile-content{
            flex:1;
            /*min-width:400px;*/
        }
        & .button02{
            & a{
                color: #fff;
            }
        }


        @media (max-width:768px){
            & .top-profile-inner{
                width: 100%;
                flex-direction: column;
                align-items:unset;
            }
            & .top-profile-content{
                width: 100%;
                min-width: unset;
            }
            & .button02{
                margin-left:auto;
            }
        }
    }
    & .top-news{
        margin: 100px 0;
        & .top-news-inner{
            display:flex;
            gap: 7%;
            & .top-news-title{
                flex: 1;
            }
            & .news-list{
                width:100%;
                & >ul >li{
                    border-bottom:1px dashed #fff;
                }
            }
        }

        @media (max-width:768px){

            & .top-news-inner{
                display:flex;
                flex-wrap: wrap;
                & .news-list{
                    & > ul{
                        & > li{
                            flex-wrap: nowrap;
                            & .news-meta{
                                flex-direction: column;
                                align-items: unset;
                            }
                        }
                    }
                }
            }
        }
    }
}
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	right:0;
	bottom:10px;
    /*全体の高さ*/
	height:160px;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left: -7px;
    bottom: 0;
    /*テキストの形状*/
	color: var(--text-color);
    writing-mode: vertical-lr;
}

/* 線の描写 */
.scrolldown::before{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 10px;
	background: var(--text-color);
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:50px;
		opacity: 1;
	}
	100%{
		height:0;
		top:100px;
		opacity: 0;
	}
}
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}