@charset "UTF-8";
@keyframes slide_index {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -2100px 0;
	}
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************
## Layout

PCのサブメニューとSPのサブメニューは同一のHTMLとなります。  
common.js にて $(window).resize イベントを監視して、  
SPのメニューのためのライブラリ mmenu のための init と destroy で、html 構造を変えています。

**下層ページの簡略図**  
![下層ページの簡略図](../img/out/sp_sub_page.jpg)

<div class="_h3">.wrapper</div>
ウィンドウサイズを広げた際の背景画像がきれる対策
*/
select,
input {
	font-size: 16px;
}

.wrapper {
	width: 100%;
	min-width: 100%;
}

.container,
.sp_container,
.mb_container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.main_column {
	margin-bottom: 3em;
}

.container,
.sp_container,
.mb_container,
.sp_padding,
.main_container {
	padding-left: 10px;
	padding-right: 10px;
}

table.table_column2::before,
table.table_column2::after {
	content: '';
	display: table;
	height: 0;
}

table.table_column2::after {
	clear: both;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Utility - Cosmetic

ユーティリティー設定。  
このサイト専用というわけでもない共通設定。

<div class="_h3">.sp</div>
PCの時だけ表示される。

<div class="_h3">.sp_block</div>
SPの時だけ、ブロック要素になる。

<div class="_h3">.tel</div>
SPの時だけ、リンクになる。(クリックで電話するリンク)

*/
.pc,
.tb,
.pc_tb,
.contents .pc,
.contents .tb,
.contents .pc_tb,
table.table_column2 .pc {
	display: none;
}

.block,
.sp_block {
	display: block;
}

.sp_left {
	text-align: left;
}

.sp_no_br > br,
.sp_no_br > p > br {
	display: none;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Component - Base

コンポーネント設定。  
各ページでよく使い回す記述。  
このサイト専用の共通設定。

*/
.logo-header img {
	padding-left: 10px;
}

.h5 ._right {
	float: none;
	display: block;
}

.h5::before {
	-ms-transform: scaleY(0.7);
	    transform: scaleY(0.7);
}

.h-line {
	font-size: 1.125em;
}

.title_box .text {
	font-size: 1em;
}

.title_box .link_arrow--prev {
	left: 10px;
}

.title_box .link_arrow--next {
	right: 10px;
}

/*

<div class="_h3">.sp_mw300</div>

SP時のみ、 画像の横幅300px に限定する。  
画像が汚く、大きくなってほしくない時を想定

*/
.contents .container .sp_mw300 img,
.contents .container img.sp_mw300 {
	max-width: 300px;
}

.like_table + .like_table {
	margin-top: 1em;
}

/**************************

## - 段組設定 2列 3列 4列

SPの時だけ、中央に等間隔で余白を作り、width: 100%; を守って列になる。  
ul でなくてもいい。  

**2列 .sp_column2**

	<ul class="sp_column2">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**3列 .sp_column3**

	<ul class="sp_column3">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**4列 .sp_column4**

	<ul class="sp_column4">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

*/
.sp_column2:before,
.sp_column2:after,
.sp_column3:before,
.sp_column3:after,
.sp_column4:before,
.sp_column4:after {
	content: ' ';
	display: table;
}

.sp_column2:after,
.sp_column3:after,
.sp_column4:after {
	clear: both;
}

.sp_column2 > *:nth-child(2n),
.sp_column3 > *:nth-child(3n),
.sp_column4 > *:nth-child(4n) {
	padding-bottom: 10px;
}

.sp_column2 > *:last-child,
.sp_column3 > *:last-child,
.sp_column4 > *:last-child {
	padding-bottom: 0;
}

.sp_column2 > * {
	width: 50%;
	box-sizing: border-box;
	float: left;
}

.sp_column2 > *:nth-child(2n+1) {
	clear: left;
	padding-right: 10px;
}

.sp_column2 > *:nth-child(2n) {
	padding-left: 10px;
}

.sp_column2._171 > .main_area {
	margin-right: -171px;
	padding-right: 171px;
	width: 100%;
}

.sp_column2._171 > .image_area {
	width: 171px;
}

.sp_column3 > * {
	width: 33.33%;
	box-sizing: border-box;
	float: left;
}

.sp_column3 > *:nth-child(3n+1) {
	clear: left;
	padding-right: 6.6px;
}

.sp_column3 > *:nth-child(3n+2) {
	padding-left: 3.3px;
	padding-right: 3.3px;
}

.sp_column3 > *:nth-child(3n) {
	padding-left: 6.6px;
}

.sp_column3-medium > *:nth-child(3n+1) {
	clear: left;
	padding-right: 16.666px;
}

.sp_column3-medium > *:nth-child(3n+2) {
	padding-left: 8.333px;
	padding-right: 8.333px;
}

.sp_column3-medium > *:nth-child(3n) {
	padding-left: 16.666px;
}

.sp_column4 > * {
	width: 25%;
	box-sizing: border-box;
	float: left;
}

.sp_column4 > *:nth-child(4n+1) {
	clear: left;
	padding-right: 14px;
}

.sp_column4 > *:nth-child(4n+2),
.sp_column4 > *:nth-child(4n+3) {
	padding-left: 7px;
	padding-right: 7px;
}

.sp_column4 > *:nth-child(4n) > .inner {
	padding-left: 14px;
}

.banner_list.mb_column2 > .mb_li {
	clear: left;
	padding-right: 5px;
	padding-left: 0;
	padding-bottom: 10px;
}

.banner_list.mb_column2 > * {
	padding-left: 5px;
}

/*

<div class="_h3">.table1</div>

.table1 は SPの時、リストのような見た目に変更する。

	<table class="table1">
		<tbody>
			<tr>
				<th>テキスト</th>
				<td>テキスト</td>
			</tr>
			<tr>
				<th>テキスト</th>
				<td>テキスト</td>
			</tr>
			<tr>
				<th>テキスト</th>
				<td>テキスト</td>
			</tr>
		</tbody>
	</table>

*/
.table1,
.table1 tbody,
.table1 tr,
.table1 th,
.table1 td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.table1 tr {
	margin-bottom: 1em;
}

.table1 th,
.table1 td {
	margin-top: -1px;
	text-align: left;
}

.table1 th {
	font-weight: bold;
	background-color: #eaedf2;
	line-height: 1.3;
}

/**************************
table.table_column2
*/
table.table_column2 {
	width: 100%;
	border-collapse: collapse;
}

table.table_column2 td {
	margin-bottom: 1em;
}

table.table_column2._small {
	width: 100%;
}

table.table_column2 .pc {
	display: none;
}

table.table_column2 thead,
table.table_column2 tbody,
table.table_column2 tfoot,
table.table_column2 tr,
table.table_column2 th,
table.table_column2 td {
	display: block;
	width: 100%;
	box-sizing: border-box;
	float: left;
	clear: both;
}

table.table_column2 tr th,
table.table_column2 th + td {
	border-top: 0 none;
}

table.table_column2 .bh {
	width: 100%;
}

table.table_column2--td50 tr td,
table.table_column2--td50 td + td {
	border-top: 0 none;
}

/*

<div class="_h3">横スクロールできる table</div>

responsive-tables.js と組み合わせないと効果が生まれない。  
左の固定部分の横幅を変えたい場合は、CSSを追記する必要がある。  
.responsive_table_area で包んで、  
table.responsive とするのが必須の仕様。

	<div class="responsive_table_area">
		<table class="responsive">
			<tbody>
				<tr>
					<th>テキスト</th>
					<td>テキスト</td>
				</tr>
				<tr>
					<th>テキスト</th>
					<td>テキスト</td>
				</tr>
				<tr>
					<th>テキスト</th>
					<td>テキスト</td>
				</tr>
			</tbody>
		</table>
	</div>

*/
.responsive_table_area {
	position: relative;
	top: 0;
	left: 0;
	clear: both;
}

.responsive_table_mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../img/icon_swipe.png") center center no-repeat transparent;
	background-size: auto 90px;
	z-index: 102;
	cursor: pointer;
}

.responsive_table_mask.shadow {
	background-image: none;
	background: #666;
	opacity: 0.5;
	z-index: 101;
}

.responsive_table_area th:first-child,
.responsive_table_area td:first-child {
	max-width: 120px;
	min-width: 120px;
	width: 120px;
	box-sizing: border-box;
}

.responsive_table_area .table-wrapper .pinned {
	max-width: 121px;
	min-width: 121px;
	width: 121px;
}

.responsive_table_area .table-wrapper .scrollable {
	padding-left: 120px;
}

.responsive_table_area .table-wrapper .scrollable > table {
	margin-left: -120px;
}

.scrollable {
	-webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 767px) {
	.responsive_table_area table.responsive th:first-child,
	.responsive_table_area table.responsive td:first-child,
	.responsive_table_area table.responsive td:first-child,
	.responsive_table_area table.responsive.pinned td {
		display: table-cell;
	}
}

.responsive._25per th,
.responsive._25per td {
	width: auto;
}

.no_th_table_area .table-wrapper .pinned {
	display: none;
}

.no_th_table_area .table-wrapper .scrollable {
	padding-left: 0;
}

.no_th_table_area .table-wrapper .scrollable > table {
	margin-left: -0;
}

.no_th_table_area th:first-child,
.no_th_table_area td:first-child {
	max-width: inherit;
	min-width: inherit;
	width: auto;
}

/*

<div class="_h3">SPだけ縦書きになるテーブル</div>

<table class="reset_table">
	<thead>
		<tr>
			<th>メールアドレス：</th>
			<th>会社名：</th>
			<th>住所：</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-th="メールアドレス：">info@linqua.jp</td>
			<td data-th="会社名：">一般社団法人リンクア</td>
			<td data-th="住所：">東京都大田区田園調布4-30-2</td>
		</tr>
	</tbody>
</table>

	<div class="fot_m">外来診療</div>

*/
.reset_table {
	width: 100%;
}

.reset_table thead {
	display: none;
}

.reset_table td {
	padding-right: 0;
	display: block;
	margin-bottom: 1em;
}

.reset_table td::before {
	content: attr(data-th);
	font-weight: bold;
	display: block;
	margin-bottom: .5em;
}

.reset_table__cell {
	padding-left: .5em;
	overflow: hidden;
}

/**************************
.pc_column
*/
.pc_column3 > *:last-child,
.pc_column2 > *:last-child {
	margin-bottom: 0;
}

.pc_column2:not(.sp_column2) > *,
.pc_column2:not(.sp_column3) > *,
.pc_column2:not(.sp_column4) > *,
.pc_column2:not(.sp_column5) > *,
.pc_column3:not(.sp_column2) > *,
.pc_column3:not(.sp_column3) > *,
.pc_column3:not(.sp_column4) > *,
.pc_column4:not(.sp_column2) > *,
.pc_column4:not(.sp_column3) > *,
.pc_column4:not(.sp_column4) > *,
.pc_column4:not(.sp_column5) > * {
	margin-bottom: 2px;
}

.pc_column2 .text_area,
.pc_column2 .image_area,
.pc_column3 .text_area,
.pc_column3 .image_area,
.pc_column4 .text_area,
.pc_column4 .image_area {
	margin-bottom: 20px;
	position: relative;
	top: 0;
	left: 0;
}

.pc_column2 .image_area img,
.pc_column3 .image_area img,
.pc_column4 .image_area img {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.pc_column2._img180 .main_area + .image_area {
	margin-top: 1em;
}

.pc_column2._img180 .image_area + .main_area {
	margin-top: 1em;
}

.pc_column2._img180 .image_area {
	text-align: center;
}

.pc_column2._img180 .image_area img {
	width: 180px;
	height: auto;
	display: inline-block;
}

.pc_column2._img180--mb_1em {
	margin-bottom: 1em;
}

/*

<div class="_h3">.sp_indent</div>

左右に余白を作る。 
sp_indent ならPCの時だけ

	<div class="section">
		<h4>電車でお越しの場合</h4>
		<div class="sp_indent">
			<ul class="ul1">
				<li>寒川駅北口を下車、寒川町役場方面へ徒歩約10分です。</li>
				<li>宮山駅を下車、寒川神社方面へ約徒歩12分です。</li>
			</ul>
			<p>寒川病院では、<a href="#">無料で送迎バス</a>を用意させて頂いております。近郊の方はご利用ください。</p>
		</div>
	</div>

*/
.indent,
.sp_indent {
	padding-left: 7.5px;
	padding-right: 7.5px;
}

.image_list__li {
	margin-bottom: 15px;
}

.image_list__li img {
	display: block;
	line-height: 0;
	width: 100%;
	height: auto;
}

/* form */
.input_frame.node,
.input_frame.node input {
	width: 60px;
	display: inline-block;
}

.input_frame.node2,
.input_frame.node2 input {
	width: 70px;
}

form .frame .node {
	margin-right: 3px;
}

/**************************
 bxslider
*/
.bx-pager {
	height: 20px;
	bottom: 10px;
}

.bx-pager-item {
	margin: auto 8px;
}

.bx-pager-link {
	width: 8px;
	height: 8px;
	border-radius: 4px;
}

/**************************
.image_list
*/
.image_list li {
	margin-bottom: 10px;
}

.image_list li img {
	display: block;
	line-height: 0;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 319px) {
	.image_list li {
		width: 100%;
	}
	.content .image_list .inner {
		margin-left: 0;
		margin-right: 0;
	}
}

/**************************
.line_list
*/
.line_list li {
	text-align: right;
}

/**************************
.news_list
*/
/**************************
.breadcrumbs
*/
.breadcrumbs {
	font-size: 10px;
	margin-top: 1em;
	margin-bottom: 1em;
}

/**************************
.kakko
*/
.after_kakko {
	margin-left: -.7em;
}

/**************************
.title_box
*/
.title_box--sp_resize {
	font-size: 0.813em;
	min-height: 50px;
	height: auto;
	line-height: 1.5;
	box-sizing: border-box;
	padding: .5em 1em;
}

.icon_search,
.icon_search .button {
	width: 100%;
	min-width: auto;
}

/**************************
.creditcard_list
*/
.creditcard_list li {
	float: left;
}

@media only screen and (max-width: 767px) {
	.creditcard_list li {
		width: 20%;
	}
}

@media only screen and (max-width: 660px) {
	.creditcard_list li {
		width: 25%;
	}
}

@media only screen and (max-width: 560px) {
	.creditcard_list li {
		width: 33.333%;
	}
}

@media only screen and (max-width: 420px) {
	.creditcard_list li {
		width: 50%;
	}
}

.dl2 dt,
.dl2 dd {
	float: left;
}

.dl2 dt {
	clear: both;
	width: 20%;
}

.dl2 dd {
	width: 80%;
}

.dl2--seminar dt {
	text-align: right;
	width: 10%;
}

.dl2--seminar dd {
	width: 90%;
}

.simple_table--course_rei {
	width: 100%;
}

/**************************
.link_line_list
*/
.link_line_list li {
	float: none;
	width: 100%;
}

.share_button {
	float: none;
	margin-top: 20px;
}

.news_list__line {
	margin-bottom: 1em;
}

.news_list__line > div {
	display: block;
}

.google_map {
	max-width: 100%;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

.time_group__comment {
	display: block;
}

/*
.scroll_to_top
*/
.scroll_to_top img {
	width: 50px;
	height: 50px;
}

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Project

特定ページ専用、効果範囲が限定的な記述。  
コンテンツ内容に密接で、汎用性がなく、機能の付け替えを想定していない。

*/
.section-main {
	padding-top: 30px;
	padding-bottom: 20px;
}

.section-main-mm {
	padding-top: 16px;
	margin-top: 0;
}

.section-main .main_text {
	width: 320px;
	height: auto;
	max-width: 100%;
}

.section__title {
	height: 100px;
}

.section__title > img {
	padding-top: 30px;
	width: 320px;
}

.section__title-mm {
	height: auto;
}

.section__title-mm > img {
	max-width: 320px;
	width: auto;
}

.section__content-mm {
	padding-top: 20px;
}

.section__content-intro::before {
	background-size: 300px 162px;
	width: 300px;
	height: 162px;
	position: absolute;
	top: -20px;
	left: 50%;
	-ms-transform: translateX(-50%);
	    transform: translateX(-50%);
}

.info_area img {
	max-width: 400px;
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

.open_list {
	display: block;
	width: 50%;
	float: left;
	border-bottom: 0 none;
}

.header__li-button {
	display: block;
	float: right;
	width: 50%;
}

.header__a {
	text-align: center;
}

.header__a-button {
	width: 100%;
}

.sp_menu {
	display: none;
	border-top: 1px solid #f2f0f0;
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
}

.sp_menu__a {
	background-color: #fff;
	font-size: 1em;
	display: block;
	height: 60px;
	color: #000;
	padding: 13px 0;
	box-sizing: border-box;
	border-bottom: 1px solid #f2f0f0;
}

.sp_header__a {
	font-size: 1em;
	display: inline-block;
	height: 60px;
	color: #000;
	padding: 13px 1em;
	box-sizing: border-box;
	border-bottom: 0 none;
}

.sp_header__a-button {
	color: #fff;
}

.copyright {
	width: 300px;
}

.partner {
	padding-bottom: 30px;
	border-bottom: 1px dotted #9d9d9d;
}

.section-whatisthis {
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
}

.section-whatisthis .main_img {
	width: 155%;
	position: relative;
	top: 0;
	left: 50%;
	-ms-transform: translateX(-50%);
	    transform: translateX(-50%);
	height: auto;
}

.section-notice .bundle img {
	max-width: 100%;
}

.title-mm {
	font-size: 1em;
}

.report__section__content > .column_main {
	margin-bottom: 1em;
}

.event .column:not(:last-child) {
	margin-bottom: 20px;
}