@charset "UTF-8";
/* h1タイトル */
h1 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	font-size: 2.2rem;
	color: #b60081;
	margin: 0 auto;
	padding-left: 10px;
	line-height: 1.4;
}
/* トップ画像 */

img {
	width:900px;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
	display: block;
}

/* アイコン画像 */
img.ico {
	width:15px;
	margin: 0 auto;
	height: auto;
	display: inline;
	line-height: 1.4;
}

/* タイトル マゼンダ */

h2 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	font-size: 1.8rem;
	color: #fff;
	margin: 0 auto;
	background-color: #717171;
	padding-left: 20px;
	line-height: 1.4;
}


/* テキストセンター寄せ */
.box1 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 20px;
	background: #fff;
	line-height: 1.4;
}

.box3 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 20px;
	background: #fff;
	line-height: 1.4;
}
.box3 p {
	text-align:center;
}
/* フォント調整 */

.font1 {
	color: #000;
	font-size: 1.8rem;
	line-height: 1.4;
}
.font1_b {
	color: #000;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.4;
}
.font2 {
	color: #000;
	font-size: 1.6rem;
	line-height: 1.4;
}
.font2_b {
	color: #000;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}
.font3 {
	color: #000;
	font-size: 1.4rem;
	line-height: 1.4;
}
.font3_b {
	color: #000;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.4;
}
.red_font {
	color: #eb6100;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}
.maz_font {
	color: #b60081;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}
.link_font {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	text-align:right;
}
.tel_font1 {
	color: #b60081;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.4;
}

.under {
  border-bottom: solid 1px #7f7f7f;
}

/* テキストの折り返し調整 */
.text {
	display: inline-block;
}

/* マージン調整 */
.mb05 {
	margin-bottom: 0.5em;
}
.mb1 {
	margin-bottom: 1em;
}
.mb2 {
	margin-bottom: 2em;
}

/* タイトルバリエーション */

h3 {
	box-sizing: border-box;
	width: 880px;
	max-width: 95%;
	color: #000;
	font-size: 1.6rem;
	margin: 10px auto;
	padding: 5px;
	background: transparent;
	border-left: solid 5px #717171;
	line-height: 2;
}
h4 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	color: #000;
	font-size: 1.6rem;
	margin: 10px auto;
	padding: 0 0.5em;
	border-top: solid 2px #717171;
	border-bottom: solid 2px #717171;
	line-height: 2;
}
h5 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	color: #000;
	font-size: 1.5rem;
	margin: 10px auto;
	padding: 0 0.5em;
	line-height: 1.4;
}

.bar1 {
	box-sizing: border-box;
	width: 900px;
	max-width: 100%;
	height: 3px;
	margin: 10px auto;
	padding: 0 0.5em;
	display:block;
	border: 0;
	border-top: 1px dashed #999999;
	line-height: 1.4;
}

/* リンクボタン */
.btn {
	width: 500px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto;

}

/* tel申込み */

img.tel {
	width:80px;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
	display: inline;
	line-height: 1.4;
}
@media screen and ( max-width:479px )
{
img.tel	{
	width:50px;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
	display: inline;
	}
}

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 900px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}

/* コンテンツ枠をボーダーで囲む */
.flex-with-border {

	padding: 20px;
	border: 1px solid #000;
	border-radius: 4px;
}

/* コンテンツ枠ボーダー */
.box2 {
	box-sizing: border-box;
	width: 900px;
	max-width: 95%;
	padding: 0.5em 1em;
	margin: 10px auto;
	color: #000;/*文字色*/
	background: #FFF;
	border: solid 2px #ccc;/*線*/
	border-radius: 10px;/*角の丸み*/
}


/* リスト表示の設定 */

dt {
	font-size: 1.6rem;
	line-height: 1.4;
}

dd {
	font-size: 1.6rem;
	margin-left:1.4em;
	line-height: 1.4;
}

ul.custommarker01 {
	list-style-type: none;
	font-size: 1.6rem;
	margin-left:1.4em;
	line-height: 1.4;
}
ul.custommarker01 li:before {
	content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-1.6rem; /* 1文字分、左に寄せる */
}


/* アコーディオン */
/*ボックス全体*/
.accbox {
	box-sizing: border-box;
	width: 900px;
	font-size: 1.6rem;
	margin: 2em auto;
	padding: 0;
	max-width: 100%;
}
/*ラベル*/
.accbox label {
	display: block;
	margin: 1.5px 0;
	padding : 13px 12px;
	color: #000000;
	font-weight: bold;
	background: #dcdcdc;
	cursor :pointer;
	transition: all 0.5s;
}

/*アイコンを表示*/
.accbox label:before {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
	background :#c0c0c0;
}

/*チェックは隠す*/
.accbox input {
	display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
	height: auto;
	padding: 5px;
	background: #f7f7f7;
	opacity: 1;
}

.accbox .accshow p {
	margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
	content: "\f106";/*切替後のアイコン*/
}

/*スライダー*/

/**
 * スライダーの幅を指定しているだけ
 */
.c-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding: 0 10px;
}


/*カテゴリーボタン*/
.btn-partial-line {
	box-sizing: border-box;
	width: 400px;
	max-width: 95%;
	font-size: 1.8rem;
	position: relative;
	display: inline-block;
	margin: 10px 10px;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	border-bottom: solid 2px #717171;
	border-left: solid 2px #717171;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	transition: .4s;
}

.btn-partial-line:hover {
	text-decoration: none;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.sup {
	vertical-align: super;
	font-size: smaller;
}
.sub {
	vertical-align: sub;
	font-size: smaller;
}