#container {
}

/* --- ページ --- */
#page {
}

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

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

nav{
max-width: 1000px; 
display: flex;
flex-direction: row;
margin:  0 auto;
}
.navbar_toggle{
display: none;
}
.menu{
width: 100%;
-webkit-transform: translateX(0);
transform: translateX(0);
font-family: 'Quicksand', sans-serif;
font-size:1rem;
font-weight:500;
}
.menu ul{
height: 100px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 6px;
list-style-type: none;
}
.menu ul li{
padding: 0 0.5em;
border-bottom: none;
}
.menu a {
display: block;
border-radius: 4px;
padding: 6px 12px;
color: #000000;
text-decoration: none;
}
.menu li a:hover {
background-color:#c0c6c9;
color: #ffffff;
}

/* --- トップページ作品紹介左右表示 --- */
.works {
display: flex;
flex-wrap: wrap;
position: relative;
margin-bottom: 2em;
overflow: hidden;
}
.works-image {
width:60%;
}
.works-image img,video {
width: 100%;
height: 100%;
object-fit:cover;
object-position: right center;
}
.works:nth-child(odd) {/* 交互に表示 */
flex-direction: row-reverse;
}

/* --- 更新記録、リンクポリシー左右表示 --- */
.info dl {
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
}

.info dt {
padding: 0.2em 0 0;
width: 12%;
border-bottom:1px solid #d7d7d7;
}
.info dd {
padding: 0.2em 0 0;
width: 88%;
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-wrap: wrap;
position: relative;
overflow: hidden;
}
.offline-image {
width:25%;
}
.offline-image img {
width: 85%;
height: 100%;
object-fit: cover;
}
/* --- くろちろキャラ紹介４キャラセット --- */
.chara {
padding: 1em;
width: 23%;
background-color: #f6f6f6;
margin-bottom: 1em;
}
/* --- すなめる工房イラストサムネ６セット --- */
.sunameru-image li {
list-style: none;
padding: 0 0 0.7em;
width: 15%;
}
/* --- すなめる工房アニメサムネ３セット --- */
.sunanimeru-image li {
list-style: none;
width: calc((100% - 1.4em) / 3); /* gapのぶん調整 */
}

/* --- すなめぐり水族館選択（） --- */
.sort-btn{
justify-content: center;
}

.sort-btn li{
margin: 0 20px 10px;
}

/* --- すなめぐりメリ選択 --- */

.item {
  width: 33.3%;/*横並びで3つ表示*/
}


/* --- すなめぐりトップ画像左右表示 --- */
.meri-card{
display: flex;
flex-wrap: wrap;
position: relative;
margin-bottom: 3.5em;
overflow: hidden;
}

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


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