/**** Base styles ****/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
vertical-align: baseline;
-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html {
overflow-y: scroll;
}
.homepage {
color: #222;
line-height: 1.6em;
background-color: #b0c4de;
max-width: 1150px;
margin: 0 auto;
}
p {
/* margin: 0 1em ;*/
margin-top:0;
margin-bottom:0;
padding: 0;
border: 0;
vertical-align: baseline;
/* line-height:1.3em;*/
text-indent:1em;
font-size:16px;
}
a {
color: #191970;
text-decoration: none;
}
a:hover {
color: #5f9ea0;
}
a:active {
background: hsla( 0, 100%, 100%, 0.5 );
}
/**** リンク先がブログの場合、ｇマーク画像をリンクの後に表示 ****/
div.item a[href^="http://blog.goo.ne.jp/gyororin"]:after
{
content: url(../images/gooicon.png);
vertical-align: middle;
margin: 2px 2px;
}
#jigyo a[href^="http://blog.goo.ne.jp/gyororin"]:after
{
content: url(../images/gooicon.png);
vertical-align: middle;
margin: 2px 2px;
}
/**** リンク先がpdfファイルの場合、pdfアイコンをリンクの後に表示 ****/
a[href$=".pdf"]:after
{
content: url(../images/pdficon.png);
vertical-align: -5px;
margin: 10px 0 0 0;
}
/**** リンク先がutubeの場合、utubeアイコンをリンクの後に表示 ****/
a[href^="http://www.youtube.com/"]:after
{
content: url(../images/utubeicon.png);
vertical-align: -3px;
margin: 2px 5px;
}
.homepage #abso{
margin:0 0 20px 100px;
line-height: 1.5em;
text-aling:left;
}
#abso img {
position:relative;
top:3px;
}
#header{
background-color: #b0c4de;
}
#donyu{
line-height: 1em;
text-indent: 1em;
font-size: 16px;
font-weight: normal;
padding: 0 10px 0 20px;
}
#donyu p{
margin:0.3em 0;
}
h1 {
font-weight: normal;
line-height: 1em;
margin-bottom: 0.2em;
font-size: 40px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 30px;
text-shadow: 1px 0 0 #adff2f,
0 1px 0 #adff2f,
-1px 0 0 #adff2f,
0 -1px 0 #adff2f;
}
h1 a {color:#003366;
}
h1 a:hover {
color: #003366;
}
#toph1 {
font-weight:normal;
padding-top: 100px;
padding-bottom: 90px;
padding-left: 30px;
text-shadow: 1px 0 0 #adff2f,
0 1px 0 #adff2f,
-1px 0 0 #adff2f,
0 -1px 0 #adff2f;
background:url(../images/ayu8.png)90% 50% no-repeat ;
}
#gaiyouh1 {
font-weight:normal;
padding-top: 20px;
padding-bottom: 180px;
padding-left: 30px;
text-shadow: 1px 0 0 #adff2f,
0 1px 0 #adff2f,
-1px 0 0 #adff2f,
0 -1px 0 #adff2f;
background:url(../images/gyokyou_tatemono.png)5% 100% no-repeat ;
}
h2 {
font-weight: normal;
line-height: 1.5em;
margin-bottom: 0.2em;
margin-top: 0.2em;
margin-left:0.5em;
font-size: 26px;
text-shadow:0 -1px 0 #ccc;
}
h3 {
font-size: 22px;
font-weight: bold;
margin-left:1.2em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
}
h4 {
font-size: 18px;
font-weight: normal;
margin-left:1.2em;
color:#330000;
line-height:1.3em;
}
h5 {
font-size: 15px;
font-weight: normal;
margin-left:3.0em;
color:#330000;
line-height:1.3em;
}
h3, p, ul, ol, pre, dl {
margin-bottom: 0em;
}
strong {
font-weight: bold;
}
a img {
border: none;
}
blockquote {
margin: 0;
font: italic 18px Georgia, serif;
}
/*テキストの装飾*/
.bold{
font-weight:bold;
}
.italic{
font-weight:italic;
}
.right{
text-align:right;
}
.left{
text-align:left;
}
.center{
text-align:center;
}
.red{
color:red;
}
.blue{
color:blue;
}
.orange{
color:orange;
}
.brown{
color:#660000;
}
.f10{
font-size:10px;
}
.f12{
font-size:12px;
}
.f16{
font-size:16px;
}
.f20{
font-size:20px;
}
.f26{
font-size:26px;
}
.f30{
font-size:30px;
}
.tim1e{
text-indent:-1em;
}
.ti1e{
text-indent:1em;
}
.ti15e{
text-indent:1.5em;
}
.ti3e{
text-indent:3em;
}
.ml1e{
margin-left:1em;
}
.ml2e{
margin-left:2em;
}
.ml3e{
margin-left:3em;
}
.ml4e{
margin-left:4em;
}
.mr1e{
margin-right:1em;
}
.pl3e{
padding-left:3em;
}
.lh2e{
line-height:2em;
}
/**** H3みだしの新着情報を目立たせる ****/
.new {
font-size: 22px;
font-weight: bold;
margin-left:0em;
padding-left:2.2em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
background:url(../images/new_red.gif)left center no-repeat ;
background-color:#ffff66;
/* 角丸 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 5px;
}
.newa {
font-size: 22px;
font-weight: bold;
margin-left:1em;
padding-left:1em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
background-color:#ffff66;
/* 角丸 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 5px;
}
.newb {
font-size: 22px;
font-weight: bold;
margin-left:0em;
padding-left:2.2em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
text-decoration: underline;
background:url(../images/new_red.gif)left center no-repeat ;
/* 角丸 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 5px;
}
/* 行頭に○型のＮＥＷ画像を表示します */
.newc {
font-size: 22px;
font-weight: bold;
margin-left:1em;
padding-left:2.4em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
background:url(../images/new_blue.png)7px 7px no-repeat ;
/* 角丸 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 5px;
}
/* 行頭に☆を付ける */
.star {
font-size: 22px;
font-weight: bold;
margin-left:1em;
padding-left:2.4em;
color:#191970;
line-height:1.5em;
text-indent:-1em;
background:url(../images/star.png)0px 1px no-repeat ;
}
/**** 行全体をリンクにする ****/
a.widelink { display: block; width: 100%; margin-left:-2em; padding-left:2em;line-height:1.5em;}
a.widelink:hover { background-color: #fffff0; color: #191970; }
.arrow{
margin-left:0.5em;
padding-left:2em;
background-image:url("../images/arrow.png");
background-repeat:no-repeat;
background-position:5px 7px;
}
.arrow a:hover{
background-image:url("../images/arrow.png");
background-repeat:no-repeat;
margin-left:-2em; padding-left:2em;
background-position:5px 7px;
}
/**** 行頭に青矢印、後にnew画像を配置 ****/
.arrow_new{
margin-left:0.5em;
padding-left:2em;
background-image:
url("../images/arrow.png"),
url("../images/new_red2.png");
background-repeat:
no-repeat,
no-repeat;
background-position:
5px 7px,
95% 3px;
}
.arrow_new a:hover{
background-image:
url("../images/arrow.png"),
url("../images/new_red2.png");
background-repeat:
no-repeat,
no-repeat;
background-position:
5px 7px,
90% 3px ;
}
/**** 行頭に青矢印、後にnew画像を配置 終わり****/
/**** 矢印と文字を赤にして太字にする場合 ****/
.arrow_red{
margin-left:0.5em;
padding-left:2em;
background-image:url("../images/arrow_red.gif");
background-repeat:no-repeat;
background-position:5px 7px;
}
.arrow_red a{
color:red;
}
.arrow_red a:hover{
background-image:url("../images/arrow_red.gif");
background-repeat:no-repeat;
margin-left:-2em; padding-left:2em;
background-position:5px 7px;
}
/**** 矢印と文字を赤にする場合 終わり ****/
.nolisttype {
list-style-type:none;
}
/**** 行全体をリンクにする終わり ****/
/**** 行の一部をリンクにして、矢印画像を表示 ****/
.arrow-nolink{
margin-left:2em;
padding-left:0em;
text-indent:0em;
list-style-image:url("../images/arrow.png");
}
/**** 行の一部をリンクにして、矢印画像を表示終わり ****/
#container {
background: #b0c4de;
padding: 5px;
margin-bottom: 0px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
}
/**** Transitions ****/
.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.transitions-enabled.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}
/* ボックスの幅を変更 */
.col1 {
width: 240px;
}
.col2 {
width: 520px;
}
.col3 {
width: 800px;
}
.col1 img {
max-width: 240px;
}
.col2 img {
max-width: 520px;
}
.col3 img {
max-width: 800px;
}
.item{
float: left;
margin: 10px;
padding:10px;
font-weight: 300;
/* 角丸 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 10px;
}
/* ボックスの色を変更 */
.bluebox {
background-color:#afeeee;
}
.graybox {
background-color:#f5f5f5;
}
.pinkbox {
background-color:#ffe5e8 ;
}
.mintbox {
background-color:#f5fffa ;
}
.alicebluebox {
background-color:#f0f8ff ;
}
.azurebox {
background-color:#f0ffff ;
}
.beigebox {
background-color:#f5f5dc ;
}
.lavenderbox {
background-color:#fff0f5 ;
}
.greenyellowbox {
background-color:#bfff7f ;
}
/* フッタの体裁 */
#foot{
font-size:90%;
margin-left:auto;
margin-right:auto;
background-color: #b0c4de;
}
.big-text, .homepage .link {
font-size: 16px;
line-height: 1.2em;
}
.topbox{
background-color: #ffffff;
font-size: 17px;
line-height: 1.2em;
}
.link {
padding: 0;
/* 長い英単語を強制的に折り返す */
word-wrap: break-word ;
-moz-word-wrap: break-word ;
}
.link a {
display: block;
padding: 10px;
width: 240px;
background: #BEDAE4;
/* 角丸 */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 10px;
}
.link a:hover {
background-color: #A0C9D8;
}
/**** Clearfix ****/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.item link img {
margin-top: 10px;
margin-bottom: 10px;
}
.kawaubox {
/*background:url(../images/kawau.png)right bottom no-repeat ;*/
background-color:#f5f5f5;
}
/****遊漁のルールの番号リスト****/
#ruru{
line-height:1.7em;
}
#ruru li{
text-indent:-1em;
margin-left:1em;
}
/****組合員募集のページで使っている表とリストのデザイン****/
#kumiai-boshu {
width:96%; margin:10px 1em; padding:10px;
border-collapse:collapse;
}
#kumiai-boshu th.narrow {
width:20%;
padding:4px 7px 2px 7px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
font-weight:normal;
}
#kumiai-boshu th.toufuku{
width:38%;
padding:4px 7px 2px 7px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
font-weight:normal;
}
#kumiai-boshu td {
padding:4px 7px 2px 7px;
background-color:#ffffe0;
border:1px solid #6699CC;
}
#kumiai-boshu dl dt{
clear:left;
float:left;
width:6em;
padding:1px 0px;
margin:0;
}
#kumiai-boshu dl dd {
margin:0;
padding:1px 0px 1px 7em;
}
/****事業の経過の定義リストデザイン****/
#jigyo dt {
margin: 1em 1em 0 1em;
padding: 0 1em;
color: #FFF;
text-shadow: 1px 1px rgba(0,0,0,.4);
background-color: #00552e;
font-size:16px;
line-height:2em;
}
#jigyo dd {
padding: 0 1.5em;
margin:0 1em;
border-width: 0 1px 1px;
border-style: none solid solid;
border-color: #00552e;
line-height:1.em;
font-size:16px;
}
/****組合概要の定義リストデザイン****/
#gaiyo dt {
margin: 1em 1em 0 1em;
padding: 0 1em;
color: #FFF;
text-shadow: 1px 1px rgba(0,0,0,.4);
background-color: #00552e;
font-size:16px;
line-height:2em;
}
#gaiyo dd {
padding: 0 1.5em;
margin:0 1em;
border-width: 0 1px 1px;
border-style: none solid solid;
border-color: #00552e;
line-height:2em;
font-size:16px;
}
/****太田川で楽しめる魚達の紹介ページで使っている表とリストのデザイン****/
.shokai {
width:60%;
margin:10px 0px 10px 1.5em;
padding:0px;
border-collapse:collapse;
font-size:14px;
}
.shokai th {
padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
font-weight:normal;
}
.shokai .nallow{
width:30%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
}
.shokai td {
padding:4px 7px 2px 7px;
background-color:#ffffe0;
border:1px solid #6699CC;
}
/**** アユの販売ページ ****/
#ayuh2{
background: url(../images/ayu.gif)6em 40% no-repeat ;
line-height:1.5em;
width:8.5em;
padding:0 0.5em;
margin-top:10px;
margin-bottom:20px;
font-size:26px;
}
/****アユの販売ページで使っている表のデザイン****/
.hanbai {
width:70%;
margin:10px 10px;
padding:0px;
border-collapse:collapse;
}
.hanbai td {
padding:5px 1em;
background-color:#ffffe0;
border:1px solid #6699CC;
}
.hanbai td.nallow {
width:40%;
}
/*販売ページの注意書きdiv*/
.hanchu{
margin:10px 10px;
padding:10px;
width:90%;
}
.hanchu p{
font-size:20px;
color:blue;
text-align:center;
line-height:2em;
}
/****遊漁券のページで使っている表とリストのデザイン****/
#yuugyo {
width:96%;
margin:10px 1em;
padding:10px;
border-collapse:collapse;
}
#yuugyo th {
width:20%;padding:4px 7px 2px 7px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
font-weight:normal;
}
#yuugyo .nallow{
width:10%;padding:4px 7px 2px 7px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
}
#yuugyo td {
padding:4px 7px 2px 7px;
background-color:#ffffe0;
border:1px solid #6699CC;
line-height:1.5em;
}
#yuugyo dl dt{
clear:left;
float:left;
width:3em;
padding:1px 0px;
margin:0;
line-height:1.5em;
}
#yuugyo dl dd{
margin:0;
padding:1px 0px 1px 3em;
line-height:1.5em;
}
#yuugyo td img{
position:relative;
top:6px; left:10px;
}
.otori{
text-align:right;
line-height:2.5em;
}
.otori img{
position:relative;
top:7px; left:1px;
}
/**** フロー図(遊漁券販売、組合員募集) ****/
.flow {
width:100%;
text-align:left;
margin:10px 10px;
}
.flow li {
margin:0 1em;
margin-bottom:65px;
width:80%;
padding:10px 1em ;
border:2px solid #ffea7c;
color:#17184b;
font-size:20px;
background:#fff;
list-style:decimal inside;
}
.flow p {
color:#660000;
font-size:20px;
}
.flow li img {
margin-top:-50px;
display:block;
position:relative;
top:70px;
left:20px;
}
.flow ul li{
list-style-type: circle;
}
.flow dl dt{
padding:0;
/* margin:0 0 0 1em;*/
line-height:1.5em;
}
.flow dl dd{
/* margin:0 0 0 1em;*/
padding:0;
line-height:1.5em;
}
/****フッター部分のデザイン****/
#foot {
font-size: 14px;
text-align: center;
clear: both;
margin: 0 0.5em;
padding: 0.5em 0;
}
#footterlist {
text-align:left;
}
#footterlist li {
display:inline;
list-style-type:none;
margin:3px 6px 3px 0px;
padding:0 0 0 10px;
line-height: 1.5em;
}
#footterlist li+li {
border-left:1px solid #999;
}
/**** ・無しのリスト ****/
.nodotlist {
margin:0;
}
.nodotlist li {
list-style:outside none;
text-indent:-1em;
margin:10px 0 10px 1em;
line-height:1.3em;
}
/**** 説明リストを横並びに ****/
.yokonarabi dt{
clear:left;
float:left;
width:7em;
padding:1px 0px;
margin:0 0 0 5px;
font-size:16px;
/*font-weight:bold;*/
line-height:1.5em;
}
.yokonarabi dd {
margin:0px;
padding:1px 0px 1px 9em;
font-size:16px;
line-height:1.5em;
}
/**** 番号付きリスト ****/
ol{
margin:0;
list-style-position: inside;
}
/**** 組合概要ページにあるリストに魚画像を張り付ける ****/
#ayu{
background: url(../images/ayu.gif)18em 0% no-repeat ;
line-height:2em;
}
#amago{
background: url(../images/amago.gif)18em 0% no-repeat ;
line-height:2em;
}
#unagi{
background: url(../images/unagi.gif)18em 0% no-repeat ;
line-height:2em;
}
#koi{
background: url(../images/koi.gif)18em 0% no-repeat ;
line-height:2em;
}
#funa{
background: url(../images/funa.gif)18em 0% no-repeat ;
line-height:2em;
}
/****管内図のページで使っている表****/
#kanku {
width:96%; margin:10px 1em; padding:10px;
border-collapse:collapse;
}
#kanku th {
width:20%;padding:4px 7px 2px 7px;
text-align:left;vertical-align:top;color:#000000;
background-color:#99CCFF;
border:1px solid #6699CC;
font-weight:normal;
}
#kanku td {
padding:4px 7px 2px 7px;
background-color:#ffffe0;
border:1px solid #6699CC;
line-height:2em;
}
#kanku dl dt{
clear:left;
float:left;
width:4em;
padding:1px 0px;
margin:0;
line-height:1.5em;
}
#kanku dl dd {
margin:0;
padding:1px 0px 1px 5em;
line-height:1.5em;
}
#kanku td img{
position:relative;
top:5px; left:10px;
}
#kanku a {
color:blue;
}
#kanku a:hover {
color: red;
}
/**** 管内の境界を詳細な地図で見せる ****/
#kankuzu {
list-style: none;
background: url(../images/kankuzumeiryo2.png) no-repeat 0 0;
position: relative;
width: 480px;
height: 339px;
margin: 0;
padding: 0;
}
#kankuzu li {
border: 0px solid #f0f;
position: absolute;
}
#kankuzu li a{
display: block;
height: 100%;
text-indent:-9999px;
}
#map1 {
width: 45px;
height: 25px;
top: 300px;
left: 265px;
}
#map2 {
width: 45px;
height: 25px;
top: 120px;
left: 55px;
}
#map3 {
width: 45px;
height: 25px;
top: 25px;
left: 130px;
}
#map4 {
width: 45px;
height: 25px;
top: 165px;
left: 100px;
}
#map5 {
width: 45px;
height: 25px;
top: 45px;
left: 210px;
}
#map6 {
width: 45px;
height: 25px;
top: 200px;
left: 155px;
}
#map7 {
width: 45px;
height: 25px;
top: 60px;
left: 260px;
}
#map8 {
width: 45px;
height: 25px;
top: 95px;
left: 375px;
}
#map9 {
width: 45px;
height: 25px;
top: 195px;
left:390px;
}
/* 写真を左説明を右に配置。*/
.photo-left
{
margin:7px 7px 17px 7px;
min-height:1%;
}
.photo-left img
{float :left;
margin-right:10px;
margin-left:1em;
}
.photo-left blockquote
{
float :left;
margin-right:10px;
}
.photo-left:after
{
content: ".";
display: block;
clear: both;
width:100%;
height: 0;
visibility: hidden;
}
* html .photo-left { height: 1%; }
/* クールなhr線 */
hr.coolhr
{ border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 320px) {
.container div {
width: 280px;
}
}