:root{
	--color-font: #27302c;
}

.contents-wrap{
	max-width: 1200px;
	margin: 1.5em auto;
	color: var(--color-font);
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

.contents-wrap a{
	color: inherit;
}
.contents-wrap a:hover{
	text-decoration: none;
}
.contents-wrap p{
	margin-bottom: 0;
}

.emphasis-link{
	position: relative;
}
.emphasis-link::before{
	content: '';
	border-radius: 48% 52% 44% 56% / 65% 51% 49% 35%;
	width: 70px;
	height: 73px;
	position: absolute;
	left: -25px;
	top: 40%;
	transform: translateY(-50%);
	background: #efe7dc;
	z-index: -1;
	transition: .25s;
}
.emphasis-link:hover::before{
	width: calc(70px + 6%);
	height: calc(73px + 60%);
}

.breadcrumb{
	background: transparent;
	padding: 0;
	margin: 0;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.6;
}
.breadcrumb a,
.intro a,
.pencil-line{
	padding-bottom: 5px;
	background: url(/yodobook/osusumehon/images/a-line.svg) no-repeat;
	background-position-y: bottom;
}
.breadcrumb a:hover,
.intro a:hover{
	background: none;
}

.header-banner{
	margin: 15px 0 20px;
	position: relative;
}
.header-banner p{
	content: '';
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: max(14px, min(1.2vw, 16px));
	border-radius: 0em 1.6em 0em .6em / .6em 2em 0.6em;
	padding: 10px 16px 0 0px;
	font-weight: 700;
}
.header-banner p small{
	color: inherit;
}
.header-banner img{
	border-radius: 0.3em;
}

	nav {
	display: grid;
	gap: 0px;
	background: #efe7dc;
	border-radius: 65px 65px 65px 60px / 60px 100px 70px 90px;
	padding: 1em 0 1em 0;
	width: 180px;
	box-shadow: 2px 4px #738477;
	border: 1px solid #738477;
	margin-inline: auto;
	margin-top: 1.8em;
}

nav .nav-button {
	border: none;
	border-radius: 0;
	font-family: var(--font-rounded);
	width: 115px;
	border-right: 0;
	background: transparent;
	color: var(--color-font);
	font-weight: 700;
	margin: auto;
	padding: 0;
	height: max(42px, min(5vw, 46px));
	position: relative;
	font-size: 12px;
	text-align: left;
}
nav .nav-button::after{
	content: '';
	background: url(/yodobook/osusumehon/images/menu-line.svg) no-repeat;
	height: 12px;
	display: block;
	background-position: 0px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-size: 120%;
}

nav .nav-button::before{
	content: "";
	position: absolute;
	top: 19px;
	right: 2px;
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(135deg);
}
nav .nav-button span{
	display: block;
}

nav .nav-button:hover span{
  animation: zoom .4s;
}
@keyframes zoom {
	25% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(0px);
	}
	75% {
		transform: translateY(-2px);
	}
}

.column-main{
	position: relative;
}
.column-main::after{
	content: '';
	background: rgba(255, 255, 255, 0.1) url(/yodobook/osusumehon/images/book1.png) no-repeat;
	background-position: bottom right;
	background-size: max(140px, min(16vw, 165px));
	background-blend-mode: lighten;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -2;
}

.content-inner{
	max-width: 980px;
	margin-inline: auto;
}

.date{
	margin: 0;
	text-align: right;
}

.date p{
	font-size: 12px;
	margin-bottom: 0;
	font-family: var(--font-rounded);
}

.intro{
	text-align: center;
	line-height: 2;
	margin-top: max(25px, min(4vw, 35px));
	position: relative;
	color: #5a5d5c;
	font-weight: 700;
	font-size: max(12px, min(2vw, 14px));
}
.intro::before{
	content: "";
	position: absolute;
	background: #f0efd7;
	width: 160px;
	height: 100px;
	border-radius: 65px 100px 65px 100px / 60px 100px 70px 90px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
}
.intro .strong{
	font-size: 135%;
	margin-bottom: .4em;
	color: var(--color-font);
}
.intro .strong small{
	font-size: 75%;
}
.intro.closing{
	margin-top: 35px;
	margin-bottom: 8em;
}
.intro.closing::before{
	width: 70px;
	height: 185px;
	border-radius: 65px 100px 65px 100px / 160px 120px 170px 150px;
	-webkit-transform: translate(-50%, -50%) rotate(77deg);
	transform: translate(-50%, -50%) rotate(77deg);
	background: #efe7dc;
}

/* 投稿に参加するボタン */
.join-button{
	text-align: center;
	margin: max(2em, min(3vw, 2.5em)) 0;
}
.join-button a{
	padding: 15px max(45px, min(6vw, 55px));
	border: 1px solid #738477;
	font-weight: 700;
	font-size: max(14px, min(1.5vw, 15px));
	position: relative;
	transition: .25s;
	display: inline-block;
	color: #365030;
}

.join-button a::before{
	content: '';
	position: absolute;
	font-size: 195%;
	top: 44%;
	left: 5px;
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 1px solid;
	border-right: 1px solid;
	transform: rotate(45deg);
}
.join-button a:hover{
  animation: zoom .4s;
}
.join-button a:active{
	background: #efe7dc;
	transform: translate(2px,2px);
}


.contents-wrap h3{
	font-family: var(--font-rounded);
	font-size: max(22px, min(3.5vw, 28px));
	margin-top: max(2.5em, min(4vw, 3em));
	margin-bottom: .6em;
	display: grid;
	grid-template-columns: max(50px, min(7vw, 65px)) 1fr;
	align-items: center;
	gap: 5px;
}
.contents-wrap h3 span{
	background: linear-gradient(transparent 65%, #f4f1a3 65%);
	width: fit-content;
	padding: 0 5px 2px 5px;
}
.contents-wrap h3:first-of-type{
	margin-top: 2em;
}
.contents-wrap h3 img[src*="suzume"]{
	transform: scale(-1, 1);
}
.contents-wrap h3:has(img[src*="books"]){
	grid-template-columns: 45px 1fr;
	gap: 12px;
}
.contents-wrap h3:has(img[src*="hitsuji-sp"]){
	grid-template-columns: max(70px, min(8.5vw, 80px)) 1fr;
	gap: 12px;
}
.contents-wrap h3 .x-bold{
	font-size: 125%;
	margin-left: 6px;
}

.post-books-wrap{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	gap: 20px 25px;
}
.post-books-wrap .item a{
	box-shadow: 8px 8px #e1e1e1;
	display: block;
	transition: .25s;
	border: 2px solid var(--color-font);
}

.post-books-wrap .item a:hover,
.ranking-item a:hover img{
	box-shadow: none;
	border-color: #eac313;
}

.post-books-wrap .item h4{
	margin-top: 0;
}
.comment{
	border-radius: 1em .6em 2em .6em / .6em 2em .6em;
	background-color: #efe7dc;
	position: relative;
	font-size: max(11px, min(1.5vw, 13px));
	padding: 8px 15px;
	font-weight: 700;
}
.comment::after{
	position: absolute;
	bottom: -12px;
	left: 1em;
	width: 0;
	height: 0;
	content: '';
	border-width: 12px 12px 0 5px;
	border-style: solid;
	border-color: #efe7dc transparent transparent transparent;
}
.post-books-wrap .item:nth-child(3n+2) .comment{
	background-color: #f3d3be;
}
.post-books-wrap .item:nth-child(3n+3) .comment{
	background-color: #d1e6d7;
}
.post-books-wrap .item:nth-child(3n+1) .comment{
	background-color: #efe7dc;
}
.post-books-wrap .item:nth-child(3n+2) .comment::after{
	border-color: #f3d3be transparent transparent transparent;
}
.post-books-wrap .item:nth-child(3n+3) .comment::after{
	border-color: #d1e6d7 transparent transparent transparent;
}
.post-books-wrap .item:nth-child(3n+1) .comment::after{
	border-color: #efe7dc transparent transparent transparent;
}

.post-books-wrap .item h5{
	margin: 14px 0 0;
	font-size: max(12px, min(1.5vw, 14px));
}


/* 投稿数ランキング */
.ranking-container{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px max(15px, min(4vw, 30px));
	margin-top: 50px;
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, 220px);
	justify-content: center;
}
.ranking-container .ranking-item{
	position: relative;
}
.ranking-container .ranking-item .rank-icon{
	width: max(38px, min(5.5vw, 50px));
	height: max(38px, min(5.5vw, 50px));
	background: #ffe251;
	position: absolute;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-family: var(--font-rounded);
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
}
.ranking-container .second .rank-icon{
	background: #c6c8cb;
}
.ranking-container .third .rank-icon{
	background: #ed9d72;
}
.ranking-container .ranking-item:nth-child(3n+1) .rank-icon{
	border-radius: 48% 52% 44% 56% / 65% 51% 49% 35%;
}
.ranking-container .ranking-item:nth-child(3n+2) .rank-icon{
	border-radius: 49% 51% 71% 29% / 35% 69% 31% 65%;
}
.ranking-container .ranking-item:nth-child(3n+3) .rank-icon{
	border-radius: 62% 38% 26% 74% / 65% 42% 58% 35%;
}

.ranking-item img[src*="book_img"]{
	width: 170px;
	margin-inline: auto;
	box-shadow: max(6px, min(1vw, 8px)) max(6px, min(1vw, 8px)) #e1e1e1;
	border: 2px solid var(--color-font);
	transition: .25s;
}

.ranking-item img[src*="line"]{
	margin: max(20px, min(3.5vw, 30px)) auto max(15px, min(2vw, 20px));
}
.ranking-item p{
	font-size: max(12px, min(2vw, 14px));
}


@media (min-width: 1000px) {
	.contents-wrap{
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
	}

	nav{
		margin-top: 74%;
		width: 100%;
	}
	nav .nav-button:last-of-type:after{
		content: none;
	}
	.hidden-sp{
		display: grid;
	}
	.visible-sp{
		display: none !important;
	}
}
@media screen and (min-width:600px) and ( max-width:1000px) {
	nav {
	margin-top: 40px;
	width: auto;
	max-width: 460px;
	grid-template-columns: repeat(3, auto);
	padding: .9em 3em;
	gap: 20px;
	border-radius: 100px 65px 95px 100px / 70px 100px 70px 90px;
}
	nav .nav-button {
	width: auto;
	padding: 0 20px 0 0;
	margin: 0;
	text-align: left;
	height: 30px;
	font-size: 13px;
}
nav .nav-button::before{
	top: 11px;
}
nav .nav-button::after{
	background-size: 145%;
	background-position: 0px 11px;
	height: 15px;
}
}

@media not all and (min-width: 1000px) {
	.hidden-sp{
		display: none !important;
	}
	.visible-sp{
		display: grid !important;
	}
}
@media not all and (min-width: 768px) {
	.contents-wrap,
	.container:not(:root){
		margin-top: 0;
	}
	.header-banner p{
		display: none;
	}
	.header-banner{
		margin: 10px calc(50% - 50vw) 15px;
	}
	.header-banner img{
		border-radius: 0;
	}

	.ranking-container .ranking-item .rank-icon{
		top: -43px;
	}
}
@media not all and (min-width: 640px) {
	.post-books-wrap{
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
	}
	.post-books-wrap .item a{
    box-shadow: 6px 6px #e1e1e1;
	}

	.ranking-container{
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(auto-fit, 27vw);
	}
}

@media not all and (min-width: 600px) {
	nav .nav-button:last-of-type:after{
		content: none;
	}
}

/* 羊土社の𝕏 */
.button-container{
	gap: 20px;
	margin-top: 20px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	display: grid;
}
.button-container .link-button{
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	padding: 1.5em 0;
	background: url(/yodobook/osusumehon/images/account-box.svg) no-repeat;
	background-size: 100% 100%;
}
.button-container .link-button img{
	border-radius: 100%;
	width: max(75px, min(9vw, 90px));
}
.button-container .link-button:hover img{
  animation: zoom .4s;
}

.toAccountList{
	text-align: right;
	margin-top: 15px;
	margin-bottom: 4em;
}
.toAccountList a{
	font-weight: 700;
	font-size: 16px;
	padding-bottom: 10px;
	position: relative;
	padding-right: 20px;
}
.toAccountList a::after{
	content: "";
	position: absolute;
	top: 5px;
	right: 0;
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 2px solid;
	border-right: 2px solid;
	transform: rotate(45deg);
}


.to-index{
	margin: max(3em, min(4vw, 3.5em)) 0 0;
	padding-bottom: 7em;
	text-align: center;
}
.to-index a{
	font-size: 15px;
	font-weight: 700;
	padding-bottom: 10px;
}

@media not all and (min-width: 768px) {
	.toAccountList a{
		font-size: 14px;
	}
	.toAccountList a::after{
		top: 4px;
	}
}
@media not all and (min-width: 640px) {
	.button-container{
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		gap: 10px;
	}
}


.twitter-tweet{
	border: 2px solid #738477;
	border-radius: 13px;
	width: 90% !important;
}



/* index.html用 */
.table_area{
  margin-top: 3em;
  margin-bottom: 3em;
}

.container {
  max-width: 1200px;
	margin: 1.5em auto;
	color: var(--color-font);
	font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}

.row{
  display : flex;
  flex-wrap: wrap;
}

.row:before,
.row:after {
  width:0px;
}

.fair-card {
  padding: 10px;
  margin : 20px 0;
}

.fair-card:hover {
  transform: scale(1.05); /*画像の拡大率*/
  transition-duration: 0.4s;  /*変化に掛かる時間*/
}

/* lg */
@media (min-width: 1199px) {
  .fair-card-big {
    min-height: 190px;
  }
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
  .fair-card-big {
    min-height: 190px;
  }
}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {
  .fair-card-big {
    min-height: 210px;
  }
  .fair-card-big div img{
    margin-top:10px;
  }
}

.fair-tag {
  text-align: left;
  float: left;
  padding: 0.2em 1em;
  border-radius: 10px;
  color: #FFF;
  margin-bottom: 0.5em;
  font-size: small;
  font-weight: bolder;
}

.fair-tag-red {
  background-color: red;
}

.fair-tag-gray {
  background-color: gray;
}

.fair-date {
  font-size: small;
  text-align: right;
  color: #666;
  padding-top: 3px;
}

.fair-card img,
.fair-detail-head {
  border-radius: 4px;
}

.fair-name {
  font-size: small;
  margin-top: 0.5em;
  margin-bottom: 0;
}

.society-link,
.society-link:hover,
.society-link:visited,
.society-link:link {
  color  : black;
  text-decoration: none;
}