@charset "utf-8";

/* ========================================
 共通 
======================================== */
body {color: #444;}
h2{color: #1b75b7;}
.bgc_blu{background-color:#f4f8fa; border-top: 1px solid #e7f2f7; border-bottom: 1px solid #e7f2f7;}
.bgc4 { background-color: #1b75b7;}
.scroll_text { font-size: 14px; margin-bottom: 20px;}

/* ========================================
 header 
======================================== */
#header { padding: 20px 3%;}
nav ul {font-weight: bold;}
nav ul a:hover { color: #1b75b7;}
.nav_logo {	color: #1b75b7;	/*font-size: 26px;*/font-weight: bold; }
.nav_logo img {height: 52px;}
.nav_logo span{font-size: 14px;}
.g-nav_contact { background-color: #EF6E2E;}

/* ========================================
 main-visual 
======================================== */
.main-visual { margin-top: 75px; background: linear-gradient(120deg, #f4f8fa 0%, #f4f8fa 50%, #1b75b7 50%, #1b75b7 100%);}
.wrapper_m80 { padding: 80px 0 0 0;}
.main-visual_flexBox { justify-content: space-around;}
.main-visual_title {color: #1b75b7; font-size: 64px; margin-bottom: 30px;	margin-top: 60px;}
.main-visual_fs1 { font-size: 26px;	display: block; color: #4d4d4d;margin-bottom: 0.5em;}
.main-visual_fs2 { font-size: 16px;  line-height: 1.75; margin-left: 160px;}
h1.main-visual_title img {width: 320px;}
.main-visual img.gamen { width: 600px; height: auto;}
.main-visual_flexL { margin-right: 30px; padding-bottom: 80px;}
.downloadbtn { background-color: #FCD017;}

/* ========================================
 ECプラスのデモページ
======================================== */
#demo {	border-radius: 1em;	padding: 40px 50px;}
.demo_flexbox {display: -webkit-flex;display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: left;}
.demo-qr {text-align: right; margin-left: auto; color: #fff;}
#demo h3{ font-size: 26px; color: #fff; margin-bottom: 20px;}
#demo p {color: #fff; margin-bottom: 1em;}
.demo_btn { width: 100%;max-width: 300px;}
.demo_btn a {
  position: relative;
  color: #1b75b7;
	font-weight: bold;
  background: #fff;
  border-radius: 8px;
  padding: 10px 70px 10px 30px;
  text-align: left;
}
.demo_btn a:hover { opacity: .9;}
.demo_btn a::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #1b75b7;
}
.demo_btn a::after {
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 38px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

/* ========================================
 ECプラスとは 
======================================== */
.ecp_sec1 {text-align: center;}
.ecp_sec1 p { margin-bottom: 50px;}
.ecp_sec1 p:last-child { margin-bottom: 0;}
.ecp_sec1btn { display: none;}

/* ========================================
ECプラスのご利用料金
======================================== */
.ecp_price1 {text-align: center;}
.ecp_price1 p:first-child { color: #EF6E2E;font-size: 24px; font-weight: bold;}
.ecp_price1 p:last-child { font-size: 60px; font-weight: bold;}
.ecp_price_font { font-size: 32px;}
.ecp_price_font2 { font-size: 40px; margin-left: .25em;}
.ecp_price_arrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 24px solid #1b75b7;
  border-right: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 18px solid transparent;
  margin: 25px auto 10px auto;
}
.ecp_price2 { text-align: center; margin-bottom: 50px;}
.ecp_price2 p:first-child { font-size: 28px;}
.ecp_price2 p:last-child { font-size: 60px; font-weight: bold; color: #EF6E2E;}
.ecp_price_tsunagoo { padding: 50px;}
.ecp_price_flexBox { display: flex; margin-bottom: 30px; justify-content: space-around;}
.ecp_price_flexL { width: 40%; margin: auto 0;}
.ecp_price_flexR p { font-size: 18px;}
.ecp_price_flexR p:first-child { margin-bottom: .5em;}
.ecp_price_bold1 {font-size: 22px;font-weight: bold; }
.ecp_price_bold2 { font-size: 24px; font-weight: bold;}

/* ========================================
 導入ステップ 
======================================== */
.step_flexBox { display: flex; justify-content: space-between; text-align: center;margin-bottom: 1em;}
.step_flexitem { width: 170px; margin-right: 3px;}
.step_flexitem h3 { color: #fff; background-color: #1b75b7; font-size: 16px;line-height: 1.25; padding: 15px;}
.step_bgc5 { background-color: #fff;border:1px solid #ccc; padding: 20px 15px;}
.step_text { font-size: 18px; font-weight: bold; margin-bottom: 20px;}
.step_m { margin-top: 15px; margin-bottom: 35px;}
.step_arrowR {
  display: inline-block;
  border-style: solid;
  border-width: 14px 0 14px 20px;
  height: 20px;
  border-color: transparent transparent transparent #1b75b7;
  margin: auto;
}

/* ========================================
 お問い合わせ 
======================================== */
.inquiry_flexL { margin: auto 0;font-size: 60px;color: #fff;font-weight: bold; line-height: 100%;}
.inquiry_flexL br {display: none;}
.inquiry_flexL p.inquiry_sub {font-size: 22px; line-height: 160%; font-weight: normal;margin-top: 0; margin-bottom:20px;}
.inquiry_flexL a { margin-top: 40px;}
.inquiry_flexL a { background-color: #EF6E2E; width: auto;}
.inquiry_flexR { background: #fff; padding: 70px 70px 0 70px ; margin-right: 0; text-align: center;	border-radius: 1em;}
.inquiry_text { margin-bottom: 5px;}
.inquiry_text span { background: linear-gradient(transparent 70%, #FCD017 70%);}
.inquiry_tel { margin-bottom: 5px;}

/* ========================================
 Facebook 
======================================== */
.ecp_fb_title {
  background: #94429A;
  color: #fff;
  text-align: center;
  width: 650px;
  padding: 20px;
  font-size: 24px;
  margin: 0 auto 30px auto;
  position: relative;
}

.ecp_fb_title::before {
  content: "";
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 20px solid #94429A;
  z-index: 2;
}
.ecp_fbBox { display: flex; justify-content: center;}
.ecp_fbBox img { width: 330px; height: auto; margin-right: 30px;}
.ecp_fbBoxR { margin: auto 0 0 0;}
.ecp_fbBoxR p {font-size: 18px; margin-bottom: 20px;}
.ecp_fbbtn { width: 280px; background: #F8F4FA; border: #94429A 2px solid; color: #94429A;}

/* =============================================
 レスポンシブ (max-width: 1024px) 
============================================= */
@media screen and (max-width: 1024px) {
  /* ===== header ===== */
  #g-nav.panelactive { padding: 30px 3%; }
  #g-nav.panelactive img { width: 200px; }
	.nav_logo img {height: 48px;}
  /* ===== main-visual ===== */
  .main-visual_title {font-size: 32px; margin-bottom: 30px;	margin-top:20px;}	
  .main-visual_fs1 {font-size: 22px;}
  .main-visual_fs2 {font-size: 14px; margin-left: 100px; }
	.main-visual_flexL { margin-right: 30px; padding-bottom: 30px;}
  .main-visual img.gamen {width: 340px;height: 240px; margin-top: 50px; }
	h1.main-visual_title img {width: 320px; height: auto;}

  /* ===== サービスの流れ ===== */
	.demo_flexbox {	display: block;	text-align: center;	}
	.demo-qr {display: none;}
	
  /* ===== 利用料金 ===== */
  .ecp_price_tsunagoo { padding: 30px; }
	.ecp_price_flexL { width: 35%; }
  .ecp_price_flexR p { font-size: 16px; }
  .ecp_price_bold1 {font-size: 18px;}
  .ecp_price_bold2 {font-size: 20px; }
	.demo_btn {max-width: 800px;}

  /* ===== 導入ステップ ===== */
  .step_flexitem { width: 170px; margin-right: 3px; }
  .step_flexitem h3 {font-size: 14px; }
  .step_text {font-size: 13px; }
  .step_m { margin-top: 12px; margin-bottom: 30px; }
  .step_arrowR {border-width: 10px 0 10px 16px;height: 16px;}
	
	/* ===== Facebook ===== */
  .ecp_fb_title {font-size: 20px;}
  .ecp_fb_title::before {
    content: "";
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 20px solid #94429A;
    z-index: 2;
  }
  .ecp_fbBox .pc_only { display: block; width: 280px; height: auto;}
	
  /* ===== お問い合わせ ===== */
	.inquiry_flexL br {display: block;}
	.inquiry_flexL a { margin-top: 20px;}
  .inquiry_flexR { padding: 80px 50px 0px 50px; }
}

/* =============================================
 レスポンシブ (max-width: 768px) 
============================================= */
@media screen and (max-width: 768px) {
  /* ===== header ===== */
	.nav_logo img {height: 48px;}
  /* ===== main-visual ===== */
	.nav_logo span{display: none;}
  .main-visual_flexBox {display: block;}
  .main-visual_flexL {position: relative; margin-right: 0; padding-bottom: 0;}
  .main-visual_title {font-size: 53px;text-align: left;}
  .main-visual_fs1 {font-size: 28px;}
  .main-visual_fs2 {font-size: 16px; margin-left: 180px;}
  .main-visual_flexL p {margin-bottom: 30px;font-size: 21px;}
  .main-visual img.gamen {width: 100%;height: auto; margin-top: 0;}
  .downloadbtn { bottom: -600px; }
	
  /* ===== ECプラスとは ===== */
  .mangalink_flexBox {display: block; }
  .mangalink_flexBox img {width: 100%; margin-bottom: 30px; }
  .ecp_sec1_pconly {display: none; }
  .ecp_sec1btn {background: #94429A; }
  .ecp_sec1btn {display: block; }
  
  /* ===== 利用料金 ===== */
  .ecp_price1 p:first-child {font-size: 20px;}
  .ecp_price1 p:last-child {font-size: 44px; }
  .ecp_price_font {font-size: 23px;}
  .ecp_price_font2 {font-size: 30px;}
  .ecp_price_arrow {
    border-top: 20px solid #1b75b7;
    border-right: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid transparent;
    margin: 10px auto 0 auto;
  }
  .ecp_price2 {margin-bottom: 30px;}
  .ecp_price2 p:first-child {font-size: 20px;}
  .ecp_price2 p:last-child {font-size: 44px;}
  .ecp_price_tsunagoo {padding: 30px 60px;}
  .ecp_price_flexBox {display: block;}
  .ecp_price_flexL {width: 100%;}
  .ecp_price_flexL img {
    display: block;
    width: 250px;
    height: auto;
    margin: 0 auto 30px auto;
  }

  /* ===== ご導入の流れ ===== */
  .step_flexBox {display: block;}
  .step_flexitem {width: 250px;margin: 0 auto; }
  .step_flexitem h3 {font-size: 16px; }
  .step_text {font-size: 18px; }
  .step_m {margin-top: 0; margin-bottom: 20px;}
  .step_arrowR {
    border-top: 20px solid #1b75b7;
    border-right: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid transparent;
    margin: 20px auto 0 auto;
  }

  /* ===== お問い合わせ ===== */
  .inquiry_flexL a {
    position: absolute;
    bottom: -360px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    width: 400px;
  }
  .inquiry_flexR { padding: 30px; margin-bottom: 90px; text-indent: 0;}
	
  /* ===== Facebook ===== */
  .ecp_fb_title {width: 100%;}
  .ecp_fbBox {display: block;}
  .ecp_fbBox img {width: 150px;height: auto;margin: 0 auto 20px auto;}
  .ecp_fbBoxR p {text-align: center;}
  .ecp_fbBox .pc_only {display: none;}
}

/* =============================================
 レスポンシブ (max-width: 520px) 
============================================= */
@media screen and (max-width: 520px) {
  /* ===== header ===== */
  /* ===== main-visual ===== */
  .wrapper_m80 { padding: 50px 0 0 0; }
  .main-visual_title { font-size: 35px; }
  .main-visual_fs1 { font-size: 18px; }
  .main-visual_fs2 { font-size: 13px; margin-left: 120px; }
  .main-visual_flexL p { font-size: 15px; margin-bottom: 10px; }
  .downloadbtn {bottom: -445px;}
	
  /* ===== ECプラアスとは ===== */
  .ecp_sec1 {text-align: left;}
	
  /* ===== ご利用料金 ===== */
  .ecp_price_tsunagoo { padding: 30px;}
  .ecp_price_bold2 {font-size: 18px;}
  .ecp_price_flexR p {font-size: 13px;}
  .ecp_pricebtn {width: 100%;font-size: 18px;}
	
  /* ===== お問い合わせ ===== */
  .inquiry_flexL a { width: 280px;}
}