@charset "UTF-8";
/* CSS Document */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background: #fff;
}
header, footer, main, nav, section, article, figure, figcaption {
	display: block;
}
html, body, header, footer, main, nav, section, article, figure, figcaption,
div, p, ul, ol, dl, li, dt, dd,
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: inherit;
}
body {
	line-height: 1;
	color: #000;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a{
	color: #000;
	text-decoration: none;
}
li{
	list-style-type: none;
}
i,em{
	font-style: normal;
}
strong{
	font-weight: normal;
}
img {
	vertical-align: bottom;
	border: none;
}
video {
	vertical-align: bottom;
}
.no-scroll{
	overflow: hidden;
}
a{
  color: #000;
  text-decoration: none;
}
body{
  font-size: 16px;
}
img{
  max-width: 100%;
  vertical-align: top;
  height: auto;
}
main{
	display: block;
}
*,
::before,
::after{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

::selection {
	color: #fff;
	background: #bcb3ac;
	opacity: 1;
}

/*本文*/
body{
	font-family: "Shuei KakuGo Gin M";	
}
#gheader .gnav ul li a{
	font-family: "Shuei KakuGo Gin M";
}
.news-list__item h3{
	font-family: "OptimaNovaLTPro-Regular", "Shuei KakuGo Gin M";
}
/*見出し*/
.detail-header h3,
.btm-header-related h2{
	font-family: "Noto Serif JP","MainichiNewspapersM Light",serif;
}
/*欧文*/
#gfooter .social-fb a,
.sec-header h2,
.button__detail .t2,
.article-list__item-text h2,
.btm-header h2,
.btm-header-s h2,
.news-list__item .date,
#gfooter .cr,
#gfooter .rechapcha-cr{
	font-family: "OptimaNovaLTPro-Regular";
}

.article-list__item-kv div strong{
	font-family: "OptimaNovaLTPro-Regular","Noto Serif JP","MainichiNewspapersM Light",serif;
}
.article-list__item-text h3{
	font-family: "OptimaNovaLTPro-Regular","Shuei KakuGo Gin M";
}
.works-list__top-item .detail-header h3{
	font-family: "OptimaNovaLTPro-Regular","Noto Serif JP","MainichiNewspapersM Light",serif;
}
.works-list__top-item .detail-header h4{
	font-family: "OptimaNovaLTPro-Regular","Shuei KakuGo Gin M";
}
.grecaptcha-badge {
	visibility: hidden;
}

/*
秀英角ゴシック銀 M
CSSの指定例： font-family: "秀英角ゴシック銀 M" または "Shuei KakuGo Gin M”

毎日新聞明朝 L JIS2004（AP版）
CSSの指定例： font-family: "毎日新聞明朝 L" または "MainichiNewspapersM Light”
*/

@keyframes pagetop{
	0%{
		transform:translateY(100%)
	}
	100%{
		transform:translateY(0)
	}
}

@keyframes focus-in {
    0% {
        opacity: 0;
        filter:blur(20px);
    }
    60% {
        opacity:1;
    }
    100% {
        filter:blur(0)
    }
}

/*ヘッダー 最初のアクセス時*/

#gheader{
	opacity: 0;
}
/*#gheader{
	opacity: 1;
}*/

.show_header #gheader{
	opacity: 1;
	transition: opacity 1500ms ease;
}
.is-accessed #gheader{
	opacity: 1;
}


/* loading
===========================================================================*/

.loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 100000;
}

.loading-logo{
	position: absolute;
	margin: auto;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	visibility: hidden;
}
.loading-logo span{
	position: relative;
	display: block;
	height: 100%;
}
.loading-logo span:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 200%;
	height: 100%;
	z-index: 20;
	transform: translateX(0);
	background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0) 70%);
}
.is_loading .loading-logo span:after{
	transition: transform 3000ms ease;
	transform: translateX(100%);
}


.is_loading .loading-logo img{
	visibility: visible;
	animation: focus-in 1500ms ease 1;
}
.is_loaded .loading{
	opacity: 0;
	pointer-events: none;
	transition: opacity 1000ms ease;
}
.is_loader_cleared .loading{
	visibility: hidden;
}

/* motion */
.motion-fd{
	opacity: 0;
}
.motion-fd-s{
	opacity: 0;
}
.motion-fd-l{
	opacity: 0;
	transform: translateX(-50px);
}

.motion-fd.on{
	opacity: 1;
	transition: opacity 3000ms ease;
}
.motion-fd-s.on{
	opacity: 1;
	transition: opacity 1500ms ease;
}
.motion-fd-l.on{
	opacity: 1;
	transform: translateX(0);
	transition: opacity 1000ms ease,transform 1000ms ease;
}




@keyframes toRight {
  100% {
    background-position: left 0% center;
  }
}
@keyframes listLoading{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}

.motion-fd-title{
	padding: 10px 0;
	position: relative;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 300% 300%;
  color: transparent;
  background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 60%);
  background-position: left 100% center;
}
.motion-fd-title.on{
  animation: toRight 6000ms ease forwards;
}
.motion-fd-title2{
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 300% 300%;
  color: transparent;
  background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 60%);
  background-position: left 100% center;
}
.motion-fd-title2.on{
  animation: toRight 6000ms ease forwards;
}



.motion-fd-breadcrumb ul{
	position: relative;
	display: inline-block;
}
.motion-fd-breadcrumb ul:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 200%;
	height: 100%;
	z-index: 20;
	transform: translateX(-50%);
  background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0) 70%);
}
.motion-fd-breadcrumb.on ul:after{
	transition: transform 6000ms ease;
	transform: translateX(50%);
}

.motion-fd-head{
	position: relative;
}
.motion-fd-head:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 200%;
	height: 100%;
	z-index: 20;
	transform: translateX(0);
  background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0) 70%);
}
.motion-fd-head.on:after{
	transition: transform 6000ms ease;
	transform: translateX(100%);
}


@media screen and (min-width: 1680px) {
	.article-list .article-list__item{
		width: 25%;
	}
	.article-list .article-list__item:nth-child(n+5){
		margin-top: 60px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1680px) {
	.article-list .article-list__item{
		width: 33.3333%;
	}
	#top .article-list .article-list__item:nth-child(4){
		display: none;
	}
	.article-list .article-list__item:nth-child(n+4){
		margin-top: 60px;
	}

}
@media screen and (min-width: 768px){
/*	#top .article-list .article-list__item{
		width: 33.3333%;
	}*/
}


@media screen and (min-width: 768px) {

	body {
		font-size: 16px;
		width: 100%;
		letter-spacing: 0.04em;
	}
	.ignore-pc{
		display: none;
	}
	#wrap{
		position: relative;
		padding-top: 100px;
		width: 100%;
		overflow: hidden;
	}



/* loading
===========================================================================*/

	.loading-logo{
		width: 410px;
	}

	.list-loading{
		margin: 60px 0 0;
		opacity: 0;
		transition: opacity 500ms ease;		
	}

	.list-loading span{
		display: block;
		margin: auto;
		width: 46px;
		height: 46px;
		animation: listLoading 1000ms linear infinite;
		background: url(../../common/img/list_loading.png);
		background-size: 100% 100%;
	}
	.list-loading.on{
		opacity: 1;
	}

/* gheader
===========================================================================*/

	#gheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 60px;
		background: #fff;
		z-index: 10000;
	}

	.gheader-inner{
		position: relative;
		height: 100px;
	}

	.logo-header{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.logo-header a{
		display: block;
		width: 220px;
	}


/* gfooter
===========================================================================*/

	#gfooter{
		position: relative;
		padding: 0 30px;
	}
	.gfooter-inner{
		position: relative;
	}
	.gfooter-info{
		padding: 70px 0;		
	}
	.gfooter-address{
		margin: 20px 0 0;
		font-size: 16px;
	}
	.gfooter-address p{
		letter-spacing: 0.06em;
	}
	#gfooter .social-fb{
		margin: 20px 0 0;
	}
	#gfooter .social-fb a{
		position: relative; 
		display: inline-block;
		padding: 0 0 0 30px;
		font-size: 16px;
		transition: color 1000ms ease;
	}
	#gfooter .social-fb a:hover{
		color: #bcb3ac;
	}
	#gfooter .social-fb a:before,
	#gfooter .social-fb a:after{
		position: absolute;
		content: "";
		margin: auto;
		top: -2px;
		left: 0;
		bottom: 0;
		display: block;
		width: 20px;
		height: 20px;
		transition: opacity 1000ms ease;
	}
	#gfooter .social-fb a:before{
		opacity: 1;
		background: url(../../common/img/icon_fb.svg) 0 0 no-repeat;
		z-index: 10;
	}
	#gfooter .social-fb a:hover:before{
		opacity: 0;
	}
	#gfooter .social-fb a:after{
		opacity: 0;
		background: url(../../common/img/icon_fb_on.svg) 0 0 no-repeat;
	}
	#gfooter .social-fb a:hover:after{
		opacity: 1;
		z-index: 20;

	}
	
	.logo-footer a{
		display: block;
		width: 300px;
	}
	.btn-pt{
		position: absolute;
		right: 0;
		bottom: 80px;
	}
	.btn-pt a{
		display: block;
		width: 21px;
		height: 28px;
		overflow: hidden;
	}
	.btn-pt a:after{
		content: "";
		display: block;
		width: 21px;
		height: 28px;
		background: url(../../common/img/icon_pt.svg) 0 0 no-repeat;
	}
	.btn-pt a:hover:after{
		animation: pagetop 500ms ease 1;
	}
	#gfooter .cr{
		position: absolute;
		right: 0;
		text-align: right;
		bottom: 20px;
		line-height: 1.6;
		font-size: 12px;
	}
	.rechapcha-cr{
		display: none;
	}
	#contact-form #gfooter .btn-pt{
		bottom: 110px;
	}
	#contact-form #gfooter .rechapcha-cr{
		display: block;
		margin: 0 0 10px;
		font-size: 12px;
	}
	#contact-form #gfooter .rechapcha-cr a{
		border-bottom: 1px solid #000;
		transition: border 600ms ease;
	}
	#contact-form #gfooter .rechapcha-cr a:hover{
		border-bottom: 1px solid transparent;
	}


/* section
===========================================================================*/

	.sec-inner{
		margin: auto;
		padding: 0 50px;
		max-width: 1200px;
	}
	.sec-header h2{
		padding: 0 0 20px;
		font-size: 110px;
		letter-spacing: 0.04em;
	}
	section + section{
		margin-top: 240px;
	}
	.detail-header{
		padding-left: 5%;
	}
	.detail-header h3{
		font-size: 40px;
		letter-spacing: 0.2em;
		line-height: 1.5;
	}
	.detail-header h3 + p{
		margin-top: 30px;
	}
	.detail-header h3 + h4{
		margin-top: 15px;
		letter-spacing: 0.02em;
	}	
	.detail-header p{
		line-height: 2;
		font-size: 20px;
		letter-spacing: 0.04em;
	}

/* works
===========================================================================*/
	
	.works-list__top-item + .works-list__top-item{
		margin-top: 100px;
	}
	.works-list__top-item a{
		display: block;
		transition: opacity 500ms ease;
	}
	.works-list__top-item a:hover{
		opacity: 0.7;
	}
	.works-list__top-item figure{
		margin-top: 40px;
	}

/* news
===========================================================================*/

	.news-list__item{
		border-bottom: 1px solid #000;
	}
	.news-list__item a{
		position: relative;
		display: block;
		padding: 0 10px 80px;
	}
	.news-list__item + .news-list__item a{
		padding-top: 30px;
	}
	.news-list__item .date{
		font-size: 16px;
		letter-spacing: 0.08em;
	}
	.news-list__item h3{
		position: relative;
		margin: 15px 0 0;
		font-size: 18px;
		line-height: 1.6;
		letter-spacing: 0.02em;
	}

	.news-list__item a.link-internal:after{
		content: "";
		position: absolute;
		margin: auto;
		right: 25px;
		bottom: 25px;
		display: block;
		width: 20px;
		height: 15px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.news-list__item a.link-internal:hover:after{
		transform: translateX(10px);
	}


	.news-list__item a.link-external h3{
		will-change: background;		
	}
	.news-list__item a.link-external h3 span{
		position: relative;
		display: inline-block;
		top: 3px;
		margin: 0 0 0 8px;
		width: 19px;
		height: 19px;
	}
	.news-list__item a.link-external h3 span:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 19px;
		height: 19px;
		background: url(../../common/img/icon_blank.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		transition: opacity 500ms ease;
	}
	.news-list__item a.link-external h3 span:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 19px;
		height: 19px;
		background: url(../../common/img/icon_blank_on.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		transition: opacity 500ms ease;
	}
	.news-list__item a.link-external:hover h3 span:after{
		opacity: 0;
	}
	.news-list__item a.link-external:hover h3 span:before{
		opacity: 1;
	}



/* article-list
===========================================================================*/

	.article-list{
		margin: 50px -9px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.article-list .article-list__item{
		padding: 0 9px;
	}
	.article-list__item a .article-list__item-text{
		transition: color 500ms ease;
	}
	.article-list__item a:hover .article-list__item-text{
		color: #bcb3ac;
	}
	.article-list__item a{
		display: block;
		transition: opacity 500ms ease;
	}
	.article-list__item a:hover{
		opacity: 0.7;
	}


	.article-list__item-kv{
		position: relative;
		padding-top: 57.26%;
		background: #f9f7f5;
	}
	.article-list__item-kv div{
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 10%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.article-list__item-kv img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}
	.article-list__item-kv div strong{
		font-size: min(1.73vw,24px);
		letter-spacing: 0.06em;
		line-height: 1.6;
	}
	.article-list__item-text{
		padding: 25px 10%;		
	}
	.article-list__item-text h2{
		font-size: 14px;
		color: #7a695d;
	}
	.article-list__item-text h3{
		margin: 10px 0 0;
		font-size: 16px;
		letter-spacing: 0.02em;
		line-height: 1.6;
	}

/* contact
===========================================================================*/

	#contact{
		padding: 110px 0;
		background: #f9f7f5;
	}
	#related{
		padding: 110px 0;
	}
	.article-detail	.btm-section-multi{
		margin-top: 120px;
	}

	#btm-section.btm-section-multi #related,
	#btm-section.btm-section-multi #contact,
	#btm-section.btm-section-multi #works{
		margin: 0;
		padding: 0 0 70px;
	}

	.btm-section-multi #works{
		background: #f9f7f5;
	}

/* btm-section
===========================================================================*/

	.btm-header{
		text-align: center;
	}
	.btm-header h2{
		font-size: 110px;
	}
	.btm-header h2 + p{
		margin: 10px 0 0;
		font-size: 18px;
		letter-spacing: 0.08em;
	}
	.btm-header h2 + p br{
		display: none;
	}

	.btm-header-s{
		text-align: center;
	}
	.btm-header-s h2{
		font-size: 70px;
	}
	.btm-header-s h2 + p{
		margin: 10px 0 0;
		font-size: 18px;
		letter-spacing: 0.08em;
	}
	.btm-header-related{
		text-align: center;
	}
	.btm-header-related h2{
		font-size: 40px;
	}
	.btm-header-related p{
		position: relative;
		margin: 0 0 40px;
		font-size: 20px;
		letter-spacing: 0.04em;
	}


	.btm-section-multi{
		display: flex;
	}
	.btm-section-multi > div{
		width: 50%;
	}
	/*追記*/
	.btm-section-multi > div{
		display: flex;
		height: 380px;
		flex-direction: column;
		justify-content: flex-end;
	}
	.btm-section-multi .button-link{
		width: 100%;
	}
	.btm-header-related p{
		line-height: 1.5;
	}
	.btm-header-s h2 + p{
		line-height: 1.5;
	}
	.btm-section-multi #related .button-link--s{
		margin: 40px auto 0;
	}

/* button
===========================================================================*/

	.button-link--l{
		margin: 50px auto 0;
		max-width: 750px;
		height: 150px;
	}

	.button-link--l a{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #fff;
		letter-spacing: 0.08em;
		border: 1px solid #bcb3ac;
		transition: border 500ms ease;
	}
	.button-link--l a strong{
		display: block;
		font-size: 26px;
	}
	.button-link--l a i br{
		display: none;
	}

	.button-link--l a strong + i{
		display: inline-block;
		margin: 20px 0 0;
		font-size: 18px;
		letter-spacing: 0.08em;
	}
	.button-link--l a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 40px;
		bottom: 0;
		display: block;
		width: 20px;
		height: 15px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.button-link--l a:hover{
		border: 1px solid #000;
	}
	.button-link--l a:hover:after{
		transform: translateX(10px);
	}

	.button-link--s{
		margin: 25px auto 0;
		max-width: 500px;
		height: 100px;
	}

	.button-link--s a{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #fff;
		letter-spacing: 0.08em;
		border: 1px solid #bcb3ac;
		transition: border 500ms ease;
	}
	.button-link--s a strong{
		display: block;
		font-size: 26px;
	}
	.button-link--s a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 40px;
		bottom: 0;
		display: block;
		width: 20px;
		height: 15px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.button-link--s a:hover{
		border: 1px solid #000;
	}
	.button-link--s a:hover:after{
		transform: translateX(10px);
	}

	.button__detail-wrap{
		display: flex;
		margin: 180px 0 160px;
		justify-content: center;
		flex-direction: row-reverse;
	}
	.button__detail-wrap .button__detail{
		margin: 0 20px;
	}
	.button__detail button{
		background: none;
		border: none;
	}
	.button__detail{
		margin: 90px 0 0;
		display: flex;
		justify-content: center;
	}
	.button__detail a,
	.button__detail div{
		display: block;
		text-align: center;
		font-size: 20px;
		letter-spacing: 0.1em;
		color: #000;
	}
	.button__detail .hr{
		position: relative;
		padding: 20px 0;
		width: 360px;
	}
	.button__detail .hr span{
		display: block;
		width: 100%;
		height: 1px;
		background: #000;
	}
	.button__detail .hr:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: -26px;
		bottom: 0;
		display: block;
		width: 20px;
		height: 15px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.button__detail a:hover .hr:after,
	.button__detail button:hover .hr:after{
		transform: translateX(10px);
	}
	.button__detail-back .hr:after{
		right: inherit;
		left: -26px;
		background: url(../../common/img/arrow_l.svg) 0 0 no-repeat;
		background-size: 100% 100%;		
	}
	.button__detail-back a:hover .hr:after,
	.button__detail-back button:hover .hr:after{
		transform: translateX(-10px);
	}



}




@media screen and (min-width: 1101px) {

	.btn-menu{
		display: none;
	}

	.gnav{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.gnav-inner{
		display: flex;		
	}
	.gnav ul{
		position: relative;
		display: flex;
	}
	.gnav ul li + li{
		margin-left: 30px;
	}
	.gnav ul + ul{
		margin-left: 30px;
		padding-left: 30px;
	}
	.gnav ul + ul:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 0px;
		margin-top: -13px;
		display: block;
		width: 1px;
		height: 24px;
		background: #000;
	}
	.gnav ul li a{
		display: block;
		transition: color 500ms ease;
		letter-spacing: 0.08em;
	}
	.gnav ul li.is_active a,
	.gnav ul li a:hover{
		color: #bcb3ac;
	}

}


@media screen and (min-width: 1101px) and (max-width: 1250px) {
	.gnav ul li + li {
		margin-left: 18px;
	}
	.gnav ul + ul {
		margin-left: 18px;
		padding-left: 18px;
	}
	.gnav ul li a{
		font-size: 15px;
	}
	#gheader {
		padding: 0 15px;
	}
}




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

	#gheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 15px;
		background: #fff;
		z-index: 10000;
	}
	.btn-menu{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		width: 34px;
		height: 30px;
		z-index: 10000;
	}
	.btn-menu span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 34px;
		height: 13px;
	}
	.btn-menu span i{
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		width: 30px;
		height: 1px;
		background: #000;
		transition: all 500ms ease;
	}
	.btn-menu span i:nth-child(1){
		top: 0;
	}
	.btn-menu span i:nth-child(2){
		top: 0;
		bottom: 0;
	}
	.btn-menu span i:nth-child(3){
		bottom: 0;
	}
	.btn-menu span i:nth-child(4){
		top: 0;
		bottom: 0;
	}

	.btn-menu.on-click span i:nth-child(1){
		opacity: 0;
	}
	.btn-menu.on-click span i:nth-child(2){
		top: 0;
		bottom: 0;
		width: 34px;
		transform: rotate(30deg);
	}
	.btn-menu.on-click span i:nth-child(3){
		opacity: 0;
	}
	.btn-menu.on-click span i:nth-child(4){
		top: 0;
		bottom: 0;
		width: 34px;
		transform: rotate(-30deg);
	}

	.gnav{
		position: fixed;
		display: flex;
		align-items: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		background: #ffff;
		opacity: 0;
		visibility: hidden;
	}
	.gnav.ease{
		transition: opacity 500ms ease, visibility 500ms ease;
	}
	.on-menu .gnav{
		opacity: 1;
		visibility: visible;		
	}
	.gnav-inner{
		padding: 0 0 0 50%;
		transform: translateY(calc((488px - 100vh) / 4));
		transform: translateY(calc((488px - 100dvh) / 4));
	}
	.gnav ul{
		position: relative;
	}
	.gnav ul + ul{
		margin-top: 20px;
		padding-top: 20px;
	}
	.gnav ul + ul:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0px;
		display: block;
		width: 30px;
		height: 1px;
		background: #000;
	}
	.gnav ul li a{
		display: block;
		padding: 20px 0;
		transition: color 500ms ease;
		font-size: 16px;
		letter-spacing: 0.08em;
	}
	.gnav ul li.is_active a{
		color: #bcb3ac;
	}


}



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

	body {
		width: 100%;
		letter-spacing: 0.04em;
/*		font-size: 12px;
*/		font-size: 13px;
	}
	.ignore-sp{
		display: none;
	}
	#wrap{
		position: relative;
		padding-top: 50px;
		width: 100%;
		overflow: hidden;
	}


/* loading
===========================================================================*/

	.loading-logo{
		width: 237px;
	}
	.list-loading{
		margin: 30px 0 0;
		opacity: 0;
		transition: opacity 500ms ease;		
	}
	.list-loading span{
		display: block;
		margin: auto;
		width: 23px;
		height: 23px;
		animation: listLoading 1000ms linear infinite;
		background: url(../../common/img/list_loading.png);
		background-size: 100% 100%;
	}
	.list-loading.on{
		opacity: 1;
	}

/* gheader
===========================================================================*/

	#gheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 15px;
		background: #fff;
		z-index: 10000;
	}
	.gheader-inner{
		position: relative;
		height: 50px;
	}

	.logo-header{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.logo-header a{
		display: block;
		width: 140px;
	}


/* gfooter
===========================================================================*/

	#gfooter{
		position: relative;
		padding: 0 20px;
	}
	.gfooter-inner{
		position: relative;
	}
	.gfooter-info{
		padding: 40px 0;		
	}
	.gfooter-address{
		margin: 20px 0 0;
		font-size: 10px;
	}
	.gfooter-address p{
		letter-spacing: 0.04em;
	}
	#gfooter .social-fb{
		margin: 22px 0 0;
	}
	#gfooter .social-fb a{
		position: relative; 
		display: inline-block;
		padding: 0 0 0 30px;
		font-size: 12px;
		transition: opacity 500ms ease;
	}
	#gfooter .social-fb a:before{
		position: absolute;
		content: "";
		margin: auto;
		top: -2px;
		left: 0;
		bottom: 0;
		display: block;
		width: 20px;
		height: 20px;
		background: url(../../common/img/icon_fb.svg) 0 0 no-repeat;
	}
	.logo-footer a{
		display: block;
		width: 200px;
	}
	.btn-pt{
		position: absolute;
		right: 0;
		bottom: 80px;
	}
	.btn-pt a{
		display: block;
		width: 17px;
		height: 13px;
		overflow: hidden;
	}
	.btn-pt a:after{
		content: "";
		display: block;
		width: 17px;
		height: 13px;
		background: url(../../common/img/icon_pt.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	#gfooter .cr{
		position: absolute;
		right: 0;
		text-align: right;
		bottom: 15px;
		line-height: 1.8;
		font-size: 10px;
	}
	.rechapcha-cr{
		display: none;
	}
	#contact-form .gfooter-info{
		padding: 40px 0 10px;		
	}

	#contact-form #gfooter .rechapcha-cr{
		display: block;
		margin: 0 0 10px;
		font-size: 10px;
	}
	#contact-form #gfooter .cr{
		position: relative;
		padding: 0 0 20px;
		right: 0;
		text-align: right;
		bottom: 0;
		line-height: 1.8;
		font-size: 10px;
	}
	#contact-form #gfooter .btn-pt{
		bottom: 128px;
	}
	#contact-form #gfooter .rechapcha-cr a{
		border-bottom: 1px solid #000;
	}

/* gnav
===========================================================================*/

/*	.btn-menu{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		width: 34px;
		height: 30px;
		z-index: 10000;
	}
	.btn-menu span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 34px;
		height: 13px;
	}
	.btn-menu span i{
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		width: 30px;
		height: 1px;
		background: #000;
		transition: all 500ms ease;
	}
	.btn-menu span i:nth-child(1){
		top: 0;
	}
	.btn-menu span i:nth-child(2){
		top: 0;
		bottom: 0;
	}
	.btn-menu span i:nth-child(3){
		bottom: 0;
	}
	.btn-menu span i:nth-child(4){
		top: 0;
		bottom: 0;
	}

	.btn-menu.on-click span i:nth-child(1){
		opacity: 0;
	}
	.btn-menu.on-click span i:nth-child(2){
		top: 0;
		bottom: 0;
		width: 34px;
		transform: rotate(30deg);
	}
	.btn-menu.on-click span i:nth-child(3){
		opacity: 0;
	}
	.btn-menu.on-click span i:nth-child(4){
		top: 0;
		bottom: 0;
		width: 34px;
		transform: rotate(-30deg);
	}

	.gnav{
		position: fixed;
		display: flex;
		align-items: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #ffff;
		opacity: 0;
		visibility: hidden;
	}
	.gnav.ease{
		transition: opacity 500ms ease, visibility 500ms ease;
	}
	.on-menu .gnav{
		opacity: 1;
		visibility: visible;		
	}
	.gnav-inner{
		padding: 0 0 0 50%;
	}
	.gnav ul{
		position: relative;
	}
	.gnav ul + ul{
		margin-top: 20px;
		padding-top: 20px;
	}
	.gnav ul + ul:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0px;
		display: block;
		width: 30px;
		height: 1px;
		background: #000;
	}
	.gnav ul li a{
		display: block;
		padding: 20px 0;
		transition: color 500ms ease;
		font-size: 16px;
		letter-spacing: 0.08em;
	}
	.gnav ul li.is_active a{
		color: #bcb3ac;
	}
*/

/* section
===========================================================================*/

	.sec-inner{
		margin: auto;
		padding: 0 30px;
	}
	.sec-header h2{
		padding: 0 0 6px;
		margin: 0 0 0 -8px;
		font-size: 50px;
		letter-spacing: 0.04em;
	}
	section + section{
		margin-top: 100px;
	}
	.detail-header h3{
		font-size: 20px;
		letter-spacing: 0.08em;
		line-height: 1.5;
	}

	.detail-header h3 + p{
		margin-top: 10px;
	}
	.detail-header h3 + h4{
		margin-top: 10px;
		font-size: 10px;
	}	
	.detail-header p{
		line-height: 2;
		letter-spacing: 0.04em;
	}

/* works
===========================================================================*/
	
	.works-list__top-item + .works-list__top-item{
		margin-top: 45px;
	}
	.works-list__top-item a{
		display: block;
		transition: opacity 500ms ease;
	}
	.works-list__top-item figure{
		margin: 20px -15px 0;
	}
	.works-list__top-item .detail-header h3 br{
		display: none;
	}
/* news
===========================================================================*/

	.news-list__item{
		border-bottom: 1px solid #000;
	}
	.news-list__item a{
		position: relative;
		display: block;
		padding: 30px 45px 50px 10px;
	}
	.news-list__item .date{
		letter-spacing: 0.08em;
	}
	.news-list__item h3{
		position: relative;
		margin: 5px 0 0;
		line-height: 2;
		letter-spacing: 0.04em;
	}

	.news-list__item a.link-internal:after{
		content: "";
		position: absolute;
		margin: auto;
		right: 10px;
		bottom: 25px;
		display: block;
		width: 17px;
		height: 13px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.news-list__item a.link-external h3{
		will-change: background;		
	}
	.news-list__item a.link-external h3 span{
		position: relative;
		top: 2px;
		margin: 0 0 0 6px;
		display: inline-block;
		width: 12px;
		height: 12px;
	}
	.news-list__item a.link-external h3 span:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 12px;
		height: 12px;
		background: url(../../common/img/icon_blank.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		transition: opacity 500ms ease;
	}
	.news-list__item a.link-external h3 span:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 12px;
		height: 12px;
		background: url(../../common/img/icon_blank_on.svg) 50% 50% no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		transition: opacity 500ms ease;
	}


/* article-list
===========================================================================*/

	.article-list{
		margin: 20px 15px 0;
	}
	.article-list .article-list__item + .article-list__item{
		margin-top: 40px;
	}

	.article-list__item-kv{
		position: relative;
		padding-top: 57.26%;
		background: #f9f7f5;
	}
	.article-list__item-kv div{
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 10%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.article-list__item-kv img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}
	.article-list__item-kv div strong{
		font-size: min(5.33vw,20px);
		letter-spacing: 0.08em;
		line-height: 1.6;
	}
	.article-list__item-text{
		padding: 25px 10px;		
	}
	.article-list__item-text h2{
		color: #7a695d;
		letter-spacing: 0.06em;
	}
	.article-list__item-text h3{
		margin: 5px 0 0;
		letter-spacing: 0.04em;
		line-height: 1.6;
	}

/* contact
===========================================================================*/

	#contact{
		padding: 50px 30px;
		background: #f9f7f5;
	}
	#related{
		padding: 110px 0;
	}
	.article-detail	.btm-section-multi{
		margin-top: 50px;
	}
	#btm-section.btm-section-multi #related,
	#btm-section.btm-section-multi #contact,
	#btm-section.btm-section-multi #works{
		margin: 0;
		padding: 40px 30px;
	}



	.btm-section-multi #works{
		background: #f9f7f5;
	}

/* btm-section
===========================================================================*/

	.btm-header{
		text-align: center;
	}
	.btm-header h2{
		font-size: 50px;
	}
	.btm-header h2 + p{
		margin: 10px 0 0;
		text-align: center;
		line-height: 2;
	}


	.btm-header-s{
		text-align: center;
	}
	.btm-header-s h2{
		font-size: 50px;
	}
	.btm-header-s h2 + p{
		margin: 10px 0 0;
		text-align: center;
		line-height: 2;
		letter-spacing: 0.04em;
	}


	.btm-header-related{
		text-align: center;
	}
	.btm-header-related h2{
		font-size: 26px;
	}
	.btm-header-related p{
		margin: 0 0 20px;
		letter-spacing: 0.04em;
		line-height: 2;
	}
	.btm-header-related p i{
		display: block;
		line-height: 2;
		text-align: center;
	}



/* button
===========================================================================*/

	.button-link--l{
		margin: 20px auto 0;
		height: 130px;
	}

	.button-link--l a{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #fff;
		letter-spacing: 0.08em;
		border: 1px solid #bcb3ac;
		transition: border 500ms ease;
	}
	.button-link--l a strong{
		display: block;
		font-size: 18px;
		letter-spacing: 0.02em;
	}
	.button-link--l a strong + i{
		display: inline-block;
		margin: 15px 0 0;
		line-height: 1.6;
		text-align: center;
	}
	.button-link--l a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		display: block;
		width: 17px;
		height: 13px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.button-link--s{
		margin: 25px auto 0;
		height: 80px;
	}

	.button-link--s a{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #fff;
		letter-spacing: 0.08em;
		border: 1px solid #bcb3ac;
		transition: border 500ms ease;
	}
	.button-link--s a strong{
		display: block;
		font-size: 18px;
	}
	.button-link--s a:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 20px;
		bottom: 0;
		display: block;
		width: 17px;
		height: 13px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}



	.button__detail-wrap{
			margin: 50px 0 0;
	}
	.button__detail-wrap .button__detail{
		margin: 20px auto;
	}
	.button__detail button{
		background: none;
		width: 100%;
		border: none;
	}
	.button__detail{
		margin: 50px auto 0;
		width: 100%;
		max-width: 250px;
		display: flex;
		justify-content: center;
	}
	.button__detail a,
	.button__detail div{
		display: block;
		text-align: center;
		font-size: 14px;
		width: 100%;
		letter-spacing: 0.1em;
		color: #000;
	}
	.button__detail .hr{
		position: relative;
		padding: 12px 0;
		width: 100%;
	}
	.button__detail .hr span{
		display: block;
		width: 100%;
		height: 1px;
		background: #000;
	}
	.button__detail .hr:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: -23px;
		bottom: 0;
		display: block;
		width: 17px;
		height: 13px;
		background: url(../../common/img/arrow_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 500ms ease;
	}
	.button__detail-back .hr:after{
		right: inherit;
		left: -23px;
		background: url(../../common/img/arrow_l.svg) 0 0 no-repeat;
		background-size: 100% 100%;		
	}


}


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


}






/* Sticky header glass effect */
#gheader {
	background-color: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
}


/* Fixed page-top button (except Works detail) */
.btn-pt.is-floating{
	position: fixed;
	right: 32px;
	bottom: 132px;
	width: 48px;
	height: 48px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(1.3);
	transform-origin: center;
	transition: opacity 300ms ease, visibility 300ms ease, transform 520ms cubic-bezier(.22,.85,.28,1);
}
.btn-pt.is-floating.is-visible{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
}
.btn-pt.is-floating a{
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.16);
	overflow: hidden;
}
.btn-pt.is-floating a:after{
	position: absolute;
	inset: 0;
	width: 16px;
	height: 22px;
	margin: auto;
	background-size: contain;
}
body.load-layer .btn-pt.is-floating{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media screen and (max-width: 879px){
	.btn-pt.is-floating{
		right: 16px;
		bottom: calc(116px + env(safe-area-inset-bottom));
		width: 44px;
		height: 44px;
	}
	.btn-pt.is-floating a{
		width: 44px;
		height: 44px;
	}
	.btn-pt.is-floating a:after{
		width: 14px;
		height: 19px;
	}
}

@media screen and (max-width: 699px){
	.btn-pt.is-floating{
		bottom: calc(58px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce){
	.btn-pt.is-floating{ transform: scale(1); transition-duration: 1ms; }
}