@charset "utf-8";

#keyVisual{
	background: url("../img/keyvisual_pc.jpg") no-repeat right center / cover;
}

#contentsBlock > section{
    margin-top: 100px;
}

footer{
    margin-top: 170px;
}

@media screen and (max-width: 1600px){
	#keyVisual{
		background-position: 50% center;
	}
}
@media screen and (max-width: 1024px){
	#keyVisual{
		background-position: 82% center;
	}
}
@media screen and (max-width: 768px){
	#keyVisual{
		background: url("../img/keyvisual_sp.jpg") no-repeat right center / cover;
	}
}
@media screen and (max-width: 767px) {
    #contentsBlock > section{
        margin-top: 40px;
    }
    footer{
        margin-top: 100px;
    }
}

/* ------------------------------------------------------------------------ */

/* 詳細

/* ------------------------------------------------------------------------ */

#sec_doll .topBox{
    align-items: flex-start;
}
    #sec_doll .topBox .txtBox{
        font-family: "Shippori Mincho", serif;
        font-weight: 700;
        text-align: left;
        line-height: 1.778;
        width: 49%;
    }
        #sec_doll .topBox .hd01{
            margin-left: -1em;
        }

    #sec_doll .topBox figure{
        max-width: 580px;
        width: 49%;
        aspect-ratio: 580/400;
    }
        #sec_doll .topBox figure img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

#sec_doll .conteiner{
    margin-top: 75px;
}

#sec_doll .conteiner .ttl{
    font-family: "Shippori Mincho", serif;
    font-size: 3.2rem;
    color: #001555;
}

@media screen and (max-width: 1280px){
    #sec_doll .topBox .hd01{
        margin-left: 0;
    }
}
@media screen and (max-width: 768px){
    #sec_doll .topBox{
        flex-direction: column;
    }
    #sec_doll .topBox .txtBox,
    #sec_doll .topBox figure{
        width: 100%;
    }

    #sec_doll .topBox .hd01{
        margin-bottom: 18px;
    }

    #sec_doll .topBox figure{
        margin: 30px auto 0;
    }
}
@media screen and (max-width: 767px){
    #sec_doll .conteiner{
        margin-top: 50px;
    }
    #sec_doll .conteiner .ttl{
        font-size: 2rem;
    }
}
/* ------------------------------------------------------------------------ */

/* スライダー設定

/* ------------------------------------------------------------------------ */
.cnt-swiper{
	margin-top: 40px;
	position: relative;
	z-index: 1;
}

.cnt-swiper img{
    border-radius: 4px;
    overflow: hidden;
}

.swiper-slide{
	max-width: 390px;
}

.swiper-nav{
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% + 56px);
	max-width: 1592px;
	transform: translate(-50%,-50%);
	z-index: 10;
}
	.swiper-nav button{
		border: none;
		background: #fff;
		width: 56px;
		height: 56px;
		overflow: hidden;
		border-radius: 50%;
        border: solid 1px #4c4398;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.swiper-nav button::before{
	content: "";
	display: block;
	width: 26px;
	height: 7px;
	background: url("/common/img/icon_arrow_pur_min.png") no-repeat center / contain;
	margin-bottom: 3px;
}

	.swiper-nav button.swiper-button-prev::before{
		transform: scale(-1,1);
	}

.cnt-swiper figcaption{
	font-size: var(--font-sizei);
	margin-top: 10px;
}

@media screen and (max-width: 1280px) {
    #contentsBlock .swiper-nav button{
        position: absolute;
        top: calc(50% - 28px);
    }
}
@media screen and (max-width: 1200px) {
    .cnt-swiper{
        margin: 40px -20px 0;
    }
    #contentsBlock .swiper-nav .swiper-button-prev{
        left: 30px;
    }
    #contentsBlock .swiper-nav .swiper-button-next{
        right: 30px;
    }
}
@media screen and (max-width: 767px) {
    .cnt-swiper{
        margin-top: 20px;
    }
    #contentsBlock .swiper-nav button{
        width: 36px;
        height: 36px;
        top: calc(50% - 18px);
    }
    .swiper-nav button::before{
        width: 16px;
    }
}