@charset "utf-8";

:root {
	--square: polygon(0 0, 100% 12%, 100% 100%, 28% 100%);
	--green: #001d10da;
}

body {
	background: url(../imgs/bg.png);
	font-size: 14px;
	/* font-family: '凸版文久見出し明朝'; */
	/* font-family: 'ヒラギノ明朝 Pro';
	font-family: 'Times New Roman', Times, serif; */
	line-height: 1.8;
	color: #1a1a1a;
	color: #333;
}

body,
div,
li,
ul,
p,
h1,
h2,
h3,
h4,
h5,
figure,
dl {
	margin: 0;
	padding: 0;
}

h2,
nav,
.catch,
.nav {
	font-family: '凸版文久見出し明朝';
}

header,
footer,
main,
div,
li,
a,
ul,
figure,
p,
h1,
h2,
h3,
h4,
section {
	box-sizing: border-box;
}

img {
	vertical-align: bottom;
}

.flex {
	display: flex;
	justify-content: space-between;
}

a {
	color: #1a1a1a;
	text-decoration: none;
}

li {
	list-style: none;
}

.visual {
	background: url(../imgs/visual.png) top right / contain no-repeat;
	height: 42vw;
	/* height: 80vmin; */
	min-height: 460px;
	border-bottom: 46px solid #00101f;
	display: flex;
	align-items: flex-end;
}

.visual .contents {
	padding-bottom: 16px;
}

header .logo {
	position: absolute;
	width: 8vw;
	top: 3vw;
	right: 43vw;
}

.logo img {
	width: 100%;
}

header {
	font-size: 1.3rem;
	/* width: 70%; */
	/* width: 480px; */
	padding-top: 10px;
}

nav {
	margin-left: -10px;
	font-family: 'ヒラギノ明朝 Pro';
}

nav a {
	padding: 10px;

}

nav a:hover {
	color: #fff;
	background: #333;

}

.visual .inner {
	padding-left: 40px;
	margin-left: auto;
	margin-right: 42vw;
	margin-bottom: 40px;
	margin-bottom: 4%;
	width: 50%;
	max-width: 620px;
	/* padding-right: 20px; */
	height: 27vw;
	min-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: baseline;
}

.catch {
	font-size: 2.4rem;
	padding-top: 40px;
	padding-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	/* margin: 8vw 10px 30px; */
}

.catch::before {
	content: "";
	width: 70px;
	height: 66px;
	margin-left: -30px;
	margin-top: -4px;
	background-color: #ccc;
	display: inline-block;
	position: absolute;
	z-index: -1;
	clip-path: var(--square);
}

.catch span {
	font-size: 0.6em;
	margin: 0 20px;
	line-height: 1;
	color: #730003;
}

.sns {
	width: 180px;
	/* margin-top: 70px; */
}

.sns li {
	/* background-color: #1a1a1a; */
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 50%;
}

.sns li img {
	width: 100%;
}

main>.bg_green {
	width: 50%;
	height: 80px;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	background: var(--green);
}

main>.bg_gray {
	width: 70%;
	height: 120px;
	background: #ccc;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	position: absolute;
	right: 0;
}

section {
	padding: 120px 0;
}

.home section {
	margin: 30px auto;
	padding: 60px 0;
}

.home section#menu {
	padding: 0;
	margin: 90px auto 0;
}

.menu section section {
	margin: 60px auto 30px;
	padding: 0;
}

/* .menu section.menu {
	padding: 120px 0;
} */

#news

/* サブ */
/* .news */
	{
	padding: 120px 0 0;
}

/* #news.inner, */
/* サブ */
/* .news.inner, */
section.inner,
section .inner {
	width: 830px;
	margin: auto;
}

/* 下記h3 サブ */
.h2_wp,
.single .h3_wp,
.archive .h3_wp {
	position: relative;
	margin-bottom: 30px;
	margin-left: 28px;
}

.h2_wp p,
.single .h3_wp p,
.archive .h3_wp p {
	color: #fff;
	position: absolute;
	top: 10px;
	width: 90px;
	margin-left: -60px;
	text-align: right;
	line-height: 1.3;
	font-family: 'ヒラギノ明朝 Pro';
	font-weight: lighter;
}

.single .h3_wp p,
.archive .h3_wp p {
	color: #333;
}

h2,
.menu h3 {
	font-size: 1.5rem;
	padding-top: 30px;
	/* margin-left: 40px; */
	font-family: '凸版文久見出し明朝';
	text-transform: capitalize;
	/* text-transform: capitalize; */
}

h2:first-letter,
.menu h3:first-letter {
	font-size: 3em;
	color: #999;
	line-height: 1.1;
	/* font-family: '凸版文久見出し明朝';
	font-weight: lighter; */
}

.menu h3:first-letter {
	color: #99cc99;
}

h2::before,
/* .page h3::before, */
.menu h3::before {
	content: "";
	width: 100px;
	height: 100px;
	margin-top: -30px;
	margin-left: -66px;
	/* background-color: #00271f; */
	background-color: var(--green);
	display: inline-block;
	position: absolute;
	z-index: -1;
	clip-path: var(--square);
}

.menu h3::before {
	background-color: #f2f2f2;
}

#news figure img,
/* サブ */
.news figure img,
#news figure img {
	width: 100%;
}

.news figure:hover,
#news figure:hover {
	opacity: 0.6;
}

.box_wp {
	margin: 30px 0 60px;
	flex-wrap: wrap;
	justify-content: left;
}

.box_wp.inner,
.box_wp>.inner {
	width: 840px;
	margin-top: 60px;
}

#news .box,
/* サブ */
.news .box,
#menu .box,
.menu .box {
	width: 200px;
	margin: 0 5px 40px;
	position: relative;
	height: fit-content;
}

.button {
	width: 210px;
	height: 60px;
	/* border: 1px solid #ccc; */
	clip-path: polygon(0 0, 100% 15%, 100% 100%, 25px 100%);
	/* border: 1px solid #eee; */
	background: #ddd;
	text-align: center;
	font-size: 1rem;
	position: relative;
	margin: 0 auto 40px;
	font-family: 'ヒラギノ明朝 Pro';
	/* z-index: -1; */
}

.button a,
.button input {
	clip-path: polygon(2px 2px, calc(100% - 30px) calc(15%), calc(100% - 30px) calc(100% - 2px), 26px calc(100% - 2px));
	background: #fff;
	width: 210px;
	height: 60px;
	line-height: 65px;
	display: block;
	/* position: relative; */
}

.button a:hover,
.button input:hover {
	background: #730004f5;
	color: #fff;
}

.button a:hover::after {
	border-bottom: 1px solid #fff;
}

.button input:hover {
	cursor: pointer;
}

.button a::after {
	content: "";
	border-bottom: 1px solid #333;
	width: 30px;
	height: 1px;
	margin-bottom: 5px;
	margin-right: -20px;
	display: inline-block;
}

#menu,
.menu {
	/* height: fit-content; */
	position: relative;
}

#menu .bg_gray,
.contact .bg_gray {
	width: 100%;
	background: #efefeff9;
	height: 690px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	clip-path: polygon(0 0, 100% 120px, 100% 100%, 0 calc(100% - 120px));
}

#menu .bg_green,
.contact .bg_green {
	width: 100%;
	background: var(--green);
	height: 600px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	clip-path: polygon(0 160px, 100% 0, 100% calc(100% - 160px), 0 100%);
}

#menu .contents {
	margin-left: 60px;
	padding-bottom: 8px;
	width: 46%;
}

#menu .titles {
	justify-content: left;
	align-items: flex-end;
}

#menu .box h4,
.menu .box h4 {
	background-color: #333;
	/* height: 70px; */
	color: #fff;
	font-size: 0.96rem;
	height: 80px;
	line-height: 1.5;
	font-weight: normal;
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-family: 'ヒラギノ明朝 Pro';
}

#menu .box:nth-of-type(4n-3) h4,
#menu .box:nth-of-type(4n-2) h4,
.menu .box:nth-of-type(4n-3) h4,
.menu .box:nth-of-type(4n-2) h4 {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
	text-align: right;
	padding: 8px 14px 15%;
}

#menu .box:nth-of-type(4n-1) h4,
#menu .box:nth-of-type(4n) h4,
.menu .box:nth-of-type(4n-1) h4,
.menu .box:nth-of-type(4n) h4 {
	clip-path: polygon(0 0, 100% calc(100% - 30px), 100% 100%, 0 100%);
	margin-top: -50px;
	/* display: flex;
	align-items: flex-end; */
	padding: 15% 14px 8px;
	position: absolute;
	bottom: -30px;
	width: 100%;
}

#menu .box img,
.menu .box img {
	width: 100%;
}

#menu .box:nth-of-type(4n-2),
#menu .box:nth-of-type(4n),
.menu .box:nth-of-type(4n-2),
.menu .box:nth-of-type(4n) {
	margin-top: 50px;
}

#menu figure,
.menu figure {
	margin: 0;
}

#menu .box:nth-of-type(4n-2) figure,
#menu .box:nth-of-type(4n-3) figure,
.menu .box:nth-of-type(4n-2) figure,
.menu .box:nth-of-type(4n-3) figure {
	margin-top: -50px;
}

.price {
	position: absolute;
	bottom: 0;
	color: #fff;
	background: #000000a3;
	width: 100%;
	height: fit-content;
	line-height: 1;
	font-size: 0.88rem;
	font-family: 'ヒラギノ明朝 Pro';
}

.box:nth-of-type(4n-3) .price,
.box:nth-of-type(4n-2) .price {
	bottom: 0;
	padding: 36px 10px 12px;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.box:nth-of-type(4n-1) .price,
.box:nth-of-type(4n) .price {
	top: 0;
	padding: 12px 10px 36px;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	text-align: right;
}

.home h3,
.news h3 {
	font-family: 'ヒラギノ明朝 Pro';
	line-height: 1.5;
	margin-top: -6px;
	font-size: 1.1rem;
	color: var(--green);
	text-transform: capitalize;
}

#news .date,
.single .date {
	/* margin-bottom: 4px; */
	display: block;
	font-family: 'ヒラギノ明朝 Pro';
	font-size: 1.02rem;
}

#news .box p {
	line-height: 1.5;
	font-size: 0.88rem;
	color: #333;
}

/*  menu 要確認 */
.figure_wp {
	position: relative;
}

.box span {
	position: absolute;
	top: 0;
	color: #fff;
	display: block;
	right: 0;
	font-size: 0.8rem;
}

.box span a {
	color: #fff;
	padding: 6px 10px 6px 30px;
	background: #333333ee;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
	display: block;
	border-right: 16px solid #641a25;
}

.box span a:hover {
	color: #333;
	background: #eeeeeeee;
}

/* #about {
	position: relative;
} */

#about .inner,
.about .figure_wp .inner {
	width: calc(100% - ((100% - 780px) / 2) - 30px);
	margin-left: calc((100% - 750px) / 2);
}

#about .figure_wp,
.about .figure_wp {
	/* padding-right: 30px; */
	margin-top: 30px;
	margin-bottom: 30px;
	position: relative;
}

#about figure,
.about .figure {
	width: 300px;
}

#about figure:nth-of-type(2),
.about figure:nth-of-type(2) {
	margin-right: 20px;
}

#about figure:nth-of-type(2),
#about figure:nth-of-type(4),
.about figure:nth-of-type(2),
.about figure:nth-of-type(4) {
	margin-left: -60px;
}

#about figure:nth-of-type(3),
#about figure:nth-of-type(4),
.about figure:nth-of-type(3),
.about figure:nth-of-type(4) {
	margin-top: 32px;
}

#about figure img,
.about figure img {
	width: 100%;
}

#about figcaption,
.about figcaption {
	position: absolute;
}

#about .bg_gray,
.about .bg_gray {
	width: 100%;
	height: 200px;
	background: #f2f2f2;
	position: absolute;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);
	clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 calc(100% - 80px));
}

#about .contents {
	padding: 40px 0 100px;
}

footer {
	position: relative;
	margin-top: 150px;
	background: #1a1a1a;
	/* padding-top: 10px; */
}

footer .bg_black {
	width: 100%;
	background: #1a1a1a;
	height: 150px;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	position: absolute;
	top: -149px;
}

footer .bg_red {
	width: 60%;
	background: #730004f5;
	height: 120px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	position: absolute;
	right: 0;
	top: -120px;
	z-index: -1;
}

.copyright {
	color: #fff;
	text-align: center;
	border-top: 36px #333 solid;
	padding: 16px;
}

footer .nav a {
	color: #fff;
	padding: 10px;
}

footer .nav a:hover {
	color: #333;
	background: #fff;
}

footer .logo {
	width: 90px;
}

footer>.flex {
	width: 570px;
	margin: -60px auto -20px;
	align-items: center;
}

footer .nav {
	font-size: 1.3rem;
	/* width: 450px; */
	margin-left: 30px;
}

/* サブページ共通 */

.single .visual,
.archive .visual,
.page .visual {
	height: 26vw;
	/* height: 360px; */
	min-height: auto;
	max-height: 340px;
}

.single .visual .inner,
.archive .visual .inner,
.page .visual .inner {
	height: auto;
	/* padding-bottom: 30px; */
}

.single main,
.archive main,
.page main {
	position: relative;
}

.single main>.bg_gray,
.archive main>.bg_gray,
.page main>.bg_gray {
	width: 40%;
	height: 80px;
}

.single .bread,
.archive .bread,
.page .bread {
	color: #fff;
	top: -36px;
	position: absolute;
	margin-right: 46vw;
	/* 下記 .visual .innerと同じ値 */
	padding-left: 40px;
	width: 42%;
	right: 0;
	min-width: 500px;
	font-family: 'ヒラギノ明朝 Pro';
}

.single .list_area,
.archive .list_area,
.page .list_area {
	position: relative;
}

.single .list_area>.bg_gray,
.archive .list_area>.bg_gray,
.page .list_area>.bg_gray {
	height: 100%;
	width: 100%;
	background: #f6f6f6;
	clip-path: polygon(0 0, 100% 25%, 100% 35%, 0 100%);
	position: absolute;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);
}

/* section:nth-of-type(2n-1) .list_area>.bg_gray {
	clip-path: polygon(0 0, 100% 25%, 100% 35%, 0 100%);
} */

.single section:nth-of-type(2n) .list_area>.bg_gray,
.archive section:nth-of-type(2n) .list_area>.bg_gray {
	clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 35%);
}

.single .inner {
	width: 830px;
	margin: auto;
}

.single .cat_wp {
	justify-content: left;
	margin-top: 60px;
	width: fit-content;
	/* flex-wrap: wrap; */
	font-family: 'ヒラギノ明朝 Pro';
}

.single .cat_wp li {
	margin-right: 10px;
}

.single .cat_wp a {
	top: 0;
	color: #333;
	display: block;
	padding: 8px 12px 8px 36px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
	border-right: 16px solid #641a25;
	width: fit-content;
	background: #eeeeee;
}

.single .cat_wp a:hover {
	/* border-right: 16px solid #003d6f; */
	border-right: 16px solid #641a25;
	background: #333;
	color: #fff;
}

.single-post figure {
	float: left;
	width: 40%;
	margin-right: 20px;
	margin-bottom: 0;
	margin-top: 6px;
}

.single-post .box {
	width: 100%;
	margin-right: 40px;
	margin-top: 50px;
}

.single h3 {
	width: fit-content;
	margin: 30px auto;
	font-size: 2rem;
	font-family: "ヒラギノ明朝 Pro";
}

.single-post .box_wp {
	width: 630px;
}

.single-post .dates,
.archive .dates {
	margin-top: 50px;
	min-width: 160px;
	background: #fff;
	height: fit-content;
	font-family: 'ヒラギノ明朝 Pro';
}

.single-post .dates li,
.archive .dates li {
	border: #ddd 2px solid;
	margin-top: -2px;
}

.single-post .dates .h5,
.archive .dates .h5 {
	background: #ddd;
	padding: 40px 10px 5px;
	clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
	font-size: 1.3rem;
}

.single-post .dates a,
.archive .dates a {
	padding: 16px 20px;
	display: block;
	text-align: center;
	font-size: 1rem;
}

.single-post .dates a:hover,
.archive .dates a:hover {
	background: #ededed;
}

.single-post .cat_wp,
.archive .cat_wp {
	justify-content: left;
	margin-top: 60px;
	margin-left: 30px;
	flex-wrap: wrap;
	justify-content: right;
}

.single-post .cat_wp li,
.archive .cat_wp li {
	margin-right: 10px;
	margin-bottom: 20px;
}

.single-post .cat_wp a,
.archive .cat_wp a {
	top: 0;
	color: #333;
	display: block;
	padding: 8px 12px 8px 36px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);
	border-right: 16px solid #641a25;
	width: fit-content;
	background: #eeeeee;
}

.single-post .cat_wp a:hover,
.archive .cat_wp a:hover {
	/* border-right: 16px solid #003d6f; */
	border-right: 16px solid #641a25;
	background: #333;
	color: #fff;
}

/* お問い合わせ */

form {
	padding: 50px 0 0;
	font-size: 1rem;
	color: #222;
}

form dt span {
	color: #730003;
	font-size: 0.9em;
	margin: 20px;
	padding: 5px 10px;
}

form dl {
	padding: 6px 0;
	line-height: 60px;
}

form dt {
	width: 240px;
	float: left;
	font-family: 'ヒラギノ明朝 Pro';
}

form dl:last-of-type {
	line-height: 2;
}

form dd {
	width: 100%;
	height: 60px;
}

form dd.naiyo {
	height: auto;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
	line-height: 54px;
	width: calc(100% - 240px);
	font-size: 0.9rem;
}

select {
	height: 60px;
	width: calc(100% - 240px);
	font-size: 0.9rem;
}

textarea {
	resize: none;
	width: calc(100% - 240px);
	height: 150px;
	font-size: 0.9rem;
}

form .flex {
	width: 500px;
	margin: 50px auto 0;
	justify-content: space-around;
}

form input[type="button"] {
	background-color: #fff;
	border: 1px solid var(--green);
	color: var(--green);
}

form input[type="submit"] {
	background-color: var(--green);
	border: 1px solid var(--green);
	color: #fff;
}

form input[type="submit"]:hover {
	cursor: pointer;
}

form dd span.error {
	color: rgb(220, 23, 23);
}

.about .prof {
	margin: 70px 0 120px;
	border-collapse: collapse;
	width: 100%;
	font-family: 'ヒラギノ明朝 Pro';
}

.about tr {
	font-size: 1rem;
	/* border-bottom: 2px solid #dedede; */
	/* padding: 20px 40px; */
	line-height: 1.5;
	background: #ffffffb5;
	border: 2px solid #dedede;
}

/* tr:first-of-type {
	border-top: 2px solid #dedede;
} */

.about th {
	/* float: left; */
	width: 120px;
	padding: 20px 40px;
	border-right: 2px solid #dedede;

}

.about td {
	padding: 20px 40px;
	text-align: left;
	/* border: 2px solid #dedede; */
}

.about .bg_img {
	top: 100px;
	height: 200vh;
	width: calc(100% - ((100% - 940px) / 2));
	background: url(../imgs/bg_about.png) center top / contain no-repeat;
	right: 0;
	z-index: -1;
	position: absolute;
}