.content .box {
    box-shadow: 0 0 3px #ccc;
    background: #fffefe;
    padding: 10px;
    overflow: hidden;}
.cts-survey-title-h2 {
    font-size: 16px;
    color: #263456;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.cts-survey-title-h2 a {
    font-size: 11px;
    color: #263456;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 20px 0 0;}
.cts-survey-title-h2 a:after { content:">";
    position: relative;
    left: 10px;}
.cts-survey-inner.column4 {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 10px;}
.cts-survey-inner-detail {
    box-shadow: 0 0 3px #ccc;
    background: #fffefe;
    padding: min(1.4vw, 14px);
    margin-top: 20px;
    overflow: hidden;
    text-align: center;
    display: grid;
    width: calc((100% - 30px) / 3);
    border-radius: 7px;}
.cts-survey-inner-detail-title {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: #263456;}
.cts-survey-inner-detail-text {
    font-size: 15px;
    color: #3ea562;
    display: flex;
    gap: 5px;
    align-items: baseline;
    justify-content: center;
    height: 40px;}
.cts-survey-inner-detail-text span {
    font-size: 30px;
    font-weight: bold;}
.cts-survey-inner-detail-image {
    max-width: 40px;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    padding: 10px;
    display: flex;}
.cts-survey-inner-detail-image img {
    width: auto;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.cts-survey-inner-detail.cts-survey-inner-detail-image-check img { filter: brightness(0) saturate(100%) invert(22%) sepia(93%) saturate(7449%) hue-rotate(2deg) brightness(93%) contrast(120%);}
.cts-survey-inner-detail.cts-survey-inner-detail-image-rank .cts-survey-inner-detail-text { align-items: center;}
.cts-survey-inner-detail a {
    font-size: 11px;
    display: block;
    line-height: 1;
    font-weight: 500;
    color: #3ea562;
    text-align: center;
    margin-top: auto;
    padding: 6px;
    border-radius: 50px;
    position: relative;
    border: solid 1px;}
.survey-rank {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0 auto 10px;}
.star {
    font-size: min(2.0vw,24px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #b8c2d6;
    text-stroke: 1.5px #b8c2d6;}
.star.active {
    color: #f6b400;
    -webkit-text-stroke: 1.5px #f6b400;
    text-stroke: 1.5px #f6b400;}
.inner-box-title {
    margin: -14px;
    background: #f4f5f5;
    padding: 5px 0 5px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    text-align: left;
    font-weight: 600;}
.inner-box-title h2 {
    font-size: 12px;
    padding: 7px;}
.cts-info-list li {
    padding: 5px;
    font-size: 13px;
    color: #263456;}
.cts-info-list li p a {
    display: flex;
    gap: 14px;
    color: #263456;}
.inner .link a {
    font-size: 11px;
    display: block;
    line-height: 1;
    font-weight: 500;
    color: #3ea562;
    text-align: center;
    margin-top: 20px;
    margin-left: auto;
    border-radius: 50px;
    position: relative;
    border: solid 1px;
    width: max-content;
    padding: 6px 30px;}
.inner .link a:after {
    content: "";
    background-image: url(../img/prev.svg);
    background-size: 100%;
    width: 8px;
    display: block;
    position: absolute;
    aspect-ratio: 47 / 75;
    z-index: 4;
    top: 50%;
    right: 7px;
    transform: translate(-50%, -50%);
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.cts-survey-log .cts-survey-title-h2 {
    margin: -14px;
    background: #f4f5f5;
    padding: 10px 14px 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    text-align: left;
    font-weight: 600;
    width: calc(100% - 4px);}
.cts-survey-log-list li,
.cts-survey-log-list li a {
    display: flex;
    gap: 14px;
    padding: 2px 3px 2px 3px;
    align-items: center;
    width: 100%;
    color: #263456;}
.cts-survey-log-list li { border-bottom: solid 1px #f4f5f5;}
.cts-survey-log-list li:first-child {
    background: #f4f5f5;
    padding: 5px;}
.cts-survey-log-list li:first-child span { font-weight: 500;}
.cts-survey-log-list li span {
    width: 15%;
    font-size: 15px;}
.cts-survey-log-list li a span { font-size: 14px;}
.cts-survey-log-list li .dif { width: 55%;}
.cts-survey-log-list li .point { text-align: center;}
.cts-survey-log-list li .stats { text-align: center;}


.point-change {}
.point-change .steps {}
.point-change .steps ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;}
.point-change .steps ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    position: relative;}
.point-change .steps ul li img,
.point-change .steps ul li span,
.point-change .steps ul li:before {
    position: relative;
    z-index: 1;}
.point-change .steps ul li span {
    background: #fff;
    padding: 0 8px;}
.point-change .steps ul li:before {
    content:"";
    margin-right: 10px;
    background: #eee;
    border-radius: 50%;
    width: 0px;
    height: 0px;
    padding: 20px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;}
.point-change .steps ul li:after {
    content: "";
    height: 0.5px;
    background: #eee;
    position: absolute;
    top: 50%;
    left: calc(50% + 28px);
    right: calc(-50% + 60px);
    transform: translateY(-50%);
    z-index: 0;}
.point-change .steps ul li:last-child:after { display: none;}
.point-change .steps ul li:nth-child(1) img {
    width: 40px;
    height: 40px;
    margin-right: 10px;}
.point-change .steps ul li:nth-child(1):before { display:none;}
.point-change .steps ul li:nth-child(2):before { content:"2";}
.point-change .steps ul li:nth-child(3):before { content:"3";}
.point-change .steps ul li:nth-child(4):before { content:"4";}
.point-change .steps ul li.active:before {
    background-color: #3ea562;
    font-weight: bold;
    color: #fff;}

.point-change .agency {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px;}
.point-change .agency .img {
    max-width: 180px;
    font-size: 0;}
.point-change .agency .txt {
    width: 100%;
    max-width: 400px;
    font-size: 13px;
    margin-left: 40px;}
.point-change-inner {
    margin: 0 auto;
    width: 100%;
    padding: 0%;}
.point-change-inner h2 {
    font-size: 16px;
    color: #263456;}
.point-change-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;}
.point-change-detail .left { width: 70%;}
.point-change-detail .left h3 {
    font-size: 13px;
    color: #263456;}
.point-change-detail .left .input {
    padding: 0 20px 0 0;
    display: flex;
    justify-content: space-between;
    margin: 21px auto;}
.point-change-detail .left .input label {
    width: 77%;
    display: block;
    border: solid 2px #ccc;
    border-radius: 5px;}
.point-change-detail .left .input label input {
    padding: 14px;
    width: 80%;
    border: none;
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    color: #263456;}
.point-change-detail .left .input label input:active,
.point-change-detail .left .input label input:focus {
    border: none;
    outline: 0;}
.point-change-detail .left .input button {
    border: solid 2px #ccc;
    background: none;
    border-radius: 5px;
    font-size: min(1.3vw, 13px);
    font-weight: bold;
    color: #263456;
    padding: 0;
    width: 20%;}
.point-change-detail .left .tips {
    font-size: 13px;
    color: #263456;}
.point-change-detail .right {
    width: 26%;
    box-shadow: 0 0 3px #ccc;
    background: #fffefe;
    padding: min(1.4vw, 14px);
    overflow: hidden;
    background-color: #f4f8f6;}
.point-change-detail .right h3 {
    color: #263456;
    font-size: 13px;
    text-align: center;}
.point-change-detail .right .tips {
    display: flex;
    align-items: center;
    gap: 10px;}
.point-change-detail .right .tips img { width: 50px;}
.point-change-detail .right .tips p {
    color: #3ea562;
    font-weight: bold;
    width: calc(100% - 60px);
    text-align: center;}
.point-change-detail .right .tips p span:first-child {
    font-size: 26px;
    margin-right: 5px;}
.point-change-detail .right .tips p span:last-child {
    display: block;
    color: #263456;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    width: max-content;}
.point-change-bulb {
    display: flex;
    box-shadow: 0 0 3px #ccc;
    background: #fffefe;
    overflow: hidden;
    background-color: #f4f8f6;
    margin: 30px auto 0;
    width: 88%;
    padding: 2% 3%;
    align-items: flex-start;}
.point-change-bulb .img {
    background: #fff;
    padding: 7px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: solid 5px #e2ebe7;}
.point-change-bulb .img img {
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.point-change-bulb .txt {
    width: calc(100% - 100px);
    margin-left: 20px;}
.point-change-bulb .txt h4 {
    font-size: 13px;
    color: #3ea562;}
.point-change-bulb .txt ul {
    font-size: 11px;
    margin: 0 0 0 20px;
    line-height: 2;}
.point-change-bulb .txt ul li { list-style: disc;}
.point-change-conf {
    display: flex;
    margin: 30px auto 0;
    width: 94%;
    align-items: flex-start;
    justify-content: space-between;}
.point-change-conf a,
.point-change-conf button {
    width: 46%;
    box-shadow: 0 0 3px #ccc;
    padding: 10px 0;
    text-align: center;
    border-radius: 7px;
    border: none;
    font-weight: bold;
    font-size: 15px;}
.point-change-conf a { color: #3ea562;}
.point-change-conf a:hover {
    background: #3ea562;
    color: #fff;
    opacity: .7;}
.point-change-conf button {
    background: #3ea562;
    color: #fff;}
.point-change-conf button:hover { opacity: .7;}


.point-change-confirm {
    width: 94%;
    margin: 0 auto;}
.point-change-confirm h3 {
    font-size: 16px;
    color: #263456;}
.point-change-confirm .dtl {
    font-size: 13px;
    color: #263456;
    margin: 10px 0;}
.point-change-confirm dl {
    width: 100%;
    border: solid 1px #eee;
    border-radius: 10px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 30% 70%;
    overflow: hidden;}
.point-change-confirm dl dt,
.point-change-confirm dl dd {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-bottom: solid 1px #eee;
    padding: 20px;}
.point-change-confirm dl dt {
    background: #f8faf9;
    font-weight: bold;
    border-right: solid 1px #eee;}
.point-change-confirm dl dt:nth-last-of-type(1),
.point-change-confirm dl dd:nth-last-of-type(1) { border-bottom: none;}
.point-change-confirm dl dd img {
    width: 80%;
    max-width: 180px;}
.point-change-confirm dl dd div {}
.point-change-confirm dl .exchange-afpo div {
    display: flex;
    position: relative;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
    color: #42a261;
    font-weight: bold;}
.point-change-confirm dl .exchange-afpo div:before {
    content: "";
    background-image: url(../img/point_coin.svg);
    width: 30px;
    aspect-ratio: 1 / 1;
    background-size: 100%;
    background-repeat: no-repeat;}
.point-change-confirm dl .exchange-afpo div span:first-child {
    font-size: 28px;
    line-height: 1.1;}
.point-change-confirm dl .exchange-afpo div span:last-child {
    display: block;
    width: calc(100% - 40px);
    font-size: 14px;
    line-height: 1;
    color: #254d45;
    padding-left: 40px;
    text-align: left;}

.confirm-end {}
.confirm-end-box {
    position: relative;}
.confirm-end-box .kami {
    width: 100%;
    height: 200px;
    position: relative;}
.confirm-end-box .kami div {}
.confirm-end-box .kami div:first-child {}
.confirm-end-box .kami div:last-child {}
.confirm-end-box .kami div span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    opacity: .25;
    transform: rotate(45deg) translate(-50%, -50%) scale(.7);
    animation: kamiSparkle 2.4s ease-in-out infinite;}
.confirm-end-box .kami div:first-child span:nth-child(1) {
    top: 50%;
    left: 10%;
    background: #3ea562;
    animation-delay: .1s;}
.confirm-end-box .kami div:first-child span:nth-child(2) {
    top: 50%;
    left: 26%;
    background: #e500f4;
    animation-delay: .75s;}
.confirm-end-box .kami div:first-child span:nth-child(3) {
    top: 30%;
    left: 17.5%;
    background: #f4b400;
    animation-delay: 1.35s;}
.confirm-end-box .kami div:first-child span:nth-child(4) {
    top: 70%;
    left: 17.5%;
    background: #0013f4;
    animation-delay: .45s;}
.confirm-end-box .kami div:first-child span:nth-child(5) {
    top: 30%;
    left: 35%;
    background: #3ea562;
    animation-delay: 1.75s;}
.confirm-end-box .kami div:first-child span:nth-child(6) {
    top: 70%;
    left: 35%;
    background: #a53e3e;
    animation-delay: 1s;}
.confirm-end-box .kami div:last-child span:nth-child(1) {
    top: 50%;
    right: 10%;
    background: #3ea562;
    animation-delay: 1.2s;}
.confirm-end-box .kami div:last-child span:nth-child(2) {
    top: 50%;
    right: 26%;
    background: #e500f4;
    animation-delay: .35s;}
.confirm-end-box .kami div:last-child span:nth-child(3) {
    top: 30%;
    right: 17.5%;
    background: #0013f4;
    animation-delay: 1.55s;}
.confirm-end-box .kami div:last-child span:nth-child(4) {
    top: 70%;
    right: 17.5%;
    background: #f4b400;
    animation-delay: .9s;}
.confirm-end-box .kami div:last-child span:nth-child(5) {
    top: 30%;
    right: 35%;
    background: #a53e3e;
    animation-delay: 2.05s;}
.confirm-end-box .kami div:last-child span:nth-child(6) {
    top: 70%;
    right: 35%;
    background: #3ea562;
    animation-delay: .6s;}
.confirm-end-box .check {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);}
.confirm-end-box .check:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: solid 3px #3ea562;
    transform: scale(.15);
    opacity: 0;
    animation: checkCirclePop .7s cubic-bezier(.2, .9, .2, 1.2) .35s forwards;}
.confirm-end-box .check img {
    position: relative;
    z-index: 1;
    width: 44px;
    opacity: 0;
    transform: scale(.2) rotate(-18deg);
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);
    animation: checkMarkBounce .65s cubic-bezier(.2, 1.35, .35, 1) .85s forwards;}
.confirm-end-box .text {
    position: absolute;
    bottom: 1vw;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, 14px);
    font-size: 20px;
    font-weight: bold;
    color: #42a261;
    animation: endTextFadeUp .6s ease 1.45s forwards;
    width: max-content;}
.point-change-inner .confirm-end .dtl {
    text-align: center;
    font-weight: 500;}
.point-change-inner .confirm-end .tips {
    width: 94%;
    margin: 0 auto;
    font-size: 13px;
    margin: 10px 0 0;}
@keyframes kamiSparkle {
    0%, 100% {
        opacity: .2;
        transform: rotate(45deg) translate(-50%, -50%) scale(.65);}
    18% {
        opacity: 1;
        transform: rotate(135deg) translate(-50%, -50%) scale(1.28);}
    34% {
        opacity: .45;
        transform: rotate(225deg) translate(-50%, -50%) scale(.86);}
}
@keyframes checkCirclePop {
    0% {
        opacity: 0;
        transform: scale(.15);}
    58% {
        opacity: 1;
        transform: scale(1.12);}
    76% { transform: scale(.94);}
    100% {
        opacity: 1;
        transform: scale(1);}
}
@keyframes checkMarkBounce {
    0% {
        opacity: 0;
        transform: scale(.2) rotate(-18deg);}
    62% {
        opacity: 1;
        transform: scale(1.18) rotate(4deg);}
    82% { transform: scale(.92) rotate(0deg);}
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);}
}
@keyframes endTextFadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, 14px);}
    to {
        opacity: 1;
        transform: translate(-50%, 0);}
}
@media (prefers-reduced-motion: reduce) {
    .confirm-end-box .kami div span,
    .confirm-end-box .check:before,
    .confirm-end-box .check img,
    .confirm-end-box .text {
        animation: none;
        opacity: 1;}
    .confirm-end-box .check:before { transform: scale(1);}
    .confirm-end-box .check img { transform: scale(1);}
    .confirm-end-box .text { transform: translate(-50%, 0);}
}































@media screen and (max-width: 1024px) {
	.point-change .agency {
	    display: block;
	    margin: 0;
	    width: 90%;
	    padding: 5%;
	    background: #f4f8f6;}
	.point-change .agency .txt {
	    margin-left: 0;
	    margin-top: 20px;}
	.point-change-inner { padding: 3%;}
	.point-change-detail .left { width: 66%;}
	.point-change-detail .right { width: 30%;}
	.point-change-detail .left .input {
	    gap: 3%;
	    padding: 0 10px 0 0;}
	.point-change-detail .left .input label input { width: 70%;}
	.point-change-detail .left .input button { width: 30%;}
	.point-change-detail .right .tips p span:first-child { font-size: 20px;}
}




















@media screen and (max-width: 768px) {
	.cts-survey-inner.column4 { flex-wrap: wrap;}
	.cts-survey-inner-detail { width: calc((100% - (min(2.8vw, 28px) + 40px)) / 2);}
	.inner-box-title h2 {
	    font-size: 12px;
	    padding: 7px;
	    text-align: center;}
	.cts-survey-title-h2 {
	    font-size: 14px;
	    color: #263456;
	    display: block;
	    justify-content: space-between;
	    align-items: center;
	    text-align: center;}
	.cts-survey-title-h2 a {
	    align-items: center;
	    font-size: 11px;
	    display: block;
	    line-height: 1;
	    font-weight: 500;
	    color: #3ea562;
	    text-align: center;
	    padding: 10px 3px;
	    border-radius: 50px;
	    position: relative;
	    border: solid 1px;
	    width: 50%;
	    margin: 14px auto 0;}
	.cts-info-list li {
	    padding: 5px;
	    font-size: 13px;
	    color: #263456;
	    border-bottom: solid 1px #f4f5f5;}
	.cts-info-list li p a {
	    display: block;
	    font-size: 12px;
	  width: 100%;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;}
	.cts-info-list li p a span {
	    display: block;
	    font-size: 10px;}
	.inner .link a {
	    align-items: center;
	    font-size: 11px;
	    display: block;
	    line-height: 1;
	    font-weight: 500;
	    color: #3ea562;
	    text-align: center;
	    padding: 10px 3px;
	    border-radius: 50px;
	    position: relative;
	    border: solid 1px;
	    width: 50%;
	    margin: 14px auto 0;}
	.cts-survey-title-h2 a {
	    width: max-content;
	    padding: 10px 30px;}
	.cts-survey-log .cts-survey-title-h2 { text-align: center;}
	.cts-survey-log-list li,
	.cts-survey-log-list li a {
	    display: flex;
	    gap: 14px;
	    padding: 2px 3px 2px 3px;
	    align-items: center;
	    width: 100%;
	    color: #263456;
	    flex-wrap: wrap;}
	.cts-survey-log-list li span {
	    width: 15%;
	    font-size: 12px;
	    text-align: center;}
	.cts-survey-log-list li .dif { width: 40%;}
	.cts-survey-log-list li span:nth-child { width: 15%;}
	.cts-survey-log-list li a span { font-size: 11px;}
	.cts-survey-inner-detail .star {
	    font-size: min(4.5vw,24px);
	    line-height: 1;
	    color: transparent;
	    -webkit-text-stroke: 1.5px #b8c2d6;
	    text-stroke: 1.5px #b8c2d6;}
	.star.active {
	    color: #f6b400;
	    -webkit-text-stroke: 1.5px #f6b400;
	    text-stroke: 1.5px #f6b400;}

	.point-change-inner {
	    padding: 0;
	    margin-top: 20px;}
	.point-change .agency .img { margin: 0 auto;}
	.point-change-detail { display: block;}
	.point-change-detail .left { width: 100%;}
	.point-change-detail .left .input {
	    gap: 3%;
	    padding: 0;
	    margin: 0 auto;}
	.point-change-detail .left .input label { width: 67%;}
	.point-change-detail .left .input button {
	    width: 30%;
	    font-size: 13px;}
	.point-change-detail .right {
	    width: 97%;
	    margin: 20px auto 0;}
	.point-change-detail .right .tips {
	    align-items: center;
	    justify-content: center;}
	.point-change-detail .right .tips p { width: max-content;}
	.point-change-bulb {
	    display: flex;
	    box-shadow: 0 0 3px #ccc;
	    background: #fffefe;
	    overflow: hidden;
	    background-color: #f4f8f6;
	    margin: 10px auto 0;
	    width: 94%;
	    padding: 2% 3%;
	    align-items: flex-start;}
	.point-change-conf { width: 100%;}
	.point-change .steps ul li { font-size: 10px;}
	.point-change .steps ul li:nth-child(1) img {
	    margin-right: 5px;
	    width: 20px;
	    height: 20px;}
	.point-change .steps ul li:before {
	    margin-right: 5px;
	    padding: 10px;}
	.point-change .steps ul li.active:before {
	    background-color: #3ea562;
	    font-weight: bold;
	    color: #fff;}
	.point-change .steps ul li:after { display: none;}
	.point-change-confirm { width: 100%;}
	.point-change-conf {
	    flex-wrap: wrap;
	    gap: 20px;}
	.point-change-conf a {
	    color: #3ea562;
	    width: 100%;
	    order: 2;}
	.point-change-conf button {
	    background: #3ea562;
	    color: #fff;
	    width: 100%;
	    order: 1;}
	.point-change-confirm dl { grid-template-columns: 35% 65%;}
	.point-change-confirm dl dt { font-size: 12px;}
	.point-change-confirm dl dt, .point-change-confirm dl dd {
	    display: flex;
	    align-items: center;
	    box-sizing: border-box;
	    border-bottom: solid 1px #eee;
	    padding: 5vw;
	    font-size: 12px;}
}

.survey-answer-page {
    color: #263456;
    background: #fff;}
.survey-answer-page main {
    max-width: 1370px;
    margin: 0 auto;
    align-items: flex-start;
    gap: 28px;
    box-sizing: border-box;
    padding: 0 min(2vw, 28px);}
.survey-hero {
    max-width: 1440px;
    height: 250px;
    margin: 0 auto 28px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 54px min(4vw, 48px);
    display: flex;
    align-items: center;}
.survey-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.58) 64%, rgba(255,255,255,0) 100%);}
.survey-hero-text {
    position: relative;
    z-index: 2;}
.survey-hero h1 {
    font-size: 34px;
    line-height: 1.35;
    margin: 0 0 22px;
    letter-spacing: 0;
    color: #263456;}
.survey-hero p {
    font-size: 15px;
    line-height: 1.9;
    margin: 0;}
.survey-hero-image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 55%;
    height: 100%;}
.survey-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;}
.survey-side {
    width: 260px;
    flex: 0 0 260px;
    max-width: 260px;
    margin: 0;}
.survey-side-card {
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(38,52,86,.04);}
.survey-side-card h2 {
    font-size: 15px;
    line-height: 1.5;
    padding: 22px 26px;
    margin: 0;
    border-bottom: 1px solid #e5eaf1;}
.survey-point-card {
    padding: 24px 26px 28px;}
.survey-point-card h2 {
    padding: 0;
    border-bottom: 0;
    margin-bottom: 20px;}
.survey-point {
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
    padding-left: 56px;
    color: #31ad63;
    font-weight: 700;}
.survey-point:before {
    content: "P";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #f8b400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #f8b400;}
.survey-point span {
    font-size: 34px;
    line-height: 1;}
.survey-point-card p {
    text-align: center;
    margin: 10px 0 0;
    font-size: 14px;}
.survey-info-card dl {
    padding: 2px 26px 20px;
    margin: 0;}
.survey-info-card dt {
    font-size: 13px;
    font-weight: 700;
    margin-top: 18px;}
.survey-info-card dd {
    font-size: 14px;
    margin: 8px 0 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5eaf1;}
.survey-info-card dd:last-child {
    border-bottom: 0;
    padding-bottom: 0;}
.survey-hint-card ul {
    padding: 18px 24px 22px;
    margin: 0;}
.survey-hint-card li {
    position: relative;
    padding-left: 25px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;}
.survey-hint-card li:last-child {
    margin-bottom: 0;}
.survey-hint-card li:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    top: .45em;
    border-radius: 50%;
    background: #31ad63;}
.survey-hint-card li:after {
    content: "";
    width: 5px;
    height: 3px;
    position: absolute;
    left: 3px;
    top: calc(.45em + 3px);
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);}
.survey-content {
    width: calc(100% - 536px);
    margin: 0 0 24px;
    padding: 0;}
.survey-answer-page .right-column {
    width: 220px;
    flex: 0 0 220px;
    margin: 0;}
.survey-form {
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(38,52,86,.04);}
.survey-progress {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 28px;
    padding: 32px 36px;
    border-bottom: 1px solid #e5eaf1;}
.survey-progress h2 {
    font-size: 16px;
    margin: 0;}
.survey-progress-bar {
    height: 12px;
    background: #f0f3f7;
    border-radius: 999px;
    overflow: hidden;}
.survey-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #35b16b, #2fac64);}
.survey-progress p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;}
.survey-progress p span {
    font-size: 20px;
    color: #31ad63;}
.survey-question-box {
    padding: 24px 36px 34px;}
.survey-question {
    margin: 0 0 36px;}
.survey-question h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 20px;
    letter-spacing: 0;}
.survey-question h3 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #31ad63;
    color: #fff;
    font-size: 15px;
    font-weight: 700;}
.survey-question h3 em {
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    color: #31ad63;
    border: 1px solid #31ad63;
    border-radius: 4px;
    padding: 4px 5px;
    white-space: nowrap;}
.survey-question h3 em.optional {
    color: #6e7788;
    border-color: #b8c2d6;}
.survey-choice-grid,
.survey-check-grid {
    display: grid;
    gap: 12px;}
.survey-choice-grid.column4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));}
.survey-choice-grid.column6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));}
.survey-choice-grid label,
.survey-check-grid label {
    min-height: 56px;
    box-sizing: border-box;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;}
.survey-choice-grid label:hover,
.survey-check-grid label:hover {
    border-color: #31ad63;
    background: #fbfffd;}
.survey-choice-grid input,
.survey-check-grid input,
.survey-table input {
    width: 18px;
    height: 18px;
    accent-color: #31ad63;
    flex: 0 0 auto;}
.survey-select select {
    width: 100%;
    height: 58px;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    background: #fff;
    color: #263456;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 14px;}
.survey-table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe5ee;
    border-radius: 6px;}
.survey-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 13px;}
.survey-table th,
.survey-table td {
    border-right: 1px solid #e5eaf1;
    border-bottom: 1px solid #e5eaf1;
    padding: 11px 10px;
    text-align: center;
    box-sizing: border-box;}
.survey-table th:last-child,
.survey-table td:last-child {
    border-right: 0;}
.survey-table tbody tr:last-child th,
.survey-table tbody tr:last-child td {
    border-bottom: 0;}
.survey-table thead th {
    background: #f7f9fb;
    font-weight: 700;}
.survey-table tbody th {
    width: 22%;
    text-align: left;
    font-weight: 500;}
.survey-check-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));}
.survey-check-grid label {
    min-height: 48px;
    font-size: 13px;}
.survey-free-text {
    margin-top: 14px;}
.survey-free-text textarea {
    width: 100%;
    min-height: 42px;
    resize: vertical;
    border: 1px solid #dfe5ee;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;}
.survey-free-text input[type="text"],
.survey-free-text input[type="password"],
.survey-free-text input[type="email"] {
    width: 100%;
    min-height: 42px;
    resize: vertical;
    border: 1px solid #dfe5ee;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;}
.survey-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.5fr;
    gap: 34px;
    align-items: center;
    margin-top: 42px;}
.survey-actions a,
.survey-actions button {
    min-height: 52px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;}
.survey-prev {
    color: #6e7788;
    border: 1px solid #dfe5ee;
    background: #f9fafc;}
.survey-save {
    color: #31ad63;
    border: 1px solid #31ad63;
    background: #fff;}
.survey-next {
    color: #fff;
    border: 0;
    background: linear-gradient(90deg, #31ad63, #24a85c);}
.survey-note {
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
    color: #6e7788;
    margin: 18px 0 0;}
.survey-contact {
    max-width: 1120px;
    margin: 0 auto 48px;
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fbfdfc;
    box-sizing: border-box;
    padding: 30px 42px;
    display: grid;
    grid-template-columns: 70px 1fr max-content;
    align-items: center;
    gap: 24px;}
.survey-contact-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eef8f3;
    display: flex;
    align-items: center;
    justify-content: center;}
.survey-contact-icon img {
    width: 34px;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.survey-contact h2 {
    font-size: 18px;
    margin: 0 0 8px;
    color: #31ad63;}
.survey-contact p {
    margin: 0;
    font-size: 14px;}
.survey-contact a {
    color: #31ad63;
    border: 1px solid #31ad63;
    border-radius: 999px;
    padding: 13px 44px;
    font-size: 14px;
    font-weight: 700;}

.point-get-ent {
    box-shadow: 0 0 3px #ccc;}
.point-get-ent .point-get {}
.point-get-ent .point-get .img {
    width: 30%;
    max-width: 120px;}
.point-get-ent .point-get .img img {}
.point-get-ent .point-get .txt {}
.point-present {}
.point-present .img {
    width: 30%;
    max-width: 150px;}
.point-present .txt {}
.point-present .txt a {
    position: relative;}
.point-present .btn a:after {
    content: "";
    background-image: url(../img/prev.svg);
    background-size: 100%;
    width: 8px;
    display: block;
    position: absolute;
    aspect-ratio: 47 / 75;
    z-index: 4;
    top: 50%;
    right: 14px;
    transform: translate(-50%, -50%);
    filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(0%) hue-rotate(243deg) brightness(104%) contrast(105%);
}

.survey-end-page {
    color: #263456;
    background: #fff;}
.survey-end-page main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    max-width: 1370px;
    margin: 36px auto 0;
    padding: 0 min(2vw, 28px);
    box-sizing: border-box;}
.survey-end-content {
    width: calc(100% - 536px);
    display: grid;
    gap: 34px;}
.survey-end-page .left-column {
    width: 260px;
    max-width: 260px;
    flex: 0 0 260px;
    margin: 0;}
.survey-end-page .right-column {
    width: 220px;
    flex: 0 0 220px;
    margin: 0;}
.survey-complete-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding: 64px 40px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(38,52,86,.035);}
.complete-kami {
    position: absolute;
    inset: 58px 80px auto;
    height: 120px;
    pointer-events: none;}
.complete-kami span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: .65;
    animation: kamiSparkle 2.6s ease-in-out infinite;}
.complete-kami span:nth-child(1) { left: 7%; top: 48%; background: #49c88a; animation-delay: .1s;}
.complete-kami span:nth-child(2) { left: 14%; top: 72%; background: #f6c457; animation-delay: .5s;}
.complete-kami span:nth-child(3) { left: 22%; top: 36%; background: #f6c457; animation-delay: .9s;}
.complete-kami span:nth-child(4) { left: 32%; top: 16%; background: #9ed8b5; animation-delay: 1.2s;}
.complete-kami span:nth-child(5) { left: 37%; top: 48%; background: #9ed8b5; animation-delay: .25s;}
.complete-kami span:nth-child(6) { left: 45%; top: 28%; background: #b7d4bd; animation-delay: 1.6s;}
.complete-kami span:nth-child(7) { right: 45%; top: 22%; background: #8bd4b5; animation-delay: .7s;}
.complete-kami span:nth-child(8) { right: 35%; top: 34%; background: #b7d4bd; animation-delay: 1.4s;}
.complete-kami span:nth-child(9) { right: 27%; top: 20%; background: #9ed8b5; animation-delay: .35s;}
.complete-kami span:nth-child(10) { right: 20%; top: 58%; background: #49c88a; animation-delay: 1s;}
.complete-kami span:nth-child(11) { right: 10%; top: 38%; background: #d2bd7a; animation-delay: 1.8s;}
.complete-kami span:nth-child(12) { right: 5%; top: 78%; background: #f6c457; animation-delay: .6s;}
.complete-check {
    width: 110px;
    height: 110px;
    border: 4px solid #31ad63;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;}
.complete-check img {
    width: 58px;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.survey-complete-card h1 {
    margin: 0 0 18px;
    color: #31ad63;
    font-size: 32px;
    line-height: 1.35;
    letter-spacing: 0;}
.survey-complete-card > p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 700;}
.complete-point {
    width: min(540px, 100%);
    min-height: 130px;
    margin: 34px auto 22px;
    border-radius: 8px;
    background: #f4f8f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    box-sizing: border-box;
    padding: 22px 32px;}
.complete-point-icon {
    width: 120px;}
.complete-point-icon img {
filter: brightness(0) saturate(100%) invert(62%) sepia(73%) saturate(725%) hue-rotate(5deg) brightness(101%) contrast(103%);}
.complete-point h2 {
    margin: 0 0 10px;
    text-align: left;
    font-size: 18px;
    line-height: 1.5;}
.complete-point p {
    margin: 0;
    text-align: left;
    color: #31ad63;
    font-size: 28px;
    font-weight: 700;}
.complete-point p span {
    font-size: 54px;
    line-height: 1;}
.complete-note {
    color: #263456;
    font-size: 15px;
    font-weight: 700;}
.point-exchange-banner {
    border-radius: 8px;
    background: #f4f8f6;
    box-sizing: border-box;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 110px 1fr max-content;
    align-items: center;
    gap: 28px;}
.point-exchange-icon img {
    width: 94px;}
.point-exchange-text h2 {
    margin: 0 0 12px;
    color: #31ad63;
    font-size: 20px;
    line-height: 1.5;}
.point-exchange-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 700;}
.point-exchange-banner a {
    min-width: 230px;
    min-height: 52px;
    border-radius: 999px;
    background: linear-gradient(90deg, #31ad63, #24a85c);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;}
.point-exchange-banner a:after,
.recommend-survey-card a:after {
    content: "";
    background-image: url(../img/prev.svg);
    background-size: 100%;
    width: 8px;
    aspect-ratio: 47 / 75;
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(2deg) brightness(105%) contrast(102%);}
.recommend-survey h2 {
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 0;
    position: relative;}
.recommend-survey h2:after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    background: #31ad63;
    margin: 8px auto 0;}
.recommend-survey-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;}
.recommend-survey-card {
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fff;
    padding: 28px 24px 22px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 20px;
    align-items: center;
    box-shadow: 0 8px 24px rgba(38,52,86,.035);}
.recommend-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(135deg, #54c27f, #2da85f);
    display: flex;
    align-items: center;
    justify-content: center;}
.recommend-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(2deg) brightness(105%) contrast(102%);}
.recommend-body {
    min-width: 0;}
.recommend-time {
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 6px;
    background: #f2f5f8;
    font-size: 12px;
    font-weight: 700;
    color: #6e7788;}
.recommend-body h3 {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;}
.recommend-body p {
    margin: 0;
    color: #31ad63;
    font-size: 18px;
    font-weight: 700;}
.recommend-body p span {
    font-size: 34px;
    line-height: 1;}
.recommend-survey-card a {
    grid-column: 1 / -1;
    min-height: 52px;
    margin-top: 24px;
    border: 1px solid #31ad63;
    border-radius: 999px;
    color: #31ad63;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;}
.recommend-survey-card a:after {
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.survey-end-page .survey-contact {
    width: 100%;
    max-width: none;
    margin: 0 0 48px;}


@media screen and (max-width: 1280px) {
    .survey-answer-page main {
        flex-wrap: wrap;}
    .survey-side {
        order: 1;}
    .survey-content {
        order: 2;
        width: calc(100% - 288px);}
    .survey-answer-page .right-column {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: stretch;}
    .survey-answer-page .right-column .box {
        width: calc((100% - 20px) / 2);
        margin: 0;
        box-sizing: border-box;
        display: grid;}
    .survey-end-page main {
        flex-wrap: wrap;}
    .survey-end-page .left-column {
        order: 1;}
    .survey-end-content {
        order: 2;
        width: calc(100% - 288px);}
    .survey-end-page .right-column {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: stretch;}
    .survey-end-page .right-column .box {
        width: calc((100% - 20px) / 2);
        margin: 0;
        box-sizing: border-box;
        display: grid;}
}

@media screen and (max-width: 1024px) {
    .survey-answer-page main {
        gap: 22px;}
    .survey-side {
        width: 220px;
        max-width: 220px;
        flex-basis: 220px;}
    .survey-content {
        width: calc(100% - 242px);}
    .survey-choice-grid.column4,
    .survey-choice-grid.column6,
    .survey-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));}
    .survey-progress {
        grid-template-columns: 1fr;
        gap: 12px;}
    .survey-actions {
        gap: 16px;}
}

@media screen and (max-width: 768px) {
    .survey-hero {
        height: auto;
        min-height: 210px;
        padding: 32px min(5vw, 28px);}
    .survey-hero h1 {
        font-size: 26px;}
    .survey-hero p {
        font-size: 13px;}
    .survey-answer-page main {
        display: block;
        padding: 0 min(4vw, 18px);}
    .survey-side {
        width: auto;
        max-width: none;
        margin-bottom: 20px;}
    .survey-content {
        width: 100%;}
    .survey-question-box {
        padding: 22px 18px 28px;}
    .survey-question h3 {
        align-items: flex-start;
        gap: 10px;
        font-size: 15px;}
    .survey-choice-grid.column4,
    .survey-choice-grid.column6,
    .survey-check-grid {
        grid-template-columns: 1fr;}
    .survey-actions {
        grid-template-columns: 1fr;
        gap: 12px;}
    .survey-next {
        order: 1;}
    .survey-save {
        order: 2;}
    .survey-prev {
        order: 3;}
    .survey-contact {
        width: calc(100% - min(8vw, 36px));
        grid-template-columns: 1fr;
        text-align: center;
        padding: 26px 20px;}
    .survey-contact-icon {
        margin: 0 auto;}
    .survey-contact a {
        width: 100%;
        box-sizing: border-box;
        padding: 13px 20px;}
}

@media screen and (max-width: 1024px) {
    .survey-end-page main {
        max-width: 920px;}
    .survey-end-page .left-column {
        width: 220px;
        max-width: 220px;
        flex-basis: 220px;}
    .survey-end-content {
        width: calc(100% - 242px);}
    .point-exchange-banner {
        grid-template-columns: 90px 1fr;
        gap: 22px;}
    .point-exchange-banner a {
        grid-column: 1 / -1;
        width: min(320px, 100%);
        margin-left: auto;}
    .recommend-survey-list {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;}
}

@media screen and (max-width: 768px) {
    .survey-end-page main {
        margin-top: 22px;
        display: block;
        padding: 0 min(4vw, 18px);}
    .survey-end-page .left-column {
        width: auto;
        max-width: none;
        margin-bottom: 20px;}
    .survey-end-content {
        width: 100%;}
    .survey-complete-card {
        min-height: auto;
        padding: 44px 20px 30px;}
    .complete-kami {
        inset: 38px 16px auto;
        height: 90px;}
    .complete-check {
        width: 86px;
        height: 86px;
        margin-bottom: 24px;}
    .complete-check img {
        width: 44px;}
    .survey-complete-card h1 {
        font-size: 24px;}
    .survey-complete-card > p {
        font-size: 14px;}
    .complete-point {
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 18px;
        padding: 20px;}
    .complete-point-icon {
        width: 86px;}
    .complete-point h2 {
        font-size: 15px;}
    .complete-point p span {
        font-size: 42px;}
    .point-exchange-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 20px;}
    .point-exchange-icon img {
        width: 80px;}
    .point-exchange-banner a {
        width: 100%;
        margin: 0;}
    .recommend-survey h2 {
        font-size: 21px;}
    .recommend-survey-card {
        grid-template-columns: 72px 1fr;
        padding: 22px 18px;}
    .recommend-icon {
        width: 66px;
        height: 66px;}
    .recommend-icon img {
        width: 36px;
        height: 36px;}
    .recommend-time {
        margin-left: 0;}
    .recommend-body h3 {
        font-size: 14px;}
    .survey-end-page .survey-contact {
        margin-bottom: 36px;}
}

.exchange-select {
    background: #fff;}
.exchange-select h2 {
    margin: 0 0 26px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #263456;}
.exchange-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;}
.exchange-filter button {
    min-height: 42px;
    border: 1px solid #e4e8ef;
    border-radius: 999px;
    background: #f5f7f9;
    color: #263456;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;}
.exchange-filter button:hover,
.exchange-filter button.active {
    border-color: #31ad63;
    background: linear-gradient(90deg, #31ad63, #25aa5e);
    color: #fff;}
.exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;}
.exchange-card {
    min-height: 330px;
    border: 1px solid #e1e7ef;
    border-radius: 7px;
    background: #fff;
    box-sizing: border-box;
    padding: 28px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 6px 18px rgba(38,52,86,.025);}
.exchange-card[hidden] {
    display: none;}
.exchange-card h3 {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    color: #263456;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;}
.exchange-logo {
    height: 92px;
    width: 100%;
    margin: 12px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 700;}
.exchange-min {
    margin: auto 0 5px;
    font-size: 11px;
    color: #6e7788;}
.exchange-point {
    margin: 0 0 18px;
    color: #31ad63;
    font-size: 13px;
    font-weight: 700;}
.exchange-point span {
    font-size: 18px;}
.exchange-card > a {
    width: 100%;
    min-height: 38px;
    border: 1px solid #31ad63;
    border-radius: 999px;
    box-sizing: border-box;
    color: #31ad63;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;}
.exchange-card > a:after,
.exchange-more-links a:after {
    content: "";
    width: 7px;
    aspect-ratio: 47 / 75;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: url(../img/prev.svg) center / contain no-repeat;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.brand-amazon span {
    color: #050505;
    font-family: Arial, sans-serif;
    font-size: 72px;
    line-height: 1;
    position: relative;}
.brand-amazon span:after {
    content: "";
    width: 54px;
    height: 12px;
    position: absolute;
    left: -3px;
    bottom: -5px;
    border-bottom: 4px solid #f6a500;
    border-radius: 50%;}
.brand-google span {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 50px solid #35a853;
    position: relative;
    transform: translateX(8px);}
.brand-google span:before {
    content: "";
    position: absolute;
    left: -46px;
    top: -23px;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 38px solid #4285f4;
    transform: rotate(120deg);}
.brand-google span:after {
    content: "";
    position: absolute;
    left: -46px;
    top: -23px;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 38px solid #fbbc04;
    transform: rotate(240deg);}
.brand-appstore span {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: linear-gradient(160deg, #1dc1f3, #2779e8);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;}
.brand-paypay,
.brand-dpoint,
.brand-line,
.brand-pex {
    gap: 8px;}
.brand-paypay span {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: #f2193e;
    color: #fff;
    font-size: 38px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;}
.brand-paypay small {
    position: absolute;
    bottom: 2px;
    font-size: 15px;}
.brand-dpoint {
    flex-direction: column;
    gap: 0;
    color: #c9153b;}
.brand-dpoint span {
    font-family: Arial, sans-serif;
    font-size: 70px;
    line-height: .8;}
.brand-dpoint small {
    color: #222;
    font-size: 10px;}
.brand-ponta span {
    color: #f28a00;
    font-size: 30px;
    font-weight: 800;
    text-shadow: 0 1px 0 #fff, 0 0 1px #5c3214;}
.brand-line {
    color: #13a538;}
.brand-line span {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #13a538;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;}
.brand-line strong {
    font-size: 19px;
    line-height: 1.05;
    text-align: left;}
.brand-pex span {
    width: 46px;
    height: 46px;
    border: 14px solid #a9cc00;
    border-right-color: #e6dd00;
    border-radius: 50%;
    box-sizing: border-box;}
.brand-pex strong {
    color: #111;
    font-family: Georgia, serif;
    font-size: 34px;}
.brand-bank span {
    color: #31ad63;
    font-size: 72px;
    line-height: 1;
    transform: rotate(180deg);}
.exchange-more {
    margin-top: 28px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #f8fbf9;
    box-sizing: border-box;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 84px 1fr max-content;
    align-items: center;
    gap: 24px;}
.exchange-more-icon img {
    width: 72px;}
.exchange-more h2 {
    margin: 0 0 8px;
    color: #31ad63;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;}
.exchange-more p {
    margin: 0;
    font-size: 12px;}
.exchange-more-links {
    display: flex;
    gap: 14px;}
.exchange-more-links a {
    min-width: 150px;
    min-height: 38px;
    border: 1px solid #31ad63;
    border-radius: 999px;
    color: #31ad63;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 28px 0 16px;}

@media screen and (max-width: 1024px) {
    .exchange-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));}
    .exchange-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));}
    .exchange-more {
        grid-template-columns: 72px 1fr;}
    .exchange-more-links {
        grid-column: 1 / -1;
        justify-content: flex-end;}
}

@media screen and (max-width: 768px) {
    .exchange-select h2 {
        font-size: 19px;}
    .exchange-filter {
        display: flex;
        overflow-x: auto;
        padding-bottom: 6px;}
    .exchange-filter button {
        flex: 0 0 auto;
        min-width: 110px;
        padding: 0 16px;}
    .exchange-grid {
        grid-template-columns: 1fr;}
    .exchange-card {
        min-height: 300px;}
    .exchange-more {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 18px;}
    .exchange-more-icon {
        margin: 0 auto;}
    .exchange-more-links {
        grid-column: auto;
        display: grid;
        width: 100%;}
    .exchange-more-links a {
        width: 100%;}
}

.digico-entry {
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding: 50px 42px 42px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(38,52,86,.035);}
.digico-entry h2 {
    margin: 0 0 30px;
    color: #31ad63;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0;}
.digico-entry-logo {
    width: min(280px, 70%);
    margin: 0 auto 26px;}
.digico-entry-logo img {
    width: 100%;}
.digico-entry-description {
    margin: 0;
    color: #263456;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 600;}
.digico-entry-button {
    width: min(460px, 80%);
    min-height: 62px;
    margin: 32px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #31ad63, #25aa5e);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;}
.digico-entry-button:after,
.digico-about-text a:after,
.point-page-contact > a:after {
    content: "";
    width: 8px;
    aspect-ratio: 47 / 75;
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    background: url(../img/prev.svg) center / contain no-repeat;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(2deg) brightness(105%) contrast(102%);}
.digico-about {
    border-radius: 8px;
    background: #f4f8f6;
    box-sizing: border-box;
    padding: 28px 34px;
    display: grid;
    grid-template-columns: 74px 1fr;
    align-items: center;
    gap: 24px;}
.digico-about-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;}
.digico-about-icon img {
    width: 34px;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.digico-about-text h2 {
    margin: 0 0 9px;
    color: #31ad63;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;}
.digico-about-text p {
    margin: 0 0 10px;
    color: #263456;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 600;}
.digico-about-text a {
    width: max-content;
    color: #31ad63;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    padding-right: 24px;}
.digico-about-text a:after {
    width: 7px;
    right: 0;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.point-page-contact {
    width: 92%;
    margin: 14px auto 0;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding: 24px 34px;
    display: grid;
    grid-template-columns: 62px 1fr max-content;
    align-items: center;
    gap: 24px;}
.point-page-contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f0f8f4;
    display: flex;
    align-items: center;
    justify-content: center;}
.point-page-contact-icon img {
    width: 30px;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}
.point-page-contact p {
    margin: 0;
    color: #263456;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 600;}
.point-page-contact > a {
    min-width: 210px;
    min-height: 42px;
    border: 1px solid #31ad63;
    border-radius: 999px;
    color: #31ad63;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 38px 0 24px;}
.point-page-contact > a:after {
    width: 7px;
    right: 20px;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);}

@media screen and (max-width: 1024px) {
    .digico-entry {
        padding: 42px 28px 34px;}
    .digico-entry-button {
        width: min(460px, 100%);}
    .point-page-contact {
        width: 100%;
        grid-template-columns: 62px 1fr;}
    .point-page-contact > a {
        grid-column: 1 / -1;
        width: min(320px, 100%);
        margin-left: auto;}
}

@media screen and (max-width: 768px) {
    .digico-entry {
        padding: 32px 18px 26px;}
    .digico-entry h2 {
        margin-bottom: 22px;
        font-size: 19px;}
    .digico-entry-logo {
        width: min(240px, 78%);
        margin-bottom: 20px;}
    .digico-entry-description {
        font-size: 12px;}
    .digico-entry-description br {
        display: none;}
    .digico-entry-button {
        min-height: 54px;
        margin-top: 24px;
        font-size: 17px;}
    .digico-about {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 25px 18px;}
    .digico-about-icon {
        margin: 0 auto;}
    .digico-about-text a {
        margin: 0 auto;}
    .point-page-contact {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 18px;}
    .point-page-contact-icon {
        margin: 0 auto;}
    .point-page-contact > a {
        grid-column: auto;
        width: 100%;
        margin: 0;}
}

.history-guide {
    border-radius: 8px;
    background: #f4f8f6;
    box-sizing: border-box;
    padding: 25px 32px;
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 24px;}
.history-guide-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #31ad63;
    font-size: 52px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;}
.history-guide h2 {
    margin: 0 0 8px;
    color: #31ad63;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;}
.history-guide p {
    margin: 0;
    color: #263456;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 600;}
.point-history {
    margin-top: 12px;}
.history-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;}
.history-filter button {
    min-height: 42px;
    border: 1px solid #e1e7ef;
    border-radius: 999px;
    background: #f5f7f9;
    color: #263456;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;}
.history-filter button:hover,
.history-filter button.active {
    border-color: #31ad63;
    background: linear-gradient(90deg, #31ad63, #25aa5e);
    color: #fff;}
.history-table-wrap {
    border: 1px solid #dfe5ed;
    border-radius: 7px;
    overflow-x: auto;}
.history-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    color: #263456;
    font-size: 12px;}
.history-table th,
.history-table td {
    padding: 12px 14px;
    border-right: 1px solid #edf0f4;
    border-bottom: 1px solid #e1e7ef;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;}
.history-table th:last-child,
.history-table td:last-child {
    border-right: 0;
    text-align: center;}
.history-table tbody tr:last-child td {
    border-bottom: 0;}
.history-table thead th {
    background: #f7f9fb;
    font-weight: 700;
    text-align: center;}
.history-table td:nth-child(1) {
    width: 14%;}
.history-table td:nth-child(2) {
    width: 12%;
    padding-right: 4px;}
.history-table td:nth-child(3) {
    width: 25%;
    padding-left: 4px;}
.history-table td:nth-child(4) {
    width: 14%;}
.history-table td:nth-child(5) {
    width: 14%;}
.history-table td:nth-child(6) {
    width: 15%;}
.history-table tr[hidden] {
    display: none;}
.history-brand {
    width: 74px;
    height: 42px;
    margin: 0 auto;
    transform: scale(.62);
    transform-origin: center;}
.history-brand.brand-amazon span {
    font-size: 62px;}
.history-brand.brand-google span {
    transform: translate(9px, -8px) scale(.75);}
.history-brand.brand-paypay span {
    width: 52px;
    height: 52px;
    font-size: 36px;}
.history-brand.brand-dpoint span {
    font-size: 64px;}
.history-brand.brand-ponta span {
    font-size: 26px;}
.history-brand.brand-line span {
    width: 50px;
    height: 50px;}
.history-brand.brand-pex strong {
    font-size: 30px;}
.history-brand.brand-bank span {
    font-size: 68px;}
.used-point {
    color: #f05a17;
    font-weight: 700;}
.history-status {
    min-width: 76px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px 12px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;}
.history-status.complete {
    background: #e7f6ed;
    color: #31ad63;}
.history-status.pending {
    background: #fff3ce;
    color: #e9a500;}
.history-table td small {
    display: block;
    margin-top: 6px;
    font-size: 10px;}
.history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;}
.history-pagination a {
    min-width: 34px;
    height: 34px;
    border-radius: 5px;
    color: #263456;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 9px;}
.history-pagination a.active {
    background: #31ad63;
    color: #fff;}
.history-pagination a.disabled {
    color: #b7c0ce;
    pointer-events: none;}
.history-more {
    margin-top: 28px;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #f8fbf9;
    box-sizing: border-box;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 84px 1fr max-content;
    align-items: center;
    gap: 24px;}
.history-more h2 {
    margin: 0 0 8px;
    color: #31ad63;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;}
.history-more p {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;}

@media screen and (max-width: 1024px) {
    .history-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));}
    .history-more {
        grid-template-columns: 72px 1fr;}
    .history-more .exchange-more-links {
        grid-column: 1 / -1;
        justify-content: flex-end;}
}

@media screen and (max-width: 768px) {
    .history-guide {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 18px;}
    .history-guide-icon {
        margin: 0 auto;}
    .history-filter {
        display: flex;
        overflow-x: auto;
        padding-bottom: 6px;}
    .history-filter button {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 0 16px;}
    .history-more {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 18px;}
    .history-more .exchange-more-icon {
        margin: 0 auto;}
    .history-more .exchange-more-links {
        grid-column: auto;
        display: grid;
        width: 100%;}
}

/* before-faq2 logged-in shell */
.before-faq2-content {
  box-sizing: border-box;
}

.before-faq2-title {
  margin: 0 0 18px;
  padding: 26px 28px;
  border-radius: 8px;
  border: 1px solid #e1e7eb;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 44%, rgba(255,255,255,.45) 74%, rgba(255,255,255,.12) 100%),
    url("../img/mainvisual.png") center right / 520px auto no-repeat;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.before-faq2-title p {
  margin: 0 0 8px;
  color: #2fb563;
  font-size: 13px;
  font-weight: 900;
}

.before-faq2-title h1 {
  margin: 0 0 10px;
  color: #12304a;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.3;
}

.before-faq2-title span {
  display: block;
  max-width: 560px;
  color: #405466;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
}

.before-faq2-inner {
  display: grid;
  gap: 26px;
}

.before-faq2-content .faq-page-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.before-faq2-content .faq-category-card,
.before-faq2-content .faq-contact-card,
.before-faq2-content .faq-page-content,
.before-faq2-content .faq-reasons {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.before-faq2-content .faq-category-card,
.before-faq2-content .faq-contact-card,
.before-faq2-content .faq-page-content {
  padding: 22px;
}

.before-faq2-content .faq-category-card ul,
.before-faq2-content .faq-list,
.before-faq2-content .faq-reasons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.before-faq2-content .faq-category-card li + li {
  margin-top: 8px;
}

.before-faq2-content .faq-category-card a {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #243747;
  font-size: 14px;
  font-weight: 800;
}

.before-faq2-content .faq-category-card a.is-current {
  background: #eef8f1;
  color: #229653;
}

.before-faq2-content .faq-category-card img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.before-faq2-content .faq-contact-card {
  margin-top: 18px;
  text-align: center;
}

.before-faq2-content .faq-contact-card > div {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f0faf4;
}

.before-faq2-content .faq-contact-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.before-faq2-content .faq-contact-card h2 {
  margin: 0 0 12px;
  color: #229653;
  font-size: 17px;
  line-height: 1.65;
}

.before-faq2-content .faq-contact-card p {
  margin: 0 0 16px;
  color: #52616c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.85;
}

.before-faq2-content .faq-contact-card a,
.before-faq2-content .faq-page-note a {
  color: #229653;
  font-weight: 900;
}

.before-faq2-content .faq-page-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.before-faq2-content .faq-page-heading h2 {
  margin: 0;
  color: #12304a;
  font-size: 24px;
  font-weight: 900;
}

.before-faq2-content .faq-search {
  display: block;
  width: min(310px, 100%);
}

.before-faq2-content .faq-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.before-faq2-content .faq-search input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  color: #243747;
  font: inherit;
}

.before-faq2-content .faq-page-list {
  border: 1px solid #e7edf1;
  border-radius: 8px;
  overflow: hidden;
}

.before-faq2-content .faq-page-list li + li {
  border-top: 1px solid #e7edf1;
}

.before-faq2-content .faq-question {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  min-height: 58px;
  padding: 16px 18px;
  border: 0;
  background: #fff;
  color: #12304a;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}

.before-faq2-content .faq-question::after {
  content: "+";
  margin-left: auto;
  color: #12304a;
  font-size: 22px;
  font-weight: 500;
}

.before-faq2-content .faq-question[aria-expanded="true"]::after {
  content: "-";
}

.before-faq2-content .q-mark,
.before-faq2-content .a-mark {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #eaf8ef;
  color: #22a85f;
  font-size: 14px;
  font-weight: 900;
}

.before-faq2-content .faq-answer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  height: 0;
  overflow: hidden;
  padding: 0 18px;
  color: #405466;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  transition: height .28s ease, padding-top .28s ease, padding-bottom .28s ease;
}

.before-faq2-content .faq-answer[hidden] {
  display: none;
}

.before-faq2-content .faq-answer p,
.before-faq2-content .faq-page-note {
  margin: 0;
}

.before-faq2-content .faq-page-note {
  padding-top: 16px;
  color: #52616c;
  font-size: 13px;
  font-weight: 700;
}

.before-faq2-content .faq-reasons {
  padding: 28px;
  text-align: center;
}

.before-faq2-content .faq-reasons h2 {
  margin: 0 0 24px;
  color: #12304a;
  font-size: 24px;
  font-weight: 900;
}

.before-faq2-content .faq-reasons ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.before-faq2-content .faq-reasons li {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 160px;
  padding: 20px 16px;
  border-left: 1px solid #e1e7eb;
}

.before-faq2-content .faq-reasons li:first-child {
  border-left: 0;
}

.before-faq2-content .faq-reasons img {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  object-fit: contain;
}

.before-faq2-content .faq-reasons h3 {
  margin: 0;
  color: #22a85f;
  font-size: 15px;
  font-weight: 900;
}

.before-faq2-content .faq-reasons p {
  margin: 0;
  color: #52616c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
}

@media screen and (max-width: 1280px) {
  .before-faq2-content .faq-page-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media screen and (max-width: 1024px) {
  .before-faq2-content .faq-page-layout,
  .before-faq2-content .faq-reasons ul {
    grid-template-columns: 1fr;
  }

  .before-faq2-content .faq-reasons li {
    border-left: 0;
    border-top: 1px solid #e1e7eb;
  }

  .before-faq2-content .faq-reasons li:first-child {
    border-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .before-faq2-title {
    padding: 24px 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 58%, rgba(255,255,255,.35) 100%),
      url("../img/mainvisual.png") 62% center / cover no-repeat;
      margin-top: 50px;
  }

  .before-faq2-title h1 {
    font-size: 28px;
  }

  .before-faq2-content .faq-page-content,
  .before-faq2-content .faq-category-card,
  .before-faq2-content .faq-contact-card,
  .before-faq2-content .faq-reasons {
    padding: 18px;
  }

  .before-faq2-content .faq-page-heading {
    display: grid;
  }

  .before-faq2-content .faq-search {
    width: 100%;
  }
}

/* 404 error page */
.error-page .container {
    max-width: 1180px;
}

.error-page .survey-breadcrumb {
    margin-top: 22px;
    margin-bottom: 16px;
}

.error-hero {
    min-height: 360px;
    padding: 58px 20px 50px;
    border-radius: 0;
    background:
            linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
            url("../img/mainvisual.png") center right / 760px auto no-repeat;
    box-shadow: none;
}

.error-code {
    margin: 0 0 8px;
    color: #2bb86f;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.error-hero h1 {
    margin: 0 0 22px;
    color: #12304a;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
}

.error-hero p:not(.error-code) {
    margin: 0;
    max-width: 620px;
    color: #12304a;
    font-size: 17px;
    font-weight: 500;
    line-height: 2.05;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.error-actions a {
    display: inline-flex;
    min-width: 220px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
}

.error-primary {
    background: linear-gradient(90deg, #24a9b6, #5bb33e);
    color: #fff;
}

.error-secondary {
    border: 1px solid #2fb563;
    background: #fff;
    color: #229653;
}

.error-guide {
    margin: 48px 0 70px;
    padding: 34px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.error-guide-heading {
    text-align: center;
}

.error-guide-heading span {
    display: inline-block;
    margin-bottom: 8px;
    color: #2fb563;
    font-size: 13px;
    font-weight: 900;
}

.error-guide-heading h2 {
    margin: 0 0 12px;
    color: #12304a;
    font-size: 26px;
    font-weight: 900;
}

.error-guide-heading p {
    margin: 0;
    color: #52616c;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

.error-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.error-guide-grid a {
    display: grid;
    gap: 10px;
    min-height: 176px;
    align-content: start;
    padding: 24px 20px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdfc);
    color: #12304a;
    text-align: center;
}

.error-guide-grid img {
    width: 42px;
    height: 42px;
    margin: 0 auto 4px;
    object-fit: contain;
}

.error-guide-grid strong {
    font-size: 16px;
    font-weight: 900;
}

.error-guide-grid span {
    color: #52616c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .error-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .error-page .survey-breadcrumb {
        margin-top: 14px;
    }

    .error-hero {
        min-height: 360px;
        padding: 38px 20px;
        background:
                linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 58%, rgba(255,255,255,.35) 100%),
                url("../img/mainvisual.png") 62% center / cover no-repeat;
    }

    .error-code {
        font-size: 58px;
    }

    .error-hero h1 {
        font-size: 30px;
    }

    .error-hero p:not(.error-code) {
        font-size: 15px;
        line-height: 1.9;
    }

    .error-actions a {
        width: 100%;
        min-width: 0;
    }

    .error-guide {
        margin: 34px 0 48px;
        padding: 24px 18px;
    }

    .error-guide-heading h2 {
        font-size: 22px;
    }
}

@media (max-width: 560px) {
    .error-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* Firsttime page */
.firsttime-page .firsttime-hero {
    background:
            linear-gradient(0deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.05) 100%),
            url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.firsttime-main section {
    position: relative;
}

.firsttime-about {
    padding: 36px 0 46px;
    text-align: center;
}

.firsttime-about h2,
.firsttime-flow h2,
.firsttime-exchange h2,
.firsttime-faq h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #243341;
    font-size: 28px;
    font-weight: 900;
}

.firsttime-about h2 img,
.firsttime-flow h2 img,
.firsttime-exchange h2 img,
.firsttime-faq h2 img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(1291%) hue-rotate(358deg) brightness(101%) contrast(102%);
}

.firsttime-about > p {
    margin: 0 0 38px;
    color: #344451;
    font-size: 15px;
    font-weight: 800;
    line-height: 2;
}

.firsttime-about ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 54px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.firsttime-about li {
    position: relative;
}

.firsttime-about li:not(:last-child)::after {
    content: ">";
    position: absolute;
    top: 56px;
    right: -32px;
    color: #2da866;
    font-size: 24px;
    font-weight: 900;
}

.firsttime-icon {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    margin: 0 auto 22px;
    border: 2px solid #e2eee7;
    border-radius: 50%;
    background: #fff;
}

.firsttime-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-about li:nth-child(2) .firsttime-icon img,
.firsttime-about li:nth-child(2) .firsttime-icon {
    border-color: #f5e3c6;
    filter: none;
}
.firsttime-about li:nth-child(2) .firsttime-icon img {
    width: 70px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(1123%) hue-rotate(1deg) brightness(104%) contrast(103%);}
.firsttime-about li:nth-child(3) .firsttime-icon img {
    filter: brightness(0) saturate(100%) invert(0%) sepia(83%) saturate(7433%) hue-rotate(210deg) brightness(115%) contrast(88%);
}
.firsttime-about h3 {
    margin: 0 0 12px;
    color: #243341;
    font-size: 17px;
    font-weight: 900;
}

.firsttime-about li p {
    margin: 0;
    color: #59666f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
}

.firsttime-flow {
    border-radius: 0;
    background: linear-gradient(90deg, #f0faf3, #f8fcf2);
    padding: 34px 48px 42px;
}

.firsttime-flow ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 42px;
    margin: 34px 0 30px;
    padding: 0;
    list-style: none;
}

.firsttime-flow li {
    position: relative;
    text-align: center;
}

.firsttime-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 56px;
    right: -40px;
    width: 72px;
    height: 2px;
    background: #4fbd8a;
}

.firsttime-flow li:not(:last-child)::before {
    content: ">";
    position: absolute;
    top: 43px;
    right: -42px;
    color: #4fbd8a;
    font-weight: 900;
}

.firsttime-flow li > span {
    display: block;
    color: #71808a;
    font-size: 13px;
    font-weight: 900;
}

.firsttime-step-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    margin: 8px auto 14px;
    border-radius: 50%;
    background: #fff;
}

.firsttime-step-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-flow li:nth-child(3) .firsttime-step-icon img {
    filter: initial;}
.firsttime-flow li:nth-child(4) .firsttime-step-icon img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(1123%) hue-rotate(1deg) brightness(104%) contrast(103%);
    width: 45px;
    height: 45px;}


.firsttime-flow h3 {
    margin: 0 0 14px;
    color: #243341;
    font-size: 17px;
    font-weight: 900;
}




.firsttime-phone {
    overflow: hidden;
    width: 128px;
    height: 190px;
    margin: 0 auto 18px;
    border: 8px solid #111;
    border-bottom-width: 16px;
    border-radius: 24px 24px 18px 18px;
    background: #fff;
    box-shadow: 0 10px 18px rgba(30,45,60,.12);
    padding: 16px 12px;
}

.firsttime-phone strong {
    display: grid;
    min-height: 44px;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #e9f8ee;
    color: #2da866;
    font-size: 12px;
    line-height: 1.3;
}

.firsttime-phone small {
    display: block;
    height: 18px;
    margin-top: 8px;
    border-radius: 4px;
    background: #f0f4f6;
}

.firsttime-flow li p {
    margin: 0;
    color: #59666f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
}

.firsttime-line-btn,
.firsttime-more-btn {
    display: flex;
    width: min(300px, 100%);
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, #2bae68, #58b944);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 12px 20px rgba(54, 173, 92, .22);
}

.firsttime-line-btn img {
    width: 24px;
    height: 24px;
}

.firsttime-exchange {
    padding: 46px 34px 34px;
}

.firsttime-exchange ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.firsttime-exchange li {
    min-height: 172px;
    border: 1px solid #e1e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 18px 12px;
    text-align: center;
}

.firsttime-exchange h3 {
    margin: 0 0 12px;
    color: #2da866;
    font-size: 13px;
    font-weight: 900;
}

.firsttime-exchange div {
    display: grid;
    min-height: 62px;
    place-items: center;
}

.firsttime-exchange img {
    max-width: 78px;
    max-height: 54px;
    object-fit: contain;
}

.firsttime-exchange p {
    margin: 12px 0 0;
    color: #344451;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.6;
}

.firsttime-safety {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 38px;
    align-items: center;
    width: min(980px, 100%);
    margin: 0 auto 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1faf5, #f8fcf2);
    padding: 36px 58px;
}

.firsttime-safety h2 {
    margin: 0 0 20px;
    color: #243341;
    font-size: 22px;
    font-weight: 900;
}

.firsttime-safety ul {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.firsttime-safety li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px 12px;
}

.firsttime-safety li span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #2da866;
    grid-row: span 2;
}

.firsttime-safety li span::after {
    content: "";
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.firsttime-safety strong {
    color: #243341;
    font-size: 15px;
    font-weight: 900;
}

.firsttime-safety p {
    margin: 0;
    color: #59666f;
    font-size: 13px;
    font-weight: 800;
}

.firsttime-shield {
    position: relative;
    display: grid;
    place-items: center;
}

.firsttime-shield img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-shield span {
    position: absolute;
    right: 30px;
    bottom: 12px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: #2da866;
}

.firsttime-shield span::after {
    content: "";
    width: 15px;
    height: 26px;
    border-right: 5px solid #fff;
    border-bottom: 5px solid #fff;
    transform: rotate(45deg);
}

.firsttime-faq {
    padding-bottom: 58px;
}

.firsttime-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1060px;
}

.firsttime-faq-list li {
    width: 100%;
}

.firsttime-more-btn {
    margin-top: 28px;
    border: 1px solid #2da866;
    background: #fff;
    color: #2da866;
    box-shadow: none;
}

@media (max-width: 980px) {
    .firsttime-about ul,
    .firsttime-flow ol,
    .firsttime-exchange ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .firsttime-about li:not(:last-child)::after,
    .firsttime-flow li:not(:last-child)::before,
    .firsttime-flow li:not(:last-child)::after {
        display: none;
    }

    .firsttime-safety {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .firsttime-about h2,
    .firsttime-flow h2,
    .firsttime-exchange h2,
    .firsttime-faq h2 {
        font-size: 22px;
    }

    .firsttime-about ul,
    .firsttime-flow ol,
    .firsttime-exchange ul,
    .firsttime-faq-list {
        grid-template-columns: 1fr;
    }

    .firsttime-flow,
    .firsttime-safety {
        padding: 28px 2px;
    }
}

.faq {
    padding: 82px 0 112px;
}

.faq .section-title {
    margin-bottom: 24px;
}

.common-faq-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 14px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.common-faq-list li {
    display: inline-block;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    border: 1px solid #e1e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(31, 47, 62, .06);
    padding: 8px 20px 8px 12px;
    color: #263642;
    font-size: 14px;
    font-weight: 900;
}

.q-mark {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #37bf78;
    color: #fff;
    font-weight: 900;
}


.accordion-list {
    align-items: flex-start;
}

.accordion-list li {
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 30px;
}

.faq-question {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #263642;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    padding: 8px 44px 8px 12px;
    position: relative;
    text-align: left;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 18px;
    color: #37bf78;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.faq-question::after {
    transition: transform 0.3s ease;
}

/*.faq-question[aria-expanded="true"]::after {
    content: "+";
   /** transform: rotate(45deg);
}*/

.faq-answer {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    border-top: 1px solid #e8eef1;
    padding: 12px 18px 16px 12px;
    text-align: left;
    opacity: 0;
    overflow: hidden;
    transition: height 0.36s ease, opacity 0.28s ease;
}

.faq-answer.is-open {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .faq-answer,
    .faq-question::after {
        transition: none;
    }
}

.a-mark {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #f05867;
    color: #fff;
    font-weight: 900;
}

.faq-answer p {
    margin: 2px 0 0;
    color: #56636d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}
.footer {
    background: #f7f8f9;
    border-top: 1px solid #eef1f3;
    padding: 28px 0;
}