@charset "UTF-8";

/*======================================================
全ページに共通する設定
======================================================*/

/*-----------------------------------------------------
全体
-----------------------------------------------------*/

.wrapper{
    width:900px;
    margin: 0 auto 30px;
    background: #fff;
}

body
{
  margin: 0 auto;
  padding: 0;
  color: #52594F;
  background-color: #EBEDC5;
}

#main-cont{
    margin:10px 30px;
}

.h1-page{
    background: url(../img/top/title.gif) no-repeat left top;
    font-size:1.7rem;
    font-weight: normal;
    padding:4px 0 8px 70px;
    margin-bottom:20px;
}

.h1-pageL{
    background: url(../img/society/society_title.gif) no-repeat left top;
}

.att{
    color:#E60012;
    font-size:1.1rem;
    line-height: 1.1;
}


/*-----------------------------------------------------
ヘッダー
-----------------------------------------------------*/

header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-top:10px;
}

.h1-header{
    font-size:1.2rem;
    color:#007E53;
    font-weight: normal;
}

/*-----------------------------------------------------
ナビゲーション
-----------------------------------------------------*/

.g-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding:10px 0;
    width:840px;
    margin: 0 auto 30px;
}

.g-nav li {
    border-right:1px solid #52594F;
    color:#52594F;
    text-align: center;
    display:block;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    line-height: 1;
}

.g-nav li:last-child{
    border-right:none;
}

.g-nav li a:link,.g-nav li a:visited,.g-nav li a:hover{
    text-decoration: none;
    color:#666464;
}

.g-nav li a:hover{
    text-decoration: none;
    color:#F6AC4C;
}

/* プルダウンナビの設定 */

ul.ddmenu a {
   /*background-color: #cc0000; /* メニュー項目の背景色(濃い赤色) */
   /*line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   /*text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★項目内全域をリンク可能にする */
}
/* ul.ddmenu a:hover {
   background-color: #F6AC4C; //メニュー項目にマウスが載ったときの背景色(淡いピンク)
   color: #FFF9B1;            // メニュー項目にマウスが載ったときの文字色(濃い赤色)
} */

ul.ddmenu ul {
   margin: 5px 0 0 0;        /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;       /* ★サブメニュー内側の余白(ゼロ) */
   display: none;      /* ★標準では非表示にする */
   position: absolute; /* ★絶対配置にする */
}

ul.ddmenu ul li {
   width: 135px;               /* サブメニュー1項目の横幅(135px) */
   border-top: 1px solid #fff; /* 項目上側の枠線(ピンク色で1pxの実線) */
    background-color: #F6AC4C; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #FFF9B1;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
    border-right:none;

}
ul.ddmenu ul li a {
   line-height: 20px;   /* サブメニュー1項目の高さ(35px) */
   text-align: left;    /* 文字列の配置(左寄せ) */
   padding-left: 5px;   /* 文字列前方の余白(5px) */
   font-weight: normal; /* 太字にはしない */
}
ul.ddmenu ul li a:link,ul.ddmenu ul li a:visited{
    color:#fff;
    background: #F6AC4C;
}

ul.ddmenu ul li a:hover {
   background-color: #f48a00; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #FFF9B1;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}

ul.ddmenu ul ul {
   margin: 0px;        /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;       /* ★サブメニュー内側の余白(ゼロ) */
   display: none;      /* ★標準では非表示にする */
   position: absolute; /* ★絶対配置にする */
   top: -1px;          /* 1pxだけ上方向にずらす(※上に1pxの枠線を引いている場合) */
   left: 100%;         /* ★基準位置からの距離を親ボックスの幅100％にする */
   /* border-left: 1px solid pink; 左側に引く枠線(ピンク色で1pxの実線) */
}


/*-----------------------------------------------------
footer
-----------------------------------------------------*/

footer{
    padding:30px;
}

.foot-in{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom:30px;
    border-top:1px solid #999;
    padding-top:20px;
}

.foot-logo{
    width:200px;
    margin-right:20px;
}

.foot-info{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
}

.foot-qr{
    width:120px;
    text-align: center;
}

.foot-image{
    width:160px;
}

.foot-ta th, .foot-ta td{
    border:5px solid #fff;
    font-size:1.1rem;
}

.foot-ta th{
    background:#EFEDE0;
    text-align: justify;
    text-align: center;
}

.copyright{
    color:#95834C;
    font-size:1.1rem;
    text-align: center;
    margin-bottom:20px;
}

.foot-info{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}



/*-----------------------------------------------------
トップページ
-----------------------------------------------------*/

.top-att{
    border:4px solid rgb(255, 136, 73);
    background: #fffdf0;
    padding:20px 40px;
    margin:20px;
}

.top-att p{
    font-size:16px;
    line-height: 1.75;
}

.top-main{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.top-greet{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right:40px;
}

.top-info{
    width:330px;
}

.top-info dt{
    font-weight: bold;
}

.greet-box img{
    float:left;
    margin-right:20px;
}

.greet-box p span{
    display: block;
    text-align: right;
}

.bt-contact{
    text-align: center;
    margin:30px auto;
}


/*-----------------------------------------------------
創漢堂の歩み
-----------------------------------------------------*/

section{
    padding-left:120px;
    background: url(../img/profile/left.jpg) no-repeat;
}

.his-img-box{
    margin-bottom:20px;
}

.his-img-box > img:first-child{
    margin-right:10px;
}




/*-----------------------------------------------------
整骨院
-----------------------------------------------------*/

.koumoku-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom:20px;
}

.koumoku-title{
    background:#007E53;
    text-align: center;
    margin-right:20px;
    width:120px;
    position:relative;
}

.h2-koumoku{
    color:#fff;
    font-size:1.4rem;
    font-weight: normal;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width:100%;

}

.koumoku-box > div:nth-child(2){
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
}

.koumoku-li li,.koumoku-li span{
    font-size:1.4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    -mox-border-radius:8px;
    -webkit-border-radius:8px;
    display: inline-block;
    margin-right:10px;
    width:120px;
}

.koumoku-br{
    color:#c79f65;
    border:3px solid #c79f65;
}

.koumoku-gr{
    color:#89b177;
    border:3px solid #89b177;    
}

.koumoku-bl{
    color:#5f8db5;
    border:3px solid #5f8db5;    
}

.koumoku-pi{
    color:#de7da5;
    border:3px solid #de7da5;    
}

.koumoku-red{
    color:#f00;
    border:3px solid #f00;
}

.koumoku-step-box figure{
    position: relative;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
}

.koumoku-step-box figcaption{
    position:absolute;
    bottom:20px;
    right:4px;
}

.koumoku-step-box figure::after{
    content:url(../img/osteopathic/arrow.gif);
        position:absolute;
        top:0;
        right:-18px;
}

.koumoku-step-box:last-child figure::after{
    content:none;

}

.price-ta-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

table.price-ta{
    margin-right:10px;
}

.price-ta caption{
    text-align: left;
}
.price-ta th,.price-ta td{
    border: 1px solid #8eba6b;
    padding:4px;
}

.price-ta th{
    background:#ACC569;
    color:#fff;
    text-align: center;
}

.price-ta td:not(:first-child){
    text-align: right;
}

.price-ta td:first-child{
    background:#DFEDC6;
    color:#007E53;
    
}

/*-----------------------------------------------------
鍼灸院
-----------------------------------------------------*/

.inline p{
    display:inline-block;
}

.inline{
    margin-bottom:20px;
}

.shinbi-price-ta{
    width:100% !important;
}

.shinbi-price-ta th{
    background: #DFEDC6;
    color: #007E53;
    text-align: left;
    width:150px;
}

.shinbi-price-ta td{
    width:150px;
    padding-right:10px;
}

.image-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width:94%;
}

.shinkyu-faq dt{
    background: #dfedc6;
    padding:2px;
    margin-bottom:10px;
    font-size:1.5rem;
    color:#333;
    
}

.shinkyu-faq dd{
    font-size:1.3rem;
    margin-bottom:20px;
}

/*-----------------------------------------------------
最新情報
-----------------------------------------------------*/

.news-list dt{
    font-size:14px;
    font-weight:bold;
    color:#8A8000;
    border-bottom:2px dotted #000;
    margin:10px 0;
    padding-bottom:10px;
}

.news-list dd{
    font-size:1.4rem;
    line-height: 1.75;
}


/*-----------------------------------------------------
アクセス
-----------------------------------------------------*/
.ac-list dt{
    background: #007E53;
    color:#fff;
    padding:4px 10px;
    font-size:1.5rem;
    margin:10px 0;
}

.ac-list dt:first-child{
    margin-top:0;
}


.ac-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.ac-map{
    width:280px;
}

.ac-list{
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    margin-right:30px;
}

.about-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: url(../img/access/bg-accessbox02.gif) no-repeat;
    padding:30px;
    height:254px;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
}

.about-image{
    width:180px;
    margin-right:20px;
}

.about-ta th{
    background: #efede0;
    text-align: center;
}

.about-ta th,.about-ta td{
    border:3px solid #fff;
    line-height: 1.2;
    padding: 1px 6px;
}

.about-ta caption{
    text-align: left;
}


/*-----------------------------------------------------
適応症
-----------------------------------------------------*/

.symp-ta th,.symp-ta td{
    border:1px solid #8eba6b;
    padding:6px;
}

.symp-ta thead th{
    background: #ACC569;
    color:#fff;
    text-align: center;
}

.symp-ta tbody th{
    color:#007E53;
    background: #DFEDC6;
}

/*-----------------------------------------------------
症例
-----------------------------------------------------*/

.ex-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom:20px;
}

.ex-list li{
    margin-left:20px;
    font-size:1.3rem;
    padding-bottom:4px;
}


.ex-ta th,.ex-ta td{
    padding:4px;
    border-bottom:1px dashed #007E53;
}

.ex-ta{
    margin-bottom:20px;
}

.ex-ta th{
    width:100px;
    text-align: center;
    vertical-align: top;
}

.ex-ta th p{
    background:#007E53;
    color:#fff;
    padding:2px;
}

.ex-list li a:link,.ex-list li a:visited{
    color:#F08300;
    text-decoration: none;
}

.ex-list li{
    background: url(../img/society/line01.gif) no-repeat 0 20px;
    width:300px;
}

.ex-info{
    margin-bottom:20px;
}


/*-----------------------------------------------------
Q&A
-----------------------------------------------------*/

.faq-li dt{
    background: url(../img/question/question_box02.gif) no-repeat left bottom;
    height:40px;
    margin-bottom:10px;
    position: relative;
}

.faq-li dt p{
    position: absolute;
    left:50px;
    bottom:-1px;
    color:#fff;
    font-weight: bold;
    font-size:1.8rem;
}

.faq-a{
    color:#E60012;
    font-size:2.4rem;
    font-weight: bold;
}

.faq-li dd{
    font-size:1.5rem;
    margin-bottom:20px;
}


/*-----------------------------------------------------
交通事故の流れ
----------------------------------------------------*/

.tr-step{
    margin-bottom:6em;
}


.h2-traffic{
    background:#097e00;
    color:#fff;
    margin-bottom:30px;
    padding:2px 10px;
    font-weight: normal;
}

.tr-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom:20px;
}

.tr-text{
    margin-left:20px;
}

.tr-text  p span{
    background:#097e00;
    color:#fff;
    padding:2px 8px;
    font-size:1.6rem;
    margin-right:10px;
}

.tr-text p{
    font-size:1.5rem;
    font-weight: bold;
}

.tr-text{
    background:url(../img/traffic/arrow.gif) no-repeat left bottom;
}

.tr-box:last-child .tr-text{
    background: none;
}

.tr-text-sub{
    font-weight: normal !important;
    margin-left:2.5em;
}


/*-----------------------------------------------------
美容鍼
-----------------------------------------------------*/

#beauty-hari p{
    font-size:1.4rem;
    line-height: 1.75;
}

.h2-beauty{
    font-size: 1.6rem;
    font-weight: bold;
    color: #019680;
    border-bottom: 2px dotted #000;
    margin: 10px 0;
    padding-bottom: 10px;
}

.beauty-box li{
    margin-bottom:10px;
    font-size:1.4rem;
}

.beauty-box{
    margin-bottom:50px;
}

.beauty-two{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}