body {
    font-family: 'Noto Sans JP', sans-serif;
    width:100%;
    min-height:100dvh;
    overflow-x:hidden;
}

main {
    padding-top:var(--padding);
}

input, textarea, button {
    font-family: 'Noto Sans JP', sans-serif;
}

.narrow {
    max-width:600px;
}

main a:not(.button) {
    text-decoration: underline;
}
main .button {
    border:solid 1px var(--color-dark-glass);
    border-radius:4px;
    padding:10px;
}
main .button:hover {
    background:var(--color-blue);
    color:var(--color-white);
}
main .button-blue ,
main .button-blue:hover {
    background:var(--color-blue);
    color:var(--color-super-white);
    font-weight:bold;
}
main .button-red ,
main .button-red:hover {
    background:var(--color-red);
    color:var(--color-super-white);
}

main h1 {
    font-family: 'Andada Pro', serif;
    font-size:1.6em;
    letter-spacing: 4px;
    text-align:left;
}
main h1 > span {
    font-size:0.6em;
    font-weight:normal;
    padding-left:40px;
    font-family: 'Noto Sans JP', sans-serif;
    display:inline-block;
}
main h1 > span::before {
    content:'';
    position:absolute;
    top:-40%;
    left:20px;
    transform: skewX(-30deg);
    width:0;
    height:180%;
    border-left:solid 1px var(--color-text);
}
main h1 .back-link {
    width:30px;
    height:30px;
    position:absolute;
    right:0;
    top:50%;
    translate: 0 -50%;
    background:var(--color-text);
    border:none;
    border-radius:50%;
    color:var(--color-super-white);
    cursor: pointer;
    transition: var(--transition);
    display:flex;
    align-items: center;
    justify-content: center;
}
main h1 .back-link:hover {
    background:var(--color-blue);
}


/* List view */
main .list-view li > a {
    color:var(--color-text);
    height:100%;
    padding:10px 10px 40px 10px;
    display:block;
    text-decoration:none;
}
main .list-view li > a:hover {
    background:var(--color-super-white);
    box-shadow:var(--shadow);
}
main .list-view li h2 {
    font-size:1.2em;
    margin-top:20px;
}
main .list-view li p {
    margin-top:0;
}
main .list-view figure {
    overflow:hidden;
}

#master .list-view figure {
    border-radius:50%;
    transition:var(--transition);
}
#master .list-view li h2 span {
    display:block;
    font-size:0.8em;
}
#master .list-view div {
    margin:0;
}

#plan .list-view li > a {
    border:solid 1px rgba(0,0,0,0.1);
}
#plan .list-view li > a.private::after {
    content:'非公開';
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background:var(--color-dark-glass);
    color:var(--color-white);
    padding:5px;
    margin:0;
    text-align:center;
}
#plan .list-view li div {
    margin-top:10px;
}
#plan :is(.list-view,.detail) h2 span {
    display:inline-block;
    font-weight:bold;
    font-size:0.8em;
    padding:2px 5px;
    margin-bottom:5px;
    color:var(--color-white);
}
#plan :is(.list-view,.detail) h2 span.plan-type-1 {
    background:var(--color-orange);
}
#plan :is(.list-view,.detail) h2 span.plan-type-2 {
    background:var(--color-green);
}
#plan :is(.list-view,.detail) h2 span:nth-of-type(2) {
    margin-right:10px;
}
#plan :is(.list-view,.detail) h2 span:nth-of-type(2) {
    color:var(--color-text);
}
#plan :is(.list-view,.detail) .fee {
    font-size:1.2em;
    font-weight:bold;
}
#plan :is(.list-view,.detail) .fee small {
    font-weight:normal;
}
#plan :is(.list-view,.detail) strong {
    color:var(--color-red);
}
#plan :is(.list-view,.detail) em {
    font-style:normal;
    font-weight:bold;
    padding-right:10px;
}
#plan .nothing {
    padding:40px 5px;
    font-weight:bold;
    text-align:center;
    border:solid 1px var(--color-text);
    margin:40px 0;
}

.list-view .fav {
    background:var(--color-dark-glass);
    width:40px;
    height:40px;
    overflow:hidden;
    border:none;
    border-radius:50%;
    position:absolute;
    top:20px;
    right:20px;
    cursor: pointer;
    display:flex;
    align-items: center;
    justify-content: center;
    outline:none;
    z-index:2;
}
.detail .fav {
    background:var(--color-dark-glass);
    width:auto;
    height:60px;
    overflow:hidden;
    border:solid 1px var(--color-dark-glass);
    border-radius:30px;
    cursor: pointer;
    display:flex;
    gap:10px;
    padding:0 20px;
    align-items: center;
    justify-content: center;
    outline:none;
}
:is(.list-view,.detail) .fav.on {
    background:var(--color-light-glass);
}
:is(.list-view,.detail) .fav img {
    margin-top:0;
}
:is(.list-view,.detail) .fav:not(.on) img:first-of-type {
    display:block;
}
:is(.list-view,.detail) .fav:not(.on) img:last-of-type {
    display:none;
}
:is(.list-view,.detail) .fav.on img:first-of-type {
    display:none;
}
:is(.list-view,.detail) .fav.on img:last-of-type {
    display:block;
    animation: .4s boing-anim linear 1;
}
@keyframes boing-anim{
  10% { transform: scale(1.1, 0.8); }
  40% { transform: scale(1.4, 0.6); }
  50% { transform: scale(0.6, 1.3); }
  60%{ transform: scale(1.3, 0.7); }
  70% { transform: scale(0.8, 1.2); }
  90%{ transform: scale(0.9, 1.1); }
  100% { transform: scale(1,1); }
}


/* Category */
main #ctg {
    background:var(--color-super-white);
}
main #ctg li a {
    text-align:center;
    border:solid 1px var(--color-dark-glass);
    border-radius:4px;
    padding:10px;
    text-decoration:none;
}
main #ctg li a:hover {
    background:var(--color-blue);
    color:var(--color-white);
}

/* Plans */
main #plan {
    background:var(--color-lightgray);
}


.caution {
    border:solid 1px var(--color-red);
    padding:calc(var(--padding) / 2);
    color:var(--color-red);
    border-radius:var(--radius-inner);
}

.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-super-white);
    border-right:none;
	border-radius:var(--radius) 0 0 var(--radius);
	z-index:10;
    transition:1s;
}
.message-ticker.false {
    background:var(--color-red);
}

main dialog {
	position:fixed;
	top:50%;
	left:50%;
	translate: -50% -50%;
	border:solid 1px var(--color-lightgray);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	min-width:400px;
	max-width:100%;
	padding:var(--padding);
	z-index:10;
}

main dialog .button {
	min-width:100%;
}
main dialog .button:first-of-type {
	background:var(--color-lightgray);
}
main dialog .button:first-of-type:hover {
	color:var(--color-text);
}


.buttons {
	text-align:center;
}



/* Media Query */
@media ( width <= 920px ) {

}
@media ( width <= 720px ){

}
@media ( width <= 520px ){
}