@charset "UTF-8";
@media screen and (max-width: 850px) {
/*--------------------------------------
  home
--------------------------------------*/

#wrapper {
	width: 100%;
	overflow:hidden;
}
.content {
	width:96%;
	margin: 0 2%;
}
.homepost {
	display: block;
}
.footerbox {
	display: block;
	margin: 30px auto;
}
.footerbox li {
    width: 96%;
    padding: 0 2%;
				margin:0 0 30px 0;
}
.category-counts li {
	width:auto;
    padding: 0;
    margin: 0 10px 0.5em 0;
}
.top-pagepost-head {
	display: block;
	align-items: center;
	margin: 0 0 20px 0;
	justify-content:center;
}
.toppage-post {
	display: block;
	margin: 0 auto;
}
#header {
    padding: 10px 0 20px 0;
}
.breadcrumb__list .breadcrumb__item {
    margin: 0 5px 0 0;
    font-size: .65em;
}
.meta .category {
    padding: 5px 10px;
    font-size: .75em;
}
#sitelogo {
    text-align: center;
    margin: 0 auto;
				font-size:1.5em;
}
.hyakumeiten li {
    width: 35px;
    margin: 0 5px 0 0;
}
.homeblock .top-pagepost-head .title {
    font-size: 2em;
    font-weight: bold;
				text-align:center;
				margin: 30px 0 0px 0;
				line-height:1em;
}
.homepost .image {
    position: relative;
    margin: 0 auto 10px auto;
    box-shadow: 10px 14px 14px -7px rgba(0, 0, 128, 0.16), 0 0 28px -14px rgba(0, 0, 128, 0.18);
    width: 100%;
    overflow: hidden;
    z-index: 0;
}
.site-description {
    margin: 0 0 0 0;
    color: #111;
    font-size: 8px;
    text-align: center;
}
.top-pagepost-head h2, .top-pagepost-head h3 {
    font-size: 1em;
				margin:0;
}
.toppage-post {
	width:100%;
	 margin: 0 auto 30px auto;
    background: #F1F3F9;
    padding: 10px;
	}
.toppage-post .post {
		display:flex;
		align-items:center;
    width: 100%;
    margin: 0 0 10px 0;
    background: #F1F3F9;
    padding: 30px 2% 0 2%;
}
.toppage-post .image {
    margin: 0 3% 0 0;
    box-shadow: 10px 14px 14px -7px rgba(0, 0, 128, 0.16), 0 0 28px -14px rgba(0, 0, 128, 0.18);
    width: 30%;
}
.toppage-post .date {
	display:none;
}
	.toppage-post .post .title {
    font-weight: normal;
    font-size: .85em;
    line-height: 20px;
				width:60%;
}
.ranking .post {
    width: 96%;
    margin: 0 2% 0px 2%;
    padding: 10px;
    counter-increment: number;
}
/*--------------------------------------
  hamberger
--------------------------------------*/
.nav-btn {
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: 10px;
}
.nav-icon {
	width: 25px;
}
.nav-text {
	display: inline-block;
	font-size: 10px;
	font-weight: normal;
	line-height: 1;
	color: #111;
}
#nav-toggle + .nav-btn .nav-text::before {
	content: "MENU";
}
#nav-toggle:checked + .nav-btn .nav-text::before {
	content: "CLOSE";
}
#nav-toggle:checked + .nav-btn .nav-icon {
	content: url("https://umaimono-daisuki.com/wp-content/uploads/2026/01/burger-hover.svg");
}
.side-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 75%;
	height: 100vh;
	background: #F1F3F9;
	transition: 0.6s ease;
	box-shadow: -5px 0 20px rgba(0,0,0,0.1);
	padding: 60px 30px;
	z-index: 9000;
}
.drawer-content {
	margin:30px 0;
}
.drawer-content li {
	margin:0 0 15px 0;
}
#nav-toggle:checked ~ .side-menu {
	right: 0;
}
.overlay{
  position:fixed;
  inset:0;
  z-index:8000;
  background:rgba(0,0,0,0);
  display:none;
  cursor:pointer;
}
#nav-toggle:checked ~ .overlay{ display:block; }
/*--------------------------------------
  bt-home
--------------------------------------*/
.btn-wrapper {
	width: 70%;
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	margin: 50px auto;
}
.clickable-btn {
	width: 100%;
	max-width: 600px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.75rem 1.4rem;
	font-size: 1.25rem;
	font-weight: bold;
	background: #5f5f5f;
	color: #fff;
	border-radius: 12px;
	text-decoration: none;
	cursor: pointer;
	transition: 0.2s ease;
}
.clickable-btn:hover {
	background: #333;
	transform: scale(1.03);
}
.clickable-btn:active {
	transform: scale(0.97);
}
.clickable-btn .icon {
	font-size: 0.9rem;
	opacity: 0.8;
}
#single-container {
    display: block;
    width: 100%;
    margin: 0 auto;
}
#sidebar {
    width: 96%;
    margin: 30px 2%;
}
.footerbox .second {
    border-inline: none;
}
#sidebar .ranking .post {
    width: 96%;
    padding: 0 2%;
    border-bottom: solid #EEEEEF 2px;
    margin: 0 0 10px 0;
}
#single-main {
    width: 96%;
    margin: 30px 2% 0 2%;
}
.article .thumbnail {
    width: 98%;
    margin: 0 auto 30px auto;
}
#shop dl {
	    width: 100%;
    margin: 0 auto 30px auto;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto;
}
#shop dt {
    width: 25%;
    padding: 3%;
    background-color: #8a8a8a;
    margin: 0 1% 3px 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
#shop dd {
    width: 62%;
    padding: 3%;
    background-color: #fff;
    margin: 0 0 3px 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
#single-main .content {
    width: 96%;
    margin: 50px 2%;
}
.sns-banner {
    display: block;
    align-items: center;
    flex-wrap: wrap;
}
.sns-banner li {
    width: 100%;
    margin: 30px 0;
    transition: opacity 0.3s ease;
    transition: transform 0.3s ease;
    transform-origin: center;
}
.article h3, .article h4, .article h5 {
    font-size: 25px;
    font-weight: 600;
    margin: 50px 0 20px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.external-article {
    background: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: solid #EEEEEF 1px;
    margin: 10px 0 10px 0;
    transition: opacity 0.3s ease;
    box-shadow: 10px 14px 14px -7px rgba(0, 0, 128, 0.16), 0 0 28px -14px rgba(0, 0, 128, 0.18);
    transition: transform 0.3s ease;
				overflow:hidden;
}
.external-article .title {
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 10px 0;
    font-weight: normal;
    position: static;
}
.pagination {
    font-size: .95em;
    margin: 5em auto;
    font-weight: bold;
}
#footer h3 {
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 10px 0;
}
#footer {
    background: #EEE;
    padding: 10px 0;
    font-size: .85rem;
}
.sns-acount {
    display: flex;
    justify-content: space-between;
    margin: 30px 0 0 0;
				font-size:1.5em;
				text-align:center;
}
.external-article .disc {
	display:none;
}
.homepost .post {
    margin: 0 auto;
    background: #F1F3F9;
    padding: 20px;
width: calc(90% - 20px);
}
.top-content {
    width: 100%;
    margin: 30px auto;
}
.homepost .post .category, .toppage-post .post .category {
	display:none;
}
.ranking {
	display:flex;
	counter-reset: number;
}
.ranking .post {
    width: 45%;
    margin: 0 auto;
    padding: 5px;
    counter-increment: number;
}
	.amazonitem {
    display: block;
    border: solid 1px #ccc;
    padding: 10px 40px;
    width: 85%;
    background: #fff;
    box-shadow: 10px 14px 14px -7px rgba(0, 0, 128, 0.16), 0 0 28px -14px rgba(0, 0, 128, 0.18);
}
.amazonitem .img {
    width: 100%;
    margin: 10px auto 5px auto;
}
.amazonitem .meta {
    width: 100%;
    padding: 0;
}
}