/* --- webfont --- */
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:700|Quicksand:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/kokoro.css');


/* ↓62.5%は1rem=10pxにするためですがiPad周辺はサイズ調整のために90%にしています */
@media screen and (min-width: 801px) {
	html{ font-size:62.5%;}}
@media screen and (max-width: 800px) {
	html{ font-size:90%;}}
@media screen and (max-width: 500px) {
	html{ font-size:62.5%;}}

/* --- 全体の背景・テキスト --- */
* {
margin:0;
padding:0;
box-sizing: border-box;
}

html,body{
margin: 0;
padding: 0;
background:#ffffff;/* 全体の背景色 */
color:#404040;/* 全体の文字色 */
font-size:0.9rem;/* 全体の文字サイズ */
font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* --- 全体のリンクテキスト --- */
a {
color:#404040;
text-decoration: none;
outline:none;
cursor: pointer;
transition: 0.3s;/*マウスオンから0.4秒で変化。*/
}
a:hover {
color: #d7d7d7;
text-decoration: none;
outline:none;
}

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background:#c0c6c9;
	text-align:center;
	color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 9999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/* --- コンテナ（切り替え部分有別CSS） --- */
#container {
margin: 0;
padding: 0;
}

/* --- ページ（切り替え部分有別CSS） --- */
#page{
width: 100%; /* サイトの最大サイズ */
margin: 0 auto; /* センタリング */
background-color: #ffffff; /* コンテナの背景色 */
padding:0;
}

/* --- ▼ヘッダ内の設定開始 --- */

/* --- ヘッダ（切り替え部分有別CSS） --- */

/* --- サイトタイトル --- */
#header {
background-color: #f6f6f6;
}

#header div.sitetitle {
margin: 0 0 5px; /* サイトタイトルのマージン（上、左右、下） */
font-family: 'Quicksand', sans-serif;
font-size:3rem;
font-weight:700;
}
#header div.sitetitle a {
color: #c0c6c9;
}
#header div.sitetitle a:hover {
color: #d7d7d7;
}

/* --- メニュー（切り替え部分有別CSS） --- */
nav{
height: 100px;
position: relative;
}
.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
height: 100px;
padding: 0 2em;
}


/* --- ▲ヘッダ内の設定終了 --- */


/* --- ▼コンテンツ内の設定開始 --- */

/* --- コンテンツ --- */
#content {
max-width: 980px; /* コンテンツの最大幅 */
margin: 0 auto; /* コンテンツの下マージン */

}

/* --- トップイラスト（トップページのみ） --- */
.content-image img,video {
width: 100%;
margin-bottom: 1.5em; /* トップイラストの下マージン */
text-align:center;
}

.content-image video {
  // iPhone safariの枠線を消す
  filter: drop-shadow(0px 0px rgba(0,0,0,0));

  // PCのChromeの枠線を消す
  outline: none;
  border: none;
  text-decoration:none;
}
/*==================================================
スライダーのためのcss
===================================*/

/*ドットナビゲーションの設定*/

.dots-wrap {
    text-align:center;
	margin-bottom: 2em; 
}

.dots-wrap li {
    display:inline-block;
	margin:0 1.5em 2em 1.5em;
}

.dots-wrap button {
    color: transparent;
    outline: none;
    box-shadow: none; /* ←これを追加 */
    border: none;     /* 念のため枠線も無効化 */
    width:10px;/*ドットボタンのサイズ*/
    height:10px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#d7d7d7;/*ドットボタンの色*/
}

.dots-wrap .slick-active button{
    background:#404040;/*ドットボタンの現在地表示の色*/
}


/* --- セクション（共通設定） --- */
.section {
margin: 0 0 2em; /* セクションのマージン（上、左右、下） */
}
.section-title {/* 見出し */
margin: 0 0.5em 0.5em; /* 見出しのマージン（上、左右、下） */
color:#c0c6c9;
font-family: 'Quicksand', sans-serif;
font-size:2rem;/* 見出しの文字サイズ */
font-weight:700;
}
.section-title:first-letter{
font-family: 'Quicksand', sans-serif;
font-size:3rem;
font-weight:700;
color: #c0c6c9;
}
.section-title-mp1 {/* 見出しが日本語の場合 */
margin: 0 0 1em; /* 見出しのマージン（上、左右、下） */
padding: 0.2em 0.8em; /* 見出しのパディング（上下、左右） */
color:#404040;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 1.5rem;
font-weight: 600;
background-color:#f6f6f6;
}

/* --- トップページ作品紹介（親要素、画像要素別CSS） --- */

.works-text {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: center;
align-content: center;
align-items: center;
padding: 1.5em;
}
.kurochiro {
color: #404040;
background: #f6f6f6;
}
.sunameru {
color:#404040;
background: #f6f6f6;
}
.sunameguri {
color: #404040;
background: #f6f6f6;
}
.works-title {
color: #c0c6c9;
width: 100%;
text-align: center;
font-family: 'Quicksand', sans-serif;
font-size: 2rem;
font-weight: 700;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}
.works-title-mp1 {/*ひらがな用(未使用)*/
width: 100%;
text-align: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 2rem;
font-weight: 700;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}
.works-title-kkr {/*くろちろ用(未使用)*/
width: 100%;
text-align: center;
font-family: "kokoro";
font-size: 2rem;
font-weight: 700;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}
.works a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;/*テキスト非表示*/
white-space: nowrap;/*テキスト非表示*/
overflow: hidden;/*テキスト非表示*/
}

/*NEWリボン*/
.ribbon {
right: 0;
top: 0;
position: absolute;
height: 17em; 
width: 17em; 
transform: rotateZ(45deg);/*斜め表示角度*/
}
.ribbon span {
text-align: center;
display: block;
width: 100%;
background: #c0c6c9;
color: #ffffff;
font-size: 0.8rem;
font-weight: bold;
font-family: sans-serif;
padding: 0.3em 0 0.3em;
}


/* --- トップページサイト案内、すなめる工房作品解説 --- */
.info {margin: 0;
padding: 0 2em 2.5em; /* 見出しのパディング（上、左右、下） */
}
.info-title {/* 見出し */
margin: 0 0 1em; /* 見出しのマージン（上、左右、下） */
padding: 0px; /* 見出しのパディング（上下、左右） */
color:#000000;
font-family: 'Quicksand', sans-serif;
font-size:1.2rem;/* 見出しの文字サイズ */
font-weight:400;
}

.info-text {
margin: 0;
padding: 0 1.7em 0;

}

/* --- 更新記録（別CSS） --- */

/* --- オフライン情報（親要素、画像要素別CSS） --- */

.harapeko {
color: #715c1f;
background: #e9e4d4;
}
.offline-text {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: center;
align-content: center;
align-items: center;
padding: 1.5em;
}
.offline-title {
width: 100%;
text-align: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 1.5rem;
font-weight: 700;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}
.offline a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-indent: 100%;/*テキスト非表示*/
white-space: nowrap;/*テキスト非表示*/
overflow: hidden;/*テキスト非表示*/
}

/* --- リンクポリシー（別CSS） --- */

/* --- くろちろ目次 --- */
ul.kc {
width: 100%;
list-style-type: none; /*olの数字を消す*/
}
ul.kc li a {
display: block;
margin: 0 0 2px;
padding:0 1.5em 0;
color: #000000;
background: #f6f6f6;
}
ul.kc li a:hover {
color: #ffffff;
background: #c0c6c9;
}
/* --- くろちろキャラ紹介（親要素別CSS） --- */
.characters {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.chara-image {
width: 100%;
margin-bottom: 1rem;
}
.chara-image img {
display: block;
width: 100%;
height: auto;
}
.chara-text {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.chara-name {
width: 100%;
text-align: center;
font-size: 1rem;
padding: 0 0 0.3em;
}

/* --- すなめる工房イラストサムネ（li別CSS） --- */
.sunameru-text {
margin: 0;
padding: 0 0.5em 1.5em;
}
.sunameru-image ul {
display: flex;
flex-wrap: wrap;
justify-content:space-around;
width: 100%;
}

.sunameru-image img {
display: block;
width: 100%;
}

/* --- すなめる工房アニメサムネ（li別CSS） --- */

.sunanimeru-image ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* ← 左寄せに変更 */
gap: 0.7em; /* サムネ間の余白 */
width: 100%;
}

.sunanimeru-image img {
display: block;
width: 100%;
}


/* --- すなめぐり水族館選択（別CSSあり） --- */

.sort-btn{
display: flex;
flex-wrap: wrap;
margin:20px 0px 50px;
list-style: none;
}

.sort-btn li{
position: relative;
cursor: pointer;
}

.sort-btn li::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
bottom:0;
left: -10%;
/*線の形状*/
width: 120%;
height: 2px;
background:#a0a0a0;
/*アニメーションの指定*/
transition: all .3s;
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.sort-btn li.active::after,
.sort-btn li:hover::after{
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

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

.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}


/* --- すなめぐりマウスオーバーでテキスト --- */
.meguri {
overflow:hidden;
position:relative;	/* 相対位置指定 */
}
.meguri .mericaption {
text-align:center;
color:#ffffff;
padding-top:20%;
}

.meguri .animecaption {/* --- すなにめるテキスト位置調整 --- */
text-align:center;
color:#ffffff;
padding-top:15%;
}
.meguri .mask {
width:100%;
height:100%;
position:absolute;	/* 絶対位置指定 */
top:0;
left:0;
opacity:0;	/* マスクを表示しない */
background-color:rgba(0,0,0,0.7);	/* マスクは半透明 */
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.meguri:hover .mask {
opacity:1;	/* マスクを表示する */
}


/* --- すなめぐり個別アルバムトップ画像（別CSS有）  --- */

.card-text {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: center;
align-content: center;
align-items: center;
padding: 1.5em;
background: #f6f6f6;
}

.meri-name {
width: 100%;
text-align: center;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 2rem;
font-weight: 700;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}

.meri-history {
width: 100%;
text-align:center;
padding: 0 0 0.3em; /* タイトルのパディング（上、左右、下） */
}


/* すなめぐりアルバムに戻るボタン */
.meguri-btn a {
    background: #f6f6f6;
    color: #404040;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0.5em auto 0;
    padding: 0.3em 5em;
  border: 1px solid #404040;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.meguri-btn a:hover {
    background: #c0c6c9;
    color: #ffffff;
  border: 1px solid #c0c6c9;
}
.meguri-btn a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #404040;
    border-right: 3px solid #404040;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.meguri-btn a:hover:after {
    border-color: #ffffff;
}



/* --- リンク --- */

/* --- トップページのSNS --- */
.contact-icons {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 1em;
}

.contact-link {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: #c0c6c9; /* 背景色はお好みで */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.contact-link img {
  width: 60%; /* ロゴ画像サイズは調整可能 */
  height: auto;
  display: block;
}

.contact-link:hover {
  background-color: #d7d7d7; /* ホバー時の色 */
}

.contact-link.text-icon {
  background-color: #c0c6c9; /* 背景色（お好みで） */
  color: white;
  font-weight: bold;
  font-size: 1rem;
  font-family: sans-serif;
  text-decoration: none;
  text-align: center;
}

.contact-link.text-icon::before {
  content: attr(data-label); /* data-label属性から文字取得 */
}

.contact-link:hover {
  background-color: #d7d7d7; /* ホバー時の色 */
}

/* --- 個人サイト用 --- */
.links ul {
display: flex;
flex-wrap: wrap;
justify-content:space-around;
width: 100%;
}
.links li {
list-style: none;
padding: 0 0 0.7em;
}
.links-image img {
display: block;
width: 100%;
}
.links-text {
width: 200px;
}
/* --- 検索サイト用 --- */
.search ul {
justify-content: flex-start;
}
.search li {
padding-left: 0.7em;
padding-right: 0.7em;
}
/* --- その他用 --- */
.links-nobanner ul {
padding: 0 1.5em 0;
}
.links-nobanner li {
list-style: none;
}
/* --- SNS用（保留） --- */
.links-banner ul {
display: flex;
flex-wrap: wrap;
justify-content:space-around;
width: 100%;
}
.links-banner li {
list-style: none;
padding: 0 0 0.7em;
}
.links-banner li a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
border-radius: 4px;/* --- 角丸 --- */
background-color:#f6f6f6;
color: #000000;
text-decoration: none;
text-align: center;
}
.links-banner li a:hover {
background-color:#c0c6c9;
color: #ffffff;
}
.sns {
font-family: 'Quicksand', sans-serif;
font-size:1.5rem;
font-weight:500;
}
.sns-mp1 {
font-size:1.2rem;
font-weight:500;
}

/* --- フォームメール --- */
.formmail {
width: 85%;
margin: 0 auto;
}
.mail {
padding-bottom: 0.5em;
}
.mail label {
display: block;
font-family: 'Quicksand', sans-serif;
font-size: 0.9rem;
padding-bottom: 0.5em;
}
.mail input[type=text] {/* テキストボックス */
background: #f6f6f6;
border: 0;
font-size: 0.9rem;
padding: 0.3em;
height: 2.3em;
width: 100%;
}
.mail textarea {/* テキストエリア */
background: #f6f6f6;
border: 0;
font-size: 0.9rem;
padding: 0.3em;
height: 10em;
width: 100%;
}
.mail input[type=submit] {
background-color: #c0c6c9;
border:0;
border-radius: 2px;
color: #ffffff;
cursor:pointer;
display: block;
font-size: 1.1rem;
padding: 0.3em;
text-align: center;
text-decoration: none;
width: 10rem;
font-family: 'Quicksand', sans-serif;
}
.mail input[type=submit]:hover {
background-color: #d7d7d7;
color: #ffffff;
}

/* --- ▲コンテンツ内の設定終了 --- */

/* --- ▼フッタ内の設定開始 --- */
#copyright {
color: #000000;
font-family: 'Quicksand', sans-serif;
font-size:1.2rem;
font-weight:400;
    text-align: center;
    display: block;
    padding: 0;}

#pagetop {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 2.5rem;
padding: 0.1em;
z-index:10;
}
#pagetop a {
background: #c0c6c9;
color: #ffffff;
text-decoration: none;
text-align: center;
display: block;
border-radius: 5px;/* --- 角丸 --- */
}
#pagetop a:hover {
ation: none;
background: #d7d7d7;
color: #fffffff;
}

/*========= waveを描画するエリア設定 ===============*/
canvas{display:block;
width: 100%;
height:200px;
z-index:1;
padding: 0;
margin:0;
}
/* --- ▲フッタ内の設定終了 --- */