@charset "UTF-8";

@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400);
@import url('https://fonts.googleapis.com/css?family=Oswald:200');

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

/* -----------------------------------------
reset format
------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -- layout -- */
.f_left   {float:left;}
.f_right  {float:right;}
.t_center {text-align:center !important;}
.t_right  {text-align:right !important;}
.t_left   {text-align:left !important;}
.clear    {clear:both;}

.mb3   {margin-bottom:3px !important;}
.mb5   {margin-bottom:5px !important;}
.mb10  {margin-bottom:10px !important;}
.mb15  {margin-bottom:15px !important;}
.mb20  {margin-bottom:20px !important;}
.mb25  {margin-bottom:25px !important;}
.mb30  {margin-bottom:30px !important;}
.mb35  {margin-bottom:35px !important;}
.mb40  {margin-bottom:40px !important;}
.mb80  {margin-bottom:80px !important;}
.mb100  {margin-bottom:100px !important;}
.mb150  {margin-bottom:150px !important;}

.mt3   {margin-top:3px !important;}
.mt5   {margin-top:5px !important;}
.mt10  {margin-top:10px !important;}
.mt15  {margin-top:15px !important;}
.mt20  {margin-top:20px !important;}
.mt25  {margin-top:25px !important;}
.mt30  {margin-top:30px !important;}
.mt35  {margin-top:35px !important;}
.mt40  {margin-top:40px !important;}
.mt80  {margin-top:80px !important;}
.mt100  {margin-top:100px !important;}

.mr3   {margin-right:3px !important;}
.mr5   {margin-right:5px !important;}
.mr10  {margin-right:10px !important;}
.mr15  {margin-right:15px !important;}
.mr20  {margin-right:20px !important;}
.mr25  {margin-right:25px !important;}
.mr30  {margin-right:30px !important;}
.mr35  {margin-right:35px !important;}
.mr40  {margin-right:40px !important;}

.ml3   {margin-left:3px !important;}
.ml5   {margin-left:5px !important;}
.ml10  {margin-left:10px !important;}
.ml15  {margin-left:15px !important;}
.ml20  {margin-left:20px !important;}
.ml25  {margin-left:25px !important;}
.ml30  {margin-left:30px !important;}
.ml35  {margin-left:35px !important;}
.ml40  {margin-left:40px !important;}
.ml80  {margin-left:80px !important;}

.pb3   {padding-bottom:3px !important;}
.pb5   {padding-bottom:5px !important;}
.pb10  {padding-bottom:10px !important;}
.pb15  {padding-bottom:15px !important;}
.pb20  {padding-bottom:20px !important;}
.pb25  {padding-bottom:25px !important;}
.pb30  {padding-bottom:30px !important;}
.pb35  {padding-bottom:35px !important;}
.pb40  {padding-bottom:40px !important;}
.pb100  {padding-bottom:100px !important;}

.pt3   {padding-top:3px !important;}
.pt5   {padding-top:5px !important;}
.pt10  {padding-top:10px !important;}
.pt15  {padding-top:15px !important;}
.pt20  {padding-top:20px !important;}
.pt25  {padding-top:25px !important;}
.pt30  {padding-top:30px !important;}
.pt35  {padding-top:35px !important;}
.pt40  {padding-top:40px !important;}
.pt100  {padding-top:100px !important;}

.pl3   {padding-left:3px !important;}
.pl5   {padding-left:5px !important;}
.pl10  {padding-left:10px !important;}
.pl15  {padding-left:15px !important;}
.pl20  {padding-left:20px !important;}
.pl25  {padding-left:25px !important;}
.pl30  {padding-left:30px !important;}
.pl35  {padding-left:35px !important;}
.pl40  {padding-left:40px !important;}

.pr3   {padding-right:3px !important;}
.pr5   {padding-right:5px !important;}
.pr10  {padding-right:10px !important;}
.pr15  {padding-right:15px !important;}
.pr20  {padding-right:20px !important;}
.pr25  {padding-right:25px !important;}
.pr30  {padding-right:30px !important;}
.pr35  {padding-right:35px !important;}
.pr40  {padding-right:40px !important;}

/* chromeでフォントサイズがおかしくなるバグ対策 */
html * {
    max-height: 999999px;
}
html {
    font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
    /* safariで勝手にフォントサイズを拡大しないように　*/
    -webkit-text-size-adjest: 100%;
    /* safariで明朝体にならないように　*/
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1.6rem;  
    /* sets the default sizing to make sure nothing is actually 10px */
    line-height:1.8;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

/* -----------------------------------------
original setting
------------------------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: inline-block!important; }
.sp { display: none !important; }
a,a:hover {
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
a{
    color: #ed809e;
    text-decoration: none;
}
a:hover {
    color: #999;
}
a img {opacity:1; filter:alpha(opacity=100); -webkit-transition: all 0.2s ease-in; transition:all 0.2s ease-in;}
a img:hover {
    filter: alpha(opacity=70);
    opacity:0.7;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.row-r {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.lh2 {
    line-height: 2;
}
.pink {
    color: #ed809e;
}

body {
    font-family: 'Noto Sans Japanese', sans-serif;
/*	font-size: 14px; font-size: 1.4rem;  =14px */
    letter-spacing: 0.05em;
/*	line-height: 2;*/
    color: #222222;
	background-color: #fff;
	text-align: center;
/*	min-width: 1020px; */
}

/* notosansのweight */
.noto100 {font-weight:100;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto700 {font-weight:700;}
.noto900 {font-weight:900;}

/* header */
header {
	width: 1110px;
	margin: 0 auto;
	padding: 40px 0 0;
    text-align: left;
	background: #fff;
}
.logo {
    width: 380px;
}
.main {
    width: 1110px;
    margin: 0 auto;
    padding-top: 50px;
    text-align: left;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.g-nav li {
    margin: 0 0 36px 15px;
    font-size:18px;
}
.g-nav li a {
    display: block;
}
.g-nav li.rsv {
    margin: 0;
}
.g-nav li.rsv img {
    width: 174px;
    height: 175px;
}
.g-nav li.guide {
    font-size:16px;
    border-bottom: 1px solid #ed809e;
    padding-bottom: 6px;
    margin-bottom: 0;
    width: 84%;
}
.g-nav li.guide a span {
    color: #222;
}
.mainimage {
    margin-right: 15px;
}
.mainimage .catch {
    width: 176px;
    top: -110px;
    right: 50px;
    z-index: 999;
}
#slideshow {
    position: relative;
    width:  872px; /* 画像の横幅に合わせて記述 */
    height: 490px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
    position: absolute;
/*    top: 0;*/
/*    left:0;*/
    z-index: 8;
    opacity: 0.0;
}
#slideshow img.active {
    z-index: 10;
    opacity: 1.0;
}
#slideshow img.last-active {
    z-index: 9;
}

/* contents共通 */
.cts {
    padding: 100px 0 150px;
}
.cts h1 {
    font-family: 'A1 Mincho';
    font-size: 36px;
    letter-spacing: 0.3em;
    margin: 0 0 40px;
    background: url("../images/line.png") no-repeat center 72px;
    line-height: 1.9em
}
.cts h1 span {
    display: block;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-size: 16px;
    letter-spacing: 0.15em;
    color: #ed809e;
}
.cts p {
    margin-bottom: 2em;
}

/* news */
.news_wp {
    width: 1080px;
    margin: 0 auto;
}
.news_wp .scroll {
    height: 400px;
    overflow: auto;
}
.news table {
    width: 100%;
    text-align: left;
}
.news tr:nth-child(odd) {
    background-color: #f8f8f8;
}
.news th {
    width: 18%;
    font-family: 'A1 Mincho';
    letter-spacing: 0.2em;
    color: #666;
    padding: 20px 0 20px 30px;
}
.news td {
    font-size: 14px;
    padding: 20px 0 24px 30px;
}
.news td h2 {
    font-size: 16px;
    padding-bottom: 6px;
}

/* greeting */
.greeting_wp {
    background: #FFF8F8;
    padding: 80px 0 150px;
}
.greeting_wp .greeting {
    width: 1050px;
    margin: 0 auto;
    text-align: left;
}
.greeting_wp h2 {
    font-family: 'A1 Mincho';
    font-size: 26px;
    letter-spacing: 0.3em;
    background: url("../images/line_mid.png") no-repeat left bottom;
    margin-bottom: 40px;
    padding-bottom: 30px;
}
.greeting_wp h2 span {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 0.15em;
}
.greeting .doctor {
    margin-left: 60px;
    background: url("../images/mark02.svg") no-repeat right bottom;
    background-size: 112px 304px;
}
.greeting .doctor h3 {
    background: url("../images/mark01.svg") no-repeat left center;
    background-size: 31px 23px;
    font-size: 18px;
    padding-left: 40px;
    margin: 50px 0 10px;
}
.greeting .doctor li {
    background: url("../images/line_min.png") no-repeat left center;
    font-size: 14px;
    padding-left: 20px;
    line-height: 2.2;
}
.greeting .pic {
    line-height: 1;
/*    width: 330px;*/
}
.greeting .pic img {
    width: 330px;
}
.greeting .pic li {
    margin-bottom: 30px;
}

/* gallery */
.gallery {
    width: 1080px;
    margin: 0 auto;
    text-align: left;
    line-height: 1;
    display: -ms-grid;
    display: grid;
/*    gap: 30px;*/
    grid-template:1fr 1fr 1fr / 1fr 1fr 1fr;
    grid-template-areas:
        "ph_big1 ph_big2 ph3"
        "ph_big1 ph_big2 ph4"
        "ph5 ph6 ph7";
}
.gallery .photo {
    width: 330px;
    margin: 15px;
}
.gallery img {
    width: 100%;
}
.ph_big1 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-row-end:3;
    -ms-grid-row-span: 2;/* MS対策(手動) */
}
.ph_big2 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-row-end:3;
    -ms-grid-row-span: 2;/* MS対策(手動) */
}
.ph3 {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: ph3;
}
.ph4 {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: ph4;
}
.ph5 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: ph5;
}
.ph6 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: ph6;
}
.ph7 {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: ph7;
}

/* about */
.about_wp {
    background: #f8f8f8;
}
.about {
    width: 1050px;
    margin: 0 auto;
    text-align: left;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.info {
    width: 330px;
}
.info h2 img {
    width: 330px;
    height: 48px;
}
.info h2 {
    margin-bottom: 20px;
}
.info p.tel,.info p.ad {
    margin-bottom: 10px;
}
.info p.tel span {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    letter-spacing: 0.3em;
}
.info table {
    border-left: 1px solid #ed809e;
    border-top: 1px solid #ed809e;
    width: 100%;
    background: white;
    color: #ed809e;
    margin-top: 20px;
}
.info table thead {
    background: #ed809e;
    color: white;
}
.info table th,.info table td {
    border-right: 1px solid #ed809e;
    border-bottom: 1px solid #ed809e;
    text-align: center;
}
.info table thead th {
    border-right: 1px solid #fff;
}
.info table thead th:last-child {
    border-right: 1px solid #ed809e;
}
.info p.hosoku {
    margin: 3px 0 10px;
    margin-bottom: 20px;
}
.map {
    width: 660px;
    height: 460px;
}
.rsv_wp img {
    width: 144px;
    height: 144px;
}
.rsv_wp ul {
    font-size: 14px;
    margin: 40px 0 0 20px;
}
.rsv_wp ul li a {
    display: block;
    margin-top: 20px;
}

/*pageTOP*/
.scrollTop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}
.scrollTop img {
    width: 110px;
    height: 60px;
}

/* footer */
footer {
    padding:30px 0;
}
footer img {
    width: 320px;
}
footer small {
    font-family: 'Crimson Text', serif;
    font-weight:400;
	font-size: 12px; font-size: 1.2rem; /* =12px */
    letter-spacing: 0.15em;
}

/*　スマートフォンの場合（767px以下）*/
@media screen and (max-width: 767px) {
    /* 横並びの.menuを非表示 */
    body {
        font-size: 1.4rem;  
        /* sets the default sizing to make sure nothing is actually 10px */
        line-height:1.6;
    }
    /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
    .pc { display: none !important; }
    .sp { display: inline-block!important; }
    
    /* header */
    header {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0 0;
        text-align: left;
    }
    .logo {
        padding-left: 20px;
        width: 70%;
    }
    .g-nav {
        display: none;
        width: 100%;
        margin: 20px 0;
    }
    .g-nav li {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .g-nav a {
        padding: 8px 20px;
    }
    .g-nav li.guide {
        font-size:18px;
        border-bottom: none;
        padding: 0px;
        width: 100%;
    }
    .main.flex {
        display: block;
    }
    .main {
        width: 100%;
        text-align: center;
        padding-top: 16px;
    }
    .mainimage {
        margin-right: 0px;
    }
    .mainimage .heroimage {
        width: 100%;
    }
    .mainimage .catch {
        width: 70%;
        top: 120px;
        left: 30px;
    }
    p.yoyaku {
        width: 90%;
        position: absolute;
        left: 20px;
        bottom:70px;
    }
    p.yoyaku a,p.yoyaku2 a {
        background: #ed809e;
        color: white;
        letter-spacing: 0.2em;
        display: block;
        padding: 10px 30px;
    }
    p.yoyaku2 a {
        text-align: center;
        margin-top: 20px;
    }
    p.yoyaku a:hover,p.yoyaku2 a:hover {
        color: #ed809e;
        background: #fff;
    }
    
    /* トグルボタン */
    .menu-sp {
        padding: 15px;
        border: none;
        position: absolute;
        top: 12px;
        right: 0;
        cursor: pointer;
        background: none;
    }
    .menu-sp {
        color: #000;
    }
    /* ハンバーガーアイコン */
    .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        -webkit-transition: all .4s;
        transition: all .4s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .menu-trigger {
        position: relative;
        width: 30px;
        height: 23px;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #222;
        border-radius: 1px;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(11px) rotate(-45deg);
        transform: translateY(11px) rotate(-45deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-11px) rotate(45deg);
        transform: translateY(-11px) rotate(45deg);
    }
    
    /* contents共通 */
    .cts {
        padding: 50px 0 80px;
    }
    .cts h1 {
        font-size: 28px;
        margin: 0 0 30px;
        background: url("../images/line.png") no-repeat center 56px;
        line-height: 1.9em
    }
    .cts h1 span {
        font-size: 12px;
        letter-spacing: 0.15em;
    }
    
    /* news */
    .news_wp {
        width: 100%;
    }
    .news_wp .scroll {
/*        height: auto;*/
/*        overflow:visible;*/
    }
    .news th,.news td {
        display: inline-block;
/*        width: 100%;*/
    }
    .news th {
        padding: 20px 20px 0;
    }
    .news td {
        padding: 6px 20px 24px;
    }
    
    /* greeting */
    .greeting_wp {
        padding: 50px 20px 80px;
    }
    .greeting_wp .greeting {
        width: 100%;
    }
    .greeting.flex {
        display: block;
    }
    .greeting .ml80 {
        margin-left: 0 !important;
    }
    .greeting .doctor {
        margin-left: 0px;
        background-size: 60px auto;
    }
    .greeting .pic img {
        width: 100%;
    }
    .greeting.flex.row-r .pic ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .greeting.flex.row-r .pic ul li:last-child {
        margin-left: 10px;
    }
    .greeting_wp h2 {
        font-size: 20px;
    }

    /* gallery */
    .gallery_wp {
        padding: 50px 20px 80px;
    }
    .gallery {
        width: 100%;
        display: block;
    }
    .gallery .photo {
        width: 100%;
        margin:0;
    }
    .gallery img {
        width: 100%;
        margin-bottom: 30px;
    }
    
    /* about */
    .about_wp {
        padding: 50px 20px 80px;
    }
    .about {
        width: 100%;
        text-align: center;
    }
    .about.flex {
        display: block;
    }
    .info {
        width: 100%;
        text-align: center;
    }
    .info h2 img {
        width: 80%;
        height: auto;
    }
    .map {
        width: 100%;
        height: 300px;
    }
    /*pageTOP*/
    .scrollTop {
        right: 10px;
        bottom: 30px;
    }
    .scrollTop img {
        width: 80px;
        height: auto;
    }
}

/* ###### 768px以上 ###### */
@media (min-width: 768px) {
    /* トグルボタン */
    .menu-sp {
        display: none;
    }
}