/*
Project Name: EPARK Apli
Theme Name: layout.css
Author: kawada
Description: CSS that controls each content page
*/

/*=========================================================================

	* The following is a style of each page content.
	* Please adjust config, etc. as appropriate.

=========================================================================*/

/*
	Responsible Config
---------------------------------------------------------------------------- */

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  img {
    max-width: 100%;
    width: 100%;
  }
}

/*
	Base Layout
---------------------------------------------------------------------------- */

.wrap {
  position: relative;
  width: 100%;
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 1020px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .wrap {
    position: relative;
    width: 100%;
    text-align: center;
  }
  .container {
    padding: 0;
    width: auto;
    text-align: left;
  }
}

/*
	Base Config
---------------------------------------------------------------------------- */

a:hover img {
  opacity: 0.65;
}

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

/*
	Header [Logo&KeyVisual]
---------------------------------------------------------------------------- */

.logo {
  margin: 25px;
}

.logo img {
  width: 150px;
  height: auto;
}

.key_v {
  width: 1020px;
  height: 855px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background: url(/uploads/portal_lpcms/images/pc/onekarubi_app_lp/main_pc_200528.png) no-repeat;
}

.key_v h1 {
  text-indent: -9999px;
  overflow: hidden;
}

.key_v .btn {
  display: block;
  position: absolute;
  bottom: 175px;
  background-color: #FFF;
}

.key_v .btn01 {
  left: 190px;
}

.key_v .btn02 {
  left: 525px;
}

@media screen and (max-width: 768px) {
  .key_v {
    width: auto;
    margin: 0 auto;
    text-align: left;
  }
  .logo {
    margin: 4.666% 3.333%;
  }
  .logo img {
    width: 28%;
    height: auto;
  }
  .btn_area {
    background-color: #8fc31f;
    padding: 0 6.4%;
  }
  .btn_area ul li {
    display: inline-block;
    width: 48.061%;
    margin: 0 2.5% 0 0;
  }
  .btn_area ul li:last-child {
    margin: 0;
  }
}

/*
	Contents [Block.01]
---------------------------------------------------------------------------- */

.bl01 .lead {
  padding: 50px 0;
  text-align: center;
  font-size: 30px;
  line-height: 1.6em;
}

.bl01 .lead em {
  font-weight: normal;
  color: #888;
}

@media screen and (max-width: 768px) {
  .bl01_sp .lead {
    padding: 6.666% 0 5.333%;
    text-align: center;
    font-size: 14px;
    line-height: 2.0em;
  }
  .bl01_sp .lead em {
    font-weight: normal;
    color: #888;
  }
}

/*
	Contents [Block.02]
---------------------------------------------------------------------------- */

.bl02-1 .lead, .bl02 .lead {
  padding: 50px 0;
  text-align: center;
  font-size: 30px;
  line-height: 1.6em;
}

.bl02-1 {
  background: url(/uploads/portal_lpcms/images/pc/onekarubi_app_lp/02_pc_200528.png) no-repeat left bottom;
  width: 1020px;
  height: 952px;
  position: relative;
}

.bl02 {
  background: url(//epark.jp/uploads/portal_lpcms/images/pc/lp52_pc_img/bl02.png) no-repeat left bottom;
  width: 1020px;
  height: 952px;
  position: relative;
}

.bl02-1 .btn {
  display: block;
  position: absolute;
  bottom: 180px;
  background-color: #FFF;
  border-radius: 15px;
}

.bl02 .btn {
  display: block;
  position: absolute;
  bottom: 45px;
  background-color: #FFF;
  border-radius: 15px;
}

.bl02-1 .btn01, .bl02 .btn01 {
  left: 190px;
}

.bl02-1 .btn02, .bl02 .btn02 {
  left: 525px;
}

@media screen and (max-width: 768px) {
  .bl02-1_sp .lead, .bl02_sp .lead {
    padding: 6.666% 0 5.333%;
    text-align: center;
    font-size: 14px;
    line-height: 2.0em;
  }
  .bl02-1_sp .btn_area {
    padding: 0 6.4% 0;
  }
  .bl02_sp .btn_area {
    padding: 0 6.4% 6.666%;
  }
}

/*
	Footer
---------------------------------------------------------------------------- */

.footer_links {
  text-align: center;
  letter-spacing: -0.25em;
  padding: 20px 0 45px;
}

.footer_links li {
  letter-spacing: 0;
  display: inline-block;
  padding: 0 10px 0 0;
  margin: 0 0 0 10px;
  line-height: 1.0em;
  font-size: 16px;
  border-right: 1px solid #444;
}

.footer_links li:last-child {
  border: none;
}

footer small {
  font-size: 14px;
  padding: 1% 2.5% 2.5%;
  display: block;
}

footer .foot_logo {
  text-align: center;
}

footer .foot_logo img {
  width: 150px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .footer_links {
    padding: 2.666% 0 8%;
  }
  .footer_links li {
    padding: 0 1.333% 0 0;
    margin: 0 0 0 1.333%;
    font-size: 12.0px;
  }
  .footer_links li:last-child {
    border: none;
  }
  footer small {
    font-size: 12px;
  }
  footer .foot_logo img {
    width: 20%;
    height: auto;
  }
}