body{
    font-family:  "ヒラギノ 角ゴ Pro W3", 
    "Hiragino Kaku Gothic Pro",
    "メイリオ","Meiryo",sans-serif;
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fdfbf2;
    font-size: 16px;
    color: #463737
}

/*フェードイン*/
.fadein {
    opacity : 0;
    transform: translateY(0px);
    transition: all 2s;
}

.fadeinleft {
    opacity : 0;
    transform: translateX(-40px);
    transition: all 2s;
}

.fadeinright{
    opacity : 0;
    transform: translateX(40px);
    transition: all 2s;
}


/* ヘッダー */

.header,.mv,.guidance,.introduction,.information{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 70px;
}
.header-tel,.contact-tel{
    font-size: 20px;
    letter-spacing: 0.1em;
    color: #52b8a0;
    margin-left: 25px;
    letter-spacing: -0.02em;
}
.header-right{
    position:relative;
}
.header-logo{
    width: 405px;
}
.header-logo:hover{
    filter: opacity(70%);
    cursor: pointer;
}
.header-tel-logo{
    position: absolute;
    top:0%;
    left: 0%;
}
.header-p2{
    font-size: 18px;
    margin-top: 20px;
    color: #52b8a0;
}
.mv-policy-wrap{
    animation: fadein 3s ease-out forwards;
}
@keyframes fadein {
    0% {opacity: 0}
    100% {opacity: 1}
}
.mv-policy{
    width: 270px;
}
.mv-photo{
    width: 600px;
}
#photo {
    width: 100%;
    height: 450px;
    margin: 0 0 0 70px;
    text-align: right;
    overflow: hidden;
    position: relative;
}
#photo img {
    top: 0;
    left: 0;
    position: absolute;
}


/* お知らせ */
.news{
    background-image: url(../img/back11.jpg);
    background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
    /* background-color: #f6fafa; */
    padding: 40px 40px;
    margin-top: 70px;
}
.inner{
    padding: 0 40 40 40;
    border-radius: 10px; 
    background-color: rgba(255, 255, 255, 0.90);
}
.news_01{
    padding: 40px;
    text-align: center;
    line-height: 2em;
    color          : #634903;     
    font-size      : 16pt;          
    /* text-shadow:    
    3px  3px 5px rgb(61, 12, 27),
    3px  0px 5px rgb(170, 152, 128),
    0px  3px 5px rgb(170, 152, 128),
    3px -3px 5px rgb(170, 152, 128),
    -3px  3px 5px rgb(61, 12, 27),
    -3px -3px 5px rgb(61, 12, 27),
    -3px -0px 5px rgb(170, 152, 128),
    -0px -3px 5px rgb(170, 152, 128); */
}
.news_01 p{
    font-size: 14px;
}
.buta{
    position: absolute;
    margin-top: -1.5em;
    text-align: center;
}
.buta_02{
    display: none;
}

/* 診療時間・初めての方へ */

.guidance-frame{
    width: 460px;
    height: 280px;
    border-radius: 10px;
    border: 3px solid #52b8a0;
    background: #fefefb;
}

.guidance-title{
    font-size: 22px;
    font-weight: bold;
    margin: 23px 27px;
}
.guidance-p{
    margin-left: 23px;
}
.guidance-wrap,.guidance-wrap2{
    font-size: 14px;
    padding-bottom: 6px;
    line-height: 30px;
    border-bottom: dotted 2px #a79a99
} 
.guidance-wrap{
    font-weight: bold;
}
.guidance-wrap-p{
    margin: 30px 30px 40px;
}

.biz_hour {
    display: block;
    border-collapse: collapse;
    /* overflow-x: scroll; */
    width: 420px;
    margin: 30px 20px 20px;
}
.biz_hour th{
    /* １番上の線 */
    border-top: 1px solid #A28C63;
}
.biz_hour th, .biz_hour td {
    padding: 12px 10px;
    text-align: center;
    /* ２番目以降の線 */
    border-bottom: 1px solid #A28C63;
}

.biz-hour th {
    font-weight: normal;
}
  /* 「土」の文字色 */
.biz-hour th.sat {
    color: #3db2da;
}
  /* 「日」の文字色 */
.biz-hour th.sun {
    color: #e66a6a;
}

/* アクセスマップ */

.access{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.access-title,.introduction-title,.question-title{
    margin-top: 90px;
    padding:0px 0px 10px 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 28px;
    font-weight: bold;
    background:linear-gradient(transparent 86%, #d7d0cb 0%);
}
.access-h3{
    font-weight: bold;
    margin-top: 20px;
}
.access-p,.access-p2,.access-h3{
    line-height: 40px;
    margin-left: 23px;
}
.access-p{
    margin-top: 15px;
}
.access-z{
    width:540px
}
.chizu_wrap img{
    border-radius: 10px; 
    /* box-shadow: 1px 3px 4px 1px rgba(0, 0, 0, 0.17); */
}

/* 院長紹介 */

.introduction-h2{
    font-size: 18px;
    font-weight: bold;
}
.introduction-h2,.introduction-p,.introduction-p2{
    line-height: 32px;
    margin-top: 16px;
}
.introduction-p{
    font-weight: bold;
    margin-top: 2px;
}
.introduction-z{
    width: 368px;
    margin-left: 23px;
}

/* 診療科目 */

.medical-wrap{
    height: 420px;
    /* background-color: #f6f4e7; */
    background-color: #fefefb;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
/* .triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #fdfbf2;
    margin: auto;
} */
.medical{
    text-align: center;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 28px;
    font-weight:bold;
    padding: 50px 0 10px;
}
.img-wrap{
    width: 820px;
    margin: 24px auto 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img-wrap-siz{
    width: 97px;
}
.img-wrap2{
    width: 820px;
    margin: 60px auto 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img{
    position:relative;
    width: 754px;
    margin-left: 7.4%;
    margin-right: 11.2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img-p{
    position: absolute;
    top: 88%;
    left: 14%;
    letter-spacing: 0.3em;
    font-size: 18px;
    color: #52b8a0;
}
.img-p2{
    position: absolute;
    top: 88%;
    left: 43%;
    letter-spacing: 0.1em;
    font-size: 18px;
    color: #52b8a0;
}
.img-p3{
    position: absolute;
    top: 88%;
    left: 72%;
    letter-spacing: 0.3em;
    font-size: 18px;
    color: #52b8a0;
}
.img-p4{
    position: absolute;
    top: 88%;
    left: 101%;
    font-size: 18px;
    color: #52b8a0;
}
.img-p5{
    position: absolute;
    top: 92%;
    left: 14%;
    letter-spacing: 0.1em;
    font-size: 18px;
    color: #52b8a0;
}
.img-p6{
    position: absolute;
    top: 92%;
    left: 42.5%;
    font-size: 18px;
    color: #52b8a0;
}
.img-p7{
    position: absolute;
    top: 92%;
    left: 71.5%;
    color: #52b8a0;
}
.img-p8{
    position: absolute;
    top: 92%;
    left: 101%;
    font-size: 18px;
    color: #52b8a0;
}

.sp-img,.sp-tel-btn{
    display: none;
}

/* よくある質問 */

/* .question-title{
    text-align: center;
    margin-top: 90px;
    padding-bottom: 10px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 28px;
    font-weight: bold;
    background:linear-gradient(transparent 90%, #d7d0cb 0%);
} */
.question-wrap{
    width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.question{
    margin-top: 30px;
    line-height: 1.8em;
    position:relative;
}
.question dt::before,.question dd::before{
    content: "Q";
    font-family: "Chalkboard";
    color: #fefefb;
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    width: 35px;
    height: 35px;
    margin-right: 1em;
    text-align: center;
    border-radius: 5px;         
    border: 2px solid #52b8a0;    
    background: #52b8a0;        
}
.question dd::before{
    content: "A";
    color: #52b8a0;
    border: 2px solid #52b8a0;      
    background: #fefefb;         
    margin-top: 20px;
}
.question-l{
    width: 2px;
    height: 25px;
    background-color:#52b8a0;
    position: absolute;
    top: 35%;
    left: 2.1%;
}
.question dt{
    margin-top: 44px;
    font-size: 18px;
}

/* インフォメーション */

.information{
    margin-top: 120px;
}
.information-logo{
    width: 320px;
}
.information-tel::before{
    content:"";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../img/tel.png);
    background-size: contain;
    vertical-align: middle;
    margin-right: 8px;
}
.information-tel{
    font-size: 20px;
    color: #52b8a0;
    margin-top: 30px;
}
.address-j{
    margin-top: 30px;
    line-height: 1.4em;
}
.address-wrap{
    margin-top: 30px;
    line-height: 1.6em;
}
.address-mail{
    margin-top: 20px;
}
.address-mail-i{
    width: 320px;
}

/* フッター */

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    margin-top: 100px;
    background-color: #d7d0cb
}
.footer-left{
    margin-left: 23px;
    font-size: 14px;
    letter-spacing: -0.05em;
    border-bottom: solid 1px #463737;
}
.footer-right{
    font-size: 14px;
}
.footer-copy{
    font-size: 10px;
    color: #9f9595;
    margin-right: 23px;
}

/* プライバシーポリシー*/

.inquiry-main h1,.contact-main h1{
    font-size: 24px;
    margin-top: 80px;
    padding-bottom: 10px;
    font-weight: bold;
    background:linear-gradient(transparent 90%, #d7d0cb 0%);
}
.inquiry-wrap{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.inquiry-main h2{
    font-size: 20px;
    margin-top: 50px;
    font-weight: bold;
}
.inquiry-main p{
    margin-top: 15px;
    margin-left: 1em;
    line-height: 1.5em;
}
.inquiry-wrap li::before{
    content:"■";
    margin-left: 20px;
    line-height: 1.5em;
}
.inquiry-1{
    text-align: right;
    margin-top: 80px;
}


/* 問い合わせフォーム */

.contact-img{
    width: 940px;
    margin-top: 70px;
}
.contact-main h1{
    margin-top: 50px;
}
.contact-main h1,.contact-p,.contact-p2{
    text-align: center;
}
.contact-p{
    margin: 20px;
}
.contact-p2{
    margin: 20px 0 60px;
    color: #e61b1b;
}
.form-wrap,.form-style{
    width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.form-list p{
    margin-bottom: 10px;
}
.form-list{
    margin-top: 30px;
}
.form-input{
    width: 760px;
    padding: 7px;
    border: 1px solid #e5d5d3; 
    background-color: #fefefb;
}
.form-btn{
    margin: 60px auto 0;
    width: 160px;
    color: #fff;
    border-radius: 5px;  
    background: #52b8a0;  
}
.form-btn input{
    display: block;
    width: 160px;
    padding: 14px;
    text-align: center;
}
.form-btn input:hover{
    background: #86cdbc;
    border-radius: 5px;  
}



/* レスポンシブ対応*/

@media screen and (max-width:480px){
    body,.guidance-frame,.question-wrap,.information-left,.news{
        width: 96%;
    }
    .header,.sp-content,.sp-guidance{
        margin-top: 20px;
    }
    .header-logo{
        width: 70%;
    }
    .header-right{
        display: none;
    }
    .access-title, .introduction-title,.question-title{
        margin-top: 80px;
    }
    .sp-content{
        flex-direction: column-reverse;
    }
    .mv-photo,.access-z,.contact-img{
        width: 100%;
    }
    .mv-policy{
        width:74%;
        margin-top: 30px;
    }
    #photo{
        height: 330px;
        margin: 0 auto;
    }
    .sp-guidance,.access,.introduction,.information,.footer{
        flex-direction: column;
    }
    .guidance-title{
        font-size: 20px;
    }
    .access-title,.introduction-title,.medical,.question-title{
        font-family: 'Zen Maru Gothic', sans-serif;
        font-size: 28px;
    }
    .biz_hour{
        width: 90%;
    }
    .biz-hour th, .biz-hour td {
        padding: 10px 10px;
    }
    .guidance-title{
        margin-bottom: 0;
    }
    .guidance-wrap, .guidance-wrap2{
        font-size: 15px;
    }
    .guidance-frame{
        height: 300px;
        margin-top: 26px
    }
    .guidance-wrap-p{
        margin-top: 20px;
        line-height: 2em;
    }
    .access-h2{
        margin-top: 0px
    }
    .access_wrap{
        margin-bottom: 30px;
    }
    .information{
        margin-top: 80px;
    }
    .introduction-br,.question-l,.img{
        display: none;
    }
    .introduction-z-wrap,.mv-policy-wrap{
        text-align: center;
    }
    .introduction-z{
        width: 75%;
    }

    /* news */
    .news{
        margin: 50px auto 0;
        padding: 50px 30px;
    }
    .news_01{
        font-size: 16px;
        line-height: 2.3em;
    }
    .news_01 p{
        font-size: 12px;
    }

    /* お知らせ */
    .introduction-h2{
        margin-top: 40px;
    }
    .introduction-p{
        margin-bottom: 30px;
    }
    .introduction-p2{
        margin-top: 20px;
    }
    .introduction-sp{
        width: 80%;
    }

    .sp-img{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .sp-img-wrap{
        width: 48%;
        padding: 20px 0 0;
        text-align: center;
    }
    .img-wrap-siz{
        max-width: 100%;
    }
    .sp-img-icn{
        width: 75px;
        margin: 0 auto 14px;
    }
    .sp-img-p{
        font-weight: bold;
        letter-spacing: 0.2em;
        color: #52b8a0;
    }
    .medical-wrap{
        height: 700px;
        margin-top: 30px;
    }

    .question-wrap{
        width: 90%;
    }
    .question dt{
        margin-left: 3.3em;
        text-indent:-3.3em;
        font-size: 16px;
    }
    .question dt::before,.question dd::before{
        text-indent: -0.1em;
    }
    .question dd{
        margin-left: 3.3em;
        text-indent: -3.3em;
        font-size: 15px;
    }
    .information-logo-wrap{
        text-align: center;
        margin-top: 60px;
    }
    .information-logo,.address-mail-i,.inquiry-wrap{
        width: 80%;
    }
    .information-tel{
        font-size: 18px;
    }
    .address-mail{
        text-align: center;
        margin-top: 30px
    }
    .map{
        position: relative;
        width: 100%;
        padding-bottom: 75%;
        margin-top: 30px;
        height: 0;
        overflow: hidden;
    }
    .map-l iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .footer-left{
        font-size: 10px;
        margin:20px 0 0 0;
    }
    .address-j,.address-wrap{
        font-size: 14px;
    }
    .sp-tel-btn{
        display: block;
        position: fixed;
        top: 25px; 
        right: 10px;
    }
    .sp-tel-btn-c{
        width: 40px;
    }
    /* プライバシーポリシー */
    .inquiry-main h1{
        font-size: 18px;
    }
    .inquiry-wrap h2{
        font-size: 18px;
    }

    /* お問い合わせ */
    .contact-img{
        margin-top: 40px;
    }
    .contact-main h1{
        font-size: 18px;
        margin-top: 30px;
    }
    .form-style{
        width: 90%;
    }
    .form-input{
        width: 100%;
    }
    .form-wrap{
    width: 80%;
    }
    
}

@media screen and (max-width:475px){
    .table{
        margin-top: 0px;
    }
    .guidance-p{
        margin-top: 10px;
    }
    .guidance-frame{
        height: 350px;
    }
    .guidance_frame{
        height: 320px;
    }
    #photo{
        height: 300px;
    }
}

@media screen and (max-width:400px){
    .mv-policy{
        width: 64%;
    }
    .introduction-z{
        width: 65%;
    }
    .table-wrap{
        width:100%;
        overflow-x:scroll;
    }
    #photo{
        height: 270px;
    }
}
