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



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


*, *: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;
    xfont-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    color:#333;
    text-align:center;
    background: #ffffff;
    word-break: break-all;
    line-height: 1.2em;
    transform: rotate(0.001deg);/*-----------エッジを滑らかに　クローム用--------------*/ 
    font-family:ＭＳ Ｐゴシック;
}




/* ------   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;
    margin: 0;
    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 {
display:none;
    }


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

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

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




header.small {
    visibility: hidden;
    height:0;
}




.fixed-button {
display: none;
}


 /* 　　Flex ボックスではない　　 */
header {
   display: block;
animation: animation_bak 4s;       margin: 0px;
   padding: 0px;
   justify-content: center;
   border-radius: 0pt;
    
}


 /* 　　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;
}
  

 /* 　　    max-width:180px;Flex アイテム　　 */
  #main > nav {
   display:flex;
   margin: 0px;
   padding: 0px;
   border: 0px solid #8888bb;
   width:180px;
   max-width:180px;
   min-width:180px; 
            flex: 1 1 20%;
          order: 1;
  }



 /* 　　 position:sticky 　　 */
.p-sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 0px;
}

/*------ IE10 IE11 -------*/
@media all and (-ms-high-contrast:none){
  .p-sticky { 
  position: absolute;
  top: 0px;
 }
}
/*------ Edge -------*/
@supports (-ms-ime-align:auto) {
  .p-sticky {
  position: absolute;
  top: 0;
} 
}


 /* 　　    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:70px;
}





/* ------------------------- コンテンツ内コメント */
div.comment{
    width: 90%;
    font-size:110%;
    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;
}



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

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

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

.tiikimenu li {
    padding:10px 10px 10px 10px;
    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;
    flex-direction:column;
}


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

.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%;
    color:#660000;
}


.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;
}




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





/*-------------------------上部スライド*/ 
.slideshow {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
    padding-top: 50%;
}

.slideshow img {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 2s;
	width: 100%;
}

.slideshow .show {
	opacity: 1;
	z-index: 1;
}


/* 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:7px ridge #568bfa;
    width:80%;max-width:600px;
    margin-left : auto ; margin-right : auto ;
}


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


/* ---------     medium*/

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


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

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

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

/* ---------　５列表示*/
.photo-5 div {
   width: 19%;
   margin: 0.4%;
   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);
}
.widthchange img {
   width: 100%;
}



/* ------  hoverでimg拡大   ----　*/

  .photo div img:hover,.photo-3 div img:hover,.photo-4 div img:hover, .photo-5 div img:hover, .photo-6 div img:hover, .photo-7 div img:hover{ 
   box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
		transform: scale(1.15);
  	transition: 0.1s;
}




 
/*--------------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:300%;
   color:#ff0000;
}


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

.page_midasi{
    border: 1px solid #26759e;
    border-radius:3pt;
    font-size:250%;
    line-height: 0.9em;
    font-family:HGS創英角ﾎﾟｯﾌﾟ体;
    color:#FFFFFF;
    text-align:center;
    text-shadow:-2px -2px #555;
    padding-top:13px;
    padding-bottom:13px;
    margin-bottom: 30px;
}
 

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


/*　------------　スペック　テーブル　-----------　*/ 
.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:#568bfa;
}


.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;
    
}