/* ------------------------------------------------------  基本　----------------------------------------------------- */


.g_koukoku {
    font-size:75%;
    font-weight:lighter;
    color:#0000ff;
}


*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/*---Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消用*/ 
html {  
    overflow-y:scroll;  
} 



/*-------------------------bodyの指定*/ 
body{
    margin: 0;
    padding: 0;
    font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    color:#333;
    text-align:center;
    background: #ffffff;
    line-height: 1.2em;
    word-break: break-all;
    xtransform: rotate(0.001deg);/*-----------エッジを滑らかに　クローム用--------------*/ 
    min-width:320px;
}




/* ------   h1, h2, h3, h4, h5  基本  ----- */
h1, h2, h3, h4, h5 { 
    margin: 0;
    padding: 0; 
    font-size:100%;
}


/* ------   ul　flex  基本  ----- */
ul {
    display:   flex;
    flex-flow: row;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
    align-items: center;
    padding: 0px;   /* ------  0にしないと中央にこない    ----- */
}

li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------   a  基本  ----- */
a{
text-decoration:none;
    color:#0000ff;
}


/* ------   img  基本  ----- */
img {
    vertical-align: bottom;		/*画像の下の空白を消す    */
    width: 100%;
    height: auto;
    display: block;
}



/* ------------------------- pスタイル */
p {
    width: 100%;
    font-size:100%;
    color:#555555;
}



/* -------------- 透明hr  行間用 */
hr {
border: 0px transparent solid;
background-color: transparent;
}

/*--メニュー見出しボックス分--*/
.hr_s {
border: 0px transparent solid;
background-color: transparent;
    height:15px;
}


/* ------行間隔-------- */
.hr_set20 {
   border: 0px transparent solid;
   background-color: transparent;
   height:0px;
}

.hr_set30 {
   border: 0px transparent solid;
   background-color: transparent;
   height:15px;
}

.hr_set50 {
   border: 0px transparent solid;
   background-color: transparent;
   height:20px;
}




/*---- 　レスポンシブWeb　　 ----*/

header { 
   display: none;
}

header.small {    
   xdisplay: flex;
    display:block;
   margin: 0px;
   padding: 0px;
   xjustify-content: center;
   border-radius: 0pt;
   height:100%;
   width:100%;
   display: none;
}

#main > nav {
   display: none;
}

/*メニューボタン　スクロール固定    */

.fixed-button {
    position: fixed;
    top:0;
    z-index:10; 
    display:flex;
    justify-content:space-between;
    align-items: center;
    box-sizing:border-box;
    width:100%;
    height:35px;
    background-color: #FF582E; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF582E), to(#C7331B)); background-image: -webkit-linear-gradient(top, #FF582E, #C7331B); background-image: -moz-linear-gradient(top, #FF582E, #C7331B); background-image: -ms-linear-gradient(top, #FF582E, #C7331B); background-image: -o-linear-gradient(top, #FF582E, #C7331B); background-image: linear-gradient(to bottom, #FF582E, #C7331B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF582E, endColorstr=#C7331B);
    border:solid 3px;border-color: #fa3200;
    color:#ffffff;
    font-weight:bold;
    padding-left:2%;
    padding-right:2%;
    font-size:3.5vw;
} 

.fixed-menu {
    position: fixed;
    top:35px;
    left:0;
    z-index:10; 
    
} 



/*---- 　レスポンシブWeb　ここまで　 ----*/



 /* 　　Flex ボックスではない　　 */
footer {　
   display: block;
   margin: 0px;
   padding-top:40px;
   padding-bottom:10px;
   align-items: center;
   justify-content: center;
   min-height: 50px;
   border-top: 3px solid #cccccc;
   border-radius: 0pt;
   background: #ffffff;
   }


 /* 　　Flex コンテナ　　 */
  #main {
   margin: 0px;
   padding: 0px;
   border: 0px solid #3399ff;
   display:         flex;
   flex-flow: row;    

}
 


 /* 　　Flex アイテム　　 */
  #main > article {
       margin:  0px;
   padding: 20px 3% 20px;
   border: 0px solid #ff0000;
   border-radius: 0pt;             /* 角の丸みの大きさ */
   background: #ffffff;

    	align-items: center;
	justify-content: center;

                    flex: 1 1 80%;
              order: 2;
   }
  



 /* 　　    aside;Flex アイテム　　 */
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }





section{
    margin-top:20px;
    margin-bottom:30px;
}




/* ------------------------- コンテンツ内コメント */
div.comment{
    width: 100%;
    font-size:100%;
    text-align:center;
    font-family:ＭＳ ゴシック;
    color:#555555;
    padding-top:7px;
    padding-bottom:7px;
    margin-top:30px;
    margin-bottom:0px;
    background-color:#ffffff;
    line-height:1.2em;
    margin: 0 auto;
}




/* ------------------------- ページ大見出し下コメント */
p.midasi {
    margin:auto;
    text-align:center;
    font-size: 110%;
	line-height: 1.2em;
    width:85%;
    margin-top:50px;
    margin-bottom:50px;
}


/*--------紀伊半島の波止　地域見出し---------*/

.tiiki {
    font-size:120%;
    color:#0000FF;
    font-family:HGS創英角ﾎﾟｯﾌﾟ体;
    line-height:1.5;
}


/*-------------　地域メニュー　------------*/
.tiikimenu {
    display:  flex;
    margin-bottom:20px;
    flex-direction:column;
}

.tiikimenu li {
    padding:3px 0px 3px 0px;
    font-size:120%;
}

/*--------紀伊半島の波止の枠---------*/

div.turibatop {
    display: flex;
    width: 95%;
    min-height: 50px; 
    font-size: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius:10pt;
    margin: 0 auto;
}

.turibatop1,.turibatop2,.turibatop3,.turibatop4,.turibatop5 {
    display: flex;
        color:#ffffff;
    background-color:#0000FF;

    margin:0px;
    min-height: 50px; 
    padding: 0px;
    border: 1px solid gray;
    align-items: center;
    justify-content: center;
    font-family:HGｺﾞｼｯｸE;
    font-size:110%;
    xcolor:#660000;
}

.turibatop1 {
    flex:1 1 35%;
    border-radius:  10px 0px 0px 10px;}
.turibatop2 {
    flex:1 1 15%;
}
.turibatop3 {
    flex:1 1 20%;
}
.turibatop4 {
    flex:1 1 30%;
    border-radius:  0px 10px 10px 0px;
}

/*--------------turiba ---------*/

div.turiba {
    display: flex;
    width: 95%;
    min-height: 80px; 
    font-size: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius:10pt;
    margin: 0 auto;
}

.turiba1,.turiba2,.turiba3,.turiba4,.turiba5 {
    display: flex;
    background-color:#f4f4f4;
    margin:0px;
    min-height: 80px; 
    padding: 0px;
    border: 1px solid gray;
    align-items: center;
justify-content: center;
color:#333;
    }


.turiba1 {
    flex:1 1 35%;
    border-radius:  10px 0px 0px 10px;}
.turiba2 {
    flex:1 1 15%;
    flex-direction:column;
}
.turiba3 {
    flex:1 1 20%;
}
.turiba4 {
    flex:1 1 30%;
    border-radius:  0px 10px 10px 0px;
    padding:10px 10px 10px 10px;
}


/*--------------　地図　-----------*/

.turiba_map {
    color:#1E90FF;
    font-size:120%;
    margin-top:10px;
}


/*--------メインの枠---------*/

div.top {
    display: flex;
    width: 95%;
min-height: 50px; 
         font-size: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
        border-radius:10pt;
margin: 0 auto;

}

.top1,.top2,.top3,.top4,.top5,.top6 {
    display: flex;
    background-color:#cccc00;
    margin:0px;
    min-height: 50px; 
    padding: 0px;
    border: 1px solid gray;
    align-items: center;
    justify-content: center;
    font-family:HGｺﾞｼｯｸE;
    font-size:110%;    }


.top1 {
    flex:1 1 15%;
    border-radius:  10px 0px 0px 10px;}
.top2 {
    flex:1 1 5%;
}
.top3 {
    flex:1 1 20%;
}
.top4 {
    flex:1 1 10%;
}
.top5 {
    flex:1 1 10%;
}
.top6 {
    flex:1 1 40%;
    border-radius:  0px 10px 10px 0px;
}



/*--------------parts ---------*/


div.parts {
    display: flex;
    width: 95%;
min-height: 80px; 
         font-size: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
        border-radius:10pt;
margin: 0 auto;

}

.komoku1,.komoku2,.komoku3,.komoku4,.komoku5,.komoku6 {
    display: flex;
    background-color:#f4f4f4;
    margin:0px;
    min-height: 80px; 
    padding: 0px;
    border: 1px solid gray;
    align-items: center;
justify-content: center;
color:#333;
    }


.komoku1 {
    flex:1 1 15%;
border-radius:  10px 0px 0px 10px;}
.komoku2 {
    flex:1 1 5%;
}
.komoku3 {
    flex:1 1 20%;
}
.komoku4 {
    flex:1 1 10%;
    
}
.komoku5 {
    flex:1 1 10%;
}
.komoku6 {
    flex:1 1 40%;
border-radius:  0px 10px 10px 0px;
    padding:10px 10px 10px 10px;
    flex-direction:column;
}

.komoku5::after { 
  content: "円";
}


ul.parts > li:nth-child(n+1):not(:nth-child(n+3)) {
    border-top-width: 1px;
}
ul.parts > li:nth-child(2n+1) {
    border-left-width: 1px;
}

ul.parts > li:nth-child(2n+1):not(:nth-child(7)) {
    background: #ff0000;
}
ul.parts > li:nth-child(6) {
    background: #00ff00;
}



@media screen and (max-width: 800px) {
/* ------------ ページ大見出し　角丸 ボーダー無し　------------- */

.page_midasi{
    border: 1px solid #26759e;
    border-radius:3pt;
    font-size:150%;
    line-height: 0.9em;
    font-family:ＭＳ ゴシック;
    color:#FFFFFF;
    text-align:center;
    text-shadow:-2px -2px #555;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom: 30px;
}

.top5,.komoku5 {
    min-width:80px;
    border-radius:  0px 10px 10px 0px;

}
.top4,.top6,.komoku4,.komoku6 {
    display:none;
}

}



/*-------------------------ここまで*/





/* photo style */


/* --- width個別指定、img一枚画像の中央配置、シャドー、角丸、角丸シャドー、 */
.img_center {
   margin-right:auto; 
   margin-left:auto; 
}



/* photo style */

/*--------- img photo style 額付き*/
.gakuiri{
    margin-top:40px;
    margin-bottom:40px;
    box-shadow:4px 4px 7px 1px rgba(0,0,0,0.4);
    border-radius:6px;
    border:17px ridge #ffd700;
    width:80%;max-width:600px;
    margin-left : auto ; margin-right : auto ;
}



/* ---------　２列表示*/

.photo-2 {
display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	width: 100%;
justify-content: center;
}



.photo-2 div {
   width: 30%;
   margin: 0.4%;
   border: 0.2% solid #808080;
}


/* ---------　photo内の　P　のスタイル*/
.photo-1,.photo-2,.photo-3,.photo-4,.photo-5,.photo-7 p { 
  font-size: 90%;
  padding-top: 5px;
    text-align:center;
}



/* ---------　small*/

.photo-2,.photo-3,.photo-4,.photo-5,.photo-7 {
    display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	width: 100%;
    height:100%;
    justify-content: center;
}




/* ---------　３列表示*/
.photo-3 div {
   width: 24.5%;
   margin: 0.2%;
   border: 0.2% solid #808080;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


/* ---------　４列表示*/
.photo-4 div {
   width: 24.5%;
   margin: 0.2%;
   border: 0.2% solid #808080;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


/* ---------　５列表示*/
.photo-5 div {
   width: 24.5%;
   margin: 0.2%;
   border: 0.2% solid #808080;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


/* ---------　７列表示*/
.photo-7 div {
   width: 13.5%;
   margin: 0.3%;
   border: 0.2% solid #808080;
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}


/* --------small画面の5列表示 ----------*/
.widthchange {
   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    width:100px;
width:20%;
}
.widthchange img {
  width: 100%;
}





 
/*--------------table ライン---------*/

.table_line{
    width:100%;
    max-width:1200px;
    border:0px solid #000000;
    border-collapse: collapse;
    margin-left:auto;margin-right:auto;
}

.table_line td{
    border:1px solid #000000;
    border-collapse: collapse;
    font-size:90%;
    width:10%;
    padding:0
}


.table_color tr:nth-child(1) {
    color:#ffffff;
    background-color:#447791;
}

.table_color td:nth-child(1) {
    color:#ffffff;
    background-color:#c0c0c0;
}





/* ------    グラデーションカラー　　ダークブルー ----- */   

.color_grad {
    color:#ffffff; background-color: #568bfa; 
 border-color: #26759e;
}


/* ------------ p生産終了 -------------*/
p.seisan_end {
   font-size:180%;
   color:#ff0000;
}



/* ------------ ページ大見出し　角丸 ボーダー無し　------------- */

.page_midasi{
    border: 1px solid #26759e;
    border-radius:3pt;
    font-size:150%;
    line-height: 0.9em;
    font-family:ＭＳ ゴシック;
    color:#FFFFFF;
    text-align:center;
    text-shadow:-2px -2px #555;
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom: 30px;
}
 



/* ------------------------- ページ大見出し下コメント */
div.midasicomment {
    margin:auto;
    text-align:center;
    font-size: 100%;
    line-height: 120%;
    width:90%;
    /*-------font-family:HGｺﾞｼｯｸE;------*/


/* -------- pagemenu hover ----------*/
    .pagemenu_b li:hover {

 background-color: #009c9e; background-image: -webkit-gradient(linear, left top, left bottom, from(#009c9e), to(#006263)); background-image: -webkit-linear-gradient(top, #009c9e, #006263); background-image: -moz-linear-gradient(top, #009c9e, #006263); background-image: -ms-linear-gradient(top, #009c9e, #006263); background-image: -o-linear-gradient(top, #009c9e, #006263); background-image: linear-gradient(to bottom, #009c9e, #006263);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#009c9e, endColorstr=#006263);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
    position:relative;
    border: 3px solid #C7C700;
    top:-3px;
    left:-3px;
}



/*　------------　スペック　テーブル　-----------　*/ 
.table_spec{
    width: 90%;max-width: 650px;
    border-collapse: collapse;  /* ------------隣接する境界線を結合して（重ねて）表示する （初期値）　-------------*/
    border: 3px solid #999;
    margin-top:20px;
    margin-bottom:20px;
    margin-left : auto ; 
    margin-right : auto ;
}

.table_spec tr:nth-child(1) th {     /* ------------1行目に色指定　-------------*/
    text-align:center;
    color:#ffffff;
    background-color:#000080;
}


.table_spec th{
    width:30%;
    padding:5px;
    text-align: left;  /*------　水平方向の指定　　　*/ 
    vertical-align: top;  /*------　垂直方向の指定　　　*/ 
    background-color: #eee;
    border-bottom: 1px solid #ccc;  /*------　doubleは二重線を指定　　　*/ 
}


.table_spec td{
    width:70%;
    padding:5px;
    background-color: #fafafa;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}


.table_spec a{
    display:block;
    font-size:110%;
    xfont-weight:bold;
    margin:6px;
    color:#808000;
    
}