/*
Theme Name : kireinote
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&family=Cinzel:wght@400;500;600;700&family=Noto+Sans:wght@400;700&family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');
@font-face {
	font-family: "Fjalla One", serif;
	src: url('fonts/DIN Condensed Bold.woff') format('woff');
}
@font-face {
	font-family: 'Harenosora';
	src: url('fonts/Harenosora.woff') format('woff');
}
@font-face {
	font-family: 'didot';
	src: url('fonts/didot.ttf') format("truetype");
}
@font-face {
	font-family: 'AnticDidone';
	src: url('fonts/AnticDidone-Regular.woff') format("truetype");
}
@font-face {
	font-family: 'Butler';
	src: url('fonts/Butler_Regular.otf') format("truetype");
}

html, body {
	color: #464646;
	font-family: '游ゴシック', '游ゴシック体', 'YuGothic', 'Yu Gothic', sans-serif;
	font-size: 1.5vw;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
}
@media screen and (min-width: 1000px) {
	html, body {
		font-size: 16px;
	}
}

h1, h2, h3, h4 {
	font-weight: 400;
}
h1, h2, h3, h4,
p, figure, ul, li,
dl, dt, dd, blockquote {
	margin: 0;
	padding: 0;
}
ul li {
	list-style-type: none;
}

img {
	vertical-align: bottom;
	height: auto;
	max-width: 100%;
}

a {
	color: #464646;
	text-decoration: none;
	transition: ease .5s;
}

/** column **/
.column {
	display: flex;
	flex-wrap: wrap;
}

/** overlay **/
#overlay {
	background-color: rgba(0, 0, 0, .45);
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -100;
}
#overlay.active {
	opacity: 1;
	z-index: 90;
}

/** viewall **/
.viewall {
	cursor: pointer;
	display: table;
	font-family: "Fjalla One", serif;
	font-size: 1.6vw;
	letter-spacing: .3vw;
	padding-right: 5vw;
	position: absolute;
}
.viewall::after {
	background: url("/wp/wp-content/themes/kireinote/img/icon-arrow-next.gif") no-repeat 0 0 / 100%;
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: -.8vw;
	width: 4vw;
	height: 4vw;
}
@media screen and (min-width: 1000px) {
	.viewall {
		font-size: 21px;
		letter-spacing: 3px;
		padding-right: 55px;
	}
	.viewall::after {
		top: -6px;
		width: 50px;
		height: 39.024px;
	}
}

/** display **/
.sp {
	display: none;
}
@media screen and (max-width: 780px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}