@charset "utf-8";
@import url("../css/column.css");

/*更新日*/
#update { margin: 0 0 10px; font-size: 12px; text-align: right; line-height: 1.3em;}

/*見出し*/
h2 { margin: 0 0 15px;}

/*お役立ち講座バナー*/
@media screen and (max-width:999px){
  aside > a { display: none;}
  main .dis-non { display: block; font-size: 14px; line-height: 1.3em;}
}

/**============================================================================================ メインコンテンツ **/

section { margin: 0 0 20px;}

/*section見出し*/
h3 {
  position: relative;
  margin: 0 0 20px; padding: 7px 7px 7px 32px;
  background: #c1e7ff;
  color: #004c7c; font-size: 17px; font-weight: 600; line-height: 1.4em;
}
h3::before{
  display: block;
  position: absolute; top: 7px; left: 7px;
  width: 20px; height: 20px;
}
#index01 h3::before{ content: url(../images/icon-no1_w20.gif);}
#index02 h3::before{ content: url(../images/icon-no2_w20.gif);}
#index03 h3::before{ content: url(../images/icon-no3_w20.gif);}

main a:hover img { opacity: 0.7;}

main .flex,
main .flex a:has(img) {
  display: flex;
}
main .flex { justify-content: space-between; flex-wrap: wrap;}
main .flex > * { width: calc(50% - 7px); margin: 0 0 15px; border: solid 1px #ccc;}
main .flex > * > * { padding: 5px;}
main .flex > * > *:not(p) { text-align: center;}
main .flex > * > div:first-child { background: #e5fcfd; font-weight: bold;}
main .flex > * > *:has(img) {
  justify-content: center; align-items: center;
  height: 210px;
  border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;
}

@media screen and (max-width:699px){
  main .flex { display: block;}
  main .flex > * { width: 100%;}
}

main .disc { padding: 0 0 0 30px; list-style: disc;}
main .dis-tbl > * { display: table-cell; vertical-align: middle;}

/****************************** アンカーの種類 ******************************/

#index01 h3 { margin: 0 0 10px;}
#index01 > p { margin: 0 0 10px; font-size: 1.2em; font-weight: 600;}
#index01 .intro { padding: 20px 0; border-top: dotted 1px #666; border-bottom: dotted 1px #666; }
#index01 .intro p { font-size: 0.9em; line-height: 1.5em;}
#index01 .intro p:first-child { margin: 0 0 20px;}
#index01 span { display: block; margin: 20px 0; color: #d00; font-size: 0.8em;}

/*主流アンカー紹介*/
#index01 .anchor {
  margin: 0 0 20px;
  border: solid 1px #d2ecfe;
}
#index01 .anchor > * {
  display: table;
  box-sizing: border-box; width: 100%;
}
#index01 .anchor > *:first-child { padding: 10px; background: #e5fcfd;}
#index01 .anchor > *:last-child { padding: 20px; font-size: 0.9em; line-height: 1.5em;}
#index01 .anchor > * > * {
  display: table-cell; vertical-align: top;
}

#index01 .anchor .fw_b { width: 320px;}
#index01 li { position: relative; padding: 0 0 0 20px; font-size: 0.8em; line-height: 1.3em;}
#index01 li::before {content: "\025b6"; position: absolute; top: 0; left: 0; color: #ff6c00;}
#index01 .anchor > *:last-child a { width: 200px; padding: 0 10px 0 0;}
#index01 .anchor .ta_r { margin: 20px 0 0; color: #000080; font-size: 1.2em; font-weight: bold;}
#index01 .anchor .m-t5 { color: #d00;}

@media screen and (max-width:699px){
  #index01 .anchor > *,
  #index01 .anchor > * > * { display: block; width: 100%;}
  #index01 .anchor > *:last-child a { margin: 0 0 10px; padding: 0;}
}

/*アンカー適応地質表*/
#index01 table { width: 100%; margin: 0 0 7px; table-layout: fixed; font-size: 14px;}
#index01 caption { margin: 0 0 7px; color: #800000; font-size: medium; font-weight: bold;}
#index01 tr > * { padding: 5px; border: solid 1px #ccc;}
#index01 tr > *:first-child { width: 60%;}
#index01 th { background: #dcdcdc;}
#index01 tr > td:not(:first-child) { text-align: center;}
#index01 .ta_c { margin: 0 0 20px; color: #d00; font-size: 12px; font-weight: bold;}

/*アンカリングに役立つアイテム*/
#index01 h4 {
  height: 30px;
  margin: 0 0 10px; padding: 0 0 0 8px;
  background: url(/info/newnnm/images/title-bg.gif);
  color: #fff; font-size: 17px; font-weight: 600; line-height: 1.8em;
}
#index01 .flex { font-size: 0.9em; line-height: 1.5em;}

/****************************** アンカリングによる係留、桟橋への係留 共通 ******************************/
#index02,
#index03 { line-height: 1.3em;}

#index02 > *:not(h3),
#index03 > *:not(h3) { border: solid 1px #999;}

#index02 > p,
#index03 > p { margin: 0 0 20px; padding: 3px; background: #ffefd5; font-size: 14px;}

#index02 h4,
#index02 h4 + div,
#index03 h4,
#index03 h4 + div { padding: 5px;}

#index02 h4,
#index03 h4 {  
  background: #2e8b57;
  color: #dcdcdc; font-size: medium; font-weight: bold;
}

#index02 h4 + div,
#index03 h4 + div {
  margin: 0 0 20px;
  transform: translateY(-1px);
}

#index02 table,
#index03 table { width: 100%; background: #f5f5f5; font-size: 14px; table-layout: fixed;}
#index02 tr > *,
#index03 tr > * { padding: 5px; border: solid 2px #808080; text-align: left; vertical-align: top;}

/****************************** アンカリングによる係留 ******************************/
/*アンカリングの４方法*/
#index02 .flex > * > div:first-child { background: none; text-align: left;}
#index02 .flex > * { margin: 0 0 6px; border: solid 2px #808080;}
#index02 .flex > * > * { padding: 3px;}
#index02 .flex > * > *:has(img) { height: auto; border-top: solid 2px #808080; border-bottom: solid 2px #808080;}

@media screen and (max-width:699px){
  #index02 .flex { display: flex;}
  #index02 .flex > * { width: calc(50% - 7px);}
}

/*例えば・・・*/
#index02 dt ,#index02 dd { display: inline-block; vertical-align: top;}
#index02 dt::after { content: "：";}
#index02 dd { width: calc(100% - 60px);}

#index02 tr > *:first-child { width: 155px;}
#index02 thead img { display: block; margin: auto;}
#index02 tbody th { font-weight: 400; white-space: nowrap;}

/*把駐力を高める「アンカーチェーン」装着の効果*/
#index02 .dis-tbl > *:last-child { width: 100px;}

/*マークブイ、モニター(重量物)の使用*/
#index02 h4 + div:has(.rf) { padding: 5px 5px 20px 5px;}


/****************************** 桟橋への係留 ******************************/
#index03 h4 + div { font-size: 12px;}

/*？？係船のギモン？？*/
#index03 h4:first-of-type {  
  background: #dc143c;
  color: #ff0; font-size: 18px;
}
#index03 div:has(.disc) .fw_b { font-size: medium;}

/*まずは基本の・・・ロープワーク*/
#index03 h4 + div > p { color: #006633; font-size: medium;}
#index03 h5 { font-size: medium;}
#index03 h5 + div:not(:last-of-type) { margin: 0 0 20px;}

#index03 dt ,#index03 dd { display: inline-block; vertical-align: top;}
#index03 dt { width: 70px; text-align: right; text-decoration: underline;}
#index03 dd { width: calc(100% - 87px); padding: 0 0 0 12px; text-indent: -12px;}
#index03 dd::before { content: "：";}

/*係船方法：例えば・・・*/
#index03 table { font-size: 12px;}
#index03 tr > *:first-child { width: 95px;}
#index03 thead th { text-align: center;}
#index03 tbody th { white-space: nowrap;}

/*フェンダー*/
#index03 .dis-tbl > *:last-child { max-width: 350px;}
#index03 .dis-tbl p:not(:last-of-type) { margin: 0 0 30px;}

/*係船に役立つアクセサリーパーツ*/
#index03 h4 + div:last-of-type a { display: block; text-align: center;}
#index03 h4 + div:last-of-type a:first-child { margin: 20px 0 0; font-weight: bold;}

/*--LastUp2025.07.25_shinkai--*/