/*
レスポンシブ表示用
*/

@charset "utf-8";

@media only screen and (max-width: 768px) {
	/* 漫画ビューワー */
	#swipe-message {
		position: absolute;
		top: calc(50% - 50px);
	}
	
	#swipe-message .smartphone-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#swipe-message .smartphone-view i:first-child {
		font-size: 30px;
	}
	#swipe-message .pc-view {
		display: none;
	}
	
	main.comic .comic-area {
		width: 100%;
		height: 100%;
		padding-top: 50px;
	}

	main.comic .comic-area .viewerSwiper {
		/* width: 100%; */
		height: auto;
	}

	main.comic .comic-area .swiper-pagination-progressbar {
		width: 100%;
		/* top: calc(100% - 33px) !important; */
	}

	main.comic .comic-area .swiper-page-number {
		padding-left: 5%;
	}

	main.comic .categories-single {
		padding-top: 0.8rem;
		margin: 0 auto;
	}

	main.comic h1.comic-title {
		padding-left: 5%;
	}

	main.comic .comic-area .swiper-button-prev,
	main.comic .comic-area .swiper-button-next {
		display: block;
		background: transparent; /* 背景を透明に */
		color: transparent;      /* 矢印の色を透明に */
		width: 20%;              /* クリックしやすい幅に調整 */
		height: 100%;
		top :0;
		margin: 0;
	}
	
	main.comic .comic-area .swiper-button-prev::after,
	main.comic .comic-area .swiper-button-next::after {
		color: transparent;  /* 矢印自体を透明に */
	}
}

@media only screen and (max-width: 580px) {

	h1 {font-size: 150%;}
	h2 {font-size: 130%;}
	h3 {font-size: 120%;}
	h4 {font-size: 110%;}
	h5 {font-size: 100%;}
	h6 {font-size: 100%;}

	/* ヘッダー */
	header {
		max-width: 100%;
		margin: 0 auto;
		padding: 1.6rem 0 3rem 0;
	}

	header .site-logo svg {
		max-width: 45vw;
	}

	#menu-switch {
		display: block;
	}

	header .menu-menu-container {
		display: none;
	}

	header .menu-menu-container ul li:not(:first-child){
		margin-left: 0px;
	}

	/* フッター */
	footer {
		padding: 4rem 2rem 1rem 2rem;
	}

	footer nav.footer-nav {
		max-width: 90%;
	}

	/* メイン部分 */
	#container {
		max-width: 100%;
		padding: 2rem 0.5rem 6rem 0.5rem;
	}

	/* content */
	.content,.content-transparent  {
	padding: 1rem 1rem 3rem 1rem;
	}

	/* Swiper */
	.storiesSwiper .swiper-slide {
		height: 100%;
	}

	.illustSwiper .swiper-slide {
		height: 250px;
	}

	.commonSwiper .swiper-button-prev::after {
		font-size: 15px;
		height: 15px;
	}

	.commonSwiper .swiper-button-next::after {
		font-size: 15px;
		height: 15px;
	}

	.commonSwiper .swiper-pagination .swiper-pagination-bullet {
		width: 13px;
		height: 13px;
	}
	
	.commonSwiper .swiper-pagination .swiper-pagination-bullet-active {
		width: 13px;
		height: 13px;
	}

	.commonSwiper .pagination .swiper-pagination {
		top: 0px;
		bottom: 0;
		width: 200px;
	}

	/* 新着漫画・小説をgridレイアウトにする */
	.latest-items {
		padding: 1rem;
	}
	
	.latest-items a {
		display: grid;
		padding: 15px;
		grid-template-columns: 130px 70px 40px;
		gap: 0px 20px;
	}

	.latest-items a.goods-link {
		padding: 0px 5px;
	}

	.latest-items img.goods-img {
		height: 180px;
		border: 1px solid var(--usu-mozi-color);
		border-radius: 15px;
	}

	.latest-items .comic-thumbnail {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}

	.latest-items .comic-title {
		grid-column: 2/4;
	}

	.latest-items p.comic-post-date {
		grid-column: 2/4;
		margin: 0;
	}

	.latest-items p.title {
		font-size: 15px;
	}

	.latest-items .latest-comic-nakami img {
		width: 100px;
	}

	.latest-items .novel-title {
		grid-column: 1 / 4;
	}

	.latest-items .novel-category {
		grid-column: 1 / 4;
	}

	.latest-items .novel-post-date {
		grid-column: 1 / 4;
	}

	.latest-items .news-title {
		grid-column: 1 / 4;
	}

	.latest-items .news-date {
		grid-column: 1 / 4;
	}

	.latest-items a.rss {
		display: block;
	}

	.latest-items .tegalog a {
		display: block;
	}
	/* カテゴリ・タグ一覧 */
	#categories-and-tags.slide-panel {
		right: -75%;
		width: 75%;
	}

	/* イラストギャラリー */
	.illust-list .grid-sizer,
    .illust-list li {
        width: 47% !important;
    }

	/* 画像のモーダル */
	#close {
    top: -40px;
    right: 10px;
	}

	/* モーダルの画像スタイル */
	#modal .modal-wrapper .modal-content {
		max-width: 100vw;
		max-height: 80vh;
	}

	button#prevBtn {
		color: #444;
		top: 50%;
		left: 0;
	}
	
	button#nextBtn {
		color: #444;
		top: 50%;
		right: 0;
	}

	/* 漫画ビューワー */
	#swipe-message {
		position: absolute;
		top: calc(50% - 50px);
	}
	
	#swipe-message .smartphone-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#swipe-message .smartphone-view i:first-child {
		font-size: 30px;
	}
	#swipe-message .pc-view {
		display: none;
	}
	
	main.comic .comic-area {
		width: 100%;
		height: 100%;
		padding-top: 50px;
	}

	main.comic .comic-area .viewerSwiper {
		/* width: 100%; */
		height: auto;
	}

	main.comic .comic-area .swiper-pagination-progressbar {
		width: 100%;
		/* top: calc(100% - 33px) !important; */
	}

	main.comic .comic-area .swiper-page-number {
		padding-left: 5%;
	}

	main.comic .categories-single {
		padding-top: 0.8rem;
		margin: 0 auto;
	}

	main.comic h1.comic-title {
		padding-left: 5%;
	}

	main.comic .comic-area .swiper-button-prev,
	main.comic .comic-area .swiper-button-next {
		display: block;
		background: transparent; /* 背景を透明に */
		color: transparent;      /* 矢印の色を透明に */
		width: 20%;              /* クリックしやすい幅に調整 */
		height: 100%;
		top :0;
		margin: 0;
	}
	
	main.comic .comic-area .swiper-button-prev::after,
	main.comic .comic-area .swiper-button-next::after {
		color: transparent;  /* 矢印自体を透明に */
	}

	main.comic .comic-area .img-single img {
		max-width: 100% !important;
	}

	/* 作品紹介ページ */
	p.story-summary, p.story-summary2 {
		max-width: 300px;
	}
	
	main.muki .characters a, main.muki .characters a img {
		width: 150px;
		height: 150px;
	}
	
	main.muki .characters {
		gap: 5px;
	}

	main.aquaverse ul.singularity {
		column-count: 1;
	}

	/* 小説ページ */
	header.novel {
		padding: 2px 20px;
	}
	
	header.novel a {
		display: none;
	}

	/* 特異点ごとのあしらい */
	/* キャラクター紹介 */
	main.aquaverse .characters .chara {
		grid-template-columns: 30% 65%;
	}
}