@charset "UTF-8";
/************************************************************
 * UTF-8で保存してください。
 ************************************************************/
 
 *{
	margin: 0;
	padding: 0;
}

html{
    font-size: 625%;/* 16pxに625%を掛け100px */
}
body{
	-webkit-text-size-adjust: 100%;
	font-size: .16em;/* 通常サイズは100pxの0.16倍で16px ここのみ、font-size em！ */
}

div#world ul, div#world li {
	list-style: none;
	list-style-position: outside;
}

div#world li img {
	vertical-align: bottom;
}

div#world a:hover img {
	opacity: 0.70;
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
}

div#world a { outline: none; }
div#world a:focus{ outline: none; }
div#world a:link { color: #0505E5; }
div#world a:visited { color: #0505E5; }
div#world a:hover { color: #ff6600; }
div#world a:active { color: #ff6600; }

div#world .clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

div#world .clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

#world {
	font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "osaka", sans-serif;
	line-height: 1.5;
	color: #333333;
}

.orange  { color: #e45800; }
.brown   { color: #6f3003; }
.beige   { color: #fef0c0; }
.pink    { color: #E75297; }
.greeen  { color: #1eaa39; }
.darkred { color: #c30707; }

.tc {
	text-align: center;
}

.pb10 {
	padding-bottom: 10px;
}
.pb15{
	padding-bottom: 15px;
}
.pb20 {
	padding-bottom: 20px;
}
.pb30 {
	padding-bottom: 30px;
}
.pb50 {
	padding-bottom: 50px;
}

.right {
	float: right;
}

#world a {
	text-decoration: underline;
}

#world {
	text-align: center;
	background: #FAFAFA;
}

#world div.catch {
	background: url(../images/tokyo.jpg) no-repeat right top;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}

@media screen and (max-width: 1024px) { 
	#world div.catch {
		background-position: right 20%;
	}
}


#world div.catch p {
	font-size: .4rem;
	font-family: "Circular Bold", "Questrial", "Helvetica", sans-serif;
	font-weight: bold;
	color: #FFF;
	text-align: left;
	padding: 15% 0 20% 10%;
	text-shadow:0px 0px 20px #0d0c0d, 0px 0px 20px #000000;
}

div.shape {
	position: relative;
	overflow: hidden;
	margin: -15% 0 0;
	padding: 15% 0 0;
	z-index: 1;
  }
  
  div.shape:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 80%;
	margin: 3% -10% 0;
	background: #011931;
	background: #3087C9;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	z-index: -1;
  }
  
  div.shape div.inner {
	box-sizing: boder-box;
	width: 100%;
	height: 700px;
	margin: 0 auto;
	padding: 0 0 0;
	color: #fff;
	text-align: center;
  }

#world div.main {
	color: #FFF;
}

#world div.header {
	background: #0037a0;
	background: #FFF;	
}

#world div.header img {
    width: 80%;
    max-width: 440px;
}

#world h1, #world h2, #world h3, #world h4 {
	font-weight: normal;
}

#world h1 {
	font-size: .22rem;
	font-weight: normal;
	line-height: 1.6;
	padding: .5em 1em 1em;
}

#world div.main p.comment {
	padding: 0 1em 3em;
}

#world div.contents {
	margin-top: 0px;
	position: relative;
	z-index: 2;
}

#world div.contents div.wrap {
    width: 90%;
    max-width: 960px;
	margin: 0 auto;
	padding-top: 0px;
}

#world h2 {
	font-size: .23rem;
	padding-bottom: 1em;
}

#world h2 img {
    width: 100%;
    max-width: 440px;
}

#world div.solution h2 {
	padding-bottom: .8em;
}

#world div.solution  {
	margin-bottom: 60px;
}

#world div.solution img  {
    width: 100%;
    max-width: 580px;
}

#world div.points h3, #world div.points p  {
	font-size: .14rem;
	padding-bottom: 1em;
}

#world div.points p  {
	text-align: left;
}

#world div.points ul {
    width: 100%;
    max-width: 960px;
		margin: 0 auto;
		display: flex;
    justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 60px;
}

#world div.points li {
    width: 22%;
    max-width: 225px;
}

#world div.points li img {
    width: 100%;
    max-width: 225px;
}
div.gototop {
	position: absolute;
	bottom: 10px;
	right: 15px;
	text-align: right;
	font-size: 80%;
}

/** bxSlider
===================================*/
#world div.slideCont {
	overflow: hidden;
}

#world div.bx-wrapper {
	width: 100%;
	max-width: 700px!important;
	overflow: visible!important;
	margin: 0 auto;
}


#world .bx-viewport {
	width: 100%;
	max-width: 700px;
	overflow: visible!important;
}


#world div.slideCont img {
	width: 100%;
	height: auto
}

#world div.slideCont {
	margin-bottom: 0%;
}
#world .slider01 {
	visibility: hidden;
}

@media screen and (min-width: 1600px) { 
	div.shape {
		position: relative;
		overflow: hidden;
		margin: -15% 0 0;
		padding: 10% 0 0;
		z-index: 1;
		}
		
		div.shape:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 120%;
		height: 80%;
		margin: 3% -10% 0;
		background: #011931;
		background: #3087C9;
		-webkit-transform-origin: right center;
		-ms-transform-origin: right center;
		transform-origin: right center;
		-webkit-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
		z-index: -1;
		}
		
		div.shape div.inner {
		box-sizing: boder-box;
		width: 100%;
		height: 740px;
		margin: 0 auto;
		padding: 0 0 0;
		color: #fff;
		text-align: center;
		}
}

@media screen and (min-width: 2200px) { 
	div.shape {
		position: relative;
		overflow: hidden;
		margin: -15% 0 30px;
		padding: 10% 0 0;
		z-index: 1;
	}

	div.shape:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 120%;
		height: 80%;
		margin: 3% -10% 0;
		background: #011931;
		background: #3087C9;
		-webkit-transform-origin: right center;
		-ms-transform-origin: right center;
		transform-origin: right center;
		-webkit-transform: rotate(-2deg);
		-ms-transform: rotate(-2deg);
		transform: rotate(-2deg);
		z-index: -1;
		}	
}

@media screen and (max-width: 480px) { 


	#world div.main img, #world div.solution img {
		width: 100%;

	}

	#world h1 {
		font-size: .18rem;
		font-weight: normal;
		line-height: 1.6;
		padding-top: 1em; 
	}

	#world div.main br.dnone {
		display: none;
	}

	#world h2 {
		font-size: .18rem;
	}

	#world h3, #world h4 {
		font-size: .16em;
	}

	div.shape {
		margin: -15% 0 -30px;
	}	

	div.shape div.inner {
		box-sizing: boder-box;
		height: 490px;
	}


	#world div.solution {
		margin-bottom: 30px;
	}
	#world div.points p  {
		text-align: left;
	}
	
	#world div.points p.headline  {
		text-align: center;
	}

	#world div.points ul {
		width: 100%;
		margin: 0 auto;
		display: block;
	}
	
	#world div.points li {
        width: 100%;
        max-width: 440px;
        display: block;
        margin-bottom: 25px;
	}
}