@charset "UTF-8";

/**
 * reset
 */
html, body, div, main, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

.fs-l-main{
	width:auto !important;
}

/*右サイドバナー*/
a.Side_Banner {
	position: fixed;
	display: inline-block;
	transition: all .2s ease;
	z-index: 9999;
 }
 
 /* 右側 */
 a.Side_Banner.right { right: -20px;} /*マウスを乗せた時に出てくる幅*/
 a.Side_Banner.right:hover{ right: 0;}
 
 /* 左側 */
 a.Side_Banner.left { left: -20px;} /*マウスを乗せた時に出てくる幅*/
 a.Side_Banner.left:hover{ left: 0;}
 
 /* 並び位置 */
 a.Side_Banner.top1 { top: 100px; }
 a.Side_Banner.top2 { top: 220px; }
 a.Side_Banner.top3 { top: 340px; }
 a.Side_Banner.top4 { top: 460px; }
 
 @media only screen and (max-width:768px) {
 /* 並び位置 */
	a.Side_Banner.top1 { top:auto;bottom: 0px;left:10px; }
	a.Side_Banner.top2 { top:auto;bottom: 0px;left:120px; }
	a.Side_Banner.top3 { top:auto;bottom: 0px;left:230px; }
	a.Side_Banner.top4 { top:auto;bottom: 0px;left:340px; }
	.Side_Banner img{ width:100px;}
}

/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, main, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width:100%;
	height:auto;
	vertical-align:bottom;
}
strong {
	font-weight: bolder;
}
a {
	outline: none;
	color: #000;
}

/**
 * contents
 */
html {
	font-size: 62.5%;
}
body {
	text-align: left;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	line-height: 2;
	color: #333;
	/*font-feature-settings:"palt";
	-webkit-font-smoothing: antialiased;*/
	-webkit-text-size-adjust:none;
}
body.scrollstop,
main {
	overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5;
}
h1{text-align:center;font-size:28px;margin-bottom:20px;}
h2{text-align:center;font-size:24px;margin-bottom:20px;}
.jp_serif {
	font-family: 'Noto Serif JP', serif;
}
.an {
	font-family: 'Poppins', sans-serif;
}
.an_serif {
	font-family: 'Cormorant Garamond', serif;
	letter-spacing: 0.18em;
}
/* micro clearfix */
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after { clear: both; }

.clear {
	clear: both;
}
.tal {
	text-align: left;
}
.tac {
	text-align: center;
}
.tar {
	text-align: right;
}
@media only screen and (min-width:835px) {
	body {
		min-width: 1024px;
	}
}
@media only screen and (min-width:769px) {
	.sp {
		display:none !important;
	}
}
@media only screen and (min-width:374px) {
	.sp_s {
		display:none !important;
	}
}
@media only screen and (max-width:768px) {
	
}
@media only screen and (max-width:768px) {
	body {
		font-size: 1.2rem;
	}
	.pc {
		display:none !important;
	}
}
@media only screen and (min-width:510px) {
	br.tab {
		display:block !important;
	}
}
/**/
@media print {
	.sp,
	.sp_s {
		display: none;
	}
}



/**
 * anime
 */
.ani_ttl {
	 opacity: 0;
 }
.ani_ttl .word {
	white-space: nowrap;
}
.ani_ttl .char {
	position: relative;
	display: inline-block;
	opacity: 0;
}
.ani_ttl::after {
	transform: scaleX(0);
	transition: all 0.3s ease-out 0.5s;
}
.ani_ttl.on::after {
	transform: scaleX(1);
}
.ani_blur {
	opacity: 0;
	filter: blur(5px);
	transition: all 1s ease-in-out;
}
.ani_blur.on {
	opacity: 1;
	filter: blur(0);
}
.ani_fade {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.ani_fade.on {
	opacity: 1;
}
.ani_slideup {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-in, transform 1s ease-out;
}
.ani_slideup.on {
	opacity: 1;
	transform:translateY(0);
}
.ani_img {
	opacity: 0;
	transform: scale(1.05);
	transition: all 1.5s ease-in-out;
}
.ani_img.on {
	opacity: 1;
	transform: scale(1);
}

.ani_btn {
	display: inline-block;
	transition: opacity .3s ease-in, transform .4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transform: scale(0.8);
	opacity: 0;
}
.ani_btn.on {
	transform: scale(1);
	opacity: 1;
}


.slide {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,0);
}
.slide div {
	position: relative;
	width: 0%;
	height: 100%;
	overflow: hidden;
	transform: translate3d(0,0,0);
}
.slide img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	max-width: none;
	width: auto;
	height: auto;
	opacity: 0;
}
.on .slide div,
.slide.on div {
	transition: width 1.2s cubic-bezier(0.9, 0.2, 0.2, 0.9);
	width: 100%;
}
.on .slide img,
.slide.on img {
	transition: opacity 1.6s ease-out;
	opacity: 1;
}

#float_bnr {
	display: none;
	position: fixed;
	right: 1.5vw;
	bottom: 1.5vw;
	/*max-width: 209px;
	width: 10.9vw;*/
	z-index: 1000;
	transform: translate3d(0,0,0);
	cursor: pointer;
}
#float_bnr.act img {
	transition: transform 0.2s;
}
#float_bnr.act:hover img {
	transform: scale(1.05) translate3d(0,0,0);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media only screen and (max-width:768px) {
	#float_bnr {
		right: 15px;
		bottom: 15px;
		width: 100px;
	}
}

#gnav {
	box-sizing: border-box;
	display: block !important;
	position: fixed;
	top: 0;
	right: 0;
	width: 400px;
	height: 100vh;
	background-color: #fff;
	z-index: 9999;
	opacity: 0;
	transform: translateX(100%);
	transition: opacity 0.2s ease-out, transform 0s ease 0.2s;
}
#gnav.on {
	transition: opacity 0.3s ease-out, transform 0s;
	transform: translateX(0);
	opacity: 1;
}
#gnav ol {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#gnav li {
	position: relative;
}
#gnav li + li {
	margin-top: 10px;
}
#gnav li a {
	position: relative;
	display: inline-block;
	background-color: #fff;
	padding: 5px 10px 4px 12px;
	text-decoration: none;
	vertical-align: bottom;
	line-height: 1;
	font-weight: 600;
	font-size: 2rem;
	white-space: nowrap;
}
#gnav li a::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #000;
	content: '';
	transition: width 0.15s ease-in;
}
#gnav li a:hover::before {
	width: 100%;
	transition: width 0.3s ease-out;
}
#gnav li a::after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 2px;
	background-color: #ffe600;
	content: '';
}
@media only screen and (max-width:768px) {
	#gnav {
		background-color: transparent;
		width: 100%;
		overflow: hidden;
	}
	#gnav::before {
		position: absolute;
		top: 0;
		left: -25vw;
		width: 150vw;
		height: 100%;
		background-color: rgba(0,0,0,0);
		content: '';
	}
	#gnav.on::before {
		transition: background 0.8s ease-out 0.2s;
		background-color: rgba(0,0,0,0.6);
	}
	#gnav ol {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		top: 0;
		left: 0;
		transform: none;
		padding: 75px 20% 60px 20%;
		background-color: #fff;
	}
	#gnav li {
		margin-bottom: 30px;
	}
}

/**
 * #btn_menu
 */
#btn_menu {
	position: fixed;
	right: 0;
	top: 0;
	width: 100px;
	height: 100px;
	background-color: #fff;
	transform: translate3d(0,0,0);
	z-index: 10000;
	cursor: pointer;
}
#btn_menu div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 27px;
	height: 1px;
	background-color: #333;
	margin: auto;
}
#btn_menu div:nth-child(1) {
	transform: translateY(-7px);
}
#btn_menu div:nth-child(3) {
	transform: translateY(7px);
}
@media only screen and (max-width:834px), (orientation: portrait) {
	#btn_menu {
		width: 60px;
		height: 60px;
	}
}


/**
 * #intro
 */
#intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color:#fff;
	z-index: 10000;
}
#intro > div {
	box-sizing: border-box;
	position: relative;
	width: 100%;
}

/* メイン画像 */ 
#intro .img {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16%;
	margin: auto;
	height: calc(100vh - 50vh);
	filter: blur(5px);
	opacity: 0;
}
#intro .img div {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: no-repeat center center / cover;
}
#intro.on .img {
	filter: blur(0);
	opacity: 1;
	transition: filter 1s ease-in, opacity 1s ease-in;
}
#intro.on .img0 {
	transition-delay: 0s;
}
#intro.on .img1 {
	transition-delay: 0.1s;
}
#intro.on .img2 {
	transition-delay: 0.2s;
}
#intro.off .img {
	transition: filter 1s ease-in, opacity 1s ease-in;
	transition-delay: 0 !important;
	filter: blur(5px);
	opacity: 0;
}
#intro .img0 {
	left: 33%;
	top: 5%;
}
#intro .img1 {
	left: 53%;
	top: -7%;
}
#intro .img2 {
	left: 73%;
	top: 1%;
}
#intro .img b {
	display: block;
	position: absolute;
	top: 4%;
	width: 103%;
	height: 100%;
}
#intro .img0 b {
	background-color: #fff5f5;
	left: -6%;
}
#intro .img1 b {
	background-color: #f5f5f1;
	left: 6%;
}
#intro .img2 b {
	background-color: #eef4f3;
	left: 6%;
}
@media only screen and (max-width:834px), (orientation: portrait) {

	#intro .img {
		position: relative;
		width: 37%;
		height: 28.5%;
		top: 0;
		margin: auto;
	}
	#intro .img0 {
		left: 10%;
	}
	#intro .img1 {
		left: 20%;
		margin-top: 20px;
	}
	#intro .img2 {
		left: 10%;
		margin-top: 20px;
		}
	#intro .img0 b {
		background-color: #fff5f5;
		left: -6%;
	}
	#intro .img1 b {
		background-color: #f5f5f1;
		left: 4%;
	}
	#intro .img2 b {
		background-color: #eef4f3;
		left: 4%;
	}
}

main.inact {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
footer.inact {
	display: none;
}

/**
 * #mv
 */
#mv {
	position: relative;
	height: 250vh;
}
#mv .contents {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	min-width: 1024px;
}
#mv.over .contents {
	position: absolute;
	top: auto;
	bottom: 0;
}
#logo {
	position: absolute;
	top: 0;
	left: 0;
	padding: 30px;
	z-index: 100;
	opacity: 0;
}
#logo.on {
	transition: opacity 1.5s ease-in-out;
	opacity: 1;
}
/* メイン画像 */ 
#mv .img0 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40%;
	width: 52%;
	height: calc(100vh - 100px);
	margin: auto;
}
#mv .img0 ul,
#mv .img0 ul li,
#mv .img1 ul,
#mv .img1 ul li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
#mv .img0 li.inact,
#mv .img1 ul li.inact {
	z-index: 3;
}
#mv .img0 li.act,
#mv .img1 ul li.act {
	z-index: 4;
}
/* サブ画像 */ 
#mv .img1 {
	position: absolute;
	bottom: 50px;
	left: 10%;
	width: 26%;
	height: 34.15vh;
	margin: auto;
	transform: translate3d(0,0,0);
}
#mv .img1 .img div {
	position: absolute;
	z-index: 1;
}
#mv .img1 .img div.inact {
	z-index: 2;
}
#mv .img1 .img div.act {
	z-index: 3;
}
#mv .img1 .img div.inact img,
#mv .img1 .img div.act img {
	opacity: 1;
}
#mv .pos {
	position: absolute;
	left: -45px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	z-index: 100;
}
#mv .pos li {
	width: 6px;
	height: 6px;
	border-radius: 10px;
	margin: 10px auto;
	background-color: #e1e1e1;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#mv .pos li.act {
	width: 22px;
	height: 22px;
	background-color: transparent;
}
#mv .pos svg {
	display: none;
	transform: rotate(-90deg);
}
#mv .pos li.act svg {
	display: inline-block;
}
#mv .pos circle {
	fill:none;
	stroke:#F4DE25;
	stroke-width:2;
	stroke-miterlimit:10;
} 

#ttl0 {
	position: absolute;
	top: 15%;
	left: 10%;
	width: auto;
	z-index: 3;
	text-align: left;
}
#ttl0 svg {
	width: 62.87vh;
	height: 22vh;
}
#ttl0 svg path {
	position: relative !important;
}
#mv .logo1 {
	display: block;
	position: relative;
	width: auto;
	height: 10vh;
	left: 44%;
	margin-top: 6vh;
	opacity: 0;
}
#mv .read {
	position: absolute;
	top: 50%;
	left: 12.5%;
	transform: translateY(-50%);
	white-space: nowrap;
	line-height: 1.8;
	font-size: 1.6rem;
	z-index: 5;
}
#mv .read strong {
	display: inline-block;
	font-weight: normal;
	overflow: hidden;
}
#mv .read span {
	display: inline-block;
	position: relative;
	transform: translateY(100%);
}
@media only screen and (max-height:600px) and (orientation: landscape) {
	#mv .logo1 {
		margin-top: 3vh;
	}
}
@media only screen and (max-width:834px), (orientation: portrait) {
	#mv {
		position: relative;
		height: auto;
	}
	#mv .contents {
		box-sizing: border-box;
		position: static;
		width: 100vw;
		height: auto;
		min-width: 0;
		padding: 80px 15px 0 15px;
	}
	#mv.over .contents,
	#mv.over .title,
	#mv.over .read {
		position: static;
	}
	#logo {
		padding: 15px;
		width: 40px;
	}
	/* メイン画像 */
	#mv .img0 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 102.666vw;
		margin: auto;
	}
	/* サブ画像 */
	#mv .img1 {
		display: none;
	}
	#mv .pos {
		display: block !important;
		right: -6px;
		top: calc(102.666vw + 20px);
		width: auto;
		text-align: right;
	}
	#mv .pos li {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
		margin: auto 6px;
	}

	#ttl0 {
		top: 75px;
		left: 15vw;
		width: 100%;
		height: auto;
		z-index: 10;
		filter: blur(5px);
		opacity: 0;
	}
	#ttl0.on {
		transition: all 1.5s ease-out 1s;
		filter: blur(0);
		opacity: 1;
	}

	#mv .logo1.pc, #ttl0 .pc { display: none !important; }
	#mv .logo1.sp, #ttl0 .sp { display: block !important; }

	#mv .logo1 {
		position: static;
		width: 100%;
		height: auto;
		margin: 0 0 15px 0;
		filter: none !important;
		text-align: right;
	}
	#mv .logo1 img {
		width: 110px;
		height: auto;
	}
	#mv .read {
		position: static;
		top: 0;
		left: 0;
		transform: none;
		margin: 50px 0;
		white-space: nowrap;
		line-height: 2;
		text-align: center;
		font-size: 1.3rem;
	}
	#mv .read strong {
		display: inline-block;
		font-weight: normal;
		overflow: hidden;
	}
	#mv .read span {
		display: inline-block;
		position: relative;
		transform: translateY(100%);
	}
	#mv .read.on span {
		transition: transform 0.6s ease-out 0.3s;
		transform: translateY(0);
	}
}

/* .ttl */
h2.ttl {
	margin-bottom: 0.6em;
	padding: 0 30px;
	line-height: 1;
	text-align: center;
	font-size: 7.8rem;
}
h2.ttl b {
	display: inline-block;
	border-bottom: solid 2px transparent;
}
h2.ttl.on b {
	border-color: #ffe600;
	transition: border 0.5s ease-in 0.4s;
}
h2.ttl + .read {
	max-width: 880px;
	padding: 0 30px;
	margin: auto;
	text-align: center;
}
@media only screen and (max-width:835px) {
	h2.ttl {
		font-size: 6rem;
	}
}
@media only screen and (max-width:768px) {
	h2.ttl {
		line-height: 0.6;
		padding: 0;
		font-size: 4rem;
	}
	h2.ttl b {
		padding-bottom: 10px;
		border-bottom: solid 1.5px transparent;
	}
	h2.ttl + .read {
		padding: 0 35px;
		text-align: left;
	}
	h2.ttl b:nth-child(n+2) {
		margin-top: 0.3em;
	}
}
@media only screen and (max-width:413px) {
	h2.ttl {
		font-size: 3.5rem;
	}
}
@media only screen and (max-width:374px) {
	h2.ttl {
		font-size: 3rem;
	}
}

/* .scroll */
.scroll {
	transform: translate3d(0,0,0);
	overflow: hidden;
}
.scroll ul {
	left: 0;
	position: relative;
	white-space: nowrap;
	transform: translate3d(0,0,0);
}
.scroll.right ul {
	left: auto;
	right: 0;
	text-align: right;
	transform: translateX(-50%);
}
.scroll li {
	display: inline-block;
	vertical-align: top;
	transform: translateY(15px);
	opacity: 0;
}
.scroll ul.on li {
	transition: all 1s ease-in-out;
	transform: translateY(0);
	opacity: 1;
}
.scroll ul.on li:nth-child(1) {
	transition-delay: 0s;
}
.scroll ul.on li:nth-child(2) {
	transition-delay: 0.1s;
}
.scroll ul.on li:nth-child(3) {
	transition-delay: 0.2s;
}
.scroll ul.on li:nth-child(4) {
	transition-delay: 0.3s;
}
.scroll ul.on li:nth-child(5) {
	transition-delay: 0.4s;
}
.scroll ul.on li:nth-child(6) {
	transition-delay: 0.5s;
}
.scroll ul.on li:nth-child(7) {
	transition-delay: 0.6s;
}
.scroll ul.on li:nth-child(8) {
	transition-delay: 0.7s;
}
.scroll ul.on li:nth-child(9) {
	transition-delay: 0.8s;
}
.scroll ul.on li:nth-child(10) {
	transition-delay: 0.9s;
}
.scroll ul.on li:nth-child(11) {
	transition-delay: 1s;
}
.scroll ul.on li:nth-child(12) {
	transition-delay: 1.1s;
}
.scroll ul.on li:nth-child(13) {
	transition-delay: 1.2s;
}
.scroll ul.on li:nth-child(14) {
	transition-delay: 1.3s;
}
.scroll ul.on li:nth-child(15) {
	transition-delay: 1.4s;
}
.scroll ul.on li:nth-child(16) {
	transition-delay: 1.5s;
}
.scroll ul.on li:nth-child(17) {
	transition-delay: 1.6s;
}
.scroll ul.on li:nth-child(18) {
	transition-delay: 1.7s;
}
.scroll ul.on li:nth-child(19) {
	transition-delay: 1.8s;
}
.scroll ul.on li:nth-child(20) {
	transition-delay: 1.9s;
}


/**
 * #gallery
 */
#gallery .scroll li {
	padding: 0 1.9%;
}
#gallery .scroll + .scroll {
	margin-top: 60px;
}
#gallery .scroll li .zoom {
	display: block;
	position: relative;
}
#gallery .scroll li .zoom::after {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 47px;
	height: 47px;
	border-radius: 100px;
	content: '';
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s;
	pointer-events: none;
}
#gallery .scroll li .zoom:hover::after {
	transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 1;
	transform: scale(1);
}
@media only screen and (max-width:768px) {
	#gallery .scroll li {
		padding: 0 10px;
	}
	#gallery .scroll + .scroll {
		margin-top: 28px;
	}
	#gallery .scroll li .zoom::after {
		top: 8px;
		bottom: auto;
		left: auto;
		right: 8px;
		width: 28px;
		height: 28px;
		background-size: 12px;
		opacity: 1;
		transform: scale(1);
	}
}

/**
 * #movie
 */
#movie {
	padding-top: 150px;
}
#movie > ul {
	margin-top: 75px;
}
#movie > ul > li {
	position: relative;
	padding: 60px 0;
}
#movie > ul > li + li {
	margin-top: 40px;
}
#movie > ul > li::before {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 60%;
	content: '';
}
#movie li .bg {
	position: absolute;
	top: 60px;
	width: 0;
	height: 100%;
	background-color: #fff;
	z-index: 0;
}
#movie .on .bg {
	transition: width 0.8s cubic-bezier(0.9, 0.2, 0.2, 0.9);
	width: 89.583%;
}
#movie li h4 {
	position: absolute;
	right: -60px;
	top: 80px;
	line-height: 1;
	letter-spacing: 0.1em;
	font-size: 13.5rem;
	font-weight: 300;
	transform-origin: left top;
	transform: translateX(100%) rotate(90deg);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
}
#movie .movie {
	position: relative;
	float: left;
	width: 44%;
	height: 100vh;
	min-height: 800px;
	max-height: 1200px;
	z-index: 1;
	cursor: pointer;
	overflow: hidden;
}
#movie .movie span {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 160px;
	height: 160px;
	margin: auto;
	opacity: 0;
	transform: scale(0.5);
}
#movie .on .movie span {
	transition: opacity 0.4s, transform 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transition-delay: 1.3s;
	opacity: 1;
	transform: scale(1);
}
#movie .movie span b {
	box-sizing: border-box;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: solid 1px #fff;
	border-radius: 300px;
	transition: transform 0.2s ease-out, background 0.3s ease-out;
}
#movie .movie:hover span b {
	transform: scale(1.1);
}
#movie .movie span svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% + 3px);
	height: calc(100% + 3px);
	transform: translate(-50%, -50%) rotate(-90deg);
}
#movie .movie span svg circle {
	fill:none;
	stroke:#F4DE25;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dasharray:503;
	stroke-dashoffset:503;
}
#movie .movie .slide {
	transition: transform 0.3s ease-out;
}
#movie .movie:hover .slide {
	transition: transform 0.5s ease-out;
	transform: scale(1.03);
}

#movie .body {
	position: relative;
	float: left;
	width: 56%;
}
#movie .txt {
	position: relative;
	box-sizing: border-box;
	top: 0;
	width: 80%;
	padding: 4.6vw 13vw 6vw 4.6vw;
	z-index: 3;
}
#movie .img {
	position: absolute;
	filter: blur(3px);
	transform: scale(0.9);
	transform-origin: center bottom;
	opacity: 0;
	z-index: 4;
}
#movie h3 {
	position: relative;
	display: inline-block;
	padding: 3px 12px 5px 12px;
	background-color: #333;
	font-size: 1.3rem;
	color: #fff;
}
#movie h3 strong {
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
	font-size: 1.6rem;
}
#movie h5 {
	padding: 0 0 20px 0;
	margin: 25px 0 20px;
	border-bottom: solid 1px #eee;
	font-size: 1.4rem;
	font-weight: 600;
	color: #b0b0b0;
}
#movie .txt h3,
#movie .txt h5,
#movie .txt p {
	opacity: 0;
	transform: translateY(15px);
}
#movie .txt p + p {
	margin-top: 0.5em;
}
#movie .txt p strong {
	font-size: 0.75em;
	font-weight: bold;
}
#movie .txt .btn_insta {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100px;
	transform: scale(1) translate3d(0,0,0);
	transition: transform 0.3s;
}
#movie .txt .btn_insta:hover {
	transform: scale(1.15) translate3d(0,0,0);
}
#movie .txt .icon_new {
	position: absolute;
	top: -60px;
	right: -150px;
	transform: scale(0.5);
	opacity: 0;
	z-index: 2;
}
#movie .on .icon_new {
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s;
	transform: scale(1);
	opacity: 1;
}

#movie .scroll li {
	position: relative;
	padding: 0 5px;
	cursor: pointer;
	z-index: 1;
}

#movie .scroll li:hover::after {
	transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 1;
	transform: scale(1);
}

#movie .person0::before,
#movie .person3 {
	background-color: #e9e9e9;
}
#movie .person0 h4,
#movie .person3 h4 {
	color: #808080;
}
#movie .person0 .img {
	top: 60px;
	left: 55%;
	width: 165px;
}
#movie li.person1::before {
	background-color: #ebff79;
}
#movie li.person1 h4 {
	color: #122f6d;
}
#movie .person1 .img {
	bottom: 0;
	left: 70%;
	width: 165px;
}
#movie li.person2::before {
	background-color: #922e2e;
}
#movie li.person2 h4 {
	color: #c7c7c7;
}
#movie .person2 .img {
	top: 250px;
	left: 60%;
	width: 270px;
}
@media only screen and (min-width:835px) {
	#movie .on .img {
		transition: all 0.6s ease-out 0.9s, transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.9s;
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
	#movie .on h3,
	#movie .on h5,
	#movie .on p {
		transition: all 0.6s ease-out;
		opacity: 1;
		transform: translateY(0);
	}
	#movie .on h3 { transition-delay: 0.8s; }
	#movie .on h5 { transition-delay: 1s; }
	#movie .on p { transition-delay: 1.2s; }

	#movie .person2 h3 strong {
		display: block;
	}
}
@media only screen and (min-width:510px) {
	#movie .read {
		text-align: center;
	}
}
@media only screen and (max-width:834px), (orientation: portrait) {
	#movie {
		padding-top: 75px;
	}
	#movie > ul {
		margin-top: 30px;
	}
	#movie > ul > li {
		padding: 25px 0;
	}
	#movie > ul > li + li {
		margin-top: 15px;
	}
	#movie > ul > li::before {
		height: 75%;
	}
	#movie li .bg {
		top: 25px;
	}
	#movie .on .bg {
		width: calc(100% - 15px);
	}
	#movie li h4 {
		right: -20px;
		top: 35px;
		font-size: 6rem;
	}
	#movie li.person1 h4 {
		mix-blend-mode: normal;
	}

	#movie .movie {
		position: relative;
		float: none;
		width: 74vw;
		height: 90vw;
		min-height: 300px;
		max-height: 600px;
	}
	#movie .movie span {
		width: 88px;
		height: 88px;
	}
	#movie .movie span b {
		background-size: 30px auto;
	}

	#movie .body {
		float: none;
		width: 100%;
	}
	#movie .person0 .img {
		top: -95px;
		left: auto;
		right: 40px;
		width: 73px;
	}
	#movie .person1 .img {
		top: -20px;
		left: auto;
		right: 35px;
		width: 73px;
	}
	#movie .person2 .img {
		top: -80px;
		left: auto;
		right: 5px;
		width: 135px;
	}
	#movie .img.on {
		transition: all 0.6s ease-out 0.9s, transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.9s;
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
	#movie .txt {
		box-sizing: border-box;
		width: 100%;
		padding: 25px 40px 30px 35px;
	}
	#movie h3 {
		padding: 2px 8px 4px 8px;
		font-size: 1rem;
	}
	#movie h3 strong {
		font-size: 1.1rem;
	}
	#movie h5 {
		padding: 0 0 10px 0;
		margin: 15px 0 10px;
		font-size: 1rem;
	}
	#movie h3.on,
	#movie h5.on,
	#movie p.on {
		transition: all 0.6s ease-out;
		opacity: 1;
		transform: translateY(0);
	}
	#movie .txt .icon_new {
		top: -30px;
		right: -75px;
		width: 70px;
	}

	#movie .scroll li {
		position: relative;
		padding: 0 5px;
		cursor: pointer;
	}
	#movie .scroll li::after {
		top: 8px;
		bottom: auto;
		left: auto;
		right: 8px;
		width: 28px;
		height: 28px;
		background-size: 12px;
		opacity: 1;
		transform: scale(1);
	}
}
@media only screen and (max-width:540px) {
	#movie h3 strong {
		display: block;
	}
}
@media only screen and (max-width:374px) {
	#movie h3 strong {
		display: block;
	}
}

#movie li.soon {
	text-align: center;
	padding: 110px 0;
}
#movie li.soon::before {
	display: none;
}
#movie li.soon h3 strong {
	display: inline-block;
	font-size: 3rem;
}
#movie li.soon a {
	display: inline-block;
	transition: transform 0.3s;
	margin: 30px auto;
}
#movie li.soon a:hover {
	transform: scale(1.05);
}
#movie li.soon h4 {
	position: static;
	transform: none;
	margin-bottom: 15px;
	font-size: 3.4rem;
}
#movie li.soon p {
	letter-spacing: 0.6em;
	font-size: 2rem;
}
@media only screen and (max-width:768px) {
	#movie li.soon {
		padding: 40px 0;
	}
	#movie li.soon h3 strong {
		display: inline-block;
		font-size: 1.5rem;
	}
	#movie li.soon a {
		margin: 15px auto;
	}
	#movie li.soon img {
		width: 75px;
	}
	#movie li.soon h4 {
		margin-bottom: 10px;
		font-size: 1.7rem;
	}
	#movie li.soon p {
		font-size: 1.3rem;
	}
}


/**
 * #exterior
 */
#exterior {
	padding-top: 70px;
}
#exterior h3 {
	margin-bottom: 0.6em;
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
}
#exterior .read {
	text-align: center;
}
#ext_box {
	position: relative;
	margin-top: 70px;
}
#ext_box .bg_prev,
#ext_box .bg_next {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	content: '';
	transition: background 1s;
}
#ext_box .bg_prev {
	left: 0;
}
#ext_box .bg_next {
	right: 0;
}
#ext_box .inner {
	display: flex;
	position: relative;
	max-width: 1200px;
	margin: auto;
	z-index: 1;
}
#ext_box .prev,
#ext_box .next {
	position: relative;
	min-width: 7.3%;
	cursor: pointer;
	z-index: 1;
}
#ext_box .prev p,
#ext_box .next p {
	position: absolute;
	top: 50%;
	left: 50%;
	letter-spacing: 0.2em;
	transform: translate(-50%, -50%) rotate(90deg);
	white-space: nowrap;
	font-size: 2.8rem;
	font-weight: 300;
	color: #fff;
}
#ext_box .prev div,
#ext_box .next div {
	margin-top: 70px;
	border-bottom: solid 1px #000;
	transition: transform 0.2s, border 0.8s, color 0.8s;
	transition-delay: 0;
}
#ext_box .prev div {
	text-align: right;
	transform: translateX(20%);
}
#ext_box .next div {
	transform: translateX(-20%);
}
#ext_box .prev:hover div {
	transition: transform 0.3s, border 0.8s, color 0.8s;
	transition-delay: 0;
	transform: translateX(40%);
}
#ext_box .next:hover div {
	transition: transform 0.3s, border 0.8s, color 0.8s;
	transition-delay: 0;
	transform: translateX(-40%);
}
#ext_box .current {
	position: relative;
	width: 100%;
	padding: 120px 0 60px 0;
	transition: background 1s;
}
#ext_box .current h4 {
	box-sizing: border-box;
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	padding-left: 0.2em;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.15em;
	font-size: 10.7rem;
	font-weight: 300;
	white-space: nowrap;
}
#ext_box .current .box {
	position: relative;
	left: 10%;
	margin: auto;
	width: 57.617%;
}
#ext_box .current .carousel {
	position: relative;
	margin-top: 45px;
}
#ext_box .current .carousel .btn_prev,
#ext_box .current .carousel .btn_next {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 54px;
	height: 39px;
	margin: auto;
	cursor: pointer;
}
#ext_box .current .carousel .btn_prev.inact,
#ext_box .current .carousel .btn_next.inact {
	opacity: 0.4;
	pointer-events: none;
}
#ext_box .current .carousel .btn_prev {
	left: 0;
	right: auto;
	transform: rotate(-180deg);
}
#ext_box .current .carousel_inner {
	width: 100%;/*calc(100% - 108px);*/
	margin: auto;
	overflow: hidden;
}
#ext_box .current .carousel ul {
	white-space: nowrap;
	width: 100%;
	overflow: visible;
}
#ext_box .current .carousel li {
	box-sizing: border-box;
	display: inline-block;
	width: 25%;
	padding: 0 5px;
	vertical-align: middle;
	cursor: pointer;
}
#ext_box .current .carousel li > div {
	box-sizing: border-box;
	border: solid 2px rgba(255,255,255,0.5);
	background: no-repeat center center / auto 50%;
	cursor: pointer;
	transform: border 0.6s;
}
#ext_box .current .carousel li div::before {
	display: block;
	padding-top: 60%;
	content: '';
}
#ext_box .current .carousel li div:hover {
	transform: border 0.3s;
	border: solid 2px rgba(255,255,255,1);
}
#ext_box .current .carousel li.act div {
	transform: border 0.3s;
	border: solid 4px rgba(255,255,255,1);
}

#ext_box .colors {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
}
#ext_box .colors li {
	position: relative;
	margin: 10px 0;
}
#ext_box .colors li div {
	position: relative;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	border: solid 3px #fff;
	border-radius: 100px;
	z-index: 1;
	cursor: pointer;
	transition: transform 0.3s;
}
#ext_box .colors li:hover div {
	transform: scale(1.15);
}
#ext_box .colors li.color0 div {
	background-color: #111111;
}
#ext_box .colors li.color1 div {
	background-color: #a10e0ef3;
}
#ext_box .colors li.color2 div {
	background-color: #582f0d;
}
#ext_box .colors li.color3 div {
	background-color: #cac3a5;
}
#ext_box .colors li.color4 div {
	background-color: #97958d;
}
#ext_box .colors li.color5 div {
	background-color: #8d8d8d;
}
#ext_box .colors li h3 {
	display: none;
	position: absolute;
	top: 50%;
	left: calc(100% - 10px);
	transform: translateY(-50%);
	background-color: #fff;
	border-radius: 4px;
	padding: 2px 8px 2px 15px;
	font-weight: 600;
	font-size: 1.5rem;
	white-space: nowrap;
}
#ext_box .colors li.act h3 {
	display: block;
}
@media only screen and (max-width:1240px) {
	#ext_box .prev p,
	#ext_box .next p {
		font-size: 4vw;
	}
}
@media only screen and (max-width:835px) {
	#ext_box .colors {
		left: 5%;
	}
	#ext_box .current h4 {
		font-size: 6rem;
	}
}
@media only screen and (max-width:768px) {
	h1{
		font-size:20px;
	}
	p{
		padding-left:15px;
		padding-right:15px;
	}
	#exterior {
		padding-top: 50px;
	}
	#exterior h3 {
		font-size: 1.6rem;
	}
	#ext_box {
		margin-top: 30px;
	}
	#ext_box .bg_prev,
	#ext_box .bg_next {
		display: none;
	}
	#ext_box .inner {
		display: block;
	}
	#ext_box .prev,
	#ext_box .next {
		display: none;
	}
	#ext_box .current {
		padding: 60px 0 40px 0;
	}
	#ext_box .current h4 {
		top: 25px;
		font-size: 4rem;
	}
	#ext_box .current .box {
		box-sizing: border-box;
		left: 0;
		width: 100%;
		padding: 0 35px;
	}
	#ext_box .current .carousel {
		display: none;
	}

	#ext_box .colors {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		margin-top: 20px;
		text-align: center;
	}
	#ext_box .colors li {
		position: relative;
		display: inline-block;
		margin: 10px 3px;
	}
	#ext_box .colors li div {
		position: relative;
		box-sizing: border-box;
		width: 45px;
		height: 45px;
		border: solid 3px #fff;
		border-radius: 100px;
		z-index: 1;
	}
	#ext_box .colors li h3 {
		top: calc(100% + 12px);
		left: 50%;
		right: auto;
		margin: auto;
		transform: translateX(-50%);
		border-radius: 4px;
		padding: 1px 6px 2px 6px;
		white-space: nowrap;
		font-size: 1.2rem;
	}
	#ext_box .colors li h3::before {
		display: block;
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		width: 0;
		height: 0;
		margin: auto;
		border: solid 4px transparent;
		border-bottom: solid 6px #fff;
		content: '';
	}
}
@media only screen and (max-width:374px) {
	#ext_box .current h4 {
		top: 10px;
		font-size: 3.5rem;
	}
	#ext_box .colors li {
		margin: 10px 1px;
	}
	#ext_box .colors li div {
		width: 35px;
		height: 35px;
	}
}

/**
 * #my
 */
#my {
	max-width: 1024px;
	padding: 45px 3% 80px 3%;
	margin: auto;
}
#my .inner {
	border: solid 2px #fff;
	padding: 5px;
}
#my .inner .inner {
	border: solid 1px #fff;
	padding: 45px 35px 25px 35px;
}
#my.on .inner {
	transition: border 2s ease-out 0.3s;
	border-color: #333;
}
#my .txt {
	margin: 2em 0 1.5em 0;
	text-align: center;
}
#my .img {
	text-align: center;
}
#my .img a {
	display: inline-block;
	transition: transform 0.2s ease-in;
}
#my .img a:hover {
	transform: scale(1.05);
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media only screen and (max-width:768px) {
	#my {
		padding: 30px 15px 25px 15px;
	}
	#my .inner {
		padding: 4px;
	}
	#my .inner .inner {
		padding: 20px 12px 25px 12px;
	}
}

.btns a {
	display: inline-block;
	padding: 34px 50px;
	margin: 0 18px 0 0;
	background-color: #333;
	border-radius: 1000px;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.3s ease-out;
	vertical-align: bottom;
}
.btns a:hover {
	opacity: 0.6;
}
.btns a span {
	display: inline-block;
}
.btns a.btn_product span {
	padding-right: 1.2em;
}
.btns a.btn_direct {
	padding: 26px 30px 25px 30px;
	margin: 0;
	background-color: #ffe600;
	color: #333;
}
.btns a.btn_direct span {
	position: relative;
	line-height: 1.4;
	padding: 0 1.2em 0 2.6em;
}
.btns a.btn_direct span::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 10px;
	margin: auto;
	content: '';
}
@media only screen and (max-width:768px) {
	.btns a {
		box-sizing: border-box;
		display: block;
		padding: 21px;
		margin: 0;
		text-align: center;
		font-size: 1.4rem;
	}
	.btns a + a,
	.btns a:last-child {
		margin-top: 10px;
	}
	.btns a.btn_direct {
		padding: 15px 10px 13px 10px;
	}
}

/**
 * #product
 */
#product {
	background-color: #eff5f4;
	padding: 140px 3% 120px 3%;
}
#product .inner {
	box-sizing: border-box;
	max-width: 1660px;
	background-color: #fff;
	padding: 0 3%;
	margin: auto;
}
#product .inner .inner {
	position: relative;
	max-width: 1200px;
	margin: auto;
	padding-bottom: 120px;
}
#product h2 {
	transform: translateY(-50%);
	text-align: left;
}
#product h3.ttl {
	position: relative;
	letter-spacing: 0.2em;
	font-size: 4.2rem;
}
#product h3.ttl::after {
	position: absolute;
	bottom: -0.2em;
	left: 0;
	width: 20px;
	height: 3px;
	background-color: #ffe600;
	content: '';
}
#product h4 {
	letter-spacing: 0.2em;
	font-size: 4.2rem;
}
#product .img0 {
	position: absolute;
	top: -25px;
	left: 55%;
	width: 55vw;
	max-width: 1050px;
	min-width: 570px;
}
#product .content0 .txt {
	width: 50%;
}
#product .content0 p {
	margin-top: 2em;
}
#product .btns {
	margin-top: 3em;
}
@media only screen and (max-width:1240px) and (min-width:769px) {
	#product .btns {
		margin-top: 4em;
		white-space: nowrap;
	}
	#product .btns a {
		box-sizing: border-box;
		text-align: center;
		margin: 0;
		width: 96%;
	}
	#product .btns a.btn_product {
		margin-right: 6%;
	}
}
@media only screen and (max-width:768px) {
	#product {
		padding: 55px 15px 50px 15px;
		font-size: 1.3rem;
	}
	#product .inner {
		padding: 0 20px 25px 20px;
	}
	#product .inner .inner {
		padding: 0;
	}
	#product h2 {
		text-align: center;
	}
	#product h3.ttl {
		font-size: 2.6rem;
	}
	#product h3.ttl::after {
		width: 25px;
	}
	#product h4 {
		letter-spacing: 0.2em;
		font-size: 4.2rem;
	}
	#product .img0 {
		position: static;
		top: 0;
		left: 0;
		width: 130%;
		min-width: 0;
		margin-top: -20px;
	}
	#product .content0 .txt {
		width: 100%;
	}
	#product .content0 .txt h3 {
		margin: 2em 0;
		text-align: center;
	}
	#product .content0 .txt h3 img {
		width: 125px;
	}
	#product .content0 p {
		margin-top: 2em;
	}
	#product .btns {
		margin-top: 3em;
	}
}


/**
 * #spec
 */
#spec {
	padding: 40px 0 220px 0;
}
#spec ol {
	box-sizing: border-box;
	max-width: 1660px;
	padding: 0 3%;
	margin: auto;
}
#spec li {
	position: relative;
	height: 650px;
	margin-top: 170px;
}
#spec li:first-child {
	margin-top: 80px;
}
#spec li b {
	position: absolute;
	left: 95px;
	top: -70px;
	line-height: 1;
	font-size: 20rem;
	font-weight: 300;
	mix-blend-mode: multiply;
	filter: blur(3px);
	transform: scale(1.4);
	opacity: 0;
	z-index: 3;
}
#spec li.on b  {
	transition: all 0.6s ease-in;
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
}
#spec li:nth-child(even) b {
	left: auto;
	right: 95px;
}
#spec li h3 {
	position: absolute;
	top: 20px;
	line-height: 1;
	font-size: 7.9rem;
	font-weight: 300;
	transform-origin: 0 0;
	transform: rotate(90deg) translateY(-100%);
	opacity: 0;
	z-index: 3;
}
#spec li:nth-child(even) h3 {
	right: 0;
	transform:  translateX(100%) rotate(90deg);
}
#spec li.on h3 {
	transition: all 1s ease-out 0.3s;
	top: 0;
	opacity: 1;
}
#spec li .img {
	position: absolute;
	width: 64%;
	height: 100%;
	left: 165px;
	cursor: pointer;
}
#spec li:nth-child(even) .img {
	left: auto;
	right: 165px;
}
#spec li .img .bg {
	position: absolute;
	top: 160px;
	left:0;
	width: 0;
	height: calc(100% - 100px);
	z-index: 1;
}
#spec li:nth-child(even) .img .bg,
#spec li:nth-child(even) .img .slide > div {
	position: absolute;
	left: auto;
	right: 0
}
#spec li.on .img .bg {
	transition: width 1s cubic-bezier(0.9, 0.2, 0.2, 0.9);
	width: calc(100% + 60px);
}
#spec li .img .slide {
	z-index: 2;
}
#spec li.on .img .slide div {
	transition-delay: 0.1s;
}
#spec li .img .slide div::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(51,51,51,0);
	content: '';
	z-index: 3;
	transition: background 0.3s;
}
#spec li .img .slide:hover div::before {
	background-color: rgba(51,51,51,0.3);
}
#spec li .img .slide::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 16px 60px;
	border-radius: 1000px;
	color: #fff;
	content: '詳しく見る';
	z-index: 3;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.5);
	transition: all 0.3s;
	pointer-events: none;
}
#spec li .img .slide:hover::after {
	transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
#spec li .img .slide img {
	transition: transform 0.3s ease-out;
}
#spec li .img .slide:hover img {
	transition: transform 0.5s ease-out;
	transform: translate(-50%, -50%) scale(1.03);
}

#spec li .img p {
	position: absolute;
	bottom: 60px;
	z-index: 4;
}
#spec li:nth-child(odd) .img p {
	right: -120px;
}
#spec li:nth-child(even) .img p {
	left: -135px;
}

#spec li:nth-child(1) .img p {
	right: 30px;
}

#spec li .img p span {
	display: inline-block;
	padding: 5px 10px;
	margin-top: 6px;
	background-color: #fff;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(15px);
}
#spec li.on .img p span {
	transition: all 0.6s ease-out;
	opacity: 1;
	transform: translateY(0);
}
#spec li.on .img p span:nth-of-type(1) {
	transition-delay: 1s;
}
#spec li.on .img p span:nth-of-type(2) {
	transition-delay: 1.15s;
}
#spec li.on .img p span:nth-of-type(3),
#spec li.on .img p span:nth-of-type(4) {
	transition-delay: 1.3s;
}

#spec li:nth-child(3n+1) b {
	color: #613008;
}
#spec li:nth-child(3n+1) .img .bg {
	background-color: #8b3318c4;
}

#spec li:nth-child(3n+2) b {
	color: #a10f89;
}
#spec li:nth-child(3n+2) .img .bg {
	background-color: #d7dae6;
}

#spec li:nth-child(3n+3) b {
	color: #f39dab;
}
#spec li:nth-child(3n+3) .img .bg {
	background-color: #dfbdc5;
}

#spec li:nth-child(4) .img {
	right: 95px;
}
#spec li:nth-child(4) b {
	right: 35px;
}
#spec li:nth-child(3) .img,
#spec li:nth-child(7) .img {
	left: 95px;
}
#spec li:nth-child(3) b,
#spec li:nth-child(7) b {
	left: 35px;
}

#spec li:nth-child(4) .img .product {
	position: absolute;
	bottom: 25px;
	right: 25px;
	width: 500px;
	max-width: 60%;
	opacity: 0;
	transform: scale(1.05);
	transition: all 1.5s ease-in-out 1s;
	pointer-events: none;
	z-index: 3;
}
#spec li:nth-child(4).on .img .product  {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
}
@media only screen and (max-width:768px) {
	#spec {
		padding: 0 0 20px 0;
	}
	#spec ol {
		padding: 0 15px;
	}
	#spec li {
		height: auto;
		margin-top: 45px;
	}
	#spec li:first-child {
		margin-top: 45px;
	}
	#spec li b {
		left: 0;
		top: -30px;
		font-size: 10rem;
	}
	#spec li.on b  {
		transition: all 0.6s ease-in;
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
	#spec li:nth-child(even) b {
		right: 0;
	}
	#spec li h3 {
		position: relative;
		top: 0;
		margin-bottom: 0.5em;
		font-size: 2.5rem;
		transform-origin: 0 0;
		transform: none;
		opacity: 0;
		z-index: 3;
	}
	#spec li:nth-child(odd) h3 {
		text-align: right;
	}
	#spec li:nth-child(even) h3 {
		right: auto;
		text-align: left;
		transform:  none;
	}
	#spec li.on h3 {
		transition: all 1s ease-out 0.3s;
		top: 0;
		opacity: 1;
	}
	#spec li .img {
		position: relative;
		width: 100%;
		left: 0;
	}
	#spec li .img .slide {
		height: 57vw;
	}
	#spec li:nth-child(even) .img {
		left: auto;
		right: 0;
	}
	#spec li .img .bg {
		position: absolute;
		top: 20%;
		left: auto;
		right: auto;
		width: 0;
		height: 80%;
	}
	#spec li.on .img .bg {
		width: calc(100% + 15px);
	}
	#spec li:nth-child(odd) .img .bg {
		left: -15px;
	}
	#spec li:nth-child(even) .img .bg {
		right: -15px;
	}
	#spec li .img .slide::after,
	#spec li .img:hover .slide::after {
		top: auto;
		left: auto;
		right: 8px;
		bottom: 8px;
		padding: 0;
		width: 26px;
		height: 26px;
		content: '';
		transform: none;
		pointer-events: none;
	}
	#spec li.on .img .slide::after {
		transition-delay: 1.2s;
		opacity: 1;
	}
	#spec li:nth-child(even) .img .slide::after,
	#spec li:nth-child(even) .img:hover .slide::after {
		left: 8px;
		right: auto;
	}
	#spec li .img .slide div::before {
		display: none;
	}

	#spec li .img p {
		position: relative;
		bottom: 0;
	}
	#spec li .img p span {
		white-space: normal;
	}
	#spec li .img:before, #spec li .img:after {
		content: "";
		display: table;
	}
	#spec li .img:after { clear: both; }
	#spec li:nth-child(even) p {
		float: right;
	}
	#spec li:nth-child(odd) .img p,
	#spec li:nth-child(even) .img p {
		right: 0;
		left: auto;
		padding: 8px 0;
	}
	#spec li .img p span {
		padding: 0 6px;
		margin-top: 3px;
		font-size: 1.5rem;
	}

	#spec li:nth-child(4) .img {
		right: 0;
	}
	#spec li:nth-child(4) b {
		right: 0;
	}
	#spec li:nth-child(3) .img,
	#spec li:nth-child(7) .img {
		left: 0;
	}
	#spec li:nth-child(3) b,
	#spec li:nth-child(7) b {
		left: 0;
	}

	#spec li:nth-child(4) .img .product {
		top: 55vw;
		right: 10px;
		max-width: 50%;
		transform: scale(1.05) translateY(-100%);
	}
	#spec li:nth-child(4).on .img .product  {
		transform: scale(1) translateY(-100%);
	}
}

/**
 * #accessory
 */
#accessory {
	background-color: #e4e4e4;
	padding: 120px 3%;
}
#accessory .inner {
	box-sizing: border-box;
	max-width: 1660px;
	background-color: #fff;
	padding: 0 3%;
	margin: auto;
}
#accessory .inner .inner {
	position: relative;
	max-width: 1200px;
	margin: auto;
}
#accessory h2 {
	transform: translateY(-50%);
}
#accessory h3.ttl,
#pickup h3.ttl {
	position: relative;
	letter-spacing: 0.2em;
	font-size: 4.2rem;
	margin-top:20px;
}
#accessory h4.ttl {
	position: relative;
	margin-bottom: 0.5em;
	letter-spacing: 0.2em;
	font-size: 3.2rem;
}
#accessory h3.ttl::after,
#accessory h4.ttl::after,
#pickup h3.ttl::after{
	position: absolute;
	bottom: -0.2em;
	left: 0;
	width: 20px;
	height: 3px;
	background-color: #ffe600;
	content: '';
}

#accessory .btns {
	margin: 2em 0 1em 0;
}
#accessory .btns a {
	padding-left: 30px;
	padding-right: 30px;
}

#accessory .content1 {
	padding: 0 4.6% 80px 4.6%;
}
#accessory .content1 .box {
	margin-top: 45px;
	background-color: #f8f8f8;
}
#accessory .content1 .box .cf {
	background-color: #f8f8f8;
	padding: 30px 5.859%;
	text-align:center;
}
#accessory .content1 .box figure {
	float: left;
	width: 43%;
	padding-top: 30px;
}
#accessory .content1 .box figure img {
	width: 77%;
}
#accessory .content1 .box .txt {
	float: left;
	width: 57%;
}
#accessory .content1 .box h4 {
	margin: 0.5em 0;
	font-size: 3.2rem;
}
#accessory .content2 {
	margin-top: 0;
	padding: 0 4.6% 70px 4.6%;
}
#accessory .content2 figure {
	float: left;
	width: 50%;
	text-align: left;
}
#accessory .content2 figure img {
	width: 84%;
}
#accessory .content2 .txt {
	float: right;
	width: 50%;
}
#accessory .content2 h3 {
	margin-top: 1em;
	font-size: 3.4rem;
}
#accessory .content2 p {
	margin-top: 2em;
}

#accessory .scroll li {
	cursor: pointer;
}
#accessory .scroll li::after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 47px;
	height: 47px;
	margin: auto;
	border-radius: 100px;
	content: '';
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s;
	pointer-events: none;
}
#accessory .scroll li:hover::after {
	transition: opacity 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 1;
	transform: scale(1);
}
#accessory .price{
		border-collapse: collapse;
		width: 100%;
}
#accessory .price th,#accessory .price td {
		padding: 5px;
		border: solid 1px #333;
}
#accessory .price td{
	background:#FFF;
}
#accessory .price .nowrap {
		white-space: nowrap;
}
}
@media only screen and (max-width:1240px) and (min-width:769px) {
	#accessory .btns a {
		box-sizing: border-box;
		display: block;
		text-align: center;
		width: 100%;
	}
	#accessory .btns a + a {
		margin-top: 20px;
	}
}
@media only screen and (max-width:768px) {
	#accessory {
		padding: 75px 15px 50px 15px;
		font-size: 1.3rem;
	}
	#accessory .inner {
		padding: 0 20px;
	}
	#accessory .inner .inner {
		padding: 0;
	}
	#accessory h2 {
		margin-bottom: 0;
		text-align: center;
	}
	#accessory h3.ttl,
	#pickup h3.ttl {
		font-size: 2.6rem;
	}
	#accessory h3.ttl::after,
	#accessory h4.ttl::after,
	#pickup h3.ttl::after {
		width: 25px;
	}
	#accessory h4.ttl {
		margin-top: 1em;
		letter-spacing: 0.2em;
		font-size: 2.6rem;
	}
	#accessory .img0 {
		position: static;
		top: 0;
		left: 0;
		width: 130%;
		max-width: 1050px;
		margin-top: -20px;
	}
	#accessory .content0 .txt {
		width: 100%;
	}
	#accessory .content0 .txt h3 {
		margin: 2em 0;
		text-align: center;
	}
	#accessory .content0 .txt h3 img {
		width: 125px;
	}
	#accessory .content0 p {
		margin-top: 2em;
	}
	#accessory .btns {
		margin-top: 3em;
	}

	#accessory .content1 {
		padding: 0 0 25px 0;
	}
	#accessory .content1 .box {
		margin-top: 20px;
	}
	#accessory .content1 .box + .box {
		margin-top: 20px;
	}
	#accessory .content1 .box .cf {
		padding: 35px 25px;
	}
	#accessory .content1 .box figure {
		float: none;
		padding-top: 0;
		width: 100%;
		text-align: center;
	}
	#accessory .content1 .box figure img {
		width: 80%;
	}
	#accessory .content1 .box .txt {
		float: none;
		width: 100%;
	}
	#accessory .content1 .box h4 {
		margin: 1em 0 0.5em 0;
		font-size: 2.3rem;
	}

	#accessory .content2 {
		margin-top: 0;
		padding: 25px 0;
	}
	#accessory .content2 figure {
		float: none;
		width: 100%;
		text-align: center;
	}
	#accessory .content2 figure img {
		width: 80%;
	}
	#accessory .content2 .txt {
		float: none;
		width: 100%;
	}
	#accessory .content2 h3 {
		margin-top: 1em;
	}
	#accessory .content2 p {
		margin-top: 2em;
	}

	#accessory .scroll li {
		cursor: pointer;
	}
	#accessory .scroll li img {
		width: 135px;
	}
	#accessory .scroll li::after {
		top: 8px;
		bottom: auto;
		left: auto;
		right: 8px;
		width: 26px;
		height: 26px;
		margin: 0;
		background-size: 12px;
		opacity: 1;
		transform: scale(1);
	}
	#accessory .price tr,
  #accessory .price th,
  #accessory .price td {
    display: block; /* セルを縦に */
    border: none; /* 線をリセット */
  }
  /* 以下で線を再設定 */
  #accessory .price {
    border: solid 2px #000;
    border-top: none;
  }
  #accessory .price th {
    border-top: solid 2px #000;
  }
  #accessory .price td {
    border-top: solid 1px #000;
  }
}


/**
 * #pickup
 */
#pickup {
	margin: 200px 0 0 0;
	background-color: #f6f6f2;
}
#pickup .inner {
	max-width: 1660px;
	margin: auto;
}
#pickup h2 {
	transform: translateY(-50%);
	margin-bottom: 0;
}
#pickup ul {
	box-sizing: border-box;
	max-width: 1024px;
	margin: auto;
	padding: 0 0 50px 0;
}
#pickup li {
	box-sizing: border-box;
	float: left;
	width: 33.333%;
	padding: 10px 10px 35px 10px;
}
#pickup li:nth-child(3n+1) {
	clear: both;
	transition-delay: 0s;
}
#pickup li:nth-child(3n+2) {
	transition-delay: 0.1s;
}
#pickup li:nth-child(3n+3) {
	transition-delay: 0.2s;
}
#pickup li a,
#pickup li span {
	display: block;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.3s;
}
#pickup li a:hover,
#pickup li span:hover {
	opacity: 0.6;
}
#pickup li img {
	width: 100%;
}
#pickup li h4 {
	display: inline-block;
	margin: 1em 0 0.6em 0;
	width: 80px;
	border: solid 1px #333;
	border-radius: 100px;
	text-align: center;
	font-size: 1.2rem;
}
#pickup li h3 {
	font-size: 1.8rem;
	font-weight: 700;
}
#pickup li h3::after {
	display: inline-block;
	width: 12px;
	height: 10px;
	margin: auto;
	content: '';
}
#pickup li p {
	margin-top: 0.5em;
	line-height: 1.5;
	font-size: 1.4rem;
}
@media only screen and (max-width:768px) {
	#pickup {
		margin: 70px 0 0 0;
	}
	#pickup ul {
		box-sizing: border-box;
		max-width: 1024px;
		margin: auto;
		padding: 0 15px;
	}
	#pickup li {
		float: auto;
		width: 100%;
		padding: 0 0 30px 0;
	}
	#pickup li:nth-child(3n+1),
	#pickup li:nth-child(3n+2),
	#pickup li:nth-child(3n+3) {
		transition-delay: 0s;
	}
	#pickup li h3 {
		font-size: 1.7rem;
	}
	#pickup li p {
		font-size: 1.3rem;
	}
}


/**
 * #modal
 */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
}
.modal .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
}
.modal .btn_close {
	box-sizing: border-box;
	position: absolute;
	top: -70px;
	right: 0;
	width: 60px;
	height: 60px;
	border-radius: 100px;
	border: solid 1px #fff;
	cursor: pointer;
	transition: transform 0.2s ease-in;
	z-index: 1;
}
.modal .btn_close:hover {
	transform: scale(1.1);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal .btn_close::before,
.modal .btn_close::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 17px;
	height: 1px;
	background-color: #fff;
	margin: auto;
	content: '';
}
.modal .btn_close::before {
	transform: rotate(45deg);
}
.modal .btn_close::after {
	transform: rotate(-45deg);
}
#modal .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 100%;
	transform: translate(-50%, -50%) !important;
	text-align: center;
}
#modal .inner img {
	max-width: none;
}
#modal .inner .btn_prev,
#modal .inner .btn_next {
	position: absolute;
	top: 0;
	width: 40px;
	height: 100%;
	cursor: pointer;
}
#modal .inner .btn_prev {
	left: -40px;
}
#modal .inner .btn_next {
	right: -40px;
}
#modal .inner .btn_prev::before,
#modal .inner .btn_next::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 30px;
	height: 30px;
	margin: auto;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	cursor: pointer;
	transition: transform 0.2s ease-in;
	content: '';
}
#modal .inner .btn_prev::before {
	transform: scaleX(0.95) rotate(-135deg);
}
#modal .inner .btn_next::before {
	transform: scaleX(0.95) rotate(45deg);
}
#modal .inner .btn_prev:hover::before {
	transform: scaleX(0.95) rotate(-135deg) scale(1.15);
}
#modal .inner .btn_next:hover::before {
	transform: scaleX(0.95) rotate(45deg) scale(1.15);
}
@media only screen and (max-width:768px) {
	.modal .btn_close {
		top: -50px;
		right: 0;
		width: 38px;
		height: 38px;
	}
	.modal .btn_close:hover {
		transform: scale(1.1);
		transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.modal .btn_close::before,
	.modal .btn_close::after {
		width: 15px;
	}
	#modal .inner .btn_prev,
	#modal .inner .btn_next {
		width: 25px;
	}
	#modal .inner .btn_prev {
		left: -20px;
	}
	#modal .inner .btn_next {
		right: -20px;
	}
	#modal .inner .btn_prev::before,
	#modal .inner .btn_next::before {
		width: 20px;
		height: 20px;
	}
}

/**
 * #movie_modal
 */
#movie_modal .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	transform: translate(-50%, -50%) !important;
	text-align: center;
}
#movie_modal .youtube {
	position: relative;
}
@media only screen and (max-width:768px) {
	#movie_modal .inner {
		width: calc(100vw - 30px);
	}
}

/**
 * #spec_modal
 */
#spec_modal .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1024px;
	max-width: 100%;
	transform: translate(-50%, -50%) !important;
	background-color: #fff;
}
#spec_modal .btn_close {
	top: 20px;
	right: 20px;
	border: solid 1px #333;
}
#spec_modal .btn_close::before,
#spec_modal .btn_close::after {
	background-color: #333;
}

#spec_modal li::before {
	position: absolute;
	display: block;
	width: 37.89%;
	height: 100%;
	content: '';
}
#spec_modal .img {
	position: relative;
	float: left;
	width: 50%;
}
#spec_modal b {
	position: absolute;
	left: 20px;
	line-height: 1;
	font-size: 17rem;
	font-weight: 300;
	mix-blend-mode: multiply;
}
#spec_modal h3 {
	position: relative;
	padding: 60px 0 15px 40px;
	font-size: 2rem;
	letter-spacing: 0.2em;
}
#spec_modal .ph {
	background: no-repeat center center / cover;
}
#spec_modal .ph::before {
	display: block;
	padding-top: 62%;
	content: '';
}
#spec_modal .txt {
	box-sizing: border-box;
	position: relative;
	float: left;
	width: 50%;
	margin-top: 100px;
	padding: 0 20px;
}
#spec_modal .txt::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
	content: '';
}
#spec_modal .txt > div {
	padding: 0 20px 30px 20px;
	height: 335px;
	overflow: auto;
}
#spec_modal .txt > div > *:last-child {
	padding: 0 0 15px 0;
}
#spec_modal h2 {
	margin-bottom: 0.8em;
	font-size: 2.4rem;
	line-height: 1.9;
}
#spec_modal h2 span {
	position: relative;
	display: inline-block;
}
#spec_modal h2 span::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #333;
	content: '';
}
#spec_modal .note {
	display: block;
	line-height: 2;
	font-size: 0.75em;
}
#spec_modal .btns {
	position: relative;
	padding: 30px 0 60px 0;
	text-align: center;
}
#spec_modal .btns a {
	box-sizing: border-box;
	display: inline-block;
	min-width: 325px;
	padding: 19px 50px;
	margin: 0 18px 0 0;
	background-color: #333;
	border-radius: 1000px;
	text-decoration: none;
	color: #fff;
	transition: transform 0.2s ease-in;
}
#spec_modal .btns a:hover {
	transform: scale(1.05);
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#spec_modal .btns a[target="_blank"] span {
	display: inline-block;
	padding-right: 1.2em;
}
#spec_modal li:nth-child(3n+1) b {
	color: #e3e3d8;
}
#spec_modal li:nth-child(3n+1)::before {
	background-color: #f6f6f2;
}

#spec_modal li:nth-child(3n+2) b {
	color: #ffdad9;
}
#spec_modal li:nth-child(3n+2)::before {
	background-color: #fff6f6;
}

#spec_modal li:nth-child(3n+3) b {
	color: #c5e5dd;
}
#spec_modal li:nth-child(3n+3)::before {
	background-color: #eff5f4;
}
@media only screen and (max-width:768px) {
	#spec_modal .inner {
		width: calc(100% - 36px);
		max-height: 90vh;
	}
	#spec_modal .btn_close {
		top: 10px;
		right: 8px;
	}
	#spec_modal ol {
		display: block;
		width: 100%;
		max-height: calc(90vh - 50px);
		margin: auto;
		overflow: auto;
	}
	#spec_modal li::before {
		display: none;
	}
	#spec_modal .img {
		box-sizing: border-box;
		float: none;
		width: 100%;
		padding: 0 17px;
	}
	#spec_modal b {
		top: 10px;
		left: 10px;
		font-size: 10rem;
	}
	#spec_modal h3 {
		padding: 45px 0 12px 30px;
		font-size: 1.4rem;
	}
	#spec_modal .ph {
		background: no-repeat center center / cover;
	}
	#spec_modal .ph::before {
		display: block;
		padding-top: 62%;
		content: '';
	}
	#spec_modal .txt {
		box-sizing: border-box;
		float: none;
		width: 100%;
		margin: 0;
		padding: 5px 17px 17px 17px;
	}
	#spec_modal .txt::after {
		display: none;
	}
	#spec_modal .txt > div {
		padding: 0;
		height: auto;
		overflow: visible;
	}
	#spec_modal .txt > div > *:last-child {
		padding: 0;
	}
	#spec_modal h2 {
		padding: 10px 0 15px 0;
		font-size: 1.5rem;
	}
	#spec_modal .btns {
		box-sizing: border-box;
		padding: 10px 17px 35px 17px;
	}
	#spec_modal .btns a {
		min-width: 0;
		width: 100%;
		padding: 19px 20px;
		margin: 0;
		font-size: 1.4rem;
	}

	#spec_modal li:nth-child(3n+1) .img {
		background-color: #f6f6f2;
	}
	#spec_modal li:nth-child(3n+2) .img {
		background-color: #fff6f6;
	}
	#spec_modal li:nth-child(3n+3) .img {
		background-color: #eff5f4;
	}
}

/**
 * #browser_modal
 */
#browser_modal .inner {
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1024px;
	max-width: 100%;
	padding: 0 30px;
	transform: translate(-50%, -50%) !important;
}
#browser_modal .box {
	position: relative;
	background-color: #fff;
	padding: 60px 80px;
	display: flex;
}
#browser_modal .box h3 {
	padding-right: 10%;
	font-weight: bold;
	font-size: 1.2em;
}
#browser_modal .box .pc > div {
	display: flex;
	justify-content: space-between;
}
#browser_modal .box .pc p {
	margin-top: 1.5em;
}
@media only screen and (max-width:768px) {
	#browser_modal .inner {
		padding: 0;
		width: calc(100vw - 30px);
	}
	#browser_modal .box {
		display: block;
		padding: 30px 40px;
	}
	#browser_modal .box h3 {
		padding: 0;
		margin-bottom: 0.5em;
		font-weight: bold;
		text-align: center;
	}
	#browser_modal .box .pc > div {
		display: block;
		justify-content: space-between;
	}
	#browser_modal .box .pc p {
		margin-top: 1.5em;
	}
}


/**
 * footer
 */
footer {
	position: relative;
	padding-top: 60px;
	text-align: center;
	font-size: 1.4rem;
}
footer .pagetop {
	position: absolute;
	right: 30px;
	bottom: 110px;
	width: 80px;
	height: 80px;
	border-radius: 100px;
}
footer a,
footer .pagetop {
	transition: opacity 0.3s;
}
footer a:hover,
footer .pagetop:hover {
	opacity: 0.6;
}
footer .sns {
	margin-bottom: 40px;
}
footer .sns li {
	display: inline-block;
	margin: 10px;
}
footer .sns li a {
	display: block;
	width: 60px;
	height: 60px;
	background: #333 no-repeat center center / 25px auto;
	border-radius: 100px;
	white-space: nowrap;
	text-indent: 120%;
	overflow: hidden;
}
footer .sns li a.btn_fb {
}
footer .sns li a.btn_tw {
}
footer .sns li a.btn_line {
}
footer nav {
	margin-bottom: 60px;
}
footer nav li {
	position: relative;
	display: inline-block;
	padding: 0 28px;
}
footer nav li::before {
	position: absolute;
	display: inline-block;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 15px;
	margin: auto;
	background-color: #333;
	content: '';
}
footer nav li:first-child:before {
	display: none;
}
footer nav li a {
	display: inline-block;
	text-decoration: underline;
	line-height: 1;
}
footer .copy {
	border-top: solid 1px #e1e1e1;
	padding: 30px 0;
	font-size: 1.2rem;
}
@media only screen and (max-width:768px) {
	footer {
		padding-top: 45px;
		font-size: 1.1rem;
	}
	footer .pagetop {
		top: -30px;
		right: 15px;
		bottom: auto;
		width: 60px;
		height: 60px;
		background-size: 17px auto; 
	}
	footer .sns {
		margin-bottom: 30px;
	}
	footer .sns li {
		margin: 5px;
	}
	footer nav {
		margin-bottom: 30px;
	}
	footer nav li {
		margin: 10px 0;
		padding: 0 15px;
	}
	footer nav li img {
		width: 115px;
	}
	footer nav li::before {
		height: 12px;
	}
	footer .copy {
		padding: 15px 0;
		font-size: 1rem;
	}
}