@charset "utf-8";
/* CSS Document */
#container {
    padding: 100px 0 0;
}


#container {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}





section {
    margin: auto;
    padding: 80px 0;
}


.section_inner {
    max-width: 1140px;
    margin: auto;
}




#introduction{
padding: 0;
}




#RED {
    background-color: #dcb0b0;
}


#BASIC {
    background-color: #d7c2b5;
}

#INNER {
    background-color: #a3ad9e;
}

#BOTTOM {
    background-color: #f0e4d5;
}

h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .05em;
}







p.text_intro {
    width: 80%;
    max-width: 860px;
    margin: 2rem auto;
    line-height: 2;
    text-align: justify;
    font-size: 1.2rem;
}




p.text_pointup {
    width: 80%;
    max-width: 860px;
    margin: 2rem auto;
    line-height: 1.9;
    text-align: justify;
    font-size: 1.2rem;
}




p.text_description {
    line-height: 2.2;
    margin: 1rem 0;
		max-width: 480px;
}



span.emphasis {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 1em;
}






.img_unit {
    display: flex;
}

.img_model {
    padding: 40px;
}


.txt_wrapper {
    padding: 0 40px;
}

.txt_text {
    font-size: 1rem;
    line-height: 2;
}



.img_unit_item {
display: flex;
    padding: 20px;
}

.img_item {
    padding: 20px;
}



.img_unit.quarter {
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
}

.quarter .img_model {
    width: 50%;
}




.img_unit_item {
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
}

.img_item {
    padding: 20px;
    width: 33%;
}





.txt_cresit ul {
    display: flex;
}
.txt_cresit ul li {
    margin-right: 15px;
    margin-bottom: 4px;
}

.txt_text {
    font-size: 1rem;
    line-height: 2;
    margin: 0 0 1rem;
}




@media (max-width: 640px) {


section {
    margin: auto;
    padding: 100px 0;
}



h2 {
    padding: 0 0 0 0.5em;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .05em;
    background-color: bisque;
    display: inline-block;
}


.img_unit {
    display: flex;
    flex-wrap: wrap;
}


.img_model {
    padding: 5% 10%;
}

.txt_cresit ul {
    display: flex;
    flex-wrap: wrap;
}

.img_item {
    padding: 5%;
    width: 50%;
}


.img_unit.quarter {
    flex-wrap: wrap;
    width: 94%;
    margin: 10px auto 0;
}

.img_unit.quarter .img_model {
    padding: 3%;
}



.txt_cresit ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.txt_text {
    text-align: justify;
    font-size: 0.9rem;
    line-height: 1.9;
    margin: 0 0 1rem;
}


}












footer {
    margin-top: 0;
}






.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.2s;
	}
	
  .fadein-left{
      transform: translate(-30px,0);
  }
  .fadein-right{
      transform: translate(30px,0);
  }
  .fadein-up{
      transform: translate(0,-30px);
  }
  .fadein-bottom{
      transform: translate(0,90px);
  }
  .scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }


.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.2s;
	}
  .slidein-left{
      transform: translate(-100%,0);
  }
 .slidein-right{
      transform: translate(100%,0);
  }
  .slidein-up{
      transform: translate(0,-100%);
  }
  .slidein-bottom{
      transform: translate(0,100%);
  }
  .scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }


/*== クーポンページへのボタン */
.btn {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #555;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    transition: ease .2s;
    width: 100%;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#333;
}

.btn:hover span{
  color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
    /*色や形状*/
  background:#333;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
  animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}


footer {
    margin: 200px auto 100px;
    text-align: center;
}