/* ==================================================
	modal
================================================== */
.modaal-wrapper {
  background: url("../images/story/bg.png") repeat 0 0/100px auto;
  border-bottom: 20px solid #ec6c00;
  border-top: 20px solid #ec6c00; }
  .modaal-wrapper .modaal-close {
    background: url("../images/story/close.svg") no-repeat center center/contain;
    background-color: transparent; }
    .modaal-wrapper .modaal-close::after, .modaal-wrapper .modaal-close::before {
      display: none; }
  .modaal-wrapper .modaal-container {
    background: transparent;
    background: #fff;
    box-shadow: 0 0 0;
    margin: 0 auto;
    max-width: 980px;
    width: 80%;
    position: relative; }
    @media print, screen and (min-width: 1025px) {
      .modaal-wrapper .modaal-container {
        width: 70%; } }
    .modaal-wrapper .modaal-container .modaal-content-container {
      padding: 45px 10%; }
      @media print, screen and (min-width: 1025px) {
        .modaal-wrapper .modaal-container .modaal-content-container {
          padding: 90px 100px; } }
    .modaal-wrapper .modaal-container .story_title {
      margin-bottom: 80px;
      text-align: center; }
      .modaal-wrapper .modaal-container .story_title h3 {
        margin-bottom: 25px; }
        .modaal-wrapper .modaal-container .story_title h3 img {
          max-height: 46px; }
      .modaal-wrapper .modaal-container .story_title .read {
        max-height: 136px; }
        .modaal-wrapper .modaal-container .story_title .read img {
          max-height: 136px; }
    .modaal-wrapper .modaal-container [class^="box_"] {
      margin-bottom: 70px; }
      .modaal-wrapper .modaal-container [class^="box_"]::after {
        content: "";
        display: block;
        clear: both; }
      .modaal-wrapper .modaal-container [class^="box_"] p {
        line-height: 1.8;
        letter-spacing: 1.75px; }
      .modaal-wrapper .modaal-container [class^="box_"] .small {
        font-size: 12px; }
      @media only screen and (max-width: 768px) {
        .modaal-wrapper .modaal-container [class^="box_"] .thum {
          margin: 0 auto 20px;
          text-align: center; }
          .modaal-wrapper .modaal-container [class^="box_"] .thum img {
            display: block; } }
    .modaal-wrapper .modaal-container .box_1_1 .thum {
      max-width: 141px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_1_1 .thum {
          float: right;
          margin-left: 20px;
          shape-outside: polygon(30.83% 110%, 30.55% 57.4%, -10% 45%, -10% 0%, 100% 0%, 100% 110%);
          max-width: 283px; } }
    .modaal-wrapper .modaal-container .box_1_2 .thum {
      max-width: 85px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_1_2 .thum {
          float: left;
          margin-right: 20px;
          shape-outside: polygon(80% 60%, 100% 80%, 120% 100%, 0% 100%, 0% 0%, 60% 0%, 75% 33%);
          max-width: 170px; } }
    .modaal-wrapper .modaal-container .box_1_3 .thum {
      max-width: 218px; }
      @media only screen and (max-width: 768px) {
        .modaal-wrapper .modaal-container .box_1_3 .thum {
          order: 1; } }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_1_3 .thum {
          margin: 50px auto 0; } }
    @media only screen and (max-width: 768px) {
      .modaal-wrapper .modaal-container .box_1_3 {
        display: flex;
        flex-wrap: wrap; }
        .modaal-wrapper .modaal-container .box_1_3 .thum {
          order: 1; }
        .modaal-wrapper .modaal-container .box_1_3 p {
          order: 2;
          width: 100%; } }
    .modaal-wrapper .modaal-container .box_2_1 .thum {
      max-width: 120px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_2_1 .thum {
          max-width: 240px;
          float: right;
          shape-margin: 20px;
          shape-outside: circle(50% at center center); } }
    .modaal-wrapper .modaal-container .box_2_2 .thum {
      max-width: 202px; }
      @media only screen and (max-width: 768px) {
        .modaal-wrapper .modaal-container .box_2_2 .thum {
          order: 1; } }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_2_2 .thum {
          margin: 50px auto;
          max-width: 404px; } }
    @media only screen and (max-width: 768px) {
      .modaal-wrapper .modaal-container .box_2_2 {
        display: flex;
        flex-wrap: wrap; }
        .modaal-wrapper .modaal-container .box_2_2 .thum {
          order: 1; }
        .modaal-wrapper .modaal-container .box_2_2 p {
          order: 2;
          width: 100%; } }
    .modaal-wrapper .modaal-container .box_2_3 .thum {
      max-width: 162px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_2_3 .thum {
          float: left;
          shape-margin: 20px;
          shape-outside: polygon(80% 45%, 80% 100%, 0% 100%, 0% 0%, 110% 0%, 110% 45%);
          max-width: 324px; } }
    .modaal-wrapper .modaal-container .box_3_1 .thum {
      max-width: 125px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_3_1 .thum {
          float: right;
          margin-left: 20px;
          shape-outside: polygon(30% 110%, 0% 55%, 0% 0%, 100% 0%, 100% 110%);
          max-width: 230px; } }
    .modaal-wrapper .modaal-container .box_3_2 .thum {
      max-width: 112px; }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_3_2 .thum {
          float: left;
          margin-right: 20px;
          shape-outside: polygon(95% 40%, 90% 60%, 100% 100%, 0% 100%, 0% 0%, 85% 0%);
          max-width: 224px; } }
    .modaal-wrapper .modaal-container .box_3_3 .thum {
      max-width: 127px; }
      @media only screen and (max-width: 768px) {
        .modaal-wrapper .modaal-container .box_3_3 .thum {
          order: 1; } }
      @media print, screen and (min-width: 769px) {
        .modaal-wrapper .modaal-container .box_3_3 .thum {
          max-width: 255px;
          margin: 50px auto 0; } }
    @media only screen and (max-width: 768px) {
      .modaal-wrapper .modaal-container .box_3_3 {
        display: flex;
        flex-wrap: wrap; }
        .modaal-wrapper .modaal-container .box_3_3 .thum {
          order: 1; }
        .modaal-wrapper .modaal-container .box_3_3 p {
          order: 2;
          width: 100%; } }