@charset "UTF-8";
@import url("reset-1.11.3.css");
@import url("../bibe-fonts-v3.0/style.css");
/*

        root

*/
:root {
    --theme:   #F2D6D6;
    --red:     #b56098;
    --purple:  #DBA1CB; /* rgb(219,161,203) */
    --purple4: #CDB3D4; /* rgb(205,179,212) */
    --purple8: #E7D8E9;
    --orange:  #f3a17d; /* rgb(243,161,125) */
    --orange4: #FFBE88; /* rgb(255,190,136) */
    --orange8: #FFDFC3;
    --orange9: #FFE9D8;
    --blue:    #63BCC9;
    --blue4:   #8acdd7;
    --blue8:   #b1dee4;
    --main-gradient:  linear-gradient(to right, var(--purple),  var(--orange));
    --gradient:       linear-gradient(to right, var(--purple4), var(--orange4));
    --back-gradient:  linear-gradient(to right, var(--purple8), var(--orange8));
    --white-gradient: linear-gradient(to bottom, #ffffff, #efefef);
    --white:  #ffffff;
    --graye:  #eeeeee;
    --grayd:  #dddddd;
    --grayc:  #cbcbcb;
    --graya:  #a8a8a8;
    --gray9:  #989898;
    --gray6:  #686868;
    --gray4:  #484848;
    --black:  #484848;
    --back:   rgba(0,0,0,0.5);
    --insta-back: linear-gradient(135deg, #427eff 0%, #f13f79 70%);
    --line:      #06c755;
    --youtube:   #FF2826;
    --x-twitter: #0f1419;
    --tiktok:    #272727;
    --facebook:  #1E7BF2;
    --min-mobile-width: 375px;/* 23.4375rem SE*/
    --max-mobile-width: 480px;/* 30rem */
    --iPad-width:    744px;/* 46.5rem */
/*  --max-pc-width:  768px;   48rem */
/*  --max-pc-width:  896px;   56rem */
/*  --max-pc-width: 1024px;   64rem */
/*  --max-pc-width: 1152px;   72rem */
    --max-pc-width: 1280px;/* 80rem */
    width: 100vw;
    min-height: 100vh;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}
html {
    scrollbar-color: var(--blue8) var(--graye);

}
body {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    line-height: 1.75;
    color: var(--black);
    word-break: break-all;
    min-height: 100vh;
    padding: 70px 0 0;/* mobile-header/footer */
}
body.noscroll {
    overflow: hidden;
}
@media screen and (min-width: 744px)
{
    body {
        padding-top: 74px;
    }
}
footer {
    margin-top: auto;
}
:not(input, textarea) {
    user-select: none;
}
img {
    vertical-align: middle;
    height: auto;
}
iframe {
    max-width: 100%;
}
a,button,input:not([type=range]),label,select,textarea {
    touch-action: manipulation;
}
a {
    cursor: pointer;
}
a.href {
    color: var(--purple);
    text-decoration: underline;
}
a.submit,
a.button {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    line-height: 3;
    color: var(--white);
    background-color: var(--orange4);
    background-image: var(--gradient);
    padding: 0 1em;
    border-radius: 0.5em;
}
label {
    display: block;
    font-size: 0.857em;
    font-weight: bold;
    margin-bottom: 1em;
}
article p {
    margin: 1em 0;
}
article p.warn,
article p.warning {
    color: var(--red);
    margin: 0;
}
.req {
    display: inline-block;
    font-size: 0.857em;
    font-weight: normal;
    line-height: 1.5;
    padding: 0 0.5em;
    border-radius: 0.75em;
    color: var(--white);
    background-color: var(--purple);
}
input[type="text"], input[type="password"],
input[type="email"], input[type="tel"], input[type="url"] {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    line-height: 2.5;
    text-align: left;
    background-color: var(--graye);
    border-radius: 0.5em;
    padding: 0 1em;
}
input[type="date"] {
    font-size: 1rem;
    font-weight: normal;
    line-height: 2.5;
    text-align: left;
    background-color: var(--graye);
    border-radius: 0.5em;
    padding: 0 1em;
}
::placeholder {
    font-size: 0.875rem;
    color: var(--gray9);
}
.fit-height {
    font-size: 1rem;
    padding: 0.5em 0;
    border-radius: 0.5em;
    background-color: var(--graye);
}
.fit-height textarea {
    width: 100%;
    color: var(--black);
    font-size: inherit;
    font-weight: normal;
    line-height: 1.5;
    height: 1.5em;
    min-height: 1.5em;
    padding: 0 1em;
}
input[type="checkbox"] {
    position: relative;
    top: 0.25em;
    padding: 1.5em 1.5em 0 0;
}
input[type="checkbox"]::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border: 1px solid var(--gray9);
    border-radius: 0.3em;
    background-color: var(--white);
}
input[type="checkbox"]:indeterminate::before,
input[type="checkbox"]:checked::before {
    background-color: var(--purple);
}
input[type="checkbox"]:indeterminate::after {
    position: absolute;
    bottom: 0.5em;
    left: 0.25em;
    content: "";
    width: 1em;
    height: 0.25em;
    background-color: var(--white);
}
input[type="checkbox"]:checked::after  {
    position: absolute;
    bottom: 0.5em;
    left: 0.25em;
    content: "";
    width: 1em;
    height: 0.6em;
    border-left:   0.2em solid var(--white);
    border-bottom: 0.2em solid var(--white);
    transform: rotate(-45deg);
}
select {
    appearance: revert;
    display: block;
    font-size: 1rem;
    font-weight: normal;
    cursor: pointer;
    background-color: var(--graye);
    border-radius: 0.4em;
    padding: 0.7em 1em;
}
button {
    text-align: center;
    line-height: 3;
    background-color: var(--graye);
    padding: 0 1em;
    border-radius: 0.5em;
    cursor: pointer;
}
button.submit,
button[type="submit"] {
    font-weight: bold;
    width: 100%;
    color: var(--white);
    background-color: var(--orange4);
    background-image: var(--gradient);
}
button:disabled,
button.disabled,
button.loggedout {
    cursor: default;
}
/*

        utils

*/
.container {
    max-width: 1280px;
    margin: 0 auto;
}
.container11 {
    max-width: 1152px;
    margin: 0 auto;
}
.container10 {
    max-width: 1024px;
    margin: 0 auto;
}
.container7 {
    max-width: 764px;
    margin: 0 auto;
}
.container4 {
    max-width: 480px;
    margin: 0 auto;
}
.wrapper {
    padding: 0 24px 24px;
}
.wrapper1 {
    padding: 24px 8px;
}
@media screen and (max-width: 743px)
{
    .pc {
        display: none !important;
    }
}
@media screen and (min-width: 744px)
{
    .mobile {
        display: none !important;
    }
}
.inline {
    display: inline-block;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.herf {
    display: flex;
}
.herf > * {
    flex: 0 0 50%;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
/*

        brand color

*/
i.i-globe {
    color: var(--purple);
}
i.i-instagram {
    color: #614DC5;
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
i.i-line {
    color: #06c755;
}
i.i-youtube {
    color: #FF2826;
}
i.i-x-twitter {
    color: #0f1419;
}
i.i-tiktok {
    color: #272727;
}
i.i-facebook {
    color: #1E7BF2;
}
i.i-globe.disable,
i.i-line.disable,
i.i-youtube.disable,
i.i-x-twitter.disable,
i.i-tiktok.disable,
i.i-facebook.disable {
    color: var(--grayc);
}
i.i-instagram.disable {
    color: var(--grayc);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
    text-fill-color: currentcolor;
}
/*

        parts

*/
.href {
    display: inline-block;
    line-height: 3;
    color: var(--purple);
    text-decoration: underline;
}
/*    badge    */
.badge-wrap {
    position: relative;
}
.badge-wrap .badge,
.badge-wrap .badge-pref7,
.badge-wrap .badge-pref15 {
    position: absolute !important;
    top: 18px;
    right: calc(50% - 5em);
    font-size: 12px;
    color: var(--white);
    background-color: var(--purple);
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    line-height: 1.75;
    text-align: center;
    animation: badge 4s ease infinite;
}
.badge-wrap .badge-pref15 {
    animation: badge1 4s ease infinite;
}
@media screen and (min-width: 744px)
{
    .badge-wrap .badge-pref7 {
        right: calc(50% - 3.5em);
    }
    .badge-wrap .badge-pref15 {
        right: calc(50% - 6em);
    }
}
@keyframes badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    75% {
        opacity: 1;
        transform: scale(1);
    }
    85% {
        opacity: 0;
        transform: scale(0);
    }
    90% {
        opacity: 0;
        transform: scale(0);
    }
}
@keyframes badge1 {
    33% {
        opacity: 1;
        transform: scale(1);
    }
    8% {
        opacity: 1;
        transform: scale(1);
    }
    18% {
        opacity: 0;
        transform: scale(0);
    }
    23% {
        opacity: 0;
        transform: scale(0);
    }
}
.w-button {
    display: block;
    line-height: 2.5;
    border: 2px solid var(--grayc);
    text-align: center;
    border-radius: 1.25em;
    background-image: var(--white-gradient);
}
.center-line {
    position: relative;
    margin: 24px 0 12px;
    text-align: center;
    border-bottom: 1px solid var(--gray9);
}
.center-line span {
    display: inline-block;
    padding: 0 1em;
    background-color: #fff;
    position: relative;
    top: 1em;
}
i.i-member-plus .path1::before,
i.i-member-plus .path2::before {
    color: var(--blue);
}
i.i-serch,
i.i-w {
    font-size: 85%;
}
.nav-opener {
    cursor: pointer;
}
.grecaptcha-badge {
    visibility: hidden;
}
.balloon {
    display: none;
    position: absolute;
    top: -34px;
    left: 0;
    color: var(--white);
    background-color: var(--purple);
    padding: 0.25em 0.5em;
    width: 14em;
    border-radius: 0.5em;
}
.balloon::after {
    position: absolute;
    bottom: -0.6rem;
    left: 50%;
    content: "";
    width: 0;
    height: 0;
    border-top: 0.75rem solid var(--purple);
    border-left: 0.45rem solid transparent;
    border-right: 0.45rem solid transparent;
    transform: translateX(calc(-50% - 0.45rem / 2));
}
/*

        topics-path

*/
#topic-path {
    font-size: 13px;
    line-height: 35px;
    padding-left: 12px;
    margin-right: 1em;
    overflow: hidden;
    white-space: nowrap;
}
#topic-path li {
    display: inline-block;
    position: relative;
}
#topic-path li:first-child {
    color: var(--blue);
}
#topic-path li:not(:first-child) {
    padding-left: 14px;
}
#topic-path li:not(:first-child)::before {
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--gray6);
    border-right: 1px solid var(--gray6);
    position: absolute;
    top: 15px;
    left: 1px;
    transform: rotate(45deg);
}
#topic-path a {
    text-decoration: underline;
}
@media screen and (min-width: 744px)
{
    #topic-path {
        padding-left: 24px;
    }
}
/*

        page-header

*/
#page-header {
    font-size: 1.3em;
    line-height: 35px;
    color: var(--purple);
    background-color: var(--orange8);
    background-image: var(--back-gradient);
	.wrapper {
	    padding-top: 0;
        padding-left: 12px;
	    padding-bottom: 0;
	}
	.chat-back {
	    display: none;
	}
	h1 {
	    display: inline-block;
	    font-size: 0.6em;
	    color: var(--gray6);
	    vertical-align: baseline;
	    padding-left: 1em;
	}
	h1.ja {
	    font-size: inherit;
	    color: var(--purple);
	    vertical-align: middle;
	    padding-left: 0;
	}
    i.i-w {
        vertical-align: middle;
        color: var(--black);
    }
}
@media screen and (min-width: 896px)
{
    #page-header {
        font-size: 1.5em;
        .wrapper {
            padding-left: 24px;
        }
    }
}
/*

        footer

*/
.footer {
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.5;
    color: var(--gray6);
    background-image: var(--back-gradient);
    padding: 0.75em;
}
/*

        header

*/
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 70px;
    box-shadow: 0 0 1px var(--gray9);
    background-color: var(--white);
    transition: top 0.4s;
}
#header.hidden {
    top: -70px;
}
.alert,
.notice {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--white);
    background-color: var(--red);
    border-radius: 0.5em;
    line-height: 2.5;
    padding: 0 0.75em;
    max-width: 80%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
}
.notice {
    background-color: var(--blue);
}
@media screen and (min-width: 744px)
{
    #header {
        height: 74px;
    }
}
/*

        mobile-header

*/
.mobile-header {
    padding: 14px 16px;
    display: flex;
}
.mobile-header .mobile-logo {
    flex: 0 0 126px;
}
.mobile-header .mobile-header-navi {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-end;
}
.mobile-header .badge {
    top: -4px;
    right: -4px;
}
/*

        mobile-icon-button 50px x 42px

*/
.mobile-icon-button {
    flex: 0 0 50px;
    padding: 0 4px;
    text-align: center;
    color: var(--blue);
}
.mobile-icon-button > * {
	display: block;
	position: relative;
}
.mobile-icon-button > * > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    height: 30px;
}
.mobile-icon-button > * > span:last-child {
    display: block;
    font-size: 8px;
    font-weight: bold;
    line-height: 12px;
}
.mobile-icon-button a {
    color: inherit;
    text-decoration: inherit;
}
/*

        pc-header

*/
.pc-header {
    display: flex;
    max-width: 1280px;
    padding: 12px 16px;
    margin: 0 auto;
}
.pc-header .pc-logo {
    flex: 0 0 329px;
}
.pc-header .pc-header-nav {
    flex: 1 0 auto;
    display: flex;
    justify-content: flex-end;
}
.pc-header .pc-header-nav li {
    border-right: 1px solid var(--blue);
}
.pc-header .pc-header-nav li:first-child {
    border-left: 1px solid var(--blue);
}
@media screen and (max-width: 857px)
{
    .w858hidden {
        display: none !important;
    }
}
@media screen and (max-width: 947px)
{
    .w948hidden {
        display: none !important;
    }
}
.pc-header .badge {
    right: 18px;
}
/*

        pc-icon-button 90px x 50px

*/
.pc-icon-button {
    flex: 0 0 90px;
    padding: 0 4px;
    text-align: center;
    color: var(--blue);
    cursor: pointer;
}
.pc-icon-button > * {
	display: block;
	position: relative;
}
.pc-icon-button > * > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    height: 34px;
    padding: 5px 0;
}
.pc-icon-button > * > span:first-child img {
    width: 32px;
    height: auto;
}
.pc-icon-button > * > span:last-child {
    display: block;
    font-size: 10px;
    line-height: 16px;
}
@media screen and (min-width: 1024px)
{
    .pc-icon-button {
        flex: 0 0 98px;
        padding: 0 8px;
    }
    .pc-icon-button.li-whats {
        flex: 0 0 104px;
    }
    .pc-icon-button > * > span:last-child {
        font-size: 12px;
    }
}
/*

        gotop

*/
#go-top {
    position: fixed;
    right: 1rem;
    bottom: 4.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 0.625rem;
    text-align: center;
    line-height: 3.3rem;
    color: var(--white);
    background-color: var(--gray9);
    transition: bottom 0.4s;
    cursor: pointer;
}
#go-top::after {
    position: absolute;
    top: 0.6rem;
    left: 36%;
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border-top: 2px solid var(--white);
    border-left: 2px solid var(--white);
    transform: rotate(45deg);
}
#go-top.hidden {
    bottom: -2.5rem;
}
/*

        mobile-footer-home

*/
.mobile-footer-home {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 70px;
    padding: 12px 16px;
    background-image: var(--main-gradient);
}
.mobile-footer-home a {
    display: block;
    position: relative;
    color: var(--gray6);
    border: 3px solid var(--purple);
    line-height: 40px;
    text-align: center;
    border-radius: 12px;
    background-color: var(--white);
}
.mobile-footer-home a i {
    position: relative;
    top: 1px;
    font-size: 16px;
    color: var(--purple);
}
.mobile-footer-home button {
    position: relative;
    width: 100%;
    color: var(--gray6);
    border: 3px solid var(--grayc);
    line-height: 40px;
    text-align: center;
    border-radius: 12px;
    background-image: var(--white-gradient);
}
.mobile-footer-home button i {
    font-size: 18px;
    position: relative;
    top: 2px;
}
.mobile-footer-home button i.i-member-plus {
    left: -3px;
}
.mobile-footer-home button .path1:before,
.mobile-footer-home button .path2:before {
    color: var(--gray6);
}
.mobile-footer-home .badge {
    top: 4px;
    right: 30px;
}
/*

        mobile-footer

*/
.mobile-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 70px;
    padding: 12px 16px;
    background-image: var(--main-gradient);
}
.mobile-footer ul {
    display: flex;
}
.mobile-footer li.mobile-icon-button {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
.mobile-footer li.mobile-icon-button .path1::before,
.mobile-footer li.mobile-icon-button .path2::before {
    color: var(--white);
}
.mobile-footer li.mobile-icon-button .path3::before {
    color: var(--red);
}
.mobile-footer li.mobile-footer-button {
    flex: 1 0 auto;
    padding: 0 8px;
}
.mobile-footer li.mobile-footer-button a {
    display: block;
    text-align: center;
    width: 100%;
    line-height: 42px;
    background-image: var(--white-gradient);
    border: 2px solid var(--grayc);
    border-radius: 12px;
}
.mobile-footer li.mobile-footer-button i {
    font-size: 118%;
    color: var(--gray6);
}
.mobile-footer .badge {
    color: var(--purple);
    background-color: var(--white);
    top: -6px;
}
/*

        modal-wrap

*/
#modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--back);
    opacity: 1;
    z-index: 1;
}
#modal-wrap.hidden {
    top: -100%;
    opacity: 0;
    transition: opacity 0.1s 0.1s, top 0.1s 0.3s;
}
/*

        modal

*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--white);
    transition: left 0.4s;
    z-index: 2;
}
.modal.hidden {
    left: -100%;
}
.modal header {
    position: relative;
    line-height: 42px;
    text-align: center;
    background-image: var(--back-gradient);
}
.modal header .modal-closer {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.modal-body {
    height: calc(100dvh - 42px);
    overflow-y: auto;
    max-width: 480px;
    margin: 0 auto;
}
@media screen and (min-width: 744px)
{
    .modal {
        top: 50%;
        left: 50%;
        width: 480px;
        height: auto;
        max-height: 90vh;
        transform: translate(-50%, -50%);
        transition: top 0.4s;
    }
    .modal.hidden {
        top: -100vh;
    }
    .modal-body {
        height: auto;
        max-height: calc(90vh - 42px);
    }
}
/*

        modal-nav

*/
#modal-nav .modal-body {
    display: flex;
    flex-direction: column;
}
#modal-nav .modal-body .main {
    flex: 1 0 auto;
    padding-top: 16px;
}
#modal-nav .main > div {
    padding: 16px 20px 0;
}
#modal-nav .main > div.herf {
    padding: 16px 16px 0;
}
#modal-nav a {
    text-decoration: inherit;
}
#modal-nav .blue,
#modal-nav .purple,
#modal-nav .glay {
    display: block;
    line-height: 40px;
    text-align: center;
    color: #777;
    border: 2px solid #aaa;
    border-radius: 12px;
    background-image: inherit;
}
#modal-nav .blue {
    position: relative;
    color: var(--blue);
    border-color: var(--blue);
}
#modal-nav .purple {
    position: relative;
    border-color: var(--purple);
}
#modal-nav .purple i {
    color: var(--purple);
}
#modal-nav i.i-member-plus,
#modal-nav i.i-login,
#modal-nav i.i-member,
#modal-nav i.i-heart,
#modal-nav i.i-chat,
#modal-nav i.i-serch {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -2px;
}
#modal-nav i.i-member-plus {
    left: -4px;
}
#modal-nav .main-nav {
    margin: 32px 0 16px;
    line-height: 48px;
}
#modal-nav .main-nav li {
    padding: 0 40px;
    border-bottom: 1px solid #ccc;
}
#modal-nav .main-nav li:first-child {
    border-top: 1px solid #ccc;
}
#modal-nav .main-nav li a {
    display: block;
    position: relative;
    color: var(--gray6);
}
#modal-nav .main-nav li a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--gray9);
    border-right: 1px solid var(--gray9);
    transform: translate(0, -50%) rotate(45deg);
}
#modal-nav .follow {
    text-align: center;
    color: var(--gray6);
    margin-top: 42px;
}
#modal-nav .follow i {
    font-size: 28px;
    vertical-align: sub;
    margin: 0 4px;
}
#modal-nav .follow a:first-child i {
    margin-left: 14px;
}
#modal-nav .follow i.i-instagram {
    background-image: var(--insta-back);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
#modal-nav .follow i.i-line {
    color: var(--line);
}
#modal-nav .logout {
    display: block;
    line-height: 40px;
    text-align: center;
    color: var(--blue);
    border: 2px solid  var(--graya);
    border-radius: 12px;
    margin-top: 40px;
}
#modal-nav .sub-nav {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    padding: 14px;
    line-height: 2;
    margin-top: 42px;
}
#modal-nav .sub-nav li {
    flex: 50%;
}
#modal-nav .sub-nav a,
#modal-nav .sub-nav a[target="_blank"] {
    color: var(--gray6);
    text-decoration: underline;
}
/*

        mobile-carousel

*/
#mobile-carousel {
    position: relative;
    aspect-ratio: 480 / 436;
}
.mobile-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.mobile-carousel:last-child {
    animation: mobile-carousel-front 14s ease infinite;
}
/*
.mobile-carousel:nth-child(2) {
    animation: mobile-carousel-front2 21s ease infinite;
}
.mobile-carousel:last-child {
    animation: mobile-carousel-front3 21s ease infinite;
}
*/
@keyframes mobile-carousel-front {
    0%, 100% {
        opacity: 0;
    }
    44% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
}
@keyframes mobile-carousel-front3 {
    0%, 100% {
        opacity: 1;
    }
    27% {
        opacity: 1;
    }
    33.3% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    66.6% {
        opacity: 0;
    }
    94% {
        opacity: 0;
    }
}
@keyframes mobile-carousel-front2 {
    0%, 100% {
        opacity: 1;
    }
    27% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    66.6% {
        opacity: 0;
    }
    94% {
        opacity: 0;
    }
}
/*

        pc-carousel

*/
#pc-carousel {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    aspect-ratio: 1300 / 533;
}
/*
.pc-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.pc-carousel:last-child {
    animation: pc-carousel-front 14s ease infinite;
}
@keyframes pc-carousel-front {
    0%, 100% {
        opacity: 1;
    }
    44% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    94% {
        opacity: 0;
    }
}
*/
/*

        pref-select

*/
.pref-select {
    font-size: 15px;
    font-weight: bold;
    padding: 0 2.5em 1em;
    color: var(--purple);
}
.pref-selecter {
    margin-bottom: 42px;
}
.pref-button {
    padding: 0.375em 2.5em;
}
.pref-button a {
    display: flex;
    color: #888;
    width: 100%;
    font-size: 1.25rem;
    line-height: 3;
    border: 2px solid #cbcbcb;
    border-radius: 12px;
    background-image: var(--white-gradient);
    padding: 0 1.5em;
    text-align: center;
}
.pref-button a i {
    flex: 0 0 24px;
    align-content: center;
    color: #aaa;
    display: flex;
    align-items: center;
}
.pref-button a i:first-child {
    font-size: 24px;
    background-image: var(--main-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    transform: scale(2);
}
.pref-button a span {
    flex: 1 1 auto;
    text-align: center;
}
@media screen and (min-width: 744px)
{
    .pref-select {
        width: 700px;
        margin: 48px auto 0;
    }
    .pref-selecter {
        width: 700px;
        margin: 0 auto 42px;
        display: flex;
    }
    .pref-selecter .pref-button {
        flex: 0 0 50%;
    }
    .pref-selecter .pref-button:first-child {
        padding-right: 7px;
    }
    .pref-selecter .pref-button:last-child {
        padding-left: 7px;
    }
}
/*

        regist

*/
.regist {
    padding: 21px 24px;
}
.reset p {
    margin-bottom: 1em;
}
.regist h3 {
    text-align: center;
    font-size: 16px;
    margin: 21px 0 12px;
}
.regist .mt49 {
    margin-top: 49px;
}
.regist input {
    margin-bottom: 8px;
}
.line-regist-body {
    margin-top: 12px;
}
.line-login {
    display: block;
    position: relative;
    text-align: center;
    line-height: 44px;
    color: var(--white);
    background-color: var(--line);
    border-radius: 22px;
    font-weight: bold;
    text-decoration: none;
}
.line-login i {
    position: absolute;
    top: 22px;
    left: 22px;
    transform: translateY(-50%);
    font-size: 28px;
}
/*

        fix/whats

*/
.whats {
    max-width: 88rem;
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.429rem + 1.9vw, 1rem);
    line-height: 2;
    color: var(--gray6);
    margin: 0 auto;
}
.logout .loggedin {
    display: none;
}
.login .loggedout {
    display: none;
}
.orange {
    font-weight: bold;
    color: var(--orange);
}
.blue {
    font-weight: bold;
    color: var(--blue);
}
.purple {
    font-weight: bold;
    color: var(--purple);
}
hr {
    border-top: 1px solid var(--gray9);
    margin: 0 auto;
}
.whats .action > p {
    margin-bottom: 0;
}
@media screen and (min-width: 744px)
{
    .whats {
        background: linear-gradient(to right, transparent 60%, rgba(205,179,212,0.2) 60%, rgba(255,190,136,0.2));
    }
    .whats hr {
        width: 90%;
    }
}
/*
        fix/whats top
*/
.whats .top {
    position: relative;
    aspect-ratio: 960 / 980;
    overflow: hidden;
}
.whats .top > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
.whats .top .member-task {
    top: 0.75rem;
}
@media screen and (min-width: 744px)
{
    .whats .top {
        aspect-ratio: auto;
    }
    .whats .top > img {
        object-fit: contain;
        object-position: top;
    }
}
/*
        fix/whats summary
*/
.whats .summary {
    display: flex;
    margin: 0 auto;
}
.whats .summary .iphone {
    flex: 0 1 35%;
    padding: 0 3% 0 6%;
}
.whats .summary .text {
    flex: 1 0 65%;
    line-height: 1.75;
    padding: 0 5% 0 3%;
    margin: 0;
}
.whats .iphone .regist {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background-image: url('../images/nowfree_regist_back-200.png');
    background-size: cover;
    padding: 0;
}
.whats .iphone .regist div {
    width: 80%;
    text-align: center;
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.75;
    text-decoration: none;
}
.whats .iphone .regist div span {
    display: block;
    color: var(--white);
    text-decoration: none;
}
.whats .iphone .regist div .now {
    font-size: 87.5%;
}
@media screen and (min-width: 744px)
{
    .whats .flex2 {
        display: flex;
    }
    .whats .flex2 div {
        flex: 0 0 50%;
    }
    .whats .flex2 .top {
        order: 2;
    }
    .whats .flex2 .summary {
        order: 1;
        display: flex;
        flex-direction: column;
    }
    .whats .flex2 .summary .iphone {
        order: 2;
        display: flex;
    }
    .whats .flex2 .summary .iphone > div:first-child {
        padding: 0 2%;
        flex: 0 0 clamp(10.625rem, 4.985rem + 12.13vw, 14.688rem);
    }
    .whats .flex2 .summary .iphone > div:last-child {
        padding: 0 12%;
        flex: 1 1 auto;
    }
    .whats .iphone .regist div {
        font-size: clamp(1.125rem, 0.778rem + 0.75vw, 1.375rem);
    }
    .whats .flex2 .summary .text {
        order: 1;
        flex: 1 0 auto;
        font-size: clamp(1rem, 0.306rem + 1.49vw, 1.5rem);
        padding: 10% 15%;
    }
}
/*
        fix/whats video
*/
.whats .video {
    text-align: center;
    margin: 15% 6%;
}
.whats .video-dummy {
    aspect-ratio: 16 / 9;
    background-color: var(--grayc);
    margin: 0 auto;
}
.whats .video video {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
/*
        fix/whats content
*/
.whats .content {
    text-align: center;
}
.whats .content h3 {
    font-size: clamp(1.125rem, 0.679rem + 1.9vw, 1.25rem);
    font-weight: bold;
    line-height: 1.75;
    color: var(--orange);
    margin: 2.3em auto 1.2em;
}
.whats .content h3.sec {
    margin-top: 4.2em;
}
.whats .content h3 span {
    background: linear-gradient(to right, var(--purple), var(--orange));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.whats .content p {
    margin-bottom: 1.75em;
}
.whats .content p.mobile {
    margin-bottom: 3em;
}
.whats .content .image {
    margin: 2.5em 2em 4.2em;
}
.whats .flex3 {
    display: flex;
    margin: 1.75rem 0.5rem;
}
.whats .flex3 li {
    flex: 0 0 calc(100% / 3);
    padding: 0 2%;
}
.whats .flex3 li > span {
    position: relative;
    display: block;
}
.whats .flex3 li span span:first-child {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(205,179,212,0.2), rgba(255,190,136,0.2));
    filter: blur(5px);
}
.whats .flex3 li span span:last-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.8rem, 0.354rem + 1.9vw, 0.925rem);
    line-height: 1.5;
}
@media screen and (min-width: 744px)
{
    .whats .content {
        display: flex;
        text-align: left;
    }
    .whats .content h3 {
        font-size: clamp(1.25rem, 0.382rem + 1.87vw, 1.875rem);
    }
    .whats .content .text {
        flex: 0 0 60%;
        font-size: clamp(0.875rem, 0.424rem + 0.97vw, 1.2rem);
        padding: 0 0 6% 6%;
    }
    .whats .content .image {
        flex: 0 0 40%;
        padding: 3%;
    }
    .whats .content .flex3 {
        display: block;
        flex: 0 0 40%;
        position: relative;
        margin: 0;
    }
    .whats .content .flex3 li {
        position: absolute;
        width: clamp(10rem, 1.672rem + 17.91vw, 16rem);
        text-align: center;
        padding: 0 clamp(0.5rem, -0.888rem + 2.99vw, 1.5rem);
    }
    .whats .content .flex3 li span span:first-child {
        background-color: var(--white);
        background-image: none;
        filter: blur(3px);
    }
    .whats .content .flex3 li.orange {
        top: 15%;
        left: 7%;
    }
    .whats .content .flex3 li.blue {
        top: 50%;
        right: 7%;
        transform: translateY(-50%);
    }
    .whats .content .flex3 li.purple {
        left: 7%;
        bottom: 15%;
    }
    .whats .flex3 li span span:last-child {
        font-size: clamp(0.938rem, 0.504rem + 0.93vw, 1.25rem);
    }
}
/*
        fix/whats action
*/
.whats .action {
    text-align: center;
    background: linear-gradient(to right, rgba(205,179,212,0.2), rgba(255,190,136,0.2));
    padding-top: 2rem;
}
.whats .action hr {
    margin-top: 2rem;
}
.whats .action h4 {
    color: var(--purple);
    font-size: 1.2rem;
    font-weight: bold;
}
.whats .action .regist-opener {
    display: block;
    width: 19rem;
    line-height: 2.5;
    margin: 0 auto;
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 0.5rem;
}
.whats .action .entry_button {
    display: inline-block;
    font-size: 1rem;
    text-decoration: none;
    line-height: 2.5;
    color: var(--white);
    width: 19rem;
    border-radius: 0.5rem;
    background-color: var(--blue);
    margin: 1rem auto 2rem;
}
@media screen and (min-width: 744px)
{
    .whats .action {
        display: flex;
        background: none;
        padding: 0 clamp(0rem, -13.881rem + 29.85vw, 10rem) 3rem;
    }
    .whats .action > * {
        flex: 0 0 50%;
    }
    .whats .action h4 {
        font-size: clamp(1.2rem, 1.131rem + 0.15vw, 1.25rem);
    }
    .whats .action .regist_button {
        font-size: clamp(1rem, 0.653rem + 0.75vw, 1.25rem);
        width: clamp(19rem, 14.836rem + 8.96vw, 22rem);
    }
    .whats .action .entry_button {
        font-size: clamp(1rem, 0.653rem + 0.75vw, 1.25rem);
        width: clamp(19rem, 14.836rem + 8.96vw, 22rem);
        margin-top: clamp(2.4rem, 1.567rem + 1.79vw, 3rem);
    }
}
/*
    fix page
*/
#fix .hview {
    font-size: 1rem;
    max-width: 1024px;
    padding: 1rem 1.5rem;
    margin: 0 auto;
}
.hview b,
.hview strong {
    font-weight: bold;
}
.hview u {
    text-decoration: underline;
}
.hview font {
}
.hview a {
    color: blue;
    text-decoration: underline;
}
/*

        entry

*/
.entry {
    padding: 28px 14px;
}
.entry .e-header {
    text-align: center;
    margin: 14px 0 42px;
}
.entry h2 {
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    line-height: 32px;
    padding: 0 1em;
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 5px;
}
.entry h2 span {
    font-size: 0.9em;
}
.entry h2::before {
    content: "";
    display: block;
    height: 32px;
    aspect-ratio: 11 / 14;
    position: absolute;
    top: 6px;
    left: -28px;
    background-image: url('/assets/images/hoge-left.png');
    background-size: contain;
}
.entry h2::after {
    content: "";
    display: block;
    height: 32px;
    aspect-ratio: 11 / 14;
    position: absolute;
    top: 6px;
    right: -28px;
    background-image: url('/assets/images/hoge-right.png');
    background-size: contain;
}
.entry .initial {
    position: relative;
    padding: 21px;
    border: 6px solid var(--orange4);
    border-radius: 12px;
}
.entry h3 {
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
}
.entry h3 span {
    position: relative;
    display: inline-block;
    width: 12em;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 6px;
    line-height: 32px;
    color: var(--white);
    background-color: var(--orange);
}
.entry h4 {
    font-size: 18px;
    font-weight: bold;
    color: var(--orange);
    padding-left: 0.5em;
    margin-top: 21px;
}
.entry .standard h4 {
    color: var(--blue);
}
.entry h4::before {
    content: "□";
    color: var(--black);
}
.entry ul {
    margin-left: 34px;
}
.entry li::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    border-radius: 7px;
    background-color: var(--orange);
}
.entry .standard li::before {
    background-color: var(--blue);
}
.entry p.price {
    text-align: right;
    font-family: "Arial Narrow", sans-serif;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--orange);
    margin: 0;
}
.entry .standard p.price {
    color: var(--blue);
}
.entry p.price span {
    display: inline-block;
}
.entry p.price span.block {
    display: block;
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: var(--black);
}
.entry h5 {
    font-weight: bold;
    margin-top: 21px;
}
.entry h5::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: text-bottom;
    border-radius: 7px;
    background-color: var(--gray4);
}
.entry ul.inline {
    font-size: 12px;
    margin-left: 0;
}
.entry ul.inline li {
    display: inline-block;
    margin-left: 14px;
}
.entry ul.inline li::before {
    background-color: var(--blue);
}
.entry .center-line {
    position: relative;
    text-align: center;
    font-weight: bold;
    color: var(--orange);
    border-bottom: 1px solid var(--orange4);
    margin: 7px 0;
}
.entry .center-line span {
    display: inline-block;
    padding: 0 1em;
    background-color: var(--white);
    position: relative;
    top: 1em;
}
.entry hr {
    border-top: 1px solid var(--gray9);
    margin-top: 21px;
}
.entry .exp p {
    font-size: 12px;
    margin-top: 0;
}
.entry .plus {
    text-align: center;
    margin-top: 21px;
}
.entry .plus span {
    display: inline-block;
    font-size: 35px;
    color: var(--white);
    width: 44px;
    line-height: 44px;
    background-color: var(--blue);
    border-radius: 22px;
}
.entry .cost {
    position: relative;
    padding: 30px 21px 16px;
    border: 6px solid var(--purple4);
    border-radius: 12px;
    margin: 28px 0 28px;
}
.entry .cost h3 span {
    background-color: var(--purple);
}
.entry .cost .flex {
    display: flex;
    width: 280px;
    margin: 0 auto;
}
.entry .cost h4 {
    flex: 0 0 auto;
    padding: 0;
    color: var(--purple);
}
.entry .cost .price {
    flex: 1 1 auto;
    text-align: right;
    color: var(--purple);
    align-content: flex-end;
    margin: 0;
}
.entry .cost h4::before {
    content: "";
}
.entry .cost .month {
    font-size: 18px;
}
.entry .cost .tax {
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: right;
    width: 280px;
    margin: 0 auto;
}
.entry .info p {
    text-align: center;
    margin: 0;
}
.entry .bonus {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 2em;
}
.entry .bonus h6 span {
    display: inline-block;
    color: var(--white);
    background-color: var(--blue);
    padding: 0 1em;
    border-radius: 5px;
}
.entry .bonus p {
    color: var(--blue);
    margin-top: 0.5em;
}
@media screen and (min-width: 744px) {

    .entry {
        max-width: 50rem;
        margin: 0 auto;
    }
    .entry .header {
        margin-bottom: 70px;
    }
    .entry h2 {
        line-height: 40px;
        padding: 0 2em;
    }
    .entry h2::before {
        height: 40px;
        left: -35px;
    }
    .entry h2::after {
        height: 40px;
        right: -35px;
    }
    .entry h3 {
        top: -22px;
    }
    .entry h3 span {
        line-height: 40px;
    }
    .entry .pc-flex {
        display: flex;
    }
    .entry .light,
    .entry .standard {
        flex: 0 0 calc((100% - 70px) / 2);
    }
    .entry .light {
        display: flex;
        flex-direction: column;
    }
    .entry .light .price {
        margin-top: auto;
    }
    .entry .center-line {
        flex: 0 0 70px;
        align-content: center;
        justify-items: center;
        border-bottom: none;
        border-right: 1px solid var(--orange4);
        transform: translateX(-35px);
    }
    .entry .center-line span {
        padding: 1em 0;
        top: 0;
        right: -35px;
    }
    .entry .cost .tax,
    .entry .cost .flex {
        width: 280px;
        margin: 0 auto;
    }
}
/*

    contact

*/
#contact .contact {
    max-width: 768px;
    margin: 0 auto;
}
#contact article form {
    padding: 2em 0;
}
#contact article button[type="submit"] {
    width: 100%;
}
#contact article button[type="submit"].clear {
    color: var(--black);
    background-color: var(--grayc);
    background-image: none;
}
#contact form dl {
    margin: 0 0 2em;
}
#contact form dt {
    font-weight: bold;
}
#contact form dd {
    font-size: 1rem;
    border-bottom: 1px dotted var(--grayc);
    padding-bottom: 1em;
    margin-bottom: 1em;
}
.button2 {
    display: flex;
}
.button2 > div {
    flex: 0 0 50%;
    padding: 0 0.5rem;
}
/*

        conditions

*/
#conditions {
    .header {
        background-image: var(--back-gradient);
    }
    .header i {
        font-size: 16px;
        transition: transform 0.4s;
    }
    .header > div {
        display: flex;
        line-height: 40px;
        padding: 0 16px;
        max-width: 640px;
        margin: 0 auto;
    }
    .header .title {
        flex: 1 0 auto;
    }
    .header .title h1 {
        display: inline-block;
    }
    .header .opener {
        flex: 0 0 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .body {
        max-width: 640px;
        padding: 24px 16px;
        margin: 0 auto;
    }
    .pcbox_head {
        display: none;
    }
    .body form > div {
        line-height: 40px;
        border: 2px solid var(--graya);
        border-radius: 8px;
        display: flex;
        margin-bottom: 14px;
    }
    .body .icon,
    .body .arrow {
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .body .data,
    .body input {
        flex: 1 1 auto;
        color: var(--gray6);
        padding: 0;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .body input::placeholder {
        color: var(--gray6);
    }
    .body .icon i {
        font-size: 22px;
    }
    .body .arrow i {
        color: var(--gray9);
    }
    .body button {
        line-height: 42px;
    }
}
#conditions.close {
    .opener  i {
        transform: rotate(180deg);
    }
}
@media screen and (min-width: 744px) {
    #conditions {
        .pcbox {
            margin: 1rem;
            border: 1px solid var(--purple);
            border-radius: 7px;
        }
        .pcbox_head {
            display: block;
            text-align: center;
            font-size: 1.25rem;
            line-height: 2;
            color: var(--purple);
            background-image: var(--back-gradient);
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }
        .pcbox_body {
            padding: 2em 1.5em;
        }
    }
}
/*

        banner-list

*/
.banner-box {
    background-color: var(--graye);
    padding-bottom: 1em;
}
#banner-list {
    padding-top: 0.5rem;
}
.shop-count {
    font-size: 0.875rem;
    padding: 2rem 0.5rem 0;
    margin: 0 auto;
}
.shop-count .all {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--blue);
}
.shop-count .current {
    color: var(--gray6);
}
.banner {
    border-radius: 0.5em;
    background-color: var(--white);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    padding: 1em 1.25em;
    margin: 0 0 2em;
}
.banner-catch {
    font-size: 1.0625rem;
    font-weight: bold;
    line-height: 1.5;
    color: var(--purple);
}
.banner-name {
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.banner-info {
    padding: 1em 0.5em 0;
    display: flex;
    align-items: center;
}
.banner-info > div {
    width: 100%;
}
.banner-query-condition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--gray4);
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--gray9);
}
.banner-query-condition dt {
    flex: 0 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.5em;
}
.banner-query-condition dt i {
    font-size: 1.4rem;
}
.banner-query-condition dd {
    flex: 0 0 calc(100% - 2rem);
}
.banner-query-condition ul {
    line-height: 1.75;
}
.banner-query-condition dd li {
    display: inline-block;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--blue);
    background-color: var(--white);
    padding: 0 0.5em;
    border: 1px solid var(--blue);
    border-radius: 0.36em;
}
.banner-query-condition dd li.enable {
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid var(--blue);
}
.banner-button {
    display: flex;
    padding: 1em 0 0.5em;
}
.favorite-button {
    position: relative;
    flex: 0 0 50%;
    padding-right: 0.5rem;
}
.favorite-button > button {
    width: 100%;
    line-height: 2.5;
    background-color: var(--graye);
    border: 2px solid var(--grayc);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.favorite-button > button i {
    font-size: 1.5rem;
    color: var(--purple);
    margin-right: 0.25em;
}
.favorite-button > button.disabled { /* ログインしていない */
    color: var(--gray6);
}
.favorite-button > button.disabled i {
    color: var(--gray9);
}
.favorite-button > button.registered { /* 登録済み */
    background-color: var(--white);
}
.favorite-button > button.unregistered { /* 未登録 */
}
.detail-button {
    flex: 0 0 50%;
    padding-left: 0.25rem;
}
.detail-button a {
    width: 100%;
    line-height: calc(2.5em + 4px);
    border-radius: 0.5em;
}
.go-new, .go-query {
    text-align: center;
}
.go-new a, .go-query a {
    display: inline-block;
    line-height: 2.5;
    padding: 0 2em;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 1.25em;
}
.go-query a {
    background-color: var(--purple);
    margin: 1.5em 0;
}
@media screen and (min-width: 412px)
{
    .banner-query-condition dd li {
        font-size: 0.75rem;
    }
}
@media screen and (min-width: 744px)
{
    .banner-half {
        display: flex;
    }
    .banner-image {
        flex: 0 0 50%;
        padding-right: 1rem;
    }
    .banner-info {
        padding: 0;
        flex: 1 0 50%;
    }
    .go-new, .go-query {
        font-size: 1rem;
    }
}
@media screen and (min-width: 768px)
{
    .banner-catch {
        font-size: 1.125rem;
    }
    .banner-name {
        font-size: 1rem;
    }
    .banner-query-condition {
        font-size: 1rem;
        line-height: 2.3;
    }
}
@media screen and (min-width: 1024px)
{
    .shop-count-container {
    }
    #banner-list-new,
    #banner-list-random {
        padding: 0.5rem 1rem 0;
    }
    .banner {
        padding: 1.75rem;
    }
    .banner-catch {
        font-size: 1.25rem;
    }
    .banner-name {
        font-size: 1.125rem;
    }
    .banner-info {
        padding: 0 0 0 0.75rem;
    }
    .banner-query-condition {
        font-size: 1.125rem;
    }
    .banner-query-condition dd li {
        font-size: 0.875rem;
    }
}
/*

    new/pick

*/
.tab-wraper {
    display: flex;
    max-width: 32rem;
}
.tab-wraper > div {
    flex: 0 0 calc(100% / 3);
}
.tab-wraper > div.tab-style,
.tab-wraper > div.tab-new,
.tab-wraper > div.tab-random,
.tab-wraper > div.tab-city {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.tab-wraper div a,
.tab-wraper div div {
    display: block;
    position: relative;
    font-size: 0.875rem;
    line-height: 2.5;
    text-align: center;
    color: var(--gray6);
    background-color: var(--white);
    border-radius: 0.5em;
    cursor: pointer;
}
.tab-wraper div.tab-style div.checked {
    color: var(--white);
    background-color: var(--orange4);
    background-image: var(--gradient);
    cursor: default;
}
.tab-wraper div.tab-style div.checked::after {
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    content: "";
    border-top: 0.75em solid #E5B8B1;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    transform: translateX(-50%);
}
.tab-wraper div.tab-new div.checked {
    color: var(--white);
    background-color: var(--red);
    cursor: default;
}
.tab-wraper div.tab-new div.checked::after {
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    content: "";
    border-top: 0.75em solid var(--red);
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    transform: translateX(-50%);
}
.tab-wraper div.tab-random div.checked {
    color: var(--white);
    background-color: var(--blue);
    cursor: default;
}
.tab-wraper div.tab-random div.checked::after {
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    content: "";
    border-top: 0.75em solid var(--blue);
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    transform: translateX(-50%);
}
.tab-wraper div.city-opener {
    background-color: #FCFCF0;
}
#list-new,
#list-random {
    display: none;
}
#list-style,
#list-new,
#list-random {
    padding: 1rem 0 ;
}
#list-style .container10,
#list-new .container10,
#list-random .container10 {
    padding: 0.25rem 0.5rem;
}
#banner-list-style,
#banner-list-new,
#banner-list-random {
    padding: 0.5rem 0.5rem 0;
    margin: 0 auto;
}
@media screen and (min-width: 744px)
{
    .tab-wraper > div.tab-style,
    .tab-wraper > div.tab-new,
    .tab-wraper > div.tab-random {
        padding-left: 0;
        padding-right: 0.5rem;
    }
}
/*

    pagination

*/
.pagination {
    --pagination-color: #ffffff;
    --pagination-back-color: #cd94ba;
    text-align: center;
    line-height: 2em;
    padding: 1rem 0 2rem;
}
.pagination div,
.pagination ul,
.pagination li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.pagination div,
.pagination li {
    width: 2em;
    height: 2em;
    border-radius: 1em;
}
.pagination li {
}
.pagination li.current {
    color: var(--pagination-color);
    background-color: var(--pagination-back-color);
}
.pagination div a,
.pagination li a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    color: inherit;
}
.pagination .prev a,
.pagination .next a {
    position: relative;
    color: transparent;
}
.pagination .prev a::before,
.pagination .next a::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1.5px solid black;
    border-left: 1.5px solid black;
}
.pagination .prev a::before {
    transform: translate(0, -50%) rotate(-45deg);
}
.pagination .next a::before {
    transform: translate(-0.5em, -50%) rotate(135deg);
}
/*

        modal-location / career / employ

*/
#modal-location .modal-body,
#modal-career .modal-body,
#modal-employ .modal-body {
    height: calc(100dvh - 42px - 63px);
    text-align: left;
    padding: 0;
}
#modal-career .career li,
#modal-employ .employ li {
    padding: 0.25em 2em;
    border-bottom: 1px solid var(--grayc);
}
#modal-career .career label,
#modal-employ .employ label {
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
#modal-career .career li input,
#modal-employ .employ li input {
    margin-right: 0.5em;
}
#modal-location .pref {
    background-color: var(--graye);
}
#modal-location .area {
    background-color: var(--white);
    background-image: radial-gradient(var(--graye) 35%, transparent 36%), radial-gradient(var(--graye) 35%, transparent 36%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;}
#modal-location .city {
    background-color: var(--white);
}
#modal-location input[type="checkbox"] {
    margin-right: 0.25em;
}
#modal-location div.ls {
    padding: 0.25em 1em 0.25em 2em;
    border-bottom: 1px solid var(--grayc);
}
#modal-location .pref div.ls,
#modal-location .area div.ls {
    display: flex;
}
#modal-location .area div.ls {
    padding-left: 4em;
}
#modal-location .city div.ls {
    padding-left: 6em;
    padding-right: 4em;
}
#modal-location label {
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 1em 0 0;
    cursor: pointer;
}
#modal-location div.ar {
    flex: 0 0 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s;
}
#modal-location div.ar.open {
    transform: rotate(90deg);
}
.modal-footer {
    height: 63px;
    text-align: center;
    padding: 10.5px;
    background-image: var(--back-gradient);
}
.modal-footer .clear {
    font-weight: bold;
    line-height: 38px;
    background-color: var(--white);
    border: 2px solid var(--grayc);
    margin: 0 8px;
}
.modal-footer .submit {
    font-weight: bold;
    line-height: 38px;
    padding: 0 42px;
    margin: 0 8px;
    border: 2px solid var(--white);
    color: var(--white);
    background-image: var(--gradient);
    width: auto;
}
@media screen and (min-width: 744px)
{
    #modal-location .modal-body,
    #modal-career .modal-body,
    #modal-employ .modal-body {
        height: auto;
        max-height: calc(90vh - 42px - 63px);
    }
}
/*

        modal-querytype / station

*/
#modal-station .modal-body {
    height: calc(100vh - 42px - 113.5px);
}
#modal-station-pref .modal-body,
#modal-station-area .modal-body,
#modal-station-city .modal-body,
#modal-querytype .modal-body {
    height: calc(100dvh - 42px - 63px);
}
#modal-station dl,
.radio {
    display: flex;
    flex-wrap: wrap;
    line-height: 3rem;
    cursor: pointer;
}
#modal-station dt,
.radio dt {
    flex: 0 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px dotted var(--gray9);
}
#modal-station dd,
.radio dd {
    flex: calc(100% - 3rem);
    text-align: left;
    border-bottom: 2px dotted var(--gray9);
}
.half-button {
    display: flex;
    align-items: center;
}
.half-button button {
    min-width: 7.2em;
    background-color: var(--white);
    cursor: pointer;
    margin: 0 auto;
}
.half-button button.submit:disabled {
    background-color: var(--graye);
    background-image: none;
    cursor: default;
}
#modal-station .modal-footer {
    height: 113.5px;
}
.select-station {
    display: flex;
    text-align: left;
    background-color: var(--white);
    padding: 0.5em;
    margin: 0 0.75rem 0.75rem;
}
.select-station .select-title {
    flex: 0 0 9.5em;
}
.select-station .select-name {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (min-width: 744px)
{
    #modal-station .modal-body {
        height: auto;
        max-height: calc(90vh - 42px - 113.5px);
    }
    #modal-station-pref .modal-body,
    #modal-station-area .modal-body,
    #modal-station-city .modal-body,
    #modal-querytype .modal-body {
        height: auto;
        max-height: calc(90vh - 42px - 63px);
    }
    #modal-station .modal-footer .submit {
        margin-right: 34px;
    }
}
/*
    shop
*/
#detail-article {
    font-size: 1rem;
}
/*
    shop banner
*/
.ds-banner {}
.ds-banner-wrap {}
.ds-banner-image {}
.ds-banner-summary {}
.ds-banner-header {
    display: flex;
    padding: 1em;
    border-bottom: 1px solid var(--grayc);
}
.ds-banner-logo {
    flex: 0 0 22%;
}
.ds-banner-catch {
    flex: 1 1 auto;
    font-weight: bold;
    padding-left: 1em;
}
.ds-banner-name {
    font-size: 1.125rem;
    color: var(--purple);
}
.ds-banner-phrase {
    font-size: 1.0625rem;
    line-height: 1.5;
}
.ds-banner-query-items {
    padding: 1em 0 1.5em 1em;
}
.ds-banner-query {
    display: flex;
    flex-wrap: wrap;
}
.ds-banner-query dt {
    flex: 0 0 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75em;
    margin-bottom: 0.5rem;
}
.ds-banner-query dt i {
    font-size: 1.25em;
}
.ds-banner-query dd {
    flex: 0 0 calc(100% - 1.25em);
    padding-left: 1em;
    margin-bottom: 0.5rem;
}
.ds-banner-query dd ul {
    font-size: 0.75em;
}
.ds-banner-query dd li {
    display: inline-block;
    padding-right: 0.1em;
    line-height: 2;
}
.ds-banner-query dd li span {
    display: inline-block;
    line-height: 1.5em;
    color: var(--blue);
    background-color: var(--white);
    border: 1px solid var(--blue);
    border-radius: 0.4em;
    padding: 0 0.5em;
}
.ds-banner-query dd li.enable span {
    color: var(--white);
    background-color: var(--blue);
}
/*
    shop nav
*/
.ds-nav {}
.ds-nav-anker-wrap {
    background-color: var(--graye);
}
.ds-nav-anker,
.ds-nav-anker3 {
    display: flex;
    font-size: 0.875em;
    text-align: center;
    line-height: 50px;
    width: 100%;
    max-width: calc(896px / 2 - 0.5rem);
}
.ds-nav-anker li {
    flex: 0 0 calc(100% / 4);
}
.ds-nav-anker3 li {
    flex: 0 0 calc(100% / 3);
}
.ds-nav-anker li.current,
.ds-nav-anker3 li.current {
    color: var(--purple);
    border-bottom: 3px solid var(--purple);
}
.ds-nav-anker li a,
.ds-nav-anker3 li a {
    display: inline-block;
    width: 100%;
}
.ds-nav-task-wrap {
    background-color: var(--white);
}
.ds-nav-task {
    max-width: calc(896px / 2 - 0.5rem);
}
.ds-nav-task-buttons .favorite-button .balloon {
    top: -42px;
}
.ds-nav-task-buttons .apply-button .balloon {
    top: -42px;
    left: auto;
    right: 0;
}
/*
    shop detail
*/
.ds-detail {
    background-color: var(--graye);
}
.ds-detail p {
    font-size: 0.875rem;
}
.ds-detail .borderbox {
    background-color: var(--white);
}
.ds-concept {
    padding: 1.5rem 1rem;
}
.ds-concept .headline {
    font-weight: bold;
    line-height: 1.5;
    padding-bottom: 1rem;
}
.ds-concept .youtube-wrap {
}
.ds-concept .youtube-video {
    width: 100%;
    height: auto;
    vertical-align: middle;
    aspect-ratio: 16 / 9;
}
.ds-concept .image {}
.ds-headline {
    font-weight: bold;
    line-height: 2.5;
    padding: 0 1rem;
    background-image: var(--back-gradient);
}
.ds-sub-headline {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: bold;
    line-height: 1.3;
    padding: 0 0.5rem 0 1rem;
    margin: 1rem 0;
    background-image: linear-gradient(transparent 55%, var(--orange8) 0%);
}
.ds-dl {
    padding: 0.5rem 1rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
}
.ds-dl dt {
    flex: 0 0 7em;
    font-weight: bold;
    color: var(--purple);
    padding: 1rem 0.5em 1rem 0;
    border-bottom: 1px solid var(--grayc);
}
.ds-dl dd {
    flex: 0 0 calc(100% - 7em);
    padding: 1rem 0;
    border-bottom: 1px solid var(--grayc);
}
.ds-dl2 {
    padding: 0.5rem 1rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.ds-dl2 dt {
    font-weight: bold;
    color: var(--purple);
    padding-top: 1rem;
}
.ds-dl2 dd {
    padding: 0.25rem 0 1rem;
    border-bottom: 1px dotted var(--gray9);
    overflow: hidden;
}
.ds-dl2 a {
    text-decoration: underline;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ds-message {
    margin: 1rem;
    border-bottom: 1px solid var(--grayc);
}
.ds-message > div {
    width: 80%;
    margin: 0 auto;
}
.ds-message > p {}
p.ds-message-text {
    padding-bottom: 1rem;
    margin: 1rem;
    border-bottom: 1px solid var(--grayc);
}
.ds-map {
    aspect-ratio: 16 / 9;
}
.ds-map iframe {
    width: 100%;
    height: 100%;
}
.ds-sns {
    font-size: 1.5rem;
    text-align: center;
    padding: 1em 0;
}
.ds-sns a {
    display: inline-block;
    margin: 0 0.25rem;
}
.ds-footer-buttons {
    display: flex;
    padding: 0.5rem 0.5rem 1.5rem;
}
.ds-footer-buttons > div {
    flex: 0 0 50%;
    padding: 0.5rem;
}
#detail-article div.apply-button {
    position: relative;
}
#detail-article div.apply-button button {
    font-weight: normal;
    line-height: calc(2.5em + 4px);
    width: 100%;
}
#detail-article div.apply-button button.disabled {
    line-height: 2.5em;
    outline: 2px solid var(--grayc);
}
.ds-footer-buttons .apply-button .balloon {
    left: auto;
    right: 0;
}
@media screen and (min-width: 392px)
{
    .ds-banner-query dd ul {
        font-size: 0.8125em;
    }
}
@media screen and (min-width: 420px)
{
    .ds-banner-query dd ul {
        font-size: 0.875em;
    }
}
@media screen and (min-width: 744px)
{
    .ds-banner-wrap {
        padding: 1rem;
        display: flex;
    }
    .ds-banner-image {
        flex: 0 0 50%;
        padding-right: 1rem;
    }
    .ds-banner-summary {
        flex: 0 0 50%;
    }
    .ds-banner-header {
        padding-top: 0;
    }
    .ds-banner-query-items {
        padding-bottom: 0;
    }
    .ds-banner-query dd ul {
        font-size: 0.75rem;
    }
    .ds-nav {
        display: flex;
    }
    .ds-nav-anker-wrap {
        flex: 0 0 50%;
        display: flex;
        justify-content: flex-end;
    }
    .ds-nav-anker {
        font-size: 1rem;
        height: calc(2.3em + 4px);;
    }
    .ds-nav-task-wrap {
        flex: 0 0 50%;
    }
    .ds-nav-task-buttons{
        display: flex;
        padding: 0 0.5rem;
    }
    .ds-nav-task-buttons > div {
        flex: 0 0 50%;
        padding: 0 0.5rem;
    }
    #detail-article div.favorite-button button {
        line-height: 2.3em;
        margin-bottom: 0.75rem;
    }
    #detail-article div.apply-button button {
    line-height: calc(2.3em + 4px);
        margin-bottom: 0.75rem;
    }
    .ds-detail {
        padding: 2rem 0;
    }
    .ds-detail .borderbox {
        max-width: calc(896px - 1rem);
        margin: 0 1rem;
        border-radius: 1em;
        box-shadow: 0 0 3px var(--purple);
    }
    .ds-dl dt {
        flex: 0 0 8em;
    }
    .ds-dl dd {
        flex: 0 0 calc(100% - 8em);
    }
    .ds-dl2 {
        display: flex;
        flex-wrap: wrap;
    }
    .ds-dl2 dt {
        flex: 0 0 8em;
        padding: 1rem 0.5em 1rem 0;
        border-bottom: 1px solid var(--grayc);
    }
    .ds-dl2 dd {
        flex: 0 0 calc(100% - 8em);
        padding: 1rem 0;
    }
    .ds-message {
        display: flex;
    }
    .ds-message > div {
        flex: 50%;
        padding-right: 1em;
    }
    .ds-message > p {
        flex: 50%;
        margin-top: 0;
    }
    .ds-map {
        aspect-ratio: 8 / 3;
    }
}
@media screen and (min-width: 768px)
{
    .ds-banner-query dd ul {
        font-size: 0.8125rem;
    }
    .ds-detail .borderbox {
        max-width: calc(896px - 2rem);
        margin: 0 1rem;
    }
    .ds-detail p {
        font-size: 1rem;
    }
    .ds-concept {
        padding: 2rem 1.5rem;
    }
    .ds-dl,
    .ds-dl2 {
        font-size: 1rem;
        padding: 1rem 1.5rem 2rem;
    }
    .ds-concept .headline {
        font-size: 1.125rem;
    }
    .ds-headline {
        font-size: 1.125rem;
        padding-left: 1.5rem;
    }
    .ds-sub-headline {
        font-size: 1.0625rem;
        padding-left: 1.5rem;
    }
    .ds-message {
        margin: 1rem 1.5rem;
    }
    p.ds-message-text {
        margin: 1rem 1.5rem;
    }
}
@media screen and (min-width: 896px)
{
    .ds-banner-query dd ul {
        font-size: 0.875rem;
    }
    .ds-dl,
    .ds-dl2 {
        padding: 1.5rem 2rem 2.5rem;
    }
    .ds-dl dt,
    .ds-dl2 dt {
        flex: 0 0 9em;
    }
    .ds-dl dd,
    .ds-dl2 dd {
        flex: 0 0 calc(100% - 9em);
    }
    .ds-detail .borderbox {
        margin: 0 auto;
    }
    .ds-concept {
        padding: 3rem 2rem;
    }
    .ds-concept p {
        margin-top: 2rem;
    }

    .ds-headline {
        padding-left: 2rem;
    }
    .ds-sub-headline {
        padding-left: 2rem;
    }
    .ds-message {
        margin: 1.5rem 2rem;
    }
    p.ds-message-text {
        margin: 1.5rem 2rem;
    }
}
/*

    banner staff/price list

*/
#staff ul,
#price-list ul {
    padding: 1.5rem 1rem;
}
#staff li,
#price-list li {
    display: flex;
}
#staff li:not(:last-child),
#price-list li:not(:last-child) {
    margin-bottom: 1rem;
}
#staff .img,
#price-list .img {
    flex: 0 0 6rem;
}
#staff .txt,
#price-list .txt {
    flex: 1 1 auto;
    padding-left: 0.5rem;
}
#price-list dt {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.5;
    color: #DBA1CB;
}
#staff .txt {
    position: relative;
}
#staff .txt .name_wrap {
    display: flex;
}
#staff .txt .name_wrap .name {
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.5;
    color: #DBA1CB;
}
#staff .txt .name_wrap .icon {
    flex: 0 0 32px;
}
#staff .txt .name_wrap .icon a {
    text-decoration: none;
}
#staff .txt .name_wrap .icon a:focus {
    outline: none;
}
#staff .txt .name_wrap .icon i {
    font-size: 1.5rem;
    margin: 0 0.25rem;
}
#staff .txt .name_wrap .icon i.instagram {
    color: #614DC5;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
#price-list dd {
    font-size: 0.8125rem;
    font-weight: bold;
}
#staff p,
#price-list p {
    font-size: 0.75rem;
    margin: 0;
}
@media screen and (min-width: 768px)
{
    #staff ul,
    #price-list ul {
        padding: 2rem 1.5rem;
    }
    #price-list dt,
    #staff .txt div {
        font-size: 1rem;
    }
    #staff p,
    #price-list p {
        font-size: 0.875rem;
    }
}
@media screen and (min-width: 896px)
{
    #staff ul,
    #price-list ul {
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 2rem;
    }
    #staff li,
    #price-list li {
        flex: 0 0 50%;
        padding-left: 1rem;
    }
    #staff li:nth-child(2n+1),
    #price-list li {
        padding-left: 0;
        padding-right: 1rem;
    }
}
/*

        page-header for chat

*/
@media screen and (max-width: 744px)
{
    #message #page-header .wrapper {
        display: flex;
    }
    #message #page-header .chat-back {
        flex: 0 0 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-12px);
    }
}
/*
        chat
*/
#chat {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
}
#chat ul {
    margin: 0;
}
#chat_shopBox {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
#chat_messageBox {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#chat_shops li {
    display: flex;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--grayc);
    cursor: pointer;
}
#chat_shops li.disable {
    background-color: var(--graye);
}
#chat_shops li.current {
    background-color: var(--orange9);
}
#chat_shops .logo {
    flex: 0 0 4rem;
    height: 4rem;
    overflow: hidden;
    display: flex;
    align-items: center;
}
#chat_shops .text {
    position: relative;
    flex: 0 0 calc(100% - 6rem);
    overflow: hidden;
}
#chat_shops .arrow {
    position: relative;
    flex: 0 0 2rem;
}
#chat_shops .arrow::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border-top: 2px solid var(--gray6);
    border-right: 2px solid var(--gray6);
    transform: translate(-50%, -50%) rotate(45deg);
}
#chat_shops .header {
    display: flex;
    line-height: 36px;
}
#chat_shops .header h3 {
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: bold;
    padding-left: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chat_shops .header .date {
    flex: 0 0 3rem;
}
#chat_shops .text p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding-left: 1rem;
    line-height: 28px;
}
#chat_shops .text .badge {
    top: auto;
    bottom: 0.25rem;
}
#more_shop,
#more_message {
    text-align: center;
    cursor: pointer;
    margin: 2rem 0;
}
#more_shop span,
#more_message span {
    display: inline-block;
    position: relative;
    font-weight: bold;
    line-height: 2.5;
}
#more_shop span::after,
#more_message span::after {
    position: relative;
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid var(--gray6);
    border-bottom: 2px solid var(--gray6);
    transform: translate(0.5em, -50%) rotate(45deg);
}
#chat_shopBox .message_info {
    text-align: center;
    margin: 2rem 0;
}
#chat_shopBox .line-info {
    text-align: center;
    margin: 1rem 0;
}
#chat_shopBox .line-login-body {
    width: 20rem;
    margin: 1rem auto;
}
#chat_shopBox .line-info-body {
    text-align: center;
    margin: 1rem 0;
}
#chat_messageShop {
    display: flex;
    padding: 0.75rem;
    background-color: var(--white);
    border-bottom: 1px solid var(--gray9);
}
#chat_messageShop div {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#chat_messageShop h3 {
    flex: 0 0 calc(100% - 2.75rem);
    font-size: 1rem;
    font-weight: bold;
    line-height: 2.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 1em;
}
#chat_chats {
    font-size: 0.875rem;
    padding-bottom: 2rem;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
#chat_chats .notice {
    text-align: center;
    font-weight: bold;
    color: var(--purple);
}
#chat_chats .date {
    text-align: center;
}
#chat_chats .date span {
    display: inline-block;
    padding: 0 1em;
    color: var(--white);
    background-color: var(--gray6);
    border-radius: 1em;
}
.shop2member,
.member2shop {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 1rem 1.5rem;
}
.shop2member div.message,
.member2shop div.message {
    position: relative;
    flex: 0 0 65%;
    line-height: 1.75;
    color: var(--white);
    background-color: var(--blue);
    border-radius: 18px;
    padding: 0.5em 1em;
    margin: 0;
    min-height: 2em;
}
.member2shop div.message {
    color: var(--black);
    background-color: var(--graye);
}
.shop2member div.time,
.member2shop div.time {
    flex: 1 0 auto;
    font-size: smaller;
    padding: 0 1em;
}
.shop2member div.message::before {
    position: absolute;
    left: -0.7rem;
    bottom: 1rem;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-right: 1rem solid var(--blue);
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    transform: rotate(20deg);
}
.member2shop div.message::before {
    position: absolute;
    right: -0.7rem;
    bottom: 1rem;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 1rem solid var(--graye);
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    transform: rotate(-20deg);
}
.member2shop div.time {
    text-align: right;
}
.shop2member div.unread {
    position: absolute;
    bottom: -0.5em;
    left: 2.5rem;
    font-size: 0.75rem;
    color: var(--gray6);
}
#message-send {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background-image: var(--gradient);
    padding: 0.75em 0.25em 0.75em 0.75em;
    transition: height 0.3s;
    z-index: 1;
    overflow: hidden;
}
#message-send.disable {
    height: 0;
    padding: 0;
}
#message-send .message {
    flex: 1 1 calc(100% - 36px);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 3.4em;
    max-height: 7.9em;
    overflow-y: scroll;
    padding: 0.2em 0.5em;
    margin: 0;
    border-radius: 0.5em;
    background-color: var(--white);
}
#message-send div.send {
    flex: 0 0 36px;
    font-size: 26px;
    line-height: 1.25;
    text-align: center;
    color: var(--white);
}
#message-send div.send i {
    cursor: pointer;
}
@media screen and (min-width: 744px)
{
    #chat {
        display: flex;
    }
    #chat_shopBox {
        flex: 0 0 50%;
        width: 50%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        border-right: 1px solid var(--grayc);
    }
    #chat_shops .text {
        flex: 1 1 calc(50vw - 8rem);
        width: calc(50vw - 8rem);
    }
    #chat_messageBox {
        flex: 0 0 50%;
        width: 50%;
    }
    #message-send {
        left: 50%;
        width: 50%;
        max-width: 616px;
    }
}
@media screen and (min-width: 1232px)
{
    #chat_shopBox {
        flex: 0 0 616px;
        width: 616px;
        border-left: 1px solid var(--grayc);
    }
    #chat_messageBox {
        flex: 0 0 616px;
        width: 616px;
        border-right: 1px solid var(--grayc);
    }
}
/*

         basic-modal

*/
#basic-modal {

    .modal-body {
        padding: 24px;
    }
    label {
        margin: 1rem 0;
    }
    select {
        margin-bottom: 0.5em;
    }
    .body {
        position: relative;
    }
    #basic_alert {
        display: none;
        position: absolute;
        top: -20px;
        right: 0;
        padding: 0.5em 1em;
        color: var(--white);
        background-color: var(--purple);
        border-radius: 0.5em;
    }
}
/*

         Apply

*/
#apply select {
    margin-bottom: 0.5em;
}
#apply dt {
    font-weight: bold;
}
#apply dd {
    font-size: 16px;
    border-bottom: 1px dotted var(--gray9);
    margin-bottom: 1em;
}
/*

         MyPage

*/
#mypage {

    .container.wrapper {
        padding: 0;
    }
    .profile .phone_inner {
        background-color: var(--orange9);
    }
    .phone_inner h2 {
        position: relative;
        color: var(--white);
        background-color: var(--blue);
        padding: 0 16px;
        line-height: 30px;
    }
    .phone_inner h2 span {
        position: absolute;
        top: 50%;
        right: 16px;
        color: var(--blue);
        background-color: var(--white);
        padding: 0 24px;
        line-height: 24px;
        transform: translateY(-50%);
        border-radius: 8px;
    }
    .phone_inner .body {
        padding: 24px 24px 36px;
    }
    .profile_image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin: 0 auto 8px;
        overflow: hidden;
    }
    .profile_attr {
        text-align: center;
        color: var(--purple);
    }
    .profile_name {
        display: block;
        text-align: center;
        color: var(--blue);
        font-size: 24px;
    }
    .profile_sns {
        text-align: center;
    }
    .profile_sns li {
        display: inline-block;
        padding: 0 0.25em;
        font-size: 24px;
    }
    .profile_sns li a {
        color: inherit;
        text-decoration: none;
    }
    .profile_sns li i {
        color: var(--blue);
    }
    .profile_sns li i.i-instagram {
        background: none;
        background-clip: border-box;
        -webkit-text-fill-color: currentcolor;
        text-fill-color: currentcolor;
    }
    .profile_profile {
        background-color: var(--white);
        padding: 0.5em;
        margin: 1em auto;
        border-radius: 8px;
    }
    .profile_profile dt {
        color: var(--purple);
        font-size: 16px;
    }
    .profile_profile dd {
        font-size: 14px;
    }
    a.submit {
        width: 100%;
    }
    .mypage_linelogin {
        text-align: center;
        margin: 2em;
    }
    .mydata h2 {
        background-color: var(--grayc);
    }
    .basic dl {
        margin-bottom: 2em;
    }
    .basic dt {
        font-weight: bold;
    }
    .basic dd {
        padding-left: 1em;
        border-bottom: 1px dotted var(--gray9);
        margin-bottom: 1em;
    }
    .basic p {
        margin-bottom: 1em;
    }
    #quit-opener {
        width: 100%;
    }
    .basic_edit .body select {
        margin-bottom: 0.5em;
    }
}
#modal-quit {
    width: 100%;
    max-width: 400px;
}
#modal-quit .modal-body {
    height: calc(100dvh - 42px - 63px);
    padding: 24px;
}
@media screen and (min-width: 744px)
{
    #mypage .container.wrapper {
        display: flex;
        max-width: 864px;
        margin: 0 auto;
    }
    #mypage .container.wrapper > div:first-child {
        flex: 0 0 50%;
        padding: 24px 12px 24px 24px;
    }
    #mypage .container.wrapper > div:last-child {
        flex: 0 0 50%;
        padding: 24px 24px 24px 12px;
    }
    #mypage .basic_edit {
        padding: 24px 0;
    }
    #mypage .phone_outer {
        max-width: 396px;
        padding: 22px 18px 44px;
        margin: 0 auto;
        border: 3px solid var(--gray9);
        border-radius: 22px;
    }
    #mypage .phone_inner {
        border: 1px solid var(--grayc);
    }
    #modal-quit .modal-body {
        height: auto;
    }
}
/*

    regist-profile

*/
#profile_edit,
#regist-profile {

    h2 {
        position: relative;
        font-size: 16px;
        font-weight: bold;
        color: var(--white);
        background-color: var(--blue);
        line-height: 36px;
        padding: 0 24px;
    }
    h2 select {
        position: absolute;
        top: 3px;
        right: 16px;
        padding: 6px 16px;
        color: var(--gray6);
        background-color: var(--white);
    }
    p {
        margin: 1em 0;
    }
    p.warning {
        margin: 0;
    }
    .profile_edit {
        max-width: 880px;
        margin: 0 auto;
    }
    .editor {
        flex: 0 0 428px;
    }
    .phone_inner {
        max-width: 392px;
        background-color: var(--orange9);
    }
    .body {
        padding: 24px 24px 36px;
    }
    .profile_image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin: 0 auto;
        overflow: hidden;
        cursor: pointer;
    }
    .profile_attr {
        text-align: center;
    }
    .profile_attr select {
        display: block;
        padding: 1em 1em 0.5em;
        margin: 0 auto;
        color: var(--purple);
        background-color: transparent;
        cursor: pointer;
        transform: translateX(6px);
    }
    .profile_name input {
        display: block;
        text-align: center;
        color: var(--blue);
        font-size: 24px;
        width: 100%;
        background-color: transparent;
        margin: 0 auto;
        line-height: 1.75;
    }
    .profile_name input::placeholder {
        font-size: 24px;
        color: var(--blue);
    }
    .profile_sns_area {
        text-align: center;
        margin: 6px 0 24px;
    }
    .profile_sns li {
        display: inline-block;
        padding: 0 0.25em;
        font-size: 28px;
    }
    .profile_sns li i {
        color: var(--blue);
        cursor: pointer;
    }
    .profile_sns li i.i-instagram {
        background: none;
        background-clip: border-box;
        -webkit-text-fill-color: currentcolor;
        text-fill-color: currentcolor;
    }
    .profile_sns li i.disable {
        color: var(--gray9);
    }
    .profile_profile label {
        background-color: var(--white);
        padding: 0.5em;
        margin: 1em auto;
        border-radius: 8px;
    }
    .profile_profile input {
        color: var(--purple);
        font-size: 16px;
        padding: 0;
        background-color: transparent;
        line-height: 1.75;
    }
    .profile_profile .fit-height {
        background-color: transparent;
        padding: 0;
        line-height: 1.5;
    }
    .profile_profile  textarea {
        padding: 0;
    }
    .add-del {
        display: flex;
        justify-content: flex-end;
        margin: 1em 0;
    }
    .add-del i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        color: var(--white);
        background-color: var(--red);
        margin-left: 0.5em;
    }
    .add-del i.i-plus {
        background-color: var(--blue);
    }
}
#sns-modal {
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}
#sns-modal .modal-body {
    height: auto;
    padding: 24px;
}
#sns-modal input {
    margin-bottom: 0.5em;
}
@media screen and (min-width: 744px)
{
    #profile_edit .profile_edit,
    #regist-profile .profile_edit {
        display: flex;
        margin: 24px auto;
    }
    #profile_edit .phone_outer,
    #regist-profile .phone_outer {
        max-width: 396px;
        padding: 22px 18px 44px;
        border: 3px solid var(--gray9);
        border-radius: 22px;
        margin: 0 auto;
    }
    #profile_edit .phone_inner,
    #regist-profile .phone_inner {
        border: 1px solid var(--gray9);
    }
    #sns-modal {
        transform: translate(-50%);
    }
    #profile_edit .profile_profile  textarea,
    #regist-profile .profile_profile  textarea {
        font-size: 14px;
    }
}
/*

        profile image modal

*/
#image-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 374px;
    height: auto;
}
#image-modal.hidden {
    left: -100%;
}
#image-modal .modal-body {
    position: relative;
    height: auto;
    background-image: linear-gradient(to right, rgba(205,179,212,0.2), rgba(255,190,136,0.2));
}
#p2_imgbox {
    position: relative;
    width: 370px;
    height: 370px;
    overflow: hidden;
    margin: 0 auto;
}
#p2_backbox {
    position: relative;
    width: 370px;
    height: 370px;
}
#p2_backbox > div:nth-child(1) {
/* #p_rotel */
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    z-index: 1;
}
#p2_backbox > div:nth-child(2) {
/* space */
    display: none;
}
#p2_backbox > div:nth-child(3) {
/* #p_up */
    position: absolute;
    top: 0;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translateX(-50%);
    z-index: 1;
}
#p2_backbox > div:nth-child(4) {
/* space */
    display: none;
}
#p2_backbox > div:nth-child(5) {
/* #p_roter */
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    z-index: 1;
}
#p2_backbox > div:nth-child(6) {
/* #p_left */
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    z-index: 1;
}
#p2_backimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 370px;
    height: 370px;
    background-image: url('../images/member.jpg');
    background-position: 85px 85px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
#p2_backbox > div:nth-child(8) {
/* #p_right */
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    z-index: 1;
}
#p2_backbox > div:nth-child(9) {
/* #p_small */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 48px;
    z-index: 1;
}
#p2_backbox > div:nth-child(10) {
/* space */
    display: none;
}
#p2_backbox > div:nth-child(11) {
/* #p_down */
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translateX(-50%);
    z-index: 1;
}
#p2_backbox > div:nth-child(12) {
/* space */
    display: none;
}
#p2_backbox > div:nth-child(13) {
/* #p_large */
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    z-index: 1;
}
#p2_backbox button {
    margin: 0;
    width: 48px;
    height: 48px;
    color: var(--white);
    background-color: transparent;
    font-size: 1rem;
}
#p2_backbox button:disabled {
    opacity: 0.25;
}
#p2_backimg div {
    background-color: rgba(0,0,0,0.5);
}
#p2_backimg div:nth-child(1) {
    flex: 0 0 85px;
    height: 85px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
#p2_backimg div:nth-child(2) {
    flex: 0 0 200px;
    height: 85px;
    border-bottom: 1px solid #999;
}
#p2_backimg div:nth-child(3) {
    flex: 0 0 85px;
    height: 85px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
}
#p2_backimg div:nth-child(4) {
    flex: 0 0 85px;
    height: 200px;
    border-right: 1px solid #999;
}
#p2_backimg div:nth-child(5) {
    flex: 0 0 200px;
    height: 200px;
}
#p2_backimg div:nth-child(6) {
    flex: 0 0 85px;
    height: 200px;
    border-left: 1px solid #999;
}
#p2_backimg div:nth-child(7) {
    flex: 0 0 85px;
    height: 85px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
}
#p2_backimg div:nth-child(8) {
    flex: 0 0 200px;
    height: 85px;
    border-top: 1px solid #999;
}
#p2_backimg div:nth-child(9) {
    flex: 0 0 85px;
    height: 85px;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
}
#p2_frontimg {
    position: absolute;
    top: 85px;
    left: 85px;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto;
    background-image: url('../images/member.jpg');
    background-position: 0 0;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}
#p2_touch {
    position: absolute;
    top: 0;
    left: 0;
    width: 370px;
    height: 370px;
    user-select: none;
}
.c3 {
    position: relative;
    width: 320px;
    margin: 1rem auto;
    display: flex;
}
.c3 div {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c3 button {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    background-color: var(--white);
    text-align: center;
    margin: 0;
}
#p_upload i {
    transform: translateX(-2px);
}
#p_ok {
    width: 7rem;
    background-color: var(--orange8);
}
#p_file {
    height: 0;
    overflow: hidden;
}
#uperr {
    display: none;
    position: absolute;
    top: -38px;
    left: 0;
    color: var(--white);
    background-color: var(--red);
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
}
#uperr::after {
    position: absolute;
    bottom: -12px;
    left: 36px;
    content: "";
    width: 0;
    height: 0;
    border-top: 12px solid var(--red);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
#p_check {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--back);
}
#p_check .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 256px;
    background-color: var(--white);
    padding: 24px;
}
#p_check div.footer {
    text-align: right;
    background: none;
    padding: 0;
    margin-top: 1em;
}
#p_c_ok {
    width: 6rem;
    line-height: 2.5rem;
    font-size: 0.875rem;
    background-color: var(--graye);
    margin: 0;
}
#p_c_cancel {
    font-size: 0.75rem;
    line-height: 2.5rem;
    background-color: #ffdede;
}
/*

         Topics

*/
#topics button {
    user-select: none;
}
i.i-spinner.spin {
    font-size: 2rem;
    color: var(--gray6);
    display: inline-block;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
i.i-bounce {
    animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes bounce {
  0%   { transform: scale(1, 1) translateY(0); }
  10%  { transform: scale(1.1, 0.9) translateY(0); }
  30%  { transform: scale(0.9, 1.1) translateY(-0.5em); }
  50%  { transform: scale(1.05, 0.95) translateY(0); }
  57%  { transform: scale(1, 1) translateY(-0.125em); }
  64%  { transform: scale(1, 1) translateY(0); }
  100% { transform: scale(1, 1) translateY(0); }
}
#topics textarea {
    width: 100%;
    height: 7em;
    line-height: 1.75;
    padding: 1em;
    resize: vertical;
    border-bottom-right-radius: 0;
    background-color: var(--graye);
    border-radius: 0.4em;
    margin-bottom: 1em;
}
#topics_main {
    position: relative;
    width: 100%;
    max-width: 1265px;
    height: calc(100vh - 247px);
    overflow: hidden;
    margin: 0 auto;
}
#topics_article {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    height: 100%;
    overflow-y: scroll;
    margin: 0 auto;
}
#topics_menu {
    position: absolute;
    top: 0;
    left: -275px;
    width: 100vw;
    max-width: 275px;
    height: 100%;
    overflow-y: scroll;
    transition: left 0.6s;
    overflow: hidden;
    background-color: var(--white);
    border-right: 1px solid var(--grayc);
}
#topics_menu.show {
    left: 0;
}
#topics_aside {
    position: absolute;
    top: 0;
    right: -390px;
    width: 100vw;
    max-width: 390px;
    height: 100%;
    overflow-y: scroll;
    transition: right 0.6s;
    background-color: var(--white);
    border-left: 1px solid var(--grayc);
}
#topics_aside.show {
    right: 0;
}
@media screen and (min-width: 670px)
{
    #topics_main {
        display: flex;
        height: calc(100vh - 249px);
    }
    #topics_article {
        position: static;
        flex: 0 0 64%;
        order: 2;
    }
    #topics_menu {
        position: static;
        flex: 0 0 36%;
        order: 1;
        height: auto;
    }
    #topics_footer {
        padding-bottom: 0.25em;
    }
}
@media screen and (min-width: 744px)
{
    #topics_main {
        height: calc(100vh - 172px);
    }
}
@media screen and (min-width: 764px)
{
    #topics_article {
        flex: 0 0 calc(100% - 275px);
    }
    #topics_menu {
        flex: 0 0 275px;
    }
}
@media screen and (min-width: 912px)
{
    #topics_main {
        height: calc(100vh - 188px);
    }
}
@media screen and (min-width: 990px)
{
    #topics_article {
        flex: 0 0 calc(100% - 560px);
    }
    #topics_menu {
        flex: 0 0 240px;
    }
    #topics_aside {
        position: static;
        flex: 0 0 320px;
        order: 3;
    }
}
@media screen and (min-width: 1160px)
{
    #topics_article {
        flex: 0 0 600px;
    }
    #topics_menu {
        flex: 1 0 240px;
    }
    #topics_aside {
        flex: 2 0 320px;
    }
}
@media screen and (min-width: 1265px)
{
    #topics_main {
        height: calc(100vh - 224px);
    }
    #topics_article {
        flex: 0 0 600px;
    }
    #topics_menu {
        flex: 0 0 275px;
    }
    #topics_aside {
        flex: 0 0 390px;
    }
}
/*
         Topics footer
*/
#topics_footer {
    font-size: 0.875rem;
    text-align: center;
    color: var(--gray6);
    background-image: var(--back-gradient);
    padding: 0.25em;
    padding-bottom: calc(60px + 0.25em);
    margin-top: 0;
}
#topics-footer-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: var(--white);
    font-weight: bold;
    background-image: var(--gradient);
    padding: 0.5em 0.75em;
}
#topics-footer-nav ul {
    display: flex;
    text-align: center;
    height: 100%;
}
#topics-footer-nav li {
    flex: 0 0 20%;
    height: 100%;
    padding: 0 0.35rem;
}
#topics-footer-nav a {
    display: block;
    color: var(--white);
    text-decoration: none;
    height: 100%;
}
#topics-footer-nav i.i-home {
    font-size: 1.75rem;
}
#topics-footer-nav i.i-mail {
    font-size: 1.5rem;
}
#topics-footer-nav span.icon,
#topics-footer-nav div {
    line-height: 30px;
    font-size: 29px;
}
#topics-footer-nav span {
    display: block;
    line-height: 1.5;
    font-size: 10px;
    color: var(--white);
    text-decoration: none;
}
#topics-footer-nav li.dm .icon {
    position: relative;
}
#topics-footer-nav li.dm .icon i.i-check {
    position: absolute;
    bottom: 0;
    right: 6px;
    color: var(--white);
    background-color: var(--red);
    border-radius: 50%;
    font-size: 0.5em;
}
@media screen and (min-width: 670px)
{
    #topics_footer {
        padding-bottom: 0.25em;
    }
    #topics-footer-nav {
        display: none;
    }
}
/*
        topics_nav
*/
#topics_menu .i-circle-xmark {
    font-size: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--gray6);
    cursor: pointer;
}
#topics_menu .topics-nav-body {
    padding-top: 3rem;
    height: 100%;
    overflow-y: scroll;
}
#topics-nav {
    font-size: 1rem;
    line-height: 3rem;
    padding: 0.5rem;
}
#topics-nav > li[class],
#topics-nav-tgroup > div {
    border-radius: 1.5rem;
    padding-left: 0.5rem;
    margin: 0.75rem;
    background-color: var(--white);
    transition: background-color 0.6s;
}
#topics-nav li[class] {
    cursor: pointer;
}
#topics-nav li.current {
    background-color: var(--graye);
}
#topics-nav li:first-child {
    margin-top: 0;
}
#topics-nav span.icon {
    display: inline-block;
    font-size: 1.625rem;
    text-align: center;
    vertical-align: bottom;
    width: 3rem;
    padding: 0 0.5rem;
}
#topics-nav span.label {
    display: inline-block;
}
#topics-nav span.label span {
    font-size: smaller;
}
#topics-nav-tgroup {
    display: none;
}
#topics-nav-tgroup li {
    font-size: 0.875rem;
    font-weight: bold;
    width: calc(100% - 3rem);
    border-radius: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    padding: 0 1.25em;
    margin-left: 3em;
    background-color: var(--white);
    transition: background-color 0.6s;
}
#topics-nav-tgroup li.current {
    padding: 0 1.25em;
    margin-left: 3em;
}
/*
        DM icon
*/
#topics-nav li.dm .icon {
    position: relative;
}
#topics-nav li.dm i.i-check {
    position: absolute;
    right: 2px;
    bottom: 8px;
    color: var(--white);
    background-color: var(--red);
    font-size: 0.5em;
    border-radius: 50%;
}
#new_post_nav {
    color: var(--white);
    background-image: var(--gradient);
    line-height: 3rem;
    border-radius: 1.5rem;
    padding: 0 1rem;
    margin: 1rem;
}
@media screen and (min-width: 670px)
{
    #topics_menu .i-circle-xmark {
        display: none;
    }
    #topics_menu .topics-nav-body {
        padding-top: 2rem;
    }
}
@media screen and (min-width: 990px)
{
    #topics-nav .tag_search {
        display: none;
    }
}
/*
        topics_aside
*/
#topics_aside .i-circle-xmark {
    font-size: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--gray6);
}
#topics_aside .topics-aside-body {
    padding-top: 3rem;
    height: 100%;
    overflow-y: scroll;
}
#topics_aside .tag_search,
#topics_aside .name_search {
    display: flex;
    font-size: 1rem;
    padding: 0 1.5rem;
    margin-bottom: 2rem;
}
#topics_aside .tag_search_input,
#topics_aside .name_search_input {
    flex: 0 0 calc(100% - 4.5rem);
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    background-color: var(--graye);
    border-radius: 1.25rem;
}
#topics_aside .tag_search_input i,
#topics_aside .name_search_input i {
    flex: 0 0 2.5rem;
    text-align: center;
    color: var(--gray6);
    padding: 0 0 0 0.5rem;
}
#topics_aside .tag_search_input input,
#topics_aside .name_search_input input {
    flex: 0 0 calc(100% - 3rem);
    background-color: transparent;
    padding: 0 1rem 0 0;
    margin: 0;
}
#topics_aside .tag_search button,
#topics_aside .name_search button {
    flex: 0 0 4rem;
    line-height: 2.5rem;
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 1.25rem;
    margin: 0;
}
#tag_trend {
    padding: 0 1.5rem;
    margin-bottom: 4rem;
}
#recommend_member {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
}
#tag_trend h4,
#recommend_member h4 {
    font-weight: bold;
}
@media screen and (min-width: 990px)
{
    #topics_aside > .i-circle-xmark {
        display: none;
    }
    #topics_aside .topics-aside-body {
        padding-top: 2rem;
    }
}
/*
        topics_tag_list
*/
.topics_tag_list {
}
.topics_tag_list li.tag {
    font-size: 0.875rem;
    line-height: 2.5;
    margin: 0.5rem 0;
    cursor: pointer;
}
.topics_tag_list span {
    font-size: smaller;
}
/*
        topics_member_list
*/
.topics_member_list {
}
.topics_member_list > li {
    position: relative;
    border-bottom: 1px solid var(--grayc);
    padding-bottom: 1rem;
    margin: 1rem 0;
}
.topics_member_list div.member {
    display: flex;
}
.topics_member_list div.profile {
    flex: 1 1 auto;
    display: flex;
    align-items: self-start;
    padding-right: 1rem;
}
.topics_member_list div.menu {
    flex: 0 0 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topics_member_list img {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
}
.topics_member_list div.profile span {
    flex: 1 1 auto;
    line-height: 1.5;
    padding: 0.5rem 0 0 0.75rem;
}
.topics_member_list .button {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.875rem;
    line-height: 3;
    background-color: #f8f8f8;
    user-select: none;
}
.topics_member_list .button ul {
    background-color: var(--white);
    margin: 0.5em;
    cursor: pointer;
    border: 1px solid var(--gray6);
}
.topics_member_list .button li {
    display: block;
    padding: 0 1.5em 0 1em;
    margin: 0;
    border-bottom: 1px solid var(--gray9);
}
.topics_member_list .button li:hover {
    background-color: var(--orange8);
}
.topics_member_list .button li:last-child {
    border-bottom: none;
}
#recommend_member .topics_member_list .button i.i-circle-xmark {
    position: absolute;
    top: -0.4em;
    right: -0.4em;
    font-size: 2em;
    background-color: var(--white);
    border-radius: 50%;
    cursor: pointer;
}
/*
        topics_article
*/
#topics_article {
    padding: 2rem 0.5rem;
}
#topics_header {
    display: flex;
    align-items: center;
}
h3.topics {
    flex: 1 1 auto;
    font-size: 1.5rem;
    font-weight: bold;
}
#new_post {
    flex: 0 0 7.5rem;
    color: var(--white);
    background-image: var(--gradient);
    line-height: 3rem;
    border-radius: 1.5rem;
    padding: 0 1rem;
    margin: 0;
}
#topics_contents {
/*    padding-top: 2rem; */
}
@media screen and (min-width: 670px)
{
    #topics_article {
        padding: 2rem 1.5rem;
    }
}
/*
        modal
*/
.topics.modal {
    border-radius: 6px;
}
.topics.modal .modal-header {
    position: relative;
    text-align: center;
    line-height: 42px;
    background-image: var(--back-gradient);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.topics.modal .modal-header i.i-xmark {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topics.modal .modal-body {
    padding: 24px;
}
@media screen and (min-width: 744px)
{
}
.topics.modal > div {
    position: relative;
    overflow: hidden;
}
.topics.modal .modal-body {
    font-size: 0.875rem;
    text-align: left;
}
.topics.modal label {
    display: none;
}
.topics.modal button,
.topics.modal select,
.topics.modal textarea {
    font-size: 0.875rem;
}
.topics.modal button:focus,
.topics.modal select:focus,
.topics.modal textarea:focus {
    outline: dotted 1px var(--orange);
}
.topics.modal textarea.noEnter {
    height: 3.75em;
}
.topics.modal .footer-button {
    text-align: right;
}
.topics.modal .submit {
    font-size: 1rem;
    line-height: 2.75;
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 1.375em;
}
.topics.modal .alert,
.topics.modal .notice {
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 1em;
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--white);
    background-color: var(--purple);
    line-height: 2.5;
    padding: 0 1rem;
    border-radius: 1.25rem;
    transition: top 0.6s;
    cursor: pointer;
}
.topics.modal .alert.hidden,
.topics.modal .notice.hidden {
    top: -8rem;
}
.topics.modal .alert::after,
.topics.modal .notice::after {
    position: absolute;
    top: -0.5rem;
    right: 1.5rem;
    content: "";
    width: 0;
    height: 0;
    border-bottom: 0.5rem solid var(--purple);
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
}
.topics.modal .notice {
    background-color: var(--blue);
}
.topics.modal .notice::after {
    border-bottom-color: var(--blue);
}
/*
        post-modal
*/
#post-modal .scup {
    display: flex;
    margin-bottom: 1em;
}
#post-modal .sc {
    flex: 1 1 auto;
}
#post-modal #post-scorp {
    margin: 0;
}
#post-modal .up {
    flex: 0 0 3em;
}
#post-modal .upload {
    width: 3em;
    height: 3em;
    text-align: center;
    line-height: 3.25em;
    padding: 0;
    margin: 0;
}
#post-modal #post-file {
    display: block;
    width: 3em;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
#post-modal .upload i {
    font-size: 1.5em;
    color: var(--gray6);
}
#post-modal .images_area {
    position: relative;
    width: 100%;
    margin-bottom: 1em;
}
#post-modal .images_area_in {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
}
#post-modal .images_area_in.hover {
    overflow-x: scroll;
}
#post-modal .progress {
    width: 100%;
    padding: 2px 0;
}
#post-modal .progress span {
    display: block;
    width: 0;
    height: 2px;
    border-radius: 1px;
    outline: 1px auto var(--blue);
}
#post-modal .images_area i.i-circle-arrow-left {
    position: absolute;
    top: 50%;
    left: 1em;
    color: var(--gray9);
    transform: translateY(-50%);
}
#post-modal .images_area i.i-circle-arrow-right {
    position: absolute;
    top: 50%;
    right: 1em;
    color: var(--gray9);
    transform: translateY(-50%);
}
#post-modal #post-images {
    width: max-content;
    margin: 0 auto;
    display: flex;
}
#post-modal #post-images li {
    position: relative;
    padding: 0 0.5em;
    display: flex;
    align-items: center;
}
#post-modal #post-images img {
    width: auto;
    max-height: 243px;
    border-radius: 1em;
    user-select: none;
}
#post-modal #post-images i {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5;
    text-align: center;
    color: var(--gray9);
    font-size: 1.5em;
    cursor: pointer;
}
#post-modal #post-images i.i-spin {
    top: 0;
    left: 0.3em;
}
#post-modal #post-images i.i-trash {
    bottom: 0;
    right: 0.3em;
}
#post-modal .images_area .confirm {
    position: absolute;
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    transition: height 0.6s;
    overflow: hidden;
    background-color: var(--white);
    width: 16rem;
}
#post-modal .images_area .confirm.hidden {
    height: 0;
}
#post-modal .images_area .confirm > div {
    border: 1px solid var(--gray6);
    padding: 1rem;
    margin: 0.5em;
}
#post-modal .images_area .confirm_button {
    text-align: right;
    margin-top: 1em;
}
#post-modal .images_area .confirm_button .yes {
    width: 5em;
    text-align: center;
    margin-right: 1em;
}
#post-modal .images_area .confirm_button .no {
    text-align: center;
    background-color: var(--grayc);
}
/*
        sitecard
*/
.sitecard {
    font-size: 0.875rem;
    margin: 1em auto;
}
.sitecard a {
    color: inherit;
    text-decoration: none;
}
.sitecard .title {
    font-weight: bold;
    color: var(--white);
    background-color: var(--orange);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.5em;
    line-height: 2;
}
.sitecard .ogimg:hover {
    opacity: 0.75;
}
/*
        topics_article_list
*/
#topics_contents h3.topics {
    display: none;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 2rem 0.5rem;
}
#topics_contents ul.article_list {
    width: 100%;
    margin: 2rem auto 1rem;
}
#topics_contents li.article,
#topics_contents li.reply2 {
    display: block;
    width: 100%;
    margin: 0 auto 3rem;
}
#topics_contents div.face,
#topics_contents div.reply2-face {
    float: left;
    padding-right: 0.5rem;
}
#topics_contents div.face img,
#topics_contents div.reply2-face img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    cursor: pointer;
}
#topics_contents div.content_area,
#topics_contents div.reply2-content-area {
    margin-left: 3rem;
}
#topics_contents div.header,
#topics_contents div.reply2-header {
    position: relative;
}
#topics_contents div.header > div.header_in,
#topics_contents div.reply2-header > div.reply2-header-in {
    display: flex;
}
#topics_contents h3.profile_name,
#topics_contents h3.reply2-profile-name {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: bold;
    line-height: 2rem;
    padding-right: 1rem;
    cursor: pointer;
}
#topics_contents div.publish_time,
#topics_contents div.reply2-publish-time {
    flex: 1 1 auto;
    font-size: smaller;
    line-height: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#topics_contents div.member_action,
#topics_contents div.media_action,
#topics_contents div.reply_from_member_action,
#topics_contents div.reply2-member-action,
#topics_contents div.reply3-member-action,
#topics_contents div.reply_action,
#topics_contents div.reply2-action,
#topics_contents div.reply3-action,
#topics_contents div.good_action,
#topics_contents div.reply2-good-action,
#topics_contents div.reply3-good-action,
#topics_contents div.save_action,
#topics_contents div.reply2-save-action,
#topics_contents div.reply3-save-action,
#topics_contents div.delete_action,
#topics_contents div.destroy_action,
#topics_contents div.reply2-delete-action,
#topics_contents div.reply3-delete-action {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f8f8f8;
    z-index: 1;
    display: none;
    user-select: none;
}
#topics_contents div.destroy_action {
    transform: translateX(-50%);
}
#topics_contents div.media_action {
    top: 0.5em;
}
#topics_contents div.member_action ul,
#topics_contents div.media_action ul,
#topics_contents div.reply_from_member_action ul,
#topics_contents div.reply2-member-action ul,
#topics_contents div.reply3-member-action ul,
#topics_contents div.reply_action ul,
#topics_contents div.reply2-action ul,
#topics_contents div.reply3-action ul,
#topics_contents div.good_action ul,
#topics_contents div.reply2-good-action ul,
#topics_contents div.reply3-good-action ul,
#topics_contents div.save_action ul,
#topics_contents div.reply2-save-action ul,
#topics_contents div.reply3-save-action ul,
#topics_contents div.delete_action ul,
#topics_contents div.destroy_action ul,
#topics_contents div.reply2-delete-action ul,
#topics_contents div.reply3-delete-action ul {
    font-size: 0.875rem;
    background-color: var(--white);
    margin: 0.5em;
    border: 1px solid var(--gray6);
    cursor: pointer;
}
#topics_contents div.member_action li,
#topics_contents div.media_action li,
#topics_contents div.reply_from_member_action li,
#topics_contents div.reply2-member-action li,
#topics_contents div.reply3-member-action li,
#topics_contents div.reply_action li,
#topics_contents div.reply2-action li,
#topics_contents div.reply3-action li,
#topics_contents div.good_action li,
#topics_contents div.reply2-good-action li,
#topics_contents div.reply3-good-action li,
#topics_contents div.save_action li,
#topics_contents div.reply2-save-action li,
#topics_contents div.reply3-save-action li,
#topics_contents div.delete_action li,
#topics_contents div.destroy_action li,
#topics_contents div.reply2-delete-action li,
#topics_contents div.reply3-delete-action li {
    line-height: 3;
    white-space: nowrap;
    padding: 0 1.5em 0 1em;
    border-top: 1px solid var(--gray9);
}
#topics_contents div.member_action li:first-child,
#topics_contents div.media_action li:first-child,
#topics_contents div.reply_from_member_action li:first-child,
#topics_contents div.reply2-member-action li:first-child,
#topics_contents div.reply3-member-action li:first-child,
#topics_contents div.reply_action li:first-child,
#topics_contents div.reply2-action li:first-child,
#topics_contents div.reply3-action li:first-child,
#topics_contents div.good_action li:first-child,
#topics_contents div.reply2-good-action li:first-child,
#topics_contents div.reply3-good-action li:first-child,
#topics_contents div.save_action li:first-child,
#topics_contents div.reply2-save-action li:first-child,
#topics_contents div.reply3-save-action li:first-child,
#topics_contents div.delete_action li:first-child,
#topics_contents div.destroy_action li:first-child,
#topics_contents div.reply2-delete-action li:first-child,
#topics_contents div.reply3-delete-action li:first-child {
    border-top: none;
}
#topics_contents div.member_action li:hover,
#topics_contents div.media_action li:hover,
#topics_contents div.reply_from_member_action li:hover,
#topics_contents div.reply2-member-action li:hover,
#topics_contents div.reply3-member-action li:hover,
#topics_contents div.reply_action li:hover,
#topics_contents div.reply2-action li:hover,
#topics_contents div.reply3-action li:hover,
#topics_contents div.good_action li:hover,
#topics_contents div.reply2-good-action li:hover,
#topics_contents div.reply3-good-action li:hover,
#topics_contents div.save_action li:hover,
#topics_contents div.reply2-save-action li:hover,
#topics_contents div.reply3-save-action li:hover,
#topics_contents div.delete_action li:hover,
#topics_contents div.destroy_action li:hover,
#topics_contents div.reply2-delete-action li:hover,
#topics_contents div.reply3-delete-action li:hover {
    background-color: var(--orange8);
}
#topics_contents div.member_action li div.memo_area,
#topics_contents div.destroy_action li div.memo_area {
    display: none;
}
#topics_contents div.member_action li textarea.memo,
#topics_contents div.destroy_action li textarea.memo {
    width: 16em;
    height: 5.5em;
    line-height: 1.5;
    padding: 0.5em;
}
#topics_contents div.member_action li div.button,
#topics_contents div.destroy_action li div.button {
    text-align: right;
}
#topics_contents div.member_action li div.button button.yes,
#topics_contents div.destroy_action li div.button button.yes {
    color: var(--white);
    background-color: var(--blue);
    margin-right: 1em;
}
#topics_contents div.member_action i.i-circle-xmark,
#topics_contents div.media_action i.i-circle-xmark,
#topics_contents div.reply_from_member_action i.i-circle-xmark,
#topics_contents div.reply2-member-action i.i-circle-xmark,
#topics_contents div.reply3-member-action i.i-circle-xmark,
#topics_contents div.reply_action i.i-circle-xmark,
#topics_contents div.reply2-action i.i-circle-xmark,
#topics_contents div.reply3-action i.i-circle-xmark,
#topics_contents div.good_action i.i-circle-xmark,
#topics_contents div.reply2-good-action i.i-circle-xmark,
#topics_contents div.reply3-good-action i.i-circle-xmark,
#topics_contents div.save_action i.i-circle-xmark,
#topics_contents div.reply2-save-action i.i-circle-xmark,
#topics_contents div.reply3-save-action i.i-circle-xmark,
#topics_contents div.delete_action i.i-circle-xmark,
#topics_contents div.destroy_action i.i-circle-xmark,
#topics_contents div.reply2-delete-action i.i-circle-xmark,
#topics_contents div.reply3-delete-action i.i-circle-xmark {
    position: absolute;
    top: -0.4em;
    right: -0.4em;
    font-size: 2em;
    background-color: var(--white);
    border-radius: 50%;
    cursor: pointer;
}
#topics_contents div.member_action_notice,
#topics_contents div.reply_from_member_action_notice,
#topics_contents div.reply2-member-action-notice,
#topics_contents div.reply3-member-action-notice,
#topics_contents div.reply_action_notice,
#topics_contents div.reply2_action_notice,
#topics_contents div.reply3_action_notice,
#topics_contents div.good_action_notice,
#topics_contents div.reply2-good-action-notice,
#topics_contents div.reply3-good-action-notice,
#topics_contents div.save_action_notice,
#topics_contents div.reply2-save-action-notice,
#topics_contents div.reply3-save-action-notice,
#topics_contents div.delete_action_notice,
#topics_contents div.destroy_action_notice,
#topics_contents div.reply2-delete-action-notice,
#topics_contents div.reply3-delete-action-notice,
#topics_contents div.member_action_alert,
#topics_contents div.reply_from_member_action_alert,
#topics_contents div.reply2-member-action-alert,
#topics_contents div.reply3-member-action-alert,
#topics_contents div.reply_action_alert,
#topics_contents div.reply2_action_alert,
#topics_contents div.reply3_action_alert,
#topics_contents div.good_action_alert,
#topics_contents div.reply2-good-action-alert,
#topics_contents div.reply3-good-action-alert,
#topics_contents div.save_action_alert,
#topics_contents div.reply2-save-action-alert,
#topics_contents div.reply3-save-action-alert,
#topics_contents div.delete_action_alert,
#topics_contents div.destroy_action_alert,
#topics_contents div.reply2-delete-action-alert,
#topics_contents div.reply3-delete-action-alert {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 3.5em;
    color: var(--white);
    background-color: var(--blue);
    opacity: 1;
    transition: opacity 1s, height 1s 1s;
    z-index: 1;
    border-radius: 1.75em;
    display: none;
}
#topics_contents div.member_action_alert,
#topics_contents div.reply_from_member_action_alert,
#topics_contents div.reply2-member-action-alert,
#topics_contents div.reply3-member-action-alert,
#topics_contents div.reply_action_alert,
#topics_contents div.reply2_action_alert,
#topics_contents div.reply3_action_alert,
#topics_contents div.good_action_alert,
#topics_contents div.reply2-good-action-alert,
#topics_contents div.reply3-good-action-alert,
#topics_contents div.save_action_alert,
#topics_contents div.reply2-save-action-alert,
#topics_contents div.reply3-save-action-alert,
#topics_contents div.delete_action_alert,
#topics_contents div.destroy_action_alert,
#topics_contents div.reply2-delete-action-alert,
#topics_contents div.reply3-delete-action-alert {
    background-color: var(--red);
}
#topics_contents div.member_action_notice p,
#topics_contents div.reply_from_member_action_notice p,
#topics_contents div.reply2-member-action-notice p,
#topics_contents div.reply3-member-action-notice p,
#topics_contents div.reply_action_notice p,
#topics_contents div.reply2_action_notice p,
#topics_contents div.reply3_action_notice p,
#topics_contents div.good_action_notice p,
#topics_contents div.reply2-good-action-notice p,
#topics_contents div.reply3-good-action-notice p,
#topics_contents div.save_action_notice p,
#topics_contents div.reply2-save-action-notice p,
#topics_contents div.reply3-save-action-notice p,
#topics_contents div.delete_action_notice p,
#topics_contents div.destroy_action_notice p,
#topics_contents div.reply2-delete-action-notice p,
#topics_contents div.reply3-delete-action-notice p,
#topics_contents div.member_action_alert p,
#topics_contents div.reply_from_member_action_alert p,
#topics_contents div.reply2-member-action-alert p,
#topics_contents div.reply3-member-action-alert p,
#topics_contents div.reply_action_alert p,
#topics_contents div.reply2_action_alert p,
#topics_contents div.reply3_action_alert p,
#topics_contents div.good_action_alert p,
#topics_contents div.reply2-good-action-alert p,
#topics_contents div.reply3-good-action-alert p,
#topics_contents div.save_action_alert p,
#topics_contents div.reply2-save-action-alert p,
#topics_contents div.reply3-save-action-alert p,
#topics_contents div.delete_action_alert p,
#topics_contents div.destroy_action_alert p,
#topics_contents div.reply2-delete-action-alert p,
#topics_contents div.reply3-delete-action-alert p {
    margin: 1em;
}
#topics_contents div.content,
#topics_contents div.reply2-content,
#topics_contents div.reply3-content {
/*    overflow: hidden; */
}
#topics_contents div.content p,
#topics_contents div.reply2-content p,
#topics_contents div.reply3-content p {
    margin: 0 0 1em;
}
#topics_contents div.content p.tag,
#topics_contents div.reply2-content p.tag,
#topics_contents div.reply3-content p.tag {
    font-size: smaller;
    font-weight: bold;
    margin: 0 0 1em;
    cursor: pointer;
}
#topics_contents div.images,
#topics_contents div.reply2-images,
#topics_contents div.reply3-images {
    position: relative;
    overflow: hidden;
    margin: 0 0 1em;
}
#topics_contents div.images_in,
#topics_contents div.reply2-images-in,
#topics_contents div.reply3-images-in {
    overflow: hidden;
    overflow-x: scroll;
}
/*
#topics_contents div.images_in.hover {
    overflow-x: scroll;
}
*/
#topics_contents ul.image_list,
#topics_contents ul.reply2-image-list,
#topics_contents ul.reply3-image-list {
    width: max-content;
    margin: 0 auto;
    display: flex;
}
#topics_contents li.image,
#topics_contents li.reply2-image,
#topics_contents li.reply3-image {
    position: relative;
    padding: 0 0.5em;
}
#topics_contents li.image:first-child,
#topics_contents li.reply2-image:first-child,
#topics_contents li.reply3-image:first-child {
    padding-left: 0;
}
#topics_contents li.image:last-child,
#topics_contents li.reply2-image:last-child,
#topics_contents li.reply3-image:last-child {
    padding-right: 0;
}
#topics_contents li.image img,
#topics_contents li.reply2-image img,
#topics_contents li.reply3-image img {
    width: auto;
    max-height: 337.5px;
    border-radius: 1em;
}
#topics_contents li.image span.destroy_media_icon,
#topics_contents li.reply2-image span.destroy_media_icon,
#topics_contents li.reply3-image span.destroy_media_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 2em;
}
#topics_contents div.images i.i-circle-arrow-left,
#topics_contents div.reply2-images i.i-circle-arrow-left,
#topics_contents div.reply3-images i.i-circle-arrow-left {
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
}
#topics_contents div.images i.i-circle-arrow-right,
#topics_contents div.reply2-images i.i-circle-arrow-right,
#topics_contents div.reply3-images i.i-circle-arrow-right {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
}
#topics_contents div.content div.reply_from,
#topics_contents div.reply3-to {
    padding: 1em 1em 0;
    border-radius: 0.5em;
    border: 1px solid var(--gray9);
    margin-bottom: 1em;
}
#topics_contents div.reply3-to {
    margin-top: 1em;
}
#topics_contents div.reply_from div.reply_from_header,
#topics_contents div.reply3-to div.reply3-to-header {
    position: relative;
    line-height: 2rem;
}
#topics_contents div.reply_from div.reply_from_header_in,
#topics_contents div.reply3-to div.reply3-to-header-in {
    display: flex;
}
#topics_contents div.reply_from div.reply_from_header div.reply_from_face,
#topics_contents div.reply3-to div.reply3-to-header div.reply3-face {
    flex: 0 0 2.5rem;
}
#topics_contents div.reply_from div.reply_from_header div.reply_from_face img,
#topics_contents div.reply3-to div.reply3-to-header div.reply3-face img {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
}
#topics_contents div.reply_from div.reply_from_header h4.reply_from_profile_name,
#topics_contents div.reply3-to div.reply3-to-header h4.reply3-profile-name {
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: bold;
    padding-right: 1rem;
}
#topics_contents div.reply_from div.reply_from_header div.publish_time,
#topics_contents div.reply3-to div.reply3-to-header div.reply3-publish-time {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#topics_contents div.reply_from div.reply_content,
#topics_contents div.reply3-to div.reply3-content {
    margin-left: 2.5rem;
}
#topics_contents div.topics-content-footer,
#topics_contents div.reply2-topics-content-footer,
#topics_contents div.topics-reply3-to-footer {
    line-height: 1.5em;
}
#topics_contents div.reply2-topics-content-footer,
#topics_contents div.topics-reply3-to-footer {
    margin-bottom: 1em;
}
#topics_contents div.topics-content-footer > div,
#topics_contents div.reply2-topics-content-footer > div,
#topics_contents div.topics-reply3-to-footer > div {
    position: relative;
    display: inline-block;
}
#topics_contents div.topics-content-footer .icon,
#topics_contents div.reply2-topics-content-footer .reply2-icon,
#topics_contents div.topics-reply3-to-footer .reply3-icon {
    font-size: 1.5em;
    line-height: 1;
    padding: 0 0.25em 0 0.5em;
    cursor: pointer;
}
#topics_contents div.topics-content-footer .icon .i.i-ban,
#topics_contents div.reply2-topics-content-footer .reply2-icon .i.i-ban,
#topics_contents div.topics-reply3-to-footer .reply3-icon .i.i-ban {
    color: red;
}
#topics_contents div.topics-content-footer .scorp,
#topics_contents div.reply2-topics-content-footer .reply2-scorp,
#topics_contents div.topics-reply3-to-footer .reply3-scorp {
    font-size: smaller;
    padding-left: 0.75em;
}
#topics_contents div.topics-content-footer ul.face_list,
#topics_contents div.reply2-topics-content-footer ul.reply2-face_list,
#topics_contents div.topics-reply3-to-footer ul.reply3-face-list {
    display: inline-block;
    overflow: hidden;
}
#topics_contents div.topics-content-footer ul.face_list li,
#topics_contents div.reply2-topics-content-footer ul.reply2-face_list li,
#topics_contents div.topics-reply3-to-footer ul.reply3-face-list li {
    display: block;
    width: 1.5rem;
    float: left;
    margin-left: -0.75rem;
}
#topics_contents div.topics-content-footer ul.face_list li img,
#topics_contents div.reply2-topics-content-footer ul.reply2-face_list li img,
#topics_contents div.topics-reply3-to-footer ul.reply3-face-list li img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.75rem;
}
#topics_contents div.content div.memo {
    margin-bottom: 1em;
}
#topics_contents i.i-regular.i.i-heart,
#topics_contents i.i-regular.i.i-bookmark {
    color: var(--gray9);
}
#topics_contents i.i-solid.i.i-heart,
#topics_contents i.i-solid.i.i-bookmark {
    color: var(--blue);
}
#topics_contents .pager {
    text-align: center;
}
#topics_contents .pager .more {
    color: var(--white);
    background-color: var(--blue);
    line-height: 2.5;
    border-radius: 1.25em;
    padding: 0 2em;
    margin: 0 1em;
    vertical-align: middle;
}
#topics_contents .pager .page-back {
    font-size: 2.5em;
    color: var(--gray6);
    background-color: var(--white);
    line-height: 1;
    padding: 0;
    margin: 0 0.5rem;
    vertical-align: middle;
}
/*
    profile modal
*/
#profile-modal .modal-body {
    background-color: var(--white);
    background-image: linear-gradient(to right, rgba(205,179,212,0.2), rgba(255,190,136,0.2));
}
#profile-modal .profile_header {
    display: flex;
    align-items: center;
}
#profile-modal .profile_image {
    width: 5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}
#profile-modal .profile_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#profile-modal .profile_summary {
    margin-left: 1rem;
}
#profile-modal .profile_summary h3 {
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    color: var(--blue);
}
#profile-modal .profile_sns {
    text-align: left;
    font-size: 2em;
    line-height: 1.25;
    margin: 0;
}
#profile-modal .profile_sns li {
    display: inline-block;
    margin-right: 0.5rem;
}
#profile-modal .profile_sns li.hidden {
    display: none;
}
#profile-modal .profile_action {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 1rem 0;
}
#profile-modal .profile_action > div {
    flex: 0 0 50%;
}
#profile-modal .profile_action .status {
    font-size: 0.75rem;
}
#profile-modal .profile_action .action {
    display: inline-block;
    line-height: 2;
    padding: 0 2em;
    color: var(--white);
    border-radius: 1em;
    cursor: pointer;
}
#profile-modal .profile_action .action.follow_to {
    background-color: var(--blue);
}
#profile-modal .profile_action .action.follow_remove {
    background-color: var(--purple);
}
#profile-modal .profile_action .action.follower_block {
    background-color: var(--purple);
}
#profile-modal .profile_action .action.follower_block_rem {
    background-color: var(--blue);
}
#profile-modal .profile_activity {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-align: center;
    margin: 1rem 0;
}
#profile-modal .profile_activity > div {
    flex: 0 0 calc(100% / 3);
    color: var(--white);
    background-color: var(--purple);
}
#profile-modal .profile_activity > div.follow_count {
    background-color: var(--purple);
}
#profile-modal .profile_activity > div.follower_count {
    background-color: var(--blue);
}
#profile-modal .profile_activity > div.topics_count {
    background-color: var(--orange);
}
#profile-modal .profile_contents {
    background-color: var(--white);
    padding: 0.5rem;
    margin: 1rem 0;
}
#profile-modal .profile_contents h4 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--purple);
}
#profile-modal .profile_contents div {
}
/*
    member list
*/
#topics {
    padding-bottom: 0;
}
#topics_contents ul.member_list {
    margin-top: 2em;
}
#topics_contents li.member {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--grayc);
    padding-bottom: 1em;
    margin-bottom: 1em;
}
#topics_contents li.member .face {
    flex: 0 0 2.5rem;
    padding: 0;
}
#topics_contents li.member .face img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.25rem;
    cursor: default;
}
#topics_contents li.member h3.profile_name {
    flex: 1 1 auto;
    padding: 0 1em;
    cursor: default;
}
#topics_contents ul.member_dm_list {
    margin-top: 1em;
}
#topics_contents ul.member_dm_list li.member .face {
    cursor: pointer;
}
#topics_contents ul.member_dm_list li.member .face img {
    cursor: pointer;
}
#topics_contents ul.member_dm_list li.member h3.profile_name {
    flex: 0 0 auto;
    cursor: pointer;
}
#topics_contents li.member h3.profile_name span.follower {
    color: var(--white);
    background-color: var(--blue);
    padding: 0 0.5em;
    display: inline-block;
    line-height: 1.5;
    border-radius: 0.75em;
    font-size: smaller;
    font-weight: normal;
    margin: 0 1em;
}
#topics_contents li.member h3.profile_name span.block {
    color: var(--white);
    background-color: var(--red);
    padding: 0 1em;
    padding: 0 0.5em;
    display: inline-block;
    line-height: 1.5;
    border-radius: 0.75em;
    font-size: smaller;
    font-weight: normal;
    margin: 0 1em;
}
#topics_contents li.member div.menu {
    flex: 0 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#topics_contents li.member div.action {
    display: none;
    position: absolute;
    top: -2em;
    right: 0;
    font-size: 0.875rem;
    background-color: var(--graye);
}
#topics_contents li.member div.action ul {
    line-height: 3;
    margin: 0.5em;
    background-color: var(--white);
}
#topics_contents li.member div.action li {
    padding: 0 1.5em 0 1em;
    border-bottom: 1px solid var(--grayc);
    margin: 0;
    cursor: pointer;
}
#topics_contents li.member div.action li:hover {
    background-color: var(--orange8);
}
#topics_contents li.member div.action li:last-child {
    border-bottom: 1px none var(--grayc);
}
#topics_contents li.member div.action i.i-circle-xmark {
    position: absolute;
    top: -0.4em;
    right: -0.4em;
    font-size: 2em;
    background-color: var(--white);
    border-radius: 50%;
    cursor: pointer;
}
#topics_contents li.member div.ban_action {
    flex: 0 0 18rem;
}
#topics_contents li.member div.ban_action button {
    margin: 0;
}
/*
    image list
*/
#topics_contents ul.ban_image_list li {
    display: block;
    text-align: center;
    margin: 1rem auto;
}
#topics_contents ul.ban_image_list li .image {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}
#topics_contents ul.ban_image_list li .image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
#topics_contents ul.ban_image_list li .ban_action {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}
#topics_contents ul.ban_image_list li .ban_action button {
    margin: 0.5rem auto;
}
/*
        dm-modal
*/
#dm-modal .scup {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
#dm-modal .sc {
    flex: 1 1 auto;
}
#dm-modal .sc span {
    font-weight: bold;
}
#dm-modal .up {
    flex: 0 0 3em;
}
#dm-modal .upload {
    width: 3em;
    height: 3em;
    text-align: center;
    line-height: 3.25em;
    padding: 0;
    margin: 0;
}
#dm-modal #dm-file {
    display: block;
    width: 3em;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
#dm-modal .upload i {
    font-size: 1.5em;
    color: var(--gray6);
}
#dm-modal .images_area {
    position: relative;
    width: 100%;
    margin-bottom: 1em;
}
#dm-modal .images_area_in {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
}
#dm-modal .images_area_in.hover {
    overflow-x: scroll;
}
#dm-modal .progress {
    width: 100%;
    padding: 2px 0;
}
#dm-modal .progress span {
    display: block;
    width: 0;
    height: 2px;
    border-radius: 1px;
    outline: 1px auto var(--blue);
}
#dm-modal .images_area i.circle-arrow-left {
    position: absolute;
    top: 50%;
    left: 1em;
    color: var(--gray9);
    transform: translateY(-50%);
}
#dm-modal .images_area i.circle-arrow-right {
    position: absolute;
    top: 50%;
    right: 1em;
    color: var(--gray9);
    transform: translateY(-50%);
}
#dm-modal #dm-images {
    width: max-content;
    margin: 0 auto;
    display: flex;
}
#dm-modal #dm-images li {
    position: relative;
    padding: 0 0.5em;
    display: flex;
    align-items: center;
}
#dm-modal #dm-images img {
    width: auto;
    max-height: 243px;
    border-radius: 1em;
    user-select: none;
}
#dm-modal #dm-images i {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5;
    text-align: center;
    color: var(--gray9);
    font-size: 1.5em;
    cursor: pointer;
}
#dm-modal #dm-images i.arrows-rotate {
    top: 0;
    left: 0.3em;
}
#dm-modal #dm-images i.trash-can {
    bottom: 0;
    right: 0.3em;
}
#dm-modal .images_area .confirm {
    position: absolute;
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    transition: height 0.6s;
    overflow: hidden;
    background-color: var(--white);
    width: 16rem;
}
#dm-modal .images_area .confirm.hidden {
    height: 0;
}
#dm-modal .images_area .confirm > div {
    border: 1px solid var(--gray6);
    padding: 1rem 1rem 0;
    margin: 0.5em;
}
#dm-modal .images_area .confirm_button {
    text-align: right;
}
#dm-modal .images_area .confirm_button .yes {
    width: 5em;
    text-align: center;
    margin-right: 1em;
}
#dm-modal .images_area .confirm_button .no {
    text-align: center;
    background-color: var(--grayc);
}
/*
        dm-nav
*/
#topics_contents .dm_nav {
    display: flex;
    text-align: center;
    line-height: 2.5;
}
#topics_contents .dm_nav > div {
    flex: 0 0 calc(100% / 3);
    font-size: 0.875rem;
    color: var(--gray6);
    background-color: var(--graye);
    border-left: 1px solid var(--white);
    margin-top: 2rem;
    cursor: pointer;
}
#topics_contents .dm_nav > div.active {
    position: relative;
    color: var(--white);
    background-color: var(--purple);
    cursor: default;
}
#topics_contents .dm_nav > div.active::after {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 0;
    height: 0;
    border-top: 0.5rem solid var(--purple);
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
}
/*
        member-dm-list
*/
#topics_contents ul.member_dm_list li.member {
    cursor: pointer;
}
#topics_contents li.member div.count {
    flex: 1 0 auto;
}
/*
        dm-view
*/
#topics_contents .from_member {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
#topics_contents .from_member .face,
#topics_contents .from_member .face img {
    cursor: default;
}
#topics_contents .from_member .profile_name {
    flex: 1 0 auto;
    cursor: default;
}
#topics_contents .from_member .button {
    flex: 0 0 8rem;
}
#topics_contents .from_member .button button {
    width: 8rem;
    text-align: center;
    color: var(--white);
    background-image: var(--gradient);
    line-height: 3rem;
    border-radius: 1.5rem;
    margin: 0;
}
#topics_contents ul.dm_view {
    margin: 1em 0;
}
#topics_contents ul.dm_view > li {
    position: relative;
    padding: 1em 1em 0;
    border-radius: 0.5em;
    border: 1px solid var(--gray9);
    margin-bottom: 1em;
}
#topics_contents ul.dm_view li.from {
    background-color: var(--graye);
    margin-right: 5rem;
}
#topics_contents ul.dm_view li.from::after {
    content: "";
    position: absolute;
    top: 2rem;
    left: -1.25rem;
    width: 0;
    height: 0;
    border-right: 1.25rem solid var(--grayc);
    border-top: 0.75rem solid transparent;
}
#topics_contents ul.dm_view li.to::after {
    content: "";
    position: absolute;
    top: 2rem;
    right: -1.25rem;
    width: 0;
    height: 0;
    border-left: 1.25rem solid var(--grayc);
    border-top: 0.75rem solid transparent;
}
#topics_contents ul.dm_view li.to {
    margin-left: 5rem;
}
#topics_contents ul.dm_view .date {
    font-size: smaller;
    font-weight: bold;
    text-align: right;
}
#topics_contents ul.all_dm li {
    border-bottom: 1px solid var(--grayc);
    margin-bottom: 2rem;
}
#topics_contents ul.all_dm .date {
    text-align: right;
}
#topics_contents ul.all_dm .from_to {
    display: flex;
    margin-bottom: 1rem;
}
#topics_contents ul.all_dm .from,
#topics_contents ul.all_dm .to {
    flex: 0 0 50%;
}
#topics_contents ul.all_dm .status {
    text-align: right;
    margin-bottom: 1rem;
}
/*
        Topics No. search
*/
#topics_search {
    width: 100%;
    line-height: 2rem;
    border-radius: 1rem;
    padding: 0 0.75rem;
    background-color: var(--graye);
}
/*
        tgroup
*/
#topics_contents .tgroup_add_area {
    margin: 2em 0;
}
#topics_contents .tgroup_add {
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 1.25em;
}
#topics_contents ul.tgroup_list li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--grayc);
    padding-bottom: 1em;
    margin-bottom: 1em;
    cursor: pointer;
}
#topics_contents ul.tgroup_list .tgroup_name {
    flex: 1 1 auto;
    font-weight: bold;
}
#topics_contents ul.tgroup_list .face {
    flex: 0 0 3rem;
}
#topics_contents ul.tgroup_list .profile_name {
    flex: 0 0 7em;
}
#topics_contents .position {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1em;
}
#topics_contents .mark {
    font-size: 0.875rem;
    margin-top: 1em;
}
#topics_contents ul.tgmember_list .check_box,
#topics_contents ul.nonmember_list .check_box {
    flex: 0 0 3rem;
    text-align: center;
    color: var(--grayc);
    padding-right: 0.5rem;
}
#topics_contents ul.tgmember_list li,
#topics_contents ul.nonmember_list li {
    cursor: pointer;
}
#topics_contents ul.tgmember_list li.remove .check_box {
    font-size: 1.2em;
    color: var(--red);
}
#topics_contents ul.nonmember_list li.add .check_box {
    font-size: 1.2em;
    color: var(--blue);
}
#topics_contents ul.tgmastaer_list .face,
#topics_contents ul.tgmember_list .face,
#topics_contents ul.nonmember_list .face {
    flex: 0 0 3rem;
    padding-right: 0.5rem;
}
#topics_contents ul.tgmastaer_list .profile_name,
#topics_contents ul.tgmember_list .profile_name,
#topics_contents ul.nonmember_list .profile_name {
    flex: 1 1 auto;
    font-weight: bold;
}
#topics_contents ul.tgmastaer_list .remove_area {
    position: relative;
    flex: 0 0 14em;
    font-size: 0.875rem;
    text-align: right;
}
#topics_contents ul.tgmastaer_list button,
#topics_contents .mark button {
    color: var(--white);
    background-image: var(--gradient);
    border-radius: 1.25em;
    margin: 0;
}
#topics_contents p.sub {
    font-size: 0.875rem;
}
#tgroup-modal .footer-button {
    margin-top: 1em;
}
/*
        feature
*/
h1.feature-h1 {
    font-size: 1rem;
    font-weight: bold;
    color: var(--purple);
}
ul.feature-lists {
    width: 100%;
    margin-top: 2em;
}
ul.feature-lists li {
    display: block;
    margin-bottom: 2em;
}
ul.feature-lists li > div {
}
ul.feature-lists li > div > div {
    width:  100%;
    aspect-ratio: 16 / 9;
}
ul.feature-lists li > div > div img {
    width:  100%;
    height: 100%;
    object-fit: cover;
}
ul.feature-lists li > div > h2 {
    font-size: 0.875rem;
    font-weight: normal;
}
.w240 {
    width: 240px;
    margin: 0 auto;
}
@media screen and (min-width: 744px)
{
    h1.feature-h1 {
        padding-left: 1.5rem;
    }
    ul.feature-lists {
        display: flex;
        flex-wrap: wrap;
    }
    ul.feature-lists li {
        flex: 0 0 calc(100% / 3);
        padding: 0 1.5em;
    }
}
/*
        local topics new
*/
#w_box {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    .w_header {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        .w_header_logo {
            flex: 0 0 3rem;
            text-align: center;
            line-height: 1.1;
            span {
                display: block;
                font-size: 1.75rem;
            }
            span:last-child {
                font-size: 0.75rem;
            }
        }
        .w_header_text {
            flex: 0 0 auto;
            font-size: 1.5rem;
            color: var(--blue);
            padding: 0 0.5rem;
        }
    }
    #w_contents {
        padding: 1rem;
        .article_list {
            position: relative;
            width: 100%;
            padding: 1px 0;
            white-space: nowrap;
            overflow: hidden;
            overflow-x: scroll;
            .w_spinner {
                text-align: center;
            }
            .article {
                position: relative;
                display: inline-block;
                width: 21rem;
                height: 19rem;
                background-color: var(--white);
                padding: 1rem;
                margin: 0 0.25rem;
                border-radius: 1rem;
                outline: thin solid var(--gray9);
                cursor: pointer;
                .face {
                    position: relative;
                    img {
                        width: 2.5rem;
                        height: 2.5rem;
                        border-radius: 1.25rem;
                    }
                }
                .content_area {
                    position: absolute;
                    top: 1rem;
                    left: 1rem;
                    width: 19rem;
                    height: 17rem;
                    overflow: hidden;
                    .header {
                        padding-left: 3.5rem;
                        line-height: 2.5rem;
                        .header_in {
                            display: flex;
                            .profile_name {
                                flex: 0 0 auto;
                                font-size: 1rem;
                                font-weight: bold;
                            }
                            .publish_time {
                                flex: 1 1 auto;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                padding-left: 1rem;
                            }
                        }
                        .member_action,
                        .member_action_notice,
                        .member_action_alert {
                            display: none;
                        }
                    }
                    .content {
                        height: 14.5rem;
                        overflow: hidden;
                        p {
                            white-space: normal;
                        }
                        .tag {
                            display: none;
                        }
                    }
                    .content.useimages {
                        p {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        br {
                            display: none;
                        }
                        .image {
                            text-align: center;
                        }
                        .image:not(:first-child) {
                            display: none;
                        }
                        .i-circle-arrow-left,
                        .i-circle-arrow-right {
                            display: none;
                        }
                    }
                    .topics-content-footer {
                        display: none;
                    }
                    .reply_from_header {
                        display: none;
                    }
                }
            }
        }
    }
    .pager {
        display: none;
    }
}
/*
        note_rss
*/
h1.note-rss-h1 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--purple);
    padding-left: .5rem;
}
#note-rss {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;

    ul {
        position: relative;
        width: 2670px;
        left: -40rem;
        overflow: hidden;
        transition: left 0.6s;

        li {
            display: block;
            width: 251px;
            vertical-align: top;
            margin: 0 .5rem;
            float: left;

            .thumbnail {
                width: 100%;
                aspect-ratio: 128 / 67;

                a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;

                    img {
                        object-fit: cover;
                        border-radius: .25rem;
                    }
                }
            }
            h2 {
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                margin-top: .5rem;

                a {
                    display: block;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    height: calc(1.5em * 2);
                }
            }
            .nrfooter {
                font-size: .75rem;
                line-height: 1.5rem;
                margin-top: .5rem;

                a {
                    display: flex;
                    height: 1.5rem;

                    .creatorImage {
                        flex: 0 0 1.5rem;
                        height: 100%;
                        border-radius: .75rem;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .creatorName {
                        flex: 1 1 auto;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-left: .75em;
                    }
                    .pubDate {
                        flex: 0 0 6.25em;
                    }
                }
            }
        }
    }
}
/*
        style list
*/
#style-list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 1.5rem 1rem;
}
#style-list li {
    flex: 0 0 50%;
    padding: 0 0.5rem 1rem;
}
#style-list li:nth-child(7) {
    display: none;
}
#style-list li .img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
#style-list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#style-list p {
    font-size: 0.75rem;
    margin: 1em 0 0;
    line-height: 1.5;
}
#style-list .more {
    text-align: center;
    padding-bottom: 2em;
}
#style-list .more a {
    display: inline-block;
    line-height: 2;
    color: var(--white);
    background-color: var(--purple);
    padding: 0 1em;
    border-radius: 1em;
}
@media screen and (min-width: 744px)
{
    #style-list ul {
        padding: 2rem 1rem 1rem;
    }
    #style-list li {
        flex: 0 0 calc(100% / 3);
    }
    #style-list li p {
        font-size: 0.875rem;
    }
}
/*
        style lists
*/
#style-lists {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0.5rem;
}
#style-lists li {
    flex: 0 0 50%;
    padding: 0.5rem;
}
#style-lists li .img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
#style-lists li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#style-lists p {
    font-size: 0.875rem;
    line-height: 1.5;
}
@media screen and (min-width: 744px)
{
    #style-lists li {
        flex: 0 0 18rem;
        padding: 0.75rem;
    }
}
/*
        style-pagination
*/
#style-pagination {
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}
#style-pagination li {
    display: inline-block;
    margin: 0 0.25em;
}
#style-pagination li.hidden {
    visibility: hidden;
}
#style-pagination li:not(.select) {
    width: 2.5em;
    height: 2.5em;
    line-height: 2.7;
    background-color: var(--graye);
    border-radius: 1.25em;
}
#style-pagination li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}
#style-pagination li.first i:first-child,
#style-pagination li.last i:first-child {
    position: relative;
    left: 4px;
}
#style-pagination li.first i:last-child,
#style-pagination li.last i:last-child {
    position: relative;
    left: -4px;
}
#style-pagination select {
    font-size: 0.875rem;
}
/*
        job_back
*/
#job_back {
    padding: 1rem;
}
/*

    rate

*/
.rate {
    color: var(--blue);
}
.rate > span {
    color: var(--purple);
    font-size: 1.25rem;
    margin: 0 0.5rem;
}
#rate-open {
    font-size: 0.75rem;
    line-height: 2;
    color: var(--white);
    background-color: var(--blue);
    margin: 0 0.5em;
    border-radius: 1em;
}
/*

    dialog

*/
bode.noscroll {
    overflow: hidden;
}
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
}
.dialog.hidden {
    height: 0;
}
.dialog-inner {
    width: 22rem;
    max-width: 90%;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dialog-header {
    position: relative;
    line-height: 2.5rem;
    text-align: center;
    background-image: var(--back-gradient);
}
.dialog-header i.i-xmark {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.dialog-body {
    padding: 2rem 1.5rem 0.5rem;
}
.dialog-footer {
    text-align: right;
    padding: 1rem;
}
.dialog-footer button {
    display: inline-block;
    text-align: center;
    line-height: 2.5rem;
    margin: 0 0.5rem;
}
.dialog-footer button.yes {
    padding: 0 2.5em;
    color: var(--white);
    background-color: var(--purple);
}
.dialog-footer button.yes:disabled {
    background-color: var(--graye);
    cursor: default;
}
.dialog-footer button.no {
    background-color: var(--graye);
}
/*

    rate-dialog

*/
#rate-dialog .rate {
    text-align: center;
}
#rate {
    font-size: 2rem;
    cursor: pointer;
}
/*

    review

*/
#review-list {
    padding-bottom: 1rem;
    .review-open {
        text-align: right;
        padding: 0.5rem 1rem;

        #review-open {
            font-size: 0.75rem;
            color: var(--white);
            background-color: var(--blue);
            line-height: 2.5;
            border-radius: 1.25em;
        }
    }
    .review-nothing {
        text-align: center;
        color: var(--gray6);
        border: 1px solid var(--grayd);
        padding: 1rem;
        margin: 1rem;
    }
    .review-list {
        h4 {
            margin-bottom: 0;
        }
        .review-post {
            font-size: 0.75rem;
            text-align: right;
            margin-right: 1rem;
        }
        .review-body {
            border: 1px solid var(--grayd);
            padding: 1rem;
            margin: 0.25rem 1rem 1rem;
            p {
                margin: 0;
            }
        }
        .review-close {
            text-align: right;
            margin-top: -1rem;
            padding-right: 1rem;
            .review-delete {
                font-size: 0.75rem;
                line-height: 2.5;
                border-radius: 1.25em;
            }
        }
    }
}
/*

    review-post-dialog

*/
#review-post-dialog .dialog-inner {
    width: 40rem;
}
#review-post-dialog p {
    margin-bottom: 1em;
}
#review-post-dialog .review-body {
    margin-bottom: 0;
}
#review-post-dialog textarea {
    font-size: 1rem;
    font-weight: normal;
    width: 100%;
    background-color: var(--graye);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    height: 10rem;
}
/*

    rate

*/
.benefit span {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--white);
    background-color: var(--orange);
    padding: 0 0.5em;
    margin: 0.25em 0 0.25em 0.5em;
    border-radius: 0.36em;
}
/*

    city-select-dialog

*/
#city-select-dialog {
    .dialog-inner {
        width: 30rem;
        max-height: 90%;
    }
    .dialog-body {
        padding: 1.5rem;
    }
    .dialog-body-inner {
        height: 100%;
        overflow: scroll;
    }
    a, span {
        display: inline-block;
        color: var(--white);
        background-color: var(--orange);
        padding: 0 1em;
        margin: 0.25rem;
        border-radius: 4px;
    }
    span {
        color: var(--gray6);
        background-color: var(--graye);
    }
}
/*

    tab-description

*/
#accordion-description .accordion-description {
    padding: 1rem ;
}
#accordion-description .accordion-description-header {
    position: relative;
    border: 1px solid var(--purple);
    border-radius: 6px;
    line-height: 2.5;
    padding: 0 1em;
    margin: 0.5rem 0;
}
#accordion-description i.i-angle-down {
    position: absolute;
    top: 0.75em;
    right: 1em;
    color: var(--purple);
}
#accordion-description i.i-angle-down.up {
    transform: rotate(180deg);
}
#accordion-description dl dl {
    margin: 0.5em 0.5em 1rem;
}
#accordion-description dl dl dt {
    font-weight: bold;
    color: var(--purple);
}
#accordion-description dl dl dd {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dotted var(--gray9);
}
@media screen and (min-width: 744px)
{
    #accordion-description .accordion-description {
        padding: 1.5rem 2rem;
    }
    #accordion-description dl dl {
        display: flex;
        flex-wrap: wrap;
    }
    #accordion-description dl dl dt {
        flex: 0 0 12em;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px dotted var(--gray9);
    }
    #accordion-description dl dl dd {
        flex: 0 0 calc(100% - 12em);
    }
}
/*

    shop-back

*/
#shop-back {
    padding: 1.5rem;
}
#shop-back h5 {
    font-size: 1rem;
    font-weight: bold;
}
#shop-back > div {
    margin-top: 0.5em;
}
#shop-back a {
    display: inline-block;
    color: var(--white);
    background-color: var(--purple);
    line-height: 1.75;
    padding: 0 1em;
    margin: 0.5em 0.25em;
    border-radius: 6px;
}