@charset "utf-8";


/* -------------------------------------
　Reset Setting　
-------------------------------------*/
* {
	border:0;
	margin: 0 ;
	padding: 0 ;
	list-style: none outside ;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100% ;
}
img {
	max-width: 100%;
	height: auto;
	width:auto;
	vertical-align: top ;
}
body {
	color: #313131 ;
	font-size: 16px ;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.75 ;
	-webkit-text-size-adjust: 100%;
}
.icon-new {
	position: absolute ;
	top: 5px ;
	left: 5px ;
	background: #ec6c00 ;

	color: #ec6c00 ;
	display: inline-block ;
	*display: inline ;
	width: 3.5em ;
	height: 3.5em ;
	-webkit-border-radius: 50%;/* width,heightの半分 */
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.icon-new .name {
	color: #FFF ;
	position: absolute ;
	bottom: 0 ;
	left: 0 ;
	right: 0 ;
	top: 0 ;
	height: 1em;
	line-height: 1.1 ;
	margin: auto ;
	text-align: center ;
}

/*　Clearfix
-------------------------------------*/
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

a img, img {border:0;
}
a { color: #008efc ;
	text-decoration: none ;
}
a:hover { color: #03599b ;
	text-decoration: underline ;
}

/*####################　Font-size　####################*/
.x-small { font-size: 12px ;
}
.small { font-size: 14px ;
}
.large { font-size: 18px ;
}
.x-large { font-size: 23px ;
}
.xx-large { font-size: 28px ;
}


/*####################　Header　####################*/
#header {
	font-size: 14px ;
	line-height: 1.2 ;
}
#header #header-main-bg { background: #000f1b;
}
#header #header-main {
	max-width: 960px ;
	margin: 0 auto ;
	padding: 12px 0 12px ;
	text-align: left ;
}
#header #Sitelogo {
	float: left ;
}
#header .headersub-nv {
	float: right ;
}
#header #Corporate-logo {
	text-align: right ;
	margin-top: 0.25em ;
}
#header .lang {
	display: inline-block ;
	padding: 0.4em 1em 0 0 ;
}
#header .lang a { color: #fff ;
}
#header .lang a:hover { color: #aaa ;
}

#header #Site-search {
	background: #717171 ;
	float: right ;
	margin-top: 0.25em ;
	padding: 2px 5px ;
	width: 200px ;
}
#header #Site-search .searchBox {
	border: none ;
	background: none ;
	color: #dfdfdf ;
	float: left ;
	font-size: 13px ;
	margin: 3px 0 0 3px ;
	line-height: 1 ;
	padding: 0 !important ;
	width: 160px ;
}
#header #Site-search .searchSubmit {
	float: right ;
	padding: 0 !important ;
}
#gnavi-bg { background: rgba(0,34,74,0.75);
}
#gnavi {
	margin: 0 auto ;
	max-width: 960px ;
}
#gnavi li { float: left ;
}
#gnavi li a {
	color: #fff ;
	display: block ;
	text-decoration: none ;
	padding: 0.85em 18px 0.7em ;
}
#gnavi li a:hover {
	color: #3ecbff ;
}
/*####################　Footer　####################*/
#toPageTop {
	display: none ;
	right: 1em;
	bottom: 4.5em;
	position: fixed ;
	text-align: right ;
	z-index: 5 ;
}
#footer .footer-main-bg {
	background: #4c9fdb;
}
#footer-main {
	padding: 40px 0 90px ;
	max-width: 960px ;
	margin: 0 auto ;
	overflow: hidden ;
}
#footer-main .pu-title {
	color: #fff ;
	font-weight: normal ;
	margin-bottom: 3% ;
}
#footer-main .footer-picup-list {
	width: 102% ;
}
#footer-main .footer-picup-list li {
	float: left ;
	width: 25% ;
	padding-bottom: 0.5em ;
}
#footer-main .footer-picup-list li a {
	display: block ;
	width: 92% ;
}
#footer-main .footer-picup-list li a img {
	width: 100% ;
}
#footer-main .footer-picup-list .ftr-boat-car {
	margin: -1.2% 0 0 0 ;
}
#footer-Copyright-bg { background: #002139 ;
}
#footer-Copyright {
	font-size: 78% ;
	max-width: 960px ;
	margin: 0 auto ;
	padding: 1em 0 ;
	color: #d7d7d7 ;
}
#footer-Copyright .corporate-logo {
	display: none ;
}
.footer-nav {
	padding-top: 2.5em ;
}
.footer-nav li {
	box-sizing: border-box ;
	float: left ;
	line-height: 1.2 ;
	padding: 0 1.75em 0.5em 1.5em ;
	text-indent: -1.1em ;
	width: 20% ;
}

.footer-nav a {
	color: #fff ;
}
.footer-nav a:hover {
	text-decoration: none ;
}
.footer-nav a:hover span {
	color: #d2ebfd;
}
.footer-nav a span {
}
.footer-nav a::before {
	margin: 0 ;
}
/*####################　Contents　####################*/
#contents { padding-bottom: 4em ;
}
.inner {
	max-width: 960px ;
	margin: 0 auto ;
}
.bg { background: #f5f6f8 ;
}
.bread {
	color: #666 ;
	max-width: 960px ;
	margin: 0.25em auto ;
}
.bread a { color: #666 ;
	text-decoration: none ;
}
.bread a:hover { color: #008efc ;
}
.bread a:after { color: #666 ;
}
.list-two-clm ul {
	width: 102.1% ;
}
.list-two-clm li {
	box-sizing: border-box ;
	float: left ;
	width: 50% ;
	padding: 0 2% 0 0 ;
}
.list-three-clm ul {
	width: 102.1% ;
}
.list-three-clm li {
	box-sizing: border-box ;
	float: left ;
	line-height: 1.4 ;
	width: 33.3% ;
	padding: 0 2% 1.5em 0 ;
}
.list-three-clm li a {
	display: block;
}
.list-four-clm ul {
	width: 102% ;
}
.list-four-clm li {
	float: left ;
	line-height: 1.4 ;
	margin-bottom: 3.5% ;
	width: 25% ;
}
.list-four-clm li a {
	display: block ;
	position: relative ;
	width: 92% ;
}
/* ライター紹介 */
.writer-clm {
	background: #ecedf0 ;
}
.writer-clm .inner {
	position: relative ;
}
.writer-clm .writer-title {
	background: #d1d3db ;
	margin-bottom: 1em ;
}
.writer-clm .writer-title h2 {
	color: #22507b ;
	max-width: 960px ;
	margin: 0 auto ;
	padding: 0.25em 0 ;
}
/* ライター紹介 小野さん */
.writer-clm.onosan .photo {
	position: absolute ;
	right: 0 ;
	bottom: 0 ;
	max-width: 40% ;
}
.writer-clm.onosan .title-clm,
.writer-clm.onosan .copy {
	width: 58% ;
}
.writer-clm.onosan .title-clm {
	line-height: 1.4 ;
	padding-bottom: 1em ;
}
.writer-clm.onosan .title-clm h3 {
	font-weight: normal ;
}
.writer-clm.onosan .title-clm .sub-title { color: #39a7c9;
}
.writer-clm.onosan .copy { padding-bottom: 2.5em ;
}
.writer-clm .links dt {
	font-weight: bold ;
}
.writer-clm .links dd {
	margin: -1.75em 0 0.5em 8em ;
}
/* ライター紹介 小野さん */

/* ライター紹介 伊藤さん */
.writer-clm.itosan .photo {
	float: right;
	bottom: 3.5% ;
	max-width: 30% ;
}
.writer-clm.itosan .copy-clm {
	float: left ;
	width: 66% ;
}
.writer-clm.itosan .title-clm {
	line-height: 1.4 ;
	padding-bottom: 1em ;
}
.writer-clm.itosan .title-clm h3 {
	font-weight: normal ;
}
.writer-clm.itosan .title-clm .sub-title { color: #39a7c9;
}
.writer-clm.itosan .copy { padding-bottom: 2.5em ;
}
/* ライター紹介 伊藤さん */
/* ライター紹介 須磨さん */
.writer-clm.sumasan {
	padding-bottom: 1em ;
}
.writer-clm.sumasan .photo {
	float: right;
	bottom: 3.5% ;
	max-width: 30% ;
}
.writer-clm.sumasan .copy-clm {
	float: left ;
	width: 66% ;
}
.writer-clm.sumasan .title-clm {
	line-height: 1.4 ;
	padding-bottom: 1em ;
}
.writer-clm.sumasan .title-clm h3 {
	font-weight: normal ;
}
.writer-clm.sumasan .title-clm .sub-title { color: #39a7c9;
}
.writer-clm.sumasan .copy { padding-bottom: 2.5em ;
}
/* ライター紹介 須磨さん */

.dot-list li {
	list-style: disc ;
	margin-left: 1.5em;
}
.num-list li {
	list-style: decimal ;
	margin-left: 1.5em;
}


/* 埋め込み動画 */
.movie-clm {
	float: none ;
	width: 100% ;
}
 .movie-clm .movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie-clm .movie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.bottom-movie {
	padding-top: 3em ;
	max-width: 800px ;
	margin: 0 auto ;
}
.bottom-movie .button a {
	color: #304c77 ;
	border: 1px solid #476086 ;
	display: inline-block ;
	line-height: 1.4 ;
	position: relative ;
	padding: 0.5em 3.5em 0.5em 1.5em ;
	text-align: left ;
	box-sizing: border-box ;
}
.bottom-movie .button a:hover {
	text-decoration:  none ;
	opacity: 0.7 ;
}
.bottom-movie .button a:after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0.75em;
	font-size: 1.5em;
}
.bottom-movie .button a strong {
	font-size: 18px ;
}
.bottom-movie .button a strong small {
	font-size: 12px ;
}
.bottom-movie .button small{
	font-size: 0.87em;
}
/* 埋め込み動画 */

/* スマホサイズ用 */
@media screen and (max-width: 970px) {
	.inner { max-width: 96% ;
	}
}

@media screen and (max-width: 900px) {
	.writer-clm.onosan .title-clm,
	.writer-clm.onosan .copy {
		width: 55% ;
	}
	.footer-nav li {
		width: 25% ;
	}
	.footer-nav li br { display: none ;
	}
}
@media screen and (max-width: 800px) {
	#header #header-main {
		padding: 0 5% ;
	}
	#footer-main {
		width: 90% ;
		padding: 30px 0 60px ;
	}
	#footer-main .footer-picup-list {
		width: 104% ;
	}
	#footer-main .footer-picup-list li {
		width: 33% ;
	}
	#footer-main .footer-picup-list .ftr-boat-car { margin: -1.65% 0 0 ;
	}
	.inner {
		width: 90% ;
	}
	.list-four-clm li { width: 33.3% ;
	}
	.writer-clm.itosan .photo {
		bottom: 3.5% ;
		max-width: 40% ;
	}
	.writer-clm.itosan .copy-clm {
		width: 55% ;
	}

}
@media screen and (max-width: 680px) {
	.forPC { display: none ;
	}
	body {
		line-height: 1.5 ;
	}
	.bread { display: none ;
	}
	br.forPC { display: none ;
	}
	#header {
	border-bottom: 1px solid #b4c3d5 ;
/*	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow: 10px 10px 10px 10px #000;
	-moz-box-shadow: 10px 10px 10px 10px #000;
	*/
	position: relative ;
	z-index: 2 ;
	}
	#header #Sitelogo,
	#header .headersub-nv {
		float: none ;
	}
	#header #Sitelogo {	text-align: center ;
	}
	#header .lang {
		display: block ;
		text-align: right ;
		width: 95% ;
	}	
	#header #Corporate-logo {
		display: none ;
	}
	#header #Site-search {
		float: none ;
		width: 90% ;
		margin: 0.5em auto ;
	}
	#header #Site-search .searchBox {
		width: 80% ;
	}
	#gnavi {
		margin: 0 auto ;
		padding: 0 0 ;
		width: 100% ;
	}
	#gnavi li a {
		padding: 0.75em 0.75em ;	
	}
	#footer-Copyright .corporate-logo {
		display: block ;
		text-align: center ;
		padding-top: 1% ;
	}
	#footer-main .footer-picup-list li { width: 50% ;
	}
	#footer-main .footer-picup-list .ftr-boat-car { margin: -1.9% 0 0 ;
	}
	.list-four-clm li,
	.list-three-clm li { width: 49.8% ;
	}
	.writer-clm.onosan .title-clm,
	.writer-clm.onosan .copy,
	.writer-clm.itosan .copy-clm {
		width: 100% ;
	}
	.writer-clm.onosan .photo,
	.writer-clm.itosan .photo {
		float: none ;
		display: block ;
		max-width: 100% ;
		margin: 0 auto ;
		position: relative ;
	}
	.writer-clm.itosan .photo {
		max-width: 100% ;
		margin-bottom: 30px ;
	}
	.bottom-movie {
		padding-top: 0em ;
	}

}
@media screen and (max-width: 500px) {
	#footer-main .footer-picup-list li {
		text-align: center ;
		width: 100% ;
	}
	#footer-main .footer-picup-list .ftr-boat-car { margin: -2.1% 0 0 ;
	}
	.footer-nav {
		font-size: 17px ;
	}
	.footer-nav li {
		float: none ;
		box-sizing: border-box ;
		padding-bottom: 1.25em ;
		padding-right: 0 ;
		width: auto ;
	}
	.writer-clm .links dd {
		margin: 0 0 0.5em 0 ;
	}
}
@media screen and (max-width: 400px) {
	.bottom-movie .button {
		text-align: center ;
	}
	.bottom-movie .button a {
		max-width: 90% ;
		padding:  0.5em 2em 0.5em 1em ;
	}
	.bottom-movie .button a:after {
		right: 0.1em;
	}
}
@media screen and (max-width: 320px) {
	.list-two-clm ul,
	.list-two-clm li,
	.list-two-clm li a, 
	.list-three-clm li,
	.list-three-clm li a,
	.list-four-clm li,
	.list-four-clm li a { width: 100% ;
	}
	.list-two-clm li,
	.list-three-clm li,
	.list-four-clm li { margin-bottom: 1em ;
	}
}
/* スマホサイズ用 */




/*end*/