@charset "UTF-8";
/*——————————————————————————————————————————————
変数
——————————————————————————————————————————————*/
/*——————————————————————————————————————————————
mixin
——————————————————————————————————————————————*/
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .tb {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .tb {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  .sp {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

/*————————————————————————————————————————————————————————
共通CSS
—————————————————————————————————————————————————————————————————————————————*/
* {
  color: #000;
  font-weight: normal;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

body {
  padding: 0;
  margin: 0;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body ul,
body li,
body dt,
body dd,
body a,
body div {
  padding: 0;
  margin: 0;
}
body ul,
body li {
  list-style: none;
}
body p,
body ul,
body li,
body dt,
body dd,
body a {
  font-size: 16px;
}
body a {
  text-decoration: none;
}
body p {
  box-sizing: border-box;
  margin-top: 15px;
  margin-bottom: 15px;
}
body img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

header {
  width: 100%;
  position: fixed;
  z-index: 9;
  background: #fff;
}
header .header_inner {
  max-width: 1366px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  header .header_inner {
    height: 70px;
  }
}
header .header_inner .logo {
  max-width: 221px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  header .header_inner .logo {
    max-width: 140px;
  }
}
header .header_inner img {
  padding: 5%;
  box-sizing: border-box;
}
header .header_inner .btn_contain > a {
  display: inline-block;
  max-width: 170px;
  width: 100%;
}
@media screen and (max-width: 575px) {
  header .header_inner .btn_contain > a {
    max-width: 120px;
  }
}

main .inner {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  main .inner {
    max-width: 768px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 575px) {
  main .inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
main .inner section {
  width: 100%;
}
main .inner.in_inner {
  box-sizing: border-box;
  padding-right: 80px;
  padding-left: 80px;
}
@media screen and (max-width: 767px) {
  main .inner.in_inner {
    max-width: 768px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
main .bg_gray {
  position: relative;
  z-index: 0;
  background-color: #f1f1f1;
}
main .bg_green {
  position: relative;
  z-index: 0;
  background-color: #f9ffeb;
}
main .more_content,
main .shuno_content,
main .shuno_content2 {
  display: none;
}
main .shuno_content {
  padding-top: 20px;
}
main .more_btn,
main .shuno_btn {
  z-index: 1;
  display: block;
  box-sizing: border-box;
  max-width: 421px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 0px;
  background: orange;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  position: relative;
  margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
  main .more_btn,
main .shuno_btn {
    font-size: 21px;
  }
}
main .more_btn::before, main .more_btn::after,
main .shuno_btn::before,
main .shuno_btn::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}
main .more_btn::before,
main .shuno_btn::before {
  right: 19px;
  top: 45%;
  transform: translateY(-45%) rotate(135deg);
  vertical-align: middle;
  color: orange;
  line-height: 1;
  width: 0.7em;
  height: 0.7em;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform-origin: center;
  z-index: 2;
}
main .more_btn::after,
main .shuno_btn::after {
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50px;
  background: #fff;
}
main .more_btn.on-click::before,
main .shuno_btn.on-click::before {
  top: 55%;
  transform: translateY(-55%) rotate(315deg);
}

.ttl_image {
  margin-bottom: 50px;
}

[class*=box]:not(.plan_box) {
  background-color: #fff;
  padding: 45px 70px 50px;
  margin-bottom: 50px;
}
@media screen and (max-width: 575px) {
  [class*=box]:not(.plan_box) {
    padding: 40px;
    margin-bottom: 50px;
  }
}

.box_shadow {
  position: relative;
  box-sizing: border-box;
  width: 97%;
  margin-right: auto;
  margin-left: auto;
}
.box_shadow::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  background: #cacaca;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 10px;
  top: 10px;
}
@media screen and (max-width: 767px) {
  .box_shadow {
    width: 100%;
  }
}

.w-center {
  margin-left: auto;
  margin-right: auto;
}

.txt_center {
  text-align: center;
}

.txt_right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.fv {
  width: 100%;
  padding-top: 99px;
  background-color: #f1f1f1;
}
@media screen and (max-width: 767px) {
  .fv {
    padding-top: 70px;
  }
}

.emblem .inner img {
  width: 100%;
  margin: 23px auto 0;
}
@media screen and (min-width: 768px) {
  .emblem .inner img {
    width: 80%;
    margin: 50px auto 40px;
  }
}

.feature {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .feature {
    padding-top: 10px;
    margin-top: 105px;
  }
}
.feature .feature_border {
  position: relative;
}
@media screen and (min-width: 768px) {
  .feature .feature_border {
    width: 100%;
    transform: translateY(-65px);
  }
}
.feature .feature_border::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 12px;
  background-color: #fff;
  bottom: 20%;
  transform: translateY(-20%);
}
.feature .feature_border img {
  width: 87%;
  position: relative;
  z-index: 3;
}
.feature .feature_ttl {
  max-width: 566px;
  width: 44.3660322108%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .feature .feature_ttl {
    min-width: 275px;
    width: 73.5869791667%;
  }
}
.feature .feature_contain {
  padding-bottom: 45px;
}
@media screen and (min-width: 768px) {
  .feature .feature_contain {
    margin-top: -65px;
  }
}

.point .inner {
  padding: 50px 0 40px;
}
@media screen and (max-width: 767px) {
  .point .inner {
    padding: 60px 20px 50px;
  }
}
@media screen and (max-width: 767px) {
  .point .plan {
    margin: 0 5px;
  }
}
.point .plan .plan_ttl {
  width: 57.0552147239%;
  margin: 60px auto 0;
}
@media screen and (min-width: 768px) {
  .point .plan .plan_ttl {
    width: 66.0746003552%;
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  .point .plan > .flex {
    display: block;
  }
}
.point .plan > .flex .plan_box,
.point .plan > .flex .plan_space {
  width: 100%;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .point .plan > .flex .plan_box,
.point .plan > .flex .plan_space {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .point .plan > .flex .plan_box {
    margin-bottom: 35px;
  }
  .point .plan > .flex .plan_space {
    margin-bottom: 25px;
  }
}
@media screen and (min-width: 768px) {
  .point .plan > .flex .plan_space {
    margin-left: 15px;
  }
  .point .plan > .flex .plan_box {
    padding-right: 15px;
    border-right: 1px solid #f1f1f1;
  }
}
.point .storage p:first-child {
  margin-top: 50px;
}
.point .storage p:not(:last-child) {
  margin-bottom: 50px;
}
.point .plan_img {
  margin: 0 auto;
  max-width: 735px;
  width: 93.9609236234%;
}
.point.point1_content .box_shadow.point1 .point_icon {
  top: -2%;
  left: -10px;
  transform: translateY(2%);
}
@media screen and (min-width: 768px) {
  .point.point4_contain .box_shadow {
    padding: 30px 70px 50px;
  }
}
.point.point23_content .inner {
  padding: 60px 20px 40px;
}
.point .box_shadow {
  position: relative;
}
@media screen and (max-width: 575px) {
  .point .box_shadow {
    padding: 20px 10px;
  }
  .point .box_shadow .point1 img,
.point .box_shadow .point2 img,
.point .box_shadow .point3 img,
.point .box_shadow .point4 img {
    margin: 10px auto;
  }
}
.point .box_shadow:last-child {
  margin-bottom: 0;
}
.point .box_shadow .point_icon {
  width: 18.1333333333%;
  height: auto;
  position: absolute;
  top: -5%;
  left: -10px;
  transform: translateY(5%);
}

.line_cta {
  padding-top: 45px;
  padding-bottom: 45px;
}
.line_cta .cta_relative {
  position: relative;
}
.line_cta .cta_relative .cta_absolute {
  display: block;
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translate(-50%, -14%);
}
@media screen and (max-width: 767px) {
  .line_cta .cta_relative .cta_absolute {
    width: 80%;
    bottom: 12%;
    transform: translate(-50%, -12%);
  }
}
@media screen and (max-width: 767px) {
  .line_cta .cta_relative .cta_absolute p {
    font-size: 3.5vw;
  }
}
.line_cta .btn_mail {
  width: 40%;
}
.line_cta .btn_mail.tb {
  width: 70%;
}
.line_cta .mail_cta {
  margin-top: 30px;
}
.line_cta .mail_cta p {
  margin-bottom: 7px;
}
.line_cta.cta_sec30 {
  background-color: #fff;
}
.line_cta.cta_sec30 .inner > img.pc {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .line_cta.cta_sec30 .inner > img.pc {
    width: 70%;
  }
}
.line_cta.cta_sec30 .btn_line {
  width: 80%;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 60%;
}
.line_cta.cta_sec30 .btn_line.tb {
  width: 80%;
}
.line_cta.bg_white {
  background-color: #fff;
}

.conparison {
  padding-top: 30px;
}
.conparison .conparison_ttl {
  padding-bottom: 30px;
  position: relative;
}
.conparison .conparison_ttl img {
  width: 94.4%;
}
@media screen and (min-width: 768px) {
  .conparison .conparison_ttl img {
    max-width: 476.77px;
    width: 34.9026354319%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) {
  .conparison .conparison_ttl::before {
    content: "";
    position: absolute;
    bottom: 35%;
    transform: translateY(-35%);
    width: 56%;
    height: 10px;
    background-color: #277d4f;
    z-index: -1;
  }
}
.conparison .conparison_contain {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .conparison .conparison_contain {
    margin-top: 45px;
  }
  .conparison .conparison_contain.flex {
    flex-direction: column;
  }
}
.conparison .conparison_contain .trunkroom,
.conparison .conparison_contain .azkel {
  width: 100%;
}
.conparison .conparison_contain .trunkroom img,
.conparison .conparison_contain .azkel img {
  box-sizing: border-box;
  width: 50%;
  padding: 40px 0;
  min-width: 480.94px;
}
@media screen and (max-width: 991px) {
  .conparison .conparison_contain .trunkroom img,
.conparison .conparison_contain .azkel img {
    min-width: unset;
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .conparison .conparison_contain .trunkroom img,
.conparison .conparison_contain .azkel img {
    margin: 0 auto;
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .conparison .conparison_contain .trunkroom img {
    margin-right: 0;
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .conparison .conparison_contain .trunkroom img {
    padding-top: 30px;
  }
  .conparison .conparison_contain .azkel img {
    padding-bottom: 45px;
  }
}
.conparison .line_cta {
  padding-top: 45px;
}
@media screen and (min-width: 768px) {
  .conparison .line_cta {
    padding-bottom: 40px;
  }
}
.conparison .line_cta .btn_line.tb {
  margin-top: 0px;
}

.voice {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .voice {
    padding-top: 0;
    padding-bottom: 30px;
  }
  .voice .inner {
    margin: 0;
    padding: 0;
  }
  .voice .more_btn {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 575px) {
  .voice .more_btn {
    margin-left: 15px;
    margin-right: 15px;
  }
}
.voice .voice_ttl {
  position: relative;
}
.voice .voice_ttl img {
  width: 90%;
}
@media screen and (min-width: 768px) {
  .voice .voice_ttl img {
    min-width: 400.32px;
    width: 29.306%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .voice .voice_ttl::before {
    content: "";
    position: absolute;
    bottom: 25%;
    transform: translateY(-25%);
    z-index: -1;
    width: 56%;
    height: 10px;
    background-color: #277d4f;
  }
}
@media screen and (min-width: 768px) {
  .voice .voiceslide img {
    margin: 0 auto;
    width: 51.1956521739%;
  }
}
@media screen and (max-width: 767px) {
  .voice .slick-prev,
.voice .slick-next {
    top: unset;
    bottom: -35px;
  }
}
.voice .slick-prev::before,
.voice .slick-next::before {
  color: black;
}
@media screen and (max-width: 767px) {
  .voice .slick-prev {
    left: 0;
  }
}
.voice .slick-prev::before {
  content: "<";
}
@media screen and (max-width: 767px) {
  .voice .slick-next {
    right: 0;
  }
}
.voice .slick-next::before {
  content: ">";
}
.voice + .line_cta {
  padding-bottom: 0;
  padding-top: 0;
}

.column .column_ttl {
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
}
.column .column_ttl img {
  width: 94.6666666667%;
}
@media screen and (min-width: 768px) {
  .column .column_ttl img {
    max-width: 472.6px;
    width: 34.6482430454%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) {
  .column .column_ttl::before {
    position: absolute;
    content: "";
    display: block;
    background: #9bc82c;
    width: 60%;
    z-index: -1;
    height: 10px;
    bottom: 32%;
    transform: translateY(-32%);
  }
}
@media screen and (min-width: 768px) {
  .column .bg_green .inner,
.column .bg_gray .inner {
    padding: 0;
    margin: 0 auto;
  }
}
.column .column3 {
  width: 64%;
  margin: 0 auto;
  padding: 30px 0 60px;
}
@media screen and (max-width: 767px) {
  .column .bg_gray .inner {
    margin-bottom: 0;
  }
  .column .bg_green .inner {
    margin: 0;
  }
  .column .bg_green .inner .column3 {
    width: 64%;
    padding: 30px 0 60px;
  }
}

.shuka {
  padding-top: 1px;
  background: #f1f1f1;
  /*タブ切り替え全体のスタイル*/
  /*タブのスタイル*/
  /*ラジオボタンを全て消す*/
  /*タブ切り替えの中身のスタイル*/
  /*選択されているタブのコンテンツのみを表示*/
  /*選択されているタブのスタイルを変える*/
}
@media screen and (max-width: 767px) {
  .shuka {
    margin-bottom: 10px;
  }
}
.shuka .inner {
  max-width: 807px;
  width: 60%;
  background: #f1f1f1;
}
@media screen and (max-width: 767px) {
  .shuka .inner {
    width: 100%;
  }
}
.shuka .shuka_ttl {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .shuka .shuka_ttl {
    position: relative;
  }
  .shuka .shuka_ttl img {
    position: relative;
    max-width: 525px;
    width: 38.4641288433%;
    margin: 0 auto;
  }
  .shuka .shuka_ttl::before {
    position: absolute;
    bottom: 19%;
    transform: translateY(-19%);
    content: "";
    display: block;
    background: #92bd32;
    width: 60%;
    height: 8px;
    margin-right: 34%;
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .shuka .shuka_ttl {
    margin-right: 20px;
  }
}
.shuka .tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .shuka .tabs {
    padding-bottom: 0;
  }
}
.shuka .tab_item {
  box-sizing: border-box;
  width: 47.619047619%;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  position: relative;
  opacity: 0.5;
}
.shuka .tab_item:hover {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .shuka .tab_item[for=line_tomodachi] {
    width: 50%;
  }
  .shuka .tab_item[for=line__content] {
    width: 48%;
  }
}
.shuka #line_tomodachi:checked + .tab_item,
.shuka #line__content:checked + .tab_item {
  opacity: 1;
}
.shuka input[name=tab_item] {
  display: none;
}
.shuka .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}
.shuka #line_tomodachi:checked ~ #line_tomodachi_content,
.shuka #line__content:checked ~ #line__content_description {
  display: block;
}
.shuka .cta_sec30.line_cta {
  margin-top: 0;
  padding-top: 0;
  padding-top: 30px;
}
@media screen and (max-width: 767px) {
  .shuka .cta_sec30.line_cta {
    padding-top: 45px;
  }
}
.shuka .cta_sec30.line_cta .inner {
  background-color: #fff;
}

.faq {
  background-color: #9bc82c;
}

@media screen and (max-width: 767px) {
  .content02 {
    width: 100%;
    text-align: center;
    padding-top: 12%;
  }
  .content02-title {
    width: 100%;
    padding-bottom: 8%;
  }
  .content02-title-img {
    width: 85%;
  }
  /*--------------------------------
      1.お得に選べる安心の料金体系
  --------------------------------*/
  .content02-1 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
  }
  .content02-1-title {
    width: 100%;
  }
  .content02-1-title-img1 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .content02-1-title-img2 {
    width: 90%;
    padding-top: 5%;
    margin-left: auto;
    margin-right: auto;
  }
  .content02-1-title-img3 {
    width: 90%;
    padding-top: 5%;
    margin-left: auto;
    margin-right: auto;
  }
  .content02-1-contain {
    width: 100%;
  }
  /* Slider Start */
  .content02-1-slider {
    width: 90%;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
  }
  .slider img {
    width: 100%;
  }
  /* Slider End */
  .content02-1-text {
    width: 100%;
  }
  .content02-1-text-img {
    width: 85%;
    padding-top: 8%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Accordion Start */
  .acd-check1 {
    display: none;
  }
  .acd-check2 {
    display: none;
  }
  .acd-label {
    display: block;
    margin-bottom: 1px;
    padding: 10px;
  }
  .content02-1-acd-img1 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .acd-content1 {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: 0.5s;
    visibility: hidden;
  }
  .acd-content2 {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: 0.5s;
    visibility: hidden;
  }
  .content02-1-acd-img2 {
    width: 80%;
    padding-top: 7%;
    margin-left: auto;
    margin-right: auto;
  }
  .acd-check1:checked + .acd-label + .acd-content1 {
    height: 200vw;
    opacity: 1;
    padding: 10px;
    visibility: visible;
  }
  .acd-check2:checked + .acd-label + .acd-content2 {
    height: 310vw;
    opacity: 1;
    padding: 10px;
    visibility: visible;
    /* add css 2303 */
    max-height: 2200px;
    height: 100%;
  }
  .triangle {
    width: 100%;
    position: relative;
  }
  .triangle-img {
    width: 15%;
    position: absolute;
    top: -7vw;
    left: 11vw;
  }
  /* Accordion End */
  .content02-1-accordion2 {
    padding-bottom: 5%;
  }
  .content02-1-space {
    width: 100%;
    padding-bottom: 5%;
  }
  .content02-1-space-img {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  /*--------------------------------
      2.安心の保管環境
  --------------------------------*/
  .content02-2 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    margin-bottom: 8%;
  }
  .content02-2-img {
    width: 90%;
    padding-bottom: 8%;
  }
  /*--------------------------------
      3.スマホで管理
  --------------------------------*/
  .content02-3 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    margin-bottom: 8%;
  }
  .content02-3-img {
    width: 90%;
    padding-bottom: 8%;
  }
  /*--------------------------------
      4.必要な時は1点からでも
        取り出し可能
  --------------------------------*/
  .content02-4 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    margin-bottom: 12%;
  }
  .content02-4-img {
    width: 90%;
    padding-bottom: 8%;
  }
}
@media screen and (min-width: 768px) {
  .content02 {
    width: 100%;
  }
  .content02-title {
    width: 100%;
    text-align: center;
    padding-bottom: 5%;
  }
  .content02-title-img {
    width: 30%;
  }
  /*--------------------------------
      1.お得に選べる安心の料金体系
  --------------------------------*/
  .content02-1 {
    width: 65%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 3%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5%;
  }
  .content02-1-title {
    width: 100%;
    text-align: center;
  }
  .content02-1-title-img {
    width: 80%;
  }
  .content02-1-separate {
    width: 85%;
    text-align: center;
    margin: 0 auto;
    padding-top: 1%;
  }
  .separate1 {
    width: 49%;
    text-align: center;
    float: left;
    margin: 0 auto;
    padding-right: 1%;
    border-right: 1px solid #777777;
  }
  .separate1-title {
    width: 100%;
  }
  .separate1-title-img {
    width: 100%;
  }
  .separate2 {
    width: 49%;
    text-align: center;
    float: right;
    margin: 0 auto;
  }
  .separate2-title {
    width: 100%;
  }
  .separate2-title-img {
    width: 100%;
  }
  .separate2-content {
    width: 100%;
    padding-top: 14%;
  }
  .separate2-content-img1 {
    width: 100%;
  }
  .separate2-content-img2 {
    width: 100%;
    padding-top: 7%;
  }
  .separate2-content-img3 {
    width: 85%;
    padding-top: 5%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Slider Start */
  .content02-1-slider {
    width: 100%;
    margin: 0 auto;
  }
  .slider img {
    width: 100%;
  }
  /* Slider End */
  .separate1-text {
    width: 100%;
    text-align: center;
  }
  .separate1-text-img {
    width: 95%;
  }
  .content02-1-size1 {
    width: 100%;
    clear: both;
    padding-top: 8%;
  }
  .content02-1-size1-title {
    width: 100%;
    text-align: left;
  }
  .content02-1-size1-title-img {
    width: 50%;
    padding-bottom: 3%;
  }
  .content02-1-size1-content {
    width: 100%;
    margin: 0 auto;
  }
  .content02-1-size1-content-img {
    width: 100%;
    padding-bottom: 5%;
  }
  .content02-1-size2 {
    width: 100%;
    clear: both;
    padding-top: 7%;
  }
  .content02-1-size2-title {
    width: 100%;
    text-align: left;
  }
  .content02-1-size2-title-img {
    width: 50%;
  }
  .content02-1-size2-content {
    width: 100%;
    margin: 0 auto;
  }
  .content02-1-size2-content-img1 {
    width: 100%;
    padding-bottom: 5%;
  }
  .content02-1-size2-content-img2 {
    width: 100%;
    padding-top: 3%;
  }
  /*--------------------------------
      2.安心の保管環境
  --------------------------------*/
  .content02-2 {
    width: 65%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 3%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5%;
  }
  .content02-2-img {
    width: 85%;
    padding-bottom: 8%;
  }
  /*--------------------------------
      3.スマホで管理
  --------------------------------*/
  .content02-3 {
    width: 65%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 3%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5%;
  }
  .content02-3-img {
    width: 85%;
    padding-bottom: 8%;
  }
  /*--------------------------------
      4.必要な時は1点からでも
        取り出し可能
  --------------------------------*/
  .content02-4 {
    width: 65%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 3%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 7%;
  }
  .content02-4-img {
    width: 85%;
    padding-bottom: 8%;
  }
}
.acd-label {
  display: block;
  margin-bottom: 1px;
  padding: 10px;
}

/*#################################################################
 09.よくある質問 CSS
#################################################################*/
@media screen and (max-width: 767px) {
  .content06 {
    width: 100%;
    text-align: center;
    background-color: #9bc82d;
    padding-bottom: 8%;
  }
  .content06-title {
    width: 100%;
  }
  .content06-title-img {
    width: 100%;
  }
  /* Q&A 01 */
  .content06-1 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-1-img {
    width: 90%;
    padding-top: 3%;
    margin-left: auto;
    margin-right: auto;
  }
  a > .content06-1-img {
    width: 90%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 02 */
  .content06-2 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-2-img {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 03 */
  .content06-3 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-3-img {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 04 */
  .content06-4 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-4-img {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 05 */
  .content06-5 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-5-img {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 06 */
  .content06-6 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-6-img {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Q&A 07 */
  .content06-7 {
    width: 90%;
    background-color: #ffffff;
    box-shadow: -15px -15px 0px -10px #999999 inset;
    padding-top: 7%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8%;
  }
  .content06-7-img1 {
    width: 90%;
    padding-top: 3%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  .content06-7-img2 {
    width: 90%;
    padding-bottom: 8%;
    margin-left: auto;
    margin-right: auto;
  }
  .content06-7-img3 {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Accordion Start */
  .acd-check3 {
    display: none;
  }
  .acd-label3 {
    display: block;
    margin-bottom: 1px;
    padding: 10px;
  }
  .acd-content3 {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: 0.5s;
    visibility: hidden;
  }
  .acd-content3 {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: 0.5s;
    visibility: hidden;
  }
  .acd-check3:checked + .acd-label3 + .acd-content3 {
    height: 190vw;
    opacity: 1;
    padding: 10px;
    visibility: visible;
  }
  /* Accordion End */
  .content06 > div[class*=content06-]:not(.content06-title) {
    width: 90%;
    background-color: #ffffff;
    box-shadow: 5px 5px 0px 0 #999999;
  }
  .content06-1 a:not(:last-child) > .content06-img {
    padding-bottom: 0%;
  }
  .content06-img {
    width: 90%;
    padding-top: 3%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8%;
  }
}
@media screen and (min-width: 768px) {
  .faq {
    padding-bottom: 20px;
  }
  .content05,
div[class*=content05-] {
    margin-bottom: 80px;
  }
  div[class*=content05-] {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 15px 15px 0px 0 #999999;
  }
  .content05-1 a > .content05-img {
    padding-bottom: 3%;
  }
  .content05-6 .content05-img:nth-child(2) {
    width: 80%;
  }
  .content05-img {
    width: 90%;
    padding: 3%;
  }
  .content05-img:last-child {
    padding-top: 0;
    padding-bottom: 6%;
  }
}
/*#################################################################
 11.CTA07 CSS
#################################################################*/
@media screen and (max-width: 767px) {
  .cta07 {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 2%;
    z-index: 10;
  }
  .cta07-btn-img1 {
    width: 15%;
    cursor: pointer;
    margin-right: 0;
    margin-left: auto;
  }
  .cta07-btn-img2 {
    width: 95%;
    cursor: pointer;
    padding-top: 2%;
  }
  .cta07-btn-img3 {
    width: 95%;
    cursor: pointer;
    padding-bottom: 2%;
  }
  /* Accordion Start */
  .acd-check5 {
    display: none;
  }
  .acd-label {
    display: block;
    margin-bottom: 1px;
    padding: 10px;
  }
  .acd-content5 {
    width: 65%;
    text-align: center;
    background-color: #ffffff;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    visibility: hidden;
  }
  .acd-check5:checked + .acd-label + .acd-content5 {
    height: 37vw;
    opacity: 1;
    padding: 10px;
    visibility: visible;
    margin-left: 8%;
    position: absolute;
    top: -25vw;
    border: 1px solid #d9d9d9;
  }
  /* Accordion End */
}
@media screen and (min-width: 768px) {
  .cta07 {
    width: 100%;
    text-align: right;
    position: fixed;
    bottom: 2%;
    z-index: 10;
  }
  .cta07-btn-img1 {
    width: 5%;
    cursor: pointer;
    margin-right: 0;
    margin-left: auto;
  }
  .cta07-btn-img2 {
    width: 90%;
    cursor: pointer;
    padding-top: 2%;
  }
  .cta07-btn-img3 {
    width: 90%;
    cursor: pointer;
    padding-bottom: 2%;
  }
  /* Accordion Start */
  .acd-check4 {
    display: none;
  }
  .acd-label {
    display: block;
    margin-bottom: 1px;
    padding: 10px;
  }
  .acd-content4 {
    width: 20%;
    text-align: center;
    background-color: #ffffff;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    visibility: hidden;
  }
  .acd-check4:checked + .acd-label + .acd-content4 {
    height: 10.8vw;
    opacity: 1;
    padding: 10px;
    visibility: visible;
    margin-left: 72%;
    position: absolute;
    top: -9vw;
    border: 1px solid #d9d9d9;
  }
  /* Accordion End */
}
/*#################################################################
 10.Footer CSS
#################################################################*/
.footer {
  width: 100%;
  background-color: #f1f1f1;
}
.footer p {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .footer p {
    font-size: 3vw;
    font-weight: bold;
    text-align: center;
    padding-top: 8%;
    padding-bottom: 8%;
  }
}
@media screen and (min-width: 768px) {
  .footer p {
    font-size: 1vw;
    font-weight: bold;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
  }
}
.stockmamoru_cta {
  margin-top: 60px;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .stockmamoru_cta {
    margin-top: 80px;
    margin-bottom: 40px;
  }
}
.stockmamoru_cta .cta_btn {
  display: block;
  max-width: 330px;
  width: 100%;
  margin: 0 auto;
}