.wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  width: 100%; }
  @media (min-width: 768px), print {
    .wrap {
      padding-left: 50px;
      padding-right: 50px; } }
  @media (max-width: 1023px) {
    .wrap {
      padding-left: 30px;
      padding-right: 30px; } }
  @media (max-width: 767px) {
    .wrap {
      padding-left: 15px;
      padding-right: 15px; } }

@media (max-width: 767px) {
  .sphide {
    display: none !important; } }

@media (min-width: 768px), print {
  .pchide {
    display: none !important; } }

html, body {
  width: 100%;
  min-width: 320px; }

img {
  max-width: 100%;
  height: auto; }

@media (max-width: 767px) {
  #head {
    background: url(../images/head_img01_sp.png) repeat-x !important;
    height: 20px !important; } }

#slideImg {
  max-width: 100%; }

.bx-controls-direction .bx-prev {
  left: calc(50% - 80px) !important; }
  @media (max-width: 767px) {
    .bx-controls-direction .bx-prev {
      left: 15px !important; } }

.bx-controls-direction .bx-next {
  right: calc(50% - 80px) !important; }
  @media (max-width: 767px) {
    .bx-controls-direction .bx-next {
      right: 15px !important; } }

@media (max-width: 767px) {
  .logo h1 {
    margin-top: -10px;
    bottom: -12px; } }
@media (max-width: 479px) {
  .logo h1 {
    bottom: -8px; } }

.wrapper {
  width: 100%;
  max-width: 1280px; }

@media (max-width: 767px) {
  .bx-controls {
    position: absolute;
    top: 50%;
    width: 100%; }
    .bx-controls .bx-controls-direction a {
      width: 12px !important;
      height: 22px !important;
      margin-top: 0 !important;
      bottom: 0; }
      .bx-controls .bx-controls-direction a img {
        width: 100%; } }

@media (max-width: 767px) {
  #slideThum {
    display: none !important; } }

@media (max-width: 767px) {
  .intro_txt {
    padding: 15px 15px 0 !important; } }

#naviWap {
  height: auto;
  width: 100%; }
  #naviWap ul {
    display: flex;
    justify-content: center;
    max-width: 974px;
    width: auto; }
    #naviWap ul li {
      float: none;
      max-width: 33.33%; }
    @media (max-width: 767px) {
      #naviWap ul {
        margin-top: -5%; } }

.logo h1 {
  left: 13%;
  width: 18%;
  max-width: 200px; }

.flower01 > div {
  max-width: 301px;
  width: 30%; }

.realtxt_ttl {
  margin-bottom: 25px;
  margin-top: 40px;
  text-align: center; }
  @media (max-width: 767px) {
    .realtxt_ttl {
      margin-bottom: 15px;
      margin-top: 30px; } }

.real .wrap {
  width: auto; }

.realTextWap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 960px; }
  .realTextWap li {
    color: #fff;
    text-align: center;
    width: 32%; }
    .realTextWap li .realtxt_img {
      margin-bottom: 20px;
      position: relative;
      text-align: center; }
      .realTextWap li .realtxt_img img {
        width: 80%;
        max-width: 240px; }
      .realTextWap li .realtxt_img::before {
        background: url("../images/img01_plus_sp.png") center/contain no-repeat;
        content: "";
        width: 18.6%;
        height: 57px;
        position: absolute;
        top: calc(50% - 28px);
        left: -13%; }
    .realTextWap li:first-child .realtxt_img::before {
      display: none; }
  @media (max-width: 767px) {
    .realTextWap {
      flex-wrap: wrap;
      max-width: 400px; }
      .realTextWap li {
        margin-top: 60px;
        width: 100%; }
        .realTextWap li:first-child {
          margin-top: 0; }
        .realTextWap li .realtxt_img {
          width: 200px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 10px; }
          .realTextWap li .realtxt_img::before {
            top: -50px;
            left: calc(50% - 20px);
            height: 40px;
            width: 40px; }
        .realTextWap li .realtxt_txt0 {
          text-align: center; } }

.shimi {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  max-width: 1142px;
  margin-left: auto;
  margin-right: auto; }
  .shimi .stepRight {
    float: none;
    width: 38.8%;
    max-width: 443px; }
  .shimi .stepLeft {
    float: none;
    width: 61.2%;
    max-width: 700px; }
  @media (max-width: 767px) {
    .shimi {
      display: block; }
      .shimi .stepLeft {
        width: calc(100% - 15px); } }

.stepWap {
  width: auto; }
  .stepWap .step {
    width: auto;
    max-width: 1142px; }
    .stepWap .step div {
      margin-left: 0;
      padding-left: 64%; }
  @media (max-width: 767px) {
    .stepWap {
      margin-top: 0;
      height: auto;
      padding: 15px; }
      .stepWap .step div {
        padding-top: 0;
        padding-left: 0;
        text-align: center; } }

.step03 {
  background: url("../images/steo03_bg.png") top right no-repeat; }
  .step03 div {
    margin-left: 0 !important; }
  .step03 .wrapper02 {
    width: auto;
    max-width: 1142px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important; }
    @media (min-width: 768px), print {
      .step03 .wrapper02 .step03_img {
        padding: 30px 15px 30px 34.5%; } }
    @media (max-width: 767px) {
      .step03 .wrapper02 .step03_img {
        padding: 15px 15px 30px; } }

.morenoteface {
  position: absolute;
  left: 15.95%;
  top: 100%;
  width: 14.53%; }

.process {
  background: #fee9a3;
  padding: 35px 0 25px; }

.process_ttl {
  padding: 0 15px 20px;
  text-align: center; }

.process_in {
  background: #fff4d1;
  margin-top: 15px;
  height: auto;
  padding: 0 15px;
  width: auto; }
  .process_in .process_img {
    text-align: center; }

.process01 .process_img {
  position: relative;
  top: -35px; }
  @media (max-width: 767px) {
    .process01 .process_img {
      top: -25px; } }

.process02 .process_img {
  position: relative;
  top: -25px; }

.message .messageWap {
  display: flex;
  width: auto;
  max-width: 960px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .message .messageWap {
      padding-top: 30px; } }
@media (max-width: 767px) {
  .message {
    padding-bottom: 25px; } }

.messageLeft {
  float: none;
  width: 66.7%; }

.messageRight {
  float: none;
  width: 30%; }
  @media (max-width: 767px) {
    .messageRight {
      margin-top: 10px;
      max-width: 150px; } }

.btArea {
  max-width: 968px;
  padding-left: 15px;
  padding-right: 15px;
  width: auto; }
  @media (min-width: 768px), print {
    .btArea {
      display: flex;
      justify-content: space-between; }
      .btArea li {
        width: 50%; } }
  @media (max-width: 767px) {
    .btArea {
      margin-top: 20px; }
      .btArea li {
        margin-top: 5px;
        text-align: center; }
        .btArea li:first-child {
          margin-top: 0; } }

.topBackInnr {
  width: auto !important; }
  @media (max-width: 767px) {
    .topBackInnr {
      height: 50px;
      position: relative;
      overflow: hidden; }
      .topBackInnr img {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100%;
        width: auto;
        max-width: none;
        transform: translate(-50%, -50%); } }

@media (max-width: 767px) {
  .pageTop {
    width: 100%; }
    .pageTop div {
      top: -36px;
      width: 100%; }
      .pageTop div a {
        display: block;
        width: 100%;
        text-align: center; } }

.info {
  width: auto;
  max-width: 960px;
  padding-left: 15px;
  padding-right: 15px; }
  .info .infoLeft {
    float: none;
    width: auto;
    margin-right: 0;
    text-align: center; }
  .info .info_ttl {
    border-bottom: 1px solid #e0dbda;
    padding-bottom: 20px; }
  @media (max-width: 767px) {
    .info {
      margin-top: 30px; }
      .info .infoLeft {
        margin-top: 25px; } }

.info_add {
  max-width: 406px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto; }

@media (min-width: 768px), print {
  .footernav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .footernav dt {
      font-size: 14px;
      font-weight: bold;
      width: 60px; }
    .footernav dd {
      padding-top: 5px;
      width: calc(100% - 86px); } }
@media (max-width: 767px) {
  .footernav dt {
    margin-top: 10px; }
    .footernav dt:first-child {
      margin-top: 0; }
  .footernav .fast li {
    float: none !important; } }

#footerInfo {
  width: auto;
  max-width: 900px; }