@charset "UTF-8";
/* ======================= VARIABLE ====== */
/* ======================= IMPORT ====== */
/*=================

      common.scss

=======================*/
.common_wrap {
  padding: 0 15px;
}

.common_inner {
  position: relative;
  max-width: 1030px;
  width: 100%;
  margin: 0 auto;
}

.common_inner_s {
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.common_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: #333;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 24px;
}

.common_select {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #DADADA;
  padding: 0 20px 0 10px;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  color: #828282;
  font-size: 16px;
  letter-spacing: 0.05em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../images/icon/icon_arrow_down.svg);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: right 10px center;
  width: 100%;
  height: 56px;
}
.common_select.active {
  color: #333;
}
.common_select::-ms-expand {
  display: none;
}

/*store_link_block*/
.store_link_block {
  display: none;
  position: fixed;
  bottom: 56px;
  right: -8px;
  z-index: 100;
}
@media only screen and (max-width: 640px) {
  .store_link_block {
    bottom: auto;
    top: 20px;
  }
}
.store_link_block .store_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 262px;
  height: 53px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  line-height: 1.3;
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}
@media only screen and (max-width: 640px) {
  .store_link_block .store_link {
    width: 230px;
    height: 40px;
    font-size: 13px;
    -webkit-transform: translateX(178px);
    transform: translateX(178px);
  }
}
.store_link_block .store_link.hide {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.store_link_block .store_link img {
  width: 20px;
  margin: 0 8px 0 0;
}

/*body*/
body {
  background-color: #fff;
}

/*main*/
main {
  position: relative;
}

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

      fv.scss

=======================*/
.no_scroll {
  overflow: hidden;
}

.fv_main {
  background-color: #F4F5EE;
  padding: 90px 0 110px;
  position: relative;
  overflow: hidden;
}

header {
  position: absolute;
  top: 24px;
  left: 40px;
  z-index: 10;
  display: none;
}
@media only screen and (max-width: 640px) {
  header {
    top: 20px;
    left: 20px;
  }
}
header .header_logo {
  width: 80px;
  display: block;
}
@media only screen and (max-width: 640px) {
  header .header_logo {
    width: 60px;
  }
}
header .header_logo img {
  width: 100%;
}

.fv_main_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .fv_main_content {
    display: block;
  }
}
.fv_main_content .fv_main_img {
  width: 50%;
  padding: 0 0 0 120px;
}
@media only screen and (max-width: 1200px) {
  .fv_main_content .fv_main_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 0 0 0;
  }
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_img {
    max-width: 300px;
  }
}
.fv_main_content .fv_main_img img {
  width: 100%;
}
.fv_main_content .fv_main_detail {
  width: 50%;
}
@media only screen and (max-width: 1200px) {
  .fv_main_content .fv_main_detail {
    width: 100%;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top {
  min-height: calc(100vh - 90px);
  position: relative;
  padding: 52px 0 0 0;
}
@media only screen and (max-width: 1200px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top {
    min-height: auto;
    padding: 0 0 0 0;
    margin: -150px 0 0 0;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 64px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 48px;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_title {
    font-size: 42px;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_sub_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 12px;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_sub_title {
    font-size: 38px;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_sub_title span {
  display: block;
  font-size: 24px;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_top_sub_title span {
    font-size: 20px;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top .fv_main_detail_text {
    font-size: 14px;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .scroll_link {
  position: absolute;
  width: 50px;
  bottom: 40px;
  right: -25px;
  -webkit-animation: arrowmove 1s ease-in-out infinite;
  animation: arrowmove 1s ease-in-out infinite;
}
@media only screen and (max-width: 1200px) {
  .fv_main_content .fv_main_detail .fv_main_detail_top .scroll_link {
    display: none;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_top .scroll_link img {
  width: 100%;
  position: absolute;
  bottom: 26px;
}
.fv_main_content .fv_main_detail .fv_main_detail_bottom {
  padding: 50px 0 0 0;
}
.fv_main_content .fv_main_detail .fv_main_detail_bottom .fv_main_detail_bottom_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 16px;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_bottom .fv_main_detail_bottom_title {
    font-size: 20px;
  }
}
.fv_main_content .fv_main_detail .fv_main_detail_bottom .fv_main_detail_bottom_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .fv_main_content .fv_main_detail .fv_main_detail_bottom .fv_main_detail_bottom_text {
    font-size: 14px;
  }
}

@-webkit-keyframes arrowmove {
  0% {
    bottom: 1%;
  }
  50% {
    bottom: 3%;
  }
  100% {
    bottom: 1%;
  }
}
@keyframes arrowmove {
  0% {
    bottom: 1%;
  }
  50% {
    bottom: 3%;
  }
  100% {
    bottom: 1%;
  }
}
/*slide*/
.fv_slide_wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.base {
  background: white;
  z-index: 1;
}

.slide01 {
  background-color: #F4F5EE;
  z-index: 2;
  -webkit-transform: translate(0, -120%);
  transform: translate(0, -120%);
  -webkit-animation-name: top_to_bottom;
  animation-name: top_to_bottom;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.slide02 {
  background-color: #B9DCAD;
  z-index: 3;
  -webkit-transform: translate(-120%, 0);
  transform: translate(-120%, 0);
  -webkit-animation-name: left_to_right;
  animation-name: left_to_right;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.slide03 {
  background-color: #9AA1DC;
  z-index: 4;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-animation-name: bottom_to_top;
  animation-name: bottom_to_top;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

.slide04 {
  background-color: #BF9D85;
  z-index: 5;
  -webkit-animation-name: right_to_left;
  animation-name: right_to_left;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 4.8s;
  animation-delay: 4.8s;
}

.pink {
  background: pink;
  z-index: 6;
  -webkit-transform: translate(0, -120%);
  transform: translate(0, -120%);
  -webkit-animation-name: top_to_bottom;
  animation-name: top_to_bottom;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 4.0s;
  animation-delay: 4.0s;
}

@-webkit-keyframes top_to_bottom {
  0% {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translate(0, -120%);
    transform: translate(0, -120%);
  }
  100% {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes top_to_bottom {
  0% {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translate(0, -120%);
    transform: translate(0, -120%);
  }
  100% {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes bottom_to_top {
  0% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  100% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes bottom_to_top {
  0% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  100% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes left_to_right {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translate(-120%, 0);
    transform: translate(-120%, 0);
  }
  100% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes left_to_right {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translate(-120%, 0);
    transform: translate(-120%, 0);
  }
  100% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes right_to_left {
  0% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes right_to_left {
  0% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  100% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
.fv_slide_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-position: right center;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center 10%;
  }
}
.fv_slide_content.bg01 {
  background-image: url(../images/pic/img_fv.png);
  background-size: 380px auto;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content.bg01 {
    background-size: 330px auto;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content.bg01 {
    background-size: 280px auto;
  }
}
.fv_slide_content.bg02 {
  background-image: url(../images/pic/img_fiber.png);
  background-size: 380px auto;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content.bg02 {
    background-size: 330px auto;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content.bg02 {
    background-size: 280px auto;
  }
}
.fv_slide_content.bg03 {
  background-image: url(../images/pic/img_quarity.png);
  background-size: 480px auto;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content.bg03 {
    background-size: 430px auto;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content.bg03 {
    background-size: 330px auto;
  }
}
.fv_slide_content.bg04 {
  background-image: url(../images/pic/img_life.png);
  background-size: 480px auto;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content.bg04 {
    background-size: 430px auto;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content.bg04 {
    background-size: 330px auto;
  }
}

.fv_slide_content_main_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 80px;
  color: #333;
  line-height: 1.3;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content_main_title {
    margin: 200px 0 0 0;
    font-size: 66px;
  }
}
@media only screen and (max-width: 840px) {
  .fv_slide_content_main_title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content_main_title {
    font-size: 40px;
  }
}
.fv_slide_content_main_title .dot {
  position: relative;
}
.fv_slide_content_main_title .dot::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #DEEA52;
}
.fv_slide_content_main_title .border {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(80%, #DEEA52));
  background: linear-gradient(transparent 80%, #DEEA52 80%);
}

.fv_slide_content_title_wrap .fv_slide_content_title_en {
  height: 320px;
}
.fv_slide_content_title_wrap .fv_slide_content_title_en img {
  height: 100%;
}
@media only screen and (max-width: 640px) {
  .fv_slide_content_title_wrap .fv_slide_content_title_en {
    height: 150px;
  }
}
.fv_slide_content_title_wrap .fv_slide_content_title {
  margin: -150px 0 0 80px;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 72px;
  color: #333;
  line-height: 1.3;
}
@media only screen and (max-width: 1200px) {
  .fv_slide_content_title_wrap .fv_slide_content_title {
    font-size: 60px;
  }
}
@media only screen and (max-width: 840px) {
  .fv_slide_content_title_wrap .fv_slide_content_title {
    font-size: 48px;
    margin: -150px 0 0 30px;
  }
}
@media only screen and (max-width: 640px) {
  .fv_slide_content_title_wrap .fv_slide_content_title {
    font-size: 30px;
    margin: 0 0 0 30px;
  }
}

.loading {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.loading img {
  width: 100px;
}

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

      fiber.scss

=======================*/
.fiber {
  background-color: #B9DCAD;
  padding: 112px 0;
  overflow: hidden;
}

.fiber_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .fiber_content {
    display: block;
  }
}
.fiber_content .fiber_img {
  width: 390px;
}
@media only screen and (max-width: 1200px) {
  .fiber_content .fiber_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_img {
    max-width: 300px;
  }
}
.fiber_content .fiber_img img {
  width: 100%;
}
.fiber_content .fiber_detail {
  width: calc(100% - 390px);
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .fiber_content .fiber_detail {
    width: 100%;
    margin: -150px 0 0 0;
  }
}
.fiber_content .fiber_detail .fiber_bg_text {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
}
@media only screen and (max-width: 1200px) {
  .fiber_content .fiber_detail .fiber_bg_text {
    position: static;
    width: auto;
    height: 260px;
    margin: 0 0 40px;
  }
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_detail .fiber_bg_text {
    height: 160px;
  }
}
.fiber_content .fiber_detail .fiber_bg_text img {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .fiber_content .fiber_detail .fiber_bg_text img {
    height: 100%;
    width: auto;
  }
}
.fiber_content .fiber_detail .fiber_detail_content {
  position: relative;
  margin: 176px 0 0 auto;
  max-width: 515px;
}
@media only screen and (max-width: 1200px) {
  .fiber_content .fiber_detail .fiber_detail_content {
    max-width: 100%;
    margin: 0 0 0 0;
  }
}
.fiber_content .fiber_detail .fiber_detail_content .fiber_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 40px;
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_detail .fiber_detail_content .fiber_title {
    font-size: 38px;
  }
}
.fiber_content .fiber_detail .fiber_detail_content .fiber_sub_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 20px;
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_detail .fiber_detail_content .fiber_sub_title {
    font-size: 22px;
  }
}
.fiber_content .fiber_detail .fiber_detail_content .fiber_text_wrap .fiber_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_detail .fiber_detail_content .fiber_text_wrap .fiber_text {
    width: 100%;
    margin: 0 0 20px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 640px) {
  .fiber_content .fiber_detail .fiber_detail_content .fiber_text_wrap .fiber_text:last-child {
    margin: 0 0 0;
  }
}

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

      quarity.scss

=======================*/
.quarity {
  background-color: #9aa1dc;
  padding: 112px 0;
  overflow: hidden;
}

.quarity_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .quarity_content {
    display: block;
  }
}
.quarity_content .quarity_img {
  width: 50%;
  padding: 0 0 0 30px;
  margin: 170px 0 0;
}
@media only screen and (max-width: 1200px) {
  .quarity_content .quarity_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_img {
    max-width: 300px;
  }
}
.quarity_content .quarity_img img {
  width: 100%;
}
.quarity_content .quarity_detail {
  width: 50%;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .quarity_content .quarity_detail {
    width: 100%;
    margin: -150px 0 0 0;
  }
}
.quarity_content .quarity_detail .quarity_bg_text {
  position: absolute;
  left: 48px;
  top: 0;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .quarity_content .quarity_detail .quarity_bg_text {
    position: static;
    width: auto;
    height: 260px;
    margin: 0 0 40px;
  }
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_detail .quarity_bg_text {
    height: 160px;
  }
}
.quarity_content .quarity_detail .quarity_bg_text img {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .quarity_content .quarity_detail .quarity_bg_text img {
    height: 100%;
    width: auto;
  }
}
.quarity_content .quarity_detail .quarity_detail_content {
  position: relative;
  margin: 180px 0 0;
}
@media only screen and (max-width: 1200px) {
  .quarity_content .quarity_detail .quarity_detail_content {
    max-width: 100%;
    margin: 0 0 0 0;
  }
}
.quarity_content .quarity_detail .quarity_detail_content .quarity_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 40px;
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_detail .quarity_detail_content .quarity_title {
    font-size: 30px;
  }
}
.quarity_content .quarity_detail .quarity_detail_content .quarity_sub_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 20px;
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_detail .quarity_detail_content .quarity_sub_title {
    font-size: 22px;
  }
}
.quarity_content .quarity_detail .quarity_detail_content .quarity_text_wrap .quarity_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_detail .quarity_detail_content .quarity_text_wrap .quarity_text {
    width: 100%;
    margin: 0 0 20px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 640px) {
  .quarity_content .quarity_detail .quarity_detail_content .quarity_text_wrap .quarity_text:last-child {
    margin: 0 0 0;
  }
}

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

      media.scss

=======================*/
.media {
  padding: 48px 0;
  background-color: #EBEBEB;
}

.media_box_wrap {
  width: 100%;
}
.media_box_wrap .media_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 0 0 48px;
}
@media only screen and (max-width: 640px) {
  .media_box_wrap .media_box {
    display: block;
    position: relative;
  }
}
.media_box_wrap .media_box:last-child {
  margin: 0 0 0;
}
.media_box_wrap .media_box .media_box_img {
  width: 176px;
  height: 76px;
  margin: 0 56px 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 640px) {
  .media_box_wrap .media_box .media_box_img {
    margin: 0 0 10px 0;
  }
}
.media_box_wrap .media_box .media_box_title {
  width: calc(100% - 280px);
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  line-height: 1.3;
}
@media only screen and (max-width: 640px) {
  .media_box_wrap .media_box .media_box_title {
    width: 100%;
    font-size: 16px;
  }
}
.media_box_wrap .media_box .media_box_icon {
  width: 24px;
  margin: 0 0 0 24px;
}
@media only screen and (max-width: 640px) {
  .media_box_wrap .media_box .media_box_icon {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
.media_box_wrap .media_box .media_box_icon img {
  width: 100%;
}

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

      message.scss

=======================*/
.message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .message {
    display: block;
  }
}

.message_left {
  width: 50%;
  background-color: #F4F5EE;
  padding: 112px 0 112px 15px;
}
@media only screen and (max-width: 640px) {
  .message_left {
    width: 100%;
    padding: 112px 0 50px 15px;
  }
}
.message_left .message_left_inner {
  max-width: 515px;
  margin: 0 0 0 auto;
}
.message_left .message_left_inner .message_left_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 16px;
}
.message_left .message_left_inner .message_left_text {
  width: 100%;
  padding: 0 96px 0 0;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  line-height: 2;
}
@media only screen and (max-width: 960px) {
  .message_left .message_left_inner .message_left_text {
    padding: 0 30px 0 0;
  }
}
@media only screen and (max-width: 840px) {
  .message_left .message_left_inner .message_left_text {
    font-size: 14px;
  }
}
@media only screen and (max-width: 640px) {
  .message_left .message_left_inner .message_left_text {
    padding: 0 15px 0 0;
  }
}

.message_right {
  width: 50%;
  background-color: #fff;
  padding: 112px 15px 112px 0;
}
@media only screen and (max-width: 640px) {
  .message_right {
    width: 100%;
    padding: 50px 15px 112px 0;
  }
}
.message_right .message_right_inner {
  max-width: 515px;
  margin: 0 auto 0 0;
}
.message_right .message_right_inner .message_right_img {
  width: 100%;
  padding: 0 0 0 96px;
}
@media only screen and (max-width: 960px) {
  .message_right .message_right_inner .message_right_img {
    padding: 0 0 0 30px;
  }
}
@media only screen and (max-width: 640px) {
  .message_right .message_right_inner .message_right_img {
    padding: 0 0 0 15px;
    max-width: 300px;
    margin: 0 auto;
  }
}
.message_right .message_right_inner .message_right_img img {
  display: block;
  width: 100%;
  margin: 0 0 16px;
}
.message_right .message_right_inner .message_right_img .message_right_name {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  line-height: 1.6;
}
@media only screen and (max-width: 640px) {
  .message_right .message_right_inner .message_right_img .message_right_name {
    font-size: 16px;
    text-align: center;
  }
}

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

      video.scss

=======================*/
.video {
  padding: 112px 0;
  background-color: #EBEBEB;
}

.video_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: #333;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 24px;
}
@media only screen and (max-width: 640px) {
  .video_title {
    font-size: 38px;
  }
}

.video_wrap {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
}
.video_wrap video {
  width: 100%;
}

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

      life.scss

=======================*/
.life {
  padding: 112px 0;
  background-color: #BF9D85;
  overflow: hidden;
}

.life_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .life_content {
    display: block;
  }
}
.life_content .life_img {
  width: 50%;
  padding: 0 0 0 30px;
  margin: 170px 0 0;
}
@media only screen and (max-width: 1200px) {
  .life_content .life_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  .life_content .life_img {
    max-width: 300px;
  }
}
.life_content .life_img img {
  width: 100%;
}
.life_content .life_detail {
  width: 50%;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .life_content .life_detail {
    width: 100%;
    margin: -150px 0 0 0;
  }
}
.life_content .life_detail .life_bg_text {
  position: absolute;
  left: 48px;
  top: 0;
  width: 224px;
}
@media only screen and (max-width: 1200px) {
  .life_content .life_detail .life_bg_text {
    position: static;
    width: auto;
    height: 260px;
    margin: 0 0 40px;
  }
}
@media only screen and (max-width: 640px) {
  .life_content .life_detail .life_bg_text {
    height: 160px;
  }
}
.life_content .life_detail .life_bg_text img {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .life_content .life_detail .life_bg_text img {
    height: 100%;
    width: auto;
  }
}
.life_content .life_detail .life_detail_content {
  position: relative;
  margin: 180px 0 0;
}
@media only screen and (max-width: 1200px) {
  .life_content .life_detail .life_detail_content {
    max-width: 100%;
    margin: 0 0 0 0;
  }
}
.life_content .life_detail .life_detail_content .life_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 40px;
}
@media only screen and (max-width: 640px) {
  .life_content .life_detail .life_detail_content .life_title {
    font-size: 30px;
  }
}
.life_content .life_detail .life_detail_content .life_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .life_content .life_detail .life_detail_content .life_text {
    font-size: 14px;
  }
}

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

      faq.scss

=======================*/
.faq {
  padding: 120px 0;
  background-color: #fff;
}

.faq_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: #333;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 48px;
}
@media only screen and (max-width: 640px) {
  .faq_title {
    font-size: 38px;
  }
}

.faq_list .faq_item {
  width: 100%;
  margin: 0 0 40px;
}
.faq_list .faq_item:last-child {
  margin: 0 0 0;
}
.faq_list .faq_item .q_block {
  padding: 0 34px 0 0;
  position: relative;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .faq_list .faq_item .q_block {
    font-size: 16px;
  }
}
.faq_list .faq_item .q_block::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 24px;
  height: 24px;
  background-image: url(../images/icon/icon_open.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.faq_list .faq_item .q_block.active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 24px;
  height: 24px;
  background-image: url(../images/icon/icon_close.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.faq_list .faq_item .a_block {
  display: none;
  padding: 0 34px 0 0;
  margin: 16px 0 0;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .faq_list .faq_item .a_block {
    font-size: 16px;
  }
}

.faq_sub_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin: 40px 0 0 0;
}
@media only screen and (max-width: 640px) {
  .faq_sub_text {
    font-size: 14px;
  }
}

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

cart.scss

=======================*/
#cart {
  padding: 140px 0 100px;
  background-color: #F4F5EE;
  overflow: hidden;
}

.cart_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .cart_content {
    display: block;
  }
}
.cart_content .cart_img {
  width: 50%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 0 0 60px;
}
@media only screen and (max-width: 1200px) {
  .cart_content .cart_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 0 0 0;
  }
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_img {
    max-width: 300px;
  }
}
.cart_content .cart_img img {
  width: 100%;
}
.cart_content .cart_detail {
  width: 50%;
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .cart_content .cart_detail {
    width: 100%;
    margin: -150px 0 0 0;
  }
}
.cart_content .cart_detail .cart_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 16px;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_title {
    font-size: 38px;
  }
}
.cart_content .cart_detail .cart_title span {
  font-size: 64px;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_title span {
    font-size: 42px;
  }
}
.cart_content .cart_detail .cart_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 24px;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_text {
    font-size: 16px;
  }
}
.cart_content .cart_detail .cart_select_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 16px;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_select_block {
    display: block;
  }
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_select_block .cart_select {
    margin: 0 0 10px;
  }
}
.cart_content .cart_detail .cart_select_block .cart_select.item {
  width: 68%;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_select_block .cart_select.item {
    width: 100%;
  }
}
.cart_content .cart_detail .cart_select_block .cart_select.piece {
  width: 20%;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_select_block .cart_select.piece {
    width: 100%;
  }
}
.cart_content .cart_detail .cart_select_block .cart_select.buy {
  width: 30%;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .cart_select_block .cart_select.buy {
    width: 100%;
  }
}
.cart_content .cart_detail .product_data_for_sp {
  display: none;
}
@media only screen and (max-width: 640px) {
  .cart_content .cart_detail .product_data_for_sp {
    display: block;
    padding: 10px;
    font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
    font-weight: 600;
    color: #828282;
    font-size: 16px;
    letter-spacing: 0.05em;
  }
}

.submit_btn_wrap {
  width: 100%;
}
.submit_btn_wrap .cart_submit_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background-color: #544236;
  border-radius: 4px;
  border: none;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
}
.submit_btn_wrap .cart_submit_btn:disabled {
  opacity: .3;
}

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

      footer.scss

=======================*/
footer {
  padding: 56px 0 10px;
  background-color: #3D3D3D;
}

.footer_logo {
  display: block;
  width: 104px;
  margin: 0 auto 56px;
}
.footer_logo img {
  width: 100%;
}

.copy {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

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

      anti.scss

=======================*/
.anti {
  background-color: #dcadad;
  padding: 112px 0;
  overflow: hidden;
}

.anti_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .anti_content {
    display: block;
  }
}
.anti_content .anti_img {
  width: 390px;
}
@media only screen and (max-width: 1200px) {
  .anti_content .anti_img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_img {
    max-width: 300px;
  }
}
.anti_content .anti_img img {
  width: 100%;
}
.anti_content .anti_detail {
  width: calc(100% - 390px);
  position: relative;
}
@media only screen and (max-width: 1200px) {
  .anti_content .anti_detail {
    width: 100%;
    margin: -150px 0 0 0;
  }
}
.anti_content .anti_detail .anti_bg_text {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
}
@media only screen and (max-width: 1200px) {
  .anti_content .anti_detail .anti_bg_text {
    position: static;
    width: auto;
    height: 260px;
    margin: 0 0 40px;
  }
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_detail .anti_bg_text {
    height: 160px;
  }
}
.anti_content .anti_detail .anti_bg_text img {
  width: 100%;
}
@media only screen and (max-width: 1200px) {
  .anti_content .anti_detail .anti_bg_text img {
    height: 100%;
    width: auto;
  }
}
.anti_content .anti_detail .anti_detail_content {
  position: relative;
  margin: 176px 0 0 auto;
  max-width: 515px;
}
@media only screen and (max-width: 1200px) {
  .anti_content .anti_detail .anti_detail_content {
    max-width: 100%;
    margin: 0 0 0 0;
  }
}
.anti_content .anti_detail .anti_detail_content .anti_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 40px;
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_detail .anti_detail_content .anti_title {
    font-size: 30px;
  }
}
.anti_content .anti_detail .anti_detail_content .anti_title span {
  font-size: 20px;
}
.anti_content .anti_detail .anti_detail_content .anti_sub_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 20px;
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_detail .anti_detail_content .anti_sub_title {
    font-size: 22px;
  }
}
.anti_content .anti_detail .anti_detail_content .anti_text_wrap .anti_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_detail .anti_detail_content .anti_text_wrap .anti_text {
    width: 100%;
    margin: 0 0 20px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 640px) {
  .anti_content .anti_detail .anti_detail_content .anti_text_wrap .anti_text:last-child {
    margin: 0 0 0;
  }
}

.anti_logo {
  margin: 24px 0 0 0;
  width: 120px;
}
.anti_logo img {
  width: 100%;
}

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

      sns.scss

=======================*/
.sns {
  padding: 64px 0;
  background-color: #EBEBEB;
}

.sns_btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media only screen and (max-width: 640px) {
  .sns_btn_wrap {
    display: block;
  }
}
.sns_btn_wrap .sns_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border: 3px solid #333;
  border-radius: 4px;
  background-color: #fff;
  padding: 0 32px;
  height: 104px;
  width: 80%;
  max-width: 420px;
  margin: 0 48px;
}
@media only screen and (max-width: 840px) {
  .sns_btn_wrap .sns_btn {
    margin: 0 24px;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 640px) {
  .sns_btn_wrap .sns_btn {
    width: 100%;
    max-width: 300px;
    height: 80px;
    margin: 0 auto 20px;
  }
}
@media only screen and (max-width: 640px) {
  .sns_btn_wrap .sns_btn:last-child {
    margin: 0 auto;
  }
}
.sns_btn_wrap .sns_btn .sns_btn_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% - 40px);
}
.sns_btn_wrap .sns_btn .sns_btn_detail img {
  display: block;
  width: 48px;
  margin: 0 24px 0 0;
}
.sns_btn_wrap .sns_btn .sns_btn_detail .sns_btn_name {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #333;
  line-height: 1.3;
}
@media only screen and (max-width: 840px) {
  .sns_btn_wrap .sns_btn .sns_btn_detail .sns_btn_name {
    font-size: 18px;
  }
}
@media only screen and (max-width: 640px) {
  .sns_btn_wrap .sns_btn .sns_btn_detail .sns_btn_name {
    font-size: 16px;
  }
}
.sns_btn_wrap .sns_btn .sns_btn_arrow {
  width: 24px;
  margin: 0 0 0 16px;
}
.sns_btn_wrap .sns_btn .sns_btn_arrow img {
  width: 100%;
}

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

      company.scss

=======================*/
.company {
  background-color: #fff;
  padding: 64px 0;
}

.company_content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 640px) {
  .company_content {
    display: block;
  }
}
.company_content .company_detail {
  width: 50%;
  padding: 0 24px 0 0;
}
@media only screen and (max-width: 640px) {
  .company_content .company_detail {
    width: 100%;
    padding: 0 0 10px 0;
    margin: 0 0 10px;
    border-bottom: 1px solid #333;
  }
}
.company_content .company_detail .company_detail_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  line-height: 1.3;
  margin: 0 0 8px;
}
@media only screen and (max-width: 640px) {
  .company_content .company_detail .company_detail_title {
    font-size: 14px;
  }
}
.company_content .company_detail .company_detail_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .company_content .company_detail .company_detail_text {
    font-size: 14px;
  }
}
.company_content .company_text {
  width: 50%;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}
@media only screen and (max-width: 640px) {
  .company_content .company_text {
    width: 100%;
    font-size: 14px;
  }
}

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

      up_and_down_slide.scss

=======================*/
.up_and_down_slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
  position: relative;
}
@media only screen and (max-width: 960px) {
  .up_and_down_slide {
    display: block;
    min-height: auto;
    height: 720px;
  }
}
.up_and_down_slide .up_and_down_slide_filter {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.up_and_down_slide .swiper-container_up {
  width: 50%;
  height: 500px;
}
@media only screen and (max-width: 960px) {
  .up_and_down_slide .swiper-container_up {
    width: 100%;
    height: 360px;
  }
}
.up_and_down_slide .swiper-container_down {
  width: 50%;
  height: 500px;
}
@media only screen and (max-width: 960px) {
  .up_and_down_slide .swiper-container_down {
    width: 100%;
    height: 360px;
  }
}

.slide_child {
  width: 100%;
  height: 100%;
  padding: 114px 15px;
}
@media only screen and (max-width: 960px) {
  .slide_child {
    padding: 50px 15px;
  }
}

.up_and_down_slide_base {
  background: white;
  z-index: 0;
}

.up_slide01 {
  background: #EBEBEB;
}

.up_slide02 {
  background: #9AA1DC;
}

.up_slide03 {
  background: #EBEBEB;
}

.down_slide01 {
  background: #B9DCAD;
}

.down_slide02 {
  background: #EBEBEB;
}

.down_slide03 {
  background: #DCADAD;
}

.up_slide_inner {
  width: calc(100% - 76px);
  max-width: 440px;
  margin: 0 76px 0 auto;
}
@media only screen and (max-width: 960px) {
  .up_slide_inner {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
  }
}

.down_slide_inner {
  width: calc(100% - 76px);
  max-width: 440px;
  margin: 0 auto 0 76px;
}
@media only screen and (max-width: 960px) {
  .down_slide_inner {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
  }
}

.up_and_down_slide_title {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.3;
  margin: 0 0 16px;
}
@media only screen and (max-width: 1200px) {
  .up_and_down_slide_title {
    font-size: 36px;
  }
}
.up_and_down_slide_title.black {
  color: #333;
}
.up_and_down_slide_title.white {
  color: #fff;
}

.up_and_down_slide_text {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.5;
}
@media only screen and (max-width: 1200px) {
  .up_and_down_slide_text {
    font-size: 16px;
  }
}
.up_and_down_slide_text.black {
  color: #333;
}
.up_and_down_slide_text.white {
  color: #fff;
}

.modal_bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(152, 152, 152, 0.7);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.user_data_modal,
.order_complete_modal,
.card_data_modal {
  display: none;
  position: fixed;
  z-index: 15;
  max-height: 80%;
  top: 20%;
  left: 50%;
  width: 600px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  -webkit-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);
  font-size: 1.3rem;
  overflow: scroll;
}
.user_data_modal h2,
.order_complete_modal h2,
.card_data_modal h2 {
  text-align: center;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
}

.order_complete_modal {
  font-size: 16px;
}
.order_complete_modal .logo_image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.order_complete_modal .logo_image img {
  width: 100px;
}
.order_complete_modal h2 {
  color: #544236;
  font-size: 1.4em;
  margin: 20px;
}
.order_complete_modal p {
  width: 90%;
  margin: 0 5%;
  line-height: 1.5;
}
.order_complete_modal .complete_modal_close {
  width: 70%;
  height: 56px;
  margin: 20px 15%;
  background-color: #544236;
  border-radius: 4px;
  border: none;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
}

@media screen and (max-width: 700px) {
  .user_data_modal,
  .order_complete_modal,
  .card_data_modal {
    width: 90%;
  }
}
.input_wrap {
  padding: 20px 20px 10px;
}

.input_wrap input {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #DADADA;
  padding: 0 20px 0 10px;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.post_btn {
  display: flex;
  justify-content: space-around;
}
.post_btn .modal_close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40%;
  height: 35px;
  background-color: #fff;
  border-radius: 4px;
  border: solid 1px #544236;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #544236;
  line-height: 1.3;
}
.post_btn .modal_submit_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 40%;
  height: 35px;
  background-color: #544236;
  border-radius: 4px;
  border: none;
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 1.3;
}

#form {
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
}

label {
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

.form-row {
  width: 80%;
  height: 100px;
  float: left;
}

.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  margin-bottom: 30px;
}

.btn_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
}

.pay_btn {
  color: #fff;
  background: #544236;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
}

.pay_btn:hover {
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.StripeElement--focus {
  border: 2px outset #263be0;
}

.StripeElement--invalid {
  border-color: #ff5f3f;
}

.StripeElement--webkit-autofill {
  background-color: #beddf9 !important;
}

#card_errors {
  color: #ff5f3f;
  font-size: 15px;
  margin: 20px;
}

.error_message {
  font-size: 14px;
  color: red;
  margin: 0 0 20px 0;
}

#loaderBg {
  display: none;
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  opacity: .5;
}
#loaderBg .loader {
  color: #000;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 172px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
        95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
        59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
        95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
        59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* placeholder color */
/* ======================= BASE ====== */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

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

.fg_m {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 500;
}

.fg_b {
  font-family: "Yu Gothic", 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, Verdana, sans-serif;
  font-weight: 600;
}

.mb_10 {
  margin-bottom: 10px;
}

.mb_30 {
  margin-bottom: 30px;
}

.mb_50 {
  margin-bottom: 50px;
}

.mt_20 {
  margin-top: 20px;
}

.mt_30 {
  margin-top: 30px;
}

.mt_50 {
  margin-top: 50px;
}

.mr_5 {
  margin-right: 5px;
}

@media only screen and (max-width: 640px) {
  .sp_mb_10 {
    margin-bottom: 10px;
  }
}

.common_pc {
  display: block;
}
.common_pc.height_100 {
  height: 100%;
}
@media only screen and (max-width: 960px) {
  .common_pc {
    display: none;
  }
}

.common_sp {
  display: none;
}
@media only screen and (max-width: 960px) {
  .common_sp {
    display: block;
  }
}

.common_pc640 {
  display: block;
}
.common_pc640.height_100 {
  height: 100%;
}
@media only screen and (max-width: 640px) {
  .common_pc640 {
    display: none;
  }
}

.common_sp640 {
  display: none;
}
@media only screen and (max-width: 640px) {
  .common_sp640 {
    display: block;
  }
}

.mb_0 {
  margin-bottom: 0;
}

body {
  background-color: #fff;
}

body ul {
  list-style: none;
}

body a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media only screen and (min-width: 960px) {
  body a:hover {
    opacity: 0.7;
  }
}
.rellax-target {
  -webkit-transform: translate3d(0px, 28px, 0px);
  transform: translate3d(0px, 28px, 0px);
}