@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;900&display=swap');
 @font-face {
  font-family: 'A-OTF-RyuminPro-Light';
  src: url('font/A-OTF-RyuminPro-Medium.otf');
}
@font-face {
  font-family: 'A-OTF-RyuminPro-Medium';
  src: url('font/A-OTF-RyuminPro-Medium.otf');
}

body {
  -webkit-backface-visibility: hidden;
  background: #fbf9f5;
}
.navbar-inner {
  background-color: #fff !important;
}

.element--hover {
  cursor: pointer;
  transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), -webkit-transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
  transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
  transition: box-shadow 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99), -webkit-transform 600ms cubic-bezier(0.33, 0.11, 0.02, 0.99);
}

.element--hover:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 32px 32px rgba(0, 0, 0, 0.15), 8px 64px 64px rgba(0, 0, 0, 0.15);
  -webkit-transform: scale(1.03) translateY(-0.5rem);
  -ms-transform: scale(1.03) translateY(-0.5rem);
  transform: scale(1.03) translateY(-0.5rem);
}

.element--hover:active {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 8px 16px 16px rgba(0, 0, 0, 0.15), 8px 32px 32px rgba(0, 0, 0, 0.15);
}

a.btnNew {
  margin: 0 auto;
  max-width: 300px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
  background-color: #000000;
  color: #FFFFFF !important;
}

a.btnNew:link, a.btnNew:active, a.btnNew:hover, a.btnNew:visited {
  color: inherit;
  text-decoration: none;
}

a.btnNew::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 1px #FFFFFF;
  border-right: solid 1px #FFFFFF;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg) translateX(-5px) translateY(5px);
  -ms-transform: rotate(45deg) translateX(-5px) translateY(5px);
  transform: rotate(45deg) translateX(-5px) translateY(5px);
}

/* Project */

a :hover{
  opacity: .7;
  transition: all .3s linear 0s;
}

.container {
  width: 100%;
}
.p-main {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  font-smoothing: antialiased;
  position: relative;
  color: #000000;
  letter-spacing: 0.05em;
  line-height: 20px;
  width: 100%
  /*max-width: 1170px;*/
  margin: 0 auto 10vw;
  overflow: hidden;
  /* Random Fade on slick 用 */
}
main.p-main .item_block, .breadcrumb{
  max-width: 1170px;
  margin: 0 auto;
}
main.p-main #coupon-target {
  max-width: unset !important;
  width: 100% !important;
  background-color: #fff;
}
#footer_banner ul {
  max-width: 1170px;
  margin: 30px auto 0;
}
@media (min-width: 992px) {
  .p-main {
    font-size: 14px;
    line-height: 30px;
  }
}
.p-main * {
  box-sizing: border-box;
  font-weight: 500;
}
.p-main p {
}
.p-main a {
  transition: all .3s linear 0s;
  text-decoration: none;
}
.p-main a:hover, .p-main a:focus, .p-main a:visited {
  color: inherit;
  opacity: .7;
  text-decoration: none;
}
.p-main .p-header {
  text-align: center;
  animation-name: fade-in1;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  margin: 0 0 75px;
}
@keyframes fade-in1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

state

================================================================================*/
.is-fade-in {
  transition: opacity 0.2s linear;
  opacity: 1;
}

.is-fade-out {
  transition: opacity 0.6s ease-in-out;
  opacity: 0;
}

.is-fade-out--long {
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.is-nav-on {
  display: table-cell !important;
  vertical-align: middle;
  height: 100vh;
  padding: 20vh 0;
}

.is-fixed {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 98%;
  width: calc(100% - 10px);
}

@media (min-width: 768px) {
  .is-fixed {
    width: 100%;
  }
}

.is-nav-on {
  display: block !important;
  vertical-align: middle;
  height: 100vh;
}

.is-hidden {
  overflow: hidden;
}


/* リード文 */
.lead-text {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto 12%;
  text-align: left;
  font-size: 16px;
  font-family: 'ヒラギノ明朝', 'A-OTF-RyuminPro-Medium', 'Noto Serif JP', serif;
}
.lead-text p {
  line-height: 2.3em;
  letter-spacing: 0.2em;
  margin: 0;
  padding-top: 4%;
}
.lead-text h3 {
  writing-mode: vertical-rl;
  text-align: left;
  font-size: 1.8em;
  line-height: 2.0em;
  letter-spacing: 0.12em;
  position: absolute;
  top: -8%;
  right: 8%;
}
@media (max-width: 768px) {
 .lead-text {
  font-size: 12px;
  margin-bottom: 16%;
}
.lead-text p {
  margin: 0 auto;
  padding-top: 5%;
  width: 90%;
}
.lead-text h3 {
  font-size: 1.5em;
  top: -5%;
  right: 5%;
}
}





/* アイテムブロック 共通*/
.item_block {
  width: 100%;
  margin: 0 auto 12% !important;
  text-align: left;
  font-size: 16px;
}
.item_block h2 {
  font-family: 'Futura', 'Noto Sans JP', sans-serif;
  font-size: 4.5em;
  line-height: 1.3em;
  letter-spacing: 0.06em;
  font-weight: normal;
  margin-top: 12%;
  margin-bottom: 1%;
}
.item_block h3{
  font-family: 'ヒラギノ明朝', 'A-OTF-RyuminPro-Medium', 'Noto Serif JP', serif;
  font-size: 1.8em;
  line-height: 1.8em;
  letter-spacing: 0.18em;
  width: 100%;
  margin-bottom: 6%;
}
ul.credit {
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 10%;
  margin-left: 19%;
}
ul.credit-img {
  margin: 0;
}
.credit li {
  margin-bottom: 11px;
}
.btn-buy {
  border: 1px solid;
  display: inline-block;
  padding: 3px 15px;
  margin-left: 15px;
}
.credit-img li{
  display: inline-flex;
  align-items: center;
  line-height: 1.8em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 8%;
}
.credit-img li a {
  width: 35%;
  max-width: 150px;
}
.credit-img li div {
  width: 60%;
  margin-left: 7%;
}
.credit-img li img.color {
  margin-top: 3%;
  margin-right: 3%;
  max-width: 40px;
}
@media (max-width: 980px) {
  .item_block h2 {
    font-size: 3.5em;
  }
  .item_block h3{
    font-size: 1.4em;
  }
}
@media (max-width: 768px) {
  .item_block {
    font-size: 14px;
    margin: 0 auto 15% !important;
  }
  .item_block h2 {
    font-size: 3em;
    margin-top: -8%;
    margin-bottom: 2%;
  }
  .item_block h3{
    font-size: 1.1em;
  }
  ul.credit {
    margin-left: 0;
    font-size: 12px;
  }
  .btn-buy {
    padding: 1px 10px;
    margin-left: 10px;
  }
  .credit-img li img.color {
    max-width: inherit;
    width: 15%;
    padding: 0;
  }
}


/* アイテムブロック1 */
.item_block .item_area.area_1 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.item_area.area_1 a {
    width: 50%;
}
.item_block .area_1 .item_img {
  width: 100%;
  overflow: hidden;
  background-size: cover !important;
  position: relative;
  z-index: -10 !important;
}
.item_block .area_1 .item_text {
  width: 55%;
  margin-left: -5%;
  z-index: 999;
}
@media (max-width: 768px) {
  .item_block .item_area.area_1 {
    display: block;
  }
  .item_block .area_1 .item_img {
    width: 100%;
    max-width: inherit;
  }
  .item_block .area_1 .item_text {
    width: 85%;
    margin: -5% auto 0;
    z-index: 999;
  }
}


/* アイテムブロック2 */
.item_block .item_area.area_2  {
  width: 100%;
  margin: -14% auto 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: right;
  align-items: end;
}
.item_block .area_2 .item_img {
  width: 45%;
}
.item_block .area_2 .item_text {
  width: 50%;
}
@media (max-width: 980px) {
  .item_block .item_area.area_2 {
    margin: -8% auto 0;
  }
}
@media (max-width: 768px) {
  .item_block .item_area.area_2  {
    display: block;
    margin: 0 auto;
  }
  .item_block .area_2 .item_img {
    width: 92.5%;
    margin: 10% 0 10% 7.5%;
  }
  .item_block .area_2 .item_text {
    width: 85%;
    margin: 0 auto;
  }
}

/* アイテムブロック3 */
.item_block .item_area.area_3 {
  width: 100%;
  margin: 6% auto 0;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: end;
}
.item_area.area_3 a {
    width: 50%;
}
.item_block .area_3 .item_img {
  width: 100%;
  overflow: hidden;
  background-size: cover !important;
  /*width: 45%;
  margin-left: 5%;
  margin-right: 5%;
  max-width: 750px;
  overflow: hidden;
  background-size: cover !important;*/
}
.item_block .area_3 .item_text {
 width: 45%;
 margin-left: 5%;
}
@media (max-width: 768px) {
  .item_block .item_area.area_3 {
    display: block;
  }
  .item_block .area_3 .item_img {
    width: 92.5%;
    max-width: inherit; margin: 10% 7.5% 10% 0;
    max-width: inherit;
  }
  .item_block .area_3 .item_text {
    width: 85%;
    margin: 0 auto;
  }
}





.bnr_area {
  width: 90%;
  max-width: 772px;
  margin: 5% auto;
}
.bnr_area li {
  margin-bottom: 5%;
}

.attention-txt-pc{
  margin: 0 auto 5% !important;
}


/* クーポン箇所 */
.coupon{
  text-align: center;
  padding: 4% 0 3%;
}
.coupon h4{
  max-width: 587px;
  font-size: 28px;
  margin: 0 auto 2%;
  font-weight: bold;
}
.coupon p{
  font-size: 16px;
  line-height: 25px;
  margin: 0 auto 20px;
  font-weight: 500;
}
.coupon .coupon_code{
  max-width: 587px;
  font-size: 16px;
  font-weight: bold;
  margin: 0 auto 2%;
  background: #8cbfa4;
  color: #fff;
  padding: 1.5% 0;
}
.coupon .coupon_code span{
  font-size: 2.0em;
  padding-top: 5px;
  margin: 0 0 0 5px;
}
.btn-clipboard:hover{
  color: #f6ff95 !important;
}
.coution{
  font-size: 13px;
  color: #767676;
  text-align: center;
  margin: 0 auto 95px;
}
#coupon__banner{
  position: fixed;
  top: 35%;
  right: 0;
  z-index: 20;
}
@media (max-width: 768px) {
  .coupon{
    margin: 15% auto 10%;
    width: 85%;
    padding: 10% 0 1%;
  }
  .coupon p{
    font-size: 14px;
  }
  .coupon .coupon_code{
    margin: 5% auto;
    padding: 4% 0;
  }
}

/* ボタン */
.end-btn{
  width: 85%;
  font-size: 20px;
  font-weight: 500;
  margin: 5% auto 0;
  text-align: center;
  color: #fff;
}
.end-btn a{
  display: inline-block;
  width: 100%;
  max-width: 750px;
  background-color: #464646;
  padding: 20px;
  color: #fff;
  margin-bottom: 2%;
}
@media (max-width: 768px) {
  .end-btn{
  }
  .end-btn a{
    margin-bottom: 5%;
    font-size: 16px;
  }
}


.u-pc-none{
  display: none;
}
.u-sp-none{
  display: block;
}
br.u-sp-none{
  display: inline;
}

@media (max-width: 768px) {
  .p-main .p-header{
    margin: 0 0 10vw;
  }
  .item_block .item_area{
    width: 90%;
    margin: 0 auto 12vw;
  }
  .item_block h5{
    font-size: 45px;
    line-height: 45px;
    margin: -25px 0 3%;
  }
  .item_block p{
    margin: 0 0 4vw;
  }
  .item_block .item_area .item_text ul li.main_item{
    font-size: 1em;
    margin-bottom: 3vw;
  }
  .area_2 .item_img{
    top: 0;
    width: 100%;
    margin: 0 auto 10vw;
  }
  .area_2 .item_text{
    width: 100%;
    padding: 0;
  }
  .coution{
    font-size: 1em;
    margin: 0 auto 20%;
  }
  #coupon__banner{
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
  }

  .u-pc-none{
    display: block;
  }
  .u-sp-none{
    display: none;
  }
  br.u-sp-none{
    display: none;
  }
}




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

ARCHIVE

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

.bnr_area {
  width: 100%;
  max-width: 1170px;
  margin-top: 200px;
  border-top: solid 1px #d4d4d4;
  text-align: center;
}
.bnr_area h3 {
  font-family: 'A-OTF-RyuminPro-Light', 'Noto Serif JP', serif;
  margin: 120px auto 80px;
  font-size: 3.1em;
  font-weight: normal;
  letter-spacing: 0.05em;
}
.bnr_area ul {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.bnr_area li {
  width: 49%;
  max-width: 400px;
}
@media (max-width: 768px) {
  .bnr_area {
    width: 100%;
    max-width: 1170px;
    margin-top: 80px;
    border-top: solid 1px #d4d4d4;
    text-align: center;
  }
  .bnr_area h3 {
    font-family: 'A-OTF-RyuminPro-Light', 'Noto Serif JP', serif;
    margin: 80px auto 40px;
    font-size: 28px;
  }
  .bnr_area ul {
    width: 100%;
    max-width: 860px;
    margin: 0 auto 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .bnr_area li {
    width: 80%;
    max-width: 400px;
    margin: 20px auto; 
  }
}




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

Utility

================================================================================*/
.u-hide_text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.u-clearfix:after,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.u-clear,
.clear {
  clear: both;
}

.u-fluid_img,
.fluid_img {
  max-width: 100%;
  height: auto;
}

.u-flo--left {
  float: left;
}

.u-flo--right {
  float: right;
}

.u-text--left {
  text-align: left;
}

.u-text--_right {
  text-align: right;
}

.u-text--center {
  text-align: center;
}

.u-font--xs {
  font-size: 60%;
}

.u-font--s {
  font-size: 80%;
}

.u-none {
  display: none;
}

@media (min-width: 768px) {
  .u-sm-inline {
    display: inline;
  }
}

@media (min-width: 1025px) {
  .u-md-inline {
    display: inline;
  }
}

@media (min-width: 768px) {
  .u-sm-block {
    display: block;
  }
}

@media (min-width: 768px) {
  .u-sm-inherit {
    display: inherit;
  }
}

@media (min-width: 1025px) {
  .u-md-block {
    display: block;
  }
}

@media (min-width: 768px) {
  .u-sm-table {
    display: table;
  }
}

@media (min-width: 1025px) {
  .u-md-table {
    display: table;
  }
}

@media (min-width: 544px) {
  .u-xs-none {
    display: none;
  }
}

@media (min-width: 768px) {
  .u-sm-none {
    display: none;
  }
}

@media (min-width: 1025px) {
  .u-md-none {
    display: none;
  }
}

.u-font-xs {
  font-size: 60%;
}

.u-font-sm {
  font-size: 80%;
}

.u-font-md {
  font-size: 100%;
}

.u-font-lg {
  font-size: 120%;
}

.u-font-xl {
  font-size: 140%;
}

.u-pos-relative {
  position: relative;
}

/*-------------------------
  PC MV画像切り替え パパッと変わる
  -------------------------*/
  /*=== 画像の表示エリア ================================= */
  .slidemv {
    position   : relative;
    overflow   : hidden;
    /* 画像のサイズに合わせて変更ください */
    /* width   : 100%; */
    max-width: 1170px;
    height     : 500px;
    margin     : 0 auto 12%;      /* 中央寄せ 背景:#fbf9f5 */
    background : #fbf9f5;
    /*background: url(http://ds-assets.store-image.jp/e-look.jp/2021/keith/2021_townhouse7/main_pc_1.jpg);*/
  }

  /*=== 画像の設定 ======================================= */
  .slidemv img {
    display    : block;
    position   : absolute;
    /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : auto;
    opacity    : 0;
    animation  : slidemvAnime 6s ease infinite;
  }

  /*=== スライドのアニメーションを段差で開始する ========= */
  .slidemv img:nth-of-type(1) { animation-delay: 0s }
  .slidemv img:nth-of-type(2) { animation-delay: 3s }

  /*=== スライドのアニメーション ========================= */
  @keyframes slidemvAnime{
   0% { opacity: 0 }
   25% { opacity: 1 }
   50% { opacity: 1 }
   75% { opacity: 0 }
   100% { opacity: 0 }
 }

/*-------------------------
  SP MV画像切り替え パパッと変わる
  -------------------------*/
  /*=== 画像の表示エリア ================================= */
  .slidemvsp {
    position   : relative;
    overflow   : hidden;
    /* 画像のサイズに合わせて変更ください */
    width: 100vw;
    height: 126vw;
    margin: 0 auto 20%;     /*  中央寄せ 背景:#fbf9f5  */
    background : #fbf9f5;
    /*background: url(http://ds-assets.store-image.jp/e-look.jp/2021/keith/2021_townhouse7/main_sp_1.jpg);*/
  }

  /*=== 画像の設定 ======================================= */
  .slidemvsp img {
    display    : block;
    position   : absolute;
    /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : auto;
    opacity    : 0;
    animation  : slidemvspAnime 4s ease infinite;
  }

  /*=== スライドのアニメーションを段差で開始する ========= */
  .slidemvsp img:nth-of-type(1) { animation-delay: 0s }
  .slidemvsp img:nth-of-type(2) { animation-delay: 2s }

  /*=== スライドのアニメーション ========================= */
  @keyframes slidemvspAnime{
   0% { opacity: 0 }
   5% { opacity: 1 }
   50% { opacity: 1 }
   55% { opacity: 0 }
   100% { opacity: 0 }
 }

/*-------------------------
  画像切り替え スライド
  -------------------------*/
  /*=== 画像の表示エリア ================================= */
  .slide{
        background-size: 600px 900px !important;
  }
  .slideIn {
    position   : relative;
    overflow   : hidden;
    /* 画像のサイズに合わせて変更ください */
    width: 600px;
    height: 900px;
    margin     : 0;
    animation  : slideIn 8s cubic-bezier(.4, 0, .2, 1) forwards infinite;
  }
  .slideIn img {
    display    : block;
    position   : absolute;
    /* 画像のサイズを表示エリアに合せる */
    width: 600px;
    height: 900px;
    opacity    : 0;
    animation  : slideInAnime 8s cubic-bezier(.4, 0, .2, 1) forwards infinite;
    left: 0;
    right: 0;
    transform-origin: right center;
  }
  @media (max-width: 980px) {
    .slide{background-size: 490px 735px !important;}
    .slideIn {width: 490px; height: 735px;}
    .slideIn img{width: 490px; height: 735px;}
  }
  @media (max-width: 860px) {
    .slide{background-size: 430px 645px !important;}
    .slideIn {width: 430px; height: 645px;}
    .slideIn img{width: 430px; height: 645px;}
  }
  @media (max-width: 768px) {
    .slide{background-size: 768px 1152px !important;}
    .slideIn {width: 768px; height: 1152px;}
    .slideIn img{width: 768px; height: 1152px;}
  }
  @media (max-width: 600px) {
    .slide{background-size: 600px 900px !important;}
    .slideIn {width: 600px; height: 900px;}
    .slideIn img{width: 600px; height: 900px;}
  }
  @media (max-width: 500px) {
    .slide{background-size: 500px 750px !important;}
    .slideIn {width: 500px; height: 750px;}
    .slideIn img{width: 500px; height: 750px;}
  }
  @media (max-width: 400px) {
    .slide{background-size: 400px 600px !important;}
    .slideIn {width: 400px; height: 600px;}
    .slideIn img{width: 400px; height: 600px;}
  }
  @media (max-width: 300px) {
    .slide{background-size: 300px 450px !important;}
    .slideIn {width: 300px; height: 450px;}
    .slideIn img{width: 300px; height: 450px;}
  }

/*=== 画像の設定 ======================================= */
  .area_3.slide{
        background-size: 600px 800px !important;
  }
  .area_3 .slideIn {
    position   : relative;
    overflow   : hidden;
    /* 画像のサイズに合わせて変更ください */
    width: 600px;
    height: 800px;
    margin     : 0;
    animation  : slideIn 8s cubic-bezier(.4, 0, .2, 1) forwards infinite;
  }
  .area_3 .slideIn img {
    display    : block;
    position   : absolute;
    /* 画像のサイズを表示エリアに合せる */
    width: 600px;
    height: 800px;
    opacity    : 0;
    animation  : slideInAnime 8s cubic-bezier(.4, 0, .2, 1) forwards infinite;
    left: 0;
    right: 0;
    transform-origin: right center;
  }

  @media (max-width: 980px) {
    .area_3 .slide{background-size: 490px 653px !important;}
    .area_3 .slideIn {width: 490px; height: 653px;}
    .area_3 .slideIn img{width: 490px; height: 653px;}
  }
  @media (max-width: 860px) {
    .area_3 .slide{background-size: 430px 573px !important;}
    .area_3 .slideIn {width: 430px; height: 573px;}
    .area_3 .slideIn img{width: 430px; height: 573px;}
  }
  @media (max-width: 768px) {
    .area_3 .slide{background-size: 768px 1021px !important;}
    .area_3 .slideIn {width: 768px; height: 1021px;}
    .area_3 .slideIn img{width: 768px; height: 1021px;}
  }
  @media (max-width: 600px) {
    .area_3 .slide{background-size: 600px 800px !important;}
    .area_3 .slideIn {width: 600px; height: 800px;}
    .area_3 .slideIn img{width: 600px; height: 800px;}
  }
  @media (max-width: 500px) {
    .area_3 .slide{background-size: 500px 665px !important;}
    .area_3 .slideIn {width: 500px; height: 665px;}
    .area_3 .slideIn img{width: 500px; height: 665px;}
  }
  @media (max-width: 400px) {
    .area_3 .slide{background-size: 400px 532px !important;}
    .area_3 .slideIn {width: 400px; height: 532px;}
    .area_3 .slideIn img{width: 400px; height: 532px;}
  }
  @media (max-width: 300px) {
    .area_3 .slide{background-size: 300px 399px !important;}
    .area_3 .slideIn {width: 300px; height: 399px;}
    .area_3 .slideIn img{width: 300px; height: 399px;}
  }

  /*=== スライドのアニメーション ========================= */
  @keyframes slideIn{
    0%{transform: translateX(100%);}
    30%{transform: translateX(0);}
    50% {transform: translateX(0);}
    80% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
    0%,100% { opacity: 1;}
  }

  /*=== スライドのアニメーション ========================= */
  @keyframes slideInAnime{
    0%{transform: translateX(-100%);}
    30%{transform: translateX(0);}
    50% {transform: translateX(0);}
    80% {transform: translateX(100%);}
    100% {transform: translateX(100%);}
    0%,100% { opacity: 1;}
  }