html, body, div, span, p, a, address,img, dl, dt, dd, ol, ul, li{
  margin: 0;  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: midium;
  font-size: 100%;  color: #000;
}

/*本文*/
.reader {
	font-family: dnp-shuei-gothic-gin-std, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  	font-size: 14px;
	font-weight: 300;
  	color: #000;
  	line-height: 2.2;  Letter-spacing: 0px;
  	text-align: justify; /*Required for IE and Edge */
  	text-align-last: left;
	margin-bottom: calc(14px*2.2) ;
}

h1{
	font-family: english-grotesque, sans-serif;
	font-weight: 600; font-style: normal;
	font-size: 26px; color: #000;
	line-height: 26px;	Letter-spacing: 3.2px;
  	text-align: left;
	text-transform: uppercase;
}
h2{
	font-family: english-grotesque, sans-serif;
	font-weight: 500;font-style: normal;
	font-size: 20px; color: #000;
	line-height: 20px;	Letter-spacing: 3px;
  	text-align: left;
	text-transform: uppercase;
}
h3 {
	font-family: serenity, sans-serif;
	font-weight: 400; font-style: italic;
	font-size: 11px; color: #000;
	line-height: 11px;	Letter-spacing: 1.2px;
  	text-align: left;
	text-transform: capitalize;
}
h4{
	font-family: english-grotesque, sans-serif;
	font-weight: 500;font-style: normal;
	font-size: 16px; color: #000;
	line-height: 32px;	Letter-spacing: 3px;
  	text-align: left;
	text-transform: uppercase;
}
h5{
	font-family: english-grotesque, sans-serif;
	font-weight: 500;font-style: normal;
	font-size: 20px; color: #000;
	line-height: 50px;	Letter-spacing: 4px;
  	text-align: center;
	text-transform: uppercase;
}
.detail-title-category{
	font-family: english-grotesque, sans-serif;
	font-weight: 400; font-style: normal;
	font-size: 9px; color: #000;
	line-height: 9px;	Letter-spacing: 1px;
  	text-align: center;
	text-transform: uppercase;
	padding-bottom: 12px;
}
.detail-title-number{
	font-family: english-grotesque, sans-serif;
	font-weight: 400; font-style: normal;
	font-size: 24px; color: #000;
	line-height: 24px;	Letter-spacing: 5px;
  	text-align: center;
	text-transform: uppercase;
	border-bottom: solid 1px #000;
	padding-bottom: 12px;	
	
}
.detail-title-title{
	font-family: english-grotesque, sans-serif;
	font-weight: 200;font-style: normal;
	font-size: 16px; color: #000;
	line-height: 18px;	Letter-spacing: 1px;
  	text-align: center;
	text-transform: capitalize;
	padding-top: 20px;
	padding-bottom: 10px;
}
.detail-title-media{
	font-family: serenity, sans-serif;
	font-weight: 500;font-style: italic;
	font-size: 12px; color: #000;
	line-height: 14px;	Letter-spacing: 1.2px;
  	text-align: center;
	text-transform: capitalize;
}

@media screen and (max-width: 1280px) {
h4{
	line-height: 35px;
}
}

@media screen and (max-width: 640px) {
.reader {
  	font-size: 14px;
  	line-height: 2; 
}

h1{
	font-size: 4.5vw;
	line-height: 4vw; Letter-spacing: 1.8px;
}
h2{
	font-size: 3.6vw; 
	line-height: 4vw; Letter-spacing: 2.5px;
}
h3 {
	font-size: 2vw;
	line-height: 2vw;
}
h4{
	font-size: 3.6vw;
	line-height: 6.5vw;
}
h5{
	font-size: 18px;
	line-height: 13.5vw;
}
.detail-title-category{
	font-size: 2.8vw;
	line-height: 2.8vw;
}
.detail-title-number{
	font-size: 4.6vw;
	line-height: 4.6vw;
}
.detail-title-title{
	font-size: 4.6vw; color: #000;
	line-height: 5.6vw;
	padding-top: 14px;
	padding-bottom: 9px;
}
.detail-title-media{
	font-size: 3.6vw;
	line-height: 4.6vw;
}
}





/*トップページ*/
.topper{
	width: 100%; height: 750px;
}
#top{
	width: 100vw; height: 750px;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: fixed; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	transition: .5s;
	z-index: 1;
}
.top-outer{
	width: 100vw; height: 750px;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: relative; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
}
.top-inner{
	position: absolute;
	top: 52%;	left: 0;
	transform: translateY(-50%) translateX(0);
	-webkit- transform: translateY(-50%) translateX(0);
	
	width: 600px; height: auto;
	margin-left: 120px;
	text-align: left;
}

.title_main{
	margin: 0 0 18px;
}
.title_sub{
	margin: 0 0 25px;
}
.title_caption{
	margin: 0 0 40px;
}
.image-for-top{
  	width: calc(50vw - 120px); height: calc(50vw - 120px);
	float: left;
	transition: .5s;
	}
.image{
  	width: 17.6vw; height: 17.6vw;
	background-color: #999;
	float: left;
	transition: .5s;
	}

@media screen and (max-width: 2240px) {
	
.image{
  	width: 22.5vw; height: 22.5vw;
	background-color: #999;
	float: left;
	transition: .5s;
	}
}
@media screen and (max-width: 1920px) {

.image{
  	width: 30.66vw; height: 30.66vw;
	}
}

@media screen and (max-width: 1280px) {
.topper{
	width: 100%; height: 80vh;
}
#top{
	width: 100vw; height: 80vh;
	margin: 0 0 0;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: fixed; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
}
.top-outer{
	position: relative; 
	width: 100vw; height: 80vh;
	overflow: hidden;
}
.top-inner{
	position: absolute;
	top: 50%;	left: 0;
	transform: translateY(-50%) translateX(0);
	-webkit- transform: translateY(-50%) translateX(0);
	width: 80vw; height: auto;
	margin-left: 10vw;
	text-align: left;
}	
.image-for-top{
  	width: 90vw; height: 75vw;
	float: left;
	}
.image{
  	width: 47vw; height: 47vw;
	}
}

@media screen and (max-width: 640px) {

.top-inner{
	position: absolute;
	width: 84vw; height: auto;
	margin-left: 8vw;
	text-align: left;
}
.title_main{
	margin: 0 0 2.5vw;
}
.title_sub{
	margin: 0 0 3.5vw;
}
.title_caption{
	margin: 0 0 7vw;
}
.image-for-top{
  	width: 100%; height: 65vw;
	}
.image{
  	width: 100%; height: auto;
	margin: auto;
	}
}



/* VIEW WORKS */
.row1{
	display: block;
	position: relative;
	text-align: left;
	width: 140px; height: auto;
}

.row1-txt a{
	position: relative;
  	display: block;
  	text-decoration: none;
	font-family: english-grotesque, sans-serif;
	font-weight: 400;font-style: normal;
	font-size: 16px; color: #000;
	line-height: 15px;	Letter-spacing: 2.5px;
  	text-align: left;
	text-transform: uppercase;
	border-bottom: solid 1px #000;
	padding-bottom: 10px;	
}
.row1-txt2 a{
	position: relative;
  	display: block;
  	text-decoration: none;
	font-family: english-grotesque, sans-serif;
	font-weight: 400;font-style: normal;
	font-size: 16px; color: #000;
	line-height: 10px;	Letter-spacing: 2.5px;
  	text-align: center;
	text-transform: uppercase;
	border-bottom: solid 1px #000;
	padding-bottom: 10px;	
}

.row1-txt a::after {/* row1の下線 */
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #EFEFEF;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

.row1-txt2 a::after {/* row1の下線 */
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #EFEFEF;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.row1-txt a:hover::after {/* row1の下線 */
  transform: scale(1, 1);
}
.row1-txt2 a:hover::after {/* row1の下線 */
  transform: scale(1, 1);
}

@media screen and (max-width: 640px) {
.row1{
	width: 34vw;
}
.row1-txt a{
	font-size: 3.2vw;
	line-height: 4vw; Letter-spacing: 2px;
	padding-bottom: 1.2vw;
}
.row1-txt2 a{
	font-size: 3.2vw;
	line-height: 4vw; Letter-spacing: 2px;
	padding-bottom: 1.2vw;
}
.row1-txt a::after{/* row1の下線 */
  height: 3px;
  bottom: -0.4vw;
}
.row1-txt2 a::after {/* row1の下線 */
  height: 3px;
  bottom: -0.4vw;
}
}


/* VIEW WORKS矢印 */
.view-works-arrow{
	position: absolute;
	top: 10%;	right: 0%;
	transform:  rotate(-135deg);
	-webkit- transform:  rotate(-135deg);
	width: 10px;
	height: 10px;
	border: 1px solid;
	border-color: transparent transparent #000 #000;
}

@media screen and (max-width: 640px) {
.view-works-arrow{
	position: absolute;
	top: 15%;	right: 0%;
	transform:  rotate(-135deg);
	-webkit- transform:  rotate(-135deg);
	width: 2.2vw;
	height: 2.2vw;
}
}


/* VIEW MORE */
#list-beneath{
	display: block;
	width: 100%; height: auto;
	margin: 150px 0 250px;
}
#list-beneath .row1{
	display: block;
	margin: auto;
	z-index: 50;
}
@media screen and (max-width: 640px) {
#list-beneath{
	margin: 20vw 0;
}
}




/*WORKS 一覧ソート*/
.list{
	width: 98vw; height: auto;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: relative; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	margin: auto;
	transition: 1s;
	z-index: 50;
}

list li{
 	width: 17.6vw; height: 17.6vw;
  	float: left;
  	transition: 1s;
}

.top-list{
	width: calc(100vw - 240px); height: auto;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: relative; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	margin: auto;
	transition: 1s;
	z-index: 50;
}
top-list li{
  	width: 45vw; height: 45vw;
  	float: left;
	transition: 1s;
}

.btn{
	width: 100%; height: auto;
}

.btn a{
	position: relative;
	display:block;
	list-style-type:none;
	text-decoration: none;
	
	font-family: english-grotesque, sans-serif;
	font-weight: 200; font-style: normal;
	font-size: 17px; color: #000;
	line-height: 51px;	Letter-spacing: 3px;
  	text-align: left;
	text-transform: uppercase;
	
	z-index: 100;
}

.btn a+a {
	border-left: 0px solid #000;
}

.btn a:hover{
	color: #000;
	transition: .2s;
}
.btn a:focus{
	color: #CDCCCC;
	transition: 1s;
}
.btn a::after {/* ソートメニュー下線 */
  position: absolute;
  bottom: 3px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .4s;
}
.btn a:hover::after {/* ソートメニュー下線 */
  transform: scale(1, 1);
}


@keyframes zoom-in {
  0% {
   transform: scale(.6);
  }
  100% {
    transform: none;
  }
}
.animate {
  animation: .4s zoom-in;
}

/* アンカージャンプの着地点をずらす */
a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
@media screen and (max-width: 2240px) {
list li{
 	width: 22.5vw; height: 22.5vw;
  	float: left;
  	transition: 1s;
}
}
@media screen and (max-width: 1920px) {
list li{
  width: 30.66vw; height: 30.66vw;
}
}

@media screen and (max-width: 1280px) {
.list{
	padding-top: 0px;
	padding-bottom: 0px;
}
list li{
  width: 47vw; height: 47vw;
}
.top-list{
	width: 90vw; height: auto;
	padding-bottom: 0px;
	}
top-list li{
  width: 90vw; height: 60vw;
  float: left;
}

.btn{
	width: 100%; height: 42vh;
	position: relative;
	overflow: hidden;
	margin-top: 6vh; /*スマホ横位置の場合に対処したマージン*/
}
.btn a{
	font-size: 17px;
	line-height: 7vh;
}
}

@media screen and (max-width: 640px) {

.list{
	width: 90vw; height: auto;
	overflow: hidden; /*floatの解除、ここがポイント*/
  	position: relative; /*DWで正常にプレビューできるようになります。*/
  	zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
	margin: auto;
}	
list li{
	width: 100%;
}
.top-list{
	width: 100vw;
}
top-list li{
 	width: 100%;
}
.btn{
	width: 80vw; height: 36vh;
	margin: 15% 0 0 0;
}
.btn a{
	display:block;
	margin-right:0vw;
	
  	font-size: 3.6vw;
  	line-height: 6vh;   Letter-spacing: 3.4px;
 	text-align: left;
	text-transform: uppercase;
}
.btn a+a {
	border-left: none;
}
.btn a::after {/* ソートメニュー下線 */
  bottom: 1vw;
}
}



/*画像マウスオーバー時のキャプション*/
figure {
  position: relative;
  overflow: hidden;
  width: 17.6vw; height: 17.6vw;
  margin: 1vw;
  float: left;
  transition: .5s;
}
figcaption {
  position: absolute;
  top: 7.5%;
  right: 7.5%;
  width: 85%; height: 85%;
  background: rgba(241,239,237,0.9);
  -webkit-transition: .15s;
  transition: .15s;
  opacity: 0;
  padding-top: 5%; /*キャプションの上側空き*/
  padding-left: 5%; /*キャプションの左側空き*/
}
figure:hover figcaption {
  top: 7.5%;
  right: 7.5%;
  opacity: 1;
}


@media screen and (max-width: 2240px) {
figure {
  width: 22.5vw; height: 22.5vw;
}
}

@media screen and (max-width: 1920px) {
figure {
  width: 30.66vw; height: 30.66vw;
}
}
@media screen and (max-width: 1280px) {
figure{
  width: 47vw; height: 47vw;
}

}
@media screen and (max-width: 640px) {	

figure{
  width: 100%; height: auto;
  margin-bottom: 5vw;
}
figcaption {
  display: none;
}
}





/*WORKS 詳細*/
#detail_title{
	position: relative;
	width: 400px; height: auto;
	display: block; margin: auto;
	padding-top: 150px;
}
#explanatory{
	display: block;
	width: 800px; height: auto;
	margin: 50px auto;
}
#detail_visual{
	padding-bottom: 200px;
	margin-top: 100px;
	transition: .5s;
}
#detail_visual li{
	display: block;
	width: 70vw; height: auto;
	margin: 50px auto;
	transition: .5s;
}
#detail_visual li .harf{
	display: inline;
	float: left;
	width: 35vw; height: auto;
	margin: 90px 2% 0 2%;
}

.detail_photo{
	width: 96%; height: 100%;
	background: rgba(252,250,247,1.00);
	margin: 0 2% 0;
	}
.detail_photo_portlait{
	display: block;
	width: auto; height: 90vh;
	background: rgba(252,250,247,1.00);
	margin: auto;
	}
.detail_photo_portlait_small{
	display: inline;
	width: 46%; height: auto;
	background: rgba(252,250,247,1.00);
	margin: 0 2% 0 2%;
	overflow: hidden;
	}
.detail_photo_portlait_quarter{
	display: inline;
	width: 21%; height: auto;
	background: rgba(252,250,247,1.00);
	margin: 0 2% 0 2%;
	overflow: hidden;
	}
.detail_photo_portlait_small_center{
	display: block;
	width: 46%; height: auto;
	background: rgba(252,250,247,1.00);
	margin: auto;
	overflow: hidden;
	}


@media screen and (max-width: 1280px) {
#detail_visual li{
	width: 80vw; height: auto;
	/*pointer-events: none;*/
}
.detail_photo_portlait{
	display: block;
	width: 100%; height: auto;
	background: rgba(252,250,247,1.00);
	margin: auto;
	}
#explanatory{
	width: 65vw; height: auto;
}
}

@media screen and (max-width: 640px) {
#detail_title{
	position: relative;
	width: 80vw; height: auto;
	display: block; margin: auto;
	padding-top: 25vw;
}
#detail_visual{
	margin-top: 15vw;
	padding-bottom: 0px;
}
#detail_visual li{
	width: 100vw; height: auto;
	margin: 40px auto 0;
}
.detail_photo_portlait{
	display: block;
	width: 100%; height: auto;
	background: rgba(252,250,247,1.00);
	margin: auto;
	}
#explanatory{
	width: 80vw; height: auto;
}
}


/*ViewNext*/
.row2{
	display: block;
	text-align: center;
	width: 90px; height: auto;
	margin: 100px auto 30px;
}
.row2 a{
	position: relative;
	display: block;
	text-decoration: none;
	font-family: serenity, sans-serif;
	font-weight: 400; font-style: italic;
	font-size: 14px; color: #000;
	line-height: 14px;	Letter-spacing: 2px;
  	text-align: center;
	text-transform: capitalize;
}
.row2 a:hover{
	color: #000;
	transition: .6s;
}
.row2 a::after {/* row2下線 */
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.row2 a:hover::after {/* row2下線 */
  transform: scale(1, 1);
}

@media screen and (max-width: 640px) {
.row2{
	width: 20vw; height: auto;
	margin: 60px auto 0;	
}
.row2 a{
	margin: 2vw auto 6vw;
	font-size: 3vw;
	line-height: 3vw;
}
}



/*BACK TO LIST*/
.row3{
	display: block;
	text-align: center;
	width: 135px; height: auto;
	margin: 20px auto 0px;
}
.row3 a{
	position: relative;
	display: block;
	text-decoration: none;
	font-family: english-grotesque, sans-serif;
	font-weight: 200;font-style: normal;
	font-size: 16px; color: #000;
	line-height: 16px;	Letter-spacing: 1.2px;
  	text-align: center;
	text-transform: uppercase;
}
.row3 a:hover {
	color: #000;
	transition: .6s;
}
.row3 a::after {/* row3下線 */
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.row3 a:hover::after {/* row3下線 */
  transform: scale(1, 1);
}

@media screen and (max-width: 640px) {
.row3{
	display: block;
	text-align: center;
	width: 34vw; height: auto;
	margin: 20px auto 100px;
}
.row3 a{
	margin: 5vw auto 0;
	font-size: 4vw;
	line-height: 4vw;
}
}



/*CONTACT*/
.subtitle {
	font-family: english-grotesque, sans-serif;
	font-weight: 500; font-style: normal;
	font-size: 17px; color: #000;
	line-height: 36px;	Letter-spacing: 3px;
  	text-align: left;
	text-transform: uppercase;
	margin-bottom: 40px;
}

li {
  list-style: none;
}
#contact{
	padding: 150px 0 50px;
}

#box_main{
	display: block;
	width: 1200px; height: auto;
	margin: 100px auto 50px;
	transition: .5s;
}
#Left{
	float: left;
	width: 44%; height: auto;
	transition: .5s;
}

#Right{
	float: right;
	width: 44%; height: auto;
	transition: .5s;
}

#map{
	display: block;
	width: 100vw; height: auto;
	margin: auto;
	margin-bottom: 200px;
}

.underline{
border-bottom: solid 1px #000;
}
.underline a:hover{
opacity: 0.3;
transition: 1s;
}

.mailto1{
	font-family: serenity, sans-serif;
  	font-size: 12px;  font-weight: 400;  font-style: italic; color: #000;
  	line-height: 3;   Letter-spacing: 1px;
 	text-align: left;
}
.mailto1 a:hover{
	color: #C6C6C6;
}

@media screen and (max-width: 1280px) {
#box_main{
	width: 65vw;
	margin: auto;
}

#Left, #Right {
	width: 100%;
	margin: 0 0 50px 0;
}
}

@media screen and (max-width: 640px) {
.subtitle {
	font-size: 17px;
	line-height: 60px;	Letter-spacing: 2px;
	text-align: left;
}
#box_main{
	width: 86vw;
	margin: auto;
}	
#Left, #Right {
	width: 100%;
	margin: 0 0 5vw 0;
}
#box_main ul{
	margin-bottom: 15vw;
	}
#map{
	height: 100vw;
	margin-bottom: 100px;
}
}




/*写真トリミング*/
.ofi-1 {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}
.ofi-2 {
  object-fit: contain; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}
.ofi-3 {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 100%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 100%;' /* IE・Edge対応 */
}
.ofi-4 {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 70%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 70%;' /* IE・Edge対応 */
}
.ofi-5 {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 0%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 0%;' /* IE・Edge対応 */
}

img.zoom1{
	zoom: 150%;
}
@media screen and (max-width: 640px) {
.ofi-1 {
  object-fit: cover; /* 他のブラウザ用(＝通常の指定) */
  object-position: 50% 50%; /* 他のブラウザ用(＝通常の指定) */
  font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}
}








/* 2段組みの仕様 */
div.box-left{
    width:50%;
	float:left;
}

div.box-right{
    width:50%;
	float:right;
}


.boxContainer2 {
	overflow: hidden;
	margin: 0% auto 0%;
}

/* clearfix */
.boxContainer2:before,
.boxContainer2:after {
    content: "";
    display: table;
}
 
.boxContainer2:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.boxContainer2 {
    zoom: 1;
}
/* 2段組みの仕様 */





/*総合*/
img{
  display:inline;
}
.contents{
  width: 100%;  margin: 0px auto;
  overflow: hidden; /*floatの解除、ここがポイント*/
  position: relative; /*DWで正常にプレビューできるようになります。*/
  zoom:1; /*IE6でレイアウト崩れを防ぐためのものです。*/
}
.danraku{
	margin: 30px 0 0;
}
.font-palt {
      /* プロポーショナルメトリクスを有効にする */
      font-feature-settings: "palt" 1;
    }
.cb{
	clear: both;
}
br.pcOnly{display: inherit;}
br.spOnly{display: none;}
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 640px) {
	
.contents{width: 100vw; margin: 0 auto 0;}

.danraku{
	margin: 5vw 0 0;
}
	
br.pcOnly{display: none;}
br.spOnly{display: inherit;}
.pc { display: none !important; }
.sp { display: block !important; }
}


/*テキスト回転*/
.typ {
  opacity: 0;
  }
.typ span {
  opacity: 0;
  }