/* --- ページ（メニューの都合で余白消すため） --- */
#page {
}


/* --- ヘッダ（メニューの都合で余白消すため） --- */
#header {
width: 100%; /* IE 6のために幅の指定が必要 */
margin: 0 0 2em; /* ヘッダのマージン（上、左右、下） */
padding: 0; /* ヘッダのパディング（上、左右、下） */
}



/* --- メニュー --- */

/*ハンバーガー*/
.navbar_toggle{
position: relative;
z-index:9998;
}
.navbar_toggle_icon {
position: relative;
display: block;
height: 2px;
width: 30px;
background: #c0c6c9;
-webkit-transition: ease .5s;
transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1) {
top: 0;
}
.navbar_toggle_icon:nth-child(2) {
margin: 8px 0;
}
.navbar_toggle_icon:nth-child(3) {
top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
top: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
top: -10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition:ease .5s;
transition:ease .5s;
z-index:1000;
font-family: 'Quicksand', sans-serif;
font-size:1rem;
font-weight:500;
position:relative;
}
.menu ul li{
padding: 1em;
border-bottom: 1px solid #c0c6c9;
background-color:#f6f6f6;
}
/*OPEN時の動き*/
.menu.open {
-webkit-transform:translateX(0);
transform:translateX(0);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

/* --- トップページ作品紹介上下表示 --- */
.works {
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 2em;overflow: hidden;
}
.works-image {
width:100%;
}
.works-image img,video {
width:100%;
object-fit: cover;
}

/* --- 更新記録、リンクポリシー上下表示 --- */
.info dl {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-flow: column nowrap;
}

.info dt {
padding: 0.2em 0 0;
width: 100%;
}
.info dd {
width: 100%;
border-bottom:1px solid #d7d7d7;
}

.info table {
margin: 0;
padding: 0;
width: 100%;
}

.info td {
padding: 0.2em 0 0;
text-align:left;
vertical-align:top;
}

/* --- オフライン情報上下表示 --- */
.offline {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.offline-image {
width:100%;
}
.offline-image img {
width:100%;
object-fit: cover;
}
/* --- くろちろキャラ紹介２キャラセット --- */
.chara {
padding: 1em;
width: 45%;
background-color: #f6f6f6;
margin-bottom: 1rem;
}
/* --- すなめる工房サムネ４セット --- */
.sunameru-image li {
list-style: none;
padding: 0 0 0.7em;
width: 23%;
}
/* --- すなめる工房サムネ２セット --- */
.sunanimeru-image li {
list-style: none;
width: calc((100% - 0.7em) / 2); /* gapのぶん調整 */
}

/* --- すなめぐり水族館選択 --- */
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}

/* --- すなめぐりメリ選択 --- */	
.item {
  width: 49.5%;/*横並びで2つ表示*/
}

/* --- すなめぐりトップ画像上下表示 --- */
.meri-card{
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 2em;
overflow: hidden;
}

.card-image {
width:100%;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}


/* --- フッタ（メニューの都合で余白消すため） --- */
#footer {
width: 100%; /* IE 6のために幅の指定が必要 */
margin: 0; /* フッタのマージン */
padding: 0; /* フッタのパディング（上、左右、下） */
}