/* CSS Document */
@charset "utf-8";
div.main {  height: 100%; width: 1025px; margin: 0 auto;}


#nav-drawer {
    position:fixed;
      top: 16px;
      right: 4px;
      z-index: 20;
      background: url(images/menu_btn.png) no-repeat 50% 0 ;
      background-size: contain;
      width:135px;
      height: 134px;
      text-align: left;
  }
  
  /*チェックボックス等は非表示に*/
  .nav-unshown {
    display:none;
  }
  
  /*アイコンのスペース*/
  #nav-open {
    display: inline-block;
    width: 135px;
    height: 134px;
    vertical-align: middle;
  }
  
  /*ハンバーガーアイコンをCSSだけで表現*/
  #nav-open span {
    position: absolute;
    height: 65px;/*線の太さ*/
    width: 80px;/*長さ*/
      left: 0;
      /*
    border-radius: 6px;
    background: #CCC;
      */
    display: block;
    cursor: pointer;
      z-index: 999;
      /*
      color: #CCC;
      background:url(images/head.png)
   no-repeat;
      background-size: contain;
      font-weight: 900;
      
      filter:alpha(opacity=80);
      -moz-opacity: 0.8;
      opacity: 0.8;
      padding-top: 16px;
      */
  }
  #nav-open span:before {
        content: '';
      padding-top: 10px;
      display: block;
  }
  #Mainlogo { text-indent: -9999px;}
  #Mainlogo a { 
  display: block;
  height: 65px;
      position: absolute;
      left: 80px;
      width: 200px;
      top: 0;
  }
  #MainTel { text-indent:-9999px;}
  #MainTel a {
  display: block;
  height: 65px;
      position: absolute;
      right:0;
      width: 80px;
      top: 0;
  }
  
  /*
  #nav-open span:after {
    position: absolute;
    height: 50px;
    width: 60px;
    display: block;
    cursor: pointer;
      z-index: 999;
  }
  */
  /*
  #nav-open span:before {
    bottom: -16px;
  }
  */
  #nav-open span:after {
    bottom: -16px;
  }
  
  /*閉じる用の薄黒カバー*/
  #nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99980;
    top: 0;/*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.9;
    transition: .3s ease-in-out;
  }
  
  /*中身*/
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;/*最前面に*/
    width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
    max-width: 100%;/*最大幅（調整してください）*/
    height: 50vh;
     background: #fff; /*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);/*左に隠しておく*/
  }
  
  /*チェックが入ったらもろもろ表示*/
  #nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: 0.8;
  }
  
  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }

  #headnv { display: -webkit-flex;display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-flex-wrap: wrap;  flex-wrap: wrap;width: 80%; margin: 20px auto; }
  #headnv li::before { content: "●"; width: 12px; height: 12px; border-radius: 50%; background: pink; color:#e670b1;}
  #headnv li { margin: 2rem; width: 20%; border-bottom: 1px dotted #ccc; padding-bottom: 10px;}
 #HeadTop { background: url(images/topimg.jpg) no-repeat 50% 50%; background-size:cover; width: 100%; height: 744px;
display: flex;}
#PageTitle { background: #e0aad2; text-align: left; color: #FFF; padding-left: 1rem; padding-top: 3px; padding-bottom: 3px; font-weight: normal; font-size: 12px;}
#HeadTop #HeadTopTextArea { width: 35%;}
#HeadTop #HeadTopTextArea #HeadTopText1,#HeadTop #HeadTopTextArea #HeadTopText2,#HeadTop #HeadTopTextArea #HeadTopText3 {
    background: #FFF; display:table; padding:0.8rem; font-family: 'Noto Sans JP', sans-serif; margin-bottom: 1rem;
}
#HeadTop #HeadTopTextArea #HeadTopText1 {font-size: 3rem; font-weight: 900; margin-top: 70%;}
#HeadTop #HeadTopTextArea #HeadTopText2 {font-size: 2.5rem;font-weight: 900;}
#HeadTop #HeadTopTextArea #HeadTopText3 {font-size: 2.5rem;font-weight: 900; bottom: 0;}
#HeadTop #logo { margin-top: 25vh;}
#HeadTop #logo img { width: 511px; height: 259px;}
#HeadNvList { display: flex;}
#HeadNvList li { width: 18%; margin: 20px 1%;}
#HeadNvList li img { width: 100%;}

header#head { position: relative;}
#sitelogo { position: absolute; top: 20px; left: 20px;}
#sitelogo img {width: 200px;}

#Head {width: 100%; height: 20vw; background-size: cover;}
#Head #HeadWrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
#Head #HeadWrap h2{ border: #FFF 2px solid; padding: 1em 2.5em; max-width: 80%; line-height: 1;  box-sizing: border-box;}
#Head #HeadWrap h2 span { display: block; color: #FFF;}
#Head #HeadWrap h2 span img { max-width: 40%;}

#HeadWrap .single { font-size: 3rem;font-family: 'Noto Sans JP', sans-serif; margin-bottom: 0.8rem; }
.HeadManga { background: url(images/page/manga/head.jpg) no-repeat 50% 0; }
.HeadSystem { background: url(images/page/system/head.jpg) no-repeat 50% 0; }


.Contents { margin: 4rem 0;}
.SectionTitle { color: #5bc8ac; font-size: 2rem; padding-bottom: 2rem;}
.SectionTitle img { padding-right: 1rem; padding-bottom: 1rem;}

.flexNewLine {display: -webkit-flex;display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-flex-wrap: wrap;  flex-wrap: wrap;justify-content: space-around;}
.flexSpaceEvenly { display: flex; justify-content: space-evenly;}
.w1025 { width: 1025px ; margin: 0 auto;}

#resultList {margin-top: 2rem;}
#resultList li { width: 32%; margin-bottom: 2rem;position:relative ;}
#resultList li img {box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); margin-bottom: 1rem; max-width: 320px; max-height: 320px; }
#resultList li span { position:absolute ; top: 296px; left: 10px; background: #FFF; padding: 2px; }

#Gallery {position: relative; height: 950px;}
#GalleryWrap { padding-top: 2rem; padding-bottom: 2rem;background: #ffc1e0; position: absolute; right: 0; top: 140px; width: 80%; }
#galleryimg {position: absolute; top: -100px; left: -100px;}
#GalleryTopList { width: 700px; padding-left: 350px;}
#GalleryTopList li { padding-bottom: 1rem;}
#GalleryTopList li img { max-width: 317px; max-height: 211px;}
#GalleryTopList li a p { color: #FFF; padding-top: 5px; }

#BlogList { padding-top: 2rem;}
#BlogList li a { position: relative;}
#BlogList li a div { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); padding: 1rem;}
#BlogList li a div h3,#BlogList li a div p,#BlogList li a div time ,#BlogList li a div span{ color: #FFF;}
#BlogList li a div h3 { text-align: left;}
#BlogList li a div time { text-align: right;}

#Criteria { background: url(images/criteria_bg.jpg) no-repeat 50% 0; background-size: cover; margin-top: 2rem; height: 100vh; padding-top: 130px;}
#CriteriaBox { padding-right:290px ;}
#CriteriaBox p { padding-top: 4rem; padding-bottom: 4rem;}
#CriteriaList { width: 500px; margin: 0 auto;}
#CriteriaList li::before {
  content: "●";
  margin: auto;
  background-color: #FFFFFF;
  border: solid 6px #f18d9e;
  width: 7px;
  height: 7px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

font-size: 6px;
color: #FFF;
margin-right: 1rem;}
#CriteriaList li { padding: 0 0 0.8rem 0; text-align: left; }

#Review { position: relative;}
#ReviewImg {position: absolute; top: 50px; right: -250px;}
#ReviewWrap { background: #c6c0e7;display: flex;justify-content: center;align-items: center; min-height: 700px;}
#ReviewTopList { width: 63%; margin: 3rem auto;}
#ReviewTopList li { background: #FFF; border-radius: 10px; padding: 10px; margin-bottom: 1rem;}
#ReviewTopList li a {display: flex;}
#ReviewTopList li img { max-width: 289px; max-height: 184px;}
.Next { color: #c6c0e7; width: 150px; border-radius: 10px; border: 1px solid #c6c0e7; padding: 5px; margin: 10px auto 0 auto; font-size: 12px; background: #fff;}

#SystemBg { position: relative; width: 1025px; height: 668px;}
.bgbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.bgbox img { width: 100%; height: 100%; object-fit:cover; font-family: 'object-fit: cover;';}
.bgbox::before , .bgbox::after { content: ""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.bgbox::before { background: url(images/overlay.png) 0 0 repeat;}
.bgbox::after {background: linear-gradient(90deg, #9faefd 0%, #f484ab 100%);opacity:.7;}
#SystemContents { position: absolute; top: 0; left: 0; }
#SystemContents h3 {font-size: 2rem; padding-top: 40px; color: #fff; padding-bottom: 20px;}
#SystemTopList { display: flex; width: 96%; margin: 1rem auto 0 auto;}
#SystemTopList li { background: rgba(0, 0, 0, .4); border-radius: 10px; margin: 1%; width: 32%; padding: 1rem;}
#SystemTopList li h4, #SystemTopList li p { color: #fff;}
#SystemTopList li h4 { font-size: 1.5rem; padding-bottom: 1rem;}
#SystemTopList li .subtitle { font-size: 1.2rem; padding-bottom: 1rem;}

#Example .example:nth-child(odd) , #Example .example:nth-child(even) {display: flex;}
#Example .example:nth-child(odd) .imgarea, #Example .example1 .txtarea { width: 50%;}
#Example .example:nth-child(odd) .imgarea, #Example .example:nth-child(even) .imgarea { position: relative;}
#Example .example:nth-child(odd) .imgarea img ,#Example .example:nth-child(even) .imgarea img{ width: 100%;}
#Example .example:nth-child(odd) .txtarea {order: 2; width: 50%;}

#Example .example:nth-child(even) .txtarea {order: 1; width: 50%;}
#Example .example:nth-child(even) .imgarea { order: 2; width: 50%;}

#Example .txtarea h3 { padding-bottom: 1rem; padding-top: 1rem;}
#Example .txtarea h3 .titletype {border: #1A1A1A 2px solid; border-radius: 10px; padding: 4px 2rem;}
#Example .txtarea h3 .money { color: #f18c9c; font-size: 3rem; padding-left: 1rem;}
#Example .txtarea .subtitle { color: #5bc8ac; font-size: 1.5rem; padding-bottom: 1rem;}
#Example .txtarea .name { padding-bottom: 1rem;}

#SubPageList li img { width:341px ; }

#AsideList { display: flex;justify-content: flex-start; flex-wrap: wrap; width: 1025px;}
#AsideList li { width: 33%;}
#AsideList img { width: 100%;}

#footer1 { background: #eeeeee; padding-top: 1rem; padding-bottom: 1rem;}
#ShopTopFoot { border-bottom: 2px solid #4d4d4d; width: 1025px; margin: 0 auto;}
#ShopTopFoot img { width: 400px;}
#FootNav {width: 660px; margin: 1rem auto 0 auto;}
#FootNav li { width: 220px;}

#manga p img { max-width: 100%;}

#PageBlogList { width: 100%;}
#PageBlogList li { width: 23%; padding: 5px; border: 1px solid #4d4d4d; margin-bottom: 8px;}
#PageBlogList li p a img { max-width: 100%;}

h2.title { font-size: 3rem;font-family: 'Noto Sans JP', sans-serif; font-weight: bold; margin-bottom: 2rem; margin-top: 2rem;}
#shopinfolist { width: 100%; }
#shopinfolist li { width: 20%; padding: 1rem; border: 1px solid #e0aad2; margin:1rem 0 1rem 1rem;background: #EEEEEE; border-radius:5px;}
#shopinfolist li:first-child { margin: 1rem 0 1rem 0;}
#shopinfolist li:nth-child(5) { margin: 1rem 0 1rem 0;}
#shopinfolist li.off { color: #ccc; background: #f7f7f7;border: 1px solid #FFF;}

#shopinfolistimg { margin-bottom: 2rem;}
#shopinfolistimg li { width: 23%; margin: 1%;}
#shopinfolistimg li img { width: 100%; height: auto; margin-bottom: 1rem;}
#shopinfolistimg li h4 { font-weight: bold; margin-bottom: 1rem;}

#ShopInfo { width: 100%; margin: 2rem auto;}
#ShopInfo th, #ShopInfo td { padding: 1rem ; border-left: 1px solid #fff; border-bottom: 1px solid #fff; background: #EEEEEE;}
#ShopInfo th { background: #e0aad2; color: #FFF; width: 33%;}
#ShopInfo td.on { color: #1A1A1A; }
#ShopInfo td.off { color: #ccc; background: #f7f7f7;}

.text_wrapper { width: 100%; margin: 0 auto;}
.text_wrapper h2.title { background: #e0aad2; color: #fff; font-weight: bold; padding: 1rem 0;  margin: 0 auto 1rem auto; font-size: 1.2rem;}


#ShopGallery { height: 720px;}
#ShopGallery #ShopGalleryWrap { padding-top: 2rem; padding-bottom: 2rem;background: #ffc1e0; width: 100%; }
#ShopGallery #ShopGalleryTopList { width: 100%; }
#ShopGallery #ShopGalleryTopList li { padding-bottom: 1rem;}
#ShopGallery #ShopGalleryTopList li img { max-width: 317px; max-height: 211px;}
#ShopGallery #ShopGalleryTopList li a p { color: #FFF; padding-top: 5px; }

#ShopInfo .shopinfotxt:nth-child(odd) , #ShopInfo .shopinfotxt:nth-child(even){display: flex;}
#ShopInfo .shopinfotxt:nth-child(odd) .imgarea, #ShopInfo .example1 .txtarea { width: 50%;}
#ShopInfo .shopinfotxt:nth-child(odd) .imgarea, #ShopInfo .shopinfotxt:nth-child(even) .imgarea { position: relative;}
#ShopInfo .shopinfotxt:nth-child(odd) .imgarea img ,#ShopInfo .shopinfotxt:nth-child(even) .imgarea img{ width: 100%;}
#ShopInfo .shopinfotxt:nth-child(odd) .txtarea {order: 2; width: 50%;}

#ShopInfo .shopinfotxt:nth-child(even) .txtarea {order: 1; width: 50%;}
#ShopInfo .shopinfotxt:nth-child(even) .imgarea { order: 2; width: 50%;}

#ShopInfo .txtarea h3 { padding-bottom: 1rem; padding-top: 1rem;}
#ShopInfo .txtarea h3 .titletype {border: #1A1A1A 2px solid; border-radius: 10px; padding: 4px 2rem;}
#ShopInfo .txtarea h3 .money { color: #f18c9c; font-size: 3rem; padding-left: 1rem;}
#ShopInfo .txtarea .subtitle { color: #5bc8ac; font-size: 1.5rem; padding-bottom: 1rem;}
#ShopInfo .txtarea .name { padding-bottom: 1rem;}

.SystemExample { background: url(images/page/system/bg.jpg) 50% 0; padding: 3rem; margin-bottom: 2rem; border: 2px solid #a8d6ca; text-align: left; line-height: 2rem; position:relative; border-radius: 20px;}
.SystemExample:nth-child(even) { background: url(images/page/system/bg2.jpg);}
.SystemExample::after { background: url(images/page/system/girl.png) no-repeat 100% 0; background-size: 300px; content: ""; width: 500px ; height: 90%; display: block; position: absolute; top: 10px; right: 10%;}
.SystemExample h3 { font-size: 1.6rem; margin-bottom: 1rem;}
.SystemExample .SE0 {font-weight: bold;text-shadow: 1px 1px 1px rgba(70, 70, 70, 0.8);}
.SystemExample .SE1 , .SystemExample .SE2, .SystemExample .SE3 { font-size: 1.4rem; padding: 0.5rem;color: #FFF; border-radius: 5px; margin: 1rem; font-weight: normal; border: 2px solid #FFF;box-shadow: 4px 5px 8px 0 rgba(0, 0, 0, .5);}
.SystemExample .SE1 { background:#6897fa; }
.SystemExample .SE2 { background:#fea03c; }
.SystemExample .SE3 { background: #6bcdd2;}
.SystemExample .SE4 { background: #fff; border: 2px solid #5bc8ac; color: #5bc8ac; padding: 0.5rem; border-radius: 5px; font-size: 1.6rem; margin-left: 1rem;box-shadow: 4px 5px 8px 0 rgba(0, 0, 0, .5);}
.SystemExample .SEwrap { background: #ddd; border: 3px solid #FFF; padding: 1rem; margin-top: 2rem; box-shadow: 4px 10px 13px 0 rgba(0, 0, 0, .5); border-radius: 10px; width: 60%; text-align: center;}
.SystemExample .SEwrap h4 { font-size: 1.4rem; margin-bottom: 1.5rem;}
.SystemExample .SEwrap .SE5 { font-size: 4.5rem; margin: 1rem;text-shadow: 1px 2px 1px rgba(0, 0, 0, .8); color: #f65d85; font-weight: bold; border-bottom: solid 5px #fea03c; letter-spacing: 0.4rem;}

table.table_box {
  border-collapse: collapse;
  border-spacing: 5px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

table.table_box tr{
  border-bottom: solid 2px white;
}

table.table_box tr:last-child{
  border-bottom: none;
}

table.table_box th{
  position: relative;
  text-align: left;
  width: 20%;
  background: url(images/page/advantage/thbg.png) repeat-x;
  background-color:　 #ede101;
  color: white;
  text-align: center;
  padding: 10px 0;
  height: 100px;
  border-bottom: solid 2px white;
  text-shadow: 1px 1px 2px rgba(70, 70, 70, 0.8);
}

table.table_box th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #ede101;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table.table_box td{
  text-align: left;
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 10px;
  border-right: solid 2px #fff;
}

table.table_box td.isp { color: red; font-weight: bold; font-size: 2rem;}
table.table_box td span { font-size: 0.8rem;}

.pager ul{ width: 100%; display: flex;}
.pager ul li { width: 50%;}
.pager ul li:first-child a::before { content: "<< ";}
.pager ul li:last-child a::after { content: " >>";}
.pager ul li a {display: block; width: 100%; height: 70px; border: 1px solid #f18c9c; line-height: 70px;}
#QA { text-align: left;}
#QA dt{
background:url(images/page/example/qa_q.png) no-repeat 0 0 ;
padding:15px 15px 15px 120px;
font-weight:bold;
font-size:18px;
border-bottom:1px dotted #ddd;
cursor: pointer;
height:80px;
margin:40px 0;}
#QA dd {
background:url(images/page/example/qa_a.png) no-repeat 0 0;
padding:15px 15px 30px 120px;
font-size:18px; border-bottom:1px dotted #ddd; height: 80px;
display: none;}

h3.title { font-size: 3rem;font-family: 'Noto Sans JP', sans-serif; }
#PageBlogList h3.title { font-size: 1.3rem; border-left: 10px solid #f18c9c; border-right: 10px solid #f18c9c;border-radius: 10px; margin-bottom: 0.4rem;  }

.pagers .pagination {
  text-align: center;
  display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.pagers .pagination li {
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  background:#f18c9c;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}


.pagers .pagination li a{
  vertical-align: middle;
  width: 100%;
  height: 100%;
  text-align: center;
  display:block;
  color: #fff;
  text-decoration: none;
}

.pagers .pagination li a span{

  vertical-align:middle;
}

.pagers .pagination li a:hover,
.pagers .pagination li a.active{
  color: #000;
  background: #ccf;
  border-radius: 10px;
}

@media only screen and (max-width: 767px){
  .pagers .pagination li{
    display: none;
  }

  .pagers .pagination li.pre,
  .pagers .pagination li.next{
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pagers .pagination li.pre a,
  .pagers .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pagers .pagination li.pre span::after{
    content: "　前の9件へ";
  }

  .pagers .pagination li.next span::before{
    content: "次の9件へ　";
  }

}
.singleimgarea { padding: 2rem;}
.singleTxtArea { padding: 2rem;  background: #eee; margin-top: 2rem;}
#ReviewTxt { width: 80%; margin: 2rem auto; text-align: left;}
#ReviewTxt dt ,#ReviewTxt dd { padding: 1rem; margin: 2px;}
#ReviewTxt dt { width: 35%; background: #fff;}
#ReviewTxt dd { width: 55%;background: #fff;}