@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #b96e8f;
	--accent-color: #b96e8f;
	--dark-main-color: #b96e8f;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 640px;
	--middle-width: 640px;
}


/* 基本設定： フォントサイズ */
@media (max-width: 640px) {
	:root {
		font-size: 14px;
}
}

@media (min-width: 640px) and (max-width: 640px) {
	:root {
		font-size: 16px;
}
}

@media (min-width: 640px) {
	:root {
		font-size: 18px;
}
}

body {font-size: 14px;}



/* 基本設定： ページ全体 */
body {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
}

header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5px;
}
a:hover .imgover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	align-items: center;
}



/* コンテンツA： ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	text-align: center;
}
.conA .catchcopy img{
	width: 100%;
	height: 100%;
}
@media screen and (min-width:320px) {
	.conA .catchcopy{
	display: flex;
	width: 100%;
	max-width: var(--large-width);
	margin-left: auto;
}
}

.conA h1,.conC h3,.conD h4,.conE h5 {
	display: block;
	align-items: center;
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.conA .sub_title,.conC .sub_title {
	display: block;
	padding: 0px;
	margin: 0px;
	font-size: 20px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*@media (min-width: 320px) {
	.conA h1,.conB h2 {
		font-size: 30px;
	}

	.conA p,.conB p {
		font-size: 20px;
	}
	}*/



/* コンテンツB： 概要（アイコン＋テキスト） */
.conB h2 {
    color: #333;
    text-align: center;
    margin: 0;
	padding: 0px;
	font-size: 30px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.conB .container {
	display: flex;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 20px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.conB .text {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	text-align: center;
	max-width: 180px;
}
.conB p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

@media screen and (max-width:620px) {
	.conB .container {
	display: flex;
	width: 100%;
	max-width: var(--large-width);
	margin-left:auto;
	margin-right:auto;
}
.conB .text	{
	flex-basis: 40%;
}
}



/* コンテンツC： 概要（画像＋テキスト） */
.conC {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	text-align: center;
}
.conC .container {
	padding-bottom: 10px;
}
.conC img{
	width:640px;
	height: auto;
}
.conC p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 12px;
	line-height: 1.8;
	opacity: 0.8;
}
@media screen and (min-width:320px) {
	.conC img{
	width: 100%;
	height: auto;
}
}



/* コンテンツD： 概要（画像＋テキスト：逆配置） */
.conD .container {
	align-items: center;
	justify-content: center;
	color: #333;
	text-align: center;
}
.taiken_step{
	border:10px solid #eee;
	padding:15px;
	margin:10px 0;
	text-align: center;
}
.taiken_step .step{
	font-size: 16px;
	color:#cc5c8c;
	padding: 0px;
	margin: 0px;
}
.taiken_step p{
	font-size: 14px;
	text-align: left;
	line-height: 1.5;
	padding-bottom:20px;
	margin: 0px;
}


/* コンテンツE： 概要（画像＋テキスト：逆配置） */
.conE .container {
	padding-top:40px;
	align-items: center;
	justify-content: center;
	color: #333;
	text-align: center;
}
.mochimono p{
	font-size: 14px;
	text-align: left;
	line-height: 1.5;
}
.mochimono img{
	float:left;
	padding-bottom:40px;
}

@media (max-width: 670px) {
	.mochimono img{
		float:none;
		padding-bottom: 6px;
	}
	footer {
		margin-top: 40px;
	}
}


/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #b96e8f;
	background-color: var(--dark-main-color);
}

footer .container {
	padding: 40px 20px;
}


@media (min-width: 768px) {
	footer .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}

.footA {
	flex: 0 0 40%;
}

.footB {
	flex: 0 0 60%;
}

.footC {
	flex: 0 0 100%;
}
}


/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
}
.footA .small{
	font-size: 14px;
}
.footA .tel{
	font-size: 20px;
}

.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	letter-spacing: 0.2em;
}
.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a {
	color: inherit;
	text-decoration: none;
}


/* フッターB： フッターメニュー */
.footB div {
	margin-bottom: 20px;
}

.footB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}

.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footB a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.footB a:hover {
	background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
	.footB {
	display: flex;
}

.footB div {
	flex: 1;
}

.footB div:not(:first-child) {
	margin-left: 40px;
}
}


/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}


/* フッターD： SNSメニュー */
.footD {
	margin-top: 20px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}