@charset "utf-8";
/*-----------------------------------------------------------------------------------------------------
ALL SIZE
-------------------------------------------------------------------------------------------------------*/
body {
font-family: 'Futura', 'Arial', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
-webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6 {
color: #3c2617;
font-family: 'Futura', 'Arial', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
letter-spacing: 1px;
}

/*-----------------------botton */
.button {
display: inline-block;
font-family: 'Futura', 'Arial', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
width: 200px;
padding:5px 10px;
text-align: center;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
border: 1px solid #40220F;
color: #fff;
font-size: 12px;
background-color: #40220F;
overflow: hidden;
letter-spacing: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}
.button::before, .button::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.button:hover {
color: #ffffff;
background-color: #543a2b;
border: 1px solid #543a2b;
}
.button::after {
top: -100%;
width: 100%;
height: 100%;
}
.button:hover::after {
top: 0;
}

#toparea {
	display: block;
	position: relative;
	top: 0;
	background: #FCFBF5;
	width: 100%;
	height: 100px;
}
#toparea img.topareaImg {
	position: absolute;
	right: 50px;
	top: 20px;
}
#toparea img.inqbtn {
	position: absolute;
	right: 50px;
	top: 84px;
	z-index: 10;
}

/*-----------------------header */
header {
width: 245px;
margin: 0 auto;
overflow: hidden;
background-color: rgba(255,255,255,0.99);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
top:0;
left:50px;
position:absolute;
}
.hearder_wrapper {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}

header h1 {
font-size: 0;
margin: 0;
}

header .logo {
display: block;
margin: 30px auto 48px;
}

header nav {
margin:0 0 0 40px;}

header nav ul {
list-style: none;
overflow: hidden;
float: left;
}
header nav ul li {
padding: 0;
font-size:12px;
font-weight:bold;
margin-bottom:28px;
letter-spacing:2px;
}

header nav ul li span{
padding: 0;
font-size:9px;
font-weight:normal;
margin-top:-5px;
letter-spacing:1px;
display:block;}



/*display:none:*/
h1.headerlogo {display:none;}
.mobile_menu {display:none;}







/*-----------------------wrapper */

.wrapper_all {
position: relative;
width: 100%;
}

.wrapper_s{
position: relative;
width: 980px;
margin:0 auto;
padding:60px 0;
overflow: hidden;
}


/*-----------------------footer */
footer {
padding-top: 60px;
background: #3c2617;
font-size:12px; 
}
ul.footer_link{	color:#FFFFFF; display:block; margin-bottom:60px;}
ul.footer_link li{display:inline-block; float:left;}
ul.footer_link li a{color:#FFFFFF;}
ul.footer_link li a:hover{color:#BAAEA2;}	

.inline-item + .inline-item::before {
content: "/";
margin-left: .7em;  
margin-right: .7em;  
}

footer p{color:#FFFFFF;}
#copy {
clear: both;
bottom: 0;
position: absolute;
}


/*-----------------------scroll top */

#back-top {
position: fixed;
bottom: 4%;
right:4%;
}
#back-top span {
width: 50px;
height: 51px;
display: block;
}

/*-----------------------Selected Text */

/*safari*/


::selection {background:#CCFFFF; }
::-moz-selection {background:#CCFFFF;}



/*-----------------------
design
---------------------- */


/*firstview*/
#firstview {
position: relative;
}
.bgstretcher-area {
text-align: left;
height: 100%;
}
.bgstretcher-page {
height: 100%;
background: url(../img/maindots.png) repeat;
}

/* section background-color */
#philosophy, #point, #appointment, #photo, #company {
background: #f5f3f2;
}
#about, #flow, #access {
background: #fcfbf5;
}
/* common design */
.cont_left {
width: 47%;
float: left;
}
.cont_right {
width: 47%;
float: right;
}
h2, h4 {
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
}
h2 {
margin: 0 0 12px 0;
}
h2:after {
border-bottom: 1px solid #666464;
content: "";
display: block;
padding-bottom: 12px;
width: 18px;
color: #3c2617;
}
h3 {
font-size: 12px;
margin-bottom: 60px;
font-weight: nomal;
}
h4 {
color: #FFFFFF;
font-weight: bold;
text-align: center;
background: #3c2617;
padding: 1px 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
margin: 30px 30px 10px 0;
}
.bgPurple {background: #CEB7D8;}
.bgPink {background: #E3A49E;}
.bgSand {background: #DACC98;}
.bgGreen {background: #ADCEA5;}
.bgBlue {background: #91BEC4;}

/*News*/

ul.newsinfo {
width: 100%;
font-size: 12px;
letter-spacing: 0;
border-top: 1px solid #666464;
letter-spacing: 1px;
text-align: center;
}
ul.newsinfo li a {
padding: 12px 0;
border-bottom: 1px solid #666464;
display: block;
width: 100%;
background: url(../img/newsicon.png) right 50px bottom 22px no-repeat;
}
ul.newsinfo li a:hover {
background-color: rgba(255,255,255,1);
}
ul.newsinfo li span {
	display:inline-block;
padding-left: 60px;
}
ul.newsinfo li span::after {
content: "";
display:inline;
padding-left: 50px;
}
ul.newsinfo li p {
display: inline-block;
margin-left: 50px;
}

/*philosophy*/
#philosophy .cont_left {
text-align: right;
padding-bottom: 50px;
}
/*about*/
.outline {
margin: 0 auto 60px;
padding-bottom: 60px;
border-bottom: #3c2617 1px solid;
}
.description {
font-weight: bold;
line-height: 24px;
margin-bottom: 20px;
}
.desc_text {
font-size: 12px;
font-weight: nomal;
letter-spacing: 0px;
}
.profile {
letter-spacing: 1px;
font-size: 12px;
}
.profile p {
line-height: 24px;
}
.profile span {
letter-spacing: 3px;
}
.pr {
font-weight: bold;
font-size: 14px;
margin-bottom: 30px;
}


/*point*/
#point h4 {
width: 90px;
}
#point span {
font-weight: bold;
}
ul.point {
width: 100%;
text-align: center;

}
ul.point li {
display: block;
float: left;
font-size: 13px;
width: 30%;
letter-spacing: 2px;
padding: 1.5%;
}
ul.pointlist {
width: 80%;
margin: 0 auto;
margin-top: 20px;
list-style-type: disc;
padding-bottom: 10px;
overflow: hidden;
}
ul.width170 {
width: 170px;
max-width: 100%;
}
ul.width130 {
width: 130px;
max-width: 100%;
}
ul.pointlist li {
clear: both;
width: 100%;
text-align: left;
}
/*flow*/
.flowarrow {
margin-left: 60px;
width: 18px;
}
/*appointment*/
#appointment h4 {
width: 90px;
}
#appointment p {
font-weight: bold;
l etter-spacing:2px;
margin-bottom: 30px;
}
#appointment p.tel_n {
font-size: 38px;
font-weight: normal;
letter-spacing: 5px;
}
#appointment span {
font-size: 15px;
letter-spacing: 2px;
}
#appointment .cont_right {
margin-top: 50px;
}
#appointment .cont_right p {
margin-top: -20px;
font-size: 12px;
font-weight: normal;
}
/*access*/
ul.address {
width: 100%;
}
ul.address li {
display: block;
float: left;
font-size: 13px;
width: 33%;
letter-spacing: 2px;
}
ul.address li span {
display: block;
font-size: 13px;
}
#map {
max-width: 100%;
min-width: 280px;
margin: auto;
}
#map img {
max-width: none;
}
#map_canvas {
height: 350px;
width: 100%;
}
#access p {
font-weight: bold;
l etter-spacing:2px;
margin-bottom: 30px;
}
/*photo gallery*/
#photo .wrapper_s {
width: 100%;
}
#photo h2 {
width: 980px;
margin: 0 auto 12px;
}
#photo h3 {
width: 980px;
margin: 0 auto 60px;
}


@media screen and (max-width:740px) {

/*-----------------------botton */
.btn_area {
margin: 0 auto;
text-align: center;
}
.button {
display: inline-block;
width: 200px;
text-align: center;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
border: 1px solid #3c2617;
color: #fff;
font-size: 14px;
background-color: #3c2617;
overflow: hidden;
margin: 30px auto 0;
letter-spacing: 2px;
padding: 10px 0;
}





/*-----------------------header */
#mainvisual{
position: relative;
}


header.mobile_menu {
position:absolute;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background:none;
top:0;
left:0;
display: block;
background:#E48B8D;
}


/*logo*/
h1.headerlogo {
display: block;
width:84%;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
}

h1 img {
max-width:540px;
height:100%;
position: relative;
}


/*display:none -- pc */

.pc_menu{display:none;}




/*-----------------------navigation*/

header nav{margin:0;}
header nav ul {
width: 100%;
margin-top: 10px;	}
header nav ul li {float: none;	 margin:0;}





/*-----------------------footer */
footer {
padding:0;
}



/*-----------------------wrapper_s */
.wrapper_s {
width: 84%;
margin: 0 auto;
position: relative;
}



/*-----------------------topscroll */
#back-top {
position: fixed;
bottom: 4%;
right:4%;
}


/*----------------------
design
----------------------*/

#firstview {
position: relative;
height: 100%;
}
/* common design */

.cont_left, .cont_right {
width: 100%;
float: none;
}
img {
width: 100%;
height: auto;
}
.cont_right span {
display: block;
margin-bottom: 30px;
}
/* News */

ul.newsinfo li a {
padding: 10px 0;
border-bottom: 1px solid #666464;
display: block;
width: 100%;
background: none;
}
ul.newsinfo li span {
padding-left: 0;
display: block;
}
ul.newsinfo li span::after {
display: none;
}
ul.newsinfo li p {
margin-left: 0;
}
/*about */
#about img {
margin: 30px auto 0;
}
.name {
margin-bottom:20px;
display:block;
}
#about .profile .cont_left img {
margin-bottom: 30px;
}


dl.carrer dt {
float: left;
text-align: right;
width: 44px;
}
dl.carrer dd {
margin-left: 65px;
}


/*guide */
#guide img {
margin: 0 auto 30px;
}
/*appointoment */

#appointment p.tel_n {
font-size: 20px;
}
/*access*/
ul.address {
width: 100%;
}
ul.address li {
display: inline-bilock;
float: none;
width: 100%;
}
ul.address li.clinic_name {
margin-bottom: 15px;
}
ul.address li span {
display: inline-block;
margin-right: 10px;
}
#map_canvas {
height: 200px;
}
/*photo gallery*/
#photo .wrapper_s {
width: 100%;
}
#photo .wrapper_s {
width: 100%;
}
#photo h2, #photo h3 {
width: 84%;
}
}
@media only screen and (max-device-width:480px) and (orientation:landscape) { /*スマートフォン横向きのみ対応*/
h1.headerlogo {
display: block;
width:250px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%); /* Safari用 */
transform: translate(-50%, -50%);
}

h1 img {
width:250px;
height:100%;
position: relative;
margin:0 auto;
text-align:center;
}
}

@media screen and (max-width: 740px) {
    #mainbg img {
        width: inherit;
    }
    .inqbtn {
        width: inherit;
    }
    #toparea img.topareaImg {
    position: absolute;
    left: 60px;
    top: 20px;
    width: 85%;
    }
    #about h2, #about h3 {
        padding-left: 0 !important;
    }
}

#company table {
    width: 100%;
    background: #635952;
    border-collapse:separate;
    border-spacing: 1px;
}
#company table td {
    background: #f5f3f2;
    margin: 1px;
    padding: 5px;
}