@charset 'utf-8';

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
}

.fGothic { font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; }
.fLibre { font-family: 'Libre Baskerville', serif; }

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; }

.device_click a,
.device_click input[type=image],
.device_click input[type=submit]
.device_click button { transition: ease .3s; }
.device_click a:hover,
.device_click input[type=image]:hover,
.device_click input[type=submit]:hover
.device_click button:hover { opacity: .8; }


/* clearfix
------------------------------------------------ */
.clearfix { clear: both; *zoom: 1; }
.clearfix:before,.clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }

/* container
------------------------------------------------ */
#container { position: relative; }
.wrap { position: relative; margin: 0 auto; max-width: 813px; }

@media only screen and (max-width: 893px) {
	.wrap { padding: 0 40px; }
}

@media only screen and (max-width: 768px) {
	body { font-size: 1.5rem; line-height: 1.8; }
}

@media screen and (min-width: 769px) {
  .pc {
    display: block !important; }

  .sp {
    display: none !important; } }
@media screen and (max-width: 768px) {
  .wrap {
    padding: 0; }

  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }

/* header
------------------------------------------------ */
#header { position: relative; width: 100%; z-index: 20; }
#header-top { position: relative; height: 76px; background: #fff; }
#header-top .wrap { max-width: 824px; }
.header--logo { padding-top: 33px; width: 165px; font-size: 1rem; line-height: 1.2; }
.header--logo a { display: block; }
#gnav { position: absolute; top: 34px; right: 0; width: 70%; }
.gnav__lists {}
.gnav__links { display: flex; justify-content: space-between; }
.gnav--item { position: relative; font-size: 1.2rem; line-height: 1.2; }
.gnav--item a { display: inline-block; position: relative; padding-bottom: 24px; vertical-align: top; }
.gnav--item .en { font-family: 'Libre Baskerville', serif; letter-spacing: .115em; }
.gnav--item .ja { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); transition: ease .3s; white-space: nowrap; letter-spacing: -.044em; color: #727171; opacity: 0; }
.device_click .gnav--item a:hover .en { text-decoration: underline; }
.device_click .gnav--item a:hover .ja { opacity: 1; }
.gnav--contact:before,
.gnav--contact:after { content: '｜'; }
.gnav--contact:before { padding-right: 1em; }
.gnav--contact:after { padding-left: 1em; }
.gnav--line_at { display: none; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 3rem; letter-spacing: .215em; line-height: 1.2; }
.gnav--line_at a { display: block; padding: 38px 0; width: 100%; background: #00b900; color: #fff; }
.gnav--line_at img { margin-right: 16px; width: 132px; }
.header--sp--menu { display: none; position: fixed; top: 10px; right: 10px; width: 50px; height: 50px; }
.header--sp--menu a,
.header--sp--menu span,
.header--sp--menu i { display: block; width: 100%; height: 100%; }
.header--sp--menu i { text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.header--sp--menu a:after,
.header--sp--menu span:before,
.header--sp--menu span:after,
.header--sp--menu i:before,
.header--sp--menu i:after { content: ' '; position: absolute; left: 50%; transition: ease .3s; margin-left: -10px; width: 20px; height: 1px; background: #000; }
.header--sp--menu a:after { top: 17px; }
.header--sp--menu span:before { top: 21px; }
.header--sp--menu span:after { top: 25px; }
.header--sp--menu i:before { top: 29px; }
.header--sp--menu i:after { top: 33px; }
.header--sp--menu a.on span:before,
.header--sp--menu a.on span:after,
.header--sp--menu a.on i:before { display: none; }
.header--sp--menu a.on:after,
.header--sp--menu a.on i:after { top: 25px; margin-left: -25px; width: 100%; background: #fff; }
.header--sp--menu a.on:after { transform: rotate(45deg); }
.header--sp--menu a.on i:after { transform: rotate(-45deg); }

.body--header--menu #gnav { display: none; top: 0; width: 100%; }
.body--header--menu .header--sp--menu { display: block; }
.body--header--gnav #gnav { position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: #f08d1d; }
.body--header--gnav .gnav__lists { display: table; width: 100%; height: calc(100% - 120px); }
.body--header--gnav .gnav__links { display: table-cell; vertical-align: middle; -webkit-overflow-scrolling: touch; overflow: auto; }
.body--header--gnav .gnav--item { margin-top: 6vh; text-align: center; font-size: 2.6vh; color: #fff; }
.body--header--gnav .gnav--item:first-child { margin-top: 0; }
.body--header--gnav .gnav--item a { padding-bottom: 0; color: #fff; }
.body--header--gnav .gnav--item .ja { display: block; position: relative; bottom: auto; left: auto; transform: none; margin-top: 10px; font-size: 1.3vh; color: #fff; opacity: 1; }
.body--header--gnav .gnav--line_at { display: block; }
.body--header--gnav .header--sp--menu { display: block; }

@media only screen and (max-width: 904px) {
	#header-top .wrap { padding: 0 40px; }
	#gnav { right: 40px; width: calc(100% - 280px); }
}

@media only screen and (max-width: 768px) {
	#header-top { height: 50px; }
	.header--logo { margin: 0 auto; padding-top: 18px; width: 130px; }
	#gnav { display: none; }
	.gnav--line_at { font-size: 1.4rem; letter-spacing: .108em; }
	.gnav--line_at a { padding: 20px 0; }
	.gnav--line_at img { margin-right: 4px; width: 60px; }
	.header--sp--menu { display: block; top: 0; right: 0; }

	.body--header--gnav .gnav__lists { height: calc(100% - 60px); }
	.body--header--gnav .gnav--item { font-size: clamp(1.8rem, 2.6vh, 2.4rem); }
	.body--header--gnav .gnav--item a { min-height: 44px; padding: 6px 12px; box-sizing: border-box; }
	.body--header--gnav .gnav--item .ja { margin-top: 4px; font-size: 1.4rem; }
}

@media only screen and (max-width: 320px) {
		.gnav--line_at { font-size: 1.2rem; letter-spacing: 0; }
}

/* main
------------------------------------------------ */
#main { display: block; position: relative; margin: 0 40px; padding: 40px 0 108px; width: calc(100% - 80px); }
.column--multi { position: relative; }
.column--main { float: left; width: 61.5763546798%; }
.column--side { float: right; width: 26.724137931%; }

/* title */
.title--1 { position: relative; margin-bottom: 74px; text-align: center; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; font-size: 6rem; font-weight: 400; letter-spacing: .1em; line-height: 1.2; }
.title--1:after { content: ' '; display: block; margin: 20px auto 0; width: 118px; height: 1px; background: #221714; }
.title--1 .ja { display: block; margin: 2px 0 -10px; font-size: 1.13rem; letter-spacing: .3em; }

/* btn */
.btn--more { margin: 32px auto 0; width: 258px; text-align: center; font-size: 1rem; line-height: 1.2; }
.btn--more a { display: block; padding: 15px 0; background: #fff; border: solid #231815 1px; }

/* topics__lists */
.topics__lists {}
.topics__lists--item {}
.topics__lists--photo { position: relative; width: 100%; height: 100%; overflow: hidden; }
.topics__lists--photo a { display: block; position: relative; }
.device_click .topics__lists--photo a img { transition: ease .3s; }
.device_click .topics__lists--photo a:hover img { transform: scale(1.1); }
.topics__lists__info { margin-top: 12px; padding: 0 4px; }
.topics__lists--date { margin-bottom: 8px; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.4; }
.topics__lists--title { font-size: 1.8rem; font-weight: 400; letter-spacing: .08em; line-height: 1.5; overflow-wrap: anywhere; }
.topics__lists__content { margin-top: 14px; font-size: 1.2rem; line-height: 2; overflow-wrap: anywhere; }
.topics__lists__content h2 { font-size: 1.3rem; line-height: 1.8; }
.topics__lists--more { margin-top: 28px; text-align: center; font-size: 1rem; line-height: 1.2; }
.topics__lists--more a { display: block; padding: 15px 0; background: #fff; border: solid #231815 1px; }

/* pagination */
.pagination { position: relative; margin-top: 120px; text-align: center; font-size: 1.4rem; }
.pagination a { display: inline-block; vertical-align: top; }
.pagination--link,
.pagination--current { margin: 0 12px; }
.pagination--link { color: #b3b3b3; }
.pagination--current { color: #f08d1d; }
.pagination--prev { float: left; }
.pagination--next { float: right; }

/* paging */
.paging { display: flex; position: relative; margin-top: 120px; }
.paging--direct { width: 50%; font-size: 1.4rem; }
.paging--direct a { display: inline-block; vertical-align: top; }
.paging--prev {}
.paging--next { text-align: right; }

/* post--none */
.post--none { padding: 60px 0; text-align: center; font-size: 1.4rem; }

@media only screen and (min-width: 769px) {
	/* topics__lists */
	/*
	.topics__lists--item { float: left; margin: 2.58302583026% 2.58302583026% 0 0; width: 31.6113161132%; }
	.topics__lists--item:nth-of-type(-n+3) { margin-top: 0; }
	.topics__lists--item:nth-of-type(3n) { margin-right: 0; }
	.topics__lists--item:nth-of-type(3n+1) { clear: both; }
	*/
	.topics__lists--item { float: left; margin: 48px 4% 0 0; width: 48%; }
	.topics__lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.topics__lists--item:nth-of-type(2n) { margin-right: 0; }
	.topics__lists--item:nth-of-type(2n+1) { clear: both; }

}

@media only screen and (max-width: 768px) {
	#main { margin: 0 16px; padding: 20px 0 54px; width: calc(100% - 32px); }
	.column--multi { position: relative; }
	.column--main,
	.column--side { float: none; width: auto; }
	.column--side { margin-top: 60px; padding-top: 60px; border-top: solid #231815 1px; }

	/* title */
	.title--1 { margin-bottom: 36px; font-size: 3rem; letter-spacing: .05em; }
	.title--1:after { margin-top: 16px ; width: 100px; }
	.title--1 .ja { margin: 4px 0 -4px; font-size: 1.3rem; letter-spacing: .15em; line-height: 1.5; }

	/* btn */
	.btn--more { margin-top: 28px; width: 80%; font-size: 1.3rem; }
	.btn--more a { padding: 14px 0; }

	/* topics__lists */
	.topics__lists--item { margin-top: 40px; }
	.topics__lists--item:first-child { margin-top: 0; }
	.topics__lists__info { margin-top: 10px; padding: 0 2px; }
	.topics__lists--date { margin-bottom: 8px; font-size: 1.4rem; letter-spacing: .05em; }
	.topics__lists--title { font-size: 1.8rem; letter-spacing: .05em; }
	.topics__lists__content { font-size: 1.5rem; line-height: 1.85; }
	.topics__lists__content h2 { font-size: 1.6rem; }
	.topics__lists__content a { display: inline-flex; align-items: center; min-height: 44px; }
	.topics__lists--more { margin: 20px auto 0; width: 80%; font-size: 1.3rem; }
	.topics__lists--more a { padding: 14px 0; }

	/* pagination */
	.pagination { margin-top: 60px; }

	/* paging */
	.paging { margin-top: 60px; }
}

/* side
------------------------------------------------ */
/* side--title */
.side--title { position: relative; margin-bottom: 10px; padding-bottom: 6px; border-bottom: dotted #231815 1px; font-size: 1.2rem; font-weight: 400; }

/* side__links */
.side__links {}
.side__links--item { position: relative; margin-top: 6px; font-size: 1.2rem; }
.side__links--item:first-child { margin-top: 0; }
.side__links--item a { display: block; position: relative; padding-right: 2em; }
.side__links--item .n { position: absolute; top: 0; right: 0; }

/* side__category */
.side__category { position: relative; }

/* side__archive */
.side__archive { position: relative; margin-top: 90px; }

@media only screen and (max-width: 768px) {
	/* side__category */

	/* side__archive */
	.side__archive { margin-top: 40px; }
}

/* side-float
------------------------------------------------ */
#side-float { display: none; position: fixed; top: 20%; right: 0; width: 40px; z-index: 10; }
.side__sns { margin: 0 auto; width: 18px; }
.side__sns--item { margin-top: 20px; width: 100%; }
.side__sns--item:first-child { margin-top: 0; }
.side__sns--item a { display: block; }
.side__sns--item svg { display: block; width: 100%; height: auto; color: #231815; }
.side--copyright { transform: rotate(-90deg) translateX(-310px); margin-left: 4px; white-space: nowrap; font-family: 'Libre Baskerville', serif; font-size: 1rem; letter-spacing: .06em; line-height: 1.2; }
.side--copyright:after { content: ' '; display: inline-block; margin: 4px 0 0 12px; width: 72px; height: 1px; background: #000; vertical-align: top; }
.side--copyright small { font-size: inherit; }

@media only screen and (max-width: 768px) {
	#side-float { top: 20%; width: 20px; }
	.side__sns { width: 16px; }
	.side__sns--item { margin-top: 12px; }
	.side--copyright { transform: rotate(-90deg) translateX(-252px); margin-left: 4px; font-size: .8rem; letter-spacing: .03em; }
	.side--copyright:after { margin: 4px 0 0 8px; width: 30px; }
}

/* footer
------------------------------------------------ */
#footer { position: relative; }
#footer-top { position: relative; padding: 35px 0; background: #231815; }
.footer--logo { margin: 0 auto; width: 128px; font-size: 1rem; line-height: 1.2; }
.footer--logo a { display: block; }
.footer--copyright { margin-top: 14px; text-align: center; font-family: 'Libre Baskerville', serif; font-size: 1rem; letter-spacing: .06em; line-height: 1.2; color: #fff; }
.footer--copyright small { font-size: inherit; }
.footer__links { margin-top: 34px; text-align: center; font-size: 1.2rem; letter-spacing: .115em; line-height: 1.2; color: #9fa0a0; }
.footer__links a { color: #9fa0a0; }
.device_click .footer__links a:hover { text-decoration: underline; color: #fff; opacity: 1; }
.footer__links__lists {}
.footer__links__lists--item { margin-top: 20px; }
.footer__links__lists--item:first-child { margin-top: 0; }
.footer__links__other { display: flex; justify-content: center; margin-top: 20px; }
.footer__links__other--item {}
.footer__links__other--item:before { content: '｜'; padding: 0 .2em; }
.footer__links__other--item:first-child:before { display: none; }
.footer__sns { display: flex; justify-content: center; margin-top: 26px; }
.footer__sns--item { margin: 0 14px; width: 20px; }
.footer__sns--item a { display: block; }
.footer__sns--item svg { display: block; width: 100%; height: auto; color: #fff; }
.footer--line_at { margin-top: 20px; text-align: center; font-size: 1.4rem; letter-spacing: .215em; line-height: 1.2; }
.footer--line_at a { display: inline-block; padding: 14px 48px; background: #00b900; border: solid #fff 1px; vertical-align: top; color: #fff; }
.footer--line_at img { margin-right: 10px; width: 63px; }
.footer__url { position: absolute; bottom: 0; right: 0; font-size: 1rem; letter-spacing: .095em; line-height: 1.2; color: #9fa0a0; }
.footer__url a { text-decoration: underline; color: #9fa0a0; }

@media only screen and (max-width: 893px) {
	.footer__url { position: relative; bottom: auto; right: auto; margin-top: 20px; text-align: center; }
}

@media only screen and (max-width: 768px) {
	#footer-top { padding: 20px 0; }
	.footer--logo { width: 106px; }
	.footer--copyright { margin-top: 10px; font-size: .8rem; letter-spacing: .03em; }
	.footer__links { margin-top: 24px; font-size: 1.4rem; letter-spacing: .056em; }
	.footer__links__lists--item { margin-top: 0; }
	.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
	.footer__links__other { margin-top: 4px; }
	.footer__links__other--item:first-child:before { display: none; }
	.footer__sns { margin-top: 12px; }
	.footer__sns--item { margin: 0 2px; width: 44px; }
	.footer__sns--item a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
	.footer__sns--item img, .footer__sns--item svg { width: 18px; }
	.footer--line_at { margin-top: 18px; font-size: 1.2rem; letter-spacing: .105em; }
	.footer--line_at a { padding: 12px; }
	.footer--line_at img { margin-right: 5px; width: 50px; }
	.footer__url { font-size: 1.2rem; letter-spacing: .04em; }
	.footer__url a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media only screen and (max-width: 320px) {
	.footer--line_at { font-size: 1rem; }
}

/* modal
------------------------------------------------ */
.modal__overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #f08d1d; z-index: 50; }
.modal__contents { display: none; position: fixed; top: 0; left: 50%; margin-left: -400px; width: 800px; background: #f08d1d; z-index: 100; }
.modal__frame { position: relative; margin: 0 auto; width: 758px; height: calc(100vh - 160px); -webkit-overflow-scrolling: touch; overflow: auto; }
.modal--close { display: none; position: fixed; top: 10px; right: 10px; width: 50px; height: 50px; z-index: 110; }
.modal--close span { display: block; position: relative; width: 100%; height: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.modal--close span:before,
.modal--close span:after { content: ' '; position: absolute; top: 25px; left: 25px; transition: ease .3s; margin-left: -25px; width: 100%; height: 1px; background: #fff; }
.modal--close span:after { transform: rotate(45deg); }
.modal--close span:before { transform: rotate(-45deg); }

/* member__modal */
.member__modal { display: flex; align-items: center; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; }
.member__modal--photo { width: 34.036939314%; }
.member__modal__info { margin-left: 6.3324538258%; width: 59.6306068602%; }
.member__modal--en { margin-bottom: 20px; font-size: 1.8rem; font-weight: 400; letter-spacing: .1em; color: #fff; }
.member__modal--name { font-size: 2rem; font-weight: 400; letter-spacing: .1em; }
.member__modal--name .p,
.member__modal--name .l { display: inline-block; vertical-align: baseline; }
.member__modal--name .p { margin-right: .6em; }
.member__modal--name .l { font-size: 3rem; }
.member__modal__content { margin-top: 42px; font-size: 1.4rem; letter-spacing: .1em; }

.body--modal--open { position: fixed; top: 0; left: 0; }

/* works__modal */
.works__modal { display: flex; align-items: center; font-family: 'Libre Baskerville', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', 'MS PMincho', 'ＭＳ Ｐ明朝', 'MS 明朝', 'HG明朝E', serif; }
.works__modal--photo { width: 34.036939314%; }
.works__modal__info { margin-left: 6.3324538258%; width: 59.6306068602%; }
.works__modal--en { margin-bottom: 20px; font-size: 1.8rem; font-weight: 400; letter-spacing: .1em; color: #fff; }
.works__modal--name { font-size: 3rem; font-weight: 400; letter-spacing: .1em; }
.works__modal__content { margin-top: 42px; font-size: 1.4rem; letter-spacing: .1em; }

@media only screen and (max-width: 820px) {
	.modal__contents { left: 0; margin-left: 0; width: 100%; }
	.modal__frame { padding: 20px 30px; width: auto; height: calc(100vh - 40px); }
}

@media only screen and (max-width: 768px) {
	.modal__frame { padding: 20px 16px; }
	/* member__modal */
	.member__modal { display: block; }
	.member__modal--photo { width: auto; }
	.member__modal__info { margin: 20px 0 0; width: auto; }
	.member__modal--en { margin-bottom: 16px; font-size: 1.4rem; letter-spacing: .05em; }
	.member__modal--name { font-size: 1.6rem; letter-spacing: .05em; }
	.member__modal--name .l { font-size: 2.6rem; }
	.member__modal__content { margin-top: 26px; font-size: 1.5rem; line-height: 1.8; letter-spacing: .03em; overflow-wrap: anywhere; }

	/* works__modal */
	.works__modal { display: block; }
	.works__modal--photo { width: auto; }
	.works__modal__info { margin: 20px 0 0; width: auto; }
	.works__modal--en { margin-bottom: 16px; font-size: 1.4rem; letter-spacing: .05em; }
	.works__modal--name { font-size: 2.6rem; letter-spacing: .05em; }
	.works__modal__content { margin-top: 26px; font-size: 1.5rem; line-height: 1.8; letter-spacing: .03em; overflow-wrap: anywhere; }
}
