@charset "utf-8";

/* ======================================================
 * layout_pc.css
====================================================== */

@media print, screen and (min-width: 768px) {

/* ------------------------------------------------------
 * Main
------------------------------------------------------ */
#mainVisual {
  position: relative;
  max-width: 1440px;
  margin:0 auto 28px;
}
#mainVisual .innr_mainVisual {
    float: right;
    width: 83.47%;
}
#mainVisual .lead {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  left: 9%;
  z-index: 300;
}
#mainVisual .lead h2 {
  font-size: 6vw;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
#mainVisual .lead p {
  font-size: 1.1vw;
}

/* ----- .common ----- */
.common {
  max-width: 1440px;
  margin: 0 auto 100px;
}
.common .co_inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* ----- #merit ----- */
#merit {
  width: 100%;
  margin: 47px auto 0;
  padding: 0 10px;
}
#merit .flexBox {
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
#merit .flexBox .flex-item {
  width: 48.7931%;
  margin-top: 30px;
  padding: 37px 19.8% 14px 3.19%; 
  border: solid 5px #faa500;
  background-position: right bottom;
  background-repeat: no-repeat;
}
#merit .flexBox .flex-item:nth-of-type(1) {
  background-image: url(/fb/merit/img/bg_merit01_pc.png);
}
#merit .flexBox .flex-item:nth-of-type(2) {
  background-image: url(/fb/merit/img/bg_merit02_pc.png);
}
#merit .flexBox .flex-item:nth-of-type(3) {
  background-image: url(/fb/merit/img/bg_merit03_pc.png);
}
#merit .flexBox .flex-item:nth-of-type(4) {
  background-image: url(/fb/merit/img/bg_merit04_pc.png);
}
#merit .flexBox h4 { font-size:2.4rem; line-height: 1.58; color:#faa500; }
#merit .flexBox p { margin-top: 15px; font-size:1.6rem; line-height:1.875; }


/* ----- #contents01 ---- */
#contents01 { width:100%; max-width: none; margin-top:130px; padding:100px 10px 53px; background:linear-gradient(to right, #f5f5f5, #f5f5f5 62.5%); background-size:62.5% 100%; background-repeat:no-repeat; }
#contents01 .flexBox {
  justify-content: space-between;
  align-items: flex-start;
}
#contents01 h3 { width: 25.862%; font-size:4.6rem; line-height:1; }
#contents01 h3 span { font-size:2rem; }
#contents01 .example_wrap { width: 70.25862%; }
#contents01 .example { margin-bottom: 1.5em; padding-left:169px; }
#contents01 .example:nth-of-type(1) { background:url(/fb/merit/img/ico01.png) left top no-repeat; background-size:119px 101px; }
#contents01 .example:nth-of-type(2) { background:url(/fb/merit/img/ico02.png) left 14px no-repeat; background-size:131px 131px; }
#contents01 .example:nth-of-type(3) { background:url(/fb/merit/img/ico03.png) left center no-repeat; background-size: 158px 123px; min-height:123px; display:flex; flex-direction:column; justify-content:center; }
#contents01 h4 { font-size:2.6rem; color:#faa500; }
#contents01 .example li { font-size:1.6rem; line-height:2; text-indent:-1em; margin-left:1em; }

/* ----- #contents02 ---- */
#contents02 {
  width: 100%;
  padding: 0 10px;
}
#contents02 h3 { font-size:4.6rem; }
#contents02 p { margin-top: 40px; font-size: 1.6rem; line-height:1.75; }
#contents02 .flexBox { margin-top: 30px; width:100%; justify-content: center;}
}