@charset "utf-8";
/* ============================================
      base
============================================ */
body {
	min-width: 970px;
}

.contentsArea,
#colorbox {
	color: #000;
	font-family: Lucida Sans Unicode, Lucida Grande, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic W3 JIS2004, "メイリオ","ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
	line-height: 1.625;
}

.contentsArea {
	margin-bottom: 80px;
}

#wrapper {
	width: auto;
}

header,
footer article,
footer p.copyright small,
.innerArea {
	width: 970px;
	margin-left: auto;
	margin-right: auto;
}

ul,
ol {
	margin: 0 0 20px;
}

p,
figure,
dl {
	margin: 0 0 15px;
}

li {
	margin: 0 0 12px;
}

figure {
	text-align: center;
}

figcaption {
	margin-top: 10px;
}

img {
	vertical-align: bottom;
}

header img {
	vertical-align: baseline;
}

sup {
 	vertical-align: baseline;
	position: relative;
	top: -0.8ex;
}

sub {
	vertical-align: baseline;
}



/* ============================================
      font-familly
============================================ */
/*Hiragino Kaku Gothic W1 JIS2004*/
/*Hiragino Kaku Gothic W2 JIS2004*/
/*Hiragino Kaku Gothic W3 JIS2004*/

/*Hiragino Kaku Gothic W4 JIS2004*/
/*Hiragino Kaku Gothic W5 JIS2004*/
/*Hiragino Kaku Gothic W6 JIS2004*/
h2,
strong,
.forAbout h3,
.categoryLabel,
.linkList01 .btn01,
.linkList01 .btn02,
.checkList01,
.name span,
.mainArea .outline {
	font-family: Lucida Sans Unicode, Lucida Grande, "ヒラギノ角ゴ Pro W6", Hiragino Kaku Gothic W6 JIS2004, "メイリオ","ＭＳ Ｐゴシック",sans-serif;
}
/*Hiragino Kaku Gothic W7 JIS2004*/
/*Hiragino Kaku Gothic W8 JIS2004*/
/*Hiragino Kaku Gothic W9 JIS2004*/


/* ============================================
      font-size(base 16px)
============================================ 
6px 37.50%
7px 43.80%
8px 50.00%
9px 56.30%
10px 62.50%
11px 68.80%
12px 75.00%
13px 81.30%
14px 87.50%
15px 93.80%
16px 100.00%
17px 106.30%
18px 112.50%
19px 118.80%
20px 125.00%
21px 131.30%
22px 137.50%
23px 143.80%
24px 150.00%*/

/*30px*/
h2,
h3 {
	font-size: 187.5%;
}

/*26px*/
.linkList01 .btn01,
.forCampaign h2 {
	font-size: 162.5%;
}

/*20px*/
.forAbout h2,
.linkList01 .btn02 {
	font-size: 125.00%;
}

/*18px*/
.leadingTxt,
.forCampaign h3,
.forAbout h3,
.mainArea .outline,
.name,
.date {
	font-size: 112.50%;
}

/*15px*/
.infoArea .note {
	font-size: 93.80%;
}



/* ============================================
      color (base #000)
============================================ */
/*#d72b67 pink*/
h3,
.linkList01 .btn01 a:hover {
	color: #d72b67;
}

/*#0095aa blue*/
.forAbout h2 {
	color: #0095aa;
}

/*#fff white*/
.categoryLabel,
.linkList01 .btn01 a,
.forCampaign h3,
.linkList01 .btn02 a:hover,
.mainArea .outline {
	color: #fff;
}

/*#000 black*/
.linkList01 a,
.forAbout h3 {
	color: #000;
}

/* ============================================
      text decoration
============================================ */
.linkList01 a,
.linkList01 .btn01 a:hover,
.linkList01 .btn02 a:hover,
.mainArea .ancLink a {
	text-decoration: none;
}

.linkList01 a:hover {
	text-decoration: underline;
}

/* ============================================
      transition
============================================ */
.linkList01 a span,
.linkList01 a {
	transition: .45s;
}

/* ============================================
      heading
============================================ */
/*h1*/
h1 {
	margin: 0 0 22px;
}

/*h2*/
h2 {
	text-align: center;
	line-height: 1.333;
	position: relative;
	margin: 36px 0;
	padding: 0 0 33px;
}

h2:after {
	content: "";
	display: block;
	width: 134px;
	height: 10px;
	background: #ff337a;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}

/*h3*/
h3 {
	font-weight: normal;
	line-height: 1.33;
	margin: 12px 0;
}

/*common*/
h2:first-child,
h3:first-child {
	margin-top: 0;
}


/* ============================================
      section
============================================ */
article section {
	padding: 53px 0 20px;
}

#colorbox section {
	padding: 30px 0 20px;
}

article section section,
#colorbox section section {
	border-top:#ff337a 1px solid;
	margin: 23px 0;
	padding: 29px 10px 7px;
}



/* ============================================
      text
============================================ */
.leadingTxt {
	text-align: center;
}

.leadingTxt:before,
.leadingTxt:after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 20px;
}

.leadingTxt:before {
	vertical-align: -8%;
	background: url(/business/lp/ws-expo2016/img/icon_quate_001.svg) no-repeat;
}

.leadingTxt:after {
	vertical-align: -6%;
	background: url(/business/lp/ws-expo2016/img/icon_quate_002.svg) no-repeat bottom right;
}

.name {
	margin: 0 0 20px;
}

.name span {
	font-weight: bold;
}

.categoryLabel {
	font-weight: bold;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
	background: #ff337a;
	box-sizing: border-box;
	display: inline-block;
	min-width: 135px;
	margin: 0 0 21px;
	padding: 3px 19px 1px 20px;
}

/* ============================================
      list
============================================ */
ul {
	list-style: none;
	padding: 0;
}

dt,
dd {
	display: inline;
}

dd {
	margin: 0 0 0 5px;
}

/*checkList01*/
.checkList01 {
	font-weight: bold;
	border: #ccc 1px solid;
	border-radius: 10px;
	padding: 31px 20px 29px;
}

.checkList01 li {
	background: url(/business/lp/ws-expo2016/img/icon_check_001.svg) no-repeat 1px .46em;
	padding: 0 0 0 27px;
}

.checkList01 li:last-child {
	margin: 0;
}

/*linkList01*/
.linkList01 li {
	background: none;
	padding: 0;
}

.linkList01 a {
	display: block;
	background: url(/business/lp/ws-expo2016/img/icon_arrow_001.svg) no-repeat 0 .45em;
	padding: 0 0 0 17px;
}


/*.btn*/
.linkList01 .btn01,
.linkList01 .btn02 {
	font-weight: bold;
	text-align: center;
	line-height: 1.153;
}

.linkList01 .btn01 a,
.linkList01 .btn02 a {
	background: none;
	padding: 0;
}


/*.btn01*/
.linkList01 .btn01 span {
	text-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
	background: #ff337a no-repeat 412px center;
	box-sizing: border-box;
	display: inline-block;
	width: 460px;
	padding: 30px 50px 30px 45px;
}

.linkList01 .btn01 a:hover span {
	text-shadow: none;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
}

.linkList01 .btn01 a[target="_blank"] span {
	background-image: url(/business/lp/ws-expo2016/img/icon_newwin_001.svg);
}

.linkList01 .btn01 a[target="_blank"]:hover span {
	background-image: url(/business/lp/ws-expo2016/img/icon_newwin_002.svg);
}

/*.btn02*/
.linkList01 .btn02 {
	width: 380px;
}

.linkList01 .btn02 a {
	display: block;
	border: #a0a0a0 3px solid;
	background: #fff no-repeat 344px center;
	padding: 21px 35px 20px 35px;
}

.linkList01 .btn02 a:hover {
	background-color: #a0a0a0;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
}

.linkList01 .btn02 a[target="_blank"] {
	background-image: url(/business/lp/ws-expo2016/img/icon_newwin_003.svg);
}

.linkList01 .btn02 a[target="_blank"]:hover {
	background-image: url(/business/lp/ws-expo2016/img/icon_newwin_001.svg);
}


/* ============================================
      row
============================================ */
.row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.row.reverse {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}


/* ============================================
      size
============================================ */
.size1of2 {
	width: 49.07%;
}

.size1of3 {
	width: 31.95%;
}

.size2of3 {
	width: 65.97%;
}


/* ============================================
      mainArea
============================================ */
.mainArea {
	text-align: center;
	background: url(/business/lp/ws-expo2016/img/bg_index_001.jpg) no-repeat center 0;
	padding: 46px 0 0;
}

.mainArea .leadingTxt {
	margin: 0 0 29px;
}

.mainArea .leadingTxt:before,
.mainArea .leadingTxt:after {
	display: none;
}

.mainArea .outline {
	background: rgba(0, 183, 209, .65);
	width: 400px;
	border-radius: 50%;
	margin: 0 auto 30px;
	padding: 65px 0 42px;
}

.mainArea .outline ul,
.mainArea .outline li,
.mainArea .ancLink {
	margin: 0;
}

.mainArea .ancLink a {
	background: url(/business/lp/ws-expo2016/img/icon_arrow_002.svg) no-repeat center 66%;
	display: inline-block;
	padding: 0 0 57px;
}

.mainArea .ancLink a:hover {
	animation: arrow .65s;
}

@keyframes arrow {
  0%,
  50% {
    background-position: center 66%;
  }

  25%,
  80% {
    background-position: center 72%;
  }

  100% {
    background-position: center 70%;
  }
}

/* ============================================
      balloonArea
============================================ */
.balloonArea {
	box-shadow: 0px 3px 5px -2px rgba(0,0,0,.2);
	background: #fff;
	position: relative;
	z-index: 1;
}

.balloonArea:after {
	content: "";
	display: block;
	background: url(/business/lp/ws-expo2016/img/bg_arrow_001.png) no-repeat bottom center;
	width: 60px;
	height: 23px;
	position: absolute;
	bottom: -22px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
}


/* ============================================
      contactArea
============================================ */
.contactArea {
	text-align: center;
	background: #f5f3f0 url(/business/lp/ws-expo2016/img/bg_index_002.png);
	position: relative;
	padding: 38px 0 18px;
}

.forCampaign + .contactArea {
	padding: 49px 0 44px;
}

.contactArea .linkList01 li {
	margin: 0 0 19px;
}

.contactArea .linkList01 li:last-child {
	margin-bottom: 0;
}

.contactArea .linkList01 a {
	display: inline-block;
}

.contactArea .linkList01 .btn01 a {
	display: block;
}

.contactArea > :last-child {
	margin-bottom: 0;
}


/* ============================================
      relationalArea
============================================ */
.relationalArea {
	background: #00b7d1;
	padding: 15px 0 9px;
}

.relationalArea .linkList01 {
	text-align: center;
	margin: 0;
}

.relationalArea .linkList01 li {
	display: inline-block;
	margin: 0;
}

.relationalArea .linkList01 a {
	background-image: url(/business/lp/ws-expo2016/img/icon_arrow_003.svg);
}


/* ============================================
      .leadingArea
============================================ */
.leadingArea {
	padding: 0 32px;
}


/* ============================================
      infoArea
============================================ */
.infoArea {
	margin-bottom: 10px;
}

.infoArea .date,
.infoArea .items,
.infoArea .items li,
.infoArea .note {
	display: inline-block;
}

.infoArea .date,
.infoArea .items,
.infoArea .note {	
	margin: 0 0 25px;
}

.infoArea .date dt,
.infoArea .date dd,
.infoArea .items li {
	margin: 0;
}

.infoArea .date {
	border-left: #a0a0a0 7px solid;
	margin-right: 16px;
	padding: 1px 0 1px 12px;
}

.infoArea .items {
	vertical-align: top;
	margin-right: 5px;
}

.infoArea .items li {
	background: #ebe9e6;
	margin-right: 5px;
	padding: 3px 18px 1px;
}

.infoArea .note {
	vertical-align: -10%;
}


/* ============================================
      forCampaign
============================================ */
.forCampaign {
	text-align: center;
	padding: 42px 0 20px;
}

.forCampaign figure {
	margin: 0;
}

/*h2*/
.forCampaign h2 {
	line-height: 1.115;
	margin-bottom: 23px;
	padding: 0;
}

.forCampaign h2:after {
	display: none;
}

.forCampaign h2 span {
	background: url(/business/lp/ws-expo2016/img/bg_index_003.png);
	border-radius: 50px / 50%;
	box-sizing: border-box;
	min-width: 400px;
	display: inline-block;
	padding: 35px 35px 33px;
}

/*h3*/
.forCampaign h3 {
	margin: -38px auto 18px;
	position: relative;
	z-index: 1;
}

.forCampaign h3 span {
	background: #ff337a;
	border-radius: 33px / 50%;
	box-sizing: border-box;
	display: inline-block;
	min-width: 66px;
	padding: 21px 3px;
}

/*section*/
.forCampaign section,
#colorbox .forCampaign section {
	border: none;
	margin: 14px 0;
	padding: 0;
}


/* ============================================
      forAbout
============================================ */
.forAbout {
	background: #7fdbe8;
	padding: 58px 0;
}

.balloonArea.forAbout:after {
	background-image: url(/business/lp/ws-expo2016/img/bg_arrow_002.png);
}

.forAbout section {
	background: #fff;
	box-sizing: border-box;
	padding: 23px 30px 11px;
}

.forAbout h2 {
	margin: 0 0 16px;
	padding: 82px 0 0;
}

.forAbout h2:after {
	display: none;
}

.forAbout section:first-child h2 {
	background: url(/business/lp/ws-expo2016/img/icon_001.svg) no-repeat center 0;
}

.forAbout section:nth-child(2) h2 {
	background: url(/business/lp/ws-expo2016/img/icon_002.svg) no-repeat center 10px;
}

.forAbout section section {
	border: none;
	margin: 19px 0;
	padding: 0;
}

.forAbout h3 {
	text-align: center;
	font-weight: bold;
	margin: 19px 0;
}


/* ============================================
      modal
============================================ */
#colorbox .forCampaign h2 {
	display: none;
}

/* ============================================
      footer
============================================ */
footer p.copyright small {
	display: block;
}

footer #page-top {
	position: fixed;
	right: -100px;
	bottom: 30px;
	z-index: 3;
	transition: .3s;
}

footer #page-top a{
	display:block;
}

footer #page-top img{
	border:none;
}

footer #page-top.show {
	right: 20px;
}

footer #page-top.show.bottom {
	bottom: 88px;
}


/* ============================================
      ajustment
============================================ */
.alignR {
	text-align: right !important;
}
.alignC {
	text-align: center !important;
}
.alignL {
	text-align: left !important;
}

.valignM {
	vertical-align: middle !important;
}
.valignT {
	vertical-align: top !important;
}

.marginBottom0 {
	margin-bottom: 0 !important;
}

.marginBottom10 {
	margin-bottom: 10px !important;
}

.marginBottom20 {
	margin-bottom: 20px !important;
}

.marginBottom30 {
	margin-bottom: 30px !important;
}

.marginBottom40 {
	margin-bottom: 40px !important;
}

.marginBottom50 {
	margin-bottom: 50px !important;
}

.marginBottom60 {
	margin-bottom: 60px !important;
}

.marginTop0 {
	margin-top: 0 !important;
}

.marginTop10 {
	margin-top: 10px !important;
}

.marginTop20 {
	margin-top: 20px !important;
}

.marginTop30 {
	margin-top: 30px !important;
}

.marginTop40 {
	margin-top: 40px !important;
}

.marginTop50 {
	margin-top: 50px !important;
}

.marginTop60 {
	margin-top: 60px !important;
}


/* ============================================
     for android(display flex)
============================================ */
.webkit.android .row {
	display: block;
}

.webkit.android .row .size1of2,
.webkit.android .row .size1of3,
.webkit.android .row .size2of3 {
	display: inline-block;
	vertical-align: top;
	float: left;
	margin-right: 14px;
}

.webkit.android .row > :last-child {
	margin-right: 0;
}

.webkit.android .row.reverse .size1of2,
.webkit.android .row.reverse .size1of3,
.webkit.android .row.reverse .size2of3 {
	float: right;
	margin-right: 0;
	margin-left: 14px;
}

.webkit.android .row.reverse > :last-child {
	margin-left: 0;
}

.webkit.android .row:after {
	content: "";
	display: block;
	clear: both;
}