/*! Writen  by SCSS */
.inner_main .main_img {
  padding-bottom: calc(534% / 16);
  background-image: url("/bunjyo/sakai-hamaderakoen/img/design/main.jpg"); }
  @media screen and (max-width: 480px) {
    .inner_main .main_img {
      background-image: url("/bunjyo/sakai-hamaderakoen/img/design/main_sp.jpg"); } }
  .inner_main .main_img .main_txt {
    flex-direction: column; }
    .inner_main .main_img .main_txt::before {
      width: calc(1019%/16);
      height: calc(1019%/16); }
    .inner_main .main_img .main_txt figure {
      width: calc(298%/16); }
      @media screen and (max-width: 480px) {
        .inner_main .main_img .main_txt figure {
          width: calc(64%/3.75); } }
    .inner_main .main_img .main_txt .main_txt_sub {
      width: calc(840%/16); }
      @media screen and (max-width: 600px) {
        .inner_main .main_img .main_txt .main_txt_sub {
          width: calc(200%/3.75); } }
      @media screen and (max-width: 480px) {
        .inner_main .main_img .main_txt .main_txt_sub {
          width: calc(136%/3.75); } }

.nomal {
  font-weight: normal; }

.fast_sec {
  margin-bottom: clamp(40px, 5.84%, 70px); }

.fast_sec .img_ttl {
  max-width: 1225px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-right: 1px solid #727171;
  border-left: 1px solid #727171;
  margin-bottom: clamp(40px, 5.84%, 70px); }
  @media screen and (max-width: 768px) {
    .fast_sec .img_ttl {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      grid-gap: 15px; } }
  .fast_sec .img_ttl .txt101 {
    width: calc(374%/12.25);
    margin-right: calc(40%/12.25); }
    @media screen and (max-width: 768px) {
      .fast_sec .img_ttl .txt101 {
        width: calc(280%/7.28);
        margin-right: 0; } }
  .fast_sec .img_ttl .txt102 {
    width: calc(737%/12.25); }
    @media screen and (max-width: 768px) {
      .fast_sec .img_ttl .txt102 {
        width: calc(690%/7.28); } }
    @media screen and (max-width: 480px) {
      .fast_sec .img_ttl .txt102 {
        width: calc(320%/4.4); } }
.fast_sec .read {
  margin-bottom: clamp(25px, 3.34%, 40px); }
.fast_sec .items01 {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  grid-gap: 30px 0;
  max-width: 1180px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .fast_sec .items01 {
      flex-direction: column; } }
  .fast_sec .items01 .item {
    width: calc(590%/11.80);
    position: relative; }
    @media screen and (max-width: 768px) {
      .fast_sec .items01 .item {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-bottom: 0 !important; } }
    .fast_sec .items01 .item .txts {
      position: absolute;
      top: 0;
      left: 0;
      font-size: clamp(12px, 1.58vw, 20px);
      letter-spacing: 0;
      line-height: 1.42;
      font-feature-settings: "palt";
      border-left: 1px solid #727171;
      padding-top: 1em;
      padding-left: 1em; }
      @media screen and (max-width: 768px) {
        .fast_sec .items01 .item .txts {
          letter-spacing: 0.04em;
          line-height: 1.83;
          text-align: justify;
          width: calc(100% - 120px);
          padding-bottom: 0 !important;
          position: relative; } }
      @media screen and (max-width: 480px) {
        .fast_sec .items01 .item .txts {
          width: calc(100% - 100px);
          font-size: 11px; } }
      .fast_sec .items01 .item .txts .big {
        display: block;
        margin: 0.5em 0 0.2em;
        font-size: clamp(16px, 2.08vw, 25px); }
        @media screen and (max-width: 480px) {
          .fast_sec .items01 .item .txts .big {
            font-size: 14xp; } }
    .fast_sec .items01 .item .imgs {
      position: absolute;
      right: 0;
      bottom: 0; }
      @media screen and (max-width: 768px) {
        .fast_sec .items01 .item .imgs {
          position: relative; } }
      .fast_sec .items01 .item .imgs .cap {
        right: -5em;
        bottom: 0;
        line-height: 1; }
    .fast_sec .items01 .item.__01 {
      padding-bottom: calc(300%/11.80); }
      .fast_sec .items01 .item.__01 .imgs {
        width: calc(193%/5.9);
        right: calc(140%/5.9); }
        @media screen and (max-width: 768px) {
          .fast_sec .items01 .item.__01 .imgs {
            right: 0;
            width: 120px; } }
        @media screen and (max-width: 480px) {
          .fast_sec .items01 .item.__01 .imgs {
            width: 90px; } }
    .fast_sec .items01 .item.__02 {
      padding-bottom: calc(300%/11.80); }
      .fast_sec .items01 .item.__02 .imgs {
        width: calc(214%/5.9);
        right: calc(43%/5.9); }
        @media screen and (max-width: 768px) {
          .fast_sec .items01 .item.__02 .imgs {
            right: 0;
            width: 48%;
            width: 120px; } }
        @media screen and (max-width: 480px) {
          .fast_sec .items01 .item.__02 .imgs {
            width: 100px; } }
    .fast_sec .items01 .item.__03 {
      padding-bottom: calc(280%/11.80); }
      .fast_sec .items01 .item.__03 .imgs {
        width: calc(171%/5.9);
        right: calc(110%/5.9); }
        @media screen and (max-width: 768px) {
          .fast_sec .items01 .item.__03 .imgs {
            right: 0;
            width: 48%;
            width: 120px; } }
        @media screen and (max-width: 480px) {
          .fast_sec .items01 .item.__03 .imgs {
            width: 90px; } }
    .fast_sec .items01 .item.__04 {
      padding-bottom: calc(280%/11.80); }
      .fast_sec .items01 .item.__04 .imgs {
        width: calc(148%/5.9);
        right: calc(43%/5.9); }
        @media screen and (max-width: 768px) {
          .fast_sec .items01 .item.__04 .imgs {
            right: 0;
            width: 48%;
            width: 100px; } }
        @media screen and (max-width: 480px) {
          .fast_sec .items01 .item.__04 .imgs {
            width: 80px; } }

.sec_bg_ttl {
  background: #114444;
  color: #fff;
  font-size: clamp(16px, 2.33vw, 29px);
  padding: 0.2em 2em;
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 768px) {
    .sec_bg_ttl {
      padding: 0.3em 0.8em;
      line-height: 1.4; } }
  @media screen and (max-width: 480px) {
    .sec_bg_ttl {
      width: calc(100% + 40px);
      margin: 0 -20px;
      margin-bottom: clamp(40px, 5%, 60px); } }
  .sec_bg_ttl p {
    padding-left: 2.5em;
    text-indent: -2.5em; }

.sec_item {
  position: relative;
  display: flex; }
  @media screen and (max-width: 900px) {
    .sec_item {
      flex-direction: column; } }
  .sec_item .txts {
    border-radius: 10px;
    background: #e9ebd9;
    padding: 1em 1.6em;
    text-align: justify;
    font-size: clamp(14px, 2.08vw, 26px);
    letter-spacing: 0;
    line-height: 1.76;
    font-feature-settings: "palt"; }
    @media screen and (max-width: 768px) {
      .sec_item .txts {
        letter-spacing: 0.04em;
        line-height: 1.83; } }
    .sec_item .txts .line {
      text-decoration: underline;
      text-decoration-color: #efea3c;
      text-decoration-thickness: 4px; }
    .sec_item .txts p {
      position: relative; }
    .sec_item .txts.left {
      position: relative;
      margin-left: 30px; }
      @media screen and (max-width: 900px) {
        .sec_item .txts.left {
          margin: 25px auto 0; } }
      .sec_item .txts.left::before {
        content: "";
        width: 46px;
        height: 33px;
        background-image: url("/bunjyo/sakai-hamaderakoen/img/design/ico01.png");
        background-position: center;
        background-size: contain;
        position: absolute;
        left: -30px;
        top: 0;
        z-index: 1; }
        @media screen and (max-width: 900px) {
          .sec_item .txts.left::before {
            inset: 0;
            bottom: auto;
            top: -25px !important;
            width: 34px;
            height: 48px;
            background-image: url("/bunjyo/sakai-hamaderakoen/img/design/ico_sp.png");
            background-position: center;
            background-size: contain;
            margin: auto; } }
    .sec_item .txts.right {
      position: relative;
      margin-right: 30px; }
      @media screen and (max-width: 900px) {
        .sec_item .txts.right {
          margin: 25px auto 0; } }
      .sec_item .txts.right::before {
        content: "";
        width: 66px;
        height: 38px;
        background-image: url("/bunjyo/sakai-hamaderakoen/img/design/ico02.png");
        background-position: center;
        background-size: contain;
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 1; }
        @media screen and (max-width: 900px) {
          .sec_item .txts.right::before {
            inset: 0;
            bottom: auto;
            top: -25px !important;
            width: 34px;
            height: 48px;
            background-image: url("/bunjyo/sakai-hamaderakoen/img/design/ico_sp.png");
            background-position: center;
            background-size: contain;
            margin: auto; } }

.sec {
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 900px) {
    .sec {
      margin-bottom: clamp(50px, 7.5%, 90px); } }

.sec01 .sec_item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec01 .sec_item .imgs {
    width: calc(193%/12.8);
    margin-left: calc(35%/12.8); }
    @media screen and (max-width: 900px) {
      .sec01 .sec_item .imgs {
        width: 193px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec01 .sec_item .imgs {
        width: 133px; } }
    .sec01 .sec_item .imgs .cap {
      bottom: -2em; }
  .sec01 .sec_item .txts {
    width: calc(585%/12.8); }
    @media screen and (max-width: 900px) {
      .sec01 .sec_item .txts {
        width: 100%; } }
    .sec01 .sec_item .txts::before {
      top: calc(120%/3.72); }
  .sec01 .sec_item .img_q01 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    width: calc(448%/12.8); }
    @media screen and (max-width: 900px) {
      .sec01 .sec_item .img_q01 {
        position: relative;
        width: 70%;
        max-width: 448px;
        margin-top: 20px; } }
@media screen and (max-width: 480px) {
  .sec01 .img_q02 {
    width: calc(100% + 40px);
    margin: 0 -20px; } }

.sec02 .sec_item1 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec02 .sec_item1 .imgs {
    width: calc(193%/12.8);
    margin-left: calc(35%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item1 .imgs {
        width: 193px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec02 .sec_item1 .imgs {
        width: 133px; } }
    .sec02 .sec_item1 .imgs .cap {
      bottom: -2em; }
  .sec02 .sec_item1 .txts {
    width: calc(845%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item1 .txts {
        width: 100%; } }
    .sec02 .sec_item1 .txts::before {
      top: calc(40%/2.35); }
.sec02 .sec_item2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 900px) {
    .sec02 .sec_item2 {
      flex-direction: column-reverse; } }
  .sec02 .sec_item2 .imgs {
    width: calc(214%/12.8);
    margin-right: calc(160%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item2 .imgs {
        width: 214px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec02 .sec_item2 .imgs {
        width: 144px; } }
    .sec02 .sec_item2 .imgs .cap {
      bottom: -2em; }
  .sec02 .sec_item2 .txts {
    width: calc(859%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item2 .txts {
        width: 100%; } }
    .sec02 .sec_item2 .txts::before {
      top: calc(134%/3.26); }
.sec02 .sec_item3 {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec02 .sec_item3 .imgs {
    width: calc(172%/12.8);
    margin-left: calc(33%/12.8);
    margin-right: calc(20%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item3 .imgs {
        width: 172px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec02 .sec_item3 .imgs {
        width: 116px; } }
    .sec02 .sec_item3 .imgs .cap {
      bottom: -2em; }
  .sec02 .sec_item3 .txts {
    width: calc(702%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item3 .txts {
        width: 100%; } }
    .sec02 .sec_item3 .txts::before {
      top: calc(120%/3.72); }
  .sec02 .sec_item3 .img_q01 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    width: calc(334%/12.8); }
    @media screen and (max-width: 900px) {
      .sec02 .sec_item3 .img_q01 {
        position: relative;
        width: 70%;
        max-width: 334px;
        margin: 25px auto 0; } }

.sec03 .sec_item1 {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec03 .sec_item1 .imgs {
    width: calc(214%/12.8);
    margin-right: calc(15%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item1 .imgs {
        width: 214px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec03 .sec_item1 .imgs {
        width: 144px; } }
    .sec03 .sec_item1 .imgs .cap {
      bottom: -2em; }
  .sec03 .sec_item1 .txts {
    width: calc(710%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item1 .txts {
        width: 100%; } }
    .sec03 .sec_item1 .txts::before {
      top: calc(140%/3.72); }
  .sec03 .sec_item1 .img_q01 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    width: calc(334%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item1 .img_q01 {
        position: relative;
        width: 70%;
        max-width: 334px;
        margin: 25px auto 0; } }
.sec03 .sec_item2 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px);
  padding-bottom: calc(66%/12.8); }
  .sec03 .sec_item2 .imgs {
    width: calc(193%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item2 .imgs {
        width: 193px;
        margin: 0 auto 25px;
        order: 1; } }
    @media screen and (max-width: 480px) {
      .sec03 .sec_item2 .imgs {
        width: 123px; } }
    .sec03 .sec_item2 .imgs .cap {
      bottom: -2em; }
  .sec03 .sec_item2 .txts {
    width: calc(665%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item2 .txts {
        width: 100%;
        order: 2; } }
    .sec03 .sec_item2 .txts::before {
      top: calc(240%/3.72); }
  .sec03 .sec_item2 .img_q03 {
    position: absolute;
    left: calc(58%/12.8);
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    width: calc(347%/12.8); }
    @media screen and (max-width: 900px) {
      .sec03 .sec_item2 .img_q03 {
        left: 0;
        position: relative;
        width: 70%;
        max-width: 347px;
        margin: 25px auto 0;
        order: 3; } }
    .sec03 .sec_item2 .img_q03 .cap {
      right: -7em; }
      @media screen and (max-width: 900px) {
        .sec03 .sec_item2 .img_q03 .cap {
          right: 0; } }

.sec04 .sec_item1 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec04 .sec_item1 .imgs {
    width: calc(148%/12.8);
    margin-left: calc(99%/12.8);
    margin-right: calc(25%/12.8); }
    @media screen and (max-width: 900px) {
      .sec04 .sec_item1 .imgs {
        width: 148px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec04 .sec_item1 .imgs {
        width: 78px; } }
    .sec04 .sec_item1 .imgs .cap {
      bottom: -2em; }
  .sec04 .sec_item1 .txts {
    width: calc(972%/12.8); }
    @media screen and (max-width: 900px) {
      .sec04 .sec_item1 .txts {
        width: 100%; } }
    .sec04 .sec_item1 .txts::before {
      top: calc(40%/2.35); }

.sec05 .sec_item1 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 900px) {
    .sec05 .sec_item1 {
      flex-direction: column-reverse; } }
  .sec05 .sec_item1 .imgs {
    width: calc(148%/12.8);
    margin-left: calc(15%/12.8);
    margin-right: calc(120%/12.8); }
    @media screen and (max-width: 900px) {
      .sec05 .sec_item1 .imgs {
        width: 148px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec05 .sec_item1 .imgs {
        width: 78px; } }
    .sec05 .sec_item1 .imgs .cap {
      bottom: -2em; }
  .sec05 .sec_item1 .txts {
    width: calc(941%/12.8); }
    @media screen and (max-width: 900px) {
      .sec05 .sec_item1 .txts {
        width: 100%; } }
    .sec05 .sec_item1 .txts::before {
      top: calc(40%/2.35); }

.sec06 sup {
  font-size: 60%; }
.sec06 .sec_item1 {
  position: relative;
  display: flex;
  align-items: flex-end; }
  .sec06 .sec_item1 .imgs {
    width: calc(193%/12.8);
    margin-left: calc(83%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item1 .imgs {
        width: 193px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec06 .sec_item1 .imgs {
        width: 123px; } }
    .sec06 .sec_item1 .imgs .cap {
      bottom: -2em; }
  .sec06 .sec_item1 .txts {
    width: calc(968%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item1 .txts {
        width: 100%; } }
    .sec06 .sec_item1 .txts::before {
      top: calc(180%/3.72); }
.sec06 .wide_cap {
  line-height: 1.4;
  margin-top: 30px;
  width: 100%;
  margin-bottom: clamp(40px, 5%, 60px); }
.sec06 .sec_item2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 900px) {
    .sec06 .sec_item2 {
      flex-direction: column-reverse; } }
  .sec06 .sec_item2 .imgs {
    width: calc(214%/12.8);
    margin-right: calc(50%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item2 .imgs {
        width: 214px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec06 .sec_item2 .imgs {
        width: 144px; } }
    .sec06 .sec_item2 .imgs .cap {
      bottom: -2em; }
  .sec06 .sec_item2 .txts {
    width: calc(941%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item2 .txts {
        width: 100%; } }
    .sec06 .sec_item2 .txts::before {
      top: calc(80%/2.35); }
.sec06 .sec_item3 {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5%, 60px); }
  .sec06 .sec_item3 .imgs {
    width: calc(171%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item3 .imgs {
        width: 171px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec06 .sec_item3 .imgs {
        width: 101px; } }
    .sec06 .sec_item3 .imgs .cap {
      bottom: -2em; }
  .sec06 .sec_item3 .txts {
    width: calc(967%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item3 .txts {
        width: 100%; } }
    .sec06 .sec_item3 .txts::before {
      top: calc(80%/2.35); }
.sec06 .sec_item4 {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(40px, 5%, 60px); }
  @media screen and (max-width: 900px) {
    .sec06 .sec_item4 {
      flex-direction: column-reverse; } }
  .sec06 .sec_item4 .imgs {
    width: calc(148%/12.8);
    margin-left: calc(40%/12.8);
    margin-right: calc(115%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item4 .imgs {
        width: 148px;
        margin: 0 auto 25px; } }
    @media screen and (max-width: 480px) {
      .sec06 .sec_item4 .imgs {
        width: 78px; } }
    .sec06 .sec_item4 .imgs .cap {
      bottom: -2em; }
  .sec06 .sec_item4 .txts {
    width: calc(941%/12.8); }
    @media screen and (max-width: 900px) {
      .sec06 .sec_item4 .txts {
        width: 100%; } }
    .sec06 .sec_item4 .txts::before {
      top: calc(80%/2.35); }

/*# sourceMappingURL=design.css.map */