@charset "UTF-8";

/* CSS Document */



@media screen and (min-width: 641px) {

/* common

------------------------------------------------------------------------*/

header .headerIn nav ul li.nav4.ov {

  background: url(../../common/images/nav_04.png) no-repeat center #3eacc0;

  border-left: none;

    border-right: none;

    font-size: 0;

}

.title_inner {

  margin: 0 auto;

  min-width: 1000px;

  max-width: 1280px;

  position: relative;

}

.main_inner {

  margin: 0 auto;

  width: 1000px;

  position: relative;

}

a {

  color: #000;

}

	br.sp {

		display: none;

	}



/* details

------------------------------------------------------------------------*/



/*

 * background

 */

/* contents_01 */



.connection_01 {

  position: relative;

  background:url("../images/contents_connection_01.png") repeat-x bottom center;

  height: 16px;

  width: 100%;

  z-index: 10;

  overflow: hidden;

  margin-top: -1px;

}

.connection_02 {

  position: relative;

  background:url("../../images/contents_connection_02.png") repeat-x bottom center;

  height: 19px;

  width: 100%;

  z-index: 10;

  margin-top: -21px;

  overflow: hidden;

}



/* contents_02 */

.contents_02 {

  position: relative;

	height: 1030px;

  background:url("../images/bg_pip.png") repeat,url("../../images/contents_bg_01.png") repeat;

  padding: 68px 0 0 0;

	box-sizing:border-box;

}

/* contents_03 */

.contents_03 {

  position: relative;

	padding-bottom:80px;

  background:url("../images/bg_pip.png") repeat,url("../../images/contents_bg_04.png") repeat bottom;

  width: 100%;

  margin-top:-1px;

}



/* mainTitle

------------------------------------------------------------------------*/



.mainTitle {

  position: relative;

  height: 168px;

  background: url(../../images/contents_bg_02.png) repeat;

}

.mainTitle .txt_inner {

  width: 922px;

  position: absolute;

  left: 50%;

  margin-left: -461px;

}

.mainTitle h2 {

	width:752px;

	height:58px;

	margin:23px auto 0;

	background:url(../images/heading.png) no-repeat;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}



/* Bread Crumb */

.mainTitle .breadcrumb ul {

  padding-top: 20px;

  margin-left: 33px;

}

.mainTitle .breadcrumb ul li {

  display: inline-block;

  padding-right: 8px;

}

.mainTitle .breadcrumb ul li a {

  text-decoration: none;

}

.mainTitle .breadcrumb ul li a:hover {

  opacity: 0.7;

  filter: alpha(opacity=70);        /* ie lt 8 */

  -ms-filter: "alpha(opacity=70)";  /* ie 8 */

  -moz-opacity: 0.7;                /* FF lt 1.5, Netscape */

  -khtml-opacity: 0.7;

}





/* contents

------------------------------------------------------------------------*/



.wrap .inner {

	position:relative;

  width: 988px;

  margin: 0 auto;

}

.wrap .contents .inner {

  width: 980px;

}

.inner .text {

  text-align: center;

}

.inner .text p {

  margin-bottom: 40px;

}

.contents_02 .inner .text p {

  width: 477px;

	letter-spacing: calc((70 / 1000)*1em);

  color: #ffffff;

  font-size: 18px;

  line-height: 1.9;

  text-align: left;

}

.contents_03 .inner .text p {

  width: 475px;

	letter-spacing: calc((70 / 1000)*1em);

  color: #ffffff;

  font-size: 18px;

  line-height: 1.9;

  text-align: left;

}

.contents_04 .inner .text p {

  width: 477px;

	letter-spacing: calc((70 / 1000)*1em);

  color: #ffffff;

  font-size: 18px;

  line-height: 1.9;

  text-align: left;

}

.wrap .contents .inner .text p {

  width: 432px;

}



/* 01 */

.contents_02 .inner .image {

  position:absolute;

	top:0;

	right:0;

	width:477px;

	height:420px;

	background:url(../images/figure_01.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_02 .inner .image02 {

	float: left;

	width:987px;

	height:440px;

	margin-top: 87px;

	background:url(../images/figure_02.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_02 .inner .text {

  float: left;

	margin:40px 0 0 0;

}

.contents_02 .inner .text .img {

	width:474px;

	height:145px;

	margin:0 auto 30px;

	background:url(../images/caption_01.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

/* 02 */

.contents_03 .inner .image {

	position:absolute;

	top:61px;

	right:0;

	width:477px;

	height:490px;

	background:url(../images/figure_03.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .image02 {

	float: left;

	width:573px;

	height:43px;

	margin-top: 87px;

	background:url(../images/caption_03.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .image03 {

	float: left;

	width:987px;

	height:545px;

	margin-top: -40px;

	background:url(../images/figure_04.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .text {

  float: left;

  margin-top: 136px;

}

.contents_03 .inner .text .img {

	width:404px;

	height:138px;

	margin:0 auto 40px;

	background:url(../images/caption_02.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

/* 03 */

.wrap .contents {

  position: relative;

/*  background:url(../../images/contents_bg.png) repeat;

  background-size: 16px 16px;*/

  background:url("../images/bg_pip.png") repeat,url(../../images/contents_bg.png) repeat;

  margin-top: -14px;

  padding-bottom: 88px;

}

.wrap .contents .inner .image {

  position: absolute;

	left: 0;

	top: 121px;

	width:468px;

	height:211px;

	background:url(../images/figure_03.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.wrap .contents .inner .text {

  float: right;

  margin-top: 80px;

}

.wrap .contents .inner .text .img {

	width:431px;

	height:36px;

	margin:0 auto 40px;

	background:url(../images/caption_03.png) no-repeat center;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

/* 04 */

.wrap .contents.contents_04 {

	padding:50px 0 150px 0;

}

	.contents_04 dl{

		    overflow: hidden;

    margin-top: 20px;

	}

	.contents_04 dt{

	width:120px;

	height:40px;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

		float: left;

	}

.contents_04 dt.image01 {

	background:url("../images/tag01.png") no-repeat center;

}

.contents_04 dt.image02 {

	background:url("../images/tag02.png") no-repeat center;

}

.contents_04 dt.image03 {

	background:url("../images/tag03.png") no-repeat center;

}

	.contents_04 dd{

		display: table-cell;

    color: #ffffff;

    font-size: 18px;

    line-height: 1.9;

    text-align: left;

		    padding-left: 1em;

    padding-top: 0.2em;

    vertical-align: top;

	}

	footer .footerIn {

		display: none;

	}

	footer .top {

		border-top: none;

	}

/* 共通バナーエリアの非表示 */

	/*footer .footerIn { padding:0; }

	footer .top { border-top:none; }*/

}



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

	br.sp {

		display: block;

	}

	.breadcrumb {

		display: none;

	}

  header .headerIn nav ul li.nav4.ov {

    max-width: 100%;

    height: 0;

    margin:0 auto 7% auto;

    padding-bottom:5.625%;

    background:url(../../common/images/sp/nav_04_ov.png) no-repeat center;

    background-size:contain;

  }

	.wrap .mainTitle {

	position: relative;

	width: 100%;

	height: 0;

  margin-top: 13.906%;

	padding: 0 0 42.812%;

	box-sizing: border-box;

	background: url(../images/sp/contents_bg.png) repeat-x;

  background-size: contain;

}

.wrap .mainTitle h2 {

	width: calc(373/640*100%);

	height: 0;

	margin: 0 auto 3.437% auto;

	padding:0 0 calc(127/373*100%) 0;

	background:url(../images/sp/heading.png) no-repeat;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.wrap .mainTitle .txt_inner {

	padding:8.75% 0 0 0;

}

.wrap .mainTitle .img_inner {

	position: absolute;

	bottom: 0;

	right: 0;

	width: 22.343%;

	padding: 0 9.843% 5.937% 0;

}

.wrap .mainTitle .img_inner span {

	max-width: 143px;

}



/* details

------------------------------------------------------------------------*/



/*

 * background

 */

/* contents_01 */



.connection_01 {

  position: relative;

  background:url("../images/contents_connection_01.png") repeat;

  height: 17px;

  width: 100%;

  z-index: 10;

}

.connection_02 {

  position: relative;

  background:url("../../images/contents_connection_02.png") repeat;

  height: 19px;

  width: 100%;

  z-index: 10;

  margin-top: -19px;

}



/* contents_02 */

.contents_02 {

  position: relative;

	padding:0 calc(50/640*100vw) 14.482%;

  /*background:url("../../images/contents_bg_01.png") repeat;*/

  background:url("../images/bg_pip.png") repeat,url("../../images/contents_bg_01.png") repeat;

	box-sizing:border-box;

}

/* contents_03 */

.contents_03 {

  position: relative;

	padding:0 calc(50/640*100vw) 17.968%;

  /*background:url("../../images/contents_bg_04.png") repeat bottom;*/

  background:url("../images/bg_pip.png") repeat,url("../../images/contents_bg_04.png") repeat bottom;

	box-sizing:border-box;

}





/* contents

------------------------------------------------------------------------*/



.wrap .inner {

	position:relative;

	padding:10.172% 0 0 0;

  margin: 0 auto;

}

.wrap .contents .inner {

}

.inner .text {

  text-align: center;

}

.inner .text img {

  margin-bottom: 40px;

}

.inner .text p {

	letter-spacing: calc((70 / 1000)*1em);

  color: #ffffff;

  font-size: calc(28/640*100vw);

  font-size:160%;/* for android 4.2,4.3 */

  line-height: 1.9;

  text-align: left;

}

.wrap .contents .inner .text p {

}



/* 01 */

.contents_02 .inner .text .img {

	max-width:474px;

	width:calc(474/640*100%);

	height:0;

	margin:0 auto 2.586%;

	padding-bottom:calc(145/474*100%);

	background:url(../images/sp/caption_01.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_02 .inner .image {

	max-width:537px;

	width:100%;

	height:0;

	margin: calc(50/640*100%) auto calc(40/640*100%);

	padding-bottom:calc(521/537*100%);

	background:url(../images/sp/figure_01.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_02 .inner .image02 {

	max-width:537px;

	width:100%;

	height:0;

	margin: calc(50/640*100%) auto calc(40/640*100%);

	padding-bottom:calc(1015/537*100%);

	background:url(../images/sp/figure_02.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_02 .inner .text {

  float: none;

}

/* 02 */

.contents_03 .inner {

	padding:12.241% 0 0 0;

}

.contents_03 .inner .text .img {

	max-width:404px;

	width:calc(404/640*100%);

	height:0;

	margin:0 auto 2.586%;

	padding-bottom:calc(138/404*100%);

	background:url(../images/sp/caption_02.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .image {

	max-width:537px;

	width:100%;

	height:0;

	margin: calc(50/640*100%) auto calc(40/640*100%);

	padding-bottom:calc(591/537*100%);

	background:url(../images/sp/figure_03.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .image02 {

	max-width:383px;

	width:calc(383/640*100%);

	height:0;

	margin:0;

	padding-bottom:calc(93/383*100%);

	background:url("../images/sp/caption_03.png") no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .image03 {

	max-width:537px;

	width:100%;

	height:0;

	margin: calc(10/640*100%) auto 0;

	padding-bottom:calc(1180/537*100%);

	background:url(../images/sp/figure_04.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.contents_03 .inner .text {

  float: none;

}

/* 03 */

.wrap .contents {

  position: relative;

  /*background:url(../../images/contents_bg.png) repeat;

  background-size: 16px 16px;*/

  background:url("../images/bg_pip.png") repeat,url(../../images/contents_bg.png) repeat;

  margin-top: -17px;

	box-sizing:border-box;

}

.wrap .contents .inner .text .img {

	max-width:416px;

	width:71.724%;

	height:0;

	margin:0 auto 12.586%;

	padding-bottom:6.209%;

	background:url(../images/sp/caption_03.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.wrap .contents .inner .image {

	max-width:574px;

	width:98.965%;

	height:0;

	margin:0 auto 13.275%;

	padding-bottom:45.517%;

	background:url(../images/sp/figure_03.png) no-repeat center;

	background-size:contain;

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

}

.wrap .contents .inner .text {

  float: none;

}

/* 04 */

.wrap .contents.contents_04 {

	padding:0 calc(50/640*100vw) 13.75%;

}

.wrap .contents.contents_04 .inner {

	padding-top:16.896%;

	padding-bottom:16.896%;

}

.wrap .contents.contents_05 {

	margin-top:0;

	padding:0 4.687% 27.343%;

}

	.contents_04 dl{

		    overflow: hidden;

    margin-top: 20px;

	}

	.contents_04 dt{

		max-width: 180px;

	width:calc(180/640*100%);

	height:0;

	padding-bottom:calc(40/640*100%);

	text-indent: 100%;

	white-space: nowrap;

	overflow: hidden;

	}

.contents_04 dt.image01 {

	background:url("../images/sp/tag01.png") no-repeat center;

	background-size: contain;

}

.contents_04 dt.image02 {

	background:url("../images/sp/tag02.png") no-repeat center;

	background-size: contain;

}

.contents_04 dt.image03 {

	background:url("../images/sp/tag03.png") no-repeat center;

	background-size: contain;

}

	.contents_04 dd{

		margin-top: 1em;

		letter-spacing: calc((10 / 1000)*-1em);

    color: #ffffff;

    font-size: calc(24/640*100vw);

    line-height: 1.9;

    text-align: left;

	}

	footer .sns_sp {

		margin: calc(80/640*100vw) 0 calc(80/640*100vw) 0;

	}

	footer .top {

		border-top: none;

	}

}