@charset "utf-8";
html {
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",Geneva,Arial,Verdana,sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
    font-size: 100px;
	font-size: 13.33vw; /* 100px/750px */
    line-height: 1em;
    color: #000000;
	background-color: #fbf6ef;
}
*{
	margin:0;
	padding:0;
}
body {
	font-size: 0.16em;
}
a {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
}
a img{
	border: none;
}
.fcl { 
	zoom: 100%;
}
.fcl:after {
	content: " "; 
	clear: both; 
	height: 0; 
	display: block; 
	visibility: hidden;
}
img,
svg{
    width: 100%;
	vertical-align:middle;
	margin:0;
	padding:0;
}
html.webkit img[src$=svg] { transform: translate3d(0,0,0); }
ol,li { list-style: none; }

.css_imagehover {
    position: relative;
    display: block;
    line-height:0;
}
.css_imagehover img {
    will-change: opacity;

    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.css_imagehover img:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.onlyPc { display: block; }
img.onlyPc { display: inline-block; }
.onlySp,
img.onlySp { display: none; }
@media (min-width: 751px){
    .css_imagehover:hover img:nth-of-type(2) { opacity: 1; }
}
@media (max-width: 750px){
    .onlyPc,
    img.onlyPc { display: none; }
    .onlySp { display: block; }
    img.onlySp { display: inline-block; }
}





@media (min-width: 751px){
}
@media (max-width: 750px){
}

#main, #top, #about, #article {
	display: block;
}

/* フレーム */

#header {
	line-height: 0;
}

h1 {
	position: fixed;
	z-index: 100;
	left: 10px;
	top: 10px;
	width: 32px;
}

h1 a {
	display: block;
	transition: 0.3s;
}

.border_top {
	position: fixed;
	z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 10px 0 36px;
}

.border_top div {
	border-top: 1px solid #d39d57;
}

.border_left {
	position: fixed;
	z-index: 50;
	top: 0;
	left: 0;
	box-sizing: border-box;
	height: 100%;
	padding: 85px 0 25px 10px;
}

.border_left div {
	height: 100%;
	border-left: 1px solid #d39d57;
}

.border_right {
	position: fixed;
	z-index: 50;
	top: 0;
	right: 0;
	box-sizing: border-box;
	height: 100%;
	padding: 10px 10px 25px 0;
}

.border_right div {
	height: 100%;
	border-right: 1px solid #d39d57;
}

#header .sns {
	position: fixed;
	z-index: 80;
	right: 0;
	bottom: 25px;
}

#header .sns li {
	position: absolute;
	right: 0;
	width: 35px;
	height: 44px;
}

#header .sns li a{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/frame_snsbar.svg) no-repeat right bottom;
	background-size: 100% auto;
	position: relative;
}

#header .sns li a:before {
	content: "";
	display: block;
	background: no-repeat left top;
	background-size: contain;
	position: absolute;
	transition: 0.3s;
}

#header .sns li:nth-of-type(1) {
	bottom: 173px;
}

#header .sns li:nth-of-type(1) a:before {
	background-image: url(../img/frame_sns_twitter.svg);
	width: 17px;
	height: 14px;
	left: 3px;
	top: 5px;
}

#header .sns li:nth-of-type(2) {
	bottom: 123px;
}

#header .sns li:nth-of-type(2) a:before {
	background-image: url(../img/frame_sns_instagram.svg);
	width: 16px;
	height: 16px;
	left: 4px;
	top: 4px;
}

#header .sns li:nth-of-type(3) {
	bottom: 74px;
}

#header .sns li:nth-of-type(3) a:before {
	background-image: url(../img/frame_sns_naver.svg);
	width: 13px;
	height: 14px;
	left: 5px;
	top: 5px;
}

#header .sns li:nth-of-type(4) {
	bottom: 25px;
}

#header .sns li:nth-of-type(4) a:before {
	background-image: url(../img/frame_sns_tabelog.svg);
	width: 22px;
	height: 17px;
	left: 0px;
	top: 4px;
}

.to_about {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: block;
	position: fixed;
	z-index: 70;
	right: 23px;
	top: 21px;
	font-weight: bold;
	font-size: 12px;
	line-height: 1em;
	color: #d39d57;
	transition: 0.3s;
}

.jump {
	position: fixed;
	z-index: 90;
	top: 50%;
	width: 33px;
	height: 63px;
	margin-top: -31px;
}

.previous {
	left: 4px;
}

.next {
	right: 4px;
}

.jump a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.jump span {
	position: absolute;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	height: 100%;
	font-size: 12px;
	line-height: 1em;
	text-align: center;
	color: #d39d57;
}

.previous span {
	right: 5px;
}

.next span {
	left: 5px;
}

.border_bottom {
	position: fixed;
	z-index: 50;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 10px 25px 10px;
}

.border_bottom div {
	border-bottom: 1px solid #d39d57;
}

#footer small {
	position: fixed;
	z-index: 60;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 12px;
	line-height: 25px;
	color: #d39d57;
}

/* フレームここまで */

.inner {
	margin: 0 auto;
	font-size: 0.26rem;
	line-height: 1.72em;
}

.return {
	text-align: center;
}

.return a {
	display: inline-block;
}

.return div {
	width: 1em; /* 26px/26px */
	margin: 0 auto;
	line-height: 0;
}

.return span {
	display: block;
	color: #d39d57;
	font-weight: bold;
	font-size: 1.153em; /* 30px/26px */
	line-height: 1em;
	padding-top: 0.5em;
}

#top > div:nth-of-type(1) {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
}

#top h2 {
	width: 24.66%; /* 185px/750px */
	padding: 20.4% 0 17.33%; /* 153px/750px 130px/750px */
	margin: 0 auto;
	transform: translate3d(0,0,0,1);
}

#top > div:nth-of-type(2) {
	padding-top: 26.73em; /* (153px+412px+130px)/26px */
}

#top > ul {
	width: 76%;
	margin: 0 auto;
	padding-bottom: 21.86%; /* 164px/750px */
}

#top > ul > .thumbnail {
	display: inline-block;
	position: relative;
	margin: 8.77% 0 0 5.26%; /* 50px/570px 30px/570px */
	width: 47.36%; /* 270px/570px */
	vertical-align: top;
	-webkit-box-shadow: 0 2px 8px 1px rgba(0,0,0,0.08);
	box-shadow: 0 2px 8px 1px rgba(0,0,0,0.08);
	
	will-change: transform,opacity;
}

#top .thumbnail a {
	display: block;
	overflow: hidden;
}

#top .thumbnail img {
	transition: 0.3s;
}

#top .thumbnail .date {
	position: absolute;
	right: 0.75em; /* 12px/16px */
	top: 0.75em;
	font-size: 0.16rem;
	line-height: 1em;
	color: #fff;
}

#top .thumbnail .title {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: rgba(211,157,87,0.5); /* #d39d57 */
	width: 100%;
}

#top .thumbnail .title span {
	display: block;
	font-size: 0.24rem;
	font-weight: bold;
	line-height: 1.41em; /* 34px/24px */
	height: 2.82em;
	margin: 0.45em 0.33em; /* 11px/24px 8px/24px */
	overflow: hidden;
	color: #fff;
}

#about > .inner > div:nth-of-type(1) {
	text-align: center;
}

#about h2 {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
	font-size: 0.3rem;
	line-height: 1em;
	padding: 3.6em 0 1.66em; /* 108px/30px 50px/30px */
	color: #d39d57;
}

#about .inner > p:nth-of-type(1) {
	text-align: center;
	font-size: 0.24rem;
	line-height: 1.83em; /* 44px/24px */
	padding-bottom: 3.66em; /* 2*1.83em */
}

#about .message {
	width: 68%; /* 510px/750px */
	margin: 0 auto;
}

#about .profile {
	text-align: center;
	width: 73.33%; /* 550px/750px */
	padding-top: 10.66%; /* 80px/750px */
	margin: 0 auto;
}

#about .profile > div:nth-of-type(1) {
	width: 3.38em; /* 88px/26px */
	margin: 0 auto;
}

#about .profile > div:nth-of-type(2) {
	padding: 1.53em 0 1.38em; /* 40px/26px 36px/26px */
}

#about .profile > div:nth-of-type(2) h3 {
	font-weight: normal;
	font-size: 0.92em; /* 24px/26px */
	line-height: 1.83em; /* 44px/24px */
}

#about .profile > div:nth-of-type(2) p {
	font-size: 0.92em; /* 24px/26px */
	line-height: 1.83em; /* 44px/24px */
}

#about .profile > div:nth-of-type(3) {
	width: 5em; /* 130px/26px */
	margin: 0 auto;
}

#about .return {
	padding: 3.84em 0 7.53em; /* 100px/26px 196px/26px */
}

#article .mv {
	background: no-repeat center;
	background-size: cover;
}

#article .mv > div {
	margin: 0 auto;
	text-align: center;
	font-size: 0.6rem;
	line-height: 0;
}

#article .mv > div > h2 {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: #fff;
	display: inline-block;
	text-align: left;
	font-size: 1em;
	line-height: 1.4em; /* 84px/60px */
	padding: 0.83em 0 1.08em; /* 50px/60px 65px/60px */
	white-space: nowrap;
}

#article .mv > div > span {
	display: block;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 0.5em;
	line-height: 1em;
	padding-bottom: 1em;
}

#article > div:nth-of-type(1) {
	padding-top: 3.84em; /* 100px/26px */
}

#article > .inner > .img,
#article > .inner > .youtube {
	margin: 0 auto;
	padding-top: 3.84em; /* 100px/26px */
	width: 73.33%; /* 550px/750px */
}

#article > .inner > .youtube .yt_inner {
	position: relative;
	padding: 56.25% 0 0; /* 9/16 */
}

#article > .inner > .youtube .yt_inner iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#article > .inner > p a {
	text-decoration: underline;
}

#article > .inner > p + .img,
#article > .inner > p + .youtube {
	padding-top: 3.44em; /* 2*1.72em */
}

#article > .inner > p {
	margin: 0 auto;
	padding-top: 0.86em;
	width: 73.33%; /* 550px/750px */
}

#article > .inner > p + p {
	padding-top: 1.72em;
}

#article .sns {
	padding: 18.66% 0; /* 140px/750px */
}

#article .sns h3 {
	text-align: center;
	color: #d39d57;
	font-size: 0.3rem;
	font-weight: normal;
	padding-bottom: 1em;
}

#article .sns ul {
	text-align: center;
}

#article .sns ul li {
	display: inline-block;
	vertical-align: middle;
}

#article .sns ul li:nth-of-type(1) {
	width: 10.26%; /* 77px/750px */
}

#article .sns ul li:nth-of-type(2) {
	width: 8.4%; /* 63px/750px */
	margin-left: 9.37%; /* 90px/750px */
}

#article .sns ul li:nth-of-type(3) {
	width: 10.53%; /* 79px/750px */
	margin-left: 9.37%; /* 90px/750px */
}

#article .sns ul li a {
	display: block;
}

#article .sns ul li a img {
	transition: 0.3s;
}

#article .card {
	background-color: #f3ebe0;
	margin: 0 13.33%; /* 100px/750px */
	padding: 6.66%; /* 50px/750px */
	font-size: 0.24rem;
	line-height: 1.66em; /* 40px/24px */
}

#article .card + .card {
	margin-top: 6.66%;
}

#article .card h3 {
	padding-top: 1.66em;
	font-size: 1em;
	font-weight: normal;
}

#article .card p {
	padding-top: 1.66em;
}

#article .card dl {
	padding-top: 1.66em;
}

#article .card dl:after {
	content: "";
	clear: both;
	display: block;
}

#article .card dt {
	clear: both;
	float: left;
}

#article .card dd {
	float: left;
	width: 80%;
	word-break: break-all;
	padding-left: 1em;
}

#article .card a {
	word-break: break-all;
}

#article .card .marked {
	padding-left: 1em;
	text-indent: -1em;
}

#article .card .list li {
	position: relative;
	padding: 0 0 0 1em;
}

#article .card .list li:before {
	position: absolute;
	content: "・";
	left: 0;
	top: 0;
}

#article .return {
	padding: 4.03em 0 5.76em; /* 105px/26px 150px/26px */
}

#pjax_loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fbf6ef;
    z-index: 10;
}

@media (max-width: 750px){
	
	#top > ul > li:nth-of-type(2n+1){
		margin-left: 0;
	}
	
	#top > ul > li:nth-of-type(-n+2){
		margin-top: 0;
	}
	
}

@media (min-width: 751px){
	
	h1 {
		width: 100px;
		left: 20px;
		top: 20px;
	}
	
	h1 a:hover {
		opacity: 0.7;
	}
	
	.border_top {
		padding: 20px 20px 0 95px;
	}
	
	.border_left {
		padding: 249px 0 20px 20px;
	}
	
	.border_right {
		padding: 20px 20px 20px 0;
	}
	
	#header .sns {
		bottom: 20px;
	}

	#header .sns li {
		width: 64px;
		height: 64px;
	}

	#header .sns li:nth-of-type(1) {
		bottom: 203px;
	}
	
	#header .sns li:nth-of-type(1) a:before {
		width: 20px;
		height: 16px;
		left: 9px;
		top: 15px;
	}
	
	#header .sns li:nth-of-type(2) {
		bottom: 143px;
	}

	#header .sns li:nth-of-type(2) a:before {
		width: 19px;
		height: 19px;
		left: 9px;
		top: 12px;
	}
	
	#header .sns li:nth-of-type(3) {
		bottom: 81px;
	}
	
	#header .sns li:nth-of-type(3) a:before {
		width: 16px;
		height: 16px;
		left: 11px;
		top: 14px;
	}
	
	#header .sns li:nth-of-type(4) {
		bottom: 20px;
	}
	
	#header .sns li:nth-of-type(4) a:before {
		width: 28px;
		height: 22px;
		left: 5px;
		top: 7px;
	}
	
	#header .sns li a:hover:before {
		transform: translateY(-5px);
	}
	
	.to_about {
		right: 39px;
		top: 38px;
		font-size: 12px;
	}
	
	.to_about:hover {
		opacity: 0.7;
	}
	
	.jump {
		width: 54px;
		height: 104px;
		margin-top: -51px;
	}

	.previous {
		left: 9px;
	}

	.next {
		right: 9px;
	}

	.jump span {
		font-size: 12px;
	}

	.previous span {
		right: 12px;
	}

	.next span {
		left: 12px;
	}
	
	.jump img {
		transition: 0.3s;
	}
	
	.previous a:hover img {
		transform: translateX(-4px);
	}
	
	.next a:hover img {
		transform: translateX(4px);
	}
	
	.border_bottom {
		padding: 0 20px 20px 20px;
	}
	
	.border_top div,
	.border_left div,
	.border_right div,
	.border_bottom div {
		border-width: 3px;
	}
	
	#footer small {
		font-size: 12px;
		line-height: 20px;
	}
	
	.inner {
		font-size: 0.14rem; /* 18px/128px */
		line-height: 1.66em; /* 30px/18px */
	}
	
	.return div {
		width: 0.72em; /* 13px/18px */
		transition: 0.3s;
	}

	.return span {
		font-size: 0.88em; /* 16px/18px */
	}
	
	.return a:hover div {
		transform: translateY(-0.3em);
	}
	
	#top h2 {
		width: 11.66%; /* 112px/960px */
		padding: 15.41% 0 12.91% /* 148px/960px 124px/960px */
	}
	
	#top > div:nth-of-type(2) {
		padding-top: 29.11em; /* (148px+252px+124px)/18px */
	}
	
	#top > ul {
		width: 80%;
		padding-bottom: 14.83%; /* 178px/1200px */
	}

	#top > ul > .thumbnail {
	margin: 6.25% 0 0 3.12%; /* 60px/960px 30px/960px */
	width: 31.25%; /* 300px/960px */
	}
	
	#top > ul > li:nth-of-type(3n+1){
		margin-left: 0;
	}
	
	#top > ul > li:nth-of-type(-n+3){
		margin-top: 0;
	}
	
	#top .thumbnail .date {
		right: 1em; /* 14px/14px */
		top: 0.71em; /* 10px/14px */ 
		font-size: 0.0875rem; /* 14px/160px */
	}

	#top .thumbnail .title span {
		font-size: 0.1125rem; /* 18px/160px */
		line-height: 1.55em; /* 28px/18px */
		height: 3.1em; /* 2*1.55em */
		margin: 0.5em 0.83em; /* 9px/18px 15px/18px */
	}
	
	#top .thumbnail a:hover img {
		transform: scale(1.1);
	}
	
	#about h2 {
		font-size: 1.33em; /* 24px/18px */
		padding: 4.58em 0 1.25em; /* 110px/24px 30px/24px */
	}

	#about .inner > p:nth-of-type(1) {
		font-size: 0.77em; /* 14px/18px */;
		line-height: 2em; /* 28px/14px */
		padding-bottom: 7.14em; /* 100px/14px */
	}

	#about .message {
		width: 50.72%; /* 487px/960px */
	}

	#about .profile {
		width: 100%;
		padding: 7.5% 0 15%; /* 72px/960px 144px/960px */
	}

	#about .profile > div {
		display: inline-block;
		vertical-align: middle;
	}
	
	#about .profile > div:nth-of-type(1) {
		width: 4.88em; /* 88px/18px */
	}

	#about .profile > div:nth-of-type(2) {
		position: relative;
		width: 15.27em; /* 275px/18px */
		height: 6.11em; /* 顔写真に合わせる */
		padding: 0 1.11em 0 1.77em; /* 20px/18px 32px/18px */
		text-align: left;
	}

	#about .profile > div:nth-of-type(2) h3 {
		font-size: 0.88em; /* 16px/18px */
		line-height: 1em;
	}

	#about .profile > div:nth-of-type(2) p {
		position: absolute;
		bottom: 0;
		width: 22.91em; /* 275px/12px */
		font-size: 0.66em; /* 12px/18px */
		line-height: 1.66em; /* 20px/12px */
	}

	#about .profile > div:nth-of-type(3) {
		width: 6.11em; /* 110px/18px */
	}
	
	#about .return {
		display: none;
	}

	#article .mv > div {
		font-size: 0.46785rem; /* 60px/128px */
	}
	
	#article .mv > div > h2 {
		padding-bottom: 0.75em; /* 45px/60px */
	}
	
	#article > div:nth-of-type(1) {
		padding-top: 6.66em; /* 120px/18px */
	}
	
	#article > .inner > .img,
	#article > .inner > .youtube {
		width: 67.71%; /* 650px/960px */
		padding-top: 6.66em; /* 120px/18px */
	}
	
	#article > .inner > p {
		width: 67.71%;
	}
	
	#article > .inner > p a:hover {
		text-decoration: none;
	}
	
	#article > .inner > p + .img,
	#article > .inner > p + .youtube {
		padding-top: 5em; /* 3*1.66em */
	}
	
	#article .sns {
		padding: 9.37% 0; /* 90px/960px */
	}
	
	#article .sns h3 {
		font-size: 0.89em; /* 16px/18px */
	}
	
	#article .sns ul li:nth-of-type(1) {
		width: 3.54%; /* 34px/960px */
	}
	
	#article .sns ul li:nth-of-type(2) {
		width: 2.81%; /* 27px/960px */
		margin-left: 2.7% /* 26px/960px */
	}
	
	#article .sns ul li:nth-of-type(3) {
		width: 3.43%; /* 33px/960px */
		margin-left: 2.7% /* 26px/960px */
	}
	
	#article .sns ul li a:hover img {
		opacity: 0.7;
	}

	#article .card {
		padding: 9.16%; /* 88px/960px */
		margin: 0 16.14%; /* 155px/960px */
		font-size: 0.88em; /* 16px/18px */
	}
	
	#article .card dd {
		width: 88%;
	}
	
	#article .card a:hover {
		text-decoration: underline;
	}
	
	#article .return {
		padding: 2.22em 0 8em; /* 40px/18px 144px/18px */
	}

}

@media (min-width: 961px){
	
	.inner {
		width: 960px;
		font-size: 18px;
	}
	
	#article .mv > div {
		width: 960px;
	}
	
	#article .mv > div {
		font-size: 60px;
	}
	
}

@media (min-width: 1201px){
	
	.inner {
		width: 80%;
		font-size: 0.1125rem; /* 18px/160px */
	}
	
	#article .mv > div {
		width: 80%;
		font-size: 0.375rem; /* 60px/160px */
	}
	
}