body{
	background: #000;
	color: #000;
	font-family: "Montserrat","微軟正黑體","蘋果儷中黑",sans-serif;
	font-size: 16px;
}

h1,h2,h3,h4,h5,h6,p{
	font-family: "Montserrat","微軟正黑體","蘋果儷中黑",sans-serif;
	margin: 0;
	font-weight: 600;
	line-height: 150%;
}

a{
	color: inherit;
	text-decoration: underline;
	transition: all 0.3s;
	cursor: pointer;
}

a:hover{
	color: red;
}

a img{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: all 0.3s;
}

a:hover img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transform: translateY(-10px);
}

.container{
	margin: 40px auto;
}

@media (min-width: 1200px){
	.container {
	    width: 1280px;
	}
}


.paper-texture{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 100;
	background-image: url(../images/ricepaper.png);
	pointer-events: none;
	mix-blend-mode: multiply;
}

.saw-tooth-border {
  background-color: #fff;
  background-image: linear-gradient(135deg, #000 50%, transparent 50%), linear-gradient(225deg, #000 50%, transparent 50%), linear-gradient(45deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%), linear-gradient(135deg, #000 50%, transparent 50%), linear-gradient(45deg, #000 50%, transparent 50%), linear-gradient(-135deg, #000 50%, transparent 50%), linear-gradient(-45deg, #000 50%, transparent 50%);
  background-position: top left, top left, bottom left, bottom left, top left, top left, top right, top right;
  background-size: 12px 12px;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-y, repeat-y, repeat-y, repeat-y;
}

.news-paper-content{
	padding: 50px;
	width: 100%;
	position: relative;
}

.border-dotted{
	border: 2px dotted #000;
	position: relative;
	margin-bottom: 30px;
}
.border-dashed{
	border: 2px dashed #000;
	position: relative;
	margin-bottom: 30px;
}
.border-solid{
	border: 2px solid #000;
	position: relative;
	margin-bottom: 30px;
}
.border-double{
	border: 5px double #000;
	position: relative;
	margin-bottom: 30px;
}

.big-date{
	font-weight: 700;
	font-size : 72px;
	line-height : 100%;
	letter-spacing : 8.4px;
	color : #000000;
	text-align: center;
}

.date-dash{
	width: 10px;
	height: 40px;
	background: #000;
	margin: 0 auto;
}

.v-text{
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.block-date{
	font-weight: 700;
	flex-direction: column;
}

.block-date .title{
	border: 2px solid #000;
	padding: 10px;
	height: 250px;
	font-size : 24px;
	letter-spacing : 7.68px;
	float: left;
	text-align: center;
}

.block-date .subtitle{
	float: left;
	width: 250px;
	padding-top: 20px;
	position: relative;
}

.block-date .logo{
	position: absolute;
	right: 0;
	bottom: -40px;
}

.block-date .subtitle p::after{
	content: "\A";
	width: 184px;
	height: 118px;
	background: url(../images/marker-01@2x.png) center center no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	mix-blend-mode: multiply;
}

.block-date .subtitle p.small-marker::after{
	background-image: url(../images/marker-02@2x.png);
	width: 160px;
	height: 86px;
}

.block-date .subtitle > div{
	height: 115px;
	position: relative;
}

.block-date .subtitle > div:first-child{
	margin-bottom: 20px;
}

.block-date .subtitle span{
	color: #fff;
	font-size : 24px;
	letter-spacing : 1.2px;
	background: #000;
	height: 100%;
	padding: 0 5px;
	text-align: center;
	display: inline-block;
}

.block-date .subtitle p{
	display: inline-block;
	font-size : 24px;
	line-height : 36px;
	letter-spacing : 0.6px;
	margin: 0;
	vertical-align: top;
	padding-left: 10px;
	position: relative;
}

.block-date .note{
	font-weight: 600;
	margin-top: 20px;
}

.flex-center{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.clear{
	clear: both;
}

.first-row{
	height: 617px;
}

.second-row, .third-row{
	height: 350px;
}

.sale::after{
	content: "\A";
	width: 93px;
	height: 93px;
	background: url(../images/sale@2x.png) center center no-repeat;
	background-size: cover;
	position: absolute;
	top: -5px;
	left: -5px;
	z-index: 2;
}

.sale.big::after{
	background-image: url(../images/sale-big@2x.png);
	width: 163px;
	height: 163px;
}

.block-main-book{
	padding: 20px;
}

.block-main-book p, .block-main-book h2{
	float: right;
	height: 100%;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
}

.block-main-book p{
	float: left;
}

.block-main-book h2{
	font-weight: 700;
	font-size: 24px;
}

.block-main-book a{
	position: absolute;
	left: 15%;
	top: 15%;
	width: 60%;
}

.block-main-book a img{
	width: 100%;
	height: auto;
}

.block-main-title.first-row{
	height: 612px;
}

.block-main-title h1{
	position: absolute;
	top: 20px;
	right: 20px;
}

.block-main-title .main-title-en{
	position: absolute;
	top: 20px;
	left: 12px;
}

.block-main-title .exclamation-mark{
	position: absolute;
	bottom: -20px;
	right: -20px;
}

.block-news{
	background: #000;
	color: #fff;
	justify-content: space-around;
	padding: 0 10px;
}

.block-news .book{
	width: 135px;
}

.block-news .book p{
	height: 100px;
	float: right;
	margin-top: 15px;
}

.block-point{
	padding: 20px;
	justify-content: space-around;
	align-items: flex-start;
}

.block-point p{
	letter-spacing: 1px;
}

.block-point a{
	font-family: 'Garamond', 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'メイリオ', Meiryo, serif;
	font-size: 18px;
}

.block-point h4{
	font-size: 24px;
	margin-bottom: 10px;
}

.block-point h4 span{
	font-size: 48px;
}

.sixty-six-off{
	position: absolute;
	right: -25px;
	bottom: -20px;
}

.block-story .cover{
	height: 247px;
	background: url(../images/story@2x.jpg) center center no-repeat;
	background-size: cover;
}

.block-story p{
	height: 340px;
}
.block-story .flex-center{
	padding: 20px 0;
	align-items: flex-start;
	width: 100%;
	text-align: center;
}

.block-story .flex-center > div{
	position: relative;
	display: inline-block;
	margin: 0 5px;
	text-align: left;
}

.block-story .flex-center > div > a{
	width: 50px;
	height: 65px;
	display: block;
	text-align: center;
	position: relative;
	mix-blend-mode: multiply;
	margin-top: 5px;

}

.block-story .flex-center > div > a img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.block-story .v-line{
	width: 1px;
	background: #000;
	height: 425px;
}

.block-startup{
	background: url(../images/startup-bg@2x.jpg) right bottom no-repeat;
	background-size: 100% 224px;
	height: 350px;
	padding: 20px;
}

.block-startup p{
	height: 150px;
	float: right;
	margin-left: 10px;
}

.block-startup .startup-title{
	position: absolute;
	bottom: -20px;
	left: -20px;
}

.block-design{
	height: 350px;
	position: relative;
}

.block-design p, .block-design > a{
	position: absolute;
}

.block-design .book-06{
	left: 45px;
	top: 25px;
}

.block-design .text-06{
	height: 189px;
	left: 180px;
	top: 39px;
}

.block-design .book-07{
	left: 90px;
	bottom: -30px;
}

.block-design .text-07{
	height: 164px;
	left: 20px;
	bottom: 10px;
}

.block-design .book-05{
	right: 56px;
	bottom: -25px;
}

.block-design .text-05{
	height: 189px;
	right: 72px;
	top: 39px;
}

.block-design .design-title{
	position: absolute;
	right: 20px;
	top: 30px;
}

.block-design .design-line{
	position: absolute;
	left: 27px;
	top: 75px;
	pointer-events: none;
}

.block-design .v-line{
	width: 2px;
	height: 213px;
	background: #000;
	position: absolute;
	right: 184px;
	top: 75px;
}

.lady-block, .street-block{
	height: 160px;
	padding: 15px;
}

.lady-block p{
	height: 100%;
	float: right;
}

.lady-block .title{
	float: right;
	margin-left: 10px;
}

.lady-block .pic{
	position: absolute;
	left: -20px;
	bottom: -20px;
}

.block-dark{
	background: #000;
	height: 160px;
}

.block-dark img{
	float: right;
}

.block-dark p{
	display: inline-block;
	color: #fff;
	float: right;
	padding: 15px;
	text-align: left;
}

.block-strange{
	background: url(../images/strange-bg@2x.png) center center no-repeat;
	background-size: contain;
	height: 280px;
	flex-direction: row;
}

.block-strange div{
	width: 150px;
	height: 150px;
	color: #fff;
	background: #000;
	border-radius: 100%;
	padding: 18px 0;
	font-size: 14px;
	margin: 0 6px;
}

.block-discount{
	height: 245px;
	flex-direction: column;
}

.block-discount h3{
	margin: 5px 0;
}

.block-discount .book-01{
	position: absolute;
	left: 20px;
	bottom: 20px
}

.block-discount .book-02{
	position: absolute;
	right: 20px;
	bottom: 20px;
}

.block-discount img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.e-book{
	width: 100%;
	height: auto;
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.fromBottomIn
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 2.0s ease, opacity 2.0s ease;
	
	transform: translate(0,10px);
	opacity: 0.0;
}

.lady-group > div{
	padding: 0;
}

@media only screen and (max-width: 1200px) {
	a img{
		-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	    filter: grayscale(0%);
	    transition: all 0.3s;
	}
	.block-story .flex-center > div{
		margin: 0 10px;
	}
	.block-story .flex-center > div > a{
		width: 90px;
		height: 90px;
		display: block;
		margin: 10px auto;
	}
    .reverse{
    	display: flex;
    	flex-direction: column-reverse;
    }
    .block-main-title h1 img{
    	width: 60px;
    	height: 500px;
    }
    .block-main-title .main-title-en{
    	height: 510px;
    }
    .block-main-book h2 img{
    	width: 100px;
    	height: 580px;
    }
    .block-main-book a{
    	left: 18%;
    }
    .block-date{
    	height: auto;
    	flex-direction: row;
    	padding-bottom: 20px;
    }
    .block-story p{
    	height: 100px;
    }
    .block-story .v-line{
    	height: 200px;
    }
    .block-story .title{
    	height: 200px;
    }
    .block-story img.book{
    	left: 0;
    	right: 0;
    	margin: 0 auto;
    }
    .block-story .cover{
    	height: 200px;
    }
    .e-book{
    	margin-bottom: 30px;
    }
    .block-startup{
    	background-size: 50% 120%;
    	padding-right: 270px;
    	height: 200px;
    }
    .block-startup .startup-title{
    	left: auto;
    	right: -20px;
    }
    .block-design .text-05{
    	right: 100px;
    }
    .block-design .v-line{
    	right: 230px;
    }
    .block-design .text-06{
    	left: 270px;
    }
    .block-design .book-06{
    	left: 120px;
    }
    .block-design .text-07{
    	left: 40px;
    }
    .block-design .book-07{
    	left: 120px;
    }
    .block-design .design-line{
    	left: 80px;
    }
    .clear-tablet{
    	clear: both;
    }
    .lady-block, .street-block, .block-dark{
    	padding: 10px;
    	height: 220px;
    }
    .lady-block p{
    	height: 150px;
    }
    .block-dark{
    	padding: 10px 0;
    }
    .lady-group .col-sm-4{
    	padding: 0;
    }
    .block-dark p{
    	padding: 0;
    }
    .border-solid.thick{
    	border: 5px solid #000;
    }
}

@media only screen and (max-width: 720px) {
	.block-point .date p{
		height: 200px;
	}
	.block-story .flex-center > div{
		margin: 0 5px;
	}
	.block-story .flex-center > div > a{
		width: 60px;
		height: 60px;
		display: block;
		margin: 10px auto;
	}
	body{
		font-size: 13px; 
	}
	.container{
		width: 320px;
		padding: 0;
	}
	.news-paper-content{
		padding: 20px;
	}
	.block-discount img{
		max-width: 100%;
		height: auto;
	}
	.block-main-title h1 img{
		width: 48px;
		height: 360px;
	}
	.block-main-title .main-title-en{
		top: 5px;
		left: 5px;
		width: 15px;
		height: 390px;
	}
	.block-main-title h1{
		top: 5px;
		right: 5px;
	}
	.block-main-book h2 img{
		height: 250px;
		width: 75px;
	}
	.block-main-book{
		padding: 5px;
	}
	.block-main-book a{
		width: 72%;
		top: auto;
		bottom: -15px;
	}
	.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
		padding-left:5px;
		padding-right: 5px;
	}
	.row{
		margin-right: -5px;
		margin-left: -5px;
	}
	.block-main-book p{
		font-size: 13px;
		height: 250px;
		position: absolute;
		top: 5px;
		left: 5px;
		float: none;
	}
	.first-row{
		height: 415px;
	}
	.block-main-title.first-row{
		height: 410px;
	}
	.block-main-title .exclamation-mark{
		width: 80px;
		height: auto;
	}
	.big-date{
		font-size: 48px;
	}
	.sale.big::after{
		width: 120px;
		height: 120px;
	}
	.date-dash{
		width: 8px;
		height: 30px;
	}
	.block-date{
		padding: 20px 0;
		height: auto;
	}
	.block-news{
		height: auto;
		padding: 10px 10px;
	}
	.block-news .book{
		width: 100%;
		padding: 5px 20px 0 20px;
		text-align: right;
	}
	.block-news img{
		max-width: 100%;
		margin-bottom: 10px;
		border: 1px solid #fff;
	}
	.block-news .book p{
		float: left;
		height: 150px;
		text-align: left;
	}
	.border-solid, .border-dotted, .border-double, .border-dashed, .e-book{
		margin-bottom: 10px;
	}
	.block-point{
		height: auto;
		padding-top: 320px;
	}
	.block-point > p{
		height: 280px;
		margin: 10px 0;
		position: absolute;
		top: 10px;
		left: 10px;
	}
	.block-point h4{
		font-size: 18px;
	}
	.block-point img{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.block-point a{
		line-height: 150%;
	}
	.block-story .visible-xs img{
		max-width: 100%;
		height: auto;
		margin-top: 15px;
	}
	.block-story p{
		height: 180px;
	}
	.block-story{
		height: auto;
		overflow: hidden;
	}
	.block-story img.book{
		left: -10px;
		right: auto;
	}
	.block-story .v-line{
		height: 260px;
	}
	.block-startup{
		height: auto;
	}
	.clear-mobile{
		clear: both;
	}
	.block-startup{
		padding: 10px 10px 200px 10px;
		background-size: 110% 70%;
	}
	.block-design{
		height: 420px;
	}
	.block-design .book-06{
		top: 160px;
	}
	.block-design .design-title{
		top: 10px;
		right: 10px;
	}
	.block-design .text-06{
		top: 180px;
		left: auto;
		right: 140px;
		height: 80px;
	}
	.block-design .text-05{
		height: 100px;
		right: 140px;
	}
	.block-design .text-07{
		height: 100px;
		right: 140px;
	}
	.block-design .book-05{
		bottom: auto;
		top: 10px;
		right: 25px
	}
	.block-design .book-07{
		left: 110px;
	}
	.block-design .v-line, .block-design .design-line{
		display: none;
	}
	.lady-block, .street-block{
		height: 140px;
	}
	.block-dark{
		background: #fff;
		height: 160px;
		padding: 0;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}
	.border-solid.thick{
		border: 2px solid #000;
	}
	.block-dark p{
		padding: 10px;
		color: #000;
	}
	.lady-block .title{
		max-height: 100%;
	}
	.lady-block p{
		height: 75%;
	}
	.lady-block .pic{
		left: 10px;
		bottom: 10px;
	}
	.block-strange{
		height: auto;
		background-image: url(../images/strange-bg-mobile@2x.png);
		padding: 20px 0;
	}
	.block-strange div{
		margin: 20px 0;
	}
	.block-discount{
		height: 300px;
	}
	.block-dark img{
		height: 100%;
		width: auto;
	}

}

.exclamation-mark{
	animation-duration: 2s;
}


@supports (-ms-ime-align:auto) {
  .paper-texture{
  	display: none;
  }
}