/*------------------
This style sheet for function page
---------------------------------------*/

.function-outer-wrapper{
    background: #EFEFEF;
}
.function-original-content{
    padding-top:100px;
}
  

/*------
Section: Function First View
-----------*/
.function-fv{
    position:relative;
}

.function-fv-content {
    width: 44%;
    height: calc(44% * 1.4);
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 50%;
    left: 0; /* 必要に応じて調整 */
    transform: translateY(-50%);
    padding: 4rem;
    box-sizing: border-box;
    max-width: 550px;
    max-height: 420px;
}


.function-fv-content img {
    height: 40px;
    margin-bottom: 2rem;
}

.function-fv-content-p1{
    font-size:12px;
    margin-bottom:17%;
    font-weight: normal;
}

.function-fv-content-p2{
    font-size:14px;
    margin-bottom:50px;
}

@media screen and (max-width: 1400px){
    .function-fv-content {
        width: 550px;
        /* min-width: 450px; */
        height: 320px;
    }
    .function-fv-content-p1 {
        font-size: 12px;
        margin-bottom: 6%;
    }
    .function-fv-content img {
        height: 33px;
        margin-bottom: 2rem;
    }

}

@media screen and (max-width: 768px){/* 768px以下 */
    .function-fv{
        margin-top:1rem;
    }

    .function-fv-img{
        margin-bottom:0px;
    }

    .function-fv-content{
        width:80%;
        margin:auto;
        height:10%;
        background-color:rgba(255, 255, 255, 0.5);
        position: static;
        transform: translateY(-110px) translateX(0px);
        padding:2rem 5%;
        box-sizing: border-box;
        text-align:center;
        border-radius: 8px;
    }

    .function-fv-content img{
        height:1.25rem;
        margin-bottom:0.8rem;
        padding:0 1rem;
    }

    .function-fv-content-p1{
        font-size:12px;
        margin-bottom:40px;
    }

    .function-fv-content-p2{
        font-size:14px;
        margin-bottom:0px;
		text-align: left;
    }
}

/*------
Section: Tops
-----------*/
.function-tops{
    margin-top:200px;
    margin-bottom:100px;  
}

.function-tops-title {
    max-width: calc(2000px* 0.8);
    height: 300px;
    margin-left: 0;
    background: #D6D6D6;
    width: 80vw;
}

.function-tops-title-inner{
    padding:3rem 15%;
}

.function-tops-title-inner h3{
    font-size:16px;
    font-weight: normal;
}


.function-tops-title img{
    /*width:120px;*/
    height:30px;
    margin-bottom:20px;
}
@media screen and (max-width: 1200px){
    .function-tops-title-inner{
        padding:4.5rem 10vw;
    }
}

@media screen and (max-width: 768px){
    .function-tops{
        margin-top:-50px;
        margin-bottom:100px;  
    }
    
    .function-tops-title{
        width:96vw;
        height:fit-content;
        margin-left:0;
        background:#D6D6D6;
        border-radius: 0 8px 8px 0;      
    }
    
    .function-tops-title-inner{
        padding:1.2rem;
        display:grid;
        place-content:center;
        margin-left: 2vw;
    }
    
    .function-tops-title img{
        /*width:120px;*/
        height:1.25rem;
        margin-bottom:0.5rem;
        margin-top:0.5rem;
        margin-left:calc(4vw/2);   
    }

    .function-tops-title h3{
        font-size:12px;
        text-align: center; 
         
    }
}


/*-- function-tops-content --*/

.function-tops-content{
    margin-top:-100px;
    width:1000px;
    text-align:center;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 250px));
    row-gap: 60px;
    column-gap: 40px; 
    justify-content: center; 
}

.function-tops-number{
    height:30px;
    position:absolute;
    top:-20px;
    left:-20px;
}

.function-tops-content-items{  
    position:relative;
}

.function-tops-content-items .tops-point{
    font-size:15px;
    margin:1rem;
}

.function-tops-content-items .tops-point-description{
    font-size:13px;
    padding:0 0rem;
    text-align: left;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .function-tops-content{
        margin-top:-80px;
        width:90vw;
        grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
        row-gap: 5rem;
        justify-content: center; 
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .function-tops-content{
        margin-top:50px;
        width:90vw;
        grid-template-columns: 1fr;
        row-gap: 5rem;
        justify-content: center; 
    }
    
    .function-tops-number{
        height:30px;
        position:absolute;
        top:-3%;
        left:3%;
    }

    .function-tops-img{
        width:86%;
    }
    
    .function-tops-content-items{  
        position:relative;
    }
    
    .function-tops-content-items .tops-point{
        font-size:15px;
        margin:1rem;
    }
    
    .function-tops-content-items .tops-point-description{
        width:82%;
        margin:auto;
        font-size:13px;
        padding:0 0rem;
        text-align: left;
    }
}


/*-- function-bottoms-content --*/
.function-bottoms{
    margin-bottom:100px;
}

.function-bottoms-title{
    width:100%;
    height:200px;
    margin-left:0;
    background:#3E3A3A;
    margin-bottom:100px;
}

.function-bottoms-title img{
    height:30px;
    margin-bottom:20px;
}
.function-bottoms-title h3{
    color:#fff;
    font-size:16px;
    font-weight:normal;
}

.function-bottoms-title-inner{
    padding:3rem 15%;
}

.function-bottoms-content{
    padding:0 2rem;
    transform: translateY(-130px);
}

.function-bottoms-content-01,
.function-bottoms-content-02
{
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom:80px;
}


@media screen and (max-width: 1200px){
    .function-bottoms-title-inner{
        padding:3rem 10vw;
    }
}

@media screen and (max-width: 900px){/* 900px以下 */
    .function-bottoms{
        margin-bottom:0px;
    }
    .function-contact{
        margin-top:-100px;
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .function-bottoms{
        margin-bottom:40px;
    }
    
    .function-bottoms-title{
        width:100%;
        height:240px;
        margin-left:0;
        background:#3E3A3A;
        margin-bottom:100px;
        text-align: center;
    }
    
    .function-bottoms-title img{
        height:1.25rem;
        margin-bottom:0.5rem;
    }
    .function-bottoms-title h3{
        font-size:12px;
    }
    
    .function-bottoms-title-inner{
        padding:2.5rem 2rem;
    }
    
    .function-bottoms-content{
        padding:0 2rem;
        transform: none;
    }
    
    .function-bottoms-content-01
    {
        display:flex;
        flex-direction: column;
        margin-top:-200px;
    }

    .function-bottoms-content-02 {
        display: flex;
        flex-direction: column-reverse; /* 上下を反転 */
        margin-bottom:50px;
    }    
    .function-contact{
        margin-top:50px;
    }
}


/*--すべり止めテープ--*/
.function-bottoms-content .bottoms-point-img{
    width:400px;
}

.bottoms-point-img-01{/* 右寄せ中央 */
    display:block;
    align-self: cener;
    justify-self: end; 
}
.bottoms-point-inner-01{/* 左寄せ下揃え */
    align-self: end; 
    justify-self: start; 
    padding:0 5rem;
    text-align: center;;

}
.bottoms-point-inner-01 .bottoms-point{
    margin-bottom:0.5rem;
    font-size:16px;
    font-weight:600;
}
.bottoms-point-inner-01 .bottoms-point-01{
    padding-left:2rem;
}
.bottoms-point-inner-01 .bottom-point-description{
    text-align:left;
    width:280px;
    font-size:14px;
}
.bottoms-point-arrow-01{
    width:200px;
    transform: translateY( 12px) translateX(-170px);
}

@media screen and (max-width: 768px){/* 900px以下 */
    .function-bottoms-content .bottoms-point-img{
        width:88%;
    }

    .bottoms-point-img-01{
        display:block;
        align-self: center;
        justify-self: center; 
    }
    .bottoms-point-inner-01{
        align-self: center; 
        justify-self: center; 
        padding:0 2rem;
        text-align: center;
        max-width: 100vw;
    
    }
    .bottoms-point-inner-01 .bottoms-point{
        margin:1rem;
        font-size:16px;
        font-weight:600;
    }

    .bottoms-point-inner-01 .bottoms-point-01{
        padding-left:0rem;
        margin-top: -150px;
    }

    .bottoms-point-inner-01 .bottom-point-description{
        text-align:left;
        width:fit-content;
        font-size:14px;
        padding:0 8px;
    }

    .bottoms-point-arrow-01{
        /*transform: translateY(-176px) translateX(118px) rotate(0deg) scale(1.1);*/
		transform: translateY(-167px) translateX(118px) rotate(0deg) scale(87%);
        width: 62px;
    }
}


/*--ウエストゴム仕様--*/
.bottoms-point-img-02{/* 左寄せ中央 */
    display:block;
    align-self: start;
    justify-self: start; 
}
.bottoms-point-inner-02{/* 左寄せ下揃え */
    align-self: end; 
    justify-self: start; 
    padding:0 5rem;
    text-align: center;
    margin-bottom:3rem;

}
.bottoms-point-inner-02 .bottoms-point{
    margin-bottom:0.5rem;
    font-size:16px;
    font-weight:600;
}
.bottoms-point-inner-02 .bottoms-point-02{
    padding-left:2rem;
}
.bottoms-point-inner-02 .bottom-point-description{
    text-align:left;
    width:280px;
    font-size:14px;
}
.bottoms-point-arrow-02{
    width:200px;
    transform: translateY(6px) translateX(243px) scaleX(-1);
}

@media screen and (max-width: 768px){/* 900px以下 */
    .bottoms-point-img-02{
        display:block;
        align-self: center;
        justify-self: center; 
    }
    .bottoms-point-inner-02{
        align-self: center; 
        justify-self: center; 
        padding:0 2rem;
        text-align: center;
        margin-bottom:3rem;
        max-width: 100vw;
    }

    .bottoms-point-inner-02 .bottoms-point{
        margin:1rem;
        font-size:16px;
        font-weight:600;
    }

    .bottoms-point-inner-02 .bottom-point-description{
        text-align:left;
        width:fit-content;
        font-size:14px;
    }

    .bottoms-point-inner-02 .bottoms-point-02{
        padding-left:0rem;
        margin-top: -197px;
    }

    .bottoms-point-arrow-02 {
        /*transform: translateY(-224px) translateX(116px) rotate(0deg) scale(1.1);*/
	    transform: translateY(-87%) translateX(116px) rotate(0deg) scale(89%);
        width: 55px;
    }
}

 
/*----------
function contatc 
-------------*/

.function-contact{
    background:#FFFFFF ;
    padding:8rem 0 5rem;
}
@media screen and (max-width: 768px) {
    .function-contact {
        padding: 6.5rem 0 3rem;
    }
}


/*----------
function series list
フロントCSSと共通タイトル
コードはパーツとして使いまわす。
-------------*/
.function-series{
    padding-bottom:150px;
    padding-top: 20px;
}

.function-sereis-list-pc-wrapper{
    padding:0 5%;

}

.function-sereis-list {    
    max-width:1000px;
    margin:auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /* できるだけアイテムを多く並べる */
    gap: 50px; /* アイテム間の隙間 */
}

.function-series-name{
    text-align:center;
    margin:0.5rem;
    font-size:11px;    
    font-weight: 400;
    font-style: normal;
}

.series-list-slider {
    position: relative; /* 絶対配置の基準にする：スライドの範囲に表示 */
    overflow: hidden;
}

.series-list-slider .swiper-slide a{
    color: #3E3A3A;
}

.series-sereis-list-outer{
    padding:0 5%;
}

.series-list-slider .swiper-button-prev,
.series-list-slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px; /* 背景サイズ */
    height: 32px; /* 背景サイズ */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.series-list-slider .swiper-button-next:after, 
.series-list-slider .swiper-button-prev:after{
    color:#fff;
    font-size: 18px; /* 矢印サイズ */
}

/* 左ボタン */
.series-list-slider .swiper-button-prev {
    left: 5px; /* スライダーの内側に配置 */
}

/* 右ボタン */
.series-list-slider .swiper-button-next {
    right: 5px; /* スライダーの内側に配置 */
}

/* SwiperをPC非表示 */
.series-list-slider {
    display: none;
}

/* スマホ時の切り替え */
@media screen and (max-width: 768px) {
    /* グリッドを非表示に */
    .function-sereis-list {
        display: none;
    }

    /* シリーズ一覧ではグリッドを表示に */
    .page-template-page-series .function-sereis-list{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Swiperを表示 */
    .series-list-slider {
        display: block;
		position: relative; /* 絶対配置の基準にする：スライドの範囲に表示 */
    }
	
	.series-list-slider .swiper-button-prev,
	.series-list-slider .swiper-button-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		width: 32px; /* 背景サイズ */
		height: 32px; /* 背景サイズ */
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.series-list-slider .swiper-button-next:after, 
	.series-list-slider .swiper-button-prev:after{
		color:#fff;
		font-size: 18px; /* 矢印サイズ */
	}

	/* 左ボタン */
	.series-list-slider .swiper-button-prev {
		left: 5px; /* スライダーの内側に配置 */
	}

	/* 右ボタン */
	.series-list-slider .swiper-button-next {
		right: 5px; /* スライダーの内側に配置 */
	}
}