@charset "UTF-8";

.ifw_wrap {
 margin: 2em auto;
 width: -moz-fit-content;
 width: fit-content;
 position: relative;
}

.ifw_wrap.ifw_left {
 margin-left: 0;
 margin-right: auto;
}

.ifw_wrap.ifw_right {
 margin-left: auto;
 margin-right: 0;
}

.ifw_wrap.ifw_center {
 margin-left: auto;
 margin-right: auto;
}

.ifw_wrap button.ifw_btn,
.ifw_wrap div.ifw_btn {
 padding: .4em 1em .5em;
 font-size: 1.4rem;
 font-family: inherit;
 color: #666;
 background: #FFF;
 border: 1px solid #999;
 border-radius: 20px;
 display: block;
 cursor: pointer;
 @media screen and ( max-width: 834px ) {
  font-size: 1.2rem;
  line-height: 1.3em;
 }
}

.ifw_wrap button.ifw_btn:hover,
.ifw_wrap div.ifw_btn:hover {
 background: #fff0f2;
}

.ifw_wrap button.ifw_btn span.material-symbols-rounded,
.ifw_wrap div.ifw_btn span.material-symbols-rounded {
 font-size: 20px;
 vertical-align: middle;
 margin: 0 .2em;
 color: #ff5e78;
}

.ifw_wrap .material-symbols-rounded {
 font-variation-settings: "FILL" 1, "wght" 400, "GRAD" -25, "opsz" 24;
}

.ifw_wrap .ifw_message_wrap {
 min-width: 200px;
 position: absolute;
 filter: drop-shadow(0px 3px 6px #CCC);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 z-index: 2;
 transition: 0.5s;
}

.ifw_wrap .ifw_message_wrap.ifw_thanks {
 @media screen and ( max-width: 834px ){
  padding: 10px;
  width: 80vw;
 }
 @media screen and ( min-width: 835px ) and ( max-width: 1023px ){
  padding: 0 1em;
  width: 80vw;
 }
 @media screen and ( min-width: 1024px ){
  padding: 0 1em;
  width: 700px;
 }
}

.ifw_wrap .ifw_message_wrap.ifw_thanks .ifw_message {
  max-width: 100%;
  width: 100%;
}

.ifw_wrap .ifw_message_wrap .ifw_close {
 width: 1.3em;
 height: 1.3em;
 width: -moz-fit-content;
 width: fit-content;
 position: absolute;
 top: 1em;
 right: 1.5em;
 z-index: 1;
 font-size: 1.3em;
 font-weight: 900;
 text-align: center;
 border-radius: 20px;
 cursor: pointer;
}

.ifw_wrap .ifw_message_wrap .ifw_close:hover {
 opacity: 0.6;
}

.ifw_wrap .ifw_message_wrap.visible {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
}

.ifw_wrap .ifw_message_wrap .ifw_arrow {
 position: absolute;
 background: white;
 height: calc(tan(56deg) * 18px / 2);
 width: 28px;
 z-index: 0;
}

.ifw_wrap .ifw_message_wrap.ifw_top_right {
 bottom: calc(100% + 30px);
 right: 0;
 transition: 0.5s;
 transform: translateY(10px);
}

.ifw_wrap .ifw_message_wrap.ifw_top_right .ifw_arrow {
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 right: 20px;
 top: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap.ifw_top_left {
 bottom: calc(100% + 30px);
 left: 0;
 transition: 0.5s;
 transform: translateY(10px);
}

.ifw_wrap .ifw_message_wrap.ifw_top_left .ifw_arrow {
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 left: 20px;
 top: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap.ifw_top_center {
 bottom: calc(100% + 30px);
 left: 50%;
 transform: translate(-50%, -10px);
 transition: 0.5s;
}

.ifw_wrap .ifw_message_wrap.ifw_top_center .ifw_arrow {
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 left: 0;
 right: 0;
 margin: auto;
 top: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_right {
 top: calc(100% + 30px);
 right: 0;
 transition: 0.5s;
 transform: translateY(-10px);
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_right .ifw_arrow {
 clip-path: polygon(50% 0, 100% 100%, 0 100%);
 right: 20px;
 bottom: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_left {
 top: calc(100% + 30px);
 left: 0;
 transition: 0.5s;
 transform: translateY(-10px);
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_left .ifw_arrow {
 clip-path: polygon(50% 0, 100% 100%, 0 100%);
 left: 20px;
 bottom: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_center {
 top: calc(100% + 30px);
 left: 50%;
 transform: translate(-50%, -10px);
 transition: 0.5s;
}

.ifw_wrap .ifw_message_wrap.ifw_bottom_center .ifw_arrow {
 clip-path: polygon(50% 0, 100% 100%, 0 100%);
 left: 0;
 right: 0;
 margin: auto;
 bottom: calc(100% - 1px);
}

.ifw_wrap .ifw_message_wrap .ifw_message {
 background: #ffffff;
 border-radius: 8px;
 overflow: hidden;
 border: 1px solid #00000021;
}

.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text {
 padding: 2.5em 2em 1em;
}

.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p {
 padding: 0 0 1em;
 font-size: 1.4rem;
 line-height: 1.6em;
 @media screen and ( max-width: 834px ) {
  font-size: 1.2rem;
  line-height: 1.4em;
 }
}

.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text > *:first-of-type {
 margin-top: 0;
}
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text > *:last-of-type {
 margin-bottom: 0;
}

.ifw_wrap .ifw_message_wrap .ifw_message .ifw_image {
 width: 100%;
 height: auto;
}

.ifw_wrap .ifw_message_wrap .ifw_message .ifw_image img {
 width: 100%;
 height: auto;
}

.ifw_wrap .ifw_message_wrap .ifw_processing {
 min-width: 200px;
}

.ifw_wrap .ifw_message_wrap .ifw_processing:after {
 display: inline-block;
 overflow: hidden;
 vertical-align: bottom;
 animation: ellipsis steps(4, end) 1300ms infinite;
 content: "...";
 /* 全部表示させた時の文字 */
 width: 0px;
 height: 1rem;
 line-height: 1rem;
 vertical-align: text-bottom;
}

.ifw_wrap .ifw_message_wrap .ifw_processing.ifw_error:after {
 display: none;
}

.ifw_wrap .ifw_message_wrap .ifw_comment {
 max-width: 90%;
 margin: 0 auto;
}

.ifw_wrap .ifw_message_wrap .ifw_comment p.ifw_memo {
 margin: 0 auto 2em;
 font-size: 1.4rem;
 line-height: 1.4em;
 @media screen and ( max-width: 834px ) {
  font-size: 1.2rem;
  line-height: 1.3em;
 }
}

.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap {
 padding-bottom: 1em;
 position: relative;
}

.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap {
 width: 100%;
 margin-top: .5em;
 padding: .5em 0 2em;
}

.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap .ifw_sending,
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap .ifw_sent {
 margin: 0 auto;
 width: -moz-fit-content;
 width: fit-content;
 text-align: center;
 position: absolute;
 right: 0;
 left: 0;
 display: none;
 visibility: hidden;
 pointer-events: none;
 opacity: 0;
}

.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap .ifw_sending.visible,
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap .ifw_sent.visible {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
}

.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap .ifw_sending:after {
 display: inline-block;
 overflow: hidden;
 vertical-align: bottom;
 animation: ellipsis steps(4, end) 1300ms infinite;
 content: "...";
 /* 全部表示させた時の文字 */
 width: 0px;
}

.ifw_wrap .ifw_message_wrap .ifw_comment textarea.ifw_textarea {
 padding: .5em;
 width: 90%;
 height: 7em;
}

.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send {
 margin: 0 auto;
 padding: .5em 0;
 width: 200px;
 border: none;
 box-shadow: none;
 background: #F0F0F0;
 word-break: keep-all;
 display: block;
 cursor: pointer;
}

.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send:hover {
 color: #333;
}

@keyframes ellipsis {
  to {
    width: 1.2em;
    /* 全部表示させた時の幅 */
  }
}