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

Setting

================================================================== */
/* Break Point
--------------------------------- */
/* Width
--------------------------------- */
/* height
--------------------------------- */
/* Color
--------------------------------- */
/* Font
--------------------------------- */
/* Google Web Font */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&family=Roboto:wght@400;500;700&display=swap");
/* Space
--------------------------------- */
/* Vendor Prefix
--------------------------------- */
/* ==================================================================

Mixin

================================================================== */
/* Break Point
--------------------------------- */
/* Clearfix
--------------------------------- */
/* Vendor Prefix (@include vendor-prefix($name, $value);)
--------------------------------- */
/* Responsive Font (@include rwd-font($min-font, $max-font, $min-width, $max-width);)
--------------------------------- */
/* ==================================================================

about

================================================================== */
/* .l-section
------------------------- */
.l-section--about-1 {
  background: #ffe97a;
  position: relative;
}
.l-section--about-1::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 29px 0 29px;
  border-color: #ffe97a transparent transparent transparent;
  position: absolute;
  bottom: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  visibility: hidden;
}
.l-section--about-1::after {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.1+0,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  position: absolute;
  bottom: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  visibility: hidden;
}
.l-section--about-1.is-active::before, .l-section--about-1.is-active::after {
  visibility: visible;
}
.l-section--about-2 {
  background: #ffd53a;
  position: relative;
}
.l-section--about-2::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 29px 0 29px;
  border-color: #ffd53a transparent transparent transparent;
  position: absolute;
  bottom: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  visibility: hidden;
}
.l-section--about-2::after {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.1+0,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.04)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  position: absolute;
  bottom: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  visibility: hidden;
}
.l-section--about-2.is-active::before, .l-section--about-2.is-active::after {
  visibility: visible;
}
.l-section--about-3 {
  background: #ffbe3b;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
}
.l-section--about-3 .c-title span {
  position: relative;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .l-section--about-3 .c-title span {
    padding-top: 60px;
    display: block;
    text-align: center;
  }
}
.l-section--about-3 .c-title span::before {
  content: "";
  display: inline-block;
  background: url(/kasai/simulation/img/img_balloon_01.png) no-repeat center center;
  width: 94px;
  height: 54px;
  position: absolute;
  left: -110px;
  top: -15px;
}
@media screen and (max-width: 767px) {
  .l-section--about-3 .c-title span::before {
    left: 0;
    top: 0;
  }
}

/* .l-bg-kasai
------------------------- */
.l-bg-kasai {
  padding-bottom: 170px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-bg-kasai {
    padding-bottom: 280px;
  }
}
@media screen and (max-width: 850px) {
  .l-bg-kasai {
    padding-bottom: 20px;
  }
}
.l-bg-kasai::before {
  content: "";
  display: inline-block;
  background: url(/kasai/img/bg_kasai_01.png) center no-repeat;
  width: 442px;
  height: 353px;
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(20%);
          transform: translateX(20%);
}
@media screen and (max-width: 850px) {
  .l-bg-kasai::before {
    width: 40%;
    height: 300px;
    background-size: contain;
    right: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@media screen and (max-width: 767px) {
  .l-bg-kasai::before {
    width: 100%;
    height: 250px;
    background-size: contain;
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}

/* .l-block-simulation-01
------------------------- */
.l-block-simulation-01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  overflow: hidden;
  -ms-flex-line-pack: center;
      align-content: center;
  margin: 25px auto 0;
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01 {
    display: block;
  }
}
.l-block-simulation-01__scroll {
  width: 60%;
  max-height: 30vh;
  overflow: scroll;
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__scroll {
    width: 100%;
    max-height: none;
  }
}
.l-block-simulation-01__scroll__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 3px double rgb(195.5, 195.5, 195.5);
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__scroll__item {
    display: block;
  }
}
.l-block-simulation-01__scroll__item:last-child {
  border-bottom: none;
}
.l-block-simulation-01__scroll__item > * {
  padding: 10px;
}
.l-block-simulation-01__scroll__item .title {
  width: 30%;
  background: #f5f5f5;
  font-size: 1.6rem;
  border-right: 1px solid #ddd;
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__scroll__item .title {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}
.l-block-simulation-01__scroll__item .list-radio {
  width: 70%;
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__scroll__item .list-radio {
    width: 100%;
  }
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 0.4em 0;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li:first-of-type {
  padding-top: 0;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li .box-radio {
  width: 10%;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li .box-text {
  width: 90%;
  font-size: 1.3rem;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li .box-text em {
  display: block;
  font-size: 1.6rem;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li .box-text .list-basic {
  display: block;
  list-style-type: disc;
  padding-left: 1.5em;
}
.l-block-simulation-01__scroll__item .list-radio > ul.list-radio__ul > li .box-text .list-basic > span {
  display: list-item;
}
.l-block-simulation-01__img {
  width: auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: #e6d78b;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__img {
    width: 100%;
    height: 40vh;
  }
}
.l-block-simulation-01__img > img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .l-block-simulation-01__img > img {
    width: 20vh;
    height: auto;
  }
}