@charset "utf-8";



/* ==================== ＜ページ全体＞ ==================== */
html,body {
  margin: 0;	padding: 0;
  font-size: 15px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
  height: 100%;
}
body {
  font-family: "Meiryo","メイリオ","Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino KaKu Gothic Pro" ,Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, sans-serif;
  box-sizing: border-box;			/* paddingで指定した値をwidth,heightに含む（初期状態では含まれない） */
  margin: 0;	padding: 0;
  background-color: #fff;
  color: #333;
  line-height: 120%;
}

a:link {
  color: #004080;
  text-decoration: none;
}
a:hover {
  color: #005ebb;
  text-decoration: underline;
}
a:visited {
  color: #004080;
}


/* containerブロック
---------------------------------------- */
#container {
  width: 100%;
}


/* mainブロック
---------------------------------------- */
main {
  margin: 0;
  padding: 10px 0;
}


/* headerブロック
---------------------------------------- */
/* ヘッダー（DIVING LOGBOOK）*/
header {
  display: flex;					/* flexボックスを使う指定 */
  justify-content: center;			/* flexボックス内横方向中央寄せ */
  align-items: center;				/* flexボックス内縦方向中央寄せ */
  background-color: #3399ff;		/* 背景色（濃い水色） */
  color: #fff;						/* 文字色 */
  width: 100%;
}

/* ヘッダーロゴ画像 */
header h1#logo1n {				/* DIVING LOGBOOKの画像（ウィンドウ幅小の時に表示） */
  display: block;
  width: 320px;					/* 画像の幅 */
  margin: 0;
  order: 1;						/* 表示させる順番。「#menubar_hdr」「#logo」「#header-icon」で指定していて、数字の「小さな順」に左から並ぶ */
}
header h1#logo2 {				/* OKINAWA❤DIVINGの画像（常に表示） */
  width:100%;
  margin: 0px;
}
header h1#logo2w {				/* OKINAWA❤DIVINGの画像（ウィンドウ幅大の時に表示）*/
  display: none;
  width:100%;
  margin: 0;
}
header h1#logo1n img, header h1#logo2 img, header h1#logo2w img {
  width:100%;
}



/* ↑↑↑↑↑↑ここまではindex.phpで使用、ここからはそれ以外で使用 ↓↓↓↓↓ */





/* ==================== ＜共通＞ ==================== */
/* 罫線 */
div.v-line_l {			/* 縦罫線左（メニューとコンテンツの区切り線） */
  width: 1px;
  margin-right: 20px;
  border-left: 1px solid #ccc;
}
div.v-line_r {			/* 縦罫線右（コンテンツとダイブリンクの区切り線） */
  width: 1px;
  margin-left: 20px;
  border-left: 1px solid #ccc;
}
div.h-line {			/* 横罫線（区切り線） */
  width: 100%;
  border-top: 1px solid #ccc;
}
/* 戻る */
div.ret {
  margin: 20px 0px 20px 10px;
  padding: 20px 0 0 20px;
  text-align: left;
  border-top: 1px solid #ccc;
}
div.ret_wide {			/* 戻る（ウィンドウ幅小の時に非表示） */
  display: none;
}
div.ret_nrw {			/* 戻る（ウィンドウ幅小の時に表示） */
  display: block;
}
div.home {				/* ホームに戻る */
  margin-left: 286px;
  display: inline-block;
  text-align: right;
}





/* ========== ＜ログブック（logbook-page.php）、ダイビング旅行（trip-page.php）＞ ========== */

/* ログブック
---------------------------------------- */
/* ----- ログブック全体（logbook.phpでは枠で囲まれたブロック、trip.phpでは枠は無いが3本目～1本目までのブロック、ページリンクは含まず） ----- */
#logbook {
  margin: 3px 3px 3px 3px;
  padding: 5px 5px 50px 5px;
  borer: 1px solid green;
}


/* ----- インプレッション、コメント、サイン ----- */
#logbook section.logbook {
  margin-top: 40px;
  line-height: 130%;
}
#logbook section h2 {
  margin-bottom: 10px;		/* これが無いとなぜか次との行間が空きすぎてしまう */
  text-align: left;
  text-decoration:underline;
  font-size: 1.3em;
  font-style: italic;
  font-weight: bold;
  border:1px solid white;		/* これが無いとなぜか灰色線が出てしまう */
}
#logbook section p {
  margin: 0;
  padding: 0 2%;
}


/* ----- No.と日付 ----- */
#logbook #NoDate, .NoDate {
  width: 100%;
}
#logbook #NoDate td, .NoDate td {
  width: 50%;
}
#logbook #no, .no {
  text-align: left;
  font-size: 0.8em;
}
#logbook #date, .date {
  text-align: right;
  font-size: 0.8em;
}


/* ----- エリア・ポイント ----- */
#logbook table#PlacePoint {
  width: 100%;
}
#logbook table#PlacePoint td{
  width: 50%;
  height: 60px;
  text-align: center;
  border-style: solid;
  border-color: #333;
}
#logbook table#PlacePoint td#place {
  position: relative;								/* ※ */
  border-width: 3px 1px 3px 3px;
  font-size: 1.2em;
}
#logbook table#PlacePoint td#place div {
  position: absolute; top: 2px; left: 2px;			/* 上の※と合わせて、枠左上を基準に位置決めを行う */
}
#logbook table#PlacePoint td#point {
  position: relative;
  border-width: 3px 3px 3px 1px;
  font-size: 1.1em;
}
#logbook table#PlacePoint td#point div {
  position:absolute; top:2px; left:2px;
}
#logbook table#PlacePoint div {
  text-indent:5px;
  color:gray;
  font-size:0.5em;
}


/* ----- ダイビングサービス ----- */
#logbook table#service {
  margin-top: 5px;
  width: 100%;
  font-size: 0.8em;
}
#logbook table#service td {
  text-align:right;
  padding-right:5px;
}


/* ----- ダイブプロファイル ----- */
#logbook div#profile {
  position: relative;				/* ※ */
  margin-top: 0px;
  margin-bottom: 0px;				/* グラフとその下のテキスト（Suit,Weight,Tank）の間隔調整 */
  font-size: 0.7em;
  text-shadow: 1px 1px 1px #ffffff;
}
#logbook div#profile img {
  width: 100%;
  margin-top: 0px;
  border: 1px solid #5b9bd5;
}
#logbook div#profile div.style   { position:absolute; top:1.5%; left:3% }		/* 上の※と合わせて、枠左上を基準に位置決めを行う */
#logbook div#profile div.weather { position:absolute; top:1.5%; left:33%; }
#logbook div#profile div.en_time { position:absolute; top:11%; left:11%; }
#logbook div#profile div.d_time  { position:absolute; top:11%; left:45%; }
#logbook div#profile div.ex_time { position:absolute; top:11%; left:88%; }
#logbook div#profile div.air     { position:absolute; top:50%; left:69%; }
#logbook div#profile div.visi    { position:absolute; top:55%; left:69%; }
#logbook div#profile div.temp    { position:absolute; top:60%; left:69%; }
#logbook div#profile div.depth   { position:absolute; top:68%; left:25%; }


/* ----- ダイブデータ ----- */
#logbook div#data {
  display: none;
  padding-left: 10px;
}
#logbook div#data div {
  margin:0px;
  font-size: 0.8em;
}

/* ----- マップ ----- */
#logbook section#map {
  margin-bottom: 10px;
}
#logbook section#map div {
  width: 100%;
}
#logbook section#map div img {
  width: 65%;
  border: 1px solid #5b9bd5;
}


/* ----- 写真 ----- */
#logbook section#photo, section.photo {
  margin-top: 40px;
  text-align: center;
}
#logbook section#photo div, #logbook section.photo div, #logbook div#photo div {		/* div#photoは写真検索結果画面で使用 */
  width: 32%;
  margin-bottom: 5px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  font-size: 0.7em;
  line-height: 130%;
  /* このままではコメントが英文の時に改行されないでdiv領域からはみ出てしまうが、word-wrap:break-word;を入れてあげると改行されるようになる */
}
#logbook section#photo img, #logbook section.photo img, #logbook div#photo img {
  width: 100%;
  margin-bottom: 5px;		/* 写真とその下のテキストの間隔 */
}





/* ========== ＜ダイビング旅行（trip-page.php）＞ ========== */
/* トリップ名、日付 */
div.trip_title {
  margin: 20px 5px 0px 5px;
  padding: 10px;
  background-color: #84d1f3;
  border-radius: 5px;			/* 角を丸める */
  box-shadow: 2px 2px 4px;		/* 影をつける */
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 130%;
}


/* 1ダイブブロック */
#logbook div.dive {
  margin: 50px 0;
}

/* ポイント名 */
#logbook div.trip_point {
  display: flex;
  padding: 8px 16px;
  background: linear-gradient(to right, #0260c0, #e4eef8);
  color: #fff;
}
#logbook div.trip_point br {	/* 長いポイント名は<br>を入れているので、それを無効にする */
  display: none;
}
#logbook div.trip_point div.point {
  width: 95%;
  font-size: 1.2em;
  font-weight: bold;
}
#logbook div.trip_point div.logbooklink {
  width: 40px;
  text-align: center;
  font-size: 0.8em;
  background-color: #a0c0f0;
}

/* ダイブデータ */
#logbook div.trip_dive_data {
  margin: 3px;
  font-size: 0.7em;
}

/* ----- インプレッション、コメント ----- */
#logbook section.trip {
  margin-top: 20px;
  line-height: 130%;
}
#logbook section.trip h2 {
  font-size: 1.1em;
  font-weight: normal;
}





/* ========== リンク ========== */
/* ----- ページブックリンク（前ダイブ・次ダイブ／前日・翌日／Homeなど） ----- */
div#page_link {
  text-align: center;
  font-size: 0.7em;
/*  border: 1px solid brown; */
}
div.page_link_l {
  display: inline-block;
  width: 36%;
  text-align: right;
/*  border: 1px solid blue; */
}
div.page_link_c {
  display: inline-block;
  margin-top: 10px;
/*  border: 1px solid red; */
}
div.page_link_c1 {
  width:30px;
}
div.page_link_c2 {
  width:55px;
}
div.page_link_c3 {
  width:80px;
}
div.page_link_r {
  display: inline-block;
  width: 36%;
  text-align: left;
/*  border: 1px solid green; */
}
div.page_link_home {
  display: inline-block;
  width: 99%;
  margin-top: 20px;
  text-align: center;
  font-size: 0.7em;
}


/* ----- ダイビングリンク（ログブックの下 or 右サイド） ----- */
div#dive_link {
  width: 256px;
  padding-left: 20px;
  line-height: 160%;
  white-space: nowrap;			/* 改行させない（これがないとダイビングリンクが右に来たときに改行が多くなりすぎてしまう）*/
/*  border: 1px solid green; */
}
div#dive_link a.right_disp {	/* ダイビングリンクが右側（ウィンドウ幅大）の時に表示 */
  display: none;
}





/* ========== ＜一覧表示（list-page.php）＞＜写真検索（ph_search-page.php）＞ ========== */
#list div.title {					/* ----- 一覧表示のタイトル ----- */
  margin: 10px 0 5px 0;
  text-align: center;
  text-decoration: underline;
  font-size: 1.1em;
}

/* ----- 一覧表示、写真検索入力画面のテーブル ----- */
#list div.table, #ph_search table {	
  display: flex;					/* justify-contentと合わせて、テーブルを中央に配置する（margin:0 auto;ではうまくいかない） */
  justify-content: center;
}
#list table {
  margin-left:auto;
  margin-right:auto;
  width: 99%;
  font-size: 0.8em;
}
#list table td, #ph_search table td {
  border: 1px solid gray;
}
#list table td {
  padding: 2px;
  text-align: center;
}
  table td span.nrw_disp {	/* ウィンドウ幅小の時は表示 */
    display: inline;
  }
  table td span.wide_disp {	/* ウィンドウ幅小の時は非表示 */
    display: none;
  }

#ph_search table td {
  padding: 5px;
}
#list td.right {
  text-align: right;
  font-size: 0.9em;
}


/* ========== ＜写真検索（ph_search-page.php）＞ ========== */
/* ---------- 検索名入力画面 ---------- */
#ph_search p {						/* 写真検索の説明文 */
  margin-top: 10px;
  text-align:center;
}
#ph_search table {
  margin:3px;
  font-size:12px;
  border-collapse:collapse;
}
#ph_search div.under_ref {			/* 写真検索のテーブルの下の補足説明 */
  text-align: center;
  font-size: 0.7em;"
}
#ph_search form {					/* 写真検索の送信フォーム */
  border:1px solid gray;
  padding: 30px 0px;
  margin: 30px 20px;
  text-align:center;
}



/* ---------- 検索結果表示画面？？ ---------- */





#logbook div#photo div.title {
  width: 100%;
  text-align: center;
  text-decoration:underline;
  font-size: 18px;
}
#logbook div#photo div.msg {
  width: 100%;
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
}










/*■画面幅600px以上の設定
======================================================================================================================================================*/
@media screen and (min-width:600px) {
  /* ログブック
  ---------------------------------------- */
  #logbook table#PlacePoint td#place {
    font-size: 1.3em;
    line-height: 120%;
  }
  #logbook table#PlacePoint td#point {
    font-size: 1.2em;
    line-height: 120%;
  }
  #logbook div#profile_data {
    display: flex;					/* グラフとダイブデータを横並びに置く */
    width: 100%;
  }
  #logbook div#profile {
    width: 50%;
  }
  #logbook div#profile div {
    position: static;				/* 600px以下でabsoluteにしているので、それを解除するため（解除しないと非表示にならない） */
    display: none;					/* グラフ内のデータ表示を非表示にする */
  }
  #logbook div#data {
    width: 50%;
    display: inline;				/* 600px以下ではnoneにしているので、それを解除する */
  }
  
  
  #logbook section#map div {
    width: 60%;
  }
  
  
  
  
  /* ========== ＜一覧表示（list-page.php）＞＜写真検索（ph_search-page.php）＞ ========== */
  #list table, #ph_search table {
    width: 560px;
  }
  #ph_search p {
    width: 560px;
  }
  #ph_search form {
    width: 530px;
  }
  #ph_search div.under_ref {
    text-align: left;
    padding-left: 200px;
  }

}





/*■画面幅950px以上の設定
======================================================================================================================================================*/
@media screen and (min-width:950px) {
  /* ==================== ＜ページ全体＞ ==================== */
  /* containerブロック
  ---------------------------------------- */
  #container {
    width: 1200px;
  }
  
  
  /* headerブロック
  ---------------------------------------- */
  /* ヘッダー（DIVING LOGBOOK）*/
  header {
    background-color: #ffffff;		/* 背景色（ウィンドウ幅小の時に色付けしているので白にする（transparentで透明にしてもよい）） */
  }
  /* ヘッダーロゴ画像 */
  header h1#logo1n {				/* DIVING LOGBOOKの画像（ウィンドウ幅大で非表示） */
    display: none;
  }
  header h1#logo2w {				/* OKINAWA❤DIVINGの画像（ウィンドウ幅大で表示）*/
    display: block;
  }
  
  
  /* mainブロック
  ---------------------------------------- */
  main {
    display: flex;						/* 横並びにする */
	align-items: stretch;				/* 高さを他のdivとそろえる */
    margin: 20px 0px 0px 235px;
  }
  
  /* ↑↑↑↑↑↑ここまではindex.phpで使用、ここからはそれ以外で使用 ↓↓↓↓↓ */
  
  
  
  
  /* ========== ＜共通＞ ========== */
  div.ret_wide {					/* 戻る（ウィンドウ幅大の時に表示） */
    display: block;
  }
  div.ret_nrw {						/* 戻る（ウィンドウ幅大の時に非表示） */
    display: none;
  }
  
  
  /* ========== ＜ログブック（logbook-page.php）、ダイビング旅行（trip-page.php）＞ ========== */
  /* ログブック
  ---------------------------------------- */
  #logbook {
    margin: 0;
    width: 680px;
  }
  
  /* トリップ名、日付 */
  div.trip_title {
    margin: 0px 5px;
  }
  
  
  /* ========== リンク ========== */
  /* ----- ダイビングリンク（ログブックの下 or 右サイド） ----- */
  div#dive_link {
    font-size: 0.9em;
  }
  div#dive_link a.under_disp {		/* ダイビングリンクが下側（ウィンドウ幅小）の時に表示 */
    display: none;
  }
  /* ----- ダイビングリンク中のトリップ名を改行するかどうか ----- */
  div#dive_link a.right_disp {		/* ダイビングリンクが右側（ウィンドウ幅大）の時に表示 */
    display: inline;
  }
  
  
  
  
  /* ========== ＜一覧表示（list-page.php）＞＜写真検索（ph_search-page.php）＞ ========== */
  /* ----- 一覧表示のタイトル ----- */
  #list div.title {
    margin-bottom: 20px;
    padding-left: 300px;
    text-align: left;
    text-decoration: underline;
    font-size: 1.4em;
  }
  
  /* ----- 写真検索の説明文 ----- */
  #ph_search p {
    width:700px;
    margin-left: 100px;
  }
  
  /* ----- 一覧表示、写真検索入力画面のテーブル ----- */
  #list div.table, #ph_search table {
    margin-left: 100px;
  }
  #list table, #ph_search table {
    width: 730px;
  }
  #list table td {
    padding: 3px 5px;
  }
  
  #list table td br {	/* 長いポイント名は<br>を入れているので、それを無効にする（このままではポイント名以外も無効になるが特に問題なし） */
    display: none;
  }
  #list table td span.nrw_disp {	/* ウィンドウ幅大の時は非表示 */
    display: none;
  }
  #list table td span.wide_disp {	/* ウィンドウ幅大の時のみ表示 */
    display: inline;
  }
  
  /* ----- 写真検索のテーブルの下の補足説明 ----- */
  #ph_search div.under_com {
    padding-left: 370px;
  }
  
  /* ----- 写真検索の送信フォーム ----- */
  #ph_search form {
    width: 665px;
    margin-left: 120px;
  }
  
}





/*■画面幅1200px以上の設定
======================================================================================================================================================*/
@media screen and (min-width:1200px) {


}