.center {
  text-align:center
}
/* ↑centerクラスをセンタリング */


.center_m {
  margin-right:auto;
  margin-left:auto;
}
/* ↑centerクラスをマージンでセンタリング */




body {
  color : #555555;
  font-size : 12px;
  width:800px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
  background:#fff;
  letter-spacing:0.02em ;
  line-height:1.5 ;
}
/* ↑基本の文字色、フォントサイズの指定 */



iframe {
  border: 0px solid black;
  max-width: 100%;
}
/* ↑インラインフレームの指定 */







a:link { color: #333333; }/* リンクの色 */
a:visited { color: #aaaaaa; }/* 踏んだ後のリンクの色 */
a:active { color: #a6ff00; }/* 押した瞬間のリンクの色 */
a:hover { color: #b2e00a; }/* マウスをのせたときのリンクの色 */
a { text-decoration: none;
 font-weight: bold; }/* 下線なし、太字に */
/* ↑リンクまわりの指定 */


.mozaiku{
   filter: blur(4px) brightness(40%) contrast(80%) grayscale(15%);
}
/* ↑モザイクをかけたいときのクラス */

.menu-bar {
  table-layout: fixed;
  margin-left : auto;
  margin-right : auto;
  width : 380px;
}
/* ↑メニューバーの余白など調整 */


.btn-sticky {
  display: inline-block;
  padding: 0.8em 2em;
  text-decoration: none;
  background: #f7f7f7;
  border-left: solid 6px #c2f312;/*左線*/
  color: #777777;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:hover {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}
/* ↑付箋風に表示 */


.browser-back {
  display: inline-block;
  text-decoration: none;
  background: #555555;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  overflow: hidden;
  transition: .3s;
  font-size : 10px
}
.browser-back:hover {
  background: #888888;
}
a.browser-back:link { color: #ffffff; }/* リンクの色 */
/* ↑戻るボタンのカスタム */


.share-sns {
  display: inline-block;
  padding: 0.8em 1.2em;
  margin: 5px;
  text-decoration: none;
  background: #212336;
  border-left: solid 4px #403fff;/*左線*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  font-size : 9px
}
.share-sns:hover {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}
a.share-sns:link { color: #ffffff; }/* リンクの色 */
a.share-sns:visited { color: #fff; }
a.share-sns:hover { color: #b2e00a; }/* マウスをのせたときのリンクの色 */
/* ↑snsシェアボタンを付箋風に表示 */



.fusen-link {
  display: inline-block;
  padding: 0.8em 1.2em;
  margin: 5px;
  text-decoration: none;
  background: #f7f7f7;
  border-left: solid 6px #c2f312;/*左線*/
  color: #777777;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  font-size : 9px
}
.fusen-link:hover {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}
/* ↑リンクを付箋風に表示 */



.page-title {
  position: relative;
  display: inline-block;
  padding: 15px 60px;
}
.page-title:before, .page-title:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 1px;
  background-color: #777;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.page-title:before {
  left:0;
}
.page-title:after {
  right: 0;
}

/* ↑ページタイトルのリボンかざり */



.keisen {
  width: 400px;
  border: none;
  border-top: 1px dashed #888888;
  height: 2px;
  margin: 2em auto;
}
/* ↑罫線の指定 */


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .keisen {
   max-width: 80%;
   border: none;
   border-top: 1px dashed #888888;
   height: 2px;
  margin-right:auto;
  margin-left:auto;
  }
/* ↑罫線の指定 */
}



.keisen-500 {
  width: 500px;
  border: none;
  border-top: 1px dashed #888888;
  height: 2px;
  margin: 2em auto;
}
/* ↑罫線の指定 */


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .keisen-500 {
   max-width: 80%;
   border: none;
   border-top: 1px dashed #888888;
   height: 2px;
  margin-right:auto;
  margin-left:auto;
  }
/* ↑罫線の指定 */
}




.chushaku {
  color: #bbbbbb;
  font-weight: normal;
  font-size: 12px;
}
/* ↑注釈　サイズ小さめ色薄め */




#request {
background-image : url('https://chariki.daa.jp/request/request_haikei.png');
background-size: 30% auto;
background-position: right bottom;
background-attachment: fixed;
background-repeat: no-repeat;

}
/* ↑ご依頼ページに背景画像 */


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #request {
    max-width:90%;
    margin-right:auto;
    margin-left:auto;
  }
}



#about {
background-image : url('https://chariki.daa.jp/about/about-back.png');
background-size: 100% auto;
background-position:bottom;
background-attachment: fixed;
background-repeat: no-repeat;

}
/* ↑aboutページに背景画像 */



#post {
background-image : url('https://chariki.daa.jp/post/post-back.png');
background-size: 30% auto;
background-position: right bottom;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* ↑postページに背景画像 */


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #post {
    background-image : url('https://chariki.daa.jp/post/post-back.png');
    background-size: 70% auto;
    background-position: right bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    }
/* ↑スマホ用postページに背景画像 */
}








h2{
  font-size : 15px;
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}
h2:before, h2:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
h2:before {
  border-top: dotted 1px #535aaa;
  border-left: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  left: 0;
}
h2:after {
  content: '';
  border-top: dotted 1px #535aaa;
  border-right: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  right: 0;
}
/* ↑h2見出しにワク */





.midashi {
  font-size : 20px;
  font-weight: bold;
  color: #555555;
}
/* ↑目立ち字 */





.koushin-box {
  margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
  border-top: solid 1px #bbbbbb;
  border-bottom: solid 1px #bbbbbb;
  text-align : left;
  width:380px
}
.koushin-box th {
  color: #555555;
  font-weight: bold;
  padding : 15px 10px;/*上下 左右*/
  border-bottom: dashed 1px #bbbbbb;
}
.koushin-box td {
  padding : 15px 10px;
  border-bottom: dashed 1px #bbbbbb;
}
/* ↑更新ボックスのデザイン */




.koushin-ifr {
  margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
  text-align : left;
}
.koushin-ifr th {
  color: #555555;
  font-weight: bold;
  padding : 10px 0px 10px 0px;/*上下 左右*/
  border-bottom: dashed 1px #bbbbbb;
}
.koushin-ifr td {
  padding : 10px 0px 10px 10px;
  border-bottom: dashed 1px #bbbbbb;
}
/* ↑更新インラインフレームのデザイン */





.header-img {
  width: 100%;
  max-width: 100%;
  min-width: 400px;
  height: auto;
}
/* ↑ヘッダー画像のサイズ調整 */



.renraku {
  margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
  text-align : left;
  width:500px
}
.renraku th {
  color: #555555;
  font-weight: bold;
  text-align : center;
  padding : 10px 10px;/*上下 左右*/
}
.renraku td {
  padding : 5px 10px;
}
/* ↑連絡先のデザイン */




.check-list-kind {
  margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
  width:500px
}
.check-list-kind th {/*
  text-align: top;*/
  text-align : center;
  padding : 10px 5px;/*上下 左右*/
}
.check-list-kind td {/*
  text-align: left;*/
  padding : 10px 5px;/*上下 左右*/
}
/* ↑チェックリストのデザイン */





.banner {
  margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
  text-align : left;
  width:300px
}
.banner th {
  color: #555555;
  font-weight: bold;
  padding : 5px 10px;/*上下 左右*/
}
.banner td {
  padding : 5px 10px;
}
/* ↑バナーリンク情報のデザイン */




.goirai-img {
  margin-left : auto;
  margin-right : auto;
  max-width: 100%;
  width: 1000px;
  min-width: 400px;
  height: auto;
}
/* ↑ご依頼説明用画像のサイズ調整 */





#illust {
  width:420px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑illustページの横幅を指定 */

#illust img {
  width: 130px;
  height: 130px;
  object-fit: cover; /* フィッティング */
  clip-path: inset(25px round 3px);/* 角丸マスク */
  margin: -25px;
}
/* ↑画像をトリミングしてマスクする */
#illust img{
  transition:0.3s;
}
#illust img:hover {
  opacity:0.9;
}
/* ↑画像リンクにマウスオーバーで薄くする */



.illust-fit {
  width:1500px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑イラスト個別ページの横幅を指定 */

.illust-fit img{
  height: 800px;
  max-height: 95vw;
  object-fit: contain;
  max-width: 100%;
}
/* ↑イラスト個別ページの絵のサイズ調整 */

.illust-samune img{
  margin: -170px 0px -170px 0px;
}
/* ↑サムネサイズの絵の余白サイズ調整 */







#original {
  width:900px;
  max-width:80%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑originalページの横幅を指定 */

.original-img img {
  width: 400px;
  height: 400px;
  max-height: 95vw;
  max-width: 100%;
  object-fit: cover; /* フィッティング */
  clip-path: inset(5px round 3px);/* 角丸マスク */
  margin: -0px;
}
/* ↑画像をトリミングしてマスクする */






#comic {
  width:650px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑comicページの横幅を指定 */


#comic img {
  width: 300px;
  height: 300px;
  object-fit: cover; /* フィッティング */
  clip-path: inset(65px round 3px);/* 角丸マスク */
  margin: -50px;
}
/* ↑画像をトリミングしてマスクする */
#comic img{
  transition:0.3s;
}
#comic img:hover {
  opacity:0.9;
}
/* ↑画像リンクにマウスオーバーで薄くする */

.comic-fit img{
  height: 800px;
  object-fit: contain;
  max-width: 100%;
}
/* ↑comicページの絵のサイズ調整 */





@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #comic {
    width:98vw;
    margin-right:auto;
    margin-left:auto;
  }
  /* ↑comicページの横幅を指定 */
  #comic img {
  width: 300px;
  height: 300px;
  object-fit: cover; /* フィッティング */
  clip-path: inset(65px round 3px);/* 角丸マスク */
  margin: -60px;
  }
/* ↑画像をトリミングしてマスクする */
  .comic-fit img{
    width:98vw;
    height: auto;
    object-fit: contain;
  }
  /* ↑comicページの絵のサイズ調整 */
}






#rkgk {
  width:830px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑rkgkページの横幅を指定 */


#rkgk img {
  width: 400px;
  height: 400px;
  object-fit: contain;
  border: 1px solid #ccc;
  background: #efefef;
  filter: drop-shadow(0px 2px 2px rgba(174, 174, 174, 0.4));
}
/* ↑rkgk画像のトリミングとか */




@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
    #rkgk {
    width:98vw;
    margin-right:auto;
    margin-left:auto;
  }
  /* ↑rkgkページの横幅を指定 */
  #rkgk img {
    width: :98vw;
    height: auto;
    object-fit: contain;
    border: 1px solid #ccc;
    background: #efefef;
    filter: drop-shadow(0px 2px 2px rgba(174, 174, 174, 0.4));
    margin-right:auto;
    margin-left:auto;
  }
}






#model {
  width:420px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑3Dページの横幅を指定 */

#model img {
  width: 130px;
  height: 130px;
  object-fit: cover; /* フィッティング */
  clip-path: inset(25px round 3px);/* 角丸マスク */
  margin: -25px;
}
/* ↑画像をトリミングしてマスクする */
#model img{
  transition:0.3s;
}
#model img:hover {
  opacity:0.9;
}
/* ↑画像リンクにマウスオーバーで薄くする */




.model-fit {
  width:1500px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑3D個別ページの横幅を指定 */

.model-fit img{
  max-height: 800px;
  object-fit: contain;
  max-width: 100%;
}
/* ↑3D個別ページの絵のサイズ調整 */

.model-samune img{
  margin: -170px 0px -170px 0px;
}
/* ↑サムネサイズの3Dの余白サイズ調整 */




#game {
  width:1050px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑gameページの横幅を指定 */


#game img {
  width: 500px;
  max-width:98%;
}
/* ↑game画像のトリミングとか */

#game video {
  width: 500px;
  max-width:98%;
}
/* ↑game画像のトリミングとか */

@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
#game img,video {
  width: 100vw;
  max-width:98%;
  margin-right:auto;
  margin-left:auto;
  }
}








#about {
  width:500px;
  max-width:90%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑aboutページの横幅を指定 */





.other-link {
/* margin-left : auto;
  margin-right : auto;
  border-collapse: collapse;
*/
  width:300px
}
.other-link th {
  text-align: left;
  padding : 10px 5px;/*上下 左右*/
}
.other-link td {
  text-align: left;
  padding : 5px 0px;/*上下 左右*/
}
/* ↑otherページのリンクリストのデザイン */


/*
.niretsu{
    display: flex;
    align-items: flex-start;
    margin: 5px 150px;
}*/

/*
@media screen and (min-width: 481px) {
  /* 480px以下には適用しないCSS（スマホ用） */
/*.niretsu{
    display: flex;
    align-items: flex-start;
    margin: 5px 150px;
}
/* ↑テーブルを2列横ならべにする */
/*}*/



.enter a {
  color: #bbbbbb;
  font-weight: normal;
  font-size: 12px;
}
/* ↑リンクなことを隠す */




/* ▼2階層目のリスト全体の装飾 */
ul.credit {
   margin: 0px;          /* 外側の余白を消す */
   padding: 0px;         /* 内側の余白を消す */
/*   position: absolute;  (※後述) */
}

/* ▼2階層目の各リスト項目の装飾 */
ul.credit li {
   list-style-type: none;          /* リストの先頭記号を消す */
}

/* ▼2階層目の各リスト項目の装飾 */
ul.credit li a {
   margin: 0px;           /* 外側の余白を消す */
   text-decoration: none; /* リンクの下線を消す */
   min-width: 5em;        /* 最低の横幅量 */
}






@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  body {
    font-size : 12px;
    width:98vw;
    max-width:98vw;
    margin-right:auto;
    margin-left:auto;
  }
}








#post {
  width:400px;
  max-width:80%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑postページの横幅を指定 */


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  #post {
    max-width:70%;
    margin-right:auto;
    margin-left:auto;
  }
/* ↑postページの横幅を指定 */
}


#post-solo {
  width:500px;
  max-width:80%;
  margin-right:auto;
  margin-left:auto;
}
/* ↑post個別ページの横幅を指定 */


#post-solo img{
  max-height: 80vw;
  object-fit: contain;
  max-width: 80%;
}
/* ↑post個別ページの画像のサイズ調整 */


.post-mokuji {
    width:  400px;                  /* 幅指定 */
    font-size:  12px;               /* 文字サイズ指定 */
    background-color: #efefef;         /* 背景色指定 */
    padding:  20px;                 /* 余白指定 */
    margin-right:auto;
    margin-left:auto;
}

.post-honbun {
    white-space: pre-wrap;
    line-height: 23px; /* 行の高さを実数値＋単位(px)で指定する */
}


@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
  .post-mokuji {
    width:  90%;                  /* 幅指定 */
    font-size:  12px;               /* 文字サイズ指定 */
    background-color: #efefef;         /* 背景色指定 */
    padding:  20px;                 /* 余白指定 */
    margin-right:auto;
    margin-left:auto;
  }
}







form {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 12px;
}





.search-box_label {
  font-weight: bold;
}
.is-hide {
  display: none;
}


/* 
.list{
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.list_item{
  width: 250px;
  margin-bottom: 1em;
  margin-right: 1em;
  padding: 15px;
  background: #ddd;
} */

.search-box__wrap{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.search-box,
.search-box2{
  margin: 10px 1em 0 0;
  input[type="checkbox"],
  input[type="radio"]{
    display: none;
    &:checked + label{
      background: #111;
      color: #fff;
    }
  }
  label{
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 10px;
    border-radius: 60px;
    transition: all .2s;
    &:hover{
      background: #efefef;
      cursor: pointer;
    }
  }
}
/* ↑illustの絞り込み用 */



details {
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}
/* 折り畳みウィジェット */














/* ↑ */