@charset "UTF-8";


*{
    margin: 0 ;
    padding: 0;
    line-height: 1;
}
/* 余白と行間のリセット */

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /*   ここまでフォントファミリー  各OSに適したフォントを用意しておく Helvetica NeueはMacの英語、ArialはWindows系の英語*/
    color: #555;
    /* サイト全体の文字色を定義しておく */
    font-size: 100%;
}

ul {
    list-style: none;
    /*   liの装飾を削除する  */
}

a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで持っている下線を消しておく */
}

img{
    width: 100%;
    /* 親要素以上に大きくならない */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。他の防ぐ方法としてインライン要素をブロック要素に変える方法もあり */
}

/*-----------------------------------------
    pc max - setting   
-----------------------------------------*/

.container {
    width: 960px;
    margin: 0 auto;
}

/*PCの情報コンテンツの最大幅の設定 ------ 各パーツでこのCSSを再利用（マルチクラス）、または流用*/

/*-----------------------------------------
    header setting
------------------------------------------*/

header{
width:100%;
    /* PCの幅いっぱいに表示させるための、幅の制限をつけない （  背景色だけ ）*/
background-color: #084197;
}

header h1 {
color: #fff;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
background-size: 28px;
background-position: left center;
padding-left: 35px;
font-size: 1.65rem;
font-weight: normal;
}

    
header .header_inner {
display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
justify-content: space-between;
    /*  水平方向の揃えのオプション ( 両端揃い )*/
height: 100px;
    /* 高さ指定 100px*/
align-items: center;
    /* heightの垂直中央揃えのオプション  */
}


/*-----------------------------------------
    nav_menu setting
------------------------------------------*/
    
nav ul {
display: flex;
    /* 子要素 li の水平方向揃え( 横並び )させるための親要素設定  */
}

nav li a {
display: block;
    /* インライン要素のa タグをブロック要素に変換し、幅と高さを取得できるようにする */
line-height: 40px;
    /* aの高さを40pxに取得 */
padding: 0 16px;
    /* aタグの文字の両端の内側の余白を広げる */
 color: #fff;
 font-size: 1.025rem;
    
}

nav li a:hover {
background-color: #fff;
color: #084197;
}


/*-----------------------------------------
    main_image setting
------------------------------------------*/

.main_image{
background-image: url(../img/main_back_image.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;

height: 450px;
    /* 背景画像を表示には、高さが必要（450pxに設定） */
margin-bottom: 60px;
    /* 次の下のブロックに余白を設定50px */
}



/*-----------------------------------------
    .business（事業内容） setting
------------------------------------------*/

.business{
margin-bottom: 100px;
    /* 次の下のブロックに余白を設定 */
}


.business h2{
margin-bottom: 25px;
border-left: 6px solid #084197;
padding: 6px 0 6px 8px;
font-size: 1.4rem;

}

.business h3{
font-size: 1.1rem;
margin-bottom: 16px;
}


.business ul{
display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
justify-content: space-between;
    /*  水平方向の揃えのオプション ( 両端揃い )*/
font-size: 0.875rem;
}

.business li{
width: 30%;
    /* 横並びした幅のパーセント設定 */
 
}

.business .photo{
margin-bottom: 20px;
box-shadow: 3px 3px 5px #888;
}

.business .text{
line-height: 1.5;
    /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */
letter-spacing: 0.05em;
    /* 一番読みやすい文字間は、letter-spacingの、0.05em～0.08emの間とされてる ただし、教科書も含めて多少のデータの前後あり*/

}


    /*-----------------------------------------
        .consultation（開業の相談） setting
    ------------------------------------------*/
    .consultation{
margin-bottom: 100px;
        /* 次の下のブロックに余白を設定 */
    }


    .consultation h2{
margin-bottom: 25px;
border-left: 6px solid #084197;
padding: 6px 0 6px 8px;
font-size: 1.4rem;
    }

    .consultation h3{
font-size: 1.1rem;
margin-bottom: 22px;
    }

    .consultation .consultation_item{
display: flex;
        /* 子要素、水平方向の揃えの親要素設定  */
justify-content: space-between;
        /*  水平方向の揃えのオプション ( 両端揃い )*/
margin-bottom: 50px;
        /* 次の下のブロックに余白を設定 */

    }
 

    .consultation .consultation_item .photo{
width: 30%;
        /* 幅の取得 */
    }
    .consultation .consultation_item .content{
width: 65%;
        /* 幅の取得 */  
    }
    .consultation .consultation_item .text{
line-height: 1.5;
        /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */    
letter-spacing: 0.05em;
        /* 一番読みやすい文字間は、letter-spacingの、0.05em～0.08emの間とされてる ただし、教科書も含めて多少のデータの前後あり*/
font-size: 0.875rem;
    }

    /*-----------------------------------------
        .map_area and info （基本情報）setting
    ------------------------------------------*/

    .map_area{ 
display: flex;
            /* 子要素、水平方向の揃えの親要素設定  */        
justify-content: space-between;
            /*  水平方向の揃えのオプション ( 両端揃い )*/   
margin-bottom: 100px;     
        }
        
    .map_area h2{
margin-bottom: 25px;
border-left: 6px solid #084197;
padding: 6px 0 6px 8px;
font-size: 1.4rem;
    } 
    .map_area .info{
width: 40%;
    }
    .map_area .map{
width: 50%;
    }

    .map_area .info dl{
display: flex;
flex-wrap: wrap;
font-size: 1.00rem;

}
    .map_area .info dt{
width: 30%;
border-bottom: 1px solid #aaa;
padding-bottom: 8px;
margin-bottom: 21px;
font-weight: bold;
    }
    .map_area .info dd{
width: 70%;
border-bottom: 1px solid #aaa;
margin-bottom: 21px;

    }

    .map_area iframe{
height: 350px;
width: 100%;
    }


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

    footer{
background-color: #084197;
    }


    .footer_inner p{
line-height: 100px;
text-align: right;
font-weight: normal;
    }
    .footer_inner small{
color: #fff;
    }