@charset "utf-8";

/*================================

スライダー

================================*/

.gallery{
	width: 100%;
	margin: 0 auto;
                background: #000;
	}
@media screen and (max-width: 640px) {
.gallery{
	width: 100%;
	}
	}

.gallery .center{
	width: 100%;
	margin: 0 auto;
	}

.gallery .center .one{
	position: relative;
	}

.gallery .center .one .wal{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	min-height: 500px;
	max-height: 700px;
	margin: 0 auto;
	}
@media screen and (max-width: 640px) {
.gallery .center .one .wal{
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	}
	}

.gallery .center .one .wal a:hover img{
	-moz-filter: none;
	-webkit-filter: none;
	-o-filter: none;
	-ms-filter: none;
	filter: none;
	}

.gallery .center .one .wal img{
	width: 100%;
	height: auto;
	}

.gallery .center .one .wal .sname{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 40% 10% 8%;
	color: #fff;
	box-shadow: 0 -200px 100px -100px rgba(0, 0, 0, .5) inset;
	}
@media screen and (max-width: 640px) {
.gallery .center .one .wal .sname{
	padding: 40% 6% 10%;
	}
	}

.gallery .center .one .wal .sname h2{
	font-size: 2.2vw;
	line-height: 1.3em;
	font-weight: 400;
	}
@media screen and (max-width: 1180px) {
.gallery .center .one .wal .sname h2{
	font-size: 1.8em;
	}
	}
@media screen and (max-width: 640px) {
.gallery .center .one .wal .sname h2{
	font-size: 5.5vw;
	}
	}

.gallery .center .one .wal .sname h3{
	margin-top: .5em;
	font-size: 1.4vw;
	line-height: 1.4em;
	}
@media screen and (max-width: 1180px) {
.gallery .center .one .wal .sname h3{
	font-size: 1.1em;
	}
	}
@media screen and (max-width: 640px) {
.gallery .center .one .wal .sname h3{
	font-size: 3vw;
	}
	}


.gallery .center .one .wal p.cledit{
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: .8em;
	color: #fff;
	}
@media screen and (max-width: 640px) {
.gallery .center .one .wal p.cledit{
	font-size: .7em;
	}
	}

/*================================

分岐

================================*/

.pagenation{
	margin-top: 5em;
	text-align: center;
	letter-spacing: -.4em;
	}
@media screen and (max-width: 640px) {
.pagenation{
	margin-top: 3em;
	}
	}

.pagenation p{
	display: inline-block;
	width: auto;
	height: auto;
	letter-spacing: normal;
	margin-left: 1em;
	margin-right: 1em;
	}
@media screen and (max-width: 640px) {
.pagenation p{
	margin-left: 0;
	margin-right: 1.5em;
	}
.pagenation p:nth-child(2) {
	margin-right: 0;
	}
	}

.pagenation p a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1em;
	padding: 1em 2.5em;
	border: 1px solid #ccc;
	}
.pagenation p a:hover{
	border: 1px solid #333;
	}
@media screen and (max-width: 640px) {
.pagenation p a{
	font-size: .8em;
	padding: 1em;
	}
	}

/*================================

タイトル周り

================================*/

.titlewrap{
	position: relative;
	padding: 6em 0 6em;
	text-align: center;
	font-weight: normal;
	}
@media screen and (max-width: 640px) {
.titlewrap{
	padding: 4em 0 3em;
	}
	}

.titlewrap p.title{
	text-align: center;
	font-size: 2.5em;
	letter-spacing: .15em;
	}
@media screen and (max-width: 640px) {
.titlewrap p.title{
	font-size: 1.8em;
	}
	}

.titlewrap p.sub{
	margin-top: 2em;
	text-align: center;
	letter-spacing: .2em;
	}



/*================================

全て

================================*/

.all {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background-position: center top;
	background-repeat: no-repeat;
	/*background-image: url(../images/product-line.svg);*//*no-line*/
	border-top: 1px solid transparent;
	}
@media screen and (max-width: 640px) {
.all {
	background-image: none;
	border-top: 1px solid #dedede;
	}
.all::after{
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	/*background-image: url(../images/product-line.svg);*//*no-line*/
	}
	}

/*-------------------
カテゴリー
--------------------*/

.all .categoly{
	width: 100%;
	height: auto;
	border-top: 1px solid #dedede;
	}

.all .categoly.artmuseum{
	position: absolute;
	top: 3em;/*8em;*//*no-line*/
	left: 0;
	}
@media screen and (max-width: 640px) {
.all .categoly.artmuseum{
	top: 0;
	border-top: none;
	}
	}

.all .categoly.shophome{
	position: relative;
	border-top: 1px solid #dedede;
	}
@media screen and (max-width: 640px) {
.all .categoly.shophome{
	}
	}

.all .categoly p{
	padding-top: 2em;
	padding-left: 5%;
	font-size: 1em;
	line-height: 1em;
	font-weight: 400;
	letter-spacing: .1em;
	}
@media screen and (max-width: 640px) {
.all .categoly p{
	padding-top: 3em;
	padding-left: 7%;
	}
	}

.all .categoly p:before {
	content: '/';
	display: inline-block;
	padding-right: .3em;
	font-size: 1.8em;
	vertical-align: top;
	}


/*-------------------
全て：一覧
--------------------*/

.all .list {
	position: relative;
	width: 78%;
	margin-left: 22%;
                padding-bottom: 50px;
	height: auto;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	column-gap: 2%;
	row-gap: 50px;
	}
@media screen and (max-width: 640px) {
.all .list {
	width: 93%;
	padding-top: 110px;
	margin-left: 7%;
	row-gap: 30px;
	}
.all .list.shophome {
	padding-top: 50px;
	}
	}

.all .list .inner{
	width: 32%;
	height: auto;
	}
@media screen and (max-width: 640px) {
.all .list .inner{
	display: block;
	float: none;
	width: 100%;
	}
	}

.all .list .inner div{
	position: relative;
	background-color: #fff;
	}

.all .list .inner img{
	width: 100%;
	height: auto;
                pointer-events: none;
	}

.all .list .inner div p.cledit{
	position: absolute;
	bottom: 1em;
	right: 1em;
	font-size: .8em;
	color: #fff;
	}

.all .list .inner p.en{
	margin-top: .5em;
	padding-right: 2em;
	font-size: 1.2em;
	line-height: 1.3em;
	font-weight: 400;
	}
@media screen and (max-width: 640px) {
.all .list .inner p.en{
	font-size: 1.2em;
	}
	}

.all .list .inner p.ja{
	margin-top: .5em;
	padding-right: 2em;
	font-size: .9em;
	line-height: 1.3em;
	}
@media screen and (max-width: 640px) {
.all .list .inner p.ja{
	line-height: 1.4em;
	}
	}

.all .list .inner p.date{
	margin-top: 1em;
	font-size: .8em;
	}
@media screen and (max-width: 640px) {
.all .list .inner p.date{
	font-size: .9em;
	}
	}




/*
:::::::::::::::::::::::::::::::::::::::::::::::::: 詳細ページ ::::::::::::::::::::::::::::::::::::::::::::::::::
*/



/*================================

ファサード

================================*/

.facade {
	position: relative;
	width: 100%;
                max-height: 700px;
	}
.facade:before {
	content:"";
	display: block;
	padding-top: 50%;
	}
@media screen and (max-width: 640px) {
.facade:before {
	padding-top: 100%;
	}
.nationalmuseumofwesternart .facade:before {
	padding-top: 66.25%;
	}
	}

.scrolled {
	/*margin-top: 70px;*/
	}

.facade #content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	}

.facade #content .para{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 -200px 100px -100px rgba(0, 0, 0, 0.5) inset;
	}
@media screen and (max-width: 640px) {
.facade #content .para{
	box-shadow: none;
	}
	}

.nationalmuseumofwesternart .facade #content .para{
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: none;
	}

.facade #content .para .layer{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.1);
	}

.facade #content .titles{
	position: absolute;
	width: 86%;
	height: auto;
	bottom: 12%;
	left: 7%;
	color: #fff;
	}
@media screen and (max-width: 640px) {
.facade #content .titles{
	display: none;
	}
	}

.facade #content .cledit{
	position: absolute;
	bottom: 2em;
	right: 2em;
	color: #fff;
	font-size: .9em;
	}
@media screen and (max-width: 640px) {
.facade #content .cledit{
	bottom: 1em;
	right: 1em;
	font-size: .8em;
	}
	}

/*================================

	タイトル

================================*/

.facade #content .titles h2{
	font-size: 3vw;
	line-height: 1.3em;
	font-weight: 400;
	}
@media screen and (max-width: 1180px) {
.facade #content .titles h2{
	font-size: 2.3em;
	}
	}
.facade #content .titles h3{
	margin-top: .5em;
	font-size: 1.8vw;
	line-height: 1.4em;
	}
@media screen and (max-width: 1180px) {
.facade #content .titles h3{
	font-size: 1.4em;
	}
	}

.facade #content .titles p{
	font-size: 1.2vw;
	line-height: 2em;
	}
@media screen and (max-width: 1180px) {
.facade #content .titles p{
	font-size: 1em;
	}
	}



/*================================

:::::::::::::::::::::::   詳細   :::::::::::::::::::::::

================================*/

.detail {
	position: relative;
	width: 700px;
	height: auto;
	margin: 5em auto;
	}
@media screen and (max-width: 640px) {
.detail {
	position: relative;
	width: 86%;
	margin: 2em auto;
	}
	}

.detail .titles{
	display: none;
	}
@media screen and (max-width: 640px) {
.detail .titles{
	display: block;
	}
	}

/*================================

	タイトル

================================*/

.detail .titles h2{
	font-size: 3.2em;
	line-height: 1.1em;
	font-weight: 400;
	}
@media screen and (max-width: 640px) {
.detail .titles h2{
	font-size: 1.5em;
	line-height: 1.4em;
	}
	}

.detail .titles h3{
	font-size: 1.8em;
	line-height: 2em;
	}
@media screen and (max-width: 640px) {
.detail .titles h3{
	margin-top: .5em;
	font-size: 1.1em;
	}
	}

.detail .titles p{
	font-size: 1.3em;
	line-height: 2em;
	}
@media screen and (max-width: 640px) {
.detail .titles p{
	font-size: .9em;
	}
	}

/*================================

リード

================================*/

.lead {
	line-height: 2.2em;
	/*text-align: justify;
	text-justify: inter-ideograph;*/
	text-align: left;
	}
@media screen and (max-width: 640px) {
.lead {
	margin-top: 2em;
	line-height: 1.9em;
	}
	}

/*================================

写真

================================*/

.photo {
	margin: 4em 0 0;
	}
@media screen and (max-width: 640px) {
.photo {
	margin: 2em 0 0;
	}
	}

.photo div{
	position: relative;
	}

.photo div p{
	position: absolute;
	bottom: 1em;
	right: 1em;
	color: #fff;
	font-size: .9em;
	padding-bottom: 1.5em;
	}
@media screen and (max-width: 640px) {
.photo div p{
	font-size: .8em;
	padding-bottom: 1em;
	}
	}

.photo img{
	display: block;
	width: 100%;
	height: auto;
	padding: 1.5em 0;
                pointer-events: none;
	}
@media screen and (max-width: 640px) {
.photo img{
	padding: 1em 0;
	}
	}

.photo p.excledit{
	text-align: right;
	font-size: .8em;
	padding: 1em 0 4em;
	}
@media screen and (max-width: 640px) {
.photo p.excledit{
	padding: 1em 0 1em;
	}
	}

/*================================

製品写真

================================*/

.product {
	margin: 1.5em 0 0;
	background-position: center top;
	background-repeat: repeat-x;/*no-repeat;*//*no-line*/
	background-image: url(../images/product-line.svg?0106);
	}
@media screen and (max-width: 640px) {
.product {
	padding: .5em 0 0;
	}
	}

.product img{
	display: block;
	width: 100%;
	height: auto;
	padding: 3em 0 1em;
	}
@media screen and (max-width: 640px) {
.product img{
	padding: 2em 0 .5em;
	}
	}

.product p{
	font-size: .8em;
	line-height: 1.9em;
	}
@media screen and (max-width: 640px) {
.product p{
	font-size: .9em;
	}
	}

/*================================

クレジット

================================*/

.spec {
	border: 1px solid #dedede;
	margin-top: 5em;
	padding: 2em 3em;
	font-size: .9em;
	line-height: 1.7em;
	background-color: #fff;
	}
@media screen and (max-width: 640px) {
.spec {
	margin-top: 3em;
	margin-bottom: 4em;
	padding: 1em 1em;
	line-height: 1.7em;
	}
	}

/*================================

一覧に戻る

================================*/

.backlist {
	position: relative;
	padding: 4em 0;
	border-top: 1px solid #dedede;
	}

.backlist a{
	display: block;
	width: 400px;
	height: auto;
	margin: auto;
	border: 1px solid #dedede;
	background-color: #fff;
	text-align: center;
	}
@media screen and (max-width: 640px) {
.backlist a{
	width: 86%;
	}
	}

.backlist a:hover{
	border: 1px solid #333;
	}

.backlist a p{
	display: inline-block;
	font-size: 1em;
	line-height: 4em;
	text-align: center;
	padding-left: 3em;
	background-position: left center;
	background-repeat: no-repeat;
	background-image: url(../images/arrow-left.svg);
	background-size: 25px;
	}



/*================================

パンくず

================================*/

#breadcrumb {
	position: relative;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #dedede;
	background-color: #fff;
	padding: 1.5em 3%;
	font-size: .8em;
	line-height: 1em;
	}

#breadcrumb span{
	display: inline-block;
	width: 1em;
	margin: 0 1em;
	font-size: .8em;
	height: 1em;
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url(../images/arrow-right-s-line-black.svg);
	background-size: 1em;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	}
@media screen and (max-width: 640px) {
#breadcrumb span{
	margin: 0 .5em;
	}
	}

#breadcrumb a:hover{
	text-decoration: underline;
	}



/*================================

全一覧

================================*/

/*
タイトル周り 
*/

.alllist .titlewrap{
	position: relative;
	padding: 7em 0 3em;
	text-align: center;
	font-weight: normal;
	border-bottom: 1px solid transparent;
	}
.alllist .titlewrap::after{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	/*background-image: url(../images/product-line.svg?0106);*//*no-line*/
	}
@media screen and (max-width: 640px) {
.alllist .titlewrap{
	padding: 4em 0 1em;/*4em 0 2em;*//*no-line*/
	/*border-bottom: 1px solid #dedede;*//*no-line*/
	}
	}

.alllist .titlewrap p.title{
	text-align: center;
	font-size: 2.5em;
	letter-spacing: .15em;
	}
@media screen and (max-width: 640px) {
.alllist .titlewrap p.title{
	font-size: 1.8em;
	letter-spacing: .1em;
	}
	}

.alllist .titlewrap p.sub{
	margin-top: 2em;
	text-align: center;
	letter-spacing: .1em;
	}

h2.itiran{
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	padding: 3em 0;
	}
@media screen and (max-width: 640px) {
h2.itiran{
	font-size: 1.2em;
	padding: 2em 0;
	}
	}

/*
一覧
*/

.alllist .workslists{
	width: 86%;
	margin: 0 auto;
	padding-top: 2em;
	border-top: 1px solid #dedede;
	background-color: #fff;
	}

.alllist .workslists p{
	font-size: 1.3em;
	font-weight: bold;
	padding: 1em 0;
	}
@media screen and (max-width: 640px) {
.alllist .workslists p{
	font-size: 1.2em;
	padding: .5em 0;
	}
	}

.alllist .workslists ul{
	width: 100%;
	margin: 1em auto 2em;
	letter-spacing: -.4em;
	padding-bottom: 2em;
	border-bottom: 1px solid #dedede;
	}

.alllist .workslists ul li{
	width: 33.33%;
	display: inline-block;
	letter-spacing: normal;
	padding: .5em 1em .5em 0;
	vertical-align: top;
	font-size: .8em;
	line-height: 1.6em;
	}
@media screen and (max-width: 640px) {
.alllist .workslists ul li{
	width: 100%;
	}
	}

.alllist .workslists ul li a{
	border-bottom: 1px solid #ccc;
	}
.alllist .workslists ul li a:hover{
	border-bottom: 1px solid #333;
	}