@import "contact.css";

section + .buttons {
    margin-top:0;
    padding-inline: calc(var(--padding) * 2);
    padding-bottom:var(--section-space);
}

main .buttons.back-link .button {
    font-size:1em;
    padding:10px 20px;
    width:fit-content;
    margin-left:0;
    margin-right:auto;
}

.account-message {
    border:solid 1px var(--color-dark-glass);
    padding:var(--padding);
    border-radius:var(--radius);
    width:100%;
}

#account main .grid li a.button {
    width:100%;
}
#account main .grid li a.button + .badge {
    position:absolute;
    top:-10px;
    right:-5px;
    background:var(--color-black);
    display:flex;
    align-items: center;
    justify-content: center;
    color:var(--color-white);
    font-weight:500;
    width:2em;
    aspect-ratio: 1;
    border:solid 2px var(--color-white);
    border-radius:100%;
}

/* 管理画面用店舗 */
#account .plans li {
    border:solid 1px var(--color-gray);
    border-radius:var(--radius);
    overflow:hidden;
}
#account .plans li > div {
    padding:20px;
    margin:0;
}
#account .plans li > div h3 {
    text-align:left;
}
#account .plans li > div p {
    margin-top:10px;
}
#account .plans li > div p .button {
    padding:5px 20px;
    border-radius:var(--radius-inner);
}


#plan .plan-application {
    border:solid 1px rgba(0,0,0,0.1);
    padding:10px;
    background:var(--color-super-white);
}
#plan .plan-application header {
    margin:0;
}
#plan .plan-application header h2 {
    margin-top:0;
}
#plan .plan-application header span {
    display:block;
    position:relative !important;
}
#plan .plan-application header span:last-of-type {
    color:var(--color-red);
}
#plan .plan-application div {
    margin-top:10px;
}
#plan .plan-application div h2 {
    font-size:1.2em;
    margin-top:0;
}
#plan .plan-application div h2 span {
    color:var(--color-gray);
    padding:0;
    margin:0;
    display:block;
    font-weight:normal;
    font-size:0.8em;
}
#plan .plan-application .icon {
    max-width:160px;
}
#plan .plan-application > p {
    margin-top:10px;
}
#plan .plan-application > p:first-of-type {
    max-height:100px;
    overflow-y:auto;
}
#plan .plan-application > dl {
    background:var(--color-white);
    padding:10px;
    margin-top:10px;
}
#plan .plan-application > dl dd {
    margin-top:0 !important;
}

#plan .plan-application form {
    margin-top:5px;
}
#plan .plan-application .button {
    width:100%;
    min-width:auto;
}
#plan .plan-application dialog.detail dd {
    max-height:100px;
    overflow-y: auto;
}
#plan .plan-application dialog textarea {
    font-size:1.15em;
    line-height:1.4;
    height:100px;
}
#plan .plan-application .message-button {
    border:solid 1px var(--color-dark-glass);
    padding:10px;
    border-radius:var(--radius);
    width:80px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-decoration:none;
}
#plan .plan-application .message-button span {
    width:100%;
    text-align:center;
    color:var(--color-text);
    margin:0;
    transition:var(--transition);
}
#plan .plan-application .message-button small {
    width:100%;
    font-size:0.6em;
    font-weight:bold;
    text-align:center;
    color:var(--color-text);
    margin:0;
    transition:var(--transition);
}
#plan .plan-application .message-button:hover {
    background:var(--color-blue);
}
#plan .plan-application .message-button:hover :is(span,small) {
    color:var(--color-white);
}

.options article {
    border:solid 1px var(--color-dark-glass);
    padding:var(--padding);
    transition:var(--transition);
    width:auto;
}
.options article:hover {
    box-shadow:var(--shadow);
    background:var(--color-super-white);
}
.options article > form {
    display:flex;
    flex-direction: column;
}
.options article > form dl {
    flex:1;
}
:is(.options, #add-option) dl .flex div {
    width:60%;
    display:inline-block;
    justify-content: flex-start;
}
:is(.options, #add-option) dl .flex div input {
    width:100%;
}

.rating-form .rating {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:2px;
    margin:10px 0;
}
.rating-form .rating img {
    margin:0;
    filter:drop-shadow(0 0 1px var(--color-dark-glass));
}

#amount aside > div {
    position:sticky;
    top:80px;
}
#amount table {
    border:solid 1px var(--color-dark-glass);
}
#amount aside table td {
    width:100px;
    text-align:right;
}
#amount .scroll-table {
    margin-top:calc(var(--margin) / 2);
}

#amount .list-view {
    margin-top:calc(var(--margin) / 2);
}
#amount .list-view article {
    display:flex;
    flex-direction: column;
    margin-bottom:20px;
}
#amount .list-view h3 {
    font-size:1.1em;
    flex:1;
}
#amount .list-view table th {
    width:80px;
}


.form .id_image {
    margin-top:10px;
}
.form .id_image > div {
    aspect-ratio:1;
}
.form .ctg_image > div {
    aspect-ratio:4 / 3;
}
.form .drawing > div {
    aspect-ratio:1;
}

.form > div {
    display:flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap:10px;
    padding:var(--padding) 0;
    margin:0;
    border-bottom:solid 1px var(--color-gray);
}
.form > div > dt {
    width:120px;
}
.form > div > dd {
    flex:1;
}

form .id_image .file-icon img {
    object-fit: contain !important;
}

.form > div > dd.id-card label:last-of-type {
    display:none;
}
.corp .form > div > dd.id-card label {
    display:none;
}
.corp .form > div > dd.id-card label:last-of-type {
    display:block;
}


/* 申し込み情報詳細 */
.plan-application dl.form {
    margin-top:5px;
}
.plan-application dl.form > div {
    padding:5px 0;
    font-size:0.9em;
}
.plan-application dl.form > div dt {
    width:90px;
    color:var(--color-gray);
}
.plan-application dl.form > div.invoice {
    color:var(--color-green);
}
.plan-application dl.form > div .ng {
    color:var(--color-red);
    font-weight:bold;
}
.plan-application form {
    margin-top:10px;
}
.plan-dialog h4 {
    font-size:1em;
    color:var(--color-green);
}
.plan-application embed {
    width:100%;
}
.plan-application embed[src*=".pdf"] {
    aspect-ratio: 1;
}
.plan-application .buttons + .buttons {
    margin-top:calc(var(--gap) / 2);
}


.drawing {
    max-width:600px;
    margin-inline:auto;
}

.options .form dt {
    min-width:auto;
}
.options .form dd + dt {
    margin-top:10px;
}
.options .form > div {
    font-size:1em;
    padding:0;
    margin-top:10px;
    border:none;
}
.options article form .buttons {
    margin-top:20px;
}
.options article form .buttons .button {
    padding:5px;
    border-radius:var(--radius-inner);
    font-size:1em;
}

.room li {
    border-radius:var(--radius);
    border:solid 1px var(--color-black);
    padding:10px 20px;
    margin-top:20px;
}
.room li span {
    flex:1;
}
.room li .room {
    flex:2;
    font-weight:bold;
    font-size:1.2em;
}
.room li .fee {
    flex:2;
    font-weight:bold;
}
.room li .button {
    padding:5px 10px;
    border-radius:var(--radius-inner);
    font-size:1em;
}


/* 申込画面用 */
#plan-application .list-view .button {
    min-width:auto;
    width:100%;
}
#plan-application .list-view li {
    border:solid 1px var(--color-gray);
    border-radius:var(--radius);
    padding:var(--padding);
}
#plan-application .list-view dialog table.amount {
    font-size:1em;
}
#plan-application .list-view dialog table.amount :is(th, td) {
    padding:10px 20px;
}
#plan-application .list-view dialog table.amount thead tr th:last-of-type ,
#plan-application .list-view dialog table.amount tbody tr td {
    text-align:right;
}


/* プロフィール */
.id-image {

}
.id-image figure {
    border:solid 1px var(--color-lightgray);
    border-radius:var(--radius-inner);
}
.id-image embed {
    width:100%;
    aspect-ratio: 1;
}

.profile-applied table {
    margin-top:10px;
}
.profile-applied table :is(th, td) {
    padding:5px 10px;
    font-size:1em;
}
.profile-applied table th {
    width:8em;
}


.message-ticker {
	position:fixed;
	bottom:20px;
	right:-100vw;
	width:calc(100% - 40px);
	max-width:600px;
    padding:5px 10px;
	background:var(--color-blue);
	color:var(--color-white);
	text-align:left;
    border:solid 2px var(--color-white);
    border-right:none;
	border-radius:var(--radius) 0 0 var(--radius);
    transition:right 0.8s;
	z-index:10;
}
.message-ticker.false {
    background:var(--color-red);
}

main .caution {
	border:solid 1px var(--color-red);
	color:var(--color-red);
	min-width:300px;
	padding:5px 10px;
	border-radius:var(--radius-inner);
}
main .border-box .caution {
	margin-inline:calc(var(--padding) * 2);
}
main .caution a {
    color:var(--color-red);
    text-decoration: underline;
}

main form :is(.message, em) {
	position:absolute;
	background:var(--color-red);
	color:var(--color-white);
	min-width:300px;
	padding:5px 10px;
	border-radius:var(--radius-inner);
	top:calc(100% + 8px);
	left:0;
	z-index:10;
    font-style:normal;
    margin:0 !important;
}
main form :is(.message, em)::before {
	content:'';
	width:10px;
	height:10px;
	background:var(--color-red);
	position:absolute;
	top:-9px;
	left:20px;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
main form .message.pass ,
main form .message.pass::before {
    background:var(--color-blue);
}


/* Media Query */
@media ( width <= 820px ) {
    .profile-applied {
        grid-template-columns: repeat(1, 1fr);
    }
    .profile-applied h3 {
        margin-top:var(--margin);
    }
}
@media ( width <= 720px ){
    .form > div > dt {
        width:100%;
    }
}
@media ( width <= 520px ){
    #plan .plan-application figure + div {
        width:100%;
    }

    #plan-application .list-view dialog .profile {
        grid-template-columns: repeat(1, 1fr);
    }
    #plan-application .list-view dialog .id-image {
        display:block;
    }
    #plan-application .list-view dialog .profile > div:last-of-type {
        margin-top:var(--margin);
    }
}