@charset "UTF-8";
/*
 * cmn_layout.css
 */
/* ==========================================================
!HTML5 elements
========================================================== */
header,
footer,
nav,
main,
section,
aside,
article {
	display: block;
}

figure,
figcaption {
	margin: 0;
	padding: 0;
}

/* ==========================================================
!Reseting
========================================================== */
/* 全ての要素のbox-sizingをデフォルトでborder-boxにする */
:root {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

*,
::before,
::after {
	border-width: 0;
	border-style: solid;
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}

html {
	font-size: 62.5%;
}

body {
	color: #1a1b1e;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Meiryo, "メイリオ", sans-serif;
	font-size: 18px;
	font-size: 1.8em;
	-webkit-font-feature-settings: "palt";
	        font-feature-settings: "palt";
	letter-spacing: 0.01em;
	line-height: 1.88;
	background: #ffffff none;
	box-sizing: border-box;
	overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
}

/* Hack for Safari 7.1-8.0 */
_::-webkit-full-page-media,
_:future,
:root body {
	-webkit-font-feature-settings: "pkna";
	        font-feature-settings: "pkna";
}

body,
div,
pre,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
th,
td {
	margin: 0;
	padding: 0;
}

input,
textarea {
	margin: 0;
	font-size: 100%;
}

label {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}

fieldset,
img {
	border: 0;
}

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

address,
caption,
cite,
code,
dfn,
em,
th,
var {
	font-weight: normal;
	font-style: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

q:after,
q:before {
	content: "";
}

a,
input {
	/* outline: none; */
}

abbr,
acronym {
	border: 0;
}
/* ==========================================================
!ヘッダー
========================================================== */
.l-header {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 4%;
}
.l-header_logo {
	width: 33%;
	max-width: 185px;
	text-align: left;
}
@media screen and (min-width: 768px) {
	.l-header {
		padding: 10px 50px;
	}
	.l-header_logo {
		width: 100%;
		max-width: 185px;
	}
}

/* ==========================================================
!フッター
========================================================== */
.l-footer {
	padding: 15px 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: hsla(0, 0%, 100%, .2);
	text-align: center;
	background: #000000;
}
.l-footer p {
	color: #ffffff;
	font-size: 1.4rem;
}

/* ==========================================================
!大枠
========================================================== */
.l-wrapper {
	margin: 0 auto;
}
.l-contents {
	padding: 40px 3% 0 3%;
	text-align: left;
}
.l-contents > h2 {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.l-contents > p {
	margin: 0 0 40px 0;
	font-size: 16px;
}
.l-outer {
	max-width: 980px;
	margin: 0 auto;
}
.l-inner {
	padding: 0 5%;
}

@media screen and (min-width: 768px) {
	.l-contents {
		width: 100%;
		max-width: 768px;
		margin: 0 auto;
		padding: 40px 0 0 0;
	}
}
/* ==========================================================
!レイアウト
========================================================== */
.l-main {
}
@media screen and (min-width: 768px) {
	.l-main {
	}
	/* 1カラム版 */
	.l-main.-one-column {
		display: block;
	}
	/* 2カラム版 */
	.l-main.-two-column {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}
}

/* ==========================================================
!プロジェクト
========================================================== */
.p-contact {
	padding: 8% 4%;
	background-color: #F7F7F7;
}
.p-contact__summary {
	margin: 2em auto 0;
	font-size: 27px;
	font-size: clamp(26px, 2.25vw, 28px);
	text-align: center;
	line-height: 1.5;
}
.p-contact__list {
	padding: 4%;
	background-color: #fff;
	border-radius: 24px;
	color: #454545;
	line-height: 1.8;
}
.p-contact__item {
	margin-left: 1em;
	padding: 0 0 0 1em;
	text-indent: -1em;
	list-style: disc;
}



.p-form {
	padding: 8% 4% 16%;
	background-color: #F7F7F7;
}
.p-form__image {
	margin: 0 0 40px 0;
}
.p-form__summary {
	margin: 0 auto 8%;
	font-size: 27px;
	font-size: clamp(20px, 2.25vw, 28px);
	text-align: center;
	line-height: 1.5;
}
.p-form__layout {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 8px 0 0;
	border-top: 1px dashed #aaaaaa;
}
.p-form__layout th {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 0 0 2.5em;
	font-weight: bold;
}
.p-form__layout td {
	display: block;
	width: 100%;
	margin: 0 0 8px 0;
	padding: 0 0 16px 0;
	border-bottom: 1px dashed #aaaaaa;
}
.p-form__layout th:after {
	position: absolute;
	top: 10px;
	left: 0;
	display: inline-block;
	margin: 0 auto 0 0;
	padding: 2px 4px 2px 4px;
	color: #ffffff;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
	content: "必須";
	background: #cc0000;
	transform: translate(0, -2px);
}
/* 任意 */
.p-form__layout th.any:after {
	background: #999999;
	content: "任意";
}

@media screen and (min-width: 768px) {
	.p-form {
		padding: 24px 16px 40px 16px;
	}
	.p-form__layout {
		display: table;
		table-layout: fixed;
		max-width: 800px;
		margin: 0 auto;
		padding: 16px 0 0;
	}
	.p-form__layout tr {
	}
	.p-form__layout th {
		display: table-cell;
		width: 35%;
		padding: 16px 0;
		border-bottom: 1px dashed #aaaaaa;
		vertical-align: top;
	}
	.p-form__layout th:after {
		top: 28px;
		left: auto;
		right: 0;
	}
	.p-form__layout td {
		display: table-cell;
		width: 65%;
		padding: 16px 0 16px 24px;
		vertical-align: top;
	}
}

.p-form_privacy {
	overflow-y: scroll;
	height: 160px;
	margin: 0 0 1em 0;
	padding: 16px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #dddddd;
	border-radius: 2px;
	font-size: 14px;
	background: #ffffff none;
}
.p-privacy-link {
	margin: 16px 0 8px 0;
	color: #212121;
	font-size: 18px;
	font-weight: normal;
	text-align: left;
}
.p-privacy-link a {
	color: #212121;
	text-decoration: underline;
}
.p-privacy-link a:hover {
	text-decoration: none;
	opacity: 0.85;
}

.p-thanks {
}
.p-thanks_contact {
	margin: 0 0 40px 0;
	padding: 4%;
	background: #F6F6F6 none;
}
.p-thanks_contact .c-unorderlist {
	margin: 0;
}
.p-thanks_contact .c-unorderlist ul {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	/* 1カラム版 */
	.-one-column .p-contact {
		width: 100%;
	}
	.-one-column .p-form {
		width: 100%;
	}
	/* 2カラム版 */
	.-two-column .p-contact {
		width: 51%;
	}
	.-two-column .p-form {
		width: 42.8%;
	}

	.p-contact_caution,
	.p-thanks_contact {
		margin: 0 0 40px 0;
		padding: 32px 24px 24px 32px;
		background: #F6F6F6 none;
	}
	.p-thanks_contact {
		padding: 32px 24px 32px 32px;
	}
}

/* ==========================================================
!コンポーネント
========================================================== */
/* 見出し */
.c-title__basic01 {
	position: relative;
}
.c-title__basic01--h1::before {
	display: block;
	position: absolute;
	left: 50%;
	bottom: -0.4rem;
	z-index: 1;
	color: #FFDD33;
	font-size: 120px;
	font-size: clamp(104px, 8.7vw, 120px);
	line-height: 1;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	transform: translateX(-50%) translateY(0);
	content: "CONTACT";
}
.p-thanks .c-title_basic01 {
	margin: 0 0 24px 0;
	text-align: center;
}

.c-title_basic02 {
	margin: 0 0 16px 0;
	font-size: 2.2rem;
	font-weight: bold;
}
.c-​title_caution,
.c-​title_contact {
	margin: 0 0 8px 0;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.c-title_basic01 {
		margin: 0 0 40px 0;
		font-size: 3.2rem;
	}
	.c-title_basic02 {
		margin: 0 0 16px 0;
		font-size: 2.4rem;
	}
}

/* アンオーダーリスト */
.c-unorderlist ul {
	margin: 0 0 32px 1.2em;
	list-style: disc;
}
.c-unorderlist_item {
}

/* オーダーリスト */
.c-orderlist ol {
	margin: 0 0 24px 1.85em;
	list-style-type: decimal-leading-zero;
}
.c-orderlist_item {
}

/* ディスクリプションリスト */
.c-descriptionlist {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.c-descriptionlist:last-of-type {
	margin: 0 0 16px 0;
}
.c-descriptionlist_title {
	display: table-cell;
	width: 60px;
}
.c-descriptionlist_text {
	display: table-cell;
}

/* テキスト */
.c-lead {
	margin: 0 0 40px 0;
	font-size: 20px;
	font-weight: bold;
}
.c-summary {
	margin: 0 0 24px 0;
}
.c-note {
	margin: 8px 0 0 0;
	font-size: 14px;
	text-align: center;
}
@media screen and (min-width: 768px) {
}

/* ボタン */
.c-btn_area01 {
	margin-top: 24px;
}
.c-btn_basic01 {
	width: 80%;
	max-width: 300px;
	margin: 0 auto;
}
/* 有効のとき */
.c-btn_basic01 a,
.c-btn_basic01 button {
	display: block;
	width: 100%;
	color: #ffffff;
	padding: 16px 24px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #43a047;
	border-radius: 4px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	text-decoration: none;
	background: #43a047 none;
	transition: all 0.3s linear;
	cursor: pointer;
}
.c-btn_basic01 a:hover,
.c-btn_basic01 button:hover,
.c-btn_basic01 a:focus,
.c-btn_basic01 button:focus	 {
	color: #43a047;
	background: #ffffff none;
}
/* 無効のとき */
.c-btn_basic01 button.disabled {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #aaaaaa;
	color: #ffffff;
	background: #aaaaaa none;
	cursor: default;
}
.c-btn_basic01 button.disabled:hover,
.c-btn_basic01 button.disabled:focus {
	color: #ffffff;
	background: #aaaaaa none;
}
.c-btn_basic01 a p {
	font-size: 18px;
	line-height: 1.7;
	text-align: center;
}

/* ==========================================================
!Form Parts
========================================================== */

/* !iOS Reset
---------------------------------------------------------- */
input[type="submit"],
input[type="button"] {
	border: none;
	border-radius: 0;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

/* !default
---------------------------------------------------------- */
legend {
	display: block;
	width: 100%;
	margin: 0 0 4% 0;
	font-size: 125%;
	text-align: center;
}
fieldset p {
		margin: 0 0 4% 0;
}
label {
	display: block;
	width: 100%;
	cursor: pointer;
}
@media screen and (min-width: 768px) {
	label {
		display: inline-block;
		width: auto;
	}
}

label + span {
	display: block;
	margin: -4px 0 8px 0;
	font-size: 12px;
	font-size: 1.2rem;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea {
	width: 100%;
	padding: 10px 5px 12px 5px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #dddddd;
	border-radius: 3px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
}
input[type="number"].zip01 {
	width: 50%;
}
input[type="tel"] {
	width: 50%;
}
input[type="text"].age {
	width: 50%;
	margin: 0 4% 0 0;
}
select {
	width: 100%;
	padding: 10px 5px 12px 5px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-radius: 3px;
	border-color: #dddddd;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	background: #ffffff;
}

/* numberの増減ボタンを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	margin: 0;

	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
}

/* 必須 */
input:required,
textarea:required {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #cccccc;
	background: #ffffff;
}

/* 必須 且つ 入力されていない */
input:required:invalid,
textarea:required:invalid {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #ff0000;
	background: rgba(255,0,0,0.2);
}

/* focus */
input:focus,
select:focus,
textarea:focus {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #dddddd;
	background: rgba(2550, 245, 215, 0.7);
	outline: solid 2px #43a047;
}

/* 必須にfocus */
input:required:invalid:focus,
textarea:required:invalid:focus {
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #dddddd;
	background: #ffffff;
}

/* Placeholder Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	color:#aaaaaa;
	font-style: italic;
}
/* Placeholder Firefox 18- */
:-moz-placeholder {
	opacity: 1;
	color:#aaaaaa;
	font-style: italic;
}
/* Placeholder Firefox 19+ */
::-moz-placeholder {
	opacity: 1;
	color:#aaaaaa;
	font-style: italic;
}
/* Placeholder IE 10+ */
:-ms-input-placeholder {
	color:#aaaaaa;
	font-style: italic;
}


/* !ラジオボタン、チェックボックス
---------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
	overflow: hidden;
	opacity: 0;
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

/* !ラジオボタン　チェックボックス クリック範囲
---------------------------------------------------------- */
input[type="radio"] + label,
input[type="checkbox"] + label {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 2em 8px 0;
	padding: 16px 16px 16px 2.5em;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #dddddd;
	border-radius: 5px;
	line-height: 1;
	text-align: left;
	background: #ffffff none;
	cursor: pointer;
}

/* !ラジオボタン、チェックボックスのクリック範囲にフォーカスしたとき
---------------------------------------------------------- */
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
	outline: solid 2px #43a047;
}

/* !ラジオボタン チェック印の背景
---------------------------------------------------------- */
input[type="radio"] + label:before {
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: 1.55em;
	height: 1.55em;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color:#aaaaaa;
	border-radius: 50%;
	line-height: 100%;
	background: #ffffff none;
	transform: translateY(-50%);
	content: "";
}

/* !ラジオボタン チェックの印
---------------------------------------------------------- */
input[type="radio"] + label:after {
	display: none;
}

input[type="radio"]:checked + label:after {
	display: block;
	position: absolute;
	top: 0.9em;
	left: 0.75em;
	width: 1em;
	height: 1em;
	margin: 0;
	border-radius: 50%;
	background: #43a047 none;
	content: "";
}

/* !ラジオボタン チェックされたらクリック範囲の色を変える
---------------------------------------------------------- */
input[type="radio"]:checked + label {
	box-shadow: 0 1px 2px rgba(51, 51, 51, 0.5);
	color: #ffffff;
	font-weight: bold;
	background: #43a047 none;
}

/* !チェックボタン チェック印の背景
---------------------------------------------------------- */
input[type="checkbox"] + label:before {
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: 1.55em;
	height: 1.55em;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color:#aaaaaa;
	line-height: 100%;
	background: #ffffff none;
	transform: translateY(-50%);
	content: "";
}

/* チェックボックスにプライバシーポリシーなどのリンクを含めた時 */
input[type="checkbox"] + label a {
	color: #0000ff;
	text-decoration: underline;
}
input[type="checkbox"] + label a:hover {
	text-decoration: none;
}

/* !チェックボタン チェックの印
---------------------------------------------------------- */
input[type="checkbox"] + label:after {
	display: none;
}
input[type="checkbox"]:checked + label:after {
	display: block;
	position: absolute;
	top: 0.8em;
	left: 0.95em;
	width: 0.6em;
	height: 1.0em;
	border-right: 4px solid #43a047;
	border-bottom: 4px solid #43a047;
	content: "";
	transform: rotate(45deg);
	background: none;
	margin: 0;
}

/* !チェックボタン チェックされたらクリック範囲の色を変える
---------------------------------------------------------- */
input[type="checkbox"]:checked + label {
	padding: 16px 16px 16px 2.5em;
	color: #ffffff;
	font-weight: bold;
	background: #43a047 none;
}

/* チェックボックスにプライバシーポリシーなどのリンクを含めた時 */
input[type="checkbox"] + label a,
input[type="checkbox"]:checked + label a {
	color: #666666;
}

/* !エラー表示
---------------------------------------------------------- */
input[type="text"].bg_error01,
textarea.bg_error01 {
	background: rgba(255,0,0,0.5);
}
.txt_error01 {
	display: block;
	color: #ff0000;
}