@charset "utf-8";

/************************************************************
	Reset default browser CSS.
*************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; outline: 0; vertical-align: baseline; margin: 0; padding: 0;}
:focus { outline: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ol, ul { list-style: none;}
table { border-collapse: collapse;border-spacing: 0;}
caption, th, td { font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a { margin: 0; padding: 0; outline: 0; vertical-align: baseline; background: transparent;}
a { -webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important; } 
a:active, a:hover { outline: none; outline-width: 0;}
a img { border: 0;}
img { -webkit-backface-visibility: hidden; backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;/* Chrome transition Bug Fix */}
html { font-size: 62.5%; /*10px*/ }
body{
	margin: 0 auto;
	padding: 0;
	color: #000;
	/*font-family: "Noto Sans JP","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,Helvetica,sans-serif;*/
	font-family: 'Noto Serif JP', "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-size: 1.8rem;
	line-height: 1.8;
	word-wrap: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

/************************************************************
	Clearfix
*************************************************************/
#wrapper:after { content:""; display: table; clear: both;}
#wrapper { zoom: 1;}
.clearfix:after { content: " "; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { display: inline-table; min-height: 1%;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}

/************************************************************
	Link
*************************************************************/
a {
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	color: #000;
	font-size: 100%;
	text-decoration: none;
}
a:hover, a:active {
	outline: none;
	color: #56C0D3;
	text-decoration: underline;

}

/************************************************************
	Layout
*************************************************************/
#wrapper {
	width: 100%;
	margin: 0 auto;
}
.inner {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
#content {
	width: 100%;
	margin: 0 auto;
}
#bottom {
	width: 100%;
	margin: 0 auto;
}
.entry-content {
	width: 100%;
	margin: 0 auto 4rem auto;
}
footer {
	clear: both;
}
section {
	margin-bottom: 10rem;
}
@media only screen and (min-width: 1200px){
	#bottom {
		width: 1200px;
	}
	.entry-content {
		width: 1200px;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1199px) {
	.inner {
		width: 90%;
	}
	#bottom {
		width: 90%;
	}
	.entry-content {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (max-width: 768px){
	.inner {
		width: 90%;
	}
	#bottom {
		width: 90%;
	}
	.entry-content {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only print { /* 印刷用設定 */
	footer {
		width: 1200px !important;
		margin: 1em auto 0 auto !important;
		background: #FFF;
	}
}

/************************************************************
	Typography
*************************************************************/
section > h2 {
	position: relative;
	margin-bottom: 8rem;
	font-size: 3.8rem;
	font-weight: bold;
	text-align: center;
}
section > h2::before {
	content: '';
	position: absolute;
	bottom: -10px;
	display: inline-block;
	width: 60px;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #56C0D3;
}
section > h2 span {
	display: block;
	padding-bottom: 1rem;
	font-size: 1.8rem;
}
section > h3 {
	margin-top: 6rem;
	margin-bottom: 6rem;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
}
@media only screen and (max-width: 375px){
	section > h2 {
		font-size: 2.4rem;
	}
	section > h3 {
		font-size: 2rem;
	}
}
@media only screen and (max-width: 480px){
	section > h2 {
		font-size: 2.6rem;
	}
	section > h3 {
		margin-top: 4rem;
		margin-bottom: 4rem;
		font-size: 2.2rem;
	}
}

/************************************************************
	Parallax
*************************************************************/
.prlx {
	width: 100%;
	margin-bottom: 6rem;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
	.doctor .prlx {
		background-attachment: inherit !important;
		background-position: left top;
	}
.prlx h1 {
	padding: 0 1em;
	font-size: 6rem;
	font-weight: bold;
	color: #FFF;
	text-shadow: 0px 0px 20px #000;
	line-height: 1.2;
	text-align: center;
}
.prlx h1 span {
	display: block;
	margin-top: 0.5rem;
	font-size: 2rem;
}
.prlx-bg-access { background-image: url(../images/content/prlx-access.jpg);}
.prlx-bg-doctor { background-image: url(../images/content/prlx-doctor.jpg);}
.prlx-bg-clinic { background-image: url(../images/content/prlx-clinic.jpg);}
.prlx-bg-books { background-image: url(https://www.somon-clinic.com/images/content/prlx-books.jpg);}
.prlx-bg-recommend { background-image: url(https://www.somon-clinic.com/images/content/prlx-recommend.jpg);}
@media only screen and (min-width: 1400px){
	.doctor .prlx {
		height: 1000px !important;
	}
}
@media only screen and (min-width: 1200px){
	.doctor .prlx {
		height: 800px;
	}
	.doctor .prlx h1 {
		margin-left: 30%;
	}
	.clinic .prlx {
		background-position: center top;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1199px) {
	.doctor .prlx {
		height: 800px;
	}
	.doctor .prlx h1 {
		margin-left: 50%;
		margin-top: 20%;
	}
}
@media only screen and (min-width: 481px) and (max-width: 999px) {
	.clinic .prlx {
		background-position: right top;
	}
}
@media only screen and (min-width: 769px){
	.prlx {
		height: 600px;
	}
}
@media only screen and (max-width: 768px){
	.prlx {
		height: 100vh;
		background-attachment: scroll;
	}
	.prlx h1 {
		font-size: 5rem;
	}
	.doctor .prlx {
		height: 400px;
		margin-top: 80px;
	}
	.doctor .prlx h1 {
		margin-left: 50%;
		margin-top: 20%;
		font-size: 3.6rem;
	}
}
@media only screen and (max-width: 480px){
	.prlx {
		/*min-height: 400px;*/
		height: 300px;
		margin-top: 80px;
	}
	.prlx h1 {
		font-size: 4rem;
	}
	.doctor .prlx h1 {
		font-size: 3rem;
	}
	.prlx h1 span {
		font-size: 1.6rem;
	}
	.prlx-bg-access { background-image: url(https://www.somon-clinic.com/images/content/prlx-access-mb.jpg);}
	.prlx-bg-doctor { background-image: url(https://www.somon-clinic.com/images/content/prlx-doctor-mb.jpg);}
	/*.prlx-bg-clinic { background-image: url(https://www.somon-clinic.com/images/content/prlx-clinic-mb.jpg);}*/
	/*.prlx-bg-books { background-image: url(https://www.somon-clinic.com/images/content/prlx-books-mb.jpg);}*/
	.prlx-bg-recommend { background-image: url(https://www.somon-clinic.com/images/content/prlx-recommend-mb.jpg);}
}

/************************************************************
	Header / Common
*************************************************************/
@media only screen and (min-width: 769px){
	header#mobile {
		display: none;
	}
}
@media only screen and (max-width: 768px){
	header#main {
		display: none;
	}
}

/************************************************************
	Header / Desktop
*************************************************************/
header#main {
	/*position: relative;*/
	padding: 1.5rem 0;
	width: 100%;
	border-bottom: 1px solid #333;
}
header#main > div {
	width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	box-sizing: border-box;
}
@media only screen and (min-width: 769px) and (max-width: 1199px) {
	header#main > div {
		width: 97%;
		padding: 0;
	}
}
/* Logo, Address */
header#main > div > dl {
	float: left;
}
header#main > div > dl dt {
	font-size: 1.4rem;
}
header#main > div > dl dd.logo {
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.4;
}
header#main > div > dl dd.logo a {
	text-decoration: none;
}
header#main > div > dl dd.logo a:hover {
	color: #56C0D3;
	text-decoration: none;
}
header#main > div > dl dd.address {
	font-size: 1.4rem;
}
header#main > div > dl dd.address::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f3c5";
}

/* Phone */
header#main > div > div.nav {
	float: right;
}
header#main > div > div.nav p.tel {
	font-size: 3.6rem;
	text-align: right;
}
header#main > div > div.nav p.tel::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f8d3";
	font-size: 2.4rem;
}
header#main > div > div.nav p.tel::after {
	display: inline-block;
	margin: 1rem 0 0 1rem;
	padding: 0.2rem 1rem;
	background: #56C0D3;
	border-radius: 5px;
	font-size: 2rem;
	color: #FFF;
	vertical-align: top;
	content: "完全予約制";
}
@media only screen and (max-width: 999px){
	header#main > div > dl dt {
		font-size: 1.2rem;
	}
	header#main > div > dl dd.logo {
		font-size: 3rem;
	}
	header#main > div > dl dd.address {
		font-size: 1.2rem;
	}
	header#main > div > div.nav p.tel {
		font-size: 3rem;
	}
}
/* Fixed
------------------------------------------------------------*/
header#main {
	top: -5rem;
}
header#main.fixed {
	position: fixed;
	top: 0;
	z-index: 10000;
	background: rgba(255, 255, 255, 0.9);
	transition: 0.3s ease-in-out;
	padding: 1rem 0;
}
/* Logo, Address */
header#main.fixed  > div > dl dt {
	display: none;
}
header#main.fixed > div > dl dd.logo {
	font-size: 2.6rem;
	line-height: 1.6;
}
header#main.fixed > div > dl dd.address {
	display: none;
}
/* Phone */
header#main.fixed > div > div.nav p.tel {
	float: right;
	font-size: 2.4rem;
}
header#main.fixed > div > div.nav p.tel::before {
	font-size: 1.8rem;
}
header#main.fixed > div > div.nav p.tel::after {
	margin: 0.5rem 0 0 1rem;
	font-size: 1.6rem;
}
/* Nav */
header#main.fixed > div > div.nav nav#desktop {
	float: left;
	margin-right: 2rem;
	margin-top: 0.3rem;
}
header#main.fixed > div > div.nav nav#desktop ul li {
	margin: 0 0.4rem;
	vertical-align: middle;
}
@media only screen and (max-width: 1099px){
	header#main.fixed > div > dl dd.logo {
		font-size: 2.2rem;
		letter-spacing: -0.05em;
	}
	header#main.fixed > div > div.nav p.tel {
		font-size: 2rem;
	}
	header#main.fixed > div > div.nav p.tel::before {
		font-size: 1.6rem;
	}
	header#main.fixed > div > div.nav p.tel::after {
		margin: 0.5rem 0 0 1rem;
		font-size: 1.4rem;
	}
	header#main.fixed > div > div.nav nav#desktop {
		margin-top: 0;
	}
	header#main.fixed > div > div.nav nav#desktop ul li {
		margin: 0 0.4rem;
	}
}
@media only screen and (max-width: 999px){
	header#main.fixed > div > div.nav nav#desktop {
		margin-top: 0.3rem;
	}
	header#main.fixed > div > div.nav nav#desktop ul li {
		margin: 0 0.3rem;
	}
}
@media only screen and (max-width: 899px){
	header#main.fixed > div > dl dd.logo {
		font-size: 1.8rem;
		letter-spacing: -0.1em;
	}
	header#main.fixed > div > div.nav p.tel {
		font-size: 1.8rem;
	}
	header#main.fixed > div > div.nav p.tel::before {
		font-size: 1.6rem;
	}
	header#main.fixed > div > div.nav p.tel::after {
		margin: 0.2rem 0 0 1rem;
		font-size: 1.2rem;
	}
	header#main.fixed > div > div.nav nav#desktop {
		margin-top: 0;
	}
	header#main.fixed > div > div.nav nav#desktop ul li {
		margin: 0 0.2rem;
	}
}
@media only screen and (max-width: 849px){
	header#main.fixed > div > div.nav p.tel::after {
		display: none;
		content: "";
	}
}

/************************************************************
	Header / Mobile
*************************************************************/
header#mobile {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	margin: 0 auto;
	padding: 1rem;
	background: rgba(255,255,255,.8);
	box-sizing: border-box;
}
/* Logo */
header#mobile dl {
}
header#mobile dl dt {
	font-size: 1.2rem;
	line-height: 1.2;
}
header#mobile dl dd {
	font-size: 2.6rem;
	font-weight: bold;
	letter-spacing: -0.08em;
}
/* Phone */
header#mobile p.phone {
	position: absolute;
	top: 12px;
	z-index: 99999;
	background: #307BC0;
}
header#mobile p.phone {
	right: 80px;
}
header#mobile p.phone a {
	display: block;
	width: 60px;
	height: 60px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	z-index: 99999;
}
header#mobile p.phone a i {
	display: block;
	font-size: 3.4rem;
	line-height: 60px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: middle !important;
}
@media only screen and (max-width: 480px){
	header#mobile p.phone {
		right: 70px;
	}
	header#mobile p.phone a {
		width: 50px;
		height: 50px;
	}
	header#mobile p.phone a i {
		font-size: 3rem;
		line-height: 50px;
	}
}
@media only screen and (max-width: 399px){
	header#mobile dl dd {
		font-size: 2.2rem;
		letter-spacing: -0.1em;
	}
	header#mobile p.phone {
		right: 66px;
	}
	header#mobile p.phone a {
		width: 44px;
		height: 44px;
	}
	header#mobile p.phone a i {
		font-size: 2.6rem;
		line-height: 44px;
	}
}

/************************************************************
	Navigation / Common
*************************************************************/
#page nav {
	display: none;
}
@media all and (min-width: 769px){
	nav#desktop {
		display: block !important;
	}
	header#mmenu{
		display: none; /* mmenu 開閉 非表示 */
	}
	nav#mobileFixed {
		display: none;
	}
	nav.bottom {
		display: block !important;
	}
}
@media screen and (max-width: 768px){
	nav#mobileFixed {
		display: block !important;
	}
	nav.bottom {
		display: block !important;
	}
}
/* Print Setting */
@media only print {
	nav#desktop {
		width: 1200px !important;/*★印刷幅★*/
		margin: 0 auto !important;
	}
}

/************************************************************
	Navigation / Desktop
*************************************************************/
nav#desktop {
	/*margin-top: 1rem;*/
	text-align: center;
}
nav#desktop ul {
	font-size: 1.6rem
}
nav#desktop ul li {
	display: inline-block;
	text-align: center;
	margin: 0 1rem;
}
nav#desktop ul li a {
	text-decoration: none;
	vertical-align: middle;
}
nav#desktop ul li a:hover {
	text-decoration: none;
	color: #56C0D3;
}
nav#desktop ul li.home a {
	font-size: 2rem;
}
nav#desktop ul li:hover {
	animation: up 0.5s linear 1 0s normal;
}
@media only screen and (max-width: 1099px){
	nav#desktop {
		margin-top: 0;
	}
	nav#desktop ul li {
		margin: 0 0.8rem;
	}
}
@media only screen and (max-width: 999px){
	nav#desktop ul li {
		margin: 0 0.2rem;
	}
	nav#desktop ul li a {
		font-size: 1.4rem;
	}
	nav#desktop ul li.home a {
		font-size: 1.6rem;
	}
}
@media only screen and (max-width: 800px){
	nav#desktop ul li a {
		font-size: 1.2rem;
	}
	nav#desktop ul li.home a {
		font-size: 1.6rem;
	}
}

/************************************************************
	Navigation / Mobile (jQuery.mmenu)
*************************************************************/
@media only screen and (max-width: 768px){
	/*.mm-menu { -webkit-overflow-scrolling: auto;}*/
	/* Open Button */
	header#mmenu {
		position: fixed;
		top: 12px;
		right: 10px;
		z-index: 99999;
		/*background: #56C0D3;*/
		background: #000;
	}
	header#mmenu a {
		display: block;
		width: 60px;
		height: 60px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
	}
	header#mmenu a i {
		display: block;
		font-size: 3.4rem;
		line-height: 60px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		vertical-align: middle !important;
		transition: all 0.25s ease-out;
		color: #FFF;
	}
	.mm-opened header#mmenu a i {
		font-weight: 300;
		transform: rotate(90deg);
	}
	.mm-opened header#mmenu a i:before {
		content: "\f00d";
	}

	/* Icon
	------------------------------------------------------------*/
	/*.mm-menu li.menu-item-home a::before {
		margin-right: 1rem;
		font-family: "Font Awesome 5 Pro";
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		content: "\f105";
	}*/
	/*.mm-menu li.menu-item-home a::after {
		content: "\00a0ホーム";
	}*/
	.mm-menu li.external a::after {
		margin-left: 0.5em;
		font-family: "Font Awesome 5 Pro";
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		content: "\f35d";
	}

	/* Theme Black Text Color（Defalt Theme Overwrite）
	------------------------------------------------------------*/
	.mm-menu.mm-theme-black { color: rgba(255, 255, 255, 1) !important;} /* default 0.6 */
	.mm-menu.mm-theme-black .mm-navbar > *, .mm-menu.mm-theme-black .mm-navbar a { color: rgba(255, 255, 255, 1) !important;} /* default 0.4 */
	.mm-menu.mm-theme-black em.mm-counter { color: rgba(255, 255, 255, 1) !important;} /* default 0.4 */
	.mm-menu.mm-theme-black .mm-listview > li .mm-prev::before, .mm-menu.mm-theme-black .mm-listview > li .mm-next::after, .mm-menu.mm-theme-black .mm-listview > li .mm-arrow::after {
		border-color: rgba(255, 255, 255, 1) !important; /* default 0.4 */
	}
	/* bottom
	------------------------------------------------------------*/
	.mm-navbar-bottom {
		height: 80px !important;
	}
	.mm-navbar-bottom a.tel:before {
		margin-right: 0.25em;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f095";
		color: #FFF;
	}
	.mm-navbar-bottom a.mobile:before {
		margin-right: 0.25em;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		content: "\f10b";
		color: #FFF;
	}
	/* Background Color (Overwrite) ※Default Color #f3f3f3
	------------------------------------------------------------*/
   /*nav#menu { background-color: #323849; }*/
}
@media only screen and (max-width: 480px){
	header#mmenu a {
		width: 50px;
		height: 50px;
	}
	header#mmenu a i {
		font-size: 3rem;
		line-height: 50px;
	}
}
@media only screen and (max-width: 399px){
	header#mmenu a {
		width: 44px;
		height: 44px;
	}
	header#mmenu a i {
		font-size: 2.6rem;
		line-height: 44px;
	}
}

/************************************************************
	Navigation / Mobile Footer Fixed Menu
*************************************************************/
@media screen and (max-width: 768px){
	nav#mobileFixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		/*background: rgba(86, 192, 211,.8);*/
		background: rgba(0, 0, 0,.8);
		box-sizing: border-box;
		z-index: 100;
	}
	nav#mobileFixed ul {
	}
	nav#mobileFixed ul li {
		float: left;
		width: calc(100% / 4);
		text-align: center;
		box-sizing: border-box;
	}
	nav#mobileFixed ul li:last-of-type {
		border-right: none;
		background: rgba(48, 123, 192,.8);
	}
	nav#mobileFixed ul li a {
		display: block;
		padding: 10px 0 15px 0;
		text-decoration: none;
		color: #FFF !important;
		font-size: 9px;
	}
	nav#mobileFixed ul li a:hover {
		text-decoration: none !important;

	}
	nav#mobileFixed ul li a i {
		margin-bottom: 3px;
		display: block;
		font-size: 22px;
	}
}

/************************************************************
	Footer
*************************************************************/
footer {
	padding: 1.5em 0;
	width: 100%;
	background: #F0F0F0;
}
footer > div {
	width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
@media screen and (max-width: 1199px){
	footer > div {
		width: 90%;
	}
}

footer > div > div h3 {
	margin-bottom: 2rem;
	font-size: 2rem;
	font-weight: bold;
}
@media only screen and (max-width: 767px){
	footer > div > div h3 {
		text-align: center;
	}
}
/* 診療日・時間
------------------------------------------------------------*/
footer > div > div.timetable {
	float: left;
	width: 48%;
	box-sizing: border-box;
}
footer > div > div.timetable table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
	border-spacing: 0;
}
footer > div > div.timetable table th {
	padding: 0.5rem;
	background: #FFF;
}
footer > div > div.timetable table tr.head th {
	background: #56C0D3;
	color: #FFF;
	text-align: center;
}
footer > div > div.timetable table th.time {
	background: #EEF9FB;
}
footer > div > div.timetable table td {
	padding: 0.5rem;
	background: #FFF;
	text-align: center;
}
@media only screen and (max-width: 767px){
	footer > div > div.timetable {
		float: none;
		width: 100%;
		margin-bottom: 4rem;
	}
}
@media only screen and (max-width: 375px){
	footer > div > div.timetable table,
	footer > div > div.timetable p{
		font-size: 1.4rem;
	}
}
/* アクセス・地図
------------------------------------------------------------*/
footer > div > div.access {
	float: right;
	width: 48%;
	box-sizing: border-box;
}
footer > div > div.access p {
	line-height: 1.8;
}
footer > div > div.access p.map {
}
footer > div > div.access p.map img {
	height: auto;
	max-width: 100%;
}
footer > div > div.access p.tel {
	margin-bottom: 1rem;
	font-size: 2.2rem;
}
footer > div > div.access p.tel::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f8d3";
	font-size: 1.6rem;
}
footer > div > div.access ul li {
	display: inline-block;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
footer > div > div.access ul li a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background: #56C0D3;
	border-radius: 5px;
	color: #FFF;
	font-size: 1.6rem;
	text-decoration: none;
}
footer > div > div.access ul li a::before {
	margin-right: 0.5em;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
footer > div > div.access ul li:nth-of-type(1) a::before {
	content: "\f554";
}
footer > div > div.access ul li:nth-of-type(2) a::before {
	content: "\f5a0";
}
footer > div > div.access ul li a::after {
	margin-left: 0.5em;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
}
footer > div > div.access ul li a:hover {
	animation: up 0.5s linear 1 0s normal;
}
@media only screen and (max-width: 480px){
	footer > div > div.access ul li {
		width: 100%;
		text-align: center;
	}
	footer > div > div.access ul li a {
		display: block;
	}
}
@media only screen and (max-width: 767px){
	footer > div > div.access {
		float: none;
		width: 100%;
	}
}
/* Nav
------------------------------------------------------------*/
footer nav.bottom {
	padding-top: 3rem;
}
footer nav.bottom ul {
	text-align: center;
}
footer nav.bottom ul li {
	display: inline-block;
	padding: 0 1rem;
}
footer nav.bottom ul li:not(.home)::after {
	margin-left: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
}
/* COPYRIGHT
------------------------------------------------------------*/
footer + small {
	display: block;
	padding: 1.5rem 0;
	/*background: #333;*/
	background: #56C0D3;
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}
@media only screen and (min-width: 769px){
	/*footer > div > div.access p br {
		display: none;
	}*/
}
@media screen and (max-width: 768px){
	footer + small {
		padding-bottom: 73px;
	}
}

/************************************************************
	Page Index
*************************************************************/
ol#page-index {
	width: 80%;
	margin: 0 auto 4rem auto;
	box-sizing: border-box;
	text-align: center;
}
ol#page-index li {
	display: inline-block;
	margin-bottom: 2rem;
	padding: 0 0.5em;
	box-sizing: border-box;
}
ol#page-index li a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background: #56C0D3;
	border-radius: 5px;
	color: #FFF;
	text-decoration: none;
}
ol#page-index li a::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f078";
}
@media only screen and (max-width: 480px){
	ol#page-index li {
		width: 100%;
	}
	ol#page-index li a {
		display: block;
	}
}

/************************************************************
	HOME
*************************************************************/
/* Main Visual / Common
------------------------------------------------------------*/
@media all and (min-width: 769px){
	.home #main-desktop {
		display: block;
	}
	.home #main-mobile {
		display: none;
	}
}
@media screen and (max-width: 768px){
	.home #main-desktop {
		display: none;
	}
	.home #main-mobile {
		display: block;
	}
}
/* Main Visual / Desktop
------------------------------------------------------------*/
/* sunset */
.home #main-desktop.sunset {
	width: 100%;
	height: 600px;
	margin-bottom: 8rem;
	position: relative;
	background-image: url("https://www.somon-clinic.com/images/home/main-sunset-dt.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.home #main-desktop.sunset p {
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	padding: 2rem;
	background: rgb(255, 255, 255, 0.7);
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 3.6rem;
}
.home #main-desktop.sunset p span {
	font-size: 4.6rem;
	font-weight: bold;
	color: #39B7CD;
}
.home #main-desktop.sunset p b {
	font-size: 4.6rem;
	font-weight: bold;
	color: #FF6F76;
}
@media only screen and (min-width: 1000px) and (max-width: 1299px) {
	.home #main-desktop.sunset p {
		left: 3%;
		font-size: 3rem;
	}
	.home #main-desktop.sunset p span {
		font-size: 4rem;
	}
	.home #main-desktop.sunset p b {
		font-size: 4rem;
	}
}
@media only screen and (min-width: 769px) and (max-width: 999px) {
	.home #main-desktop.sunset {
		height: 500px;
	}
	.home #main-desktop.sunset p {
		left: 2%;
		font-size: 2.6rem;
		line-height: 1.4;
	}
	.home #main-desktop.sunset p span {
		font-size: 3.4rem;
	}
	.home #main-desktop.sunset p b {
		font-size: 3.4rem;
	}
}
/* dark */
.home #main-desktop.dark {
	width: 100%;
	height: 600px;
	margin-bottom: 8rem;
	position: relative;
	background-image: url("https://www.somon-clinic.com/images/home/main-dark-dt.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
}
.home #main-desktop.dark p {
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	padding: 2rem;
	box-sizing: border-box;
	font-size: 3.6rem;
	color: #FFF;
}
.home #main-desktop.dark p span {
	font-size: 4.6rem;
	font-weight: bold;
	color: #39B7CD;
}
.home #main-desktop.dark p b {
	font-size: 4.6rem;
	font-weight: bold;
	color: #FF6F76;
}
@media only screen and (min-width: 769px) and (max-width: 999px) {
	.home #main-desktop.dark {
		height: 500px;
	}
	.home #main-desktop.dark p {
		left: 5%;
		font-size: 3.2rem;
		line-height: 1.4;
	}
	.home #main-desktop.dark p span,
	.home #main-desktop.dark p b {
		font-size: 4.2rem;
	}
}
@media only screen and (min-width: 1400px){
	.home #main-desktop.dark p {
		left: 15%;
	}
}
/* Main Visual / Mobile
------------------------------------------------------------*/
#main-mobile {
	margin-bottom: 10rem;
	position: relative;
}
#main-mobile img {
	display: block;
	height: 400px;
	object-fit: cover;
	width: 100%;
}
#main-mobile p {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	padding: 1.5rem;
	background: rgb(0, 0, 0, 0.8);
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 2.2rem;
	line-height: 1.4;
	text-align: center;
	color: #FFF;
}
#main-mobile p span {
	font-size: 2.6rem;
	font-weight: bold;
	color: #39B7CD;
}
#main-mobile p b {
	font-size: 2.6rem;
	font-weight: bold;
	color: #FF6F76;
}
/* Intro
------------------------------------------------------------*/
.home #intro {
}
.home #intro h1 {
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}
.home #intro p {
	margin-bottom: 2rem;
	text-align: center;
}
.home #intro p.bld {
	font-weight: bold;
	color: #FF6F76;
}
@media only screen and (max-width: 480px){
	.home #intro h1 {
		font-size: 2.2rem;
	}
	.home #intro p {
		text-align: left;
	}
}
/* About
------------------------------------------------------------*/
.home #about {
}
.home #about ul {
}
.home #about ul li {
	position: relative;
	width: 100%;
	margin-bottom: 2rem;
	text-align: center;
}
.home #about ul li img {
	height: 200px;
	max-width: 800px;
	width: 100%;
	vertical-align: bottom;
	object-fit: cover;
	filter: brightness(70%);
	transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
.home #about ul li a {
	text-decoration: none;
}
.home #about ul li a span {
	margin:0;
	padding:0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 300px;
	font-size: 3rem;
	line-height: 1;
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
}
.home #about ul li a span:after {
	margin-left: 1rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
	color: #FFF;
	text-shadow: 1px 1px 1px #000;
}
@media only screen and (min-width: 1200px){
	.home #about ul li {
		overflow: hidden;
	}
	.home #about ul li:hover img {
		transition: transform 0.5s linear;
		transform: scale(1.2);
		filter: brightness(100%);
	}
}
@media only screen and (min-width: 768px){
	.home #about ul li {
		float: left;
		width: 49%;
		margin: 0 2% 2% 0;
	}
	.home #about ul li:nth-child(2n) {
		margin-right: 0;
	}
	.home #about ul li:nth-child(2n+1) {
		clear: both;
	}
}
/* Books
------------------------------------------------------------*/
.home #books {
}
.home #books ul {
	display: flex;
	flex-wrap: wrap;
}
.home #books ul li {
	width: calc(100% / 6);
	padding: 0 1.5rem;
	box-sizing: border-box;
}
.home #books ul li img {
	display: block;
	max-height: 200px;
	max-width: 100%;
	margin: 0 auto 1rem auto;
}
.home #books ul li dl {
	margin-bottom: 2rem;
}
.home #books ul li dl dt {
}
.home #books ul li dl dd {
}
.home #books p {
	text-align: center;
}
.home #books p a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background: #56C0D3;
	border-radius: 5px;
	color: #FFF;
	text-decoration: none;
}
.home #books p a::after {
	margin-left: 0.5em;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
}
@media only screen and (min-width: 769px) and (max-width: 1199px) {
	.home #books ul li {
		width: calc(100% / 4);
	}
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.home #books ul li {
		width: calc(100% / 3);
	}
}
@media only screen and (max-width: 480px){
	.home #books ul li {
		width: calc(100% / 2);
	}
}

/************************************************************
	院長紹介
*************************************************************/
.doctor {
}
.doctor #greet {
}
.doctor #greet p.img {
	float: right;
}
.doctor #greet p.img img {
	height: auto;
	max-width: 300px;
	margin: 0 0 1rem 3rem;
	border-radius: 10px;
}
@media only screen and (max-width: 600px){
	.doctor #greet p.img {
		margin-bottom: 2rem;
		float: none;
		text-align: center;
	}
	.doctor #greet p.img img {
		margin: 0 0 1rem 0;
	}
}

.doctor #greet p.img span {
	display: block;
	text-align: center;
}
.doctor #greet p:not(.img) {
	margin-bottom: 2rem;
}
.doctor #greet p.link::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f138";
}
.doctor #greet h3 + img{
	display: block;
	margin: 0 auto 6rem auto;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	object-fit: cover;
}
@media only screen and (max-width: 767px){
	.doctor #greet h3 br {
		display: none;
	}
}
@media only screen and (max-width: 414px){
	.doctor #greet h3 + img{
		width: 300px;
		height: 300px;
	}
}
@media only screen and (max-width: 320px){
	.doctor #greet h3 + img{
		width: 240px;
		height: 240px;
	}
}

.doctor #profile {
}
.doctor #profile dl {
}
.doctor #profile dl dt {
	float: left;
	width: 8em;
}
.doctor #profile dl dd {
	margin-left: 9em;
	margin-bottom: 4rem;
	padding-left: 1em;
	border-left: 1px solid #56C0D3;
}
.doctor #profile dl dd div {
	margin: 2rem 0;
	padding: 1rem;
	border: 1px dotted #CCC;
	box-sizing: border-box;
}
@media only screen and (max-width: 480px){
	.doctor #profile dl dt {
		float: none;
		width: 100%;
		margin-bottom: 1rem;
		padding: 1rem;
		border: 1px solid #56C0D3;
		box-sizing: border-box;
		text-align: center;
	}
	.doctor #profile dl dd {
		margin-left: 0;
		margin-bottom: 4rem;
		padding-left: 0;
		border-left: none;
	}
}

/************************************************************
	クリニック紹介
*************************************************************/
.clinic {
}
.clinic dl.message {
	margin-bottom: 6rem;
	text-align: center;
}
.clinic dl.message dt {
	font-size: 3.2rem;
	font-weight: bold;
	color: #56C0D3;
}
.clinic dl.message dd {
	font-size: 2.4rem;
	font-weight: bold;
}

.clinic section dl {

}
.clinic section dl dt {
	float: left;
	width: 12em;
	font-weight: bold;
}
.clinic section dl dt span {
	padding-left: 0.5rem;
	font-size: 1.4rem;
	font-weight: normal;
}
.clinic section dl dd {
	margin-left: 13em;
	margin-bottom: 4rem;
	padding-left: 1em;
	border-left: 1px solid #56C0D3;
}
.clinic section dl dd p.notice {
	color: #FF6666;
}
.clinic section dl dd p.recommend {
	margin: 1rem 0;
	font-weight: bold;
}
.clinic section dl dd p.recommend + ul li {
	margin-bottom: 1rem;
}
.clinic section dl dd p.recommend + ul li a {
	color: #56C0D3;
	text-decoration: underline;
}
.clinic section dl dd p.recommend + ul li a::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f138";
}

.clinic section#fee dl dd {
	font-size: 2rem;
}
.clinic section#fee dl dd span {
	padding-left: 0.5rem;
	font-size: 1.4rem;
	font-weight: normal;
}
.clinic section#fee dl dd span.bl {
	display: block;
	padding-left: 0;
}
.clinic section#fee div {
	padding: 2rem;
	border: 1px solid #CCC;
	box-sizing: border-box;
}
.clinic section#fee div h4 {
	font-weight: bold;
}
.clinic section#fee div h4:last-of-type {
	margin-top: 2rem;
}
@media only screen and (max-width: 768px){
	.clinic dl.message {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (max-width: 480px){
	.clinic dl.message dt {
		font-size: 2.6rem;
	}
	.clinic dl.message dd {
		font-size: 2rem;
	}
	.clinic section dl dt {
		float: none;
		width: 100%;
		margin-bottom: 1rem;
		padding: 1rem;
		border: 1px solid #56C0D3;
		box-sizing: border-box;
		text-align: center;
	}
	.clinic section dl dd {
		margin-left: 0;
		margin-bottom: 4rem;
		padding-left: 0;
		border-left: none;
	}
}

/************************************************************
	アクセス
*************************************************************/
.access {
}
.access #map {
}
.access #map p.img {
	margin-bottom: 3rem;
	text-align: center;
}
.access #map p.img img {
	height: auto;
	max-width: 800px;
	width: 100%;
	border: 1px solid #CCC;
}
.access #map p.img span {
	display: block;
}
.access #map p.btn {
	text-align: center;
}
.access #map p.btn a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background: #56C0D3;
	/*box-shadow: 0px 4px #142243;*/
	border-radius: 5px;
	color: #FFF;
	font-size: 1.6rem;
	text-decoration: none;
}
.access #map p.btn a::before {
	margin-right: 0.5em;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f5a0";
}
.access #map p.btn a::after {
	margin-left: 0.2em;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f35d";
}
.access #map p.btn a:hover {
	animation: up 0.5s linear 1 0s normal;
}
/* APP
------------------------------------------------------------*/
.access #map #app {
	margin-top: 3rem;
}
.access #map #app p {
	margin-bottom: 2rem;
	color: #FF6F76;
}
.access #map #app ul li {
	width: 80%;
	max-width: 300px;
    margin: 0 auto 2.5rem auto;
	border: 1px solid #000;
	text-align: center;
}
.access #map #app ul li a {
    display: block;
	padding: 1.8rem 0;
	font-size: 1.4rem;
	font-weight: bold;
    text-decoration: none;
	color: #000;
}
.access #map #app ul li a::after {
	margin-left: 1rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f105";
}
.access #map #app ul li a::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f85a";
}
/* ROUTE
------------------------------------------------------------*/
.access .route ol.onfoot {
}
.access .route ol.onfoot li {
	position: relative;
	margin-bottom: 3rem;
	padding: 0 3rem;
	float: left;
	box-sizing: border-box;
}
.access .route ol.onfoot li:not(:last-of-type)::after {
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	right: 0;
	content: "\f356";
	color: #56C0D3;
	font-size: 3rem;
}
.access .route ol.onfoot li div.route {
	position: relative;
	overflow: hidden;
	vertical-align: bottom;
}
.access .route ol.onfoot li div.route img {
	display: block;
	height: auto;
	width: 100%;
	margin: 0 0 1rem 0;
}
.access .route ol.onfoot li div.route div.caption span {
	position: absolute;
	top: 30px;
	left: -50px;
	width: 180px;
	padding: 0.5rem 1rem;
	background: #56C0D3;
	color: #FFF;
	text-align: center;
	transform: rotate(-45deg);
}
.access .route ol.onfoot li p {
	font-size: 1.6rem;
}
@media only screen and (min-width: 900px){
	.access .route ol.onfoot li {
		width: calc(100% / 3);
	}
	.access .route ol.onfoot li:nth-child(3n+1) {
		clear: both;
	}
}
@media only screen and (max-width: 899px){
	.access .route ol.onfoot li {
		width: calc(100% / 2);
	}
	.access .route ol.onfoot li:nth-child(3n+1) {
		clear: none;
	}
	.access .route ol.onfoot li:nth-child(2n+1) {
		clear: both;
	}
	.access .route ol.onfoot li div.route div.caption span {
		top: 20px;
		left: -60px;
		width: 160px;
		padding: 0.3rem 1rem;
		font-size: 1.2rem;
	}
}
@media only screen and (min-width: 1200px){
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 180px;}
}
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 150px;}
}
@media only screen and (min-width: 900px) and (max-width: 999px) {
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 130px;}
}
@media only screen and (min-width: 800px) and (max-width: 899px) {
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 150px;}
}
@media only screen and (min-width: 700px) and (max-width: 799px) {
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 140px;}
}
@media only screen and (min-width: 481px) and (max-width: 698px) {
	.access .route ol.onfoot li:not(:last-of-type)::after {	top: 120px;}
}
@media only screen and (max-width: 480px){
	.access .route ol.onfoot li {
		width: 100%;
	}
	.access .route ol.onfoot li:not(:last-of-type)::after {
		display: block;
		content: "\f063";
		position: relative;
		text-align: center;
	}
}

/************************************************************
	執筆書籍
*************************************************************/
.books {
}
.books section {
	margin-bottom: 12rem;
}
.books section h3 {
	margin-top: -3rem;
	margin-bottom: 4rem;
	font-size: 2.8rem;
	font-weight: bold;
    color: #56C0D3;
	line-height: 1.4;
}
@media only screen and (max-width: 480px){
	.books section h3 {
		font-size: 2.2rem;
	}
	.books section h3 br {
		display: none;
	}
}
.books section p.img {
	margin-bottom: 2rem;
	text-align: center;
}
.books section p.img {
	height: auto;
	max-width: 100%;
}
.books section table {
	width: 400px;
	margin: 0 auto 2rem auto;
	border-collapse: collapse;
	border-spacing: 0;
}
.books section table th {
	padding: 0.5rem;
	background: #F0F0F0;
	border: 1px solid #F0F0F0;
}
.books section table td {
	padding: 0.5rem;
	border: 1px solid #F0F0F0;
}
.books section h4 {
	margin: 4rem 0 2rem;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	color: #56C0D3;
}
.books section h4::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 900;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f02d";
}
.books section ol {
	margin-bottom: 4rem;
}
.books section ol li {
	margin-bottom: 1rem;
}
.books section div.purchase {
	padding: 2rem;
	border: 2px solid #CCC;
	box-sizing: border-box;
}
.books section div.purchase h5 {
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	color: #56C0D3;
}
.books section div.purchase h5::before {
	margin-right: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f788";
}
.books section div.purchase p {
	margin-bottom: 1rem;
	font-weight: bold;
	text-align: center;
}
.books section div.purchase ul {
	text-align: center;
}
.books section div.purchase ul li {
	display: inline-block;
	margin-bottom: 2rem;
	padding: 0 0.5em;
	box-sizing: border-box;
}
.books section div.purchase ul li a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background: #56C0D3;
	border-radius: 5px;
	color: #FFF;
	text-decoration: none;
}
.books section div.purchase ul li a::after {
	margin-left: 0.5rem;
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: "\f35d";
}
@media only screen and (max-width: 480px){
	.books section table {
		width: 100%;
	}
	.books section div.purchase ul li {
		width: 100%;
	}
	.books section div.purchase ul li a {
		display: block;
	}
}

/************************************************************
	厳選図書
*************************************************************/
.recommend {
}
.recommend section table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
	border-spacing: 0;
}
.recommend section table th {
	padding: 2rem 0.5rem;
	border: 1px solid #F0F0F0;
	background: #EEF9FB;
	text-align: center;
}
.recommend section table tr.head th {
	padding: 1rem 0.5rem;
	background: #56C0D3;
	color: #FFF;
}
.recommend section table td {
	padding: 2rem 0.5rem;
	border: 1px solid #F0F0F0;
}
.recommend section table td span {
	display: block;
	margin-top: 1rem;
	padding-left: 1em;
	font-size: 1.6rem;
}
@media only screen and (max-width: 480px){
	.recommend section table {
		font-size: 1.6rem;
	}
	.recommend section table td span {
		font-size: 1.4rem;
	}
}
@media only screen and (max-width: 415px){
	.recommend section table {
		font-size: 1.5rem;
	}
	.recommend section table td span {
		font-size: 1.3rem;
	}
}

/************************************************************
	エラー
*************************************************************/
.error .inner {
	margin-top: 10rem;
}
.error .inner h1 {
	margin-bottom: 2rem;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}

/************************************************************
	 Extensions
*************************************************************/
/* PAGE TOP
--------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	font-size: 1.4rem;
	line-height: 1.2;
	z-index: 999;
}
#page-top a {
	display: block;
	padding: 1.5rem;
	opacity: 0.7;
	border-radius: 5px;
	background: #000;
	text-decoration: none;
	color: #fff;
	text-align: center;
}
#page-top a:hover {
	opacity: 0.5;
	transition: 0.5s ease-in-out;
	text-decoration: none;
}
#page-top a span {
	display: block;
}
@media only screen and (max-width: 768px){
	#page-top {
		bottom: 8rem;
		right: 1rem;
	}
	#page-top a {
		padding: 1.2em 0.5em;
		font-size: 1.4rem;
	}
	#page-top a:before {
		margin-right: 0.2rem;
		font-family: "Font Awesome 5 Pro";
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		content: "\f341";
	}
	#page-top a span {
		display: none;
	}
}
/* パンくず
--------------------------------------------------------*/
div#breadcrumbs {
	padding: 3rem 0;
	width: 100%;
}
p#breadcrumbs {
	margin: 0 auto;
	width: 1200px;
	font-size: 1.4rem;
	line-height: 1.6;
}
p#breadcrumbs a {
	margin: 0 1rem;
}
p#breadcrumbs > span > span > a {
	margin-left: 0 !important;
}
p#breadcrumbs span.breadcrumb_last {
}
@media only screen and (max-width: 1199px){
	p#breadcrumbs {
		width: 100%;
		padding: 0 1rem;
		box-sizing: border-box;
	}
}
@media only screen and (max-width: 768px){
	div#breadcrumbs {
		padding: 8rem 0 2.5rem 0;
	}
	p#breadcrumbs {
		font-size: 1.2rem;
	}
}

/************************************************************
	ソーシャルサービス
*************************************************************/
/* YouTube
--------------------------------------------------------*/
.YouTube  {
	margin-bottom: 1em;
	overflow: hidden;
	position: relative;
	/* paddingで高さを出している */
	height: 0;
	padding-top:30px;
	padding-bottom:56.25%;
}
.YouTube iframe,
.YouTube object,
.YouTube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Google Map
--------------------------------------------------------*/
.google-maps {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/********************************************************
	Animation
*********************************************************/
@keyframes up {
	0%, 100% { transform: translateY(0px);}
	50% { transform: translateY(-5px);}
}