@charset "UTF-8";
/* CSS Document */

:root {
	--color-white: #fff;
	--color-black: #000;

	--color-basic: #2558A8;
	--coclor-text: #333;
	--color-sub1: #088E8E;
	--color-sub2: #FD0403;
	--color-bg: #EFF2F8;
}

.font-01 {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
/*
.font-02 {
  font-family: "Big Shoulders", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
} */

:root {
    --delay: 0.5s;
    --duration: 500ms;
    --iterations: 1;
}

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

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; background: #002664; }
html.fixed {}
html.fixed body { height: 100%; position: fixed; width: 100%;}
body { font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: var(--coclor-text); line-height: 2; background-color: #ddd; overflow: hidden; background: url(../images/bg_duxy.png) no-repeat left top / cover; letter-spacing: 0.05em;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative; }
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/
a.fade:hover { text-decoration: none; background-color: #fff; color: var(--coclor-text); -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

main { display: block; padding-bottom: 150px; min-height: 100vh; }

@media (min-width: 1080px) {
	.container { padding-left: 20px; padding-right: 20px;}
}

@media (min-width: 768px) {
	body{ /*min-width: 1100px;*/ }
	.container { max-width: 1600px; }
	.w800 { max-width: 800px; margin-left: auto; margin-right: auto;}
    .w920 { max-width: 920px; margin-left: auto; margin-right: auto;}
	.w960 { max-width: 960px; margin-left: auto; margin-right: auto;}

	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	body{ }
	.container { margin-left: 20px; margin-right: 20px; width: auto; }
	.pc { display: none !important; }
	.sp { display: block !important; }

}



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

    pageTop

------------------------------------------------------*/
a#page-top { font-size: 1.6rem; position: fixed; right: 20px; bottom: 60px; z-index: 1000; cursor: pointer; overflow: hidden;  width: 60px; height: 40px; text-decoration: none; padding: 5px;  background: #000; opacity: 0.5; text-align: center; border-radius: 5px; color: #FFF; }







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

	header

------------------------------------------------------*/
header { height: 32px; padding: 4px 10px 0;}
header .logo {}
header .logo img { height: 24px; width: auto;}

@media (min-width: 768px) {
	header { height: 60px; padding-top: 7px;}
	header .logo img { height: 48px;}
}

@media (max-width: 767px) {

}


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

	page-title

------------------------------------------------------*/
#page-title { height: 90px; background: rgba(0, 0, 0, 0.50); text-align: center; padding-top: 12px; margin-bottom: 10px;}
#page-title img { height: 44px; width: auto; margin-bottom: 3px;}
#page-title span { color: #fff; display: block; font-size: 1.2rem; font-weight: 700;}


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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

	title

------------------------------------------------------*/
.title-a { color: #FFF; font-size: 2.8rem; font-weight: 700;  text-align: center; margin-bottom: 10px;}


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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

	list-page

------------------------------------------------------*/
#list-page {}

#list-page #shop-list {}
#list-page #shop-list li { background-color: #fff; background: url(../images/img_duxy.svg) no-repeat 12px 12px / 58px auto #fff; position: relative;}
#list-page #shop-list li::after { content: ""; width: 8px; height: 8px; position: absolute; right: 10px;top: calc(50% - 4px); border-top: 2px solid #001D54; border-right: 2px solid #001D54; transform: rotate(45deg);}
#list-page #shop-list li a { color: #001D54; font-size: 20px; font-weight: 700; text-decoration: none; display: block; padding: 2px 20px 2px 85px;}
#list-page #shop-list li:not(:last-child) { margin-bottom: 10px;}



/* coming soon */
#list-page .coming-soon {}
#list-page .coming-soon a::before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6); left: 0; top: 0;}
#list-page .coming-soon a::after { content: "Coming soon..."; font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; text-align: center; width: 120px; height: 23px; background-color: #000; color: #fff; position: absolute; left: 0; top: 0; font-size: 1.2rem;}
#list-page .coming-soon a {}

/* update */
#list-page #shop-list li span { font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", " 游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; width: 120px; height: 23px; background-color: #f00; color: #fff; position: absolute; left: 0; top: 0; font-size: 1.2rem; letter-spacing: 0px; }


@media (min-width: 768px) {
	#list-page main .container { max-width: 980px; padding-left: 0; padding-right: 0;}
	#list-page #shop-list { justify-content: flex-start;}
	#list-page #shop-list li { width: calc( (100% / 3) - 27px ); background-size: 82px auto; background-position: 18px 50%;}
	#list-page #shop-list li a { font-size: 2.8rem; padding: 12px 20px 12px 120px;}
	#list-page #shop-list li:not(:last-child) { margin-bottom: 0px;}
	#list-page #shop-list > *:nth-child(n+4) { margin-top: 20px;}
	#list-page #shop-list li:not(:nth-child(3n+3)) { margin-right: 40px; }

	#list-page #shop-list li:not(.coming-soon):hover { opacity: 0.8; transition: opacity 0.2s;}

	/* coming soon */
	#list-page .coming-soon {}
	#list-page .coming-soon a::before {}
	#list-page .coming-soon a::after { left: -10px; top: -5px;}
	#list-page .coming-soon a {}

	/* update */
	#list-page #shop-list li span { left: -10px; top: -5px;}


}

@media screen and (min-width:768px) and ( max-width:1080px) {
	#list-page #shop-list li { width: calc( (100% / 3) - 15px ); background-size: 60px auto; background-position: 14px 50%;}
	#list-page #shop-list li a { font-size: clamp(1.8rem, 2.4vw, 2.8rem); padding: 12px 20px 12px 90px;}
	#list-page #shop-list li:not(:nth-child(3n+3)) { margin-right: 22px; }
}

@media (max-width: 767px) {
	/* coming soon */
	#list-page .coming-soon {}
	#list-page .coming-soon a::before {}
	#list-page .coming-soon a::after { right: 25px; left: auto; top: calc(50% - 12px); width: 100px; font-size: 1rem; line-height: 23px; }
	#list-page .coming-soon a { padding-right: 125px !important;}

	/* update */
	#list-page #shop-list li span { right: 25px; left: auto; top: calc(50% - 12px); width: 100px; font-size: 1rem; line-height: 23px;}
	#list-page #shop-list li span + a { padding-right: 125px !important;}

}



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

	shop-detail

------------------------------------------------------*/
#shop-detail {}

#shop-detail #page-title { margin-bottom: 0; text-align: left; padding-top: 26px; }
#shop-detail #page-title img { margin-right: 15px;}
#shop-detail #page-title h1 { display: inline-block; color: #FFF; font-size: 2.4rem; font-weight: 700;}


#shop-detail #info-link {}
#shop-detail #info-link li { background-color: #000; position: relative;}
#shop-detail #info-link li::after { content: ""; width: 8px; height: 8px; position: absolute; right: 16px;top: calc(50% - 4px); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
#shop-detail #info-link li a { color: #fff; font-size: 1.6rem; font-weight: 700; text-decoration: none; display: block; }
#shop-detail #info-link li:nth-child(1) { background: url(../images/icon_access.png) no-repeat 16px 10px / 18px auto #000; }
#shop-detail #info-link li:nth-child(2) { background: url(../images/icon_zaiko.png) no-repeat 13px 12px / 24px auto #000; }


#shop-detail #bnr {}
#shop-detail #bnr a { display: block; max-width: 305px; width: 100%; margin-left: auto; margin-right: auto;}
#shop-detail #bnr img { width: 100%;}


#shop-detail #back-btn { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 50px; }
#shop-detail #back-btn a { background-color: #001A47; color: #fff; font-size: 1.6rem; font-weight: 700; display: block; text-decoration: none; position: relative; }
#shop-detail #back-btn a::after { content: ""; width: 8px; height: 8px; position: absolute; right: 16px; top: calc(50% - 4px); border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

@media (min-width: 768px) {
	#shop-detail #page-title .container { padding-left: 0; padding-right: 0;}

	#shop-detail #info-link { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 40px;}
	#shop-detail #info-link li { margin-bottom: 0; background-position: 16px 50% !important;}
	#shop-detail #info-link li a { height: 80px; padding: 24px 20px 0px 50px;}
	#shop-detail #info-link li:hover { opacity: 0.8; transition: opacity 0.2s;}

	#shop-detail #back-btn {}
	#shop-detail #back-btn a { height: 80px; line-height: 80px;}
	#shop-detail #back-btn a:hover { opacity: 0.8; transition: opacity 0.2s;}
}

@media (max-width: 767px) {
	#shop-detail #info-link { margin-bottom: 20px;}
	#shop-detail #info-link li:not(:last-child) { margin-bottom: 10px;}
	#shop-detail #info-link li a { padding: 6px 20px 6px 48px;}

	#shop-detail #back-btn {}
	#shop-detail #back-btn a { height: 60px; line-height: 60px;}

}


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

	shop-detail movie

------------------------------------------------------*/
#shop-detail #movie { position: relative; margin-bottom: 50px; background-color: #000;}

#shop-detail #videoWrap { line-height: 1; transition: all 0.4s; padding: 0;}
#shop-detail #videoWrap * { transition: all 0.4s;}




#shop-detail #videoWrap video {
    width: 100%;
    height: calc(100% - 100px);
    border-top: 30px solid #000;
    border-bottom: 30px solid #000;
}

#shop-detail #videoWrap video[poster]{
    object-fit: cover
}

#shop-detail #videoWrap button {

    cursor: pointer;
    padding: 0;
    color: #fff;
    background-color: transparent;
    border: 0;
    line-height: 1;
	border-radius: 50%;
	margin-right: 10px;
}

#shop-detail #controller-box {
    padding: 25px 10px 10px;
    position: relative;
    text-align: center;
	display:-webkit-box; display:-ms-flexbox; display:flex; justify-content: center; align-items: center;
}

#shop-detail #video-file {
    display: none;
}

#shop-detail #video-play.hide ,
#shop-detail #video-pause.hide ,
#shop-detail #video-vol .hide { display: none;}

#shop-detail #full-screen {}

#shop-detail #videoWrap.full { max-width: 100vw; z-index: 100; padding: 0; }
#shop-detail #videoWrap.full video {}


#shop-detail #progress-wrap {

    width: calc(100% - 40px);
    height: 2px;
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1;
}

#shop-detail #progress-out {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    transform: scaleY(1.0);
    transition: 0.3s;
}

#shop-detail #progress-out:hover {
    transform: scaleY(1.0);
    cursor: pointer;
}

#shop-detail #progress-in {
    margin: 0 auto 0 0;
    width: 100%;
    height: 100%;
    background-color: #f00;
    transform-origin: top left;
    transition: 0.1s;
    transform: scaleX(0);
}

#shop-detail #progress-buff {
    margin: 0 auto 0 0;
    width: 100%;
	height: 100%;
    background-color: #ccc;
    transform-origin: top left;
    transition: 0.1s;
    transform: scaleX(0);
    top: -2px;
    position: relative;
    z-index: -1;
}


@media (min-width: 768px) {
	#shop-detail .container { max-width: 960px;}
	#shop-detail #videoWrap { position: relative; }

	#shop-detail #full-screen { width: 44px; height: 44px;}
	#shop-detail #video-play { width: 44px; height: 44px;}
	#shop-detail #video-pause { width: 44px; height: 44px;}
	#shop-detail #video-vol { width: 44px; height: 44px;}

	#shop-detail #videoWrap.full { width: auto;  }
	#shop-detail #videoWrap.full video {}
}

@media (max-width: 767px) {

	#shop-detail #videoWrap { margin-left: 0; margin-right: 0;}

	#shop-detail #full-screen { width: 40px; height: 40px;}
	#shop-detail #video-play { width: 40px; height: 40px;}
	#shop-detail #video-pause { width: 40px; height: 40px;}
	#shop-detail #video-vol { width: 44px; height: 44px;}

	#shop-detail #videoWrap.full { width: 100%; margin-left: 0; margin-right: 0;}
	#controller-box { padding-top: 20px;}
}



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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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

	animation

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

/**
	js-fade-up
	animation
*/
.js-fade-up { opacity: 0;}
.js-fade-up.animation-on {
	animation-name: basic-animation;
	animation-duration: var(--duration);
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
/**
	下から上
*/
@keyframes basic-animation{
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
	fadeIn-a
	animation
*/
@keyframes fadeIn-a {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@media (min-width: 768px) {
	.delay01 { animation-delay: 0.1s; }
	.delay02 { animation-delay: 0.2s; }
	.delay03 { animation-delay: 0.3s; }
	.delay04 { animation-delay: 0.4s; }
	.delay05 { animation-delay: 0.5s; }
	.delay06 { animation-delay: 0.6s; }
	.delay07 { animation-delay: 0.7s; }
	.delay08 { animation-delay: 0.8s; }
	.delay09 { animation-delay: 0.9s; }
	.delay10 { animation-delay: 1.0s; }
	.delay11 { animation-delay: 1.1s; }
	.delay12 { animation-delay: 1.2s; }
	.delay13 { animation-delay: 1.3s; }
	.delay14 { animation-delay: 1.4s; }
	.delay15 { animation-delay: 1.5s; }
	.delay16 { animation-delay: 1.6s; }
	.delay17 { animation-delay: 1.7s; }
	.delay18 { animation-delay: 1.8s; }
	.delay19 { animation-delay: 1.9s; }
	.delay20 { animation-delay: 2.0s; }
}

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



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


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}