/*
Theme Name: eyescream
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	overflow-x: hidden;
	font-feature-settings: 'palt';
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}

*,:before,:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote,q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	text-decoration: none;
	vertical-align: bottom;
	background: transparent;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title],dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input,select {
	vertical-align: middle;
}

body {
	background: #000;
	font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3", Hiragino Kaku Gothic ProN, Arial, "繝｡繧､繝ｪ繧ｪ", Meiryo, sans-serif;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1;
	vertical-align: middle;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

#wrapper {
	background: #fff;
}

h1, h2, h3, h4, h5, h6, p, span, a {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	vertical-align: initial;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Overpass", YuGothic, 'Yu Gothic', '貂ｸ繧ｴ繧ｷ繝�け菴�', '貂ｸ繧ｴ繧ｷ繝�け', "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", sans-serif;
}

::selection {
	background: #fff85f;
	color: #000;
}

img {
	width: 100%;
	height: auto;
	max-width: 100%;
	backface-visibility: hidden;
	vertical-align: bottom;
	font-size: 0;
	line-height: 0;
}

ol, ul {
	list-style: none;
	font-size: 0;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: 300;
	text-align: left;
}

a:focus {
	outline: 0;
}

a:hover, a:active {
	outline: 0;
}

a img {
	border: 0;
}

.section-title {
	font-family: "Overpass", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", sans-serif;
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 0px;
	text-align: center;
	color: #000;
	letter-spacing: 1px;
	position: relative;
	font-size: 36px;
}

#archive .section-title {
	margin-bottom: 50px;
}

#related .section-title {
	margin-bottom: 50px;
}

.cat, .tag {
	letter-spacing: 1px;
}

body.home #wrapper, body.archive #wrapper, body.error404 #wrapper, body.page-template-page-404 #wrapper {
	background: #f4f4f4;
}

body.error404 #middle-banner, body.page-template-page-404 #middle-banner {
	padding-top: 50px;
}

.pc {
	display: inline-block;
}

.sp {
	display: none;
}

.crimson {
	font-family: 'Crimson Text', serif;
}

#header {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 50px;
	z-index: 100;
}

#header h1.logo {
	width: 230px;
	opacity: 1;
	transition: 100ms;
	line-height: 0;
	height: 41px;
	position: absolute;
	position: fixed;
	top: 40px;
	left: 50px;
}

#header .logo a {
	display: block;
}

#header .logo svg {
	width: 100%;
	height: 41px;
}

#header .logo:hover {
	opacity: 0.95;
}

#menu {
	z-index: 1000;
	width: 50px;
	height: 50px;
	top: 35px;
	position: absolute;
	position: fixed;
	right: 40px;
}

.menu-trigger, .menu-trigger span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}

.menu-trigger {
	position: relative;
	z-index: 100;
	width: 26px;
	height: 20px;
	cursor: pointer;
	margin: 15px 12px;
}

.menu-trigger span {
	position: absolute;
	right: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
	width: 100%;
}

.menu-trigger span:nth-of-type(2) {
	top: 9px;
	width: 50%;
}

.menu-trigger span:nth-of-type(3) {
	bottom: 0;
	width: 100%;
}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(11px) rotate(-315deg);
	transform: translateY(11px) rotate(-315deg);
}

.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(315deg);
	transform: translateY(-8px) rotate(315deg);
	width: 100%;
}

#searchform .textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	border-bottom: 1px solid #fff;
	background: none;
	border: 0;
	border-bottom: 1px solid #fff;
	line-height: 2;
	font-size: 16px;
	outline: 0;
	color: #fff;
	position: relative;
	z-index: 3;
}

.searchform-wrap {
	position: relative;
	margin-bottom: 26px;
}

.searchform-wrap .search-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	font-weight: 100;
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 10px;
	z-index: 1;
}

::selection {
	color: #fff;
	background: #707070;
}

::-moz-selection {
	color: #fff;
	background: #707070;
}

#header.fixed {
	position: fixed;
	height: 73px;
	background: #fff;
}

#header.fixed h1.logo {
	top: 15px;
	left: 30px;
}

#header.fixed .logo .cls-1 {
	fill: #000;
}

#header.fixed #nav .logo .cls-1 {
	fill: #fff;
}

#footer .sns li a .cls-1 {
	fill: #fff;
}

#header.fixed .logo .st0 {
	fill: #000;
}

#header.fixed #nav .logo .st0 {
	fill: #fff;
}

#header.fixed #menu {
	top: 11px;
	right: 18px;
}

#header.fixed .menu-trigger span {
	background: #000;
}

#header.fixed .menu-trigger.active span {
	background: #fff;
}

#container.header-fixed {
	padding-top: 73px;
}

#top-slider {
	position: relative;
}

#scroll {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -25px;
	width: 50px;
	height: 66px;
}

#scroll:after {
	content: '';
	width: 1px;
	height: 62px;
	display: block;
	position: absolute;
	bottom: 0;
	right: 50%;
	background: #fff;
}

#scroll a {
	color: #fff;
	position: absolute;
	opacity: 1;
	transition: 300ms;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	left: -60px;
	top: 3px;
}

#scroll a:hover {
	opacity: 0.6;
}

.main_slide {
	width: 100vw;
	height: 100vh;
	height: auto;
}

.main_slide .cal {
	position: relative;
	width: 100vw;
	height: 100vh;
	transform: translate3d(0,0,0);
}

.main_slide .cal .bg {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main_slide .cal .mask {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.1);
}

.main_slide .catch-title {
	color: #fff;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 58px;
	letter-spacing: 2px;
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0px 15%;
}

.main_slide .catch-title a {
	color: #fff;
	opacity: 1;
	transition: 300ms;
}

.main_slide .catch-title a:hover {
	opacity: 0.7;
}

.main_slide .cal .bg .mask {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.2);
	transition: 500ms;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

.main_slide .tag {
	position: absolute;
	right: 47px;
	top: 25%;
	z-index: 1;
}

.main_slide .tag a {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 1px;
}

.main_slide .cal .meta {
	position: absolute;
	bottom: 46px;
	left: 50px;
	z-index: 2;
	width: 40%;
}

.main_slide .meta h2 {
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #fff;
	opacity: 1;
	transition: 300ms;
	word-break: break-all;
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: .3px;
	margin-bottom: 35px;
	font-weight: 400;
}
.main_slide .meta h2.freely-slider-img {
	width: 40%;
	opacity: 1;
	transition: 300ms;
	word-break: break-all;
	margin-bottom: 5px;
}
.main_slide .meta a:hover h2 {
	opacity: 0.6;
}

.main_slide .meta .cat {
	color: #fff;
	margin-right: 20px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
}

.main_slide .meta .date {
	font-weight: 400;
	font-size: 16px;
	color: #fff;
	letter-spacing: 0.5px;
}

.main_slide .author {
	display: flex;
	align-items: center;
	margin-top: 16px;
	display: none;
}

.main_slide .authorname {
	color: #fff;
	font-style: italic;
}

.main_slide .meta .avatar {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	overflow: hidden;
	display: inline-block;
	margin-right: 8px;
}

.main_slide .slick-prev {
	z-index: 80;
	left: 0;
	top: 50%;
	width: 80px;
	height: 50px;
	opacity: 1;
	transition: 200ms;
}

.main_slide .slick-next {
	z-index: 80;
	right: 0;
	width: 80px;
	height: 50px;
	opacity: 1;
	transition: 200ms;
}

.main_slide .slick-prev::before {
	content: '';
	width: 30px;
	height: 1px;
	background: #fff;
	display: block;
	opacity: 1;
	top: 50%;
	left: 0;
	position: absolute;
}

.main_slide .slick-prev::after {
	content: 'PREV';
	display: block;
	color: #fff;
	font-family: "Overpass", sans-serif;
	transform: rotate(90deg);
	position: relative;
	width: 100%;
	left: 15px;
	opacity: 1;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: inherit;
}

.main_slide .slick-prev:hover:after {
	opacity: 0.6;
}

.main_slide .slick-prev:hover:before {
	opacity: 1;
}

.main_slide .slick-next:before {
	content: '';
	width: 30px;
	height: 1px;
	background: #fff;
	display: block;
	opacity: 1;
	top: 50%;
	right: 0;
	position: absolute;
}

.main_slide .slick-next:after {
	content: 'NEXT';
	display: block;
	color: #fff;
	font-family: "Overpass", sans-serif;
	transform: rotate(-90deg);
	position: relative;
	width: 100%;
	right: 15px;
	opacity: 1;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: inherit;
}

.main_slide .slick-next:hover:before {
	opacity: 0.6;
}

.main_slide .slick-dots {
	display: none !important;
	text-align: left;
	transform: rotate(-90deg);
	z-index: 80;
	width: 250px;
	right: -71px;
	bottom: 150px;
    width: 360px;
    right: -125px;
    bottom: 210px;
}

.main_slide .slick-dots {
	counter-reset: dots;
}

.main_slide .slick-dots li button:before {
	counter-increment: dots;
	content: counter(dots, decimal-leading-zero);

	font-family: "Overpass", sans-serif;
	font-size: 16px;
	color: #fff;
	position: relative;
	font-weight: 700;
	opacity: 1;
	letter-spacing: 1px;
	    letter-spacing: 0;
	line-height: 1;
	display: inline;
}

.main_slide .slick-dots li button:after {
	content: '';
	display: block;
	position: absolute;
	border-bottom: 1px solid #fff;
	bottom: 50%;
	left: 0;
	width: 0;
	transition: 200ms;
}

.main_slide .slick-dots li.slick-active button:after {
	width: 100%;
}

.main_slide .slick-dots li {
	width: 40px;
	    width: 27px;
	height: 16px;
}

.main_slide .slick-dots li button {
	width: 40px;
	height: 16px;
	line-height: 1;
	padding: 0 5px;
	vertical-align: middle;
	text-align: center;
	position: relative;

    width: 27px;
    padding: 0;
}

.main_slide.slick-dotted.slick-slider {
	margin-bottom: 0;
}

#pickup {
	padding-top: 60px;
}

.second-slide.slick-slider .slick-list {
	padding-top: 50px!important;
	padding-bottom: 70px!important;
	max-height: 720px;
}

.second-slide .cal {
	width: 360px;
	height: auto;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: none!important;
	opacity: 0.5;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
	margin: 0 20px;
	z-index: 1;
}

.second-slide .cal {
	transform: scale(0.75);
	position: relative;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.second-slide .cal .bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	opacity: 1;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .cal .spacer {
	padding-top: 135%;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .cal.slick-center {
	transform: scale(1);
	opacity: 1;
	z-index: 100;
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .cal.slick-center:hover {
	-webkit-box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .cal.slick-center:active {
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .cal.slick-center:hover .meta {
	-webkit-box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .cal.slick-center:active .meta {
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .cal.slick-center:hover .bg {
	opacity: 1;
}

.second-slide .cal .meta {
	transform: scale(0);
	position: absolute;
	opacity: 0;
	display: block;
	right: 50%;
	width: 100%;
	bottom: 30px;
	padding: 30px;
	background: #fff;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .cal.slick-center .meta {
	transform: scale(1);
	display: block;
	right: 50%;
	width: 120%;
	opacity: 1;
	z-index: 101;
	bottom: 30px;
	padding: 30px;
	background: #fff;
	-webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.5);
}

.second-slide .meta h3 {
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
	max-width: 360px;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #000;
	letter-spacing: .5px;
	margin-bottom: 20px;
	word-break: break-all;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .meta .cat {
	font-weight: 700;
	color: #333;
	font-size: 12px;
	margin-right: 20px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .meta .date {
	font-weight: 400;
	font-size: 12px;
	color: #333;
	position: absolute;
	bottom: 30px;
	right: 30px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.second-slide .author {
	display: flex;
	align-items: center;
	margin-top: 18px;
	display: none;
}

.second-slide .authorname {
	color: #000;
	font-style: italic;
}

.second-slide .meta .avatar {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	overflow: hidden;
	display: inline-block;
	margin-right: 8px;
}

.second-slide .count {
	color: #000;
	position: absolute;
	z-index: 0;
	top: 50%;
	padding-right: 15px;
	right: -100px;
	margin-top: -70px;
	font-size: 140px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -3px;
	opacity: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	-moz-font-feature-settings: "tnum";
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	transform: scale(0);
}

.second-slide .current {
	font-variant-numeric: tabular-nums;
	-moz-font-feature-settings: "tnum";
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
}

.second-slide .total {
	font-size: 27px;
	text-align: right;
	transform: translateY(-15px);
	letter-spacing: -1px;
	font-weight: 700;
}

.second-slide .cal.slick-center .count {
	opacity: 1;
	transform: scale(1);
}

.second-slide .slick-prev {
	z-index: 100;
	left: 0;
	top: 50%;
	width: 80px;
	height: 50px;
	opacity: 1;
	transition: 200ms;
}

.second-slide .slick-next {
	z-index: 100;
	right: 0;
	width: 80px;
	height: 50px;
	opacity: 1;
	transition: 200ms;
}

.second-slide .slick-prev:before {
	content: '';
	width: 30px;
	height: 1px;
	background: #000;
	display: block;
	opacity: 1;
	top: 50%;
	left: 0;
	position: absolute;
}

.second-slide .slick-prev:after {
	content: 'PREV';
	display: block;
	color: #000;
	font-family: "Overpass", sans-serif;
	transform: rotate(90deg);
	position: relative;
	width: 100%;
	left: 15px;
	opacity: 1;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: inherit;
}

.second-slide .slick-prev:hover:after {
	opacity: 0.6;
}

.main_slide .slick-prev:hover:before {
	opacity: 1;
}

.second-slide .slick-next:before {
	content: '';
	width: 30px;
	height: 1px;
	background: #000;
	display: block;
	opacity: 1;
	top: 50%;
	right: 0;
	position: absolute;
}

.second-slide .slick-next:after {
	content: 'NEXT';
	display: block;
	color: #000;
	font-family: "Overpass", sans-serif;
	transform: rotate(-90deg);
	position: relative;
	width: 100%;
	right: 15px;
	opacity: 1;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: inherit;
}

.second-slide .slick-next:hover:before {
	opacity: 0.6;
}

#middle-banner {
	z-index: 1;
    text-align: center;
    position: relative;
    margin: 0 auto;
    padding-bottom: 20px;
    padding-top: 40px;
	/*display:none;*/
}

#middle-banner .banner-embed {
	max-width: 920px;
	margin: 0px auto;
}

#middle-banner.bottom {
	background: #f5f5f5;
}

#middle-banner a {
	opacity: 1;
	display: inline-block;
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
}

#middle-banner a img {
	max-width: 970px;
	width: 100%;
	height: auto;
	display: inline-block;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.25);
}

#middle-banner a:hover img {
	filter: saturate(150%);
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.25);
}

#archive {
	width: 100%;
	max-width: 1440px;
	padding: 0px 30px 0px;
	margin: 0px auto;
}

.headline {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.headline .article {
	position: relative;
	width: calc(33.3% - 60px);
	overflow: hidden;
	margin: 0px 30px 60px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.headline .article:hover {
	-webkit-box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.3);
}

.headline .article:active {
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;
	-ms-transition: all 0.15s;
	-o-transition: all 0.15s;
	transition: all 0.15s;
}

.headline .article .share {
	color: #fff;
	font-style: italic;
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 10;
	font-size: 18px;
	padding-right: 0;
	font-weight: 700;
}

.headline .article .share svg {
	display: inline;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	transform: translateY(-1px);
	margin-right: 4px;
}

.headline .article .imgbox {
	opacity: 1;
	transition: 300ms;
	height: auto;
	width: 100%;
	display: inline-block;
	max-height: 270px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.headline .article .imgbox:hover {
	opacity: 1;
	filter: saturate(150%);
}

.headline .article .imgbox .spacer {
	padding-top: 66.6%;
}

.headline .article .txt {
	width: 100%;
	background: #fff;
	padding: 30px;
	position: relative;
}

.headline .txt .cat {
	font-size: 12px;
	color: #333;
	font-weight: 700;
	margin-bottom: 20px;
	display: inline-block;
	opacity: 1;
	transition: 300ms;
	line-height: 15px;
	letter-spacing: 0.5px;
}

.headline .txt .cat:hover {
	opacity: 1;
}

.headline .txt .sub {
	position: absolute;
	top: 30px;
	right: 30px;
	display: inline-block;
}

.headline .txt .pr {
	border: 1px solid #6f6f6f;
	padding: 2px 2em 1px;
	background: none;
	display: inline-block;
	color: #6f6f6f;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
}

.headline .article.bg .txt .sub .pr {
	border: 1px solid #eee;
	color: #eee;
}

.headline .txt .new {
	padding: 2px 1.5em 1px;
	color: #fff;
	background: rgb(224, 0, 47);
	margin-left: 5px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	font-size: 10px;
	display: inline-block;
}

.headline .txt .title h3 {
	font-size: 16px;
	color: #000;
	margin-bottom: 30px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.7;
	height: auto;
	min-height: 54px;
	opacity: 1;
	transition: 300ms;
}

.headline .txt .title h3.title-all {
    font-size: 15px;
    color: #000;
    margin-bottom: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.6;
    height: auto;
    min-height: 72px;
    opacity: 1;
    transition: 300ms;
    word-break: break-all;
}

.headline .txt .title:hover {
	opacity: 1;
}

.headline .txt .date {
	position: absolute;
	bottom: 30px;
	right: 30px;
	color: #333;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.5px;
}

.headline .author {
	display: flex;
	align-items: center;
	margin-top: 18px;
	display: none;
}

.headline .authorname {
	color: #000;
	font-style: italic;
}

.headline .avatar {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	overflow: hidden;
	display: inline-block;
	margin-right: 8px;
}

.article.bg .imgbox {
	opacity: 0;
}

.article.bg .imgbox:hover {
	opacity: 0;
}

.article.bg .txt {
	background: transparent;
}

.article.bg .cat, .article.bg .title h3, .article.bg .authorname, .article.bg .date {
	color: #fff;
}

.article.bg {
	filter: saturate(100%);
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.article.bg:hover {
	filter: saturate(150%);
}

.pagenavi {
	font-family: "Overpass", sans-serif;
	display: inline-block;
	width: 100%;
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	margin: 0px auto;
}

.pagenavi a {
	display: block;
	width: calc(33.3% - 60px);
	padding: 24px 0;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: black;
	background: #fff;
	margin: 0px auto;
	transition: 400ms;
	position: relative;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
	background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
	background: linear-gradient(120deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
	background-position: 99% 50%;
	background-size: 100% 100%;
	z-index: 1;
}

.pagenavi a:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
	z-index: -1;
	transition: 400ms;
}

.pagenavi a:hover {
	color: #fff;
	background-size: 1000% 100%;
	-webkit-box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.5);
}

.pagenavi a:active {
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;
	-ms-transition: all 0.15s;
	-o-transition: all 0.15s;
	transition: all 0.15s;
}

.pagenavi a:hover:before {
	opacity: 0;
}

#infscr-loading {
	text-align: center;
	margin: 0 auto;
	padding: 30px 0;
	clear: both;
}

#infscr-loading img {
	width: 16px;
	height: 16px;
	display: inline-block;
}

#infscr-loading p {
	display: block;
	width: 100%;
	padding: 10px 0 0;
	text-align: center;
	font-size: 16px;
	font-weight: 900;
	color: #002153;
}

.pagenavi-archive {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 0 60px;
}

.pagenavi-archive .current {
	background: #1a1a1a;
	line-height: 18px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 12px 12px;
	margin: 5px 8px;
	transition: 300ms;
	width: 40px;
	height: 40px;
	display: inline-block;
	transition: 400ms;
	text-align: center;
	vertical-align: middle;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.pagenavi-archive a {
	background: #fff;
	line-height: 18px;
	color: #1a1a1a;
	font-size: 16px;
	font-weight: bold;
	padding: 12px 6px;
	margin: 5px 8px;
	transition: 300ms;
	width: 40px;
	height: 40px;
	display: inline-block;
	transition: 400ms;
	text-align: center;
	vertical-align: middle;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.pagenavi-archive a:hover {
	-webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
}

.pagenavi-archive a:active {
	-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	color: #fff;
	background: #1a1a1a;
}

.page_top.fixed {
	position: fixed;
	bottom: 43px;
	right: 43px;
	margin: 0;
	z-index: 10;
	display: none;
}

.page_top a {
	display: block;
	font-size: 10px;
	width: 50px;
	height: 50px;
	color: rgba(0, 0, 0, 0);
	text-align: center;
	text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.page_top span {
	display: block;
	margin-top: -6px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: translate3d(0,0,0) rotate(45deg);
	transform: translate3d(0,0,0) rotate(45deg);
	box-shadow: 1px 1px 0 1px rgba(255, 255, 255, 0.1) inset;
}

#footer {
	position: relative;
	background: black;
	color: #fff;
	text-align: center;
	padding: 60px 0px 30px;
}

#footer .logo {
	width: 193px;
	height: 35px;
	margin: 0px auto 42px;
}

#footer .logo img {
	width: 100%;
	height: auto;
}

#footer .cat {
	text-align: center;
	margin-bottom: 45px;
}

#footer .cat.upper {
	margin-bottom: 20px;
}

#footer .cat a {
	font-size: 16px;
	color: #fff;
	padding: 0em 1em;
	font-weight: 600;
}

#footer .cat li {
	display: inline-block;
	letter-spacing: 0.5px;
}

#footer .sns {
	margin-bottom: 45px;
}

#footer .sns li {
	display: inline-block;
}

#footer .sns li a {
	color: #fff;
	padding: 9px 0;
	display: block;
	width: 30px;
	height: 43px;
	margin: 0px 6px;
}

#footer .inquiry {
	margin-bottom: 30px;
}

#footer .inquiry li {
	display: inline-block;
}

#footer .inquiry a {
	padding: 0em 0.5em;
	padding: 0px;
	margin: 0px 0.5em;
	font-size: 10px;
	color: #fff;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
}

#footer .copyright {
	color: #fff;
	font-weight: 600;
	font-size: 12px;
}

#footer a {
	opacity: 1;
	transition: 300ms;
}

#footer a:hover {
	opacity: 0.6;
}

.single_img {
	position: relative;
	z-index: 1;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	overflow: hidden;
}

.single_img .bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	width: 110%;
	height: 110%;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	z-index: -1;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

.single_img.trimming {
	margin-bottom: 50px;
}

.single_img .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.3);
	z-index: 2;
}

#single .single_img .meta {
	width: 720px;
	position: absolute;
	z-index: 3;
	left: 50%;
	margin-left: -360px;
	bottom: 45px;
	text-align: center;
	z-index: 5;
}

#single .single_img img {
	display: block;
	display: inline;
	width: auto;
	max-height: 80vh;
	position: relative;
	z-index: 4;
}

#single .single_img.vertical img {
	max-height: 80vh;
	height:auto;
	max-width:auto;
	max-width:initial;
	max-width:100%;
}

#single .meta .cat {
	font-size: 14px;
	color: #fff;
	font-weight: 700;
	margin-right: 1em;
	display: inline-block;
	margin-bottom: 20px;
}

#single .meta .date {
	font-size: 14px;
	color: #fff;
}

#single .meta h1 {
	font-size: 26px;
	color: #fff;
	line-height: 1.5;
	margin-bottom: 12px;
}

#single .meta .credit2 {
	color: #fff;
	font-size: 12px;
	font-style: italic;
	margin-bottom: 9px;
	display: inline-block;
	line-height: 1.6;
}

#single .meta-second .meta .credit2 {
	color: #000;
}

body.page #single .meta h1 {
	color: #fff;
	margin-bottom: 0;
}

#single .tags li {
	display: inline-block;
	letter-spacing: 0.5px;
	padding: 0 3px 3px;
}

#single .tags li a {
	color: #fff;
	font-size: 12px;
	font-style: italic;
	font-weight: 400;
	margin: 0;
	letter-spacing: 0;
	position: relative;
}

#single .tags li a:before {
	content: '#';
	display: inline;
}

#single .tags li a:after {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 45%;
	left: -.4em;
	right: -.5em;
	height: 1px;
	opacity: 1;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition: -webkit-transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: transform .2s cubic-bezier(0.65, 0.05, 0.36, 1),-webkit-transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	background-color: #fff;
}

#single .tags li a:hover:after {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

#single .meta.letterblack .cat, #single .meta.letterblack .date, #single .meta.letterblack h1, #single .meta.letterblack .tags li a {
	color: #000;
}

#single .author {
	display: flex;
	align-items: center;
	margin-top: 18px;
	position: absolute;
	z-index: 3;
	bottom: 60px;
	left: 60px;
	visibility: hidden;
	display: none;
}

#single .share {
	color: #fff;
	font-size: 18px;
	position: absolute;
	bottom: 60px;
	right: 60px;
	font-style: italic;
	font-weight: 700;
	z-index: 4;
	display: none;
}

#single .share svg {
	display: inline;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	transform: translateY(-1px);
	margin-right: 4px;
}

#single .authorname {
	color: #fff;
	font-style: italic;
}

#single .avatar {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	overflow: hidden;
	display: inline-block;
	margin-right: 8px;
}

#single .avatar img {
	width: 100%;
	height: 100%;
}

#single .single_img:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 30px;
	z-index: 4;
	background: #fff;
}

#single .single_img.trimming:after {
	content: none;
}

#single .content {
	width: 100%;
	max-width: 720px;
	margin: 0px auto;
}

#single .feature-content .content {
	max-width: 100%;
}

#single .content #breadcrumbs {
	font-size: 12px;
	line-height: 1.6;
	color: #999;
	font-weight: 400;
	margin-bottom: 15px;
	padding: 0;
}

#single .content #breadcrumbs a {
	color: #666;
}

span.breadcrumb_last {
	color: #666;
}

#single .detail {
	margin-bottom: 30px;
	display: inline-block;
	line-height: 1.4;
	padding: 15px 0 0;
	width: 100%;
}

#single .detail.feature {
	border-top: none;
	margin-bottom: 0;
	padding: 0;
}

#single .detail p {
	font-size: 15px;
	line-height: 1.4;
}

#single .detail .credit {
	font-size: 12px;
	font-style: italic;
	width: 100%;
	color: #666;
	display: inline-block;
	margin-bottom: 10px;
	text-align:left;
}

#single .detail .credit.feature {
	font-size: 10px;
	color: #fff;
	margin: 0 0 10px;
	line-height: 1.2;
	border: none;
}

.single-format-image #single .detail .pr {
	color: #fff;
}

.single-format-image #single .detail .pr span {
	border: 1px solid #fff;
}

#single .detail .pr {
	font-size: 12px;
}

#single .detail .pr span {
	font-size: 11px;
	border: 1px solid #000;
	line-height: 1;
	padding: 0em 2em;
	margin-right: 1em;
}

#single .detail .pr.feature {
	font-size: 12px;
	color: #fff;
	margin: 0;
}

#single .detail .pr.feature span {
	font-size: 11px;
	border: 1px solid #fff;
	line-height: 1;
	padding: 0em 2em;
	margin-right: 1em;
	color: #fff;
}

.caption-box {
	border-left: 2px solid #333;
	padding-left: 20px;
	margin-bottom: 90px;
}

p + div.caption-box {
	margin-top: -10px;
}

.base-content .caption-box h3 {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 900;
	letter-spacing: 0px;
	color: #2b2b2b;
}

.base-content .caption-box p {
	font-size: 12px;
	line-height: 1.9;
	word-break: break-all;
	letter-spacing: 0.1px;
	margin-bottom: 20px;
	color: #2b2b2b;
	font-weight: 400;
}

#single .meta-second {
	text-align: center;
	position: relative;
	position: relative;
	margin-bottom: 30px;
	max-width: 720px;
	margin: 0 auto 30px;
}

#single .meta-second .meta {
	margin-bottom: 24px;
}

#single .meta-second .meta-flex {
	display: flex;
	display: block;
	justify-content: space-between;
	align-items: center;
}

#single .meta-second .meta-flex .share {
	position: relative;
	bottom: 0;
	right: 0;
	color: #000;
	font-size: 18px;
}

#single .meta-second .cat {
	color: #000;
}

#single .meta-second .date {
	color: #000;
}

#single .meta-second h1 {
	color: #000;
}

#single .meta-second .author {
	position: relative;
	bottom: 0;
	left: 0;
	width: 48px;
}

#single .meta-second .tags a {
	color: #000;
}

#single .meta-second .authorname {
	color: #000;
}

#single .meta-second .sns_count {
	background: #fff;
	margin-bottom: 0;
}

#single .meta-second .sns_count li a path {
	fill: #000;
}

#single .meta-second .share path {
	fill: #000!important;
}

#single .headline .author {
	position: relative;
	bottom: 0;
	left: 0;
}

#single .headline .authorname {
	color: #000;
}

#single .headline .date {
}

.pagination {
	margin-bottom: 30px;
	text-align: center;
}

.pagination .c-page {
	background: rgba(0, 0, 0, 1);
	line-height: 1.2;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid black;
	padding: 8px 12px;
	margin: 0 5px 14px;
	transition: 300ms;
	width: 36px;
	height: 36px;
	display: inline-block;
}

.base-content .wp-embedded-content {
	width: 100%;
	height:auto;
	margin: 0px auto 0;
}

.divider {
	width: 30px;
	margin: 60px auto;
	text-align: center;
	border-top: 1px solid black;
}

.divider-line {
	width: 100%;
	margin: 60px auto;
	text-align: center;
	border-top: 1px solid black;
}

.divider-blank {
	width: 30px;
	margin: 60px auto;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, 0);
}

.pagination a > .c-page {
	background: rgba(0, 0, 0, 0);
	color: #000;
	transition: 300ms;
}

.pagination a .c-page:hover {
	background: rgba(0, 0, 0, 1);
	color: #fff;
	transition: 300ms;
}

.base-content {
	position: relative;
	margin-bottom: 30px;
}

.base-content h2 {
	font-size: 28px;
	line-height: 1.6;
	letter-spacing: 0.1px;
	margin: 90px 0 30px;
	border-top: 1px solid #000;
	padding: 30px 0 0;
	font-weight: 700;
}

.base-content h3 {
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: 0.1px;
	margin: 60px 0 30px;
	padding: 0;
}

.base-content h4 {
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.1px;
	margin: 30px 0 20px;
	padding: 0;
}

strong {
	font-weight: 900;
	color: #000;
}

.base-content p {
	font-size: 16px;
	line-height: 1.9;
	word-break: normal;
	letter-spacing: 0.1px;
	margin-bottom: 30px;
	color: #2b2b2b;
	font-weight: 400;
}

.base-content p:empty {
	display: none;
}

.base-content .single-slide img {
}

.base-content .center {
	text-align: center;
}

.base-content .right {
	text-align: right;
}


@media screen and (max-width: 320px) {
/*.base-content .wp-embedded-content {
    width: 100%;
    height: 100%;
}*/

}


.base-content .question {
	font-style: italic;
	font-weight: 700;
	margin: 60px auto 20px;
}

.base-content img {
	width: auto;
	margin: 0px auto;
	display: block;
}

.base-content .small-pic img {
	width: auto;
	margin: 0 auto;
	display: block;
}

.base-content p a {
	color: #000;
	text-decoration: underline;
	font-weight: bold;
}

.base-content p a:hover {
	text-decoration: none;
}

.base-content p .np {
	background: #000;
	padding: 10px 30px;
	color: #fff;
	border-radius: 5px;
	margin: 20px auto 35px;
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1px solid black;
	transition: 300ms;
}

.base-content p .np:hover {
	background: #fff;
	color: #000;
	transition: 300ms;
}

.base-content p.credit {
	font-size: 10px;
	line-height: 1.6;
	color: #787878;
	letter-spacing: 0;
	margin: -20px 0 40px;
	text-align: right !important;
	font-style: italic;
	font-weight: 400;
	display: block;
}

.base-content .content_slide {
	width: 100%;
	max-width: 100%;
	box-shadow: 0 0 1px rgba(0,0,0,.5);
	padding: 10px;
	margin-bottom: 30px;
}

.base-content .content_slide p {
	font-size: 12px;
	line-height: 1.6;
	color: #333;
	letter-spacing: 0;
	text-align: left;
	margin: 10px 0 0;
}

.base-content p a.button-link {
	padding: 18px 28px;
	line-height: 1;
	border: 1px solid #000;
	background: #000;
	color: #fff;
	text-decoration: none;
	margin: 0;
	vertical-align: middle;
	display: block;
	margin: 60px auto;
	max-width: 360px;
	text-align: center;
	transition: 200ms;
}

.base-content p a.button-link:hover {
	background: #fff;
	color: #000;
}

.base-content blockquote {
	position: relative;
}

.base-content blockquote p {
	padding: 30px 45px 15px;
	font-style: italic;
	font-size: 13px;
	margin-bottom: 0;
}

.base-content blockquote:before {
	content: '窶�';
	display: inline;
	font-size: 80px;
	color: grey;
	position: absolute;
	top: 0;
	left: 0;
	font-family: "Overpass", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", sans-serif;
}

.base-content .quote-origin {
	font-size: 12px;
	text-align: right;
	padding-right: 45px;
	font-style: italic;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 30px;
}

.base-content .wp-caption-text {
	text-align: right;
	font-size: 12px;
	font-style: italic;
}

.base-content .info-box {
	display: flex;
	justify-content: space-between;
	padding: 60px;
	align-items: flex-start;
	background: #f5f5f5;
	margin-bottom: 60px;
}

.base-content .info-box .text {
	margin-right: 30px;
	max-width: 500px;
}

.feature-content .base-content .info-box .text {
	margin: 0 30px 0 0;
	max-width: 500px;
}

.base-content .info-box .text h3 {
	font-size: 22px;
	margin-bottom: 1em;
	margin-top: 0;
	line-height: 1.5;
	letter-spacing: 0px;
}

.base-content .info-box strong, .base-content .info-box p strong {
	font-size: 13px;
	margin-bottom: 10px;
	display: inline-block;
}

.base-content .info-box p {
	font-size: 11px;
	margin-bottom: 15px;
	color: #333;
}

.base-content .info-box p.credit {
	font-size: 9px;
	margin: 5px auto 0;
}

.base-content .info-box p:last-child {
	margin-bottom: 0;
}

.base-content .info-box a.amazon-link {
	display: inline-block;
	opacity: 1;
	margin-bottom: 12px;
	transition: 400ms;
	max-width: 169px;
}

.base-content .info-box a.amazon-link:hover {
	opacity: 0.6;
}

.base-content .info-box .pic {
	max-width: 40%;
}

.base-content .horizontal {
	display: flex;
	margin-bottom: 30px;
}

.base-content .profile {
	width: 100%;
	max-width: 720px;
	margin: 60px auto;
	line-height: 1.8;
	font-size: 16px;
}

#single .tags.bottom {
	margin: 60px 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 30px 0;
	text-align: center;
}

#single .tags.bottom li a {
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	margin-right: 1em;
	letter-spacing: 0;
	line-height: 1.6;
	-webkit-transition: color .3s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: color .3s cubic-bezier(0.65, 0.05, 0.36, 1);
	position: relative;
	color: #333;
	z-index: 1;
}

#single .tags.bottom li a:after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 45%;
	left: -.4em;
	right: -.5em;
	height: 1px;
	opacity: 1;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition: -webkit-transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: transform .2s cubic-bezier(0.65, 0.05, 0.36, 1),-webkit-transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	background-color: #000;
}

#single .tags.bottom li a:hover:after {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.sns_count {
	position: relative;
	margin-bottom: 30px;
	box-sizing: border-box;
	background: #1a1a1a;
	z-index: 3;
}

.sns_count ul {
	width: auto;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sns_count li {
	margin: 0;
	color: #fff;
	text-align: center;
	font-size: 16px;
}

.sns_count li a {
	text-decoration: none;
	display: flex;
	transition: 300ms;
	color: #fff;
	padding: 9px 0;
	display: block;
	width: 30px;
	height: 43px;
	margin: 0px 12px;
	opacity: 1;
}

.sns_count li a svg {
	transform: scale(1);
	-webkit-transition: all 0.1s cubic-bezier(0.39, 0.58, 0.57, 1);
	-moz-transition: all 0.1s cubic-bezier(0.39, 0.58, 0.57, 1);
	-ms-transition: all 0.1s cubic-bezier(0.39, 0.58, 0.57, 1);
	-o-transition: all 0.1s cubic-bezier(0.39, 0.58, 0.57, 1);
	transition: all 0.1s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.sns_count li a:active svg {
	transform: scale(.95);
}

.yarpp-related {
	background: #f5f5f5;
	padding: 50px 0px 50px;
	/*max-height: 597px;*/
}

.yarpp-related .related-slide.slick-dotted {
	margin-bottom: 0;
	z-index: 3000;
}

.related-slide .slick-dots {
	bottom: 68px;
}

.related-slide .slick-prev {
	left: 0;
	z-index: 1000;
}

.related-slide .slick-dots li {
	margin: 0;
}

.related-slide .slick-next {
	right: 0;
	margin-top: -16px;
	width: 45px;
}

.related-slide .slick-next:before {
	font-family: "Overpass", sans-serif;
	content: 'NEXT';
	display: block;
	font-size: 16px;
	color: #000;
	transform: rotate(-90deg);
	position: absolute;
	top: 2px;
	right: 40px;
	font-weight: 600;
}

.related-slide .slick-next:after {
	content: '';
	display: block;
	border-bottom: 1px solid #000;
	width: 45px;
	height: 1;
}

.related-slide .slick-prev {
	left: 0;
	margin-top: -16px;
	width: 45px;
}

.related-slide .slick-prev:before {
	font-family: "Overpass", sans-serif;
	content: 'PREV';
	display: block;
	font-size: 16px;
	color: #000;
	transform: rotate(90deg);
	position: absolute;
	top: 2px;
	left: 40px;
	font-weight: 600;
}

.related-slide .slick-prev:after {
	content: '';
	display: block;
	border-bottom: 1px solid #000;
	width: 45px;
	height: 1;
}

.post_push {
	position: relative;
	box-sizing: border-box;
	background-color: rgba(100, 100, 100, 1);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 90px 0px 90px;
	text-align: center;
	filter: saturate(200%);
}

.post_push .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.55);
	z-index: 2;
}

.post_push .txt_area {
	position: relative;
	z-index: 3;
}

.post_push .txt_area img {
	width: 192px;
	height: auto;
	margin-bottom: 30px;
	letter-spacing: 0.5px;
}

.post_push .txt_area ul {
	display: flex;
	margin-bottom: 30px;
	width: 450px;
}

.post_push .txt_area ul li {
	min-width: 33%;
}

.post_push .txt_area a {
	padding: 0em 1em;
	font-weight: 400;
	color: #fff;
	font-size: 16px;
	opacity: 1;
	transition: 300ms;
	letter-spacing: 0.1px;
}

.post_push .txt_area a:hover {
	opacity: 0.6;
}

.post_push .txt_area span {
	font-size: 20px;
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.5px;
}

span.s_count {
	font-size: 13px;
	line-height: 1;
	margin-left: 5px;
}

#related {
	position: relative;
}

#related .bg {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	bottom: calc( -100% + 201px + 63px );
	left: 0;
	z-index: 0;
}

#single.page #middle-banner {
	background: none;
}

.headline.related-slide {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: initial;
}

.headline.related-slide .article {
}

.sns_count.bottom {
	width: 720px;
	margin:0 auto 60px;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
	/*width: 100%;*/
	background: inherit;
}

.sns_count.bottom ul.share-wrap {
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
}

.sns_count.bottom li {
	margin: 0;
	color: #FFF;
	text-align: center;
	font-size: 16px;
	flex-basis: 30%;
	align-self: center;
}

.sns_count.bottom li a {
	position: relative;
	text-decoration: none;
	color: #FFF;
	padding: 0;
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0;
	opacity: 1;
	-webkit-transition: color .1s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: color .1s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.sns_count.bottom li a {
	height: 52px;
	padding: 0;
	background-color:#000;
}

#icon-facebook .cls-1.icon,
#icon-twitter .cls-1.icon,
#line .cls-1.icon {
    fill: #FFF;
}

.sns_count.bottom li a:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	opacity: 1;
	-webkit-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transition: -webkit-transform .1s linear;
	transition: transform .1s linear;
	transition: transform .1s linear,-webkit-transform .1s linear;
}

.sns_count.bottom li.fb a{
	background: #3b5998;
}

.sns_count.bottom li.tw a{
	background: #1da1f2;
}

.sns_count.bottom li.ln a{
	background: -webkit-linear-gradient(-15deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(-15deg, #427eff 0%, #f13f79 70%) no-repeat;
}

.sns_count.bottom li a:after {
	background: #000;
}

.sns_count.bottom li a:hover:after {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.sns_count.bottom li a:hover {
	z-index:9999;
}

.icon-flex-wrap {
	width: 240px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
	max-width: 100%;
}

.icon-box {
	padding: 16px 15px;
	vertical-align: middle;
	align-content: center;
	align-items: center;
	align-self: center;
	display: flex;
	width: 100%;
}

.icon-text {
	flex-basis: 75%;
	padding: 18px 18px 18px 0;
	font-size: 14px;
	display: flex;
	display: block;
	height: 50px;
	letter-spacing: 0;
	text-align: center;
	width: 180px;
}

.sns_count li a .icon-box svg {
	width: 100%;
	height: 100%;
	max-width: 30px;
	max-height: 20px;
margin:auto;
}

.cls-1.icon {
	fill: #000;
	-webkit-transition: color .1s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: color .1s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.sns_count.bottom li a:hover .cls-1.icon {
	fill: #fff;
}

#single .single_img.e-404:after {
	content: none;
}

.bg-404 {
	width: 100vw;
	height: 80vh;
}

.meta-404 {
	position: absolute;
	width: 100vw;
	height: 80vh;
	top: 0;
	left: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	flex-direction: column;
	flex-wrap: wrap;
	z-index: 100;
	padding: 30px;
}

.meta-404 .divider {
	width: 30px;
	margin: 60px auto;
	text-align: center;
	border-top: 2px solid #fff;
}

.meta-404 h1 {
	color: #fff;
	text-align: center;
	font-size: 120px;
	display: block;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	letter-spacing: 0px;
}

.meta-404 p {
	font-size: 13px;
	font-weight: 400;
	line-height: 2.4;
	text-align: left;
	max-width: 510px;
}

.meta-404 p a {
	color: #fff;
	text-decoration: underline;
}

.feature_img {
	margin-bottom: 90px;
	position: relative;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	overflow: hidden;
}

.feature_img .bg {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	top: -10px;
	top: -10px;
	bottom: -10px;
	right: -10px;
	left: -10px;
	z-index: 1;
}

.feature_img .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.2);
	z-index: 4;
}

.feature_img img {
	height: 100%;
	height: auto;
	max-height: 80vh;
	width: auto;
	transform: translateY(1px);
	position: relative;
	z-index: 3;
}

.feature_img img {
	max-height: calc(100vh - 69px);
}

.feature_img h1 {
	font-size: 20px;
	color: #fff;
	margin-bottom: 50px;
	line-height: 1.4;
	max-width: 720px;
}

.feature_img h2 {
	font-size: 44px;
	color: #fff;
	margin-bottom: 0.1em;
	line-height: 1.3;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 36px;
	max-width: 800px;
}

.feature_img .meta {
	position: absolute;
	bottom: 50px;
	left: 50px;
	text-align: left;
	z-index: 4;
}

.feature_img.vertical {
	text-align: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.feature_img.vertical:after {
	content: '';
	background: inherit;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: -1;
}

.feature_img.vertical img {
	width: auto;
	height: 100%;
	max-height: 100vh;
	transform: translateY(1px);
}

#single .feature_img.letterblack .meta h1, #single .feature_img.letterblack .meta h2 {
	color: #000;
}

#gallery .horizontal {
	display: flex;
	align-items: stretch;
	margin-bottom: 0;
}

#gallery .horizontal .imgbox {
	width: 50%;
	height: auto;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

#gallery br {
	display: none;
}

#gallery img {
	display: block;
	margin-bottom: -0.1px;
}

#gallery .horizontal .imgbox img {
	opacity: 0;
}

#gallery .firstview {
	position: relative;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100vh;
}

#gallery .firstview:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(255,255,255,0) 33%,rgba(0, 0, 0, .3) 100% );
}

#gallery .firstview .flex {
	display: flex;
	height: 100vh;
}

#gallery .firstview .imgbox {
	width: auto;
	height: 100vh;
	position: relative;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	transform: translateY(0);
}

#gallery .firstview .imgbox.scroll {
	opacity: 1;
	transform: translateY(0);
}

#gallery .imgbox span {
	position: absolute;
	bottom: 30px;
	right: 30px;
	background: #fff;
	padding: 1px;
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 5px;
	padding: 3px 5px;
	font-size: 10px;
	background: rgba(255,255,255,.4);
	color: #fff;
	line-height: 1.1;
	font-style: italic;
}

#gallery .firstview br {
	display: inline;
}

#gallery .firstview img {
	opacity: 0;
	visibility: hidden;
}

#gallery .firstview img.scroll {
	opacity: 0;
	visibility: hidden;
	transition: 0ms;
}

#gallery .text {
	padding: 30px;
	max-width: 546px;
	position: absolute;
	z-index: 2;
	bottom: 0px;
	left: 0px;
	padding: 50px;
	max-width: 50%;
	position: absolute;
	z-index: 2;
}

#gallery .base-content p {
	margin-bottom: 0;
}

#gallery .base-content .gallery-inner p{
    margin: 0 auto 30px;
}

#gallery .base-content .caption-box p {
	font-size: 14px;
}

#gallery .base-content {
	margin-bottom: 0;
}

#gallery .text p {
	font-size: 13px;
	line-height: 1.6;
	color: #fff;
	margin-bottom: 0;
}

#gallery .gallery-inner {
	max-width: 720px;
	margin: 60px auto;
}

#gallery .base-content .gallery-inner h3 {
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: 0.1px;
	margin: 60px 0 30px;
	padding: 0;
	color: #000;
}

#gallery .info-box .text {
	position: relative;
	padding: 0;
	margin-right: 30px;
	max-width: 500px;
}

#gallery .info-box .text p {
	color: #000;
	width: 100%;
}

#gallery .info-box .text h3 {
	margin: 1em 0px 1em;
}

#category-top {
	height: 450px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 60px;
}

#category-top .meta {
	display: flex;
	justify-content: center;
	align-items: center;
}

#category-top .meta h2 {
	color: #fff;
	font-weight: 900;
	font-size: 60px;
	width: 400px;
	text-align: right;
}

#category-top .meta .lower {
	transform: translateY(1em);
	text-align: left;
}

#breadcrumbs {
	padding: 0px 30px;
	font-size: 12px;
	color: #333;
	font-weight: 400;
	letter-spacing: 0.1px;
}

#archive #breadcrumbs {
	padding: 0px 30px 30px;
	font-size: 12px;
	color: #333;
	font-weight: 400;
}

#breadcrumbs a {
	font-size: 12px;
	color: #333;
	font-weight: 400;
}

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

.page .page-numbers {
	display: none;
}

.page .next {
	display: inline;
	font-size: 12px;
}

.wpp-thumbnail {
	display: none!important;
}

.not-found {
	width: 100%;
	background: #000;
	color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

.not-found h1 {
	color: #fff;
	font-size: 10vw;
	font-weight: 900;
	font-family: "Overpass", sans-serif;
}

.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 30px;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

#nav {
	position: fixed;
	background: rgba(0, 0, 0, 0.9);
	height: 100vh;
	width: 300px;
	right: 0;
	top: 0;
	z-index: 90;
	transform: translateX(700px);
	transition: 200ms ease-out;
	overflow: scroll;
}

#nav.active {
	transform: translateX(0px)!important;
	transition: 300ms ease-out;
}

#nav .inner {
	padding: 120px 30px;
}

#nav .logo {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-bottom: 15px;
	opacity: 1;
	transition: 200ms;
}

#nav .logo:hover {
	opacity: 0.6;
}

#nav a {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 0.5em 0em;
	display: inline-block;
	letter-spacing: 0.5px;
}

#nav nav {
	margin-bottom: 2em;
}

#nav .first a {
	position: relative;
}

#nav .first a:after {
	position: absolute;
	bottom: 2px;
	left: 0;
	content: '';
	display: block;
	height: 1px;
	width: 0%;
	background: #fff;
	transition: 200ms;
}

#nav .first a:hover:after {
	width: 100%;
}

#nav .first ul.upper {
	margin-bottom: 20px;
}

#nav .second ul {
	display: flex;
}

#nav .second a {
	color: #fff;
	padding: 9px 0;
	display: block;
	width: 30px;
	height: 43px;
	margin: 0px 6px;
	opacity: 1;
	transition: 200ms;
}

#nav .second a .cls-1 {
	fill: #fff;
}

#nav .second a:hover {
	opacity: 0.5;
}

#nav .third a {
	font-size: 12px;
	position: relative;
	font-weight: 400;
}

#nav .third a:after {
	position: absolute;
	bottom: 2px;
	left: 0;
	content: '';
	display: block;
	height: 1px;
	width: 0%;
	background: #fff;
	transition: 200ms;
}

#nav .third a:hover:after {
	width: 100%;
}

@media screen and (max-width:1140px) {
	.second-slide .cal.slick-center .meta {
		left: 50%;
	}

	.headline .article {
		position: relative;
		width: calc(50% - 60px);
	}
}

@media screen and (max-width:860px) {
	.second-slide .cal {
		margin: 0;
	}

	.second-slide .meta .date {
		font-size: 12px;
		margin-right: 0;
	}

	.second-slide .count {
		font-size: 60px;
		margin-top: -39px;
		letter-spacing: 0px;
	}

	.second-slide .total {
	}

	.second-slide .slick-next, .second-slide .slick-prev {
		display: none!important;
	}
}

@media screen and (max-height:700px) {
	#nav .inner {
		padding: 60px 30px;
	}
}

@media screen and (max-width: 737px) {
	.section-title {
		margin-bottom: 0;
		font-size: 24px;
	}

	#archive .section-title {
		margin-bottom: 30px;
	}

	#related .section-title {
		margin-bottom: 30px;
	}

	.pc {
		display: inline-block;
		display: none;
	}

	.sp {
		display: none;
		display: inline-block;
	}

	#header.fixed {
		height: 50px;
	}

	#container.header-fixed {
		padding-top: 50px;
	}

	#header h1.logo {
		width: 200px;
		top: 15px;
		left: 20px;
		padding: 0;
	}

	#header.fixed h1.logo {
		top: 5px;
		left: 50%;
		margin-left: -85px;
		width: 170px;
		height: 40px;
	}

	#header.fixed #menu {
		top: 0;
		right: 0;
	}

	.menu-trigger {
		width: 20px;
		height: 20px;
		margin: 15px 15px;
	}

	#header.feature h1.logo {
		width: 100%;
		top: inherit;
		left: inherit;
		display: block;
		padding: 17px 80px 0;
		height: inherit;
		opacity: 1;
	}

	#header.feature h1.logo svg {
		height: auto;
	}

	#menu {
		top: 10px;
		right: 5px;
	}

	.slick-prev {
		width: 45px;
	}

	.slick-prev:before {
		content: none;
	}

	.slick-prev:after {
		left: 0px;
		font-size: 9px;
	}

	.slick-next {
		width: 45px;
	}

	.slick-next:before {
		content: none;
	}

	.slick-next:after {
		right: 0px;
		font-size: 9px;
	}

	.main_slide .catch-title {
		font-size: 30px;
		padding: 0px 46px;
		text-align: center;
		margin-bottom: 18%;
		letter-spacing: 1px;
		line-height: 1.2;
		font-size: 8vw;
	}

	.main_slide .cal {
		height: calc(100vh - 69px);
		transition: 300ms;
	}
	body.android .main_slide .cal{
		height: 100vh;
	}

	.main_slide .cal .meta {
		bottom: 30px;
		left: 20px;
		width: 80%;
	}

	.main_slide .meta h2 {
		font-size: 16px;
		margin-bottom: 20px;
		width: 100%;
		max-width: 280px;
		font-weight: 700;
		letter-spacing: .1px;
	}

	.main_slide .meta .cat {
		font-size: 9px;
		margin-right: 10px;
	}

	.main_slide .meta .date {
		font-size: 9px;
		letter-spacing: 0;
	}

	.main_slide .slick-dots {
		width: 218px;
		right: -87px;
		bottom: 120px;

    width: 250px;
    right: -103px;
    bottom: 143px;
	}

	.main_slide .slick-dots li {
		width: 25px;
		margin: 0 5px;

    width: 24px;
    width:20px;
    margin: 0;
	}

	.main_slide .slick-dots li button {
		width: 26px;
    width: 24px;
    width:20px;
	}

	.main_slide .slick-dots li button:before {
		font-size: 9px;
	}

	.main_slide .slick-dots li.slick-active button:after {
	}

	.main_slide .slick-prev {
		width: 45px;
	}

	.main_slide .slick-prev:before {
		content: none;
	}

	.main_slide .slick-prev:after {
		left: 0px;
		font-size: 9px;
	}

	.main_slide .slick-next {
		width: 45px;
	}

	.main_slide .slick-next:before {
		content: none;
	}

	.main_slide .slick-next:after {
		right: 0px;
		font-size: 9px;
	}

	.main_slide .tag {
		right: 20px;
	}

	.main_slide .tag a {
		color: #fff;
		font-size: 18px;
		letter-spacing: 1px;
	}

	#scroll {
		height: 45px;
	}

	#scroll a {
		font-size: 9px;
		top: inherit;
		bottom: 30px;
		left: 50%;
		width: 100%;
		margin-left: -25px;
		display: inline;
		text-align: center;
	}

	#scroll a:after {
		width: 1px;
		height: 40px;
		top: 17px;
		right: 19px;
	}

	#scroll:after {
		height: 20px;
	}

	#pickup {
		padding-top: 30px;
		margin-bottom: 0px;
	}

	.second-slide.slick-slider .slick-list {
		padding-top: 30px!important;
		padding-bottom: 60px!important;
	}

	.second-slide .cal .meta {
		transform: scale(0);
		position: absolute;
		opacity: 0;
		right: -45px;
		width: 100%;
		bottom: -25px;
	}

	.second-slide .cal.slick-center .meta {
		display: block;
		left: inherit;
		width: 100%;
		opacity: 1;
		transition: 200ms;
		bottom: -25px;
		right: -45px;
		padding: 20px;
		text-align: left;
	}

	.second-slide .meta h3 {
		font-size: 14px;
		margin-bottom: 15px;
		-webkit-line-clamp: 2;
		letter-spacing: 0.5px;
	}

	.second-slide .meta .cat {
		margin-right: 0;
		font-size: 12px;
	}

	.second-slide .meta .date {
		font-size: 12px;
		margin-right: 0;
		bottom: 20px;
		right: 20px;
	}

	.second-slide .count {
		font-size: 80px;
		margin-top: -40px;
		letter-spacing: -5px;
		right: -65px;
	}

	.second-slide .total {
		font-size: 24px;
		transform: translateY(-8px);
	}

	#middle-banner {
		padding: 20px 20px 40px;
		margin-bottom: 0px;
	}

	#middle-banner.top {
		padding: 20px 20px 30px;
	}

	#single #middle-banner {
		padding: 20px 20px 20px;
		margin-bottom: 0px;
	}

	#single #middle-banner.bottom {
		margin-bottom: 0px;
		padding: 0px 20px 20px;
	}

	.post_push .txt_area {
		width: 100%;
	}

	.post_push .txt_area ul {
		width: 100%;
	}

	#archive {
		padding: 0 20px 0;
	}

	.headline {
		padding: 0px;
	}
	#archive-series.headline .article {
    width: 47%;
    margin: 0 0 20px;
}
	#archive-series.headline {
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: row;
    justify-content: space-between;
	}
	#archive-series.headline .article .txt,
	#archive-series.headline .article.bg .txt {
    padding: 10px;
}
	#archive-series.headline .txt .cat {
    font-size: 10px;
    margin-bottom: 10px;
    line-height: 15px;
    letter-spacing: 0.5px;
}
	#archive-series.headline .txt .title h3 {
    font-size: 12px;
    margin-bottom: 20px;
    max-height: 32px;
    min-height: 20px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
	#archive-series.headline .article .txt .date,
	#archive-series.headline .article.bg .txt .date {
    bottom: 10px;
    right: 10px;
    margin-bottom: 0;
}
	.headline .article {
		width: 100%;
		margin: 0 0 20px;
	}

	#related .headline .article {
		width: 100%;
		margin: 0 0px 20px;
		background-color: #FFF;
	}

	.headline .txt .sub {
		top: 20px;
		right: 20px;
	}

	.headline .article .txt {
		padding: 20px;
	}

	.headline .txt .title {
		color: #000;
		font-size: 13px;
	}

	.headline .article .txt h2 {
		font-size: 12px;
		line-height: 16px;
		height: 32px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 8px;
		letter-spacing: 0;
	}

	.headline .avatar {
		width: 15px;
		height: 15px;
	}

	.headline .article .author {
		margin-top: 0;
	}

	.headline .article .share {
		top: 20px;
		right: 20px;
		font-size: 18px;
	}

	.headline .article.bg .txt {
	}

	.headline .article.bg {
		display: block;
	}

	.headline .article.bg .txt .title {
		color: #fff;
	}

	.headline .article.bg .txt .date {
		bottom: 20px;
		right: 20px;
		margin-bottom: 0;
	}

	.pagenavi {
		margin: 0px 0 20px;
	}

	.pagenavi a {
		width: 100%;
		font-size: 14px;
		padding: 20px 0px;
	}

	.pagenavi-archive {
		margin: 0 auto 30px;
	}

	#footer {
		padding: 40px 0px 20px;
	}

	#footer .cat.upper {
		margin-bottom: 10px;
	}

	#footer .cat {
		text-align: center;
		margin-bottom: 10px;
	}

	#footer .sns {
		margin-bottom: 30px;
	}

	.single_img {
		width: 100%;
		height: 100vh;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#single .single_img > img {
		display: none;
		display: inline-block;
		height: auto;
	}

	#single .single_img .meta {
		width: 100%;
		padding: 0px 20px;
		margin: 0;
		bottom: 25px;
		left: 0;
	}

	#single .single_img h1 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	#single .single_img {
		height: auto;
	}

	#single .single_img.trimming img {
		display: inline-block;
		height: auto;
		opacity: 1;
	}

	#single .single_img.trimming.vertical img {
		width: 100%;
		max-height: auto;
		max-height: initial;
	}

	#single .single_img.verical {
		height: auto;
	}

	#single .single_img.vertical {
		height: auto;
	}

	#single .single_img.vertical img {
		width: 100%;
		max-height: auto;
		max-height: initial;
		height: auto;
		opacity: 1;
	}

	#single .meta-second {
		margin-bottom: 8px;
		padding: 0px 20px;
	}

	#single .meta-second h1 {
		font-size: 18px;
		margin-bottom: 12px;
	}

	#single .detail p {
		font-size: 13px;
	}

	#single .detail .pr {
		padding: 0;
	}

	#single .content #breadcrumbs {
		padding: 0px;
		font-size: 10px;
	}

	#single .content #breadcrumbs a {
		font-size: 10px;
	}

	#single .meta-second .sns_count li a path {
		fill: #000;
	}

	#single .meta-second .share path {
		fill: #000!important;
	}

	.single_img.trimming {
		margin-bottom: 30px;
		text-align: center;
	}

	#single .meta-second .meta .cat {
		margin-bottom: 12px;
	}

	#single .meta .cat {
		font-size: 10px;
		margin-bottom: 10px;
	}

	#single .meta .date {
		font-size: 10px;
	}

	#single .author {
		left: 20px;
		bottom: 20px;
	}

	#single .share {
		bottom: 26px;
		right: 20px;
		font-size: 12px;
	}

	#single .share svg {
		width: 11px;
	}

	#single .tags.bottom li a {
		font-size: 9px;
		line-height: 1.6;
		letter-spacing: 0;
	}

	#single .single_img:after {
		height: 20px;
	}

	.sns_count {
		margin-bottom: 0px;
	}

	.sns_count li a {
		padding: 11px 0;
	}

	#single .content {
		padding: 0px 20px;
	}

	#single .meta-second .meta {
		margin-bottom: 0;
	}

	.base-content h2 {
		font-size: 22px;
		line-height: 1.6;
		margin: 48px 0 20px;
		padding: 20px 0 0;
	}

	.base-content h3 {
		font-size: 18px;
		margin: 36px 0 20px;
	}

	.base-content h4 {
		margin-top: 24px;
		font-size: 14px;
	}

	.divider {
		margin: 40px auto;
	}

	.base-content p {
		font-size: 14px;
		line-height: 1.8;
		margin-bottom: 20px;
	}

	.base-content p.credit {
		font-size: 9px;
		margin: -15px 0 30px;
		line-height: 1.6;
	}

	.base-content iframe {
		max-width: 100%;
	}
	
	.base-content .wp-embedded-content {
	margin: -18px auto 0;
}


	.base-content blockquote:before {
		opacity: 0.3;
	}

	.base-content blockquote p {
		padding: 15px;
	}

	.base-content .quote-origin {
		padding-right: 15px;
	}

	.base-content .info-box {
		padding: 40px 35px 40px;
		display: block;
	}

	.base-content .info-box .pic {
		margin: 0px auto;
		width: 100%;
		max-width: 100%;
	}

	.base-content .single-slide img {
	}

	#gallery .gallery-inner {
		padding: 0px 15px;
	}

	#gallery .info-box {
		padding: 40px 35px;
	}

	#gallery .info-box .text {
	}

	#gallery .info-box .text p {
		margin-bottom: 30px;
	}

	#gallery .info-box .text h3 {
		margin: 0px 0px 15px;
	}

	#gallery .info-box strong {
		font-size: 13px;
		margin-bottom: 10px;
		display: inline-block;
	}

	#gallery .gallery-inner p {
		margin: 0px 0px 30px;
	}

	#gallery .firstview {
		height: calc(100vh - 69px);
	}

	#gallery .firstview .flex {
		height: calc(100vh - 69px);
	}

	#gallery .firstview .flex .imgbox {
		height: calc(100vh - 69px);
	}

	#gallery .text p {
		font-size: 12px;
	}

	#gallery .text {
		font-size: 12px;
		margin: 0;
		padding: 15px;
		width: calc(100% - 10px);
		left: 5px;
		bottom: 2%;
		max-width: 100%;
	}

	#gallery .imgbox span {
		bottom: 5px;
		right: 5px;
		max-width: 50%;
		font-size: 8px;
	}

	.base-content .horizontal {
		display: flex;
	}

	.base-content .profile {
		font-size: 16px;
		padding: 0px 15px;
	}

	.headline.related-slide {
		display: block;
	}

	#related,
	#ranking {
		padding: 0 20px;
	}

	#single .headline .article .author {
		margin-top: 0;
		left: 20px;
		bottom: 0;
	}

	#single .headline .authorname {
		color: #000;
	}

	#single .headline .avatar {
		width: 15px;
		height: 15px;
	}

	#single .headline .article .txt .date {
		bottom: 20px;
		right: 20px;
		font-size: 10px;
	}

	.yarpp-related {
		background: #f5f5f5;
		padding: 30px 0px 20px;
	}

	.yarpp-related .article:last-child {
		margin-bottom: 0;
	}

	.yarpp-related .article,
	#ranking .article{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	}

	.yarpp-related .headline .article .imgbox,
	#ranking .headline .article .imgbox{
	width: 60%;
    max-height: initial;
    padding-left: 15px;
	}


	.yarpp-related .headline .txt .cat,
	#ranking .headline .txt .cat {
    margin-bottom: 10px;
	font-size:12px;
	}

	#single .yarpp-related .headline .article .txt .date,
	#single #ranking .headline .article .txt .date {
    bottom: 30px;
}

	.post_push {
		padding: 30px 0px;
		margin-bottom: 0;
	}

	.post_push .txt_area img {
		width: 120px;
	}

	.post_push .txt_area a {
		font-size: 13px;
	}

	.post_push .txt_area span {
		font-size: 15px;
	}

	.feature_img {
		margin-bottom: 20px;
	}

	#feature .sp {
		padding: 20px;
	}

	#feature .meta h1 {
		font-size: 22px;
		margin-bottom: 1em;
	}

	#feature .meta h2 {
		font-size: 13px;
		font-weight: 600;
	}

	#gallery .single_img {
		height: auto;
	}

	#gallery .text {
		font-size: 12px;
		margin: 30px auto;
		padding: 0px 15px;
		margin: 0;
		padding: 15px;
		width: calc(100% - 30px);
		left: 15px;
		bottom: 15px;
	}

	#gallery .meta {
		bottom: 15px;
		padding: 0px 15px;
	}

	#gallery .meta .title {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.gallery-slide {
		background: #000;
	}

	.gallery-slide .imgbox {
		background-size: contain;
	}

	#gallery .imgbox span {
		bottom: 15px;
		right: 15px;
		max-width: 280px;
	}

	.gallery-slide .horizontal .imgbox {
		background-size: contain;
	}

	.gallery-area .text {
		height: 360px;
	}

	#slider-gallery .slick-dots {
		bottom: 90px;
	}

	#slider-gallery .slick-prev:before {
		content: none;
	}

	#slider-gallery .slick-prev:after {
		left: 0px;
		top: 0em;
		font-size: 9px;
	}

	#slider-gallery .slick-next:before {
		right: 0px;
		font-size: 9px;
		top: 1.5em;
	}

	#slider-gallery .slick-next:after {
		content: none;
	}

	#related .bg {
		display: none;
	}

	#archive #breadcrumbs {
		padding: 0;
		margin: 0 0 20px;
	}

	p#breadcrumbs {
		padding: 0;
		font-size: 12px;
		margin-bottom: 20px;
	}

	p#breadcrumbs a {
		font-size: 12px;
	}

	#category-top {
		margin-bottom: 20px;
		height: 300px;
	}

	#category-top .meta h2 {
		font-size: 27px;
	}

	#infscr-loading {
		padding: 15px 0;
		display: inline-block;
		vertical-align: middle;
		width: 100%;
	}

	#infscr-loading p {
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
		font-size: 15px;
		font-weight: normal;
		color: #002153;
	}

	#nav {
		width: 100%;
		padding-bottom: 90px;
	}

	#nav .inner {
		padding: 20px 20px;
	}

	#nav .logo {
		left: 0;
		bottom: 0;
		display: block;
		margin-bottom: 30px;
		width: 192px;
		z-index: 1;
	}

	#nav a {
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		padding: 0.4em 0em;
		display: inline-block;
		letter-spacing: 1px;
	}

	#footer .cat a {
		display: inline-block;
		margin-bottom: 1em;
	}

	#footer .inquiry a {
		display: inline-block;
		margin-bottom: 1em;
	}

	#footer .copyright {
		font-size: 9px;
	}

	.page_top.fixed {
		right: 20px;
	}

	h3.recommend-title {
		font-size: 14px!important;
		margin-bottom: 30px;
		max-height: 2em;
		min-height: 48px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.7;
		height: auto;
		color: #000;
	}
}

@media screen and (max-width: 374px) {
	.headline .article .txt h2 {
		margin-bottom: 0px;
	}
}

.feature-content {
	width: 100%;
	max-width: 1200px;
	margin: 40px auto 60px;
	padding: 0px;
}

.feature-content p {
	max-width: 720px;
	margin: 0px auto 60px;
}

.feature-content p.tate {
	margin: 0 auto 0;
}

.feature-content p.info {
	margin: 0 auto 30px;
}

.feature-content .base-content p.credit {
	margin: -30px auto 150px;
	color: #333;
	max-width: 720px;
	font-size: 12px;
}

.feature-content blockquote {
	max-width: 720px;
	margin: 0px auto;
}

.feature-content .info-box {
	max-width: 720px;
	margin: 0px auto 60px;
}

.feature-content .base-content .info-box .text h3 {
	text-align: left;
}

.feature-content .info-box img, .feature-content .info-box div {
	margin-bottom: 0px;
}

.feature-content iframe {
	display: block;
	margin: 0px auto;
}

.feature-content .caption-box {
	border-left: 2px solid #333;
	padding-left: 20px;
	margin-bottom: 90px;
	max-width: 720px;
	margin: 0px auto 90px;
}

.feature-content p + div.caption-box {
	margin-top: -30px;
}

.feature-content .base-content .caption-box h3 {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 900;
	letter-spacing: 0px;
	color: #2b2b2b;
	text-align: left;
	padding: 0;
}

.feature-content .base-content .caption-box p {
	font-size: 12px;
	line-height: 1.9;
	word-break: break-all;
	letter-spacing: 0.1px;
	margin-bottom: 20px;
	color: #2b2b2b;
	font-weight: 400;
	padding: 0;
}

#feature .meta h2, .feature-content p, #feature .meta h1 {
	font-family: "Overpass", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "繝｡繧､繝ｪ繧ｪ", sans-serif;
}

.feature-content .detail {
	max-width: 760px;
	margin: 0px auto;
}

.feature-content h2 {
	font-size: 36px;
	margin: 0 auto 20px;
	width: 100%;
	text-align: center;
	border-top: none;
	max-width: 720px;
	padding: 0;
	line-height: 1.5;
}

.feature-content h3 {
	font-size: 24px;
	margin: 0 auto 30px;
	width: 100%;
	text-align: center;
	line-height: 1.5;
	font-weight: 700;
	max-width: 720px;
}

.feature-content h2 a, .feature-content h3 a {
	color: #000;
}

.feature-content h4 {
	font-size: 14px;
	margin: 0 auto 30px;
	width: 100%;
	text-align: center;
	line-height: 1.8;
	max-width: 760px;
}

.feature-content p.question {
	font-weight: bold;
	margin-top: 60px;
	font-style: italic;
}

.feature-content div {
	margin: 0px auto 60px;
}

.feature-content img {
	margin: 0px auto 0px;
}

.article.bg .txt {
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
}

#feature p.img {
	max-width: 100%;
}

.fade01 {
	display: none;
}

#feature p {
	transform: translateY(30px);
	opacity: 0;
	transition: 1200ms;
}

#single .base-content img {
	transform: translateY(30px);
	opacity: 0;
	transition: 1200ms;
}

#gallery img, #gallery .imgbox {
	transform: translateY(30px);
	opacity: 0;
	transition: 1200ms;
}

#gallery img:nth-of-type(1) {
	opacity: 1;
	transform: translateY(0);
}

#feature p.scroll {
	transform: translateY(0);
	opacity: 1;
}

#single .base-content img.scroll {
	transform: translateY(0);
	opacity: 1;
}

#gallery img.scroll, #gallery .imgbox.scroll {
	transform: translateY(0);
	opacity: 1;
}

.feature-content p.cre {
	font-size: 12px;
	text-align: right;
}

@media screen and (max-width:737px) {
	#single .single_img {
		height: 100vw;
	}

	#single .single_img.video {
		height: auto;
	}

	.base-content .info-box .text {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.feature-content .base-content .info-box .text {
		margin-right: 0;
		margin-bottom: 20px;
	}

	.feature-content p + div.caption-box {
		margin: -30px 40px 30px;
	}

	#single .single_img > img {
		opacity: 0;
	}

	.single_img .bg {
		display: none;
	}

	#single .single_img.trimming {
		height: auto;
	}

	#feature .meta h1 {
		font-size: 12px;
		letter-spacing: 1px;
	}

	.feature-content p.credit {
		font-size: 11px;
	}

	#footer .cat a {
		font-size: 13px;
		padding: 0em .5em;
	}

	.feature_img h1 {
		font-size: 14px;
	}

	.feature_img h2 {
		font-size: 24px;
	}

	#single .tags li a {
		color: #fff;
		font-size: 10px;
		font-weight: 400;
		margin: 0;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 737px) {
	.feature_img {
		margin-bottom: 0px;
		opacity: 1;
	}

	.headline .txt .title a {
		font-size: 14px;
	}

	.headline .txt .title h3 {
		font-size: 14px;
		margin-bottom: 30px;
		max-height: 2em;
		min-height: 48px;
	}
	.headline .txt .title h3.title-all {
	font-size: 12px;
    margin-bottom: 30px;
    max-height: 72px;
    min-height: 72px;
    line-height: 1.5;
display: block;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
	}
	.headline .txt .cat {
		font-size: 14px;
	}

	.feature_img img {
		height: 100vh;
		opacity: 0;
	}

	.feature_img.vertical img {
		height: 100vh;
		max-height: 100vh;
		opacity: 0;
	}

	.feature_img.vertical img {
		height: calc(100vh - 69px);
		opacity: 0;
	}

	.feature_img .meta {
		position: absolute;
		bottom: 15px;
		left: 15px;
		right: 15px;
	}

	#feature {
		background: #000;
	}

	/*
	.postid-19727{
		background-image: url(https://eyescream.jp/wp-content/uploads/2018/05/bg-1440x4611.png) !important;
}


.postid-19727 .feature-content{
	background: none;
}

.postid-19727 .feature-content p + div.caption-box {
    margin: 0px;
}*/

	.pc {
		display: inline-block;
	}

	#feature .meta h2 {
		font-size: 50px;
		display: inline-block;
		margin: 0 0 10px;
		width: 100%;
		text-align: left;
		line-height: 1;
	}

	#feature .meta h1 {
		font-size: 14px;
		margin-bottom: 0;
		line-height: 1.7;
		text-align: left;
		width: 66%;
	}

	.sp {
		display: none;
	}

	.feature_img:before, .feature_img:after {
		display: none;
	}

	/*.feature-content {
		background: #fff;
	}*/

	.feature_img .bg {
		display: none;
	}

	.feature-content {
		padding: 40px 0;
		margin: 0 0 20px;
	}

	.feature-content p.question {
		font-weight: bold;
		margin-top: 45px;
	}

	.feature-content img {
		margin: 30px 0;
	}

	#feature .meta h2 {
		font-size: 38px;
		margin: 0 0 10px;
		text-align: left;
		line-height: 1.2;
		letter-spacing: 1px;
	}

	.feature_img .meta {
		position: absolute;
		bottom: 25px;
		left: 25px;
		right: 25px;
	}

	.pickup-slide .cal.slick-center .meta {
		top: 30px;
		margin-top: 0;
		top: 200px;
		margin-top: 0;
		left: 50%;
		width: 60%;
	}

	.pickup-slide .meta h3 {
		font-size: 10px;
		margin-bottom: 30px;
	}
}

.page_top.fixed {
	display: none;
}

@media screen and (max-width: 737px) {
	#single .feature_img .meta h2 {
		font-size: 36px;
		margin: 0 0 10px;
		line-height: 1.4;
		letter-spacing: 0.1px;
		text-align: center;
		font-weight: bold;
		max-width: 100%;
		font-size: 22px;
	}

	#single .feature_img .meta h1 {
		font-size: 15px;
		line-height: 1.5;
		width: 100%;
		letter-spacing: 0.5px;
		text-align: center;
		margin-bottom: 10px;
	}

	#single .detail .credit.feature {
		margin-bottom: 12px;
		font-size: 9px;
		text-align: center;
	}

	.single-format-image #single .detail .pr {
		margin-bottom: 40px;
		text-align: center;
	}

	.feature_img .meta:after {
		content: '';
		position: absolute;
		bottom: 0px;
		width: 1px;
		height: 30px;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
	}

	.feature_img .meta {
		position: absolute;
		bottom: 0px;
		left: 30px;
		right: 30px;
		text-align: center;
	}

	.feature-content p.info {
		font-size: 14px;
		line-height: 1.8;
		margin: 0 auto 30px;
		max-width: 100%;
		padding: 0 45px;
	}

	.feature-content .detail {
		padding: 0px 45px;
	}

	#feature p.img {
		max-width: 100%;
		padding: 0;
	}

	#single .feature-content .content {
		padding: 0;
		width: 100%;
	}

	.feature-content p {
		width: 100%;
		padding: 0 40px 0;
		margin: 0 0 20px;
	}

	#single .feature-content .content {
		padding: 0;
		width: 100%;
		margin: 0;
	}

	.feature-content h2 {
		font-size: 24px;
		margin: 0 auto 20px;
		width: 100%;
		max-width: 100%;
		line-height: 1.5;
		padding: 0 40px;
	}

	.feature-content h3 {
		font-size: 16px;
		margin: 0 auto 30px;
		width: 100%;
		text-align: center;
		line-height: 1.5;
		font-weight: 400;
		max-width: 100%;
		padding: 0 40px;
	}

	.feature-content p.info {
		font-size: 14px;
		line-height: 1.7;
		margin: 0 auto 30px;
		max-width: 100%;
		padding: 0 40px;
	}

	.feature-content .base-content p.credit {
		margin: -10px auto 60px;
		max-width: 100%;
		font-size: 10px;
	}

	.related-slide .slick-dots {
		bottom: -10px;
	}
}

#gallery .base-content h3 {
	margin: 0 0 10px;
	font-size: 36px;
	color: #fff;
	line-height: 1;
	letter-spacing: 0px;
}

#gallery .base-content .center{
	text-align:center;
}

#gallery .base-content h4 {
	margin: 0 0 10px;
	font-size: 15px;
	color: #fff;
	line-height: 1.1;
	letter-spacing: 0px;
}

#gallery .text p {
	font-size: 14px;
	line-height: 2;
	color: #fff;
	margin-bottom: 0;
	width: 70%;
}

.base-content .profile {
	width: 100%;
	max-width: 720px;
	margin: 120px auto 80px;
	line-height: 1.8;
	font-size: 16px;
}

#gallery .base-content .profile h4 {
	margin: 0 0 30px;
	font-size: 16px;
	color: #000;
	line-height: 1.1;
	letter-spacing: 0px;
}

@media screen and (max-width: 737px) {
	#gallery .firstview:before {
		background: linear-gradient(rgba(0,0,0,.1) 15%,rgba(0, 0, 0, .65) 100% );
	}

	#gallery .base-content h3 {
		margin: 0 0 10px;
		font-size: 48px;
		line-height: 1;
		font-weight: 700;
	}

	#gallery .base-content h4 {
		margin: 0 0 10px;
		font-size: 12px;
		color: #fff;
		line-height: 1.1;
	}

	#gallery .text {
		margin: 0;
		padding: 0px;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 30px 20px 10px;
	}

	#gallery .text p {
		line-height: 2;
		color: #fff;
		margin-bottom: 0;
		font-style: italic;
		width: 100%;
		letter-spacing: 0px;
		font-weight: 400;
		font-size: 11px;
	}

	.base-content .profile {
		width: 100%;
		max-width: 100%;
		margin: 60px auto 90px;
		padding: 40px;
		line-height: 1.6;
	}

	#gallery .imgbox span {
		bottom: 5px;
		right: 5px;
		max-width: 50%;
		font-size: 8px;
		padding: 1px 3px;
		font-size: 10px;
		background: rgba(255,255,255,.4);
	}

	.page_top.fixed {
		right: 10px;
		bottom: 25px;
	}

	.headline .txt .date {
		position: absolute;
		bottom: 20px;
		right: 20px;
		font-size: 12px;
		font-weight: 400;
	}

	#middle-banner img {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: inline-block;
		-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
	}

	#gallery .base-content .profile h4 {
		margin: 0 0 20px;
		font-size: 14px;
		color: #000;
		line-height: 1.2;
		letter-spacing: 0px;
	}

	#gallery .base-content .caption-box p {
		font-size: 10px;
	}

	.feature-content div {
		margin: 0 auto;
	}
.feature-content .caption-box {
    width: calc(100% - 70px);
    max-width: 100%;
    border-left: 2px solid #333;
    padding-left: 15px;
    margin: 0 30px 60px 30px;
}

	.feature-content .pagination .c-page {
		margin: 0 4px 14px;
	}

	.feature-content div.divider {
		margin: 40px auto;
	}

	.base-content .question {
		font-style: italic;
		font-weight: 700;
		margin: 40px auto 15px;
	}

	.caption-box {
		border-left: 2px solid #333;
		padding-left: 15px;
		margin-bottom: 60px;
	}

	p + div.caption-box {
		margin-top: -5px;
	}

	.base-content .caption-box h3 {
		margin: 0 0 15px;
		font-size: 16px;
		line-height: 1.5;
	}

	.base-content .caption-box p {
		font-size: 10px;
		line-height: 1.6;
		letter-spacing: 0;
		margin-bottom: 15px;
	}

	.sns_count.bottom {
		margin-bottom: 50px;
		width: 100%;
	}

	.feature-content .sns_count.bottom {
		margin-bottom: 30px;
		width: calc( 100% - 80px );
	}

	#gallery .sns_count.bottom {
    padding: 0px 15px;
	}

	.sns_count.bottom li {
		margin: 0;
		color: #2b2b2b;
		text-align: center;
		font-size: 10px;
		flex-basis: 33.333333%;
		align-self: center;
	}

	.sns_count.bottom li a {
		position: relative;
		color: #2b2b2b;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
	}

	.sns_count.bottom li a:hover {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3);
		color: #fff;
		overflow: hidden;
	}

	.icon-flex-wrap {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		padding: 10px 13px;
	}

	.sns_count li a .icon-box svg {
		margin: 0 auto;
	}

	.icon-box {
		padding: 3px 0 0;
		width: 100%;
	}

	.icon-text {
		flex-basis: 100%;
		padding: 5px 0 0;
		width: 100%;
		font-size: 9px;
		line-height: 1.2;
		height: auto;
		display: none;
	}

	#single .tags.bottom {
		margin: 40px 0 20px;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
		padding: 30px 0;
		text-align: center;
	}

	.feature-content .info-box {
		max-width: 100%;
		margin: 0px auto 40px;
		width: calc( 100% - 80px );
	}

	.feature-content .base-content .info-box .text h3 {
		padding: 0;
	}

	.feature-content .base-content .info-box p {
		padding: 0;
	}

	.base-content .info-box .text h3 {
		font-size: 18px;
		line-height: 1.5;
	}


}

#single.page .sns_count.about {
	background: #fff;
	margin: 90px auto 120px;
}

#single.page .sns_count.about svg {
	width: 100%;
	height: 100%;
}

#single.page .sns_count.about svg path {
	fill: #000;
}

#single.page .sns_count.about li a {
	width: 50px;
	height: 50px;
}

@media screen and (max-width:640px) {
	#single.page .sns_count.about {
		margin: 30px auto 60px;
	}
}

.main_slide .catch-title.crimson {
	font-size: 88px;
	text-align: left;
	letter-spacing: -1px;
	font-style: italic;
}

.main_slide .catch-title.crimson span {
	font-family: "Overpass", sans-serif;
	font-size: 16px;
	margin-top: 28px;
	display: block;
	letter-spacing: 0px;
	font-style: normal;
}

@media screen and (max-width:737px) {
	.main_slide .catch-title.crimson {
		font-size: 44px;
		letter-spacing: .3px;
	}

	.main_slide .catch-title.crimson span {
		margin-top: 10px;
	}
}

body.page .sns_count.bottom {
	max-width: 640px;
	margin: 0px auto 30px;
	height: 60px;
}

body.page .sns_count.bottom .cls-1, body.page .sns_count.bottom .fill {
	fill: #000;
	transition: 300ms;
}

body.page .sns_count.bottom li:hover .cls-1, body.page .sns_count.bottom li:hover .fill {
	fill: #fff;
}

@media screen and (max-width:737px) {
	.nf-form-content label {
		font-size: 16px!important;
	}

	.nf-form-content input:not([type='button']), .nf-form-content textarea, .nf-form-content .list-select-wrap .nf-field-element > div {
		height: 42px!important;
		padding: 6px;
	}

	.nf-field-container .checkbox-wrap .nf-field-label label {
		font-size: 10px!important;
	}

	.nf-form-content textarea.ninja-forms-field {
		height: 200px!important;
	}
}

.single-slide.slick-dotted {
	margin-bottom: 60px;
}

.single-slide span {
	margin: 8px 0px;
	display: block;
	text-align: right;
	font-style: italic;
	font-size: 10px;
}

@media screen and (max-width:737px) {
.single-slide span {
    margin: 8px 25px;
	}
}

.single-slide .slick-next:before, .single-slide .slick-prev:before {
	color: #000;
}

.single-slide .slick-prev {
	left: -50px;
	width: 50px;
	z-index: 10;
	height: 50px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.single-slide .slick-prev:before {
	content: 'PREV';
	display: block;
	font-size: 9px;
	transform: rotate(-90deg);
	font-weight: 700;
	font-family: "Overpass", sans-serif;
}

.single-slide .slick-next {
	right: -50px;
	width: 50px;
	z-index: 10;
	height: 50px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.single-slide .slick-next:before {
	content: 'NEXT';
	display: block;
	font-size: 9px;
	transform: rotate(90deg);
	font-weight: 700;
	font-family: "Overpass", sans-serif;
}

body.error404 .pagenavi, body.page-template-page-404 .pagenavi {
	margin-bottom: 20px;
}

@media screen and (max-width:737px) {
	.single-slide .slick-next {
		right: -35px;
	}

	.single-slide .slick-prev {
		left: -35px;
	}

	.single-slide ul.slick-dots {
		bottom: -20px;
	}

	.related-slide .slick-prev {
		left: -32px;
	}

	.related-slide .slick-next {
		right: -32px;
	}

	.related-slide .slick-prev:before, .related-slide .slick-next:before, .related-slide .slick-prev:after, .related-slide .slick-next:after {
		content: none;
	}

	.meta-404 {
		position: absolute;
		width: 100vw;
		height: 100%;
		padding: 40px;
	}

	body.error404 #middle-banner, body.page-template-page-404 #middle-banner {
		padding-top: 20px;
	}

	body.error404 .pagenavi, body.page-template-page-404 .pagenavi {
		margin-bottom: 20px;
	}

	.meta-404 .divider {
		margin: 30px auto;
	}

	#single .single_img .meta-404 h1 {
		font-size: 72px;
		margin: 0;
		padding: 0;
	}

	.meta-404 p {
		font-size: 11px;
		line-height: 2;
	}
}

.header-video {
	position: relative;
	width: 80%;
	height: auto;
	padding-top: 56.25%;
	display: inline-block;
	z-index: 3;
	margin-bottom: -1px;
}

.header-video iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.italic {
	font-style: italic!important;
}

.norm {
	font-weight: normal!important;
}

@media screen and (max-width:737px) {
	.header-video {
		width: 100%;
	}
}

.tag-8musician.archive #archive {
	position: relative;
	width: 1440px;
	left: 50%;
	margin-left: -720px;
}

.tag-8musician.archive .headline {
	max-width: 1200px;
	margin: 0px auto;
}

.tag-8musician.archive .headline .article {
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-content: center;
	align-content: center;
	width: 100%;
	height: auto;
	margin: 60px auto;
	counter-increment: section;
	max-width: 1200px;
}

.tag-8musician.archive .headline .article:nth-child(even) {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	position: relative;
	left: 600px;
}

.tag-8musician.archive .headline .article {
	margin: 0;
	max-width: 1200px;
	width: 100%;
	height: auto;
	overflow: visible;
	margin: 120px 0px;
}

.tag-8musician.archive .headline .imgbox {
	max-width: 600px;
	padding-top: 50%;
	position: relative;
	width: 600px;
	max-width: 100%;
}

.tag-8musician.archive .headline .imgbox img {
	display: none;
}

.tag-8musician.archive .headline .article .imgbox:before {
	content: counter(section);
	font-size: 90px;
	position: absolute;
	display: block;
	text-align: center;
	vertical-align: middle;
	line-height: 1;
	color: #fff;
	font-weight: 900;
	z-index: 3;
	left: 5px;
	bottom: 10px;
	width: 80px;
	letter-spacing: 0;
}

.tag-8musician.archive .headline .article:nth-child(even) .article:before {
	left: inherit;
	right: 5px;
}

.tag-8musician.archive .headline .imgbox {
	max-height: 100%;
	height: 100%;
	display: inline-block;
}

.tag-8musician.archive .headline .article .catch-title {
	color: #000;
	font-size: 100px;
	font-weight: 900;
	letter-spacing: -3px;
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50px;
	right: -94%;
	text-align: left;
}

.tag-8musician.archive .headline .article:nth-child(even) .catch-title {
	left: -94%;
	right: inherit;
	text-align: right;
}

.tag-8musician.archive .headline .article .subtitle {
	color: #000;
	font-size: 16px;
	letter-spacing: 0px;
	position: absolute;
	z-index: 1;
	width: 400px;
	padding: 0 30px;
	line-height: 1.7;
	letter-spacing: 0;
	bottom: 0px;
	left: 100%;
}

.tag-8musician.archive .headline .article:nth-child(even) .subtitle {
	bottom: 0px;
	left: inherit;
	right: 100%;
}

@media screen and (max-width:737px) {
	.tag-8musician.archive #archive {
		position: relative;
		width: 100%;
		left: 0%;
		margin-left: 0;
	}

	.tag-8musician.archive .archive-wrap {
		width: 100%;
		padding-top: 90px;
	}

	.tag-8musician.archive .headline .article {
		height: auto;
		width: 100%;
		background: none!important;
		display: block;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin: 0px auto 90px;
	}

	.tag-8musician.archive .headline .article .imgbox:before {
		font-size: 50px;
		left: 5;
		bottom: 0;
		width: auto;
	}

	.tag-8musician.archive .headline .article:hover {
		box-shadow: none;
	}

	.tag-8musician.archive .headline .article:nth-child(even) {
		left: 0;
	}

	.tag-8musician.archive .headline .imgbox {
		display: block;
		width: 100%;
		height: auto;
		padding: 0;
		margin-bottom: 12px;
	}

	.tag-8musician.archive .headline .imgbox img {
		display: block;
	}

	.tag-8musician.archive .headline .article .catch-title {
		position: static;
		font-size: 60px;
		margin-bottom: 4px;
	}

	.tag-8musician.archive .headline .article:nth-child(even) .catch-title {
		margin-bottom: 4px;
	}

	.tag-8musician.archive .headline .article .subtitle {
		position: static;
		padding: 0;
		width: 100%;
		font-size: 12px;
	}

	.tag-8musician.archive .headline .article:nth-child(even) .subtitle {
		text-align: right;
	}
}

.adserver {
	text-align: center;
	line-height: 2;
	max-width: 960px;
	margin: 30px auto 30px;
}

.adserver h3 {
	font-size: 16px;
}

body.search #middle-banner.bottom {
	background: none;
}

#nav {
}

.main_slide .cal.theaway .meta{
	left:80px;
}
.main_slide .cal.theaway.freely-aw .meta{
	left:56px;
	bottom: 20px;
}

.main_slide .cal.freely-aw .bg .mask {
    background: transparent;
}

@media screen and (max-width:737px){
	.main_slide .cal.theaway .meta{
		left:20px;
	}

	.main_slide .cal.theaway.freely-aw .meta{
	left:30px;
	bottom: 34px;
}
}

@media screen and (max-width:420px){
.main_slide .cal.theaway.freely-aw .bg {
    top: -44px;
}
}

@media screen and (max-width:375px){
.main_slide .cal.theaway.freely-aw .bg {
    top: 0px;
}
}


@media screen and (max-width: 320px){
#nav a {
	display: block;
	width: 100%;
}
}

/*
.wp-embedded-content {
  width: 100% !important;
  max-width: 100% !important;
  height: 100px !important;
}
*/



/*190722謾ｹ菫ｮ=============================*/

.kv-sns{
	width: 100%;
	padding: 60px 0 0;
}

.kv-sns .sns {
	width: 130px;
	margin:0 auto;
}

.kv-sns .sns li {
	display: inline-block;
}

.kv-sns .sns li a {
	color: #000;
	padding: 9px 0;
	display: block;
	width: 30px;
	height: 43px;
	margin: 0px 6px;
}

.kv-sns .sns li a:hover {
    opacity: 0.6;
}


/* infinite-scroll======================= */

.scroller-status {
  display: none;
  margin-top: 40px;
  padding-bottom: 40px;
}

.infinite-scroll-request {
  animation: scroll-request 1.1s infinite linear;
  border: 4px solid #151515;
  border-left: 4px solid #fff;
  border-radius: 50%;
  height: 48px;
  margin: auto;
  width: 48px;
}

.infinite-scroll-last{
    position: relative;
    line-height: 1;
    text-align: center;
    transition: .3s;
    color: #151515;
    width: 420px;
    height: 80px;
    margin: 0 auto;
    z-index: 1;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

@keyframes scroll-request {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.infinite-scroll-error {
  color: #151515;
  text-align: center;
  padding-bottom:80px;
}

.post-scroll__btn{
    background-color: #FFF;
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    padding: 1em 3em 1em;
    line-height: 1;
    text-align: center;
    transition: .3s;
    color: #9d8a79;
    width: 420px;
	height:80px;
    margin: 0 auto;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
	border: 1px solid #9d8a79;
    border-radius: 6px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	flex-flow: row wrap;
	cursor:pointer;
}

.post-scroll__btn span svg{
	width:20px;
	height:auto;
	display: block;
	margin-left: 12px;
}

.hover .post-scroll__btn:hover{
	background-color:#9d8a79;
	color: #FFF;
}

.post-scroll__btn svg .m-more {
    fill: transparent;
}

.circle.m-more{
	fiil: transparent;
}

.m-more {
    fill: none;
    stroke: #9d8a79;
    stroke-miterlimit: 10;
    stroke-width: 6px;
}

.hover .post-scroll__btn:hover .m-more {
    stroke: #FFF;
}


/* ranking======================= */

#ranking {
    padding-top: 60px;
	background-color:#FFF;
}

#ranking .section-title {
    margin-bottom: 50px;
}

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

#ranking {
    padding-top: 45px;
	/*margin-bottom: 40px;*/
}
#ranking .section-title {
    margin-bottom: 30px;
}
}

.data-current{
	font-size: 40px;
    font-weight: 700;
    color: #666;
    opacity: .1;
    position: absolute;
    right: 20px;
    top: 16px;
	font-style:italic;
	letter-spacing: -1.5px;
}

#ranking .data-current {
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

.header-sub {
    position: absolute;
    display: flex;
    opacity: 1!important;
    position: fixed;
    top: 43px;
    right: 130px;
}
.header-sub-link {
    border: 1px solid #fff;
    padding: 11px 21px 8px;
    border-radius: 30px;
    text-align: center;
    line-height: 1;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    transition: all .3s ease;
}

.header-sub-link:hover {
background: rgb(255 255 255 / 30%);
    color: #ffffff;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

#nav a.menu-sub-link {
    border: 1px solid #fff;
    padding: 13px 23px 10px;
    border-radius: 30px;
    text-align: center;
    line-height: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    transition: all .3s ease;
    margin: 20px auto 0;
    width: 100%;
    opacity: 1!important;
}

#nav a.menu-sub-link::after {
content: none;
}

#nav a.menu-sub-link:hover {
background: rgb(255 255 255 / 30%);
    color: #ffffff;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}
.inf-btn-wrap{
position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0 0 60px;
transition: all .3s ease;
}
.view-more-button {
    appearance: none;
    border: 0;
    border-radius: 50px;
    background: #1a1a1a;
    color: #fff;
    padding: 23px 13px;
    font-size: 14px;
    width: 400px;
    font-weight: 900;
transition: all .3s ease;
}
.view-more-button:hover {
  background: #333;
}
 
.view-more-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px #999;
}

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

.header-sub {
    top: 22px;
    right: 58px;
}
.header-sub-link {
    padding: 9px 13px 6px;
    border-radius: 30px;
    font-size: 9px;
}

}