@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
.ifw_wrap {
position: relative;
width: -moz-fit-content;
width: fit-content;
margin: 40px auto;
}
.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 {
display: block;
background: #ffffff;
color: #333333;
font-family: inherit;
font-weight: 500;
border: 1.5px solid #a7a7a7;
line-height: 1em;
padding: 8px 20px;
font-size: 12px;
cursor: pointer;
border-radius: 30px;
transition: 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ifw_wrap button.ifw_btn:hover,
.ifw_wrap div.ifw_btn:hover {
background: #fff0f2;
}
.ifw_wrap button.ifw_btn:active,
.ifw_wrap div.ifw_btn:active {
transform: scale(0.92);
}
.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 2px;
color: #ff5e78;
}
.ifw_wrap button.ifw_btn span.ifw_count,
.ifw_wrap div.ifw_btn span.ifw_count {
margin: 0 2px;
font-weight: 600;
font-size: 14px;
}
.ifw_wrap .material-symbols-rounded {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" -25, "opsz" 24;
}
.ifw_wrap .ifw_message_wrap {
position: absolute;
filter: drop-shadow(0px 3px 6px #00000030);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
transition: 0.5s;
min-width: 180px;
font-size: 90%;
}
@media (min-width: 1030px) {
.ifw_wrap .ifw_message_wrap {
font-size: 100%;
}
}
.ifw_wrap .ifw_message_wrap.ifw_thanks {
width: 95vw;
}
.ifw_wrap .ifw_message_wrap.ifw_thanks .ifw_message {
max-width: 100%;
width: 100%;
}
@media (min-width: 481px) {
.ifw_wrap .ifw_message_wrap.ifw_thanks {
width: 500px;
}
}
.ifw_wrap .ifw_message_wrap .ifw_close {
width: -moz-fit-content;
width: fit-content;
position: absolute;
top: 5px;
right: 5px;
z-index: 1;
font-size: 17px;
font-weight: 900;
line-height: 1;
transition: 0.3s;
cursor: pointer;
background: white;
height: 23px;
width: 23px;
border-radius: 30px;
text-align: center;
line-height: 23px;
}
.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: 25px 35px 15px;
}
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text p {
line-height: 1.8em;
margin: 0 auto 1em;
font-size: 100%;
}
.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;
}
@media (min-width: 481px) {
.ifw_wrap .ifw_message_wrap .ifw_message .ifw_text {
padding: 25px 40px;
}
}
.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: 180px;
}
.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: 460px;
margin: 0 auto;
padding: 20px 30px 30px;
}
.ifw_wrap .ifw_message_wrap .ifw_comment p.ifw_memo {
font-size: 85%;
margin: 0 auto 20px;
line-height: 1.4em;
}
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap {
padding-bottom: 20px;
position: relative;
}
.ifw_wrap .ifw_message_wrap .ifw_comment .ifw_send_wrap .ifw_sending_wrap {
width: 100%;
margin-top: 5px;
}
.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 {
font-size: 12px;
margin: 5px 0 8px 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
display: none;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
text-align: center;
transition: 0.3s;
right: 0;
left: 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 {
width: 100%;
height: 100px;
padding: 7px;
line-height: 1.7em;
font-size: 13px;
}
.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send {
border: none;
box-shadow: none;
background: #333333;
color: #fff;
padding: 10px 20px;
cursor: pointer;
transition: 0.3s;
word-break: keep-all;
width: 200px;
display: block;
margin: 10px auto 0;
}
.ifw_wrap .ifw_message_wrap .ifw_comment button.ifw_send:hover {
background: #6e6e6e;
}
@keyframes ellipsis {
to {
width: 1.2em; }
}