#nav-fixed .fixed-wrap__right nav ul a small {
    font-size: 10px;
    letter-spacing: 0;
}



.bar main {
	padding-top: 100vh;
}
.header-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.header-box::before {
	height: 1038px;
}
.header-box h1 {
	color: #fff;
	top: 22vw;
}

@media screen and (min-width: 768px) {
	
.header-box::before {
	height: 1039px;
}
	.header-box h1 {
		top: 123px;
/*		left: calc(50% + 622px);*/
	}	
}
#head-key {
	height: 100vh;
}
#head-key::before {
	background: url(../img/bar/key_img_ipad.png) no-repeat 80% 0;
	height: 120vh;
	width: 120vw;
}
#head-key .key-catch {
	width: 100%;
	position: absolute;
	bottom: 20vw;
	left: 0;
	z-index: 2;
}

@media screen and (min-width: 768px) {
#head-key::before {
	background: url(../img/bar/key_img.png) no-repeat top center;
	height: 1039px;
	width: 1500px;
}
#head-key .key-catch {
	width: 536px;
	left: 75px;
	bottom: 20px;
}
}
#sec1 {
	position: relative;
	z-index: 2;
	background: #000;
}
#sec1::before {
	content: "";
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(50% - 50px);
}
#sec1 .photo {
	height: 89vw;
	width: 100%;
}
#sec1 .photo img {
	object-position: 50% 50%;
}
#sec1 .box {
	position: relative;
	z-index: 2;
	padding: 10vw 6vw 15vw;
}
#sec1 .box dl dt {
	font-weight: 600;
	font-size: 5.9vw;
	line-height: 2;
	margin-bottom: 6vw;
	letter-spacing: 0.08em;
}
#sec1 .box dl dd {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
#sec1 {
	margin-bottom: 0;
}
#sec1::before {
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(50% - 50px);
	z-index: 1;
}
#sec1 .photo {
	height: 100vh;
	width: 100%;
}
#sec1 .photo img {
	object-position: 50% 50%;
}
#sec1 .box {
	position: absolute;
	bottom: 100px;
	right: 106px;
	width: 526px;
	padding: 0;
}
#sec1 .box dl dt {
	font-size: 30px;
	line-height: 60px;
	margin-bottom: 63px;
	letter-spacing: 7px;
}
#sec1 .box dl dd {
	line-height: 35px;
	padding-right: 17px;
	padding-left: 4px;
}
}
#sec2 {
	position: relative;
	z-index: 2;
	background: #000;
}
#sec2 .photo {
	height: 135vw;
	width: 100%;
}
#sec2 .photo img {
	object-position: 33% 50%;
}
#sec2 .box {
	position: relative;
	z-index: 2;
	background: url(../img/bar/sec2_bg03.jpg) no-repeat center;
	-webkit-background-size: cover;
	background-size: cover;
	padding: 15vw 6vw 9vw;
}
#sec2 .box dl dt {
	font-weight: 600;
	font-size: 5.9vw;
	line-height: 2.2;
	margin-bottom: 10vw;
	letter-spacing: 0.05em;
	height: 44vw;
	width: 55vw;
	margin: 0 auto;
}
#sec2 .box dl dd {
	text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

@media screen and (min-width: 768px) {
#sec2 {
	margin-bottom: 0;
}
#sec2 .photo {
	height: 100vh;
	width: 100%;
}
#sec2 .photo img {
	object-position: 50% 50%;
}
#sec2 .box {
	bottom: 95px;
	right: 205px;
	width: 346px;
	position: absolute;
	padding: 0;
	background: transparent;
}
#sec2 .box dl dt {
	font-size: 30px;
	line-height: 64px;
	letter-spacing: 7.8px;
	height: 302px;
	width: 248px;
	margin: 0 0 50px 25px;
}
#sec2 .box dl dd {
	margin-bottom: 0;
	width: 300px;
	line-height: 35px;
}
}
#sec3 {
	position: relative;
	z-index: 2;
	background: #000;
}
#sec3::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 143vw;
	background: url(../img/bar/sec3_bg.jpg) no-repeat top center;
	background-size: cover;
}
#sec3 .set {
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 85vw;
	position: relative;
	font-weight: 600;
}
#sec3 .set .photo {
	position: absolute;
	z-index: 2;
	left: -17vw;
	width: 97vw;
	top: 19vw;
}
#sec3 .set .scroll-down-wrap {
	width: 45vw;
	position: absolute;
	top: 11vw;
	left: 10vw;
	transition: 1.5s;
	z-index: 1;
}
#sec3 .set .scroll-down-wrap .scroll-down {
	animation: scroll 20s linear infinite;
}
#sec3 .set .scroll-down-wrap.active {
/*	transform: rotate(360deg) scale(1);*/
	opacity: 1 !important;
	visibility: visible;
}
#sec3 .set .ttl-1 {
	position: relative;
	font-size: 4.8vw;
	z-index: 2;
	text-align: right;
	margin-bottom: 22vw;
}
#sec3 .set .ttl-2 {
	position: relative;
	font-size: 5.7vw;
	z-index: 2;
	margin-bottom: 4vw;
}
#sec3 .set .ttl-3 {
	position: relative;
	font-size: 4.8vw;
	z-index: 2;
	text-align: right;
	margin-bottom: 20vw;
}
#sec3 .set .ttl-4 {
	position: relative;
	font-size: 5.7vw;
	z-index: 2;
	margin-left: 10vw;
	margin-bottom: 10vw;
}
#sec3 .set .ttl-5 {
	position: relative;
	font-size: 4.8vw;
	z-index: 2;
	text-align: right;
	margin-right: 5vw;
	margin-bottom: 10vw;
}
#sec3 .set .ttl-6 {
	position: relative;
	font-size: 5.7vw;
	z-index: 2;
	text-align: left;
	margin-left: 3vw;
	margin-bottom: 8vw;
}
#sec3 .set .text {
	position: relative;
	padding: 0 6vw;
}

@media screen and (min-width: 768px) {
#sec3 {
	margin-bottom: 0;
}
#sec3::after {
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: url(../img/bar/sec3_bg.jpg) no-repeat top center;
	background-size: cover;
}
#sec3 .set {
	padding-top: 59px;
}
#sec3 .set .photo {
	width: 732px;
	position: relative;
	left: 0;
	top: 0;
}
#sec3 .set .scroll-down-wrap {
	width: 259px;
	top: 56px;
	left: 231px;
}
#sec3 .set .ttl-1 {
	font-size: 22px;
	top: 312px;
	left: -44px;
	margin: 0;
	position: absolute;
	text-align: left;
	letter-spacing: 6px;
}
#sec3 .set .ttl-2 {
	position: absolute;
	font-size: 27px;
	top: 451px;
	left: 7px;
	margin: 0;
	letter-spacing: 6px;
}
#sec3 .set .ttl-3 {
	position: absolute;
	font-size: 21px;
	top: 597px;
	left: -60px;
	margin: 0;
	letter-spacing: 5px;
}
#sec3 .set .ttl-4 {
	position: absolute;
	font-size: 28px;
	top: 287px;
	right: -113px;
	margin: 0;
	letter-spacing: 6px;
}
#sec3 .set .ttl-5 {
	position: absolute;
	font-size: 22px;
	top: 431px;
	right: 0;
	margin: 0;
	letter-spacing: 5px;
}
#sec3 .set .ttl-6 {
	position: absolute;
	font-size: 28px;
	top: 573px;
	right: -124px;
	margin: 0;
	letter-spacing: 6px;
}
#sec3 .set .text {
	width: 273px;
	position: absolute;
	top: 690px;
	right: 38px;
	padding: 0;
	z-index: 2;
	line-height: 35px;
}
}
#sec4 {
	background: url(../img/bar/sec4_bg.jpg) no-repeat center;
	background-size: cover;
	padding-top: 20vw;
	padding-bottom: 15vw;
}
#sec4 h2 {
	margin: 0 auto 5vw;
	line-height: 1;
}
#sec4 h3 {
	font-size: 6.3vw;
	font-weight: 600;
	text-align: center;
	margin-bottom: 8vw;
}
#sec4 h3 span {
	position: relative;
}
#sec4 h3 span::after {
	content: "";
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	position: absolute;
	bottom: -3vw;
	left: 50%;
	transform: translateX(-50%);
	background: #074384;
}
#sec4 .sec4__scroll {
	line-height: 1;
	position: absolute;
	top: 48vw;
	left: 50%;
	transform: translateX(-50%);
	height: 10vw;
	width: 100vw;
}
#sec4 .sec4__scroll li {
	width: 126vw;
	margin: 0 0vw;
}
#sec4 .sec4__scroll img {
}
#sec4 .slider__s .slider__larger .ob-img {
	height: 64vw;
	margin-bottom: -5vw;
}
#sec4 .slider__s .slider__larger .slider__wrap {
	position: relative;
}
#sec4 .slider__s .slider__larger .inside {
	position: relative;
	z-index: 2;
	margin-left: auto;
}
#sec4 .slider__s .slider__larger .inside dl dt small {
	display: block;
	width: 64vw;
	font-size: 4.5vw;
	color: #fff;
	position: relative;
	padding: 0 5vw;
	margin-bottom: 2vw;
}
#sec4 .slider__s .slider__larger .inside dl dt small::after {
	content: "";
	background: #00336a;
	position: absolute;
	top: 0;
	left: 0;
	height: 9vw;
	right: 0;
	z-index: -1;
}
#sec4 .slider__s .slider__larger .inside dl dt span {
	font-size: 5vw;
	font-weight: 600;
	color: #205ea2;
	display: inline-block;
	position: relative;
	line-height: 2.6;
	padding: 0 4vw;
}
#sec4 .slider__s .slider__larger .inside dl dt span::after {
	content: "";
	background: #fff;
	position: absolute;
	top: 1vw;
	left: 0;
	height: 9vw;
	right: 0;
	z-index: -1;
}
#sec4 .slider__s .slider__larger .inside dl dd.price {
	font-size: 3.8vw;
	font-weight: 600;
	margin-bottom: 5vw;
	margin-left: 4vw;
}
#sec4 .slider__s .slider__larger .inside dl dd.price span {
	font-size: 5vw;
}
#sec4 .slider__s .slider__larger .inside dl .desc {
	padding: 0 4vw;
}
#sec4 .slider__s .note {
	text-align: center;
	position: relative;
	margin-bottom: 5vw;
	padding-top: 5vw;
}
#sec4 .slider__s .slider__thumb {
	position: relative;
	z-index: 2;
}
#sec4 .slider__s .slider__thumb .ob-img {
	width: 100%;
	height: 24vw;
	background: #000;
}
#sec4 .slider__s .slider__thumb .slick-track {
	transform: translate3d(0, 0, 0) !important;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	width: 103% !important;
}
#sec4 .slider__s .slider__thumb .slick-slide {
	position: relative;
	left: 0 !important;
	opacity: 1 !important;
	top: auto !important;
	width: 30.7% !important;
	margin-right: 2.5%;
	margin-top: 0%;
	cursor: pointer;
}
#sec4 .slider__s .slider__thumb .slick-slide img {
	opacity: 0.3;
}
#sec4 .slider__s .slider__thumb .slick-current img {
	opacity: 1;
}

@media screen and (min-width: 768px) {
#sec4 {
	padding-top: 63px;
	padding-bottom: 103px;
}
#sec4 h2 {
	width: 734px;
	margin-bottom: 19px;
}
#sec4 h3 {
	font-size: 36px;
	text-align: center;
	letter-spacing: 5px;
	margin-bottom: 106px;
}
#sec4 h3 span::after {
	width: 10px;
	height: 10px;
	bottom: -17px;
}
#sec4 .sec4__scroll {
	position: absolute;
	top: 335px;
	left: 50%;
	transform: translateX(-50%);
	height: 100px;
	width: 100vw;
}
#sec4 .sec4__scroll li {width: auto;}
#sec4 .sec4__scroll img {
	width: 100%;
}
	#sec4 .slider__s {
		position: relative;
	}
#sec4 .slider__s .slider__larger .ob-img {
	width: 700px;
	height: 550px;
	margin-bottom: -262px;
}
#sec4 .slider__s .slider__larger .slider__wrap {
	margin-bottom: 0;
}
#sec4 .slider__s .slider__larger .inside {
	width: 600px;
	margin-left: auto;
}
#sec4 .slider__s .slider__larger .inside dl dt small {
	width: 248px;
	font-size: 26px;
	padding: 0;
	margin-bottom: 28px;
	letter-spacing: 2px;
}
#sec4 .slider__s .slider__larger .inside dl dt small::after {
	top: -23px;
	left: -34px;
	height: 64px;
	right: 0;
}
#sec4 .slider__s .slider__larger .inside dl dt span {
	font-size: 34px;
	line-height: 85px;
	padding: 0;
	letter-spacing: 2px;
}
#sec4 .slider__s .slider__larger .inside dl dt span::after {
	top: 8px;
	left: -34px;
	height: 64px;
	right: -37px;
}
#sec4 .slider__s .slider__larger .inside dl dd.price {
	font-size: 22px;
	margin-left: 0;
	letter-spacing: 3px;
	padding-top: 16px;
	margin-bottom: 21px;
}
#sec4 .slider__s .slider__larger .inside dl dd.price span {
	font-size: 32px;
}
#sec4 .slider__s .slider__larger .inside dl .desc {
	line-height: 35px;
	padding: 0;
}
	
#sec4 .slider__s .note {
	text-align: left;
	position: absolute;
	bottom: 90px;
	left: 0;
	padding-top: 0;
	margin-bottom: 0;
	letter-spacing: 1px;
}
#sec4 .slider__s .slider__thumb {
	width: 601px;
	position: absolute;
	top: 50px;
	right: -50px;
	z-index: 2;
}
#sec4 .slider__s .slider__thumb .ob-img {
	width: 100%;
	height: 170px;
}
#sec4 .slider__s .slider__thumb .slick-track {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	width: 103% !important;
}
#sec4 .slider__s .slider__thumb .slick-slide {
	left: 0 !important;
	opacity: 1 !important;
	top: auto !important;
	width: 29.7% !important;
	margin-right: 2.5%;
	margin-top: 0%;
	cursor: pointer;
}
}
#sec5 {
	position: relative;
	background: url(../img/shared/bg04.jpg);
	padding-top: 15vw;
	padding-bottom: 20vw;
}
#sec5 .box {
	position: relative;
	align-items: flex-end;
	margin-bottom: 11vw;
}
#sec5 .box .left {
	position: relative;
}
#sec5 .box .left h3 {
	width: 46vw;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
#sec5 .box .left .ob-img {
	height: 64vw;
}
#sec5 .box .right {
	padding-top: 10vw;
}
#sec5 .box .right dl dt {
	font-size: 6vw;
	margin-bottom: 5vw;
	font-weight: 600;
}
#sec5 .box .right dl dt span {
	display: block;
	font-size: 4.5vw;
	margin-bottom: 2vw;
	line-height: 1;
	margin-left: -3vw;
	font-weight: 600;
}
#sec5 .box .right dl dd {
	margin-bottom: 0;
	line-height: 35px;
}
#sec5 .bnr__style {
	margin: 0 auto;
	z-index: 2;
}
#sec5 .bnr__style::before {
	opacity: 1;
}
#sec5 .bnr__style:hover::before {
	opacity: .6;
}

@media screen and (min-width: 768px) {
#sec5 {
	padding-top: 133px;
	padding-bottom: 120px;
}
#sec5 .box {
	align-items: flex-end;
	margin-bottom: 90px;
}
#sec5 .box .left {
	width: 810px;
}
#sec5 .box .left h3 {
	width: 405px;
	position: absolute;
	top: 0;
	right: 0;
}
#sec5 .box .left .ob-img {
	height: 609px;
}
#sec5 .box .right {
	width: 430px;
	margin-right: -21px;
	padding-bottom: 20px;
	padding-top: 0;
}
#sec5 .box .right dl dt {
	font-size: 34px;
	margin-bottom: 62px;
}
#sec5 .box .right dl dt span {
	font-size: 26px;
	margin: 0 0 41px -13px;
}
#sec5 .box .right dl dd {
	margin-bottom: 0;
	line-height: 35px;
	letter-spacing: 2px;
}
#sec5 .bnr__style {
	margin: 0 auto;
}
}
#sec6 {
	position: relative;
	background: url(../img/bar/sec6_bg.jpg) no-repeat center;
	background-size: cover;
	padding-top: 35vw;
	padding-bottom: 20vw;
	text-align: center;
}
#sec6 h3 {
	font-size: 14vw;
	line-height: 1;
	position: absolute;
	top: -6vw;
	left: 0;
}
#sec6 h2 {
	margin: 0 auto 6vw;
}
#sec6 h4 {
	font-weight: 600;
	text-align: center;
	position: relative;
	z-index: 2;
	margin-bottom: 6vw;
	font-size: 6.3vw;
}
#sec6 h4 span {
	position: relative;
	display: inline-block;
	padding: 0 5vw;
	letter-spacing: 0.2em;
}
#sec6 h4 span::after {
	content: "";
	background: #084787;
	height: 10vw;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}
#sec6 .text {
	font-size: 14px;
	line-height: 29px;
	padding: 0 5vw;
}

@media screen and (min-width: 768px) {
#sec6 {
	padding-top: 229px;
	padding-bottom: 186px;
}
#sec6 h3 {
	font-size: 97px;
	line-height: 89px;
	position: absolute;
	top: -46px;
	left: 0;
	letter-spacing: 3px;
}
#sec6 h2 {
	width: 649px;
	margin: 0 auto 40px;
}
#sec6 h4 {
	margin-bottom: 80px;
	font-size: 36px;
}
#sec6 h4 span {
	padding: 0 40px;
}
#sec6 h4 span::after {
	height: 57px;
	top: -20px;
	left: 0;
	right: 0;
}
#sec6 .text {
	font-size: 14px;
	line-height: 29px;
}
}





@media screen and (min-width: 768px) and (max-height: 800px) {
    #head-key::before {
        background: url(../img/bar/key_img_ipad.png) no-repeat top center;
        height: 900px;
        width: 1500px;
    }
	#head-key .key-catch {
        width: 16%;
        left: 67px;
	}
	#sec2 .box dl dt {
		margin: 0 0 0px 25px;
	}
	
	#sec2 .box dl dt {
		height: 252px;
	}
	#sec1 .box dl dt {
		margin-bottom: 33px;
	}
	
	
	
}

@media screen and (min-width: 768px) and (max-width: 1499px) {
	#sec1 .box {
		right: 50px;
	}
	#sec2 .box {
		right: 50px;
	}

}

@media screen and (min-width: 768px) and (max-width: 1399px) {
	#sec5 .box .right {
		margin-right: 0px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1299px) {
    #sec4 .slider__s .slider__thumb {
        width: 40%;
        top: 50px;
        right: 0;
    }
	#sec5 .box .right {
		margin-right: 20px;
	}
	#sec5 .box .left {
		width: 57%;
	}
	#sec5 .box .left {
		left: 20px;
	}

	#sec1 .box {
		right: 0;
	}
	#sec4 .slider__s .note {
		left: 20px;
	}
	#sec3 .set .ttl-6,
	#sec3 .set .ttl-4 {
		right: -100px;
	}
}



@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
	#head-key {
		height: 990px;
	}
	.bar main {
		padding-top: 990px;
	}
	
    #head-key .key-catch {
        bottom: auto;
        top: 550px;
    }
	    #sec2 {
        margin-bottom: -2px;
    }
	#head-key .key-catch {
		width: 23%!important;
	}
	
}


@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
	#head-key {
		height: 990px;
	}
	.bar main {
		padding-top: 990px;
	}
	#sec1 .photo,
	#sec2 .photo {
		height: 950px;
	}
	    #sec2 {
        margin-bottom: -2px;
    }
}