@charset "UTF-8";

/*=======================================
■■■基本CSS　目次■■■
スタイルの初期化
基本設定
アニメーション
印刷設定
コーディング制作用
=======================================*/

/*──────────────────────────
スタイルの初期化
──────────────────────────*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure, hr {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
}
main {
	display: block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
img, iframe {
	border:none;
	vertical-align: bottom;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ul, li, ol, dl {
	list-style: none;
}
th, td {
	vertical-align: top;
	font-weight: normal;
	text-align: left;
}
caption {
	text-align: left;
}
fieldset {
	border: none;
}
select {
	color: #222;
}
input, textarea {
	font-size: 1em;
}
i, em, address, dfn {
	font-style: normal;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	/*outline: none;	フォーカス時の装飾*/
	appearance: none;
	-webkit-appearance: none;
}
hr {
	border: none;
}


/*──────────────────────────
基本設定
──────────────────────────*/
body, input, textarea, select, button {
	/*「Noto Sans」はGoogleフォント*/
	font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
body{
	font-weight: 400;
	color: #222;
	font-feature-settings: "palt";	/*字詰め*/
	
	/*スマホで文字サイズ変更防止*/
	-webkit-text-size-adjust: 100%;
	
	/*文字の滑らかOff*/
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
	
	/*文字の滑らかOn*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
p {
	line-height: 1.8em;
}
a {
	color: #05c;
	text-decoration: none;

	/*クリック時のハイライトカラー無効化*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:hover {
	color: #05c;
	text-decoration: underline;
}

/*　フロート解除　*/
.cf::before, .cf::after {
	content: "";
	display: table;
}
.cf::after {
	clear: both;
}

/*　CSS無効時の区切り線　*/
hr.border {
	display: none;
}

/*　JavaScript無効時のメッセージ　*/
noscript {
	position: fixed;
	z-index: 500;
	top: 0;
	width: 100%;
	padding: 7px;
	background-color: rgba(0,0,0,0.7);
	font-size: 0.9em;
	color: #fff;
	text-align: center;
	display: block;
}


/*──────────────────────────
アニメーション
──────────────────────────*/
/*　フェードイン（JS読込みまで透過） */
@-webkit-keyframes fadeInJS { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInJS { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }

/*　変化時間　*/
#drawer.open .at05s, 	/*JSでopen付与*/
.time05s {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}
.time10s {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1.0s;
	animation-duration: 1.0s;
}
.time15s {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
}
.time20s {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 2.0s;
	animation-duration: 2.0s;
}
.time100s {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 10.0s;
	animation-duration: 10.0s;
}

/*　遅延時間　 */
#drawer.open .aw05s, 	/*JSでopen付与*/
.wait05s {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
#drawer.open .aw06s, 	/*JSでopen付与*/
.wait06s {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
#drawer.open .aw07s, 	/*JSでopen付与*/
.wait07s {
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
#drawer.open .aw08s, 	/*JSでopen付与*/
.wait08s {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
#drawer.open .aw09s, 	/*JSでopen付与*/
.wait09s {
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
#drawer.open .aw10s, 	/*JSでopen付与*/
.wait10s {
	-webkit-animation-delay: 1.0s;
	animation-delay: 1.0s;
}
#drawer.open .aw11s, 	/*JSでopen付与*/
.wait11s {
	-webkit-animation-delay: 1.1s;
	animation-delay: 1.1s;
}
#drawer.open .aw12s, 	/*JSでopen付与*/
.wait12s {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
#drawer.open .aw13s, 	/*JSでopen付与*/
.wait13s {
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
}
.wait15s {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
.wait17s {
	-webkit-animation-delay: 1.7s;
	animation-delay: 1.7s;
}

/*　フェードイン（JS読込みまで透過） */
@-webkit-keyframes fadeInJS {
	0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeInJS {
	0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; }
}

/*　フェードイン　 */
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*　下→上へフェードイン　 */
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,50px,0);
		transform: translate3d(0,50px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,50px,0);
		transform: translate3d(0,50px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*　上→下へフェードイン　 */
#drawer.open .aniDown, 	/*JSでopen付与*/
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50px,0);
		transform: translate3d(0,-50px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-50px,0);
		transform: translate3d(0,-50px,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*　右→左へフェードイン　 */
.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50px,0,0);
		transform: translate3d(50px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50px,0,0);
		transform: translate3d(50px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*　左→右へフェードイン　 */
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px,0,0);
		transform: translate3d(-50px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px,0,0);
		transform: translate3d(-50px,0,0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

/*　右→左へスライドイン　 */
.slideInRight {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}
@-webkit-keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100px,0,0);
		transform: translate3d(100px,0,0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes slideInRight {
	0% {
		-webkit-transform: translate3d(100px,0,0);
		transform: translate3d(100px,0,0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
	}
}


/*──────────────────────────
印刷設定
──────────────────────────*/
@page {
	margin: 6mm;	/*　用紙の余白（効かないブラウザあり）*/
}
@media print {
	/*　強制的に背景を印刷（効かないブラウザあり）*/
	body { -webkit-print-color-adjust: exact; }
	
	/*　レイアウト（モバイルSafariの余白を考慮して印刷幅はMax1040px）*/
	.w1 {
		width: 1000px !important;
		margin: 0 auto !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	footer aside {
		right: 25px !important;
	}
	
	/*　ページ分割防止の要素（疑似要素の切れ防止）
	要素 {
		break-inside: avoid-column;
		page-break-inside: avoid;
	}
	*/
	
	/*　下層のページタイトル（アニメーション）*/
	body:not(#top) .pagetitle.js h1::before {
		opacity: 1 !important;
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;
	}
	body:not(#top) .pagetitle.js h1::after {
		width: 6em !important;
		opacity: 1 !important;
	}
	
	/*　横ラインの見出し（アニメーション）*/
	.hs1.js span {
		opacity: 1 !important;
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;
	}
	.hs1.js span::before, .hs1.js span::after {
		width: 120px !important;
		opacity: 1 !important;
	}
	
	/*　先頭へ戻るボタン　*/
	#page-top {
		top: 0 !important;
		opacity: 1 !important;
		-webkit-animation-name: none !important;	
		animation-name: none !important;
	}
	
	/*　上スクロール時の下部メニュー　*/
	#footer-menu {
		position: absolute !important;
	}
	#footer-menu ~ small {
		margin-bottom: 110px !important;	/*下部メニュー分のスペース確保*/
	}
	#footer-menu.hide {
		display: none !important;
	}
	#footer-menu.hide ~ small {
		margin-bottom: 0 !important;
	}
	#footer-menu a {
		width: 400px !important;
		padding-top: 110px !important;
		background-image: url(../img/common/ilst-tel01.png) !important;
	}
	
	/*　スライド画像　*/
	.slider {
		width: 100% !important;
		padding-top: 530px !important;
		background: url(../img/top/pic-slide01.jpg) 50% 50% no-repeat !important;
		background-size: cover !important;
	}
	.slider.js .slide1, .slider.js .slide2, .slider.js .slide3 {
		display: none !important;
	}
	.slick-prev, .slick-next {
		display: none !important;
	}
	
	/*　固定背景画像　*/
	.bgsec1, .bgsec1-no, .bgsec2, .bgsec2-no, .bgsec3, .bgsec3-no, .bgsec4, .bgsec4-no {
		background-attachment: scroll !important;
	}
	.bgsec1, .bgsec1-no {
		background: #234 url(../img/common/pic-bgsec01.jpg) 50% 50% no-repeat !important;
		background-size: cover !important;
	}
	.bgsec2, .bgsec2-no {
		background: #ffe url(../img/common/pic-bgsec02.jpg) 50% 50% no-repeat !important;
		background-size: cover !important;
	}
	.bgsec3, .bgsec3-no {
		background: #eff url(../img/common/pic-bgsec03.jpg) 50% 50% no-repeat !important;
		background-size: cover !important;
	}
	.bgsec4, .bgsec4-no {
		background: #eee url(../img/common/pic-bgsec04.jpg) repeat !important;
		background-size: 160px auto !important;
	}
	
	/*　パララックス（背景画像）*/
	.pxsec1 {
		background: rgba(0,0,0,0.02) url(../img/common/pic-pxsec01.jpg) 50% 30% no-repeat !important;
		background-size: cover !important;
	}
	.pxsec2 {
		background: rgba(0,0,0,0.02) url(../img/common/pic-pxsec02.jpg) 40% 50% no-repeat !important;
		background-size: cover !important;
	}
	.pxsec3 {
		background: rgba(0,0,0,0.02) url(../img/common/pic-pxsec03.jpg) 50% 90% no-repeat !important;
		background-size: cover !important;
	}
	.pxsec4 {
		background: rgba(0,0,0,0.02) url(../img/common/pic-pxsec04.jpg) 50% 50% repeat !important;
		background-size: 150px auto !important;
	}
	.pximg {
		display: none !important;
	}

	/*　電話ボタン・ドロワーメニュー・JS無効メッセージ　*/
	a[href^="tel:"].tel.sp, #drawer-btn, noscript {
		display: none !important;
	}
	#drawer {
		display: none !important;
	}
	body.open #drawer.open, #overlay.open, #close.open {
		position: absolute !important;
		display: block !important;
	}
	#drawer.open {
		width: 350px !important;
	}
	#overlay.open::after {
		content: "" !important;
		position: absolute !important;
		z-index: 1100 !important;
		left: 3% !important;
		bottom: 20px !important;
		width: 320px !important;
		height: 350px !important;
		background: url(../img/common/ilst-overlay.png) no-repeat !important;
		background-size: contain !important;
		opacity: 1 !important;
	}
}


/*──────────────────────────
コーディング制作用
body::after { position: fixed; z-index:100; top: 0; left: 0; min-width: 5em; padding: 0.5em; color: #fff; text-align: center; }
@media screen and (min-width: 981px) { body::after { content: "PC"; background: rgba(50,200,50,0.8); } }
@media screen and (min-width: 641px) and (max-width: 980px) { body::after { content: "タブレット"; background: rgba(50,150,200,0.8); } }
@media screen and (max-width: 640px) { body::after { content: "スマホ"; background: rgba(80,80,200,0.8); } }

/*──────────────────────────
動作チェック
aside { margin:50px 0; text-align: center; }
aside .w18 { background-color: #9dd; }
aside .w15 { background-color: #ddd; }
aside .w13 { background-color: #c99; }
aside .w11 { background-color: #e8c; }
aside .w10 { background-color: #9e5; }
header .info p.copy {background-color: #cdd;}
header .info p.hero {background-color: #ddd;}
header .info p.tester {background-color: #9de;}
#top .doctor li { background-color: #ddd; }
──────────────────────────*/