@charset "UTF-8";
@keyframes inav__border {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes inav__txt {
	0% {
		transform: translateY(0px) scale(1);
		opacity: 1;
	}
	50% {
		transform: translateY(106.5px) scale(0.7);
		opacity: .5;
	}
	100% {
		transform: translateY(213px) scale(1);
		opacity: 1;
	}
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

*/
.wrapper {
	width: 100%;
	min-width: 960px;
}

.pc_container,
.pc_tb_container,
.container {
	max-width: 1280px;
	width: 100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	padding-left: 80px;
	padding-right: 80px;
}

.pc_container-index,
.pc_tb_container-index,
.container-index {
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
}

.pc_container-small,
.pc_tb_container-small,
.container-small {
	width: 920px;
	padding-left: 0;
	padding-right: 0;
}

.pc_container-talk,
.pc_tb_container-talk,
.container-talk {
	width: 940px;
	padding-left: 0;
	padding-right: 0;
}

.pc_container-xs,
.pc_tb_container-xs,
.container-xs {
	max-width: 690px;
	padding-left: 0;
	padding-right: 0;
}

.pc_container-xs .container-talk,
.pc_tb_container-xs .container-talk,
.container-xs .container-talk {
	width: 100%;
}

.main_content > .container,
.index_slider {
	position: relative;
	top: 0;
	left: 0;
}

.main_column {
	float: right;
	width: 720px;
}

.main_column--index {
	float: left;
}

.sub_column {
	float: left;
	width: 200px;
	position: relative;
	top: 0;
	left: 0;
}

.sub_column .section {
	margin-bottom: 1.4em;
}

.sub_column--index {
	float: right;
	margin-top: 3em;
}

.sub_column--index .inner, .sub_column--cate_index .inner {
	margin-top: -28px;
}

.hmenu_area::before,
.hmenu_area::after,
.menu ul::after,
.menu ul::before,
.menu ul::after,
.hmenu1::before,
.hmenu1::after,
.hmenu2::before,
.hmenu2::after,
.like_table::before,
.like_table::after {
	content: '';
	display: table;
	height: 0;
}

.hmenu_area::after,
.menu ul::after,
.hmenu1::after,
.hmenu2::after,
.like_table::after {
	clear: both;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Utility - Cosmetic

ユーティリティー設定。
このサイト専用というわけでもない共通設定。

<div class="_h3">.pc</div>
PCの時だけ表示される。

<div class="_h3">.pc_block</div>
PCの時だけ、ブロック要素になる。

<div class="_h3">.tel</div>
SPの時だけ、リンクになる。(クリックで電話するリンク)

*/
.tb,
.sp,
.mb,
.tb_sp,
.contents .tb,
.contents .sp,
.contents .mb,
.contents .tb_sp {
	display: none;
}

.block,
.pc_block {
	display: block;
}

.mm-navbar,
.header .menu .mm-next {
	display: none;
}

.tel {
	pointer-events: none;
	cursor: default;
}

.tel.black:hover,
.tel .black:hover {
	color: #333;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************



## Component - Base

コンポーネント設定。
各ページでよく使い回す記述。
このサイト専用の共通設定。

*/
/* .no_text */
.menu .sub a {
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.menu .sub .subsub {
	display: none;
}

/*

<div class="_h3">.vertical_middle</div>

適当にテキストを vertical-align: middle

	<div class="vertical_middle">テキスト</div>

*/
.vertical_middle {
	display: table-cell;
	vertical-align: middle;
}

/**************************
.button
*/
.button {
	/*box-sizing: border-box;
	width: 180px;
	margin-left: auto;
	margin-right: auto;*/
}

/**************************

## - 段組設定 2列 3列 4列

PCの時だけ、中央に等間隔で余白を作り、width: 100%; を守って列になる。  
ul でなくてもいい。  

**2列 .pc_column2**

	<ul class="pc_column2">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**3列 .pc_column3**

	<ul class="pc_column3">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**4列 .pc_column4**

	<ul class="pc_column4">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

*/
.pc_column2:before,
.pc_column2:after,
.pc_column3:before,
.pc_column3:after,
.pc_column4:before,
.pc_column4:after {
	content: ' ';
	display: table;
}

.pc_column2:after,
.pc_column3:after,
.pc_column4:after {
	clear: both;
}

.pc_column2 > *:nth-child(2n),
.pc_column3 > *:nth-child(3n),
.pc_column4 > *:nth-child(4n) {
	padding-bottom: 10px;
}

.pc_column2 > *:last-child,
.pc_column3 > *:last-child,
.pc_column4 > *:last-child {
	padding-bottom: 0;
}

.pc_column2 > * {
	width: 50%;
	box-sizing: border-box;
	float: left;
}

.pc_column2 > *:nth-child(2n+1) {
	clear: left;
	padding-right: 10px;
}

.pc_column2 > *:nth-child(2n) {
	padding-left: 10px;
}

.pc_column2._171 > .main_area {
	margin-right: -171px;
	padding-right: 171px;
	width: 100%;
}

.pc_column2._171 > .image_area {
	width: 171px;
}

.pc_column3 > * {
	width: 33.33%;
	box-sizing: border-box;
	float: left;
}

.pc_column3 > *:nth-child(3n+1) {
	clear: left;
	padding-right: 6.6px;
}

.pc_column3 > *:nth-child(3n+2) {
	padding-left: 3.3px;
	padding-right: 3.3px;
}

.pc_column3 > *:nth-child(3n) {
	padding-left: 6.6px;
}

.pc_column3-medium > *:nth-child(3n+1) {
	clear: left;
	padding-right: 16.666px;
}

.pc_column3-medium > *:nth-child(3n+2) {
	padding-left: 8.333px;
	padding-right: 8.333px;
}

.pc_column3-medium > *:nth-child(3n) {
	padding-left: 16.666px;
}

.pc_column4 > * {
	width: 25%;
	box-sizing: border-box;
	float: left;
}

.pc_column4 > *:nth-child(4n+1) {
	clear: left;
	padding-right: 14px;
}

.pc_column4 > *:nth-child(4n+2),
.pc_column4 > *:nth-child(4n+3) {
	padding-left: 7px;
	padding-right: 7px;
}

.pc_column4 > *:nth-child(4n) > .inner {
	padding-left: 14px;
}

/**************************
.section
*/
.section {
	margin-bottom: 60px;
}

.section-lg {
	margin-bottom: 120px;
}

.section-lg2 {
	margin-bottom: 10px;
}

.section .section {
	margin-bottom: 40px;
}

.section p,
.section span.p {
	font-size: 0.875em;
}

.section p .node,
.section span.p .node {
	margin-left: .5em;
	margin-right: .5em;
}

.section .p-pc_tb_16 {
	font-size: 1em;
}

.section--small {
	margin-bottom: 1em;
}

.section2 {
	margin-bottom: 40px;
}

.section2.section--line {
	padding-bottom: 40px;
}

.section2.section--line--small {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #ccc;
}

.section2.section--line:last-child {
	padding-bottom: 0;
}

.section3 {
	margin-bottom: 1em;
}

.section3 .h5 {
	margin-bottom: .5em;
}

.section4 {
	margin-bottom: 1em;
}

.section4:last-child {
	margin-bottom: 0;
}

/*

<div class="_h3">.pc_indent</div>

左右に余白を作る。 
pc_indent ならPCの時だけ

	<div class="section">
		<h4>電車でお越しの場合</h4>
		<div class="pc_indent">
			<ul class="ul1">
				<li>寒川駅北口を下車、寒川町役場方面へ徒歩約10分です。</li>
				<li>宮山駅を下車、寒川神社方面へ約徒歩12分です。</li>
			</ul>
			<p>寒川病院では、<a href="#">無料で送迎バス</a>を用意させて頂いております。近郊の方はご利用ください。</p>
		</div>
	</div>

*/
.indent,
.pc_indent {
	padding-left: 1em;
	padding-right: 1em;
}

.indent2 {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

/**************************
.line_list
*/
.line_list {
	margin-bottom: 1em;
	text-align: right;
}

.line_list li {
	display: inline-block;
}

.line_list li:not(:last-child) {
	margin-right: 2em;
}

.line_list._center {
	text-align: center;
}

/* form */
.input_frame.node,
.input_frame.node input {
	width: 70px;
	display: inline-block;
}

.input_frame.node2,
.input_frame.node2 input {
	width: 100px;
}

/* bxslider */
.bx-pager {
	height: 16px;
	bottom: 20px;
}

.bx-pager-item {
	margin: auto 15px;
}

.bx-pager-link {
	width: 14px;
	height: 14px;
	border-radius: 7px;
}

.dl1 dt,
.dl1 dd,
.dl2 dt,
.dl2 dd {
	float: left;
}

.dl1 dt,
.dl2 dt {
	clear: both;
	width: 20%;
}

.dl1 dd,
.dl2 dd {
	width: 80%;
}

.dl1--large dt,
.dl2--large dt {
	width: 40%;
}

.dl1--large dd,
.dl2--large dd {
	width: 60%;
}

/*

<div class="_h3">.like_table</div>

PCの時だけ、簡易的に table のような表示をする。
(SPの時には、何もおきない)
横幅が広からず、もろいので注意。

	<div class="like_table">
		<div class="cell row">th のような</div>
		<div class="cell">td のような</div>
		<div class="cell row">th のような</div>
		<div class="cell">td のような</div>
	</div>

*/
.like_table .cell {
	float: left;
	margin-right: 2em;
	white-space: nowrap;
}

.like_table .row,
.like_table .c1 {
	width: 20%;
	clear: both;
}

.like_table.column3 .c2 {
	width: 20%;
}

.like_table._medium .row,
.like_table._medium .c1 {
	width: 40%;
	clear: both;
}

.like_table._large .row,
.like_table._large .c1 {
	width: 60%;
	clear: both;
}

.like_table.__pa .c1 {
	float: none;
	margin-right: 0;
	width: 5em;
	white-space: normal;
	position: absolute;
}

.like_table.__pa .c2::before {
	content: '：';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: -1em;
}

.like_table.__pa .c2 {
	float: none;
	margin-left: 6em;
	white-space: normal;
}

.like_table.sm .row,
.like_table.sm .c1 {
	width: 8%;
	clear: both;
}

.like_table.sm .c2 {
	width: 8%;
}

.like_table.xs .row,
.like_table.xs .c1 {
	width: 5%;
	clear: both;
}

.like_table.column2 .c2,
.like_table.column2 .cell:nth-child(2n) {
	margin-right: 0;
}

.like_table._20per {
	width: 100%;
}

.like_table._20per .cell {
	white-space: normal;
}

.like_table._20per .row {
	clear: left;
	width: 20%;
	margin-right: 0;
}

.like_table._20per .cell:not(.row) {
	padding-left: 22%;
	margin-right: 0;
	margin-left: -22%;
	box-sizing: border-box;
	width: 100%;
}

/*

<div class="_h3">flex</div>

flex 対応ブラウザで flex 表示にする  
非対応ブラウザでは float にする

.flex-order_main_sub で、  
.flex__main 左にしてメインコンテンツ、 ._flex_sub を右にしてサブコンテンツとみなしてレイアウトする

.flex-order_sub_main で、  
.flex_sub 左にしてサブコンテンツ、 .flex__main を右にしてメインコンテンツとみなしてレイアウトする


	<div class="flex flex-column2 flex-order_main_sub">
		<div class="flex__main"></div>
		<div class="flex_sub"></div>
	</div>

*/
.flex > div,
.pc_flex > div,
.main_flex > div {
	float: left;
}

.flex > div::before,
.pc_flex > div::before,
.flex > div::after,
.pc_flex > div::after,
.main_flex > div::before,
.main_flex > div::after {
	content: '';
	display: table;
}

.flex > div::after,
.pc_flex > div::after,
.main_flex > div::after {
	clear: both;
}

.flex,
.pc_flex,
.main_flex {
	box-sizing: border-box;
	display: -ms-flexbox;
	display: flex;
}

.flex-order_main_sub > .flex__main,
.main_flex > .main_container {
	-ms-flex-order: 0;
	    order: 0;
}

.flex-order_main_sub > .flex__sub,
.main_flex > .sub_container {
	-ms-flex-order: 1;
	    order: 1;
}

.flex-order_sub_main > .flex__main,
.main_flex > .main_container {
	-ms-flex-order: 1;
	    order: 1;
}

.flex-order_sub_main > .flex__sub,
.main_flex > .sub_container {
	-ms-flex-order: 0;
	    order: 0;
}

/**************************
.contact_box
*/
.contact_box {
	width: 340px;
	padding: 2.2em;
}

.contact_box__head {
	font-size: 1.125em;
	font-weight: bold;
}

/*

<div class="_h3">電話番号</div>

	<a href="tel:042-323-9200" title="予約センターへ電話をする" class="reserve_tel tel">042-323-9200</a>
	<a href="tel:042-323-5111" title="代表番号へ電話をする" class="rep_tel tel">042-323-5111</a>

*/
.tel_text {
	vertical-align: baseline;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Project

特定ページ専用、効果範囲が限定的な記述。
コンテンツ内容に密接で、汎用性がなく、機能の付け替えを想定していない。

*/
.hero {
	margin-bottom: 0;
}

.hero__jp {
	font-size: 1.125em;
}

.hero__container {
	overflow: visible;
}

.hero__banner {
	position: absolute;
	top: 0;
	right: 0;
}

.section-index-first {
	padding-top: 100px;
}

/**************************
.flexproject
*/
.flex-index {
	width: 100%;
}

.flex-index > .flex__main {
	padding-top: 86px;
	min-width: 520px;
	width: 44%;
}
.flex-index > .flex__main2 {
	padding-top: 86px;
	min-width: 520px;
	width: 88%;
}

.flex-index > .flex__sub {
	overflow: hidden;
	width: 56%;
}

.flex-index.flex-order_main_sub > .flex__main {
	padding-right: 0;
	box-sizing: border-box;
}

.flex-index.flex-order_sub_main > .flex__main {
	padding-left: 50px;
	box-sizing: border-box;
}

.flex-cc1_hero > .flex__main {
	min-width: 560px;
	width: 560px;
}

.flex-cc1_hero > .flex__sub {
	box-sizing: border-box;
	padding-left: 30px;
}

.flex-default > .flex__main {
	padding-right: 30px;
	box-sizing: border-box;
}

.flex-default > .flex__sub {
	padding-left: 30px;
	box-sizing: border-box;
}

.flex-cc1_1 > .flex__main {
	padding-right: 80px;
	box-sizing: border-box;
}

.flex-cc1_1 > .flex__sub {
	padding-left: 74px;
	box-sizing: border-box;
}

.flex-cc1_2 > .flex__main {
	min-width: 540px;
	max-width: 540px;
	padding-right: 40px;
	box-sizing: border-box;
	width: 50%;
}

.flex-cc1_2 > .flex__sub {
	width: 50%;
}

.flex-sc1_hero > .flex__main {
	width: 50%;
	padding-right: 5px;
	box-sizing: border-box;
}

.flex-sc1_hero > .flex__sub {
	width: 50%;
	padding-left: 5px;
	box-sizing: border-box;
}

.flex-dc1_hero {
	width: 100%;
}

.flex-dc1_hero > .flex__main {
	width: 420px;
	min-width: 420px;
	box-sizing: border-box;
}

.flex-dc1_hero > .flex__sub {
	width: 100%;
}

.flex-dc1_2 > .flex__sub {
	width: 560px;
	min-width: 560px;
	box-sizing: content-box;
	padding-left: 40px;
	margin-bottom: 1em;
}

.flex-dc1_2 > .flex__sub img {
	max-width: 100%;
	display: block;
}

@media only screen and (max-width: 1100px) {
	.flex-cc1_hero > .flex__main {
		min-width: 417px;
	}
	.flex-cc1_hero > .flex__sub {
		box-sizing: border-box;
		padding-left: 30px;
	}
}

@media only screen and (max-width: 1200px) {
	.flex-index > .flex__main {
		padding-top: 30px;
	}
	.contents .pc_column2.cc1_hero_inner > .main_area {
		float: none;
		width: auto;
		padding: 0;
		margin: 0;
	}
	.contents .pc_column2.cc1_hero_inner > .image_area {
		float: none;
		width: auto;
		margin: auto;
	}
	.image_list-lower {
		margin-top: 1em;
		text-align: center;
	}
	.image_list-lower__li {
		display: inline-block;
		width: 45%;
		max-width: 171px;
		margin-right: 3px;
	}
	.image_list-lower__li:odd {
		margin-right: 0;
		margin-left: 3px;
	}
}

.inav {
	left: 20px;
}

br.mb + .em_box,
br.tb + .em_box,
br.sp + .em_box,
.em_box__node + .em_box {
	margin-left: .6em;
}

.em_box-no_pctb {
	margin-right: 0;
}

.em_box-no_pctb::after {
	content: none;
	padding: 0;
	margin: 0;
}

br.mb + .em_box-no_pctb,
br.tb + .em_box-no_pctb,
br.sp + .em_box-no_pctb,
.em_box-no_pctb__node + .em_box-no_pctb {
	margin-left: 0;
}

.case__content-connect {
	margin-top: -70px;
}

.case__content-search {
	margin-top: -46px;
}

.case__content-develop {
	margin-top: -60px;
}

.case__title__main-index {
	padding-left: 50px;
	width: auto;
}

.case__title__main-index img {
	max-height: 210px;
}

.case__title__main-lower {
	margin-top: 35px;
	margin-left: 15px;
}

.case__title-lower {
	margin-bottom: 10px;
}

.casec__content, .casec__footer {
	padding-left: 65px;
}

.casec__content {
	box-sizing: contet-box;
	position: relative;
	top: 0;
	left: 0;
}

.casec__person_name_area {
	clear: both;
	padding-top: 15px;
	line-height: 1.8;
}

.casec__person_name__sub {
	font-size: 1em;
}

.casec__person_name__main {
	font-size: 1.25em;
}

.casec__pager {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 26px;
}

.casec__pager__link {
	position: absolute;
}

.casec__pager__link-prev {
	left: 30px;
}

.casec__pager__link-next {
	right: 0;
}

.case_slider__arrows-prev {
	left: 65px;
}

@media only screen and (max-width: 1240px) {
	.casec__person_name__sub {
		font-size: 0.875em;
	}
	.casec__person_name__main {
		font-size: 1.125em;
	}
}

@media only screen and (max-width: 1200px) {
	.casec__person_name__sub {
		font-size: 0.75em;
	}
	.casec__person_name__main {
		font-size: 1em;
	}
}

.h2-lower__header {
	left: -55px;
}

.cc1_1 {
	position: relative;
	top: 0;
	left: 0;
	min-height: 310px;
}

.cc1_1 p {
	position: relative;
	top: 0;
	left: 0;
	z-index: 3;
}

.cc1_1__person {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -191px;
	width: 400px;
	height: 280px;
	overflow: visible;
}

.cc1_1__person__text {
	width: 400px;
	height: 50px;
	position: absolute;
	top: 7px;
	left: 245px;
	z-index: 2;
}

.cc1_1__person__image {
	width: 246px;
	height: 279px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.cc1_1 .flex__sub {
	padding-top: 130px;
}

@media only screen and (max-width: 1240px) {
	.cc1_1__person__text {
		top: -60px;
	}
}

@media only screen and (max-width: 1100px) {
	.cc1_1__person__text {
		top: -80px;
	}
}

@media only screen and (max-width: 1050px) {
	.cc1_1__person__text {
		left: 220px;
		top: -120px;
	}
}

.step {
	box-sizing: border-box;
	padding-left: 43px;
	padding-bottom: 2em;
	padding-right: 30px;
	position: relative;
	top: 0;
	left: 0;
}

.step-2 {
	min-width: 50%;
	max-width: 50%;
	width: 50%;
}

.step-3 {
	min-width: 33.333%;
	max-width: 33.333%;
	width: 33.333%;
}

.step_list {
	padding: 2.4em 0 0 20px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-flex-pack: start;
	    justify-content: flex-start;
	width: 100%;
	box-sizing: border-box;
}

.step_list-gray {
	background-color: #f0f0f0;
}

.step_list-cc1 {
	font-size: 0.75em;
}

.step_list-inner {
	padding: 0;
}

.step__num {
	display: block;
	position: absolute;
	top: -5px;
	left: 0;
	width: 33px;
	height: 33px;
}

.step .h4 {
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: .3em;
}

.step p {
	font-size: 0.75em;
}

.cc1_2 {
	position: relative;
	top: 0;
	left: 0;
	height: 69px;
	overflow: visible;
}

.cc1_2__image {
	width: 547px;
	height: 109px;
	display: block;
	position: absolute;
	top: -40px;
	left: 0;
}

.dc1_hero_list {
	float: right;
}

.dc1_hero__li {
	display: inline-block;
	width: 230px;
}

.dc1_1 {
	position: relative;
	top: 0;
	left: 0;
	margin-bottom: 80px;
}

.dc1_1__image {
	position: absolute;
	height: 192px;
	width: auto;
	bottom: -78px;
	right: 46px;
}

.news_panel {
	position: absolute;
	bottom: 30px;
	right: 20px;
}

.blog_panel {
	bottom: 220px;
	right: 20px;
}

.dm {
	max-height: 520px;
}

.hnav {
	width: 700px;
}

.hnav__li {
	width: 150px;
}

.mdetail::before, .mdetail::after {
	content: '';
	display: table;
}

.mdetail::after {
	clear: both;
}

.mdetail .column-sub {
	width: 165px;
	position: relative;
	top: 0;
	left: 0;
	float: left;
	z-index: 2;
}

.mdetail .column-main {
	width: 100%;
	box-sizing: border-box;
	padding-left: 195px;
	margin-left: -165px;
	float: left;
}

.person__name-default_right {
	float: right;
}

.talk__content {
	min-width: 460px;
}

.banner_list-footer li {
	float: left;
}

.banner_list-footer li:not(:first-child) {
	margin-left: 20px;
}

.news_list__line {
	width: 360px;
	box-sizing: border-box;
}

.single_hero .single__main {
	width: 560px;
	margin: 0 auto;
}
