@charset "UTF-8";
/* CSS Document */

.clearfix {zoom:1;}
.clearfix:after { content: ""; display: block; clear: both;}

* { margin: 0; padding: 0;}
body { margin: 0; padding: 0;}
ol,ul,li { margin: 0; padding: 0; list-style: none;}
dl,dt,dd,p { margin: 0; padding: 0;}

/*link---------------------*/

a:link{ 
	color: #777; 
	text-decoration:none; 
	font-weight: 700;
}


a:visited{ 
	color: #777; 
	text-decoration:none; 
	font-weight: 700;
}

a:hover, active{
	color: #111; 
	text-decoration:none; 
	font-weight: 700;
}


a img {border : none;}
a:hover img{filter:alpha(opacity=70);opacity:0.7;}


/*body-----------------------*/

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body{
	width:100%;
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 400;
    	font-style: normal;
    	color: #111;
	background-color: #DDD;
	-webkit-text-size-adjust:100%;
	}

th,td {vertical-align: top; /* 上寄せ */}/* テーブルセル全般の文字設定 */




/* navi ----------------------- */
nav {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #DDD;
    border-bottom: 1px solid #111;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
    font-size: 2rem;
    z-index: 999;
}

nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    flex: 1;
    border-right: 1px solid #111;
}

/* 最初のリストアイテムの左右罫線を削除 */
nav li:first-child { border-left: none; }
nav li:last-child  { border-right: none; }

nav a:link,
nav a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;  
    color: #111;
    text-decoration: none;
    padding: 0.5em;
    background-repeat: no-repeat;
    background-position: center;
}

nav a:hover {
    color: #fff;
    background-color: #111;
}

/* 各リンクにアイコンをCSSで付与（data URI） */
nav a[href$="/index.html"],
nav a[href$="index.html"],
nav a[href="/"] { 
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon fill='currentColor' points='256,7.375 0,190.313 0,504.625 201.609,504.625 201.609,336.672 310.391,336.672 310.391,504.625 512,504.625 512,190.313'/%3E%3C/svg%3E"); 
	background-size: 28px 28px;
}

nav a[href$="/guide.html"],
nav a[href$="guide.html"] { 
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256,0C114.612,0,0,114.612,0,256s114.612,256,256,256s256-114.612,256-256S397.388,0,256,0z M250.669,88.462c26.504,0,47.998,21.482,47.998,48.01c0,26.496-21.494,47.994-47.998,47.994c-26.513,0-48.006-21.498-48.006-47.994C202.662,109.944,224.156,88.462,250.669,88.462z M315.554,428c0,3.343-2.709,6.044-6.048,6.044h-103.3c-3.339,0-6.044-2.7-6.044-6.044v-26.372c0-3.343,2.705-6.052,6.044-6.052h12.808c6.678,0,12.096-5.418,12.096-12.095V277.72c0,0-26.612,2.61-35.55,2.98c-8.937,0.363-20.452-13.964,3.549-25.96l82.484-45.836c1.96-1.038,4.327-0.988,6.225,0.164c1.906,1.152,3.067,3.211,3.067,5.434v168.979c0,6.677,5.418,12.095,12.091,12.095h6.529c3.339,0,6.048,2.709,6.048,6.052V428z'/%3E%3C/svg%3E"); 
	background-size: 28px 28px;
}

nav a[href$="/gallery.html"],
nav a[href$="gallery.html"] { 
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M410.842,207.265c97.767-8.626,117.891-54.628,89.098-97.749C448.234,32.075,334.016,1.59,218.762,36.607C73.721,80.672-22.226,214.687,4.453,335.938C31.13,457.19,170.334,519.762,315.375,475.697c62.951-19.13,116.653-55.201,155.091-99.821c15.516-18.01,20.891-73.726-50.998-70.844C342.812,308.106,332.197,214.206,410.842,207.265z M385.949,102.144c7.068-7.059,16.84-11.111,26.839-11.111c9.998,0,19.762,4.052,26.838,11.111c7.067,7.076,11.119,16.848,11.119,26.847s-4.052,19.762-11.119,26.838c-7.076,7.067-16.84,11.12-26.838,11.12c-9.999,0-19.771-4.052-26.839-11.12c-7.067-7.076-11.119-16.839-11.119-26.838S378.882,109.22,385.949,102.144z M65.256,226.724c5.711-17.185,24.26-26.485,41.436-20.782c17.185,5.711,26.493,24.261,20.79,41.437c-5.711,17.184-24.269,26.484-41.438,20.789C68.861,262.449,59.553,243.9,65.256,226.724z M127.946,377.433c-11.794,12.451-31.455,12.998-43.905,1.214c-12.459-11.793-12.998-31.446-1.204-43.896c11.785-12.459,31.437-13.006,43.896-1.213C139.182,345.323,139.73,364.975,127.946,377.433z M190.542,171.051c-15.466,11.128-37.031,7.606-48.159-7.86c-11.128-15.474-7.606-37.03,7.859-48.159v-0.008c15.475-11.119,37.032-7.598,48.159,7.868C209.53,138.358,206.009,159.923,190.542,171.051z M250.461,105.589c-2.317-19.88,11.919-37.857,31.8-40.165c19.872-2.308,37.857,11.929,40.165,31.8c2.316,19.872-11.928,37.856-31.801,40.164C270.746,139.706,252.769,125.461,250.461,105.589z M360.897,377.106c0,12.121-4.911,23.948-13.478,32.524c-8.567,8.566-20.411,13.478-32.533,13.478c-12.113,0-23.965-4.912-32.524-13.478c-8.566-8.576-13.478-20.403-13.478-32.524c0-12.122,4.912-23.974,13.478-32.542c8.559-8.559,20.411-13.47,32.524-13.47c12.122,0,23.966,4.911,32.533,13.47C355.986,353.131,360.897,364.983,360.897,377.106z'/%3E%3C/svg%3E"); 
	background-size: 28px 28px;
}

nav a[href$="/offline.html"],
nav a[href$="offline.html"] { 
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M42.568,392.629c2.391-3.375,5.609-6.031,9.234-7.844c3.578-1.891,7.625-2.875,11.766-2.875h0.688l45.922,10.078l58.922,12.875l102.313,22.391c4.953,1.125,10,1.609,15.031,1.609c17.141,0,33.875-6.156,47.031-17.703l3.5-3.078L458.443,300.52l40.453-35.828c6.078-5.375,6.641-14.688,1.25-20.781c-5.313-6.094-14.625-6.641-20.703-1.25l-43.25,38.266L314.021,389.051c-7.703,6.781-17.5,10.422-27.578,10.422c-2.938,0-5.875-0.281-8.813-0.906l-69.828-15.469l-84.344-18.625L64.35,351.395l-0.078-0.016v-0.188l-0.422-0.078l-8.469-1.875c-2.438-0.844-4.688-1.969-6.641-3.359c-3.359-2.453-6.031-5.609-7.844-9.25c-1.891-3.641-2.875-7.688-2.875-11.828c0-2.516,0.438-5.172,1.203-7.766c0.906-2.797,2.234-5.313,3.859-7.547c2.375-3.375,5.578-6.031,9.219-7.844c3.578-1.891,7.625-2.875,11.766-2.875h0.656l45.938,10.078l58.922,12.875l102.313,22.391c4.969,1.125,10,1.609,15.031,1.609c2.875,0,5.688-0.125,8.469-0.484c14.141-1.672,27.578-7.563,38.578-17.219l3.484-3.063l121.484-107.563l40.453-35.828c5.234-4.625,6.359-12.109,3.141-17.984c-0.484-0.984-1.125-1.953-1.891-2.797c-5.328-6.094-14.625-6.656-20.703-1.266l-43.25,38.281L314.506,305.91c-7.688,6.797-17.5,10.438-27.578,10.438c-2.922,0-5.859-0.281-8.813-0.922l-69.828-15.469l-84.328-18.609l-59.125-13.094h-0.078v-0.203l-0.406-0.063l-8.469-1.891c-0.422-0.141-0.781-0.344-1.188-0.5c-1.031-0.438-2.063-0.813-3.016-1.391c-0.844-0.359-1.672-0.906-2.453-1.469c-3.344-2.453-6.016-5.594-7.844-9.234c-1.875-3.641-2.859-7.703-2.859-11.828c0-2.516,0.422-5.188,1.188-7.766c0.922-2.797,2.234-5.328,3.859-7.563c2.375-3.359,5.594-6.016,9.234-7.828c3.563-1.891,7.609-2.875,11.75-2.875c0.703,0,1.406,0.078,2.109,0.078l32.328,6.984l28.609,6.156l141.359,30.578c17.484,3.859,35.75-0.906,49.188-12.797l86.906-76.547l52-45.781l36.734-32.391c7.984-7.063,11.344-17.984,8.609-28.266c-2.656-10.359-10.922-18.266-21.344-20.5l-11.047-2.391l-80.609-17.422L287.287,1.301c-17.5-3.844-35.766,0.922-49.188,12.813L101.709,133.91l-41.016,36.031l-35.672,31.359c-1.484,1.672-2.734,3.359-3.844,5.172c-0.641,0.781-1.203,1.469-1.75,2.313c-3.5,4.766-6.313,10.219-8.188,16.172c-1.75,5.531-2.594,11.188-2.594,16.719c0,11.969,3.844,23.359,10.625,32.734c2.141,2.984,4.656,5.688,7.359,8.203l-0.141,0.141l-1.969,1.672c-1.469,1.688-2.719,3.359-3.844,5.188c-0.625,0.766-1.188,1.469-1.75,2.313c-3.5,4.75-6.297,10.219-8.188,16.156c-1.75,5.531-2.578,11.188-2.578,16.719c0,11.969,3.844,23.391,10.625,32.766c2.156,2.969,4.672,5.656,7.391,8.156l-0.172,0.172l-1.984,1.672c-1.453,1.688-2.719,3.359-3.828,5.188c-0.641,0.766-1.203,1.469-1.75,2.313c-3.516,4.75-6.313,10.203-8.188,16.156c-1.75,5.516-2.594,11.188-2.594,16.719c0,11.969,3.844,23.375,10.625,32.75c3.438,4.766,7.563,8.953,12.391,12.453c4.766,3.5,10.219,6.297,16.172,8.125l0.625,0.203l62.219,13.656l58.906,12.875l102.313,22.391c4.969,1.125,10,1.609,15.031,1.609c17.156,0,33.875-6.172,47.031-17.703l3.5-3.078L457.959,383.66l40.453-35.828c6.078-5.391,6.641-14.688,1.25-20.781c-5.313-6.078-14.625-6.641-20.703-1.25l-43.25,38.266L313.521,472.191c-7.703,6.781-17.5,10.406-27.578,10.406c-2.938,0-5.859-0.266-8.813-0.906l-69.828-15.453l-84.328-18.625L63.85,434.535l-8.469-1.891c-2.656-0.906-5.047-2.094-7.141-3.625c-3.344-2.469-6.016-5.609-7.828-9.25c-1.891-3.641-2.875-7.688-2.875-11.828c0-2.516,0.422-5.172,1.188-7.766C39.646,397.379,40.959,394.848,42.568,392.629z'/%3E%3C/svg%3E");
	background-size: 28px 28px;
}

nav a[href*="tegalog"]{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M255.996,0C134.42,0,35.845,98.567,35.845,220.151c0,115.21,88.51,209.689,201.238,219.292V512l160.482-123.239c48.064-40.382,78.591-100.935,78.591-168.61C476.155,98.567,377.597,0,255.996,0z M140.414,249.512c-16.213,0-29.36-13.147-29.36-29.36c0-16.212,13.147-29.36,29.36-29.36c16.212,0,29.351,13.147,29.351,29.36C169.765,236.364,156.626,249.512,140.414,249.512z M255.996,249.512c-16.204,0-29.351-13.147-29.351-29.36c0-16.212,13.147-29.36,29.351-29.36c16.213,0,29.36,13.147,29.36,29.36C285.356,236.364,272.209,249.512,255.996,249.512z M371.587,249.512c-16.213,0-29.352-13.147-29.352-29.36c0-16.212,13.139-29.36,29.352-29.36c16.213,0,29.36,13.147,29.36,29.36C400.947,236.364,387.8,249.512,371.587,249.512z'/%3E%3C/svg%3E");
	background-size: 28px 28px;
}
nav a[href*="wavebox.me"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M473.984,74.248c-50.688-50.703-132.875-50.703-183.563,0c-17.563,17.547-29.031,38.891-34.438,61.391c-5.375-22.5-16.844-43.844-34.406-61.391c-50.688-50.703-132.875-50.703-183.563,0c-50.688,50.688-50.688,132.875,0,183.547l217.969,217.984l218-217.984C524.672,207.123,524.672,124.936,473.984,74.248z'/%3E%3C/svg%3E");
	background-size: 28px 28px;
}

/* スマホ：アイコン表示 */
@media (max-width: 640px) {
    nav { font-size: 0; }

    nav a {
        text-indent: -9999px; /* テキスト非表示 */ 
        background-size: no-repeat center;
    }
    
}

/* PC：アイコン非表示*/
@media (min-width: 641px) {
    nav a {
        background-image: none !important;
    }
}

/*container---------------------*/

#container {
	width: 80%;
	text-align:left;
	margin: 0 auto;
	padding-top: 3%;
	padding-bottom: 4%;
	font-size: 1rem;
	color: #111;
	line-height: 1.7rem;
}

#container h1 {
	font-family:  "Josefin Sans", sans-serif;
	font-size: 5rem;
	font-weight: 700;
	color: #111;
	letter-spacing: 0;
	padding-top: 4rem;
	padding-bottom: 3rem;
}

#container h2 {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	color: #111;
	letter-spacing: 0.1em;
	margin-top: 1.2rem;
	padding-bottom: 1.5rem;
}


#container h3 {
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 700;
    	font-style: normal;
	font-size: 1.2rem;
	color: #111;
	letter-spacing: 0;
	padding-bottom: 0.8rem;
}


.keywords{
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 700;
    	font-style: normal;
	font-size: 1rem;
	color: #111;
	letter-spacing: 0;
	padding-bottom: 0rem;
	white-space: nowrap;
}


#container p {
	padding-bottom: 3rem;
}


/*page top----------------------*/
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 15px;
    width: 15px;
    border-top: 3px solid #111;
    border-right: 3px solid #111;
    transform: translateY(20%) rotate(-45deg);
}


/*button----------------------*/

button{
	display:inline-block;
	margin: 0.7rem 0.3rem 0 0;
	border: solid 1px #111;
}

button a:link {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
 	padding: 0.8rem 1.5rem;
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 700;
    	font-style: normal;
	font-size: 1rem;
	color: #eee;
	background-color: #111;
	line-height: 1.5;
	text-decoration: none;
}

button a:visited {
	color: #eee;
	background-color: #111;
}

button a:hover {
	background: #fff;
	color: #111;
}



/*sold out----------------------*/

.soldout {
    position: relative;
    margin: 3rem 0;
    padding: 2rem 3.5rem 2.5rem 3.5rem;
    border: 1px solid #111;
    font-size: 1rem;
}

.soldout > div {
    position: absolute;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    top: -.6em;
    left: 1em;
    padding: 0 0.5rem;
    background-color: #ddd;
    color: #111;
}

.soldout ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

.soldout li {
	display:inline-block;
	padding: 0;
}

.subtitle{
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 700;
    	font-style: normal;
	font-size: 1.1rem;
	color: #111;
	margin-top:1.5rem;
}


/*Offline card----------------------*/

.card-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0.7rem;
}

.card-1 {
	grid-row: span 4;
	display: grid;
	grid-template-rows: subgrid;
	gap: 0.7rem;
	border: 1px solid #111;
}

.card-1 img {
	width: 100%;
}

.card-1:hover img{
	filter:alpha(opacity=70);opacity:0.7;
}

.content-img {
	text-align: center;
	background:  #DDD;
}

.content-1 {
	display: flex;
	position: relative;
	text-align: left;
	padding: 1rem;
	margin: 0;
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 700;
    	font-style: normal;
	font-size: 1.2rem;
	border-bottom: 1px solid #111;
}

.content-2 {
	display: flex;
	position: relative;
	text-align: left;
	padding: 1rem;
	margin: 0;
    	font-family: "ryo-gothic-plusn", sans-serif;
    	font-weight: 300;
    	font-style: normal;
	font-size: 1rem;
}



/*footer---------------------*/
#footer {
	padding-top: 2rem;
	margin-bottom: 1rem;
}
#footer p {
	font-family: "Josefin Sans", sans-serif;
	font-weight:400;
	font-size: 100%;
	color: #777;
	letter-spacing: 0.1em;
}


/*gallery card----------------------*/

.card-container2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 140px));  /* ここを変更！ */
	gap: 1rem;
	justify-content: left;
	padding: 0;      
}

.card-2 {
	grid-row: span 6;
	border: 1px solid #333;
	border-radius: 0;
	overflow: hidden;
	transition: transform 0.2s;
}

.card-2 img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;             /* 画像が歪まないようにトリミング */
	transition: opacity 0.3s;
}

.card-2:hover img {
	opacity: 0.7;
}


/*gallery img----------------------*/

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.7rem;
  padding: 0rem;
  margin: 0 auto;
  max-width: 1800px; 
  justify-content: left;
}

/* 画像カード */
.gallery-item {
  break-inside: avoid;           /* 重要なポイント！ */
  margin-bottom: 0rem;
  overflow: hidden;
  background: none;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-comment {
	text-align: center;
	padding: 0.3rem 0;
	font-size: 0.9rem;
	color: #555;
	line-height: 1.2;
}

@media (min-width: 1600px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);   /* 3列固定 */
    /* またはもっと大きくしたいなら 380px × 5 = 1900pxくらいまで */
  }
}

/* 漫画画像のレスポンシブ設定 */
.manga-container {
            max-width: 700px; /* PCでの最大幅 */
            margin: 0 auto; /* 中央寄せ */
            padding: 10px;
        }

.manga-image {
            max-width: 100%; /* 親要素の幅を超えないようにする */
            height: auto; /* 元の縦横比を維持する */
            display: block; /* 画像の下にできる余白をなくす */
            margin: 0 auto 10px; /* 画像を中央寄せにし、下に余白を設ける */
	    pointer-events: none;
        }


/*smart phone-----------------------*/

/* @media のブロック内に h1 のスタイルを移動 */
@media screen and (max-width: 550px) {
    html{
        font-size: 14px;
    }

    nav a{ font-size: 1.5rem;}

    #container p{
        font-size: 1rem;
        line-height: 1.8;
    }

    /* ここにh1のスタイルを追加する（一番最後がベスト） */
    #container h1 {
        font-family:  "Josefin Sans", sans-serif;
        font-size: 4rem; /* ← ここを2remに調整 */
        font-weight: 700;
        color: #111;
        letter-spacing: 0;
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

}