/* grid_pc */
.row {
  display: flex; }

.column {
  margin-left: 4%; }

.column:first-child {
  margin-left: 0; }

.one.column {
  width: 4.66666666667%; }

.two.column {
  width: 13.3333333333%; }

.three.column {
  width: 22%; }

.four.column {
  width: 30.6666666667%; }

.five.column {
  width: 39.3333333333%; }

.six.column {
  width: 48%; }

.seven.column {
  width: 56.6666666667%; }

.eight.column {
  width: 65.3333333333%; }

.nine.column {
  width: 74.0%; }

.ten.column {
  width: 82.6666666667%; }

.eleven.column {
  width: 91.3333333333%; }

.twelve.column {
  width: 100%; }

.row.row_reverse {
  flex-direction: row-reverse; }
  .row.row_reverse .column:last-child {
    margin-left: 0; }
  .row.row_reverse .column:first-child {
    margin-left: 4%; }

@media (min-width: 1170px) {
  h3 {
    font-size: 145%; } }
/*----------------------------------------------

  header

----------------------------------------------*/
.hero_header_wrap {
  padding-top: 38rem;
  padding-bottom: 5em; }
  .hero_header_wrap .hero_doc {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center; }
    @media (min-width: 1170px) {
      .hero_header_wrap .hero_doc {
        font-size: 2.8rem; } }
    .hero_header_wrap .hero_doc span {
      display: block; }
  .hero_header_wrap .hero_aside {
    position: absolute;
    bottom: 28rem;
    left: 2rem; }
    @media (min-width: 1170px) {
      .hero_header_wrap .hero_aside {
        bottom: 38rem;
        left: calc(50% - 540px); } }
    .hero_header_wrap .hero_aside .hero_aside_title {
      color: #DB3828;
      font-size: 4rem;
      border-bottom: solid 1px;
      margin: 0;
      text-align: center; }
    .hero_header_wrap .hero_aside p {
      font-size: 2.4rem; }
    .hero_header_wrap .hero_aside .hero_aside_leaf {
      display: none; }

/*----------------------------------------------

  footer

----------------------------------------------*/
/*----------------------------------------------

  layout

----------------------------------------------*/
/*----------------------------------------------

  container

----------------------------------------------*/
.container {
  width: clamp(940px, 90%, 1240px);
  margin: 0 auto; }

.rope_kanzakura_leaf {
  padding-top: 180px; }

.kanzakura_ico_photo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 200px;
  height: 200px; }
  @media (min-width: 1170px) {
    .kanzakura_ico_photo {
      width: 240px;
      height: 240px; } }

.hodosan_ico_photo {
  position: absolute;
  top: -1em;
  right: 1em;
  z-index: 100;
  width: 120px;
  height: 120px; }

.choccotto_area .choccotto_title {
  top: -3em; }
  .choccotto_area .choccotto_title img {
    max-width: 700px;
    height: auto; }
  @media (min-width: 1170px) {
    .choccotto_area .choccotto_title img {
      max-width: 100%; } }

.line_main_leaf::before {
  content: "";
  position: absolute;
  top: -7em;
  left: -3em;
  content: "";
  display: block;
  width: 114px;
  height: 137px;
  background: url(./images/leaf_left.png) no-repeat center center; }

.line_doc_leaf::before {
  content: "";
  position: absolute;
  top: -3em;
  right: -1em;
  content: "";
  display: block;
  width: 75px;
  height: 90px;
  background: url(./images/leaf_right.png) no-repeat center center;
  background-size: 100% auto; }

.rope_doc_leaf::before {
  content: "";
  position: absolute;
  top: -2em;
  right: -1.5em;
  content: "";
  display: block;
  width: 75px;
  height: 90px;
  background: url(./images/leaf_right.png) no-repeat center center;
  background-size: 100% auto; }

.rope_sub_leaf::before {
  content: "";
  position: absolute;
  top: -2em;
  right: -1.5em;
  content: "";
  display: block;
  width: 75px;
  height: 90px;
  background: url(./images/leaf_left.png) no-repeat center center;
  background-size: 100% auto; }

.tsukinoishi_doc_leaf::before {
  content: "";
  position: absolute;
  top: -2em;
  right: -1em;
  content: "";
  display: block;
  width: 75px;
  height: 90px;
  background: url(./images/leaf_right.png) no-repeat center center;
  background-size: 100% auto; }

.sec_wrap_cloud_sl {
  position: relative; }
  .sec_wrap_cloud_sl::before {
    content: "";
    display: block;
    position: absolute;
    top: 62%;
    left: 0;
    z-index: -1;
    height: 200px;
    width: 100%;
    background: url(./images/bg_cloud_left.png) no-repeat top left;
    background-size: auto 100%; }
    @media (min-width: 1170px) {
      .sec_wrap_cloud_sl::before {
        top: 62%;
        height: 250px; } }

.sec_wrap_cloud_line {
  position: relative; }
  .sec_wrap_cloud_line::before {
    content: "";
    display: block;
    position: absolute;
    top: 60%;
    right: 0;
    z-index: -1;
    height: 200px;
    width: 100%;
    background: url(./images/bg_cloud_right.png) no-repeat top right;
    background-size: auto 100%; }
    @media (min-width: 1170px) {
      .sec_wrap_cloud_line::before {
        top: 62%;
        height: 250px; } }

.sec_wrap_cloud_tsukinoishi {
  position: relative; }
  .sec_wrap_cloud_tsukinoishi::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 10%;
    right: 0;
    z-index: -1;
    height: 200px;
    width: 100%;
    background: url(./images/bg_cloud_right.png) no-repeat top right;
    background-size: auto 100%; }
    @media (min-width: 1170px) {
      .sec_wrap_cloud_tsukinoishi::before {
        bottom: 10%;
        height: 250px; } }

.sec_wrap_cloud_left {
  position: relative; }
  .sec_wrap_cloud_left::before {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: -1;
    height: 200px;
    width: 100%;
    background: url(./images/bg_cloud_left.png) no-repeat top left;
    background-size: auto 100%; }
    @media (min-width: 1170px) {
      .sec_wrap_cloud_left::before {
        height: 250px; } }

.sec_wrap_cloud_right {
  position: relative; }
  .sec_wrap_cloud_right::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 10%;
    right: 0;
    z-index: -1;
    height: 200px;
    width: 100%;
    background: url(./images/bg_cloud_right.png) no-repeat top right;
    background-size: auto 100%; }
    @media (min-width: 1170px) {
      .sec_wrap_cloud_right::before {
        height: 250px; } }

.related_wrap {
  position: relative; }
  .related_wrap::before {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 1;
    height: 250px;
    width: 100%;
    background: url(./images/bg_cloud_left.png) no-repeat top left; }
  .related_wrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    right: 0;
    z-index: 1;
    height: 250px;
    width: 100%;
    background: url(./images/bg_cloud_right.png) no-repeat top right; }
  .related_wrap .related_contents_cloud {
    position: relative;
    z-index: 10; }