/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

* {margin:0;padding:0;}
html {font-size:62.5%;} /* 1rem = 10pxに設定 */
body {font-size:clamp(1.0rem, calc(0.8rem + 0.7vw), 2.0rem); line-height:1.8;color:#200800; font-family:'Noto Sans Jp',sans-serif;}
li {list-style:none;}
#template{display:none;}
a {text-decoration:none;}

/* body_background */
body{
    --pattern-dot-size: 12.5%;
    background-color: #fdfdf8;
    background-image:
      radial-gradient(
        at 25% 25%,
        #f8f8e7 0 var(--pattern-dot-size),
        transparent 0
      ),
      radial-gradient(
        at 75% 75%,
        #f8f8e7 0 var(--pattern-dot-size),
        transparent 0
      );
    background-size: 10px 10px
}

/* header */
header {background:#754;color:#fffdfa;padding:0.3em 1em;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr;}
h1 {font-size:1em; letter-spacing:0.1em;}
header>nav {text-align:right;}
header a {color:#fd9;background:#421;padding:3px;border-radius:3px;}
#username {font-weight:bold;}

/* main */
main {padding:1em;}

/* description */
#description {border:1px solid #cba;padding:0.5em 1em 1.5em 1em;margin-bottom:3em;}
#description>article {margin-bottom: 1.5em;}
#description>article:last-child {margin-bottom: 0;}
h3 {font-size:1em;}
h3::before {content:'\0bb';color:#754;margin-right:0.3em;}
h3::after {content:'\0ab';color:#754;margin-left:0.3em;}
.description_ok_container {text-align:center;}
.description_ok_container a {color:#fffdfa;background:#754;padding:0.5em;border-radius:3px;border:1px solid #754;}


/* shoplist */
#shoplist_container {border:1px solid #cba;}
#shoplist_container>div {margin: 0.5em 1.5em 0 1.5em;}
#time {font-weight:bold;letter-spacing:0.1em;}
#shoplist {padding:0.5em 1em;}

/* shop */
.shop_li {border:1px solid #754;background:#fff;border-radius:5px;margin-bottom:1em;padding:0;}
.shop_li>* {padding:1em 0.5em;}
.shop_li .shop_title {display:grid;grid-template-columns:auto 1fr auto;align-items:middle;border-bottom:1px solid #754;line-height:1em;padding-bottom:0.7em;background:#754;color:#fffdfa}
h2 {font-size:1.5em;}
.shop_link a {margin:0 0.5em;}
.shop_link img {height:1.2em;}
.shop_move img {height:1.5em;}
.shop_move .toUP img {transform:rotate(-90deg);}
.shop_move .toDN img {transform:rotate(90deg);}
.shop_li:first-child .toUP {display:none;}
.shop_li:last-child .toDN {display:none;}

/* コメントリスト:first-child */
.shop_li .comment_list li:first-child {display:grid;grid-template-columns:auto 1fr;}
.shop_li .comment_list>li:first-child .status {grid-column:1/2;grid-row:1/3;}
.shop_li .comment_list>li:first-child img {width:4em;}
.shop_li .comment_list>li:first-child .comment {grid-column:2/3;grid-row:1/2;margin-left:1em;font-size:1.25em;}
.shop_li .comment_list>li:first-child .metadata {grid-column:2/3;grid-row:2/3;margin-left:1em;text-align:right;font-size:75%;}
.shop_li .comment_list>li:first-child .metadata .owner {font-weight:bold;}

/* コメントリスト:not(:first-child) */
.shop_li .comment_list li:not(:first-child) {display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding-top: 0.5em;border-top:1px solid #cba;}
.shop_li .comment_list>li:not(:first-child) {grid-column:1/2;grid-row:1/2;}
.shop_li .comment_list>li:not(:first-child) img {width:2.5em;}
.shop_li .comment_list>li:not(:first-child) .comment {grid-column:2/3;grid-row:1/2;margin-left:1em;}
.shop_li .comment_list>li:not(:first-child) .metadata {grid-column:3/4;grid-row:1/2;text-align:right;font-size:75%;align-self:end;}
.shop_li .comment_list>li:not(:first-child) .metadata .owner {font-weight:bold;}

/* 投稿する */
.shop_li .update {border-top:1px dashed #754;}
.shop_li form {display:grid; grid-template-columns:auto 1fr auto;gap:1em;}
.shop_li .form_status input[type="radio"] {display:none;}
.shop_li .form_status img {width:2.5em; height:2.5em; object-fit:cover; object-position: bottom;}
.shop_li .form_status input[type="radio"]:checked ~ img {object-position:top;}
.shop_li input[type=text] {font-size:1em; padding:0 0.5em; line-height:1em;}
.shop_li input[type=submit] {font-size:1em; padding:0 1em;}

/* footer */
footer {border-top:3px double #cba;padding:3em 0;}
#footer_container {margin: 0 auto;width:max-content;display:grid;grid-template-columns:auto auto;gap:3em;align-items:center;}
#footer_address {font-size:0.7em;}


/* hoverイベント */
@media (hover: hover){
	/* :hover擬似クラスで実装 */
	header a:hover {background:#fd9;color:#421;}
	.description_ok_container a:hover {background:#fd9;color:#421;}
	
}
@media (hover: none){
	/* :active擬似クラスで実装 */
	header a:active {background:#fd9;color:#421;}
	.description_ok_container a:active {background:#fd9;color:#421;}
	
}