@charset "UTF-8";

/* JMIC（日本マリンインポーター協議会） */
/**============================================================================================**/
#outline {border: solid #002580; border-width: 0 0 3px; background:#d2e1fd; font-size: 15px; line-height: 1.8em;}
#outline .w1000 {box-sizing: border-box; height: 200px; padding: 15px 15px 0;}

/* JMICロゴ */
#outline img.logo {top: 15px; left: 0; z-index: 0;}

/* ボートシャドーイメージ */
#outline img.boat {bottom:0px; left: 180px; z-index: 0;}

/* テキスト部分 */
#outline .w800 > div {position: relative; z-index: 1; margin: 0 0 0 225px;}

/* JMICについてもっと知りたい */
#outline a {padding: 6px 25px 6px 8px ; border-radius: 6px; background:#6d9efa; color:#fff; font-size: 13px; line-height: 1.0em; text-decoration: none;}
#outline a:after { content: url(../images/icon-arrow-r_rd.png); position: absolute; top:6px; right: 8px;}
#outline a:hover {background: #0dafc7; }

@media screen and (max-width:999px){
/* JMICロゴ */
#outline img.logo {left: 20px;}

/* ボートシャドーイメージ */
#outline img.boat {left: 200px;}
}

@media screen and (max-width:699px){
/* テキスト部分 */
#outline .w1000 {padding: 15px 5px;}	

/* JMICロゴ */
#outline img.logo {left: 5px;}
	
/* ボートシャドーイメージ */
#outline img.boat {left: 190px; width: 65%; height: auto;}
}

@media screen and (max-width:599px) and (min-width:500px){
/* JMICロゴ */
#outline img.logo {width: 34%; height: auto;}

/* ボートシャドーイメージ */
#outline img.boat {right: 5px; left:auto;}
	
/* テキスト部分 */
#outline .w800 > div {margin: 0 0 0 37.5%;}
}

@media screen and (max-width:499px){
#outline {line-height: 1.5em;}

/* テキスト部分 */
#outline .w1000 {height: auto;}	

#outline img.posi-abs {display: block; position: static; width: 160px; height: auto; margin: 0 auto 5px;}
	
/* ボートシャドーイメージ */
#outline img.boat {display: none;}
	
#outline .w800 > div {margin: 0;}
}

/**============================================================================================**/



/* スライダーメインイメージ */
/**============================================================================================**/
#img-fade {height:500px; margin: 0 auto 50px;}
@media screen and (max-width:1000px) and (min-width:600px){
#img-fade {height:50vw;}
}
@media screen and (max-width:599px){
#img-fade {height:auto; margin: 0 0 20px; padding: 15px 5px; border-bottom: solid #002580 3px; background: #d2e1fd; text-align: center;}
}


/* JMICロゴ */
#img-fade img.posi-abs {top:20px; left:20px; z-index:10px; }

@media screen and (max-width:899px){
#img-fade img.posi-abs {top:10px; left:10px; width:160px; height:auto;}
}

@media screen and (max-width:599px){
#img-fade img.posi-abs {position:static;}
}

/* テキスト部分 */
#img-fade div.posi-abs {
    right: 0; bottom: 0; z-index: 10px; 
    box-sizing: border-box; width:100%; padding:10px 225px 10px 10px ; 
    background: rgba(209,209,209,0.85); font-size: 15px; line-height: 1.5em;}

/* JMICについてもっと知りたい */
#img-fade p.posi-abs {right:10px; bottom:50%; z-index: 10px; margin:0 0 -12px;}
#img-fade a.posi-rlt {
    padding: 6px 25px 6px 8px; border-radius: 6px; background:#6d9efa; 
    color:#fff; font-size: 13px; line-height: 1.0em; text-decoration: none;}
#img-fade a.posi-rlt:hover {background: #0dafc7;}
#img-fade a.posi-rlt:after {content:url(../images/icon-arrow-r_rd.png); position: absolute; top:6px; right: 8px;}

@media screen and (max-width:899px) and (min-width:600px){
/* テキスト部分 */
#img-fade div.posi-abs {font-size: 14px;}
}

@media screen and (max-width:599px){
/* テキスト部分 */
#img-fade div.posi-abs {position: static; padding:0; background:none; text-align:left;}

/* JMICについてもっと知りたい */
#img-fade p.posi-abs {position:static; margin:10px 0 0; text-align:right;}
}


/**========================================**/

/* bx-slider */
#img-fade .bx-wrapper {position:absolute; top: 0; left: 0; z-index: 0; width: 100%;}
#img-fade .bxslider img {width: 100%; height: auto;}

#img-fade .bx-pager {text-align: center;}
#img-fade .bx-pager-item {display:inline-block; width:10px; height:10px; margin:5px 8px; vertical-align:top;}
#img-fade .bx-pager-item a {display:block; width:10px; height:10px; padding: 0; border-radius: 50%; background:#aaa; font-size: 0; }
#img-fade .bx-pager-item a.active {background:#333;}

@media screen and (max-width:599px){
#img-fade .bx-wrapper {display: none;}
}

/**============================================================================================**/



/* ピックアップ */
/**============================================================================================**/
nav#pickup { padding: 0 5px;}
nav#pickup .title {margin: 0 0 0 5px;}
nav#pickup .title a { 
	top: 4px; right: 10px; padding: 2px 4px; 
	color:#fff; font-size: 12px; font-weight: 600; line-height: 1.0em;
}
nav#pickup .title a {
	display:inline-block; margin:0 auto;
    -webkit-transform: skewX(16deg);
    -ms-transform: skewX(16deg);
    transform: skewX(16deg);
}

nav#pickup .title a.posi-abs:hover {color: #FFDD00;}

/**========================================**/

nav#pickup .bg {padding:15px 3px 9px; background: url("../images/bg-pickup_top.gif"); font-size:0;}
nav#pickup .bg a {
    display: inline-block; width:136px; height:0; margin: 0 3px 6px; padding:56px 0 0; 
    background: url("../images/pickup00.png") no-repeat; background-size: 100% auto;
    vertical-align: top;}

nav#pickup .bg a:nth-child(1) {background: url("../images/pickup01_off.png") no-repeat; background-size: 100% auto;}
nav#pickup .bg a:nth-child(2) {background: url("../images/pickup02_off.png") no-repeat; background-size: 100% auto;}
nav#pickup .bg a:nth-child(3) {background: url("../images/pickup03_off.png") no-repeat; background-size: 100% auto;}
nav#pickup .bg a:nth-child(1):hover {background: url("../images/pickup01_on.png") no-repeat; background-size: 100% auto;}
nav#pickup .bg a:nth-child(2):hover {background: url("../images/pickup02_on.png") no-repeat; background-size: 100% auto;}
nav#pickup .bg a:nth-child(3):hover {background: url("../images/pickup03_on.png") no-repeat; background-size: 100% auto;}

nav#pickup img {width: 100%; height: auto;}
@media screen and (max-width:442px) and (min-width:370px){
nav#pickup .bg a {width:31.33%; margin: 0 1% 6px; padding:12.96% 0 0;}
}


/**============================================================================================**/



/* ブログ一覧・サイドバー */
/**============================================================================================**/
#nidex article.w1000 {padding: 0 20px;}

#nidex article.dis-tbl_tab {width:100%;}
#nidex article.dis-tbl_tab {width: 100%;}
#nidex section.dis-tblcl01 {padding: 0 0 40px;}
#nidex section.dis-tblcl02 {width: 250px; padding: 0 0 0 40px;}

@media screen and (max-width:999px){
#nidex section.dis-tblcl02 {padding: 0 0 0 15px;}
}

@media screen and (max-width:699px){
article.dis-tbl_tab,
section.dis-tblcl01,
section.dis-tblcl02 {display: block; width: 100%;}

section.dis-tblcl02 {max-width: 300px; padding:0;}
}

/**========================================**/
#blog .title a { 
	top: 4px; right: 10px; padding: 2px 4px; 
	color:#fff; font-size: 12px; font-weight: 600; line-height: 1.0em;
}
#blog .title a {
	display:inline-block; margin:0 auto;
    -webkit-transform: skewX(16deg);
    -ms-transform: skewX(16deg);
    transform: skewX(16deg);
}

#blog .title a.posi-abs:hover {color: #FFDD00;}

/* ブログ一覧 */
#blog li {display: table; table-layout: fixed; width: 100%; margin: 0 0 20px; padding: 0 0 5px; border-bottom:dotted #999 2px;}
#blog li:last-child {border:none;}
#blog .dis-tblcl01 {width: 200px; padding:0 20px 0 0;}
#blog .dis-tblcl02 {padding:10px 0 0;}

/* サムネイル */
#blog .dis-tblcl01 span {
    display: inline-block; width: 200px; height: 150px; margin: 0;
    background-color: #eee;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.5s;}
#blog .dis-tblcl01 a:hover {opacity: 0.7;}

/* タイトル */
#blog .dis-tblcl02 a.dis-blk {margin: 0 0 10px; color:#000; font-size: 15px; font-weight: 600; text-decoration:underline;}
#blog .dis-tblcl02 a.dis-blk:hover {color:#E47911;}


#blog .dis-tblcl02 .posi-abs {display: block;}

/* 投稿日 */
#blog .dis-tblcl02 p.posi-abs {bottom:10px; left:0; color:#e01221; text-indent: -8px;}

/* 詳しく見る */
#blog .dis-tblcl02 a.posi-abs {right:25px; bottom:10px; padding: 0 25px 0 0; color:#0068de; text-decoration:underline;}
#blog .dis-tblcl02 a.posi-abs:hover {color:#E47911; text-decoration:underline;}

#blog .dis-tblcl02 a.posi-abs:after {content: '＞＞'; position: absolute; top: 1px; right: 0px; font-size: 10px;}

@media screen and (max-width:699px){
#blog {padding: 0 15px;}
#blog li {padding: 0 0 10px;}
	
/* 投稿日 */
#blog .dis-tblcl02 p.posi-abs {position: static; margin: 5px 5px 0 0;}

/* 詳しく見る */
#blog .dis-tblcl02 a.posi-abs {position: relative; right:auto; bottom:auto; margin: 5px 0 0;}
}

@media screen and (max-width:699px) and (min-width:500px){
#blog .dis-tblcl01 {width: 140px; padding:0 10px 0 0;}
#blog .dis-tblcl02 {padding:0;}

/* サムネイル */
#blog .dis-tblcl01 img,
#blog .dis-tblcl01 span {width: 140px; height: 105px;}

/* タイトル */
#blog .dis-tblcl02 a.dis-blk {margin: 0 0 5px;}
}

@media screen and (max-width:499px){
#blog li,
#blog .dis-tblcl01,
#blog .dis-tblcl02 {display: block;}
	
#blog .dis-tblcl01 {margin: 0 auto 10px; padding:0;}
}

/**========================================**/

/* サイドバー */
#side a:hover {opacity:0.7;}

/**============================================================================================**/