@charset "UTF-8";
/* CSS Document */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
    box-sizing: border-box;
}

body {
    line-height:1.4;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul ,li{
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* clearfix */
 
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
.clearfix { display: inline-table; }  
  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  

span, a, strong, small{
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
*{ box-sizing: border-box; }
html { font-size: 62.5%; }

body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #000;	
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.08em;
	text-align: justify;
}

.mincho{ font-family: "游明朝", YuMincho, yu-mincho-pr6n, serif; font-weight: 400; }
.optima{ font-family: Optima, 'Marcellus', serif; font-weight: 400; letter-spacing: 0.03em; }

/*** adobe使用フォント
Yu Mincho Pr6N R
font-family: yu-mincho-pr6n, serif;
font-weight: 400;
font-style: normal;

google
Marcellus R
font-family: 'Marcellus', serif;
font-weight: 400;
***/

a{ transition: .6s; }
a:hover{ opacity: .4; }
br{ line-height: inherit; }
p{ line-height: 2; }
span, a, strong, small{ color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }

.wrap{ width: 800px; margin: 0 auto; position: relative; }
.wrap.midium{ width: 900px; }
.row{ display: flex; justify-content: space-between; }

.linkwrap{ width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 10; }
.body-wrap{ overflow: hidden; position: relative; }

.sp{ display: none; }

.btn{ width: 30rem; height: 5rem; display: flex; align-items: center; padding-left: 2.5rem; border-radius: .5rem; background: linear-gradient(90deg, rgba(120,95,39,1) 0%, rgba(200,180,120,1) 100%); color: #fff; position: relative; }
.btn:after{ content: ''; width: .6rem; height: .6rem; border-right: solid 1px; border-bottom: solid 1px; position: absolute; top: 50%; right: 2.2rem; transform: translateY(-50%) rotate(-45deg); }

address{ font-size: 1.4rem; font-style: normal; line-height: 1.5; }

header{ width: 100%; height: 7rem; display: flex; align-items: center; padding-left: 2rem; padding-top: 3rem; margin-bottom: 2rem;}
header .logo{ display: block; line-height: 0; }

nav{ width: 40rem; height: 100vh; background: rgba(255, 255, 255, .98); position: fixed; top: 0; right: -40rem; z-index: 9990; padding: 10rem 5rem; overflow: scroll; transition: .5s; }
nav.active{ right: 0; }
nav .gnav li{ font-size: 1.6rem; text-align: center; }
nav .gnav li + li{ border-top: solid 1px #f2f2f2; }
nav .gnav li a{ display: block; padding: 1.2rem 0; }
nav .gnav li a small{ display: block; font-size: 1.2rem; color: #c8b48c; line-height: 1; }

.sec-contact{ display: flex; position: relative; }
.sec-contact:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 40px 80px 0 80px; border-color: #fff transparent transparent transparent; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.sec-contact > div{ width: 50%; color: #fff; padding: 7.5rem 0; }
.sec-contact > div .inner{ width: 45rem; padding-bottom: 9.5rem; position: relative; }
.sec-contact > div .inner h2{ font-size: 2.6rem; color: #ffffbe; text-align: center; height: 9.1rem; background: url(https://www.art-smile.com/images-implant/common/contact-ttl01.png) no-repeat center top/contain; padding-top: 1.3rem; margin-bottom: 1.5rem; }
.sec-contact > div .inner .contact-btn{ width: 45rem; height: 7rem; font-size: 2rem; font-weight: 700; background: #fff; display: flex; align-items: center; border-radius: .5rem; padding-left: 3rem; position: absolute; bottom: 0; box-shadow: 10px 10px 15px -5px rgba(0,0,0,0.25); }
.sec-contact > div .inner .contact-btn:after{ content: ''; width: .6rem; height: .6rem; border-right: solid 1px; border-bottom: solid 1px; position: absolute; top: 50%; right: 2.2rem; transform: translateY(-50%) rotate(-45deg); }
.sec-contact .left{ background: url(https://www.art-smile.com/images-implant/common/webp/contact-bg01.webp) no-repeat center/cover; }
.sec-contact .left .inner{ margin: 0 7rem 0 auto; }
.sec-contact .left .inner .contact-btn{ color: #141e64; }
.sec-contact .right{ background: url(https://www.art-smile.com/images-implant/common/webp/contact-bg02.webp) no-repeat center/cover; }
.sec-contact .right .inner{ margin-left: 7rem; }
.sec-contact .right .inner .contact-btn{ color: #3296aa; }

footer .sec-contact{ margin-bottom: 0rem; }

footer .banner-covid{ display: block; width: 80rem; line-height: 0; margin: 0 auto 10rem; }
footer .logo{ display: block; margin: 0 auto 1rem; }
footer .logo_txt{ display: block; font-size: .9em; margin: 0 auto 5rem; text-align: center;}
footer > .wrap{ margin-bottom: 10rem; }
footer > .wrap .left{ width: 32rem; }
footer > .wrap .left p:nth-of-type(1){ font-size: 1.4rem; line-height: 1.5; border-top: solid 1px #f2f2f2; border-bottom: solid 1px #f2f2f2; padding: .8em 0; margin-bottom: 2rem; }
footer > .wrap .left a.tel{ display: table; font-size: 3.8rem; color: #beaa78; line-height: 1; padding-left: 2.6rem; background: url(https://www.art-smile.com/images-implant/common/icon-tel01.png) no-repeat left bottom .6rem/1.84rem; margin-bottom: 1rem; }
footer > .wrap .left a.tel + p{ line-height: 1.5; font-size: 1.4rem; border-bottom: solid 1px #f2f2f2; padding-bottom: .8rem; margin-bottom: 2rem; }
footer > .wrap .right{ width: 43rem; }
footer > .wrap .right .map{ display: block; width: 100%; border-radius: .5rem; margin-bottom: 1.4rem; }
footer > .wrap .right .access-list{ margin-bottom: 3rem; }
footer > .wrap .right .access-list li{ font-size: 1.4rem; padding-left: 1em; position: relative; }
footer > .wrap .right .access-list li:before{ content: '・'; position: absolute; left: 0; }
footer > .wrap .right .access-list + .btn{ margin-left: auto; }

footer .bg-gray{ background: #f2f2f2; padding: 7.4rem 0 1rem; }
footer .bg-gray .wrap.row{ align-items: center; margin-bottom: 12.5rem; }
footer .sitemap ul + ul{ margin-left: 4rem; }
footer .sitemap ul li{ font-size: 1.3rem; color: #141e64; }
footer .sitemap ul li + li{ margin-top: .8em; }
footer .sitemap ul li a{ display: block; padding-right: 2rem; position: relative; }
footer .sitemap ul li a:after{ content: ''; width: .6rem; height: .6rem; border-right: solid 1px; border-bottom: solid 1px; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-45deg); }
footer .copy{ display: block; text-align: center; font-size: 1.2rem; color: #141e64; }

.hour-table{ width: 32rem; table-layout: fixed; font-size: 1.4rem; border-bottom: solid 1px #f2f2f2; }
.hour-table th{ width: 11.6rem; font-weight: 400; vertical-align: middle; text-align: right; padding-right: 1.7rem; }
.hour-table td{ text-align: center; vertical-align: middle; }
.hour-table thead{ background: #f2f2f2; }
.hour-table thead th{ height: 3rem; border-radius: .5rem 0 0 .5rem; }
.hour-table thead th span{ padding-left: 2.3rem; background: url(https://www.art-smile.com/images-implant/common/icon-time01.png) no-repeat left center/1.6rem; display: inline-block; line-height: 2; }
.hour-table thead td:last-of-type{ border-radius: 0 .5rem .5rem 0; }
.hour-table tbody tr:first-of-type > *{ padding-top: .8rem; }
.hour-table tbody tr:last-of-type > *{ padding-bottom: .8rem; }
.hour-table + p{ font-size: 1.4rem; margin-top: .4rem; }

.float-btn{ display: flex; position: fixed; top: 0; right: 8rem; z-index: 9978; letter-spacing: .05em; }
.float-btn li + li{ margin-left: 1rem; }
.float-btn li:nth-of-type(1) a{ width: 32rem; height: 5rem; display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, rgba(120,95,39,1) 0%, rgba(200,180,120,1) 100%); color: #fff; border-radius: 0 0 .5rem .5rem; }
.float-btn li:nth-of-type(1) a span{ padding-left: 2.7rem; background: url(https://www.art-smile.com/images-implant/common/icon-tel02.png) no-repeat left center/1.84rem; }
.float-btn li:nth-of-type(1) a span strong{ font-size: 2.4rem; margin-left: 1rem; }
.float-btn li:nth-of-type(2) a{ width: 14rem; height: 5rem; display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, rgba(20,30,100,1) 0%, rgba(20,30,100,1) 40%, rgba(67,75,131,1) 100%); color: #fff; border-radius: 0 0 .5rem .5rem; }
.float-btn li:nth-of-type(2) a span{ padding-left: 3.5rem; background: url(https://www.art-smile.com/images-implant/common/icon-consul01.png) no-repeat left center/2.6rem; }

.menu-btn{ position: fixed; top: 1.5rem; right: 2.5rem; z-index: 9991; cursor: pointer; }
.menu-btn .inner{ width: 3rem; height: 1.6rem; position: relative; margin: 0 auto .2rem; }
.menu-btn .inner span{ width: 100%; height: 1px; background: #141e64; position: absolute; left: 0; transition: .5s; }
.menu-btn .inner span:nth-of-type(1){ top: 0; }
.menu-btn .inner span:nth-of-type(2){ top: 50%; transform: translateY(-50%); }
.menu-btn .inner span:nth-of-type(3){ bottom: 0; }
.menu-btn.active .inner span:nth-of-type(1){ transform: translateY(8px) rotate(45deg); }
.menu-btn.active .inner span:nth-of-type(2){ opacity: 0; }
.menu-btn.active .inner span:nth-of-type(3){ transform: translateY(-7px) rotate(-45deg); }
.menu-btn > span{ display: block; font-size: 1.2rem; }


@media(max-width: 768px){
	html{ font-size: 2.66vw; }
	body{ font-size: 1.4rem; }
	p{ line-height: 2; }

	.pc{ display: none !important; }
	.sp{ display: initial; }

	.wrap{ width: 100%; padding-left: 2rem; padding-right: 2rem; }
	.wrap.midium{ width: 100%; }
	.row{ flex-wrap: wrap; }

	.btn.sp{ display: table; }
	.btn{ margin-left: auto; margin-right: auto; }

	header{ height: 6rem; padding-left: .7rem; }
	header .logo{ width: 26.8rem; }
	header .logo img{ width: 100%; }

	nav{ width: 22rem; right: -22rem; padding: 10rem 3rem 5rem; }
	nav .gnav li{ font-size: 1.4rem; }

	.sec-contact{ flex-wrap: wrap; }
	.sec-contact:after{ content: none; }
	.sec-contact > div{ width: 100%; padding: 5rem 2rem 5rem; }
	.sec-contact > div .inner{ width: 100%; padding-bottom: 0; }
	.sec-contact .right .inner{ margin: 0 }
	.sec-contact > div .inner h2{ font-size: 2rem; height: 6.2rem; background-image: url(https://www.art-smile.com/images-implant/common/contact-ttl01-sp.png); padding-top: .7rem; margin-bottom: .8rem; }
	.sec-contact > div .inner .contact-btn{ position: relative; width: 100%; height: 5rem; font-size: 1.5rem; margin-top: 2rem; }

	footer{ padding-bottom: 6rem; }
	footer .sec-contact{ margin-bottom: 0rem; }
	footer .banner-covid{ width: 33.5rem; margin-bottom: 7rem; }
	footer .banner-covid img{ width: 100%; }
	footer .logo{ width: 26.9rem; }
	footer > .wrap{ margin-bottom: 8rem; }
	footer > .wrap .left{ width: 100%; margin-bottom: 3rem; }
	footer > .wrap .left p:nth-of-type(1){ margin-bottom: 1.4rem; }
	footer > .wrap .right{ width: 100%; }

	footer .bg-gray{ padding: 3rem 0 .8rem; }
	footer .bg-gray .wrap.row{ margin-bottom: 5rem; }
	footer .sitemap{ width: 100%; }
	footer .sitemap ul{ width: 100%; }
	footer .sitemap ul + ul{ margin-left: 0; }
	footer .sitemap ul li{ border-bottom: solid 1px #fff; line-height: 3; }
	footer .sitemap ul li + li{ margin-top: 0; }

	.hour-table{ width: 100%; }

	.float-btn{ width: 33.5rem; justify-content: space-between; }
	.float-btn{ top: auto; bottom: 0; left: 50%; transform: translateX(-50%); }
	.float-btn li + li{ margin-left: 0; }
	.float-btn li:nth-of-type(1) a,
	.float-btn li:nth-of-type(2) a{ width: 16rem; border-radius: .5rem .5rem 0 0; }

	.menu-btn{ right: 2rem; }
	.menu-btn.active .inner span:nth-of-type(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
	.menu-btn.active .inner span:nth-of-type(3){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }
}