@charset "UTF-8"; /*CSSリセット（HTML5 Doctor CSS Reset*/
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;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font: initial;
    font-family: initial;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/*CSSリセット（HTML5 Doctor CSS Resetここまで************/
/**************************/
/*ここから全体設定部*/
html{
    font-family: 'M PLUS Rounded 1c', sans-serif,"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}
body {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    /*iPhoneで回転しても文字が大きくならない設定*/
    background-color: #fff;
    font-size: 13px;
}
h2 {
    font-size: 15px;
    display: inline;
}
h3 {
    font-size: 13px;
    font-weight: bold;
    display: inline;
}
h4 {
    font-size: 14px;
    margin: 30px 0 5px 0;
    text-align: center;
}
a {
    text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
    color: #444;
}
span.red {
    color: rgb(187, 44, 44);
    font-size: 14px;
    line-height: 1.5;
}
.right {
    float: right;
    text-align: right;
}
span.blink {
    animation: blinkAnime 1s infinite alternate;
}
/*****ここまで全体設定部*****/

/***** ここから入れ替え画像、ロゴ部 *****/
#change {
    width: 100%;
}
#change img {
    width: 70%;
    margin-top: -10px;
    margin-bottom: -40px;
    float: right;
}
.logo img {
    display: block;
    width: 90%;
    margin: auto;
    margin-bottom: 25px;
    margin-top: 5px;
}

/***** ここからコンテンツ部　*****/
#section {
    background-color: #fff;
}
#contents {
    width: 100%;
    margin: auto;
    padding-bottom: 20px;
}
#menu {
    width: 100%;
    margin: auto;
}
span.exp {
    width: 80%;
    display: block;
    margin: auto;
    text-align: left;
    font-size: 20px;
    color: #444;
    line-height: 1.3;
}
span.right{
text-align: right;
}
span.open {
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #444;
    line-height: 1.3;
}

/*****ここからメニュー部*****/
/*メニュー全般設定*/
ul, li {
    display: block;
    list-style: none;
}
li {
    margin-bottom: 15px;
}
.button {
    background-color: transparent;
    border: none;
    outline: none;
    appearance: none;
    list-style: none;
    width: 100%;
    height: 50px;
    margin: auto;
    padding: 14px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
    color: #444;
}

/*★矢印を上下変化させる
（疑似要素内の画像のサイズは変えられないが、疑似要素自体には幅と高さを指定することができることを利用して画像サイズを変更）*/
.button:after {
    content: "";
    /*画像だけ表示する時は空（でもcontent項目は必要）*/
    display: inline-block;
    /*初期値のinlineでは、幅と高さを指定できないためblockかinline-blockに。要素と画像を横に並べたいときはinline-block、改行を入れたい場合はblock*/
    background-image: url(../img/yazi_down_gray.png);
    width: 13px;
    /*画像の幅*/
    height: 9px;
    /*画像の高さ*/
    background-size: contain;
    /*contain:画像の縦横比は維持したまま、疑似要素いっぱいに。画像の大きさ＝疑似要素の大きさ*/
    vertical-align: middle;
    position: absolute;
    right: 15px;
    top: 20px;
}
#menu img.incho {
    width: 35%;
    float: right;
}

/*院長資格*/
li#change button.button {
    background-color: #eee;
    color: #444;
    font-size: 15px;
    border-radius: 0;
    height: 200px;
    text-align: left;
}
#change .button:after {
    position: absolute;
    right: 15px;
    top: 180px;
    background-image: url(../img/yazi_down_gray.png);
}
#change .button.active:after {
	background-image: url(../img/yazi_up_gray.png);
}
li#change h2 {
    text-align: center;
    font-weight: bold;
}
li#change button.button img {
    float: left;
    margin-right: 7%;
    margin-bottom: 0px;
}
li#change {
    margin-bottom: 20px;
}
li#change .nest {
    border: 2px solid #eee;
    margin-top: -10px;
    background-color: #eee;
    color: #eee;
    padding: 10% 5% 5% 5%;
    font-size: 14px;
    margin-bottom: 30px;
}
div.sikaku{
    margin-top: 15px;
    line-height: 1.3;
    clear: right;
    font-size: 13px;
}
span.center{
    display: block;
    text-align: center;
    font-size: 11px;
}
.ba{
    color: #444;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
}
/*院長インタビューキー*/
li#change .nest ul.lessons button.button {
    background-color: #fff;
    color: #444;
    font-size: 13px;
    border-radius: 0;
    height: 30px;
    padding: 0px;
    text-align: center;
}
li#change .nest ul.lessons .button:after {
    position: absolute;
    right: 15px;
    top: 10px;
    background-image: url(../img/yazi_down_gray.png);
}
li#change .nest ul.lessons .button.active:after {
	background-image: url(../img/yazi_up_gray.png);
}

/*ルネサンスオンライン*/
li#change .button {
    color: #eee;
    border-radius: 0;
    font-size: 14px;
    height: 35px;
    text-align: left;
    background-color: rgb(206, 68, 68);
    margin-top: 3px;
}

/*治療内容*/
li#studio button {
    background-color: rgb(130, 155, 101);
    /*background-image: url(../img/studio.jpg);*/
    background-size: cover;
    color: #fff;
}
li#studio .nest {
    border: 2px solid rgb(130, 155, 101);
    border-radius: 7px;
    margin-top: -10px;
    color: #fff;
    background-color: rgb(130, 155, 101);
    padding: 8% 5% 5% 5%;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 30px;
}
#studio .button:after {
    background-image: url(../img/yazi_down.png);
}
#studio .button.active:after {
	background-image: url(../img/yazi_up.png);
}

/*治療の流れ*/
li#online button {
    background-color: rgb(158, 126, 177);
    /*background-image: url(../img/online.jpg);*/
    background-size: cover;
    color: #fff;
}
li#online .nest {
    border: 2px solid rgb(158, 126, 177);
    border-radius: 7px;
    background-color: rgb(158, 126, 177);
    padding: 8% 5% 5% 5%;
    color: #fff;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 30px;
}
#online .button:after {
    background-image: url(../img/yazi_down.png);
}
#online .button.active:after {
	background-image: url(../img/yazi_up.png);
}
#online .nest img.small{
    
    width: 100px;
}

/*インテリア*/
li#interior button {
    background-color: rgb(168, 133, 93);
    background-image: url(../img/matiai01.jpg);
    background-size: cover;
    color: #fff;
}
li#interior .nest {
    border: 2px solid rgb(168, 133, 93);
    border-radius: 7px;
    margin-top: -10px;
    color: #fff;
    background-color: rgb(168, 133, 93);
    padding: 8% 5% 5% 5%;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 30px;
}
#interior .button:after {
    background-image: url(../img/yazi_down.png);
}
#interior .button.active:after {
	background-image: url(../img/yazi_up.png);
}

/*コロナ対策*/
li#taisaku button {
    background-color: #eee;
    /*background-image: url(../img/online.jpg);*/
    background-size: cover;
    color: #666;
}
li#taisaku .nest {
    border: 2px solid #eee;
    border-radius: 7px;
    background-color: #eee;
    padding: 8% 5% 5% 5%;
    color: #444;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 30px;
}
#taisaku .button:after {
    background-image: url(../img/yazi_down_gray.png);
}
#taisaku .button.active:after {
	background-image: url(../img/yazi_up_gray.png);
}

/*ご予約*/
li#yoyaku button {
    background-color: rgb(238, 201, 233);
    /*background-image: url(../img/online.jpg);*/
    background-size: cover;
    color: #444;
}
li#yoyaku .nest {
    border: 2px solid rgb(238, 201, 233);
    border-radius: 7px;
    background-color: rgb(238, 201, 233);
    padding: 8% 5% 5% 5%;
    color: #444;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 30px;
}
#yoyaku .button:after {
    background-image: url(../img/yazi_down_gray.png);
}
#yoyaku .button.active:after {
	background-image: url(../img/yazi_up_gray.png);
}

/*診療時間*/
ul.accordion #hours img{
    margin-top: 5px;
    margin-bottom: 0px;
}

/*アクセスボタン*/
li#access button {
    background-color: #eee;
    /*background-image: url(../img/access.png);*/
    background-size: cover;
    color: #444;
}
li#access .nest {
    border: 2px solid #eee;
    border-radius: 7px;
    margin-top: -10px;
    color: #444;
    background-color: #eee;
    padding: 8% 5% 5% 5%;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 30px;
}
#access .button:after {
    background-image: url(../img/yazi_down_gray.png);
}
#access .button.active:after {
	background-image: url(../img/yazi_up_gray.png);
}
/*アクセス*/
ul.accordion #access img{
    display: inline;
    margin: auto;
    width: 100%;
}
ul.accordion #access .icon{
    width: 25px;
    position: relative;
    top: 3px;
}


/*プロフィール*/
li#profile button {
    background-color: #eee;
    color: #666;
}
li#profile .nest {
    border: 2px solid #eee;
    border-radius: 7px;
    margin-top: -10px;
    background-color: #eee;
    padding: 10% 8% 5% 8%;
    font-size: 14px;
    margin-bottom: 30px;
}
#icon img.ios {
    width: 50px;
}

/**************************/
/*ここから説明が出るメニュー*/
/*メニュー全体設定*/
#section {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    width: 100%;
}
#menu {
    width: 90%;
    margin: auto;
    margin-bottom: 15px;
    text-align: left;
}
#menu img {
    width: 100%;
    margin: auto;
}

/**********************************/
/*-----４１4ｐｘ（iPhone6plus横幅414px）より大きなデバイス-----*/
@media only screen and (min-width: 415px) {
	body{
	width: 414px;
	margin: auto;
	}
}