@charset "UTF-8";

/* ==========================================================================
 * Font face
 * ========================================================================== */
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

/* ==========================================================================
 * Root
 * ========================================================================== */
*,
::before,
::after {
	background-repeat: no-repeat;
	box-sizing: border-box;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
body {
  min-width: 1000px;
	margin: 0 auto;
	font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif;
	font-size: 1.8em;
	font-size: 1.8rem;
	line-height: 1.8;
	line-height: 1.8;
	background-color: #fff;
}
@media screen and (min-width: 641px) {
  .visible_sp {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .visible_pc {
    display: none;
  }
  body {
    max-width: 640px;
    min-width: inherit;
  }
}

/* ==========================================================================
 * HTML5 display definitions
 * ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}
audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}

/* ==========================================================================
 * Anchor
 * ========================================================================== */
a:link,
a:visited {
	background-color: transparent;
	color: #000;
	text-decoration: none;
}
a:active,
a:hover {
	outline: 0;
}

/* ==========================================================================
 * Embedded
 * ========================================================================== */
img {
  border: 0;
	vertical-align: top;
}
@media screen and (max-width: 640px) {
  img {
    width: 100%;
  }
}
svg:not(:root) {
	overflow: hidden;
}

/* ==========================================================================
 * Grouping
 * ========================================================================== */
figure {
	margin: 0;
}
hr {
	box-sizing: content-box;
	height: 0;
	border: none;
	border-top: 1px solid #bbb;
}
dd {
	margin-left: 0;
}

/* ==========================================================================
 * Float
 * ========================================================================== */
.clear {
	clear: both;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

/* ==========================================================================
 * List
 * ========================================================================== */
ul,
ol,
dl {
	margin: 0;
  padding: 0;
	list-style: none;
}

/* ==========================================================================
 * Text
 * ========================================================================== */
b,
strong {
	font-weight: bold;
}
mark {
	background: #ff0;
	color: #000;
}
small,
.txt-small{
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
address {
	font-style: normal;
}
h1,
h2,
h3,
h4,
h5 {
	margin: 0;
  padding: 0;
}
.h2 {
  color: #2d8cff;
  display: inline-block;
  font-size: xx-large;
  font-weight: bold;
  margin: 10px 0 20px;
  padding: 0 0 10px;
  text-align: center;
}
.h2::after {
  border-top: 1px solid #2d8cff;
  display: block;
  font-size: medium;
  font-weight: normal;
  margin: 5px 0 0;
  padding: 10px 0 0;
}
@media screen and (max-width: 640px) {
  .h2 {
    font-size: x-large;
    margin: 10px 0 0;
  }
}
p {
	margin: 0;
}
.txt-left {
	text-align: left;
}
.txt-center {
	text-align: center;
}
.txt-right {
	text-align: right;
}
.txt-unbold {
	font-weight: normal;
}
.txt-bold {
	font-weight: bold;
}
.txt-emphasis {
	color: #e74c3c;
}
.txt-notes {
	color: #7f8c8d;
}
.yellow_line{
  background: linear-gradient(transparent 60%, #fff788 0%);
  display: inline;
}

/* ==========================================================================
 * Common
 * ========================================================================== */
#page_container {
	max-width: 2000px;
	margin: 0 auto;
}
.inner_width {
	width: 1000px;
	margin: 0 auto;
}
@media screen and (max-width: 640px) {
  #page_container {
    max-width: 640px;
    margin: 0 auto;
  }
  .inner_width {
    width: 100%;
  }
}
/*-------------------- Back to Top --------------------*/
a.backtotop {
	position: fixed;
	bottom: 30px;
	right: 5%;
	width: 40px;
	height: 40px;
	padding: 38px 0 0;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	opacity: .5;
	border-radius: 50%;
}
a.backtotop::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #ffffff transparent;
}

/* ==========================================================================
 * CTA
 * ========================================================================== */
.cta {
  margin: 80px 0;
}
.cta ul {
  display: flex;
}
.cta ul li:first-child {
  margin: 0 20px 0 0;
}
.cta ul li:last-child a {
  pointer-events: none;
}
@media screen and (max-width: 640px) {
  .cta {
    margin: 40px 0;
  }
  .cta ul {
    display: block;
    padding: 0 3%;
  }
  .cta ul li:first-child {
    margin: 0 0 20px;
  }
  .cta ul li:last-child a {
    pointer-events: auto;
  }
}

/* ==========================================================================
 * HD
 * ========================================================================== */
.hd {
  background: url("../images/hd_bg.png") no-repeat top center;
  min-height: 555px;
  padding: 50px 0 0;
  text-align: center;
}
.hd .h1 {
  margin: 0 0 50px;
}
@media screen and (max-width: 640px) {
  .hd {
    background: none;
    min-height: auto;
    padding: 0;
  }
  .hd .h1 {
    margin: 0;
  }
  .hd p {
    margin: -25% 0 0;
    padding: 0 3% 40px;
  }
}

/* ==========================================================================
 * Gnavi
 * ========================================================================== */
.gnavi {
  background: #fff;
  box-shadow: 0 7px 3px -3px #f0f0f0;
  display: none;
  padding: 3px 0;
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}
.gnavi ul {
  align-items: center;
  display: flex;
}
.gnavi ul li {
  border-left: 1px solid #f0f0f0;
  flex: 1;  
  flex-basis: auto;
  padding: 0 10px;
  text-align: center;
}
.gnavi ul li:first-child {
  border-left: none;
}
.gnavi ul li a {
  display: block;
  font-size: small;
  line-height: 55px;
  padding: 3px 0;
}

/* ==========================================================================
 * SERVICE
 * ========================================================================== */
.service {
  background: url("../images/service_bg.png") no-repeat center;
  padding: 50px 0 0;
}
.service h2 {
  text-align: center;
}
.service .h2::after {
  content: "SERVICE";
}
.service .lead {
  color: #0073ff;
  font-size: x-large;
  padding: 0 0 40px;
  text-align: center;
}
.service h3 {
  padding: 0 0 40px;
}
.service h4 {
  padding: 0 0 20px;
}
.service .basic_box {
  background: #f3f8ff;
  margin: 0 0 20px;
  padding: 0 0 40px;
}
.service .option_box {
  background: #f8f8f8;
  margin: 0 0 20px;
  padding: 0 0 40px;
}
.service .content_box {
  padding: 0 10px;
}
.service .sublead {
  padding: 0 0 20px;
}
.service .option_list_fst {
  padding: 0 0 40px;
}
.service div > ul {
  display: flex;
}
.service div > ul > li:first-child {
  margin: 0 20px 0 0;
}
.service div > ul > li dt {
  margin: 0 0 20px;
}
.service div > ul li dd li {
  font-size: small;
  margin: 0 0 0 20px;
  text-indent: -20px;
}
.service .mg_rooms {
  display: block;
  margin: 15px;
}
@media screen and (max-width: 640px) {
  .service {
    background: url("../images/service_bg@2x.png") no-repeat center bottom / 100%;
    margin: 0 0 20px;
    padding: 0 0 12%;
  }
  .service h2 {
    padding: 0 3%;
  }
  .service .lead {
    font-size: large;
    padding: 0 3% 20px;
    text-align: left;
  }
  .service h3 {
    padding: 0 0 20px;
  }
  .service .basic_box {
    padding: 0 0 20px;
  }
  .service .option_box {
    margin: 0;
    padding: 0 0 20px;
  }
  .service .content_box {
    padding: 0 3%;
  }
  .service .option_list_fst {
    padding: 0 0 20px;
  }
  .service div > ul {
    display: block;
  }
  .service div > ul > li {
    width: auto;
  }
  .service div > ul > li:first-child {
    margin: 0;
  }
  .service div > ul > li dd {
    margin: 0 0 20px;
  }
  .service .mg_rooms {
    margin: 0 0 10px;
  }
}

/* ==========================================================================
 * EXAMPLE
 * ========================================================================== */
.example {
  background: #edf5ff;
  padding: 40px 0;
}
.example h2 {
  text-align: center;
}
.example .h2::after {
  content: "EXAMPLE";
}
.example .lead {
  color: #0073ff;
  font-size: x-large;
  padding: 0 0 40px;
  text-align: center;
}
.example .content_box {
  border: 1px solid #0a6eb4;
  padding: 19px;
}
.example .content_box > ul {
  display: flex;
}
.example .content_box > ul > li {
  background: #cae2ff;
  padding: 20px;
  width: 468px;
}
.example .content_box > ul > li:first-child {
  margin: 0 20px 0 0;
}
.example .content_box > ul > li > dl > dt {
  margin: 0 0 20px;
  padding: 0 0 180px;
  text-align: center;
}
.example .content_box > ul > li > dl > dd small {
  display: block;
}
.example .content_box > ul > li > dl > dt span {
  display: inline-block;
  padding: 20px 0 0;
  text-align: left;
}
.example .example_box1,
.example .example_box2 {
  padding: 0 0 40px;
}
.example .example_box1 li:first-child > dl > dt {
  background: url("../images/example_meeting_pic1.png") no-repeat bottom center;
}
.example .example_box1 li:last-child > dl > dt {
  background: url("../images/example_meeting_pic2.png") no-repeat bottom center;
}
.example .example_box2 li:first-child > dl > dt {
  background: url("../images/example_webinar_pic1.png") no-repeat bottom center;
}
.example .example_box2 li:last-child > dl > dt {
  background: url("../images/example_webinar_pic2.png") no-repeat bottom center;
}
.example .example_box3 li:first-child > dl > dt {
  background: url("../images/example_rooms_pic1.png") no-repeat bottom center;
}
.example .example_box3 li:last-child > dl > dt {
  background: url("../images/example_rooms_pic2.png") no-repeat bottom center;
}
.example .example_subtl {
  border-bottom: 1px dotted #2d8cff;
  color: #2d8cff;
  padding: 0 0 10px;
  text-align: left;
}
.example .data tr {
  display: block;
  margin: 0 0 10px;
}
.example .data .lst {
  margin: 0;
}
.example .data th {
  background: #fff;
  border: 1px dotted #2d8cff;
  color: #2d8cff;
  text-align: center;
  width: 70px;
}
.example .data td {
  padding: 0 0 0 10px;
}
.example .data .pdright {
  padding: 0 20px 0 10px;
}
@media screen and (max-width: 640px) {
  .example h2 {
    padding: 0 3%;
  }
  .example .lead {
    font-size: large;
    padding: 0 3% 20px;
    text-align: left;
  }
  .example h3 {
    padding: 0 3%;
  }
  .example .content_box {
    margin: 0 3%;
    padding: 3%;
  }
  .example .content_box > ul {
    display: block;
  }
  .example .content_box > ul > li {
    padding: 3%;
    width: auto;
  }
  .example .content_box > ul > li:first-child {
    margin: 0 0 20px;
  }
  .example .content_box > ul > li > dl > dt {
    padding: 0 0 40%;
  }
  .example .content_box > ul > li > dl > dt span {
    font-size: 1.4rem;
    padding: 10px 0 0;
  }
  .example .content_box > ul > li > dl > dd {
    font-size: 1.4rem;
  }
  .example .example_box1,
  .example .example_box2 {
    padding: 0 0 20px;
  }
  .example .example_box1 li:first-child > dl > dt {
    background: url("../images/example_meeting_pic1@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_box1 li:last-child > dl > dt {
    background: url("../images/example_meeting_pic2@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_box2 li:first-child > dl > dt {
    background: url("../images/example_webinar_pic1@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_box2 li:last-child > dl > dt {
    background: url("../images/example_webinar_pic2@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_box3 li:first-child > dl > dt {
    background: url("../images/example_rooms_pic1@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_box3 li:last-child > dl > dt {
    background: url("../images/example_rooms_pic2@2x.png") no-repeat bottom center / 100%;
  }
  .example .example_subtl {
    padding: 0 0 5px;
  }
  .example table {
    width: 100%;
  }
  .example .data {
    border-spacing: 0;
    margin: 5px 0 0;
  }
  .example .data th {
    font-size: 1.4rem;
    width: 50px;
  }
  .example td {
    font-size: 1.4rem;
    padding: 3% 0 0;
  }
  .example .data td {
    padding: 0 0 3% 10px;
  }
  .example .data .pdright {
    padding: 0 20px 3% 10px;
  }
}

/* ==========================================================================
 * FLOW
 * ========================================================================== */
.flow .tlbg {
  background: url("../images/flow_tlbg.png") no-repeat top center;
  padding: 20px 0 0;
}
.flow h2 {
  text-align: center;
}
.flow .h2::after {
  content: "FLOW";
}
.flow .bg {
  background: url("../images/flow_bg.png") no-repeat center;
  min-height: 480px;
}
.flow .bg ul {
  display: flex;
  padding: 125px 0 0;
}
@media screen and (max-width: 640px) {
  .flow .tlbg {
    background: url("../images/flow_tlbg@2x.png") no-repeat top center / 100%;
    padding: 3% 0;
  }
  .flow .bg {
    background: none;
    min-height: auto;
  }
}

/* ==========================================================================
 * QUESTION
 * ========================================================================== */
.question {
  margin: 40px 0 0;
}
.question h2 {
  text-align: center;
}
.question .h2::after {
  content: "QUESTION";
}
.question dt {
  color: #018dcb;
  font-size: large;
  font-weight: bold;
  margin: 0 0 20px;
}
.question dt::before {
  background: #018dcb;
  content: "Ｑ";
  color: #fff;
  display: inline-block;
  margin: 0 10px 0 0;
  line-height: 40px;
  text-align: center;
  width: 40px;
}
.question dd {
  border: 1px solid #018dcb;
  margin: 0 0 40px 40px;
  padding: 10px;
}
@media screen and (max-width: 640px) {
  .question {
    margin: 20px 0 0;
  }
  .question dl {
    padding: 0 3%;
  }
  .question dt {
    font-size: auto;
    margin: 0 0 10px 40px;
    text-indent: -40px;
  }
  .question dt::before {
    line-height: 30px;
    text-indent: 0;
    width: 30px;
  }
  .question dd {
    margin: 0 0 30px 0;
    padding: 3%;
  }
}

/* ==========================================================================
 * SUPPORT
 * ========================================================================== */
.support {
  background: url("../images/support_bg.png") no-repeat top center;
  margin: 0 0 40px;
  min-height: 329px;
}
.support h2 {
  padding: 70px 0 0;
}
.support .contact {
  margin: -150px 0 0;
}
@media screen and (max-width: 640px) {
  .support {
    background: none;
    margin: 0;
    min-height: auto;
  }
}

/* ==========================================================================
 * COMPANY
 * ========================================================================== */
.company .box_summary {
  background: url("../images/company_pic.png") no-repeat left top;
  margin: 0 0 40px;
  padding: 0 0 0 180px;
}
.company .box_summary dt {
  font-size: x-large;
  margin: 0 0 20px;
}
.company .box_summary dd {
  background: #fdfdfd;
  border: 3px solid #f3f3f3;
  padding: 20px;
}
.company .company_list {
  display: flex;
  flex-wrap: wrap;
}
.company .company_list dt {
  background: #2d8cff;
  color: #fff;
  margin: 0 10px 10px 0;
  text-align: center;
  width: 90px;
}
.company .company_list dd {
  margin: 0 0 10px;
  width: 900px;
}
@media screen and (max-width: 640px) {
  .company {
    margin: 20px 0 0;
    padding: 0 3%;
  }
  .company p {
    margin: 0 0 20px;
  }
  .company .company_list dt {
    font-size: medium;
    width: 20%;
  }
  .company .company_list dd {
    font-size: medium;
    margin: 0 0 10px;
    width: 70%;
  }
}

/* ==========================================================================
 * FT
 * ========================================================================== */
.ft p {
  font-size: small;
  margin: 100px 0 20px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .ft p {
    margin: 50px 0 20px;
  }
}

/* ==========================================================================
 * FORM
 * ========================================================================== */
.form .h2::after {
  content: "FORM";
}
@media screen and (max-width: 640px) {
  .form {
    padding: 0 3%;
  }
}