html{
	background: white;
}

#smile,
#fader,
main > div,
main .contents,
footer,
svg{
	display:none;
}



legend.topTitle{
	width:94%;
	margin-left:3%;
	height:63vw;
	position: relative;
	border-radius:0;
	top:2em;
	margin-bottom:2em;
	overflow: hidden !important;
}

legend.topTitle.first{
	margin-top: calc(50vh - 63vw/2 - 66px - 2em);
}


legend.topTitle img{
	border-radius:0;
}

#smile,
#fader{
	position: absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;	
	list-style: none;
	overflow: hidden;
}


#smile li,
#fader li{
	width:100%;
	height:100%;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

#smile img{
	height:63vw;
	object-fit: fill;
}

#fader img{
	width:100%;
	height:100%;
}

#fader::before{
	content:'';
	position:absolute;
	background: url("../img/smile.webp");
	width:100%;
	height:63vw;
	background-size:100% 63vw;
	z-index:1;
}


.welcome{
	position: absolute;
	width:100%;
	bottom:0;	
	text-align:left;
	z-index:100;
	opacity:0;
}
.welcome img{
	width:18vw;
}

/* sm */
@media (min-width: 568px) {
	legend.topTitle{
		margin-left:auto;
		margin-right:auto;
		margin-bottom:5em;
		/*contents 540px + 40px*/
		max-width:580px;
		height:380px;
		top:0;
	}
	
	legend.topTitle.first{
		margin-top: calc(50vh - 380px/2 - 128px);
	}
	
	#fader::before{
		height:380px;
		background-size:100% 380px;
	}
	#smile img{
		height:380px;
	}
	
	.welcome img{
		width:111px;
	}
}
@media(min-width: 768px) {
	legend.topTitle{
		/*contents 720px + 60px*/
		max-width:780px;
		height:520px;
		border-radius:0;
	}
	
	legend.topTitle.first{
		margin-top: calc(50vh - 520px/2 - 128px);
	}
		
	#fader::before{
		height:525px;
		background-size:100% 520px;
	}
	#smile img{
		height:520px;
	}

	.welcome img{
		width:122px;
	}
}
@media (min-width: 1024px) {
	legend.topTitle{
		/*contents 980px + 80px*/
		max-width:1060px;
		height:705px;
		border-radius:0;
	}
	
	legend.topTitle.first{
		margin-top: calc(50vh - 705px/2 - 128px);
	}
	
	#fader::before{
		height:705px;
		background-size:100% 705px;
	}
	#smile img{
		height:705px;
	}
}

/*		スマホだけのロゴ	*/
main .mobile-logo{
	margin:6em auto 3em auto;
	text-align:center;
}

main .mobile-logo img{
	width:auto;
	height:44px;
}

main .wrap{
	overflow:hidden;
}

main a.swip{
	position:relative;
}

main a.swip img.image{
	vertical-align: top;
	opacity:1 !important;
	transition:.3s all;	
}

main a.swip:hover img.image{
	transform:scale(1.11,1.11);
	transition:.3s all;
}

main a.swip img.icon{
	position:absolute;
	z-index:1;
	width:20vw !important;
	height:auto !important;
	margin-top:-10vw;
	left:50%;
	transform: translate(-50%,0)
}

/*		renewal 	*/
.re{
	position: relative;
}

.re .re_date{
	position: relative;		
	width:36%;
	margin:0 32%;
	z-index:1;
	border-radius: 0;
}

.re .re_pic{
	margin:0 0 3em 0;
}
.re img.re_pic{
	height:39vw;
}


.re .re_title{
	position: relative;
	width:86%;
	list-style: none;
	padding:0;
	margin:0 7%;
}

.re .re_title li{
	position: relative;
	width:100%;
	height:auto;
	
	margin-bottom:2.8em;
}

.re .re_title .re_title_01.marker_l::after,
.re .re_title .re_title_02.marker_l::after{
	height:3px;
	background:rgba(237, 81, 78);
}

.re .re_map{
	margin-top:1em;
}

main h1{
	font-size:1.6em;
	text-align:center !important;
	margin-bottom:1em;
	letter-spacing: 0;
}

main h1 small{
	font-size:0.7em;
}

 h2.barrier_free{
	 font-size:1.3em;
	text-align:center;
	 margin-bottom:3em;
}

.greeting h2{
	font-size:6vw;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	text-align:center;
	line-height:15vw;	
	margin:4vw 0 8vw 0;
}


.doctor h2{
	text-align:center;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;	
	font-size:1.15em;
	line-height: 2em;
}

.doctor img{
	height:77vw;
}

main .book {
	text-align:center;
}

main h3{
	margin-left:-0.5em;
}

main .book img{
	width:240px;
	border-radius:0;
	margin-bottom:2em;
}

main .book a{
	position: relative;
	padding-left:1em;
}

main .book a::before,
main .book a::after{
	content: "";
	display: inline-block;
	position:absolute;
	top:0.44em;
	left: 0;
	width: 4px;
	height: 4px;
	margin-right:0.5em;
	
	border-top: 2px solid rgb(0,0,0,.33);
	border-right: 2px solid rgb(0,0,0,.33);
	transform: rotate(45deg);
}

main .book a::after{
	left:5px;
}



.calendar{
	margin-bottom:1.5em;
}

.calendar table{
	margin-bottom:0.5em !important;
}

.calendar{
	text-align:center;
}

.calendar p{
	text-align:left;
}

.calendar h3{
	position: relative;
	z-index:1;
	display: inline-block;
	margin-bottom:2em;
}


.calendar h3::after{
	content: '';
	display:block;
	width:80%;
	position: absolute;
	height:10px;
	margin:-0.5em 10% 0.5em 10%;
	background-color:rgba(255,209,103,1);
	z-index:-1;
}




.calendar dl{
	margin-bottom:0.5em;
}

.calendar dt{
	width:7em;
	padding-top:0.2em;
}

.calendar dd{
	width: calc(100% - 7em);
	text-align:left;
}

.calendar dl.vertical{
	display: flex !important;
}

.calendar td.holiday, .calendar td.day{
	background-color:rgb(237, 81, 78) !important;
}


/*	カレンダー	*/
.calendar table{
	border:none;
}
.calendar tr{
	border:none;
	border-top:0.5px solid #ddd
}
.calendar thead tr:first-child{
	border:none;
}
.calendar th, .calendar td {
	border:none;
	border-right:0.5px solid #ddd;
}
.calendar th:nth-child(7n),
.calendar td:nth-child(7n){
	border-right:none;
}
.calendar th {
	text-align:center;
	padding-left:0;
	padding-right:0;
}
.calendar td {
	text-align:right;
	padding-right:0.5em;
	padding-left:0;
}
.calendar td.holiday {
	background-color:rgb(202, 60, 60);
	font-weight:bold;
	color:white
}
.calendar td.day {
	background-color:rgb(202, 60, 60);
	font-weight:bold;
	color:white
}
.calendar td.time {
	background-color:rgb(255,153,0);
	font-weight:bold;
	color:white;
}
.calendar tr.adjustment{
	display:none;
}

/* sm */
@media (min-width: 568px) {
	header, nav, .navbar_menu ul{
		background:transparent;
	}
	
	main .mobile-logo{
		display: none !important;
	}
	
	 h2.barrier_free{
		 margin-bottom:4em;
	}
	
	
	/*		renewal 	*/
	.re{
		margin-top:6.9em;
	}

	.re .re_pic{
		margin:0 0 3.6em 0;
	}
	.re img.re_pic{
		height:280px;
	}

	
	.re .re_title{
		width:76%;
		margin-left:12%;
	}
	
	.re .re_title li{
		margin-bottom:3.4em;	
	}

	.greeting h2{
		font-size:1.44em;
		line-height:3.4em;
		margin:1.5em 0 2.5em 0;	
	}
	
	main a.swip img.icon{
		width:4em !important;
		margin-top:-2em;
	}
	
	.doctor img{
		height:400px;
	}

	main .book {
		width:400px;
		text-align:left;
	}
	main .book img {
		width:100%;
	}
	
}

/* md */
@media(min-width: 768px) {

	/*		renewal 	*/
	
	.re{
		margin-top:5.25em;
	}
	
	.re .re_pic{
		margin:0 0 3.3em 0;
	}
	.re img.re_pic{
		height:300px;
	}

	.re .re_title{
		/*width:90%;
		margin-left:5%;*/
		width:80%;
		margin-left:10%;
	}
	
	.re .re_map{
		width:60%;
		margin-left:20%;
	}

	main a.swip img.icon{
		width:5em !important;
		margin-top:-2.5em;
	}
		
	.greeting h2{
		font-size:1.33em;
		margin:1.5em 0 3em 0;	
	}	
	.calendar tr.adjustment{
		display: table-row !important;
	}
	.doctor img{
		height:240px;
	}	
}

/* lg */
@media (min-width: 1024px) {
	
	 h2.barrier_free{
		 margin-bottom:5em;
	}

	/*		renewal 	*/
	.re{
		margin-top:7.2em;	/*	8.5em-2.5em*/
	}
		
	.re .re_pic{
		margin:0 0 3.3em 0;	
		height:350px;
	}
	.re .re_title{
		/*width:80%;
		margin-left:10%*/
		width:60%;
		margin-left:20%;
	}
	
	.re .re_title li{
		margin-bottom:3.4em;
	}
	.re .re_map{
		width:100%;
		margin-left:0;
	}

	.re p{
		margin-top:3em;
		margin-left:2em;
	}
	
	main a.swip img.icon{
		width:6em !important;
		margin-top:-3em;
	}
	
	.greeting h2{
		font-size:1.33em;
		margin:1.5em 0 3em 0;	
	}

	#this_month{
		margin-left:6em;
	}
	#next_month{
		margin-right:6em;
	}

	main .twitter{
		margin-left:6em;
		margin-right:6em;
	}
	
	.doctor p{
		margin-left:2em;
	}
	.doctor img{
		width:calc(100% - 2em);
	}
	
	.welcome img{
		margin-left:2em;
		width:133px;
	}
	
}



/*	short_cut 		*/

main .full-wrap{
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,153,0,1) 44%, rgba(255,153,0,1) 100%);
	padding-top:3em;
	margin-bottom:3em;
}


main ul.short_cut{
	list-style:none;
	padding:0;
	text-align:center;
	margin:0 1.5em 3em 1.5em;
}

main ul.short_cut h3{
	font-size:1em;
	font-weight: normal;
	padding:inherit !important;
	margin:inherit !important;
	line-height: 1em;
	display:inline;
}

main ul.short_cut li.card{
	padding:0;
	margin-bottom:2em;
	box-shadow: 0 3rem 3rem -1.5rem hsl(25 75% 25% / 25%);
	background:white;
}

main .short_cut ul li{
	margin:0;
	height:2.4em;
}

main ul.short_cut li.card img{
	height:250px;
	width:100%;
	border-radius:0;
}

main ul.short_cut li.card a{
	text-decoration: none;
	opacity: 1 !important;
	height:100%;
	display:block;
	box-sizing:inherit !important;
	color:rgb(75,74,73) !important;	
}

main .short_cut b{
	display:inline-block;
	letter-spacing: 0.2em;
	margin:0.25em 0 0.75em 0;
	position: relative;	
	z-index:1;	
}

main ul.short_cut b.marker_b:after{
	width:80%;
	margin-top:-0.8em;
	background-color:rgba(255,209,103,1);
}


main .short_cut ul {
	padding:0 0 1em 1em;
	margin:0;
	list-style: none;
	text-align:left;
}

main .short_cut ul li{
	margin:0;
	height:2.4em;	
}

main .short_cut ul li::before{
	content: "";
	display: inline-block;
	position: relative;
	top: -2px;
	left: 0;
	width: 4px;
	height: 4px;
	margin-right:0.5em;
	
	border-top: 2px solid rgb(255,153,0,.66);
	border-right: 2px solid rgb(255,153,0,.66);
	transform: rotate(45deg);
}

main .short_cut ul.inline {
	letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}

main .short_cut ul.inline li{
	display:inline-block;
	margin-right:2em;
	letter-spacing:normal;
	vertical-align: top;
	height:2.4em;
}

main .short_cut .card:hover{
	transition: ease .3s;
	opacity:0.88;
	box-shadow: 0 1.5rem 1.5rem -1.5rem hsl(25 75% 25% / 25%);
}


@media (min-width: 568px) {
	
	main ul.short_cut{
		display:flex;
		margin:0 0 3em 0;
	}

	main ul.short_cut li.card{
		margin-right:1em;
		margin-bottom:1em;
		width:33%;
	}	
	
	main ul.short_cut li.card img{
		height:200px;
	}
	
	
	main ul.short_cut li:last-child{
		margin-right:0;
	}

	main .short_cut ul li{
		font-size:0.84em;
	}
	main .short_cut ul.inline li{
		margin-right:0.88em;
	}	
}
@media (min-width: 768px) {

	main .full-wrap{
		margin-bottom:6em;
	}

	main ul.short_cut{
		max-width:720px;
		margin:0 auto 1em auto;
	}
	main ul.short_cut li{
		margin-right:2em;
	}
	
	main .short_cut ul li{
		font-size:0.9em;
	}
	main .short_cut ul.inline li{
		margin-right:1em;
	}	
}

@media (min-width: 1024px) {
	main ul.short_cut{
		max-width:980px;
	}
	main .short_cut ul li{
		font-size:1em;
	}
	main .short_cut ul.inline li{
		margin-right:2em;
	}	
}

/*		wave 	*/
.waves {
	position:relative;
	width: 100%;
	height:20px;
	min-height:20px;
	margin-bottom:-7px; /*Fix for safari gap*/
}

@media (min-width: 568px) {
	.waves {
		height:25px;
		min-height:25px;
	}
}
@media (min-width: 768px) {
	.waves {
		height:30px;
		min-height:30px;
	}
}

/* Animation */

.parallax > use {
	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 14s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 21s;
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% { 
		transform: translate3d(85px,0,0);
	}
}


a.more{
	width:10em;
	font-size:0.88em;
	display: inline-block;
	text-decoration: none;

	border: 1px solid #bbb;
	
	padding: 4px 0;
	text-align:center;
	position: relative;
	opacity:1 !important;
	
	margin-bottom:2em;
}


a.more .sign:before {
    content: url(../img/more.svg);
    display: inline-block;
    vertical-align: top;
    width: 20px;
	height:10px;
	margin-top:-1.5px;
    padding-right:9px;
}

/* Effect1
*************************************** */
/* 擬似要素の共通スタイル */
a.more::after,
a.more::before,
.more_inner::after,
.more_inner::before {
	background-color: #696666;
	content: '';
	display: block;
	position: absolute;
	z-index: 10;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
/* 左上へ配置 */
a.more::after {
	width: 0px;
	height: 0.5px;
	top: -0.5px;
	left: -0.5px;
}
/* 右下へ配置 */
a.more::before {
	width: 0px;
	height: 0.5px;
	right: -0.5px;
	bottom: -0.5px;
}
/* 左下へ配置 */
.more_inner::after {
	width: 0.5px;
	height: 0px;
	left: -0.5px;
	bottom: -0.5px;
}
/* 右下へ配置 */
.more_inner::before {
	width: 0.5px;
	height: 0px;
	top: -0.5px;
	right: -0.5px;
}

/* hover */
a.more:hover::after,
a.more:hover::before {
	width: 100%;
	width: calc(100% + 0.5px);
}
a.more:hover .more_inner::after,
a.more:hover .more_inner::before {
	height: 100%;
	height: calc(100% + 0.5px);
}