@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    line-height: 1;
    /* 各ブラウザが持っている外部・内部余白、行間を初期化する */
    box-sizing: border-box;
    /* 幅を指定した要素（タグ）にborder、paddingを設定した際に要素が広がってしまうことを防ぐため */      
}

body {
    font-family: 'Verdana','Hiragino Sans','Meiryo',sans-serif;
    /* 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: #333;
    /* サイト全体の文字色を定義しておく */

}


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


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





/*-----------------------------------------
    各パーツ共有 - setting   
-----------------------------------------*/

.container {

    width: 960px;
    margin: 0 auto;

    /* 最大値、1024px それ以下可変　max-width使用 */
    margin: 0 auto;

    
}
/* 各パーツ共有の設定 ------ 各パーツでこのCSSを再利用（マルチクラス）、または流用  */

header, .slogan, .content_a, .content_b, .map_area {
    background-color: #fff;
}



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

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

}



header p{
    font-size: 14px;
    /* フォントサイズは適宜設定 */
    padding-left: 23px;
    /* 余白も適宜 */
}

header .logo{
    padding-left: 20px;

}

.header_inner{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
     /* positionをfixedにし、LPの時にロゴとナビがいつも見えるよう設定 */
     /* 位置 top:0 幅 positionを使うと幅がなくなるので、w100p 背景色を白に設定 */

}


/*-----------------------------------------
    nav_menu setting
------------------------------------------*/


nav ul {
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */   
}

nav li a {
    display: block;
    /* aタグをブロックボックスに設定してマウスの反応範囲を広げる */
    padding: 12px 25px;
    /* aタグのテキストに上下（12x）、左右のpadding（25px） */
    color: #444;
    /* フォントカラー装飾は適宜設定 */
    transition: 0.3s;
    /* アニメーション効果 */


}

nav li a:hover {
    color: #fff;
    background-color: #555;
    /* ホバー時の背景色、フォントカラーは適宜 */
}



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

.main_image{
    background-image: url(../img/melbourne2.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    
     height: 500px;

    /* 背景画像を表示には、高さが必要（450pxに設定） */

}



/*-----------------------------------------
   main mainの中で共通なタグの設定
------------------------------------------*/
main h3{
    background-color: #f2f2f2;
    border-left: 4px solid #555;
    padding: 8px 10px;
    font-size: 20px;
    margin-bottom: 10px;
    /* 文字の装飾、完成形を見ながら適宜設定 */
}

main h4{
    font-size: 18px;
    margin-bottom: 15px;
    /* 完成系を見ながら装飾は適宜設定 */
}


/*-----------------------------------------
    content slogan
------------------------------------------*/
 .slogan{
    text-align: center;
    /* テキスト中央揃い */
    padding: 60px 0;
    /* 内側余白、上下60px、左右0、下側余白100px程度で設定 */

     padding-bottom: 100px; 
/*     margin-bottom: 100px; */


}

.slogan h2{
    font-size: 24px;
    /* フォントサイズ、24pxほどに設定 */
    margin-bottom: 40px;
    /* 見出しの次のブロックの段落との下側の外余白を */


}

.slogan p{
    line-height: 2;
    /* 行間設定、適宜　一般的には、1.5前後〜2前後での行間設定がよしとされる */
}




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

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

    padding-bottom: 100px;

}

.content_a ul{

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

.content_a li{
    width: 300px;
    /* 幅の取得 300px */
}

.content_a .photo{
    margin-bottom: 5px;
    /* 下のブロックへの下側の外部余白設定 */
}

.content_a .text{
    line-height: 1.8;
    /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */
}


/*-----------------------------------------
    .content_b（開業の相談） setting
------------------------------------------*/
.content_b{
    /* .content_b::beforeの背景画像を表示させるための次のブロックへの余白 */
    margin-bottom: 400px;

}

   .content_b::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
     height: 100%;
    background-image: url(../img/melbourne1.jpg);
    background-position: center;
    background-size: cover;
     z-index: -1;
    /* 擬似要素に、全画面表示の背景画像の設定と、1つ下の階層に表示させるためのz-index:-1設定 */
 }

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


.content_b .content_b_item .text{
   width: 600px;
    /* 幅の取得 600px*/  
}
.content_b .content_b_item .text p{
    line-height: 1.8;
    /* 一番読みやすい行間は、line-heightの、1.5～2の間とされてる */    
}


/*-----------------------------------------
    table_section（料金表） setting
------------------------------------------*/
.table_section {
    margin: 60px 0;
    padding-bottom: 20px;

}

.table_section h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.4em;
}

.table_section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;

}

.table_section th,
.table_section td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
}

.table_section th {
    background-color: #f0f0f0;
    font-weight: bold;
}
.table_section p {
    line-height: 1.8;
}



/*-----------------------------------------
    map area setting
------------------------------------------*/

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

.map_area .info{
    width: 960px;

}
/*
.map_area .map{
    width: 500px;
}
*/

.map_area .info dl{
    display: flex;
    /* 子要素、水平方向の揃えの親要素設定  */
    flex-wrap: wrap;
    /* 親要素の幅から溢れ出た場合に、折り返してくれる設定 */ 
    align-items: center;
    /* 高さの中央揃えのオプション  */
    gap:10px 0;
    /* gapの設定。y座標が10px程度。x座標は、0 */
}

.map_area .info dt{
    width: 30%;
    /* 幅の取得 30%*/
    padding: 15px 10px;
   /* 上下の内側余白の設定 */
    font-weight: bold;
    /* フォントウエイト・bold設定 */
}

.map_area .info dd{
   width: 70%;

}

.map_area iframe{
    width: 100%;
    /* iframeの場合は、親要素からのパーセンテージ設定 100% */
    height: 350px;
    /* 高さは適宜（350px）設定 */
}

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

footer{
    background-color: #555;
}


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

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

@media screen and (max-width: 480px) {

  /* 画面幅を可変にする */
  .container {
    width: 100%;
    padding: 0 15px;
  }

  /* ヘッダー対策：bodyに余白 */
  body {
    padding-top: 75px;
  }

  /* ヘッダーナビ：縦積みに */
  header .header_inner {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
  }

  nav li a {
    padding: 10px 15px;
    font-size: 14px;
  }

  /* メイン画像の高さ調整 */
  .main_image {
    height: 300px;
    background-position: center;
  }

  /* スローガン */
  .slogan {
    padding: 40px 10px 60px;
  }

  .slogan h2 {
    font-size: 20px;
  }

  /* content_a の横並びを縦に */
  .content_a ul {
    flex-direction: column;
    gap: 30px;
  }

  .content_a li {
    width: 100%;
  }

  /* content_b 縦積み */
  .content_b .content_b_item {
    flex-direction: column;
  }

  .content_b .content_b_item .text {
    width: 100%;
  }

  /* テーブル幅 */
  .table_section table {
    font-size: 14px;
  }

  /* map_area 縦積みにして、iframe幅調整 */
  .map_area {
    flex-direction: column;
    gap: 30px;
  }

  .map_area .info {
    width: 100%;
  }

  .map_area iframe {
    height: 300px;
  }

  /* フッターの文字中央に */
  .footer_inner p {
    text-align: center;
    line-height: 2;
    padding: 20px 10px;
  }

}