@charset "UTF-8";

html {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size: 62.5%;
	color: #222222;
	font-weight: 500;
	line-height: 1;
}

/* ------------------------ common ------------------------ */
* { outline: none; }
body { font-size: 16px; position: relative; overflow-x: hidden; }
body.fixed { position: fixed; width: 100%; height: 100%; z-index: 0; }
main { display: block; }
button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; cursor: pointer; font-family: inherit; }
img { object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; overflow:hidden; vertical-align: top; }
h2 { font-size: 2.7rem; padding-bottom: 45px; }
h3 { font-size: 2.0rem; padding-bottom: 35px; }
a { text-decoration: none; color: #222222; }
p { line-height: 35px; margin: -9.5px 0; }
.sp { display: none!important; }
.sp2 { display: none!important; }
.wrapper1 { width: 68.75%; margin: 0 auto; max-width: 1050px; }
.wrapper2 { width: 81.25%; margin: 0 auto; max-width: 1245px; }

/* ------------------------ top ------------------------ */
header {
	position: relative;
	width: 100%;
	z-index: 1999;
}

.top_header {
	position: relative;
}

.header {
	position: relative;
	z-index: 1999;
	width: 100%;
	height: 160px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 1s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: #fff;
}

.header a.logo {
	display: inline-flex;
	align-items: center;
	margin-left: 50px;
}

.header a.logo div {
	width: 200px;
}

.header a.logo p {
	font-size: 1.9rem;
	padding-left: 52px;
	white-space: nowrap;
}

.header nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: 60px;
	height: 100%;
}

.header nav a {
	white-space: nowrap;
}

.header nav ul {
	display: flex;
}

.header nav ul li {
	margin-left: 28px;
}

.header nav ul li:first-child {
	margin-left: 0;
}

.header nav ul li a {
	position: relative;
	transition: all 0.2s ease-out;
}

.header nav ul li a:hover {
	color: #4f8d3e;
	opacity: 0.6;
}

.header nav a.contact {
	display: block;
	position: relative;
	margin-left: 66px;
	padding: 8px 6px;
	color: #4f8d3e;
	border-bottom: 1px solid #4f8d3e;
	transition: all 0.4s ease;
}

.header nav a.contact:hover {
	opacity: 0.5;
}

.header nav a.contact:hover::before {
	left: 100%;
}

.top_header a.another {
	position: absolute;
	z-index: 1999;
	top: 14px;
	right: 18px;
	padding-right: 22px;
	font-size: 1.2rem;
	background: url(../img/another.png) no-repeat right center;
	background-size: 12px 10px;
}

a.another {
	transition: all 0.4s ease;
}

a.another:hover {
	opacity: 0.4;
}

/* ------ body.fixed ------ */
body.fixed header {
	position: fixed;
	z-index: 1999;
	top: 0;
}

body.fixed .header {
	position: relative;
	background-color: #fff;
	transition: all 0.7s ease;
	z-index: 1999;
}

/* ------ header scroll ------ */
.sticky {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	z-index: 999;
	top: -100%;
	left: 0;
	width: 100%;
	transition: all 1s ease-out;
}

.sticky.on {
	visibility: visible;
	opacity: 1;
	top: 0;
}

.sticky .header {
	height: 70px;
}

.sticky .header a.logo {
	margin-left: 40px;
}

.sticky .header a.logo div {
	width: 160px;
}

.sticky .header a.logo p {
	font-size: 1.7rem;
	padding-left: 40px;
}

.sticky .header nav {
	margin-right: 0px;
}

.sticky .header nav a.contact {
	width: 170px;
	line-height: 70px;
	margin-right: 0;
	padding: 0;
	text-align: center;
	color: #fff;
	background-color: #4f8d3e;
	border-bottom: none;
}

/* ---------- hamburger ---------- */
.header div.spHum {
	position: relative;
	margin-right: 0px;
	width: 70px;
	height: 100%;
	transition: all 0.2s ease;
}

.header div.spHum.on {
	background-color: #4f8d3e;
}

.header div.spHum button {
	display: block;
	width: 28px;
	height: 20px;
	position: relative;
	overflow: visible;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.header div.spHum button span.line {
	position: absolute;
	display: block;
	border-top: 1px solid #4f8d3e;
	right: 0;
	width: 100%;
	transition: all 0.2s ease;
}

.header div.spHum button.on span.line {
	border-color: #fff;
}

.header div.spHum button span.line:nth-child(1) {
	top: 0;
}

.header div.spHum button span.line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}

.header div.spHum button span.line:nth-child(3) {
	bottom: 0;
}

.header div.spHum button.on span.line:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

.header div.spHum button.on span.line:nth-child(2) {
	transform: rotate(-45deg);
    top: 8px;
}

.header div.spHum button.on span.line:nth-child(3) {
	opacity: 0;
}

/* ---------- spMenu ---------- */
div.spMenu {
	visibility: visible;
	opacity: 0;
	width: 100%;
	height: calc(100% - 70px);
	padding-top: 70px;
	transition: opacity 0.5s ease;
    display: block;
    position: fixed;
    z-index: 999;
    left: 0;
    top: -100%;
}

div.spMenu.on {
	visibility: visible;
	opacity: 1;
	top: 0;
}

div.spMenu div.inner {
    position: absolute;
    width: 100%;
	height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    background-color: #fff;
}

div.spMenu ul {
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translateY(-50%);
}

div.spMenu ul li {
	padding-bottom: 45px;
	font-size: 1.8rem;
}

div.spMenu ul li.contact {
	padding-top: 35px;
}

div.spMenu ul li.contact a {
	padding: 10px 5px;
	border-bottom: 1px solid #4f8d3e;
	color: #4f8d3e;
	box-sizing: border-box;
}

div.spMenu a.another {
	position: absolute;
	z-index: 1999;
	bottom: 27px;
	right: 20px;
	padding-right: 22px;
	font-size: 1.2rem;
	background: url(../img/another.png) no-repeat right center;
	background-size: 12px 10px;
}

/* ------------------------ fv ------------------------ */
.fv {
	position: relative;
}

.fv div.fv_img {
	height: calc(100vh - 160px);
	width: 90.6%;
	max-height: 800px;
	margin-left: auto;
}

.fv div.fv_copy {
	position: absolute;
	bottom: 70px;
	left: 5.5%;
	width: 485px;
}

/* ------------------------ about ------------------------ */
#about {
	padding: 100px 0 138px;
	position: relative;
}

#about::before {
	content: '';
	display: block;
	width: 100%;
	height: calc(100% + 45vh);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: url(../img/bg.jpg) no-repeat;
	background-size: cover;
}

#about span.br {
	white-space: nowrap;
}

div.flex {
	display: flex;
	align-items: flex-start;
}

div.flex div.flex1 {
	flex-basis: 30%;
}

div.flex div.flex2 {
	flex-basis: 70%;
}

#about h1 div {
	width: 90px;
	height: 441px;
	/*font-size: 3.2rem;
	line-height: 60px;
	letter-spacing: 0.075em;
	writing-mode: vertical-rl;*/
	margin-left: -14px;
}

#about h1 div img {
	width: auto;
	height: auto;
}

#about h2 {
	padding-top: 95px;
}

a.outerLink {
	display: inline-block;
	margin-top: 53px;
	padding-bottom: 6px;
	padding-right: 22px;
	background: url(../img/another.png) no-repeat right 25%;
	background-size: 12px 10px;
	border-bottom: 1px solid #333;
	transition: all 0.4s ease;
}

a.outerLink:hover {
	opacity: 0.4;
}

/* ------------------------ ordermade ------------------------ */
#ordermade {
	padding: 165px 0 130px 0;
	background: url(../img/ordermade.jpg) no-repeat 50% 50%;
	background-size: cover;
	color: #fff;
}

#ordermade div.img {
	width: 150px;
	margin-left: -20px;
}

/* ------------------------ flow ------------------------ */
#flow {
	padding: 125px 0;
}

div.wrapper2 div.add_wrap {
	width: 84.6%;
	margin: 0 auto;
	padding-left: 30px;
	box-sizing: border-box;
}

div.wrapper2 h2 {
	padding-bottom: 50px;
}

#flow div.img {
	padding-top: 75px;
}

#flow div.note {
	font-size: 1.5rem;
	padding-top: 36px;
	text-align: right;
}

/* ------------------------ price ------------------------ */
#price {
	padding: 125px 0 150px 0;
	background: url(../img/bg.jpg) no-repeat;
	background-size: cover;
}

#price div.add_wrap {
	position: relative;
}

#price table {
	width: 400px;
}

#price table tr {
	display: flex;
	align-items: center;
	padding-bottom: 22px;
}

#price table tr:nth-child(3) {
	padding-bottom: 30px;
	border-bottom: 1px solid #333;
}

#price table tr th {
	width: 60%;
}

#price table tr td {
	width: 40%;
	text-align: right;
}

#price table tr td span {
	font-size: 2.2rem;
}

#price h3.price_other {
	padding-top: 45px;
}

#price table.price_other tr {
	padding-bottom: 0;
}

#price p.note {
	font-size: 1.4rem;
	line-height: 2;
	padding-top: 82px;
}

#price div.img {
	position: absolute;
	top: 30px;
	right: -10px;
	width: 42%;
}

div.interval {
	width: 100%;
	height: 640px;
	background: url(../img/interval.jpg) no-repeat center top;
	background-size: cover;
}

/* ------------------------ contact ------------------------ */
#contact {
	padding: 130px 0 95px 0;
	background: url(../img/contact.jpg) no-repeat top center;
	background-size: cover;
	color: #fff;
}

#contact h2 {
	text-align: center;
}

#contact form label {
	cursor: pointer;
}

#contact form table {
	width: 100%;
}

#contact form table tr {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	height: 70px;
}

#contact form table tr:last-child {
	margin-bottom: 0;
}

#contact form table tr th {
	flex-basis: 30%;
	padding-top: 40px;
	box-sizing: border-box;
}

#contact form table tr td {
	flex-basis: 70%;
}

#contact form table tr td input,
#contact form table tr td textarea {
	color: #fff;
	background-color: transparent;
}

#contact form table tr td.text {
	vertical-align: middle;
}

#contact form table tr td.text input {
	display: block;
	width: 100%;
	height: 70px;
	padding-top: 24px;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px solid #fff;
    -webkit-appearance: textfield;
    vertical-align: middle;
}

#contact form table tr td.checkbox {
	display: flex;
	flex-wrap: wrap;
	padding-top: 40px;
}

#contact form table tr td.checkbox input {
	display: none;
}

#contact form table tr td.checkbox input + label {
	padding-left: 27px;
	margin-right: 27px;
	margin-bottom: 10px;
	position: relative;
}

#contact form table tr td.checkbox input:last-child + label {
	margin-bottom: 0;
}

#contact form table tr td.checkbox input + label::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 11px;
	height: 11px;
	border: 1px solid #fff;
	border-radius: 0;
}

#contact form table tr td.checkbox input:checked + label::after {
	content: '';
	position: absolute;
  	top: 50%;
	left: 4px;
	display: block;
	margin-top: -7px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#contact form table tr.textarea {
	padding-top: 45px;
	height: auto;
}

#contact form table tr.textarea th {
	padding-top: 0;
}

#contact form table tr td textarea {
	padding: 14px;
	box-sizing: border-box;
	border: 1px solid #fff;
    -webkit-appearance: textfield;
    width: 100%;
    height: 200px;
    resize: vertical;
}

#contact div.center {
	text-align: center;
}

#contact button {
    display: inline-block;
    position: relative;
	padding: 0 25px 20px 25px;
	box-sizing: border-box;
	border-bottom: 1px solid #fff;
    margin-top: 75px;
    font-size: 2.0rem;
	color: #fff;
	transition: all 0.4s ease;
}

#contact button:hover {
	padding-right: 40px;
	margin-left: 15px;

}

#contact button:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: -4px;
	width: 8px;
	height: 8px;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ------------------------ privacy policy ------------------------ */
#privacy {
	padding: 125px 0;
}

#privacy div.add_wrap {
	margin-top: 60px;
}

#privacy div.add_wrap h3 {
	font-weight: bold;
}

#privacy div.add_wrap ul {
	margin-top: 20px;
	list-style: inside;
}

#privacy div.add_wrap ul li {
	margin-bottom: 15px;
}

/* ------------------------ footer ------------------------ */
footer {
	background: #09110d;
	color: #fff;
	padding: 50px 0 110px 0;
	margin-top: -1px;
}

footer a {
	color: #fff;
	text-decoration: underline;
}

footer div.footer_wrap {
	width: 88.5%;
	max-width: 1350px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer p.company {
	font-size: 1.8rem;
}

footer p.info {
	font-size: 1.5rem;
	line-height: 2;
	flex-basis: 55%;
}

footer p.copyright {
	font-size: 1.3rem;
	color: #888;
}


/* ----------------------------------- 650 ---------------------------------- */
@media screen and (max-width: 1200px) {
	h2 { font-size: 2.4rem; padding-bottom: 45px; }
	h3 { font-size: 1.9rem; padding-bottom: 35px; }
	.pc { display: none!important; }
	.sp { display: block!important; }
	.wrapper1 { width: 75%; }
	.wrapper2 { width: 84%; }

	header { position: fixed; }
	.header { height: 70px; }
	.header a.logo { margin-left: 30px; }
	.header a.logo div { width: 160px; }
	.header a.logo p { font-size: 1.7rem; padding-left: 40px; }

	.fv { padding-top: 70px; }
	.fv div.fv_img { height: calc(100vh - 70px); }
	.fv div.fv_copy { width: 445px; }

	div.flex div.flex1 { flex-basis: 25%; }
	div.flex div.flex2 { flex-basis: 75%; }
	#about h1 div { width: 78px; height: 391px; margin-left: -10px; }
	#about h2 { padding-top: 65px; }
	a.outerLink { margin-top: 40px; }

	#ordermade div.img { width: 127px; }

	#price table { width: 100%; }
	#price p.note { padding-top: 60px; }
	#price div.img { position: relative; top: 0px; right: 0; width: 75%; margin: 0 auto; padding-top: 55px; }

	#contact form table tr { flex-direction: column; margin-bottom: 30px; height: auto; }
	#contact form table tr:last-child { margin-bottom: 0; }
	#contact form table tr th { display: block; width: 100%; padding-top: 0; padding-bottom: 20px; }
	#contact form table tr td { display: block; width: 100%; }
	#contact form table tr td.text input { height: 40px; padding-top: 0; }
	#contact form table tr td.checkbox { padding-top: 0; }
	#contact form table tr.textarea { padding-top: 15px; }

	footer { text-align: center; }
	footer div.footer_wrap { display: block; width: 100%; }
	footer p.company { padding-bottom: 50px; }
	footer p.info { padding-bottom: 45px; }
}

/* ----------------------------------- 750 ---------------------------------- */
@media screen and (max-width: 760px) {
	body { font-size: 15px; }
	h2 { font-size: 2.4rem; }
	h3 { font-size: 1.9rem; }
	p { line-height: 30px; margin: -7.5px 0; }
	.wrapper1 { width: 87.5%; }
	.wrapper2 { width: 87.5%; }
	.pc2 { display: none!important; }
	.sp2 { display: block!important; }

	.header { height: 60px; }
	.header a.logo { margin-left: 15px; }
	.header a.logo div { width: 110px; }
	.header a.logo p { font-size: 1.4rem; padding-left: 15px; }

	.header div.spHum { width: 60px; }
	.header div.spHum button { width: 20px; height: 14px; }

	div.spMenu { height: calc(100% - 60px); padding-top: 60px; }
	div.spMenu ul { left: 12.5%; }
	div.spMenu ul li { padding-bottom: 40px; font-size: 1.6rem; }
	div.spMenu ul li.contact { padding-top: 10px; }

	.fv { padding-top: 60px; }
	.fv div.fv_img { height: 74vh; width: 100%; }
	.fv div.fv_copy { bottom: 8%; left: 2%; width: 89.4%; max-width: 445px; }

	#about { padding: 60px 0 70px 0; }
	#about::before { height: calc(100% + 35vh); }
	div.flex { display: block; }
	#about h1 { font-size: 2.4rem; line-height: 40px; letter-spacing: 0; writing-mode: horizontal-tb; margin-left: 0; }
	#about h2 { font-size:1.9rem; padding-top: 38px; padding-bottom: 40px; }

	#ordermade div.flex { display: flex; flex-direction: column-reverse; }
	#ordermade { padding: 65px 0 60px 0; }
	#ordermade div.flex1 { margin: 0 auto; }
	#ordermade div.img { width: 127px; margin-left: 0; padding-top: 45px; }

	#flow { padding: 60px 0; }
	div.wrapper2 div.add_wrap { width: 100%; padding-left: 0; }
	div.wrapper2 h2 { padding-bottom: 42px; }
	#flow div.img { padding-top: 55px; width: 98%; max-width: 280px; margin: 0 auto; }
	#flow div.note { font-size: 1.4rem; padding-top: 30px; }

	#price { padding: 65px 0; }
	#price table tr th { width: 40%; }
	#price table tr td { width: 60%; }
	#price table.price_other tr { align-items: flex-end; }
	#price table.price_other tr th { line-height: 28px; margin: -6.5px 0; }
	#price p.note { padding-top: 55px; }
	#price div.img { width: 100%; }

	div.interval { height: 400px; background: url(../img/interval_sp.jpg) no-repeat 50% 50%; background-size: cover; }

	#contact { padding: 65px 0 50px 0; background: url(../img/contact_sp.jpg) no-repeat center top; background-size: cover; }
	#contact h2 { text-align: left; }
	#contact form table tr { margin-bottom: 26px; }
	#contact form table tr:last-child { margin-bottom: 0; }
	#contact form table tr td.text input { height: 30px; }
	#contact button { margin-top: 50px; font-size: 1.9rem; }

	footer { padding: 40px 0 70px 0; }
}