html, body {
	margin: 0;
	padding: 0;
}
body {
	font-size: 16px;
	line-height: 1.7;
}

ul, li {
	margin: 0;
	padding: 0;
}
li {
	list-style-type: none;
	line-height: 0;
}


.btn img {
	vertical-align: top;
}

a[target="_blank"]::after {
	content: "\e914";
	font-family: "Hobonichi-Icons";
}

article {
	width: 93.75%;
	max-width:  720px;
	margin:  0 auto;
}

article > header {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

article > header a {
	display: block;
	max-width: 180px;
}

article > header a img,
article > header h1 img {
	width:  100%;
	vertical-align: bottom;
}


article > section {
	border-top: 1px solid #ccc;
}
article > section header p {
	text-align: center;
}

main ul {
	display: flex;
	flex-wrap: wrap;
}
main ul li {
	max-width: calc(360px - 16px);
	width: 100%;
	margin: 8px;
	box-sizing: border-box;
	background-color: #F2F2F2;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
	border-radius: 10px;
}
main ul li a {
	display: flex;
	align-items: flex-start;
	padding: 8px;
	height: 100%;
	box-sizing: border-box;
	position: relative;
}
main ul li a[target="_blank"]::after {
	position: absolute;
	right: 4px;
	bottom: 12px;
}
main ul li a > img {
	max-width: 67px;
}
main ul li a > div {
	margin-left: 8px;
}
main ul li a p {
	line-height: 1.5;
	margin:  0;
}

main > section {
	border-bottom: 1px solid #ccc;
}



main .darling {
	padding:  20px 0;
	display: flex;
	justify-content: center;
}
main .darling a {
	display: flex;
	align-items: center;
	transition: opacity 0.5s;
}
main .darling a[target="_blank"]::after {
	content: "";
}
main .darling a:hover {
	opacity: 0.5;
}
main .darling a .btn {
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	background-color: #FFE401;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
	border-radius: 10px;
	padding: 8px 24px 8px 8px;
	position: relative;
	z-index: 1;
}
main .darling a .btn img {
	width: 100%;
}
main .darling a p {
	font-size: 12px;
	line-height: 1.65;
	padding: 5px 5px 5px 10px;
	background-color: #F2F2F2;
	color: #000;
	border-radius: 0 10px 10px 0;
}
main .darling a p span {
	color: #0091d1;
}
main .darling a p span::after {
	content: "\e914";
	font-family: "Hobonichi-Icons";
}



main .dekirukoto {
	padding: 0px 0 40px;
	display: flex;
	justify-content: center;
}



main .matome {
	padding:  40px 0;
	display: flex;
	justify-content: center;
}
main .matome a {
	display: flex;
	transition: opacity 0.5s;
	align-items: flex-end;
	background-color: #F2F2F2;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
	border-radius: 10px;
	padding: 16px 48px;
}



main .deardoctors {
	padding:  40px 0;
	display: flex;
	justify-content: center;
	border-bottom: 0 none;
}
main .deardoctors a {
	display: block;
	transition: opacity 0.5s;
}
main .deardoctors a[target="_blank"]::after {
	content: "";
}
main .deardoctors a:hover {
	opacity: 0.5;
}
main .deardoctors a .btn {
	max-width: 254px;
}
main .deardoctors a .btn img {
	width: 100%;
}
main .deardoctors a p {
	background: #F2F2F2;
	border-radius: 0 0 10px 10px;
	color: #000;
	font-size: 12px;
	line-height: 1.65;
	padding: 21px 5px 5px 10px;
	margin: -16px auto 0;
	max-width: 240px;
	box-sizing: border-box;
}
main .deardoctors a p span {
	color: #0091d1;
}
main .deardoctors a p span::after {
	content: "\e914";
	font-family: "Hobonichi-Icons";
}




article > section footer p {
	text-align: center;
	font-size: 14px;
}



article > footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 40px;
}
article > footer ul li {
	line-height: 1.5;
}
article > footer ul:first-child {
	display: flex;
	align-items: flex-start;
}
article > footer ul:first-child li a {
	display: block;
	margin-right: 10px;
	font-weight: bold;
	transition: opacity 0.5s;
}
article > footer ul:first-child li a:link {
	color: #000;
}
article > footer ul:first-child li a:visited {
	color: #000;
}
article > footer ul:first-child li a:hover {
	opacity: 0.5;
}
article > footer ul:last-child li {
	max-width: 180px;
}
article > footer ul:last-child li img {
	width: 100%;
}


@media (max-width: 700px) {
	br:not(.sp) {
		display: none;
	}
	
	body {
		background: transparent url(../images/base_sp.gif);
		background-size: 20%;
	}
	article {
		padding: 0 10px;
		box-sizing: border-box;
		background: #fff;
	}

	article > header p {
		margin-top: 0;
	}
	article > section header p {
		text-align: left;
	}
	main ul li {
		max-width: 100%;
		margin: 6px 0;
	}
	main .darling a {
		flex-wrap: wrap;
	}
	main .darling a .btn {
		max-width: 100%;
		text-align: center;
	}
	main .darling a .btn img {
		max-width: 330px;
	}
	main .darling a p {
		margin: 0 auto;
		border-radius: 0 0 10px 10px;
	}
	main .matome a {
		padding: 16px;
	}
	article > footer {
		display: block;
	}
	article > footer ul:first-child {
		display: block;
		margin-bottom: 20px;
	}
}