@charset "UTF-8";


/* 赤　＝　#e50012　rgb(229,0,18) */
/* 背景　＝　#fbfaf8 */
/* ベージュ　＝　#fbe6d4　rgb(251,230,212) */
/* 黒　＝　#4d4545 */



/*===================================================================
　↓　共通
===================================================================*/
.red { color: #e50012; }
.font-l { font-size: 1.6rem !important; }

/* clearfix */
#header:after,
#container:after,
#contents:after,
.clearfix:after{
	content:" ";
	display:block;
	height:0;
	line-height:0;
	clear:both;
	visibility:hidden;
}
#header,
#container,
#contents,
.clearfix{
	display:inline-block;
	min-height:1%;
}

/* Hides from IE-mac */
* html #header,
* html #container,
* html #contents,
* html .clearfix{height:1%;}

#header,
#container,
#contents,
.clearfix{display:block;}

/* リンクテキスト */
a:link,
a:visited {
	text-decoration: none;
	color: #e50012;
}
a:hover {
	text-decoration: none;
}
a.over,.over {
    cursor: pointer;
}
.YuMincho {
	font-family: "游明朝", "YuMincho", serif;
    font-weight: 600;
}


/*===================================================================
　↓　各デバイスでの表示切り替え
===================================================================*/
.sp,
.tab {
	display: none;
}
.pc {
	display: block;
}

@media screen and (max-width: 768px) {
.sp,
.pc {
	display: none;
}
.tab {
	display: block;
}
}

@media screen and (max-width: 640px) {
.pc,
.tab {
	display: none;
}
.sp {
	display: block;
}
}


/*===================================================================
　↓　レイアウト＿全体
===================================================================*/
html,
body {
	font-size:62.5%; /*1rem=10px*/
	font-family: YakuHanJP, 'Lato', 'Noto Sans JP', sans-serif;
	color: #4d4545;
	background-color: #fbfaf8; 
	width: 100%;
	height: 100%;
    font-weight: 400;
    letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;/*←iOS、Safari向け。PC向けサイトをスマートフォンで閲覧した時に文字サイズが大きくならないようにする。*/
}



/*===================================================================
　↓　大枠レイアウト
===================================================================*/
html p {
    font-size: 1.4rem;
}
html a {
    font-size: 1.4rem;
}
html li {
    font-size: 1.4rem;
}
html table {
    font-size: 1.4rem;
}
html h1,
html h2,
html h3,
html h4,
html h5 {
    font-size: 1.4rem;
}
section {
    margin-top: 100px;
}

@media screen and (max-width: 768px) {
section {
    margin-top: 70px;
} 
}
@media screen and (max-width: 640px) {
section {
    margin-top: 40px;
} 
}

.mb10 { margin-bottom: 10px; }

/*===================================================================
　↓　header
===================================================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 90;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}
header.white {
    background-color: #fbfaf8;
}
header h1{
    display: inline-block;
    width: 390px;
    height: 49px;
    background-image: url(../img/header-logo-pc_01.png);
	  background-image: image-set(url(../img/header-logo-pc_01.png) 1x, url(../img/header-logo-pc_01@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    top: 10px;
    left: 10px;
    text-indent: -999999px;
}
header h1 a {
	display: block;
	background-image: url(../img/header-logo-pc_02.png);
	background-image: image-set(url(../img/header-logo-pc_02.png) 1x, url(../img/header-logo-pc_02@2x.png) 2x);
  background-repeat: no-repeat;
  background-position: right top;
	margin-left: 217px;
	width: 173px;
	height: 49px;
}
header .entry-btn {
    width: 120px;
    line-height: 80px;
    background-color: rgba(229,0,18,0.1);
    color: #e50012;/*赤*/
    font-size: 1.6rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
}
header .clinic-btn {
    width: 120px;
    line-height: 80px;
    background-color: #e50012;/*赤*/
    color: #fff;
    font-size: 1.6rem;
    position: absolute;
    top: 0;
    right: 120px;
    text-align: center;
}
@media screen and (max-width: 768px) {
header {
    background-color: #fff;
    height: 70px;
}
header h1{
    width: 300px;
    height: 50px;
    background-image: url(../img/header-logo-sp.png);
	background-size: contain;
    background-position: 0 0;
		top: 10px;
    left: 10px;
}
	header h1 a{
		display: none;
	}
header .entry-btn {
    line-height: 70px;
}
header .clinic-btn {
    line-height: 70px;
    right: 120px;
}
}
@media screen and (max-width: 640px) {
header h1{
    width: 300px;
    height: 50px;
    background-image: url(../img/header-logo-sp.png);
	background-size: contain;
    background-position: 0 0;
		top: 10px;
    left: 10px;
}
	header h1 a{
		display: none;
	}
header .entry-btn {
    width: 70px;
    font-size: 1.4rem;
    font-weight: 700;
}
header .clinic-btn {
    width: 70px;
    font-size: 1.4rem;
    right: 70px;
    font-weight: 700;
}
}




/*===================================================================
　↓　footer
===================================================================*/
footer p {
    line-height: 90px;
    background-color: #fff;
    text-align: center;
    color: #e50012;
    font-size: 1.2rem;
}
footer::after {
    content: "";
    display: block;
    height: 20px;
    width: 100%;
    background-color: #e50012;
}

@media screen and (max-width: 768px) {
footer p {
    line-height: 70px;
}
footer::after {
    height: 15px;
}
}

@media screen and (max-width: 640px) {
footer p {
    line-height: 50px;
    font-size: 1rem;
}
footer::after {
    height: 6px;
}
}



/*===================================================================
　↓　.normal-btn
===================================================================*/
.normal-btn {
    display: inline-block;
    max-width: 220px;
    width: 100%;
    line-height: 50px;
    height: 50px;
    font-size: 1.6rem;
    text-align: center;
    border: 1px solid #e50012;/*赤*/
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
    background-image: url(../img/yajirushi-w.png);
    background-repeat: no-repeat;
    background-size: 17px 10px;
    background-position: center right 10px;
}
.normal-btn:hover {
    background-position: center right 0;
    background-color: #faccd0;
    color: #e50012;/*赤*/
    border: 1px solid #faccd0;
    background-image: url(../img/yajirushi-r.png);
}



/*===================================================================
　↓　#loader（ローディング）
===================================================================*/
#loader {
    background-color: #fbfaf8;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#loader .loader-inn {
    position: fixed;
    z-index: 101;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 120px;
    margin: auto;
    text-align: center;
}
#loader .loader-inn img {
    width: 180px;
    height: auto;
    margin-bottom: 20px;
}
#loader .loader-inn span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px;
}
#loader .loader-inn span.first {
    animation: span-first 0.5s infinite;
}
#loader .loader-inn span.second {
    animation: span-second 0.5s infinite;
}
#loader .loader-inn span.third {
    animation: span-third 0.5s infinite;
}
@keyframes span-first {
    0% { background-color: rgba(229,0,18,1); }
    25% { background-color: rgba(229,0,18,0.6); }
    50% { background-color: rgba(229,0,18,0.2); }
    75% { background-color: rgba(229,0,18,0.6); }
    100% { background-color: rgba(229,0,18,1); }
}
@keyframes span-second {
    0% { background-color: rgba(229,0,18,0.6); }
    25% { background-color: rgba(229,0,18,1); }
    50% { background-color: rgba(229,0,18,0.6); }
    75% { background-color: rgba(229,0,18,0.2); }
    100% { background-color: rgba(229,0,18,0.6); }
}
@keyframes span-third {
    0% { background-color: rgba(229,0,18,0.2); }
    25% { background-color: rgba(229,0,18,0.6); }
    50% { background-color: rgba(229,0,18,1); }
    75% { background-color: rgba(229,0,18,0.6); }
    100% { background-color: rgba(229,0,18,0.2); }
}

