@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    line-height: 1;
    /* 各ブラウザが持っている外部、余白、行間を初期化する */
    box-sizing: border-box;
    /* 幅を指定した要素（タグ）にborder、paddingを設定した際に要素が広がってしまうことを防ぐため */      
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /*   ここまでフォントファミリー  各OSに適したフォントを用意しておく*/
    /* "Helvetica Neue" macのsafariの英語、Arial mac windowの英語  "Hiragino Kaku Gothic ProN"はmacの日本語、"Hiragino Sans"は前の文字がなかった場合、Meiryoはwindowの日本語 */
    color: #555;
    /* サイト全体の文字色を定義しておく */
}
ul {
    list-style: none;
    /*   liの装飾を削除する  */
}
a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで持っている下線を消しておく */
}
img{
    max-width: 100%;
    /* 親要素の大きさ以上大きくならず、かつ、自身の原寸大以上に大きくならない */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。他の防ぐ方法としてインライン要素をブロック要素に変える方法もあり */
}
/*-----------------------------------------
    pc max- setting   
-----------------------------------------*/
.container {
    /* max- */
    width: 960px;
    margin: 0 auto;
}
/*PCの情報コンテンツの最大幅の設定 ------ 各パーツでこのCSSを再利用（マルチクラス）、または流用*/
/*-----------------------------------------
    header setting
------------------------------------------*/
header .header_inner {
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    height: 100px;
    /* 高さ指定 100px */
    align-items: center;
    /* heightの垂直中央揃えのオプション  */
    justify-content: space-between;
    /* 横並び対象子要素の両端揃い設定 */
}
header h1{
    font-size: 28px;
    color: #333; 
     /* フォントサイズや、その他のデザイン装飾は適宜設定 */
     letter-spacing: .05em;
}
header p{
    font-size: 15px;
    letter-spacing: .05em;  
    /* フォントサイズは適宜設定 */
}
/*-----------------------------------------
    nav_menu setting
------------------------------------------*/
nav{
    /* background-color:#013088;
    margin-bottom: 5px; */
}
nav ul {
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */   
}
nav li{
    border-left: 1px solid #bbb;
    /* 左の枠線設定。色や線種等は適宜設定 */
}
nav li:last-child {
    border-right: 1px solid #bbb;
    /* liの最後の要素に、枠線右の設定 */
}
nav li a {
    display: block;
    line-height: 50px;
    /* aタグに行間50pxで固定の高さ設定 */
    padding: 0 25px;
    /* aタグのテキストに左右のpadding（25px） */
    color: #666;
    /* フォントカラー装飾は適宜設定 */
    font-size: 16px;
    letter-spacing: .07em;
}
nav li a:hover {
    color: #fff;
    background-color: #013088;
}
/*-----------------------------------------
    main_image setting
------------------------------------------*/
.main_image{
    background-image: url(../img/main_back_image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background: url(../img/main_back_image.jpg) no-repeat center/cover; */
    /* 背景画像を表示去るためのショートカットで、下記4行と同じ意味 */
    /*
     background-image: url(../img/main_back_image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
     */
     height: 450px;
    /* 背景画像を表示には、高さが必要（450pxに設定） */
}
/*-----------------------------------------
    content slogan
------------------------------------------*/
 .slogan{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0 70px;
}
.slogan h2{
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.slogan p{
    line-height: 1.7;
}
/*-----------------------------------------
    .business（事業内容） setting
------------------------------------------*/
.business{
    margin-bottom: 100px;
    /* 次の下のブロックに余白を設定 */
}
.business ul{
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    justify-content: space-between;
    /*  水平方向の揃えのオプション ( 両端揃い )*/
}
.business li{
    width: 30%;
    /* 幅の取得 30% */
}
main h3{
    margin: 6px 0;
    padding: 10px 8px 8px;
    background-color: #013088;
    color: #fff;
    font-size: 20px;
}
.business .photo{
    margin-bottom: 16px;
}
.business .text{
    line-height: 1.7;
    /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */
    letter-spacing: .05em;
    /* 一番読みやすい文字間は、letter-spacingの、0.05em～0.08emの間とされてる */
   padding: 2px;
    /* 内側の余白の調整 */
    font-size: 14px;
    /* フォントサイズ 14px程度 */
}
/*-----------------------------------------
    .consultation（開業の相談） setting
------------------------------------------*/
.consultation{
  margin-bottom: 100px;
    /* 次の下のブロックに余白を設定 　100px程度 */
}
.consultation h4{
    margin: 4px 0 14px;
    font-size: 18px;
    color: #555;
    /* 完成系を見ながら装飾は適宜設定 */
}
.consultation .consultation_item{
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    justify-content: space-between;
    /*  水平方向の揃えのオプション ( 両端揃い )*/
    margin-bottom: 40px;
     /* 次の下のブロックに余白を設定 */
}
.consultation .consultation_item .consultation_photo{
    width: 30%;
    /* 幅の取得 30%*/
}
.consultation .consultation_item .consultation_text{
    width: 65%;   
    /* 幅の取得 65%*/  
}
.consultation .consultation_item .consultation_text p{
    line-height: 1.7;
    /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */    
    letter-spacing: .05em;
    /* 一番読みやすい文字間は、letter-spacingの、0.05em～0.08emの間とされてる ただし、教科書も含めて多少のデータの前後あり*/
    font-size: 14px;
    /* フォントサイズ 14px程度 */
}
/*-----------------------------------------
    .map_area and info （基本情報）setting
------------------------------------------*/
.map_area{ 
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */        
    justify-content: space-between;
    /*  水平方向の揃えのオプション ( 両端揃い )*/
    margin-bottom: 100px;
    /* 次の下のブロックに余白を設定 　100px程度 */
        } 
.map_area .info{
    width: 40%;
     /* 幅の取得 40%*/
    font-size: 14px;
    /* フォントサイズ 14px程度 */
}
.map_area .map{
    width: 50%;
    /* 幅の取得 50%*/
}
.map_area .info dl{
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    flex-wrap: wrap;
    /* 親要素の幅から溢れ出た場合に、折り返してくれる設定 */
    gap: 20px 0;
    /* gapの設定。y座標が20px程度。x座標は、0 */
}
.map_area .info dt{
    width: 30%;
    /* 幅の取得 30%*/
    line-height:30px;
    /* line-heightで、1行の文字列を垂直中央に配置 30px */
    border-bottom: 1px solid #bbb;
    /* 枠線下の設定 */
    font-weight: bold;
    /* フォントウエイト・bold設定 */
}
.map_area .info dd{
    width: 70%;
    /* 幅の取得 70%*/
    line-height: 30px;
   /* line-heightで、1行の文字列を垂直中央に配置 30px */
    border-bottom: 1px solid #bbb;
    /* 枠線下の設定 */
}
.map_area iframe{
     width: 100%;
    /* iframeの場合は、親要素からのパーセンテージ設定 100% */
    height: 300px;
    /* 多kさは適宜（300px）設定 */
}
/*-----------------------------------------
    footer setting
------------------------------------------*/
footer{
    background-color: #013088;
}
.footer_inner p{
    margin-right: 50px;
    text-align: right;
    line-height: 100px;
}
.footer_inner small{
    color: #fff;
}