@charset "UTF-8";
/* line 3, scss/style.scss */
body {

}

.wrapper
{
    background: url("./img/bg.png") center top fixed;
    background-size: cover;
}



/* line 6, scss/style.scss */
#wrap {

  font-family: "sans-serif";
  overflow: hidden;
  color: #000000;
}
/* line 10, scss/style.scss */
#wrap a {
  color: ;
}

a:hover img {
  border: solid 0px silver;
  opacity: 100;
}

a:active img {
  border: solid 0px silver;
  opacity: 100;
}

/* line 14, scss/style.scss */
.inner {
  max-width:
  margin:  auto;
  position: relative;
}

@media screen and (max-width: 750px)
{
    .wrapper
    {
        padding-top: 0px;

        background: none;
    }
    .wrapper:before
    {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100vh;

        content: '';

        background: url("./img/sumabg.jpg") center center no-repeat;
        background-size: cover;
        background-position: left 0;
    }
}



/* パソコンで見たとき表示される */
.pc_title { display: block !important; }
.sp_title { display: none !important; }
/* スマートフォンで見たとき表示される */
@media only screen and (max-width: 750px) {
.pc_title { display: none !important; }
.sp_title { display: block !important; }
}



/* line 20, scss/style.scss */
#top {
	position: relative;
	padding: 0
    margin: 0px;
    background: url("") center bottom no-repeat;
    background-size: cover;
	}
.top-img{
	position: relative;
	text-align: center;
	margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
  /* line 42, scss/style.scss */
	#top {
	position: relative;
	padding-: 0p
    margin-bottom: 50px;
    background: url("./img/topimgsuma.png") center bottom no-repeat;
    background-size: contain;
	width: 100%;
	background-position: left 0;
	}
	
  #top h1 img {
    width: 100%;
    
  }
}



#top h1 img {
  position: relative;
  max-width: ;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* line 29, scss/style.scss */
#top h1 {
  margin: 0;
  display: block;
  vertical-align: bottom;
}
/* line 34, scss/style.scss */
.tw_btn {
	margin-top : -1% ;
	margin-left: 2%;
  display:inline-block;
	background-color: #ffffff;
	padding:4px 4px 2px 4px;
	border:px ;
	border-radius:10px;
	word-break:break-all;

}

@media only screen and (max-width: 450px) {
.tw_btn {
	margin-top : 3px ;
	margin-bottom : 7px ;
	margin-left : 25% ;
  display:inline-block;
	background-color: #ffffff;
	padding: 3px 1px 1px 1px;
	border-radius:10px;
	word-break:break-all;
	max-width: 50%;

}
}

.stamp {
    position: absolute;
    top: 65%;
    right: 5%;
  }

.app {
    position: absolute;
    top: 89%;
    left: 31%;
  }

.google {
    position: absolute;
    top: 89.1%;
    left: 52%;
  }

/* line 48, scss/style.scss */
#navi {
  background-color: ;
  text-align: center;
}
/* line 51, scss/style.scss */
#navi ul {
  margin: 0;
}
/* line 54, scss/style.scss */
#navi li {
  display: inline-block;
  margin: 0 1em ;
}

@media only screen and (max-width: 640px) {
  /* line 61, scss/style.scss */
  #navi li {
    margin: 0 0.3em;
  }
  /* line 63, scss/style.scss */
  #navi li img {
    height: 45px;
  }
}

.movie{
position:relative;
width:70%;
padding-top:56.25%;
text-align: center;
margin : auto auto -150px auto;
}
.movie iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:70%;
text-align: center;
margin : 0 auto;
}

@media only screen and (max-width: 640px) {
.movie{
position:relative;
width:80%;
padding-top:56.25%;
text-align: center;
margin : auto auto 20px auto;
}
.movie iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
text-align: center;
margin : 0 auto;
}
}

/* line 70, scss/style.scss */
#info {
  padding: 0;
}
/* line 72, scss/style.scss */
#info .information {
	background-color:#ffccca;
  margin: 1.5em;
  padding: 0em 1em 1em 1em;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	height: 450px;
}

@media only screen and (max-width: 640px) {
#info .information {
	background-color:#ffccca;
  margin: 1.5em;
  padding: 0em 0.5em 0.5em 0.5em;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	height: 380px;
}
}

.twitter {
	background-color:#ffccca;
  margin: 1.5em;
  padding: 0em 0.5em 0.5em 0.5em;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	height: 380px;
}

/* line 79, scss/style.scss */
#info .information h2 {
  background-color: ;
  text-align: center;
  color: #fff;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  font-size: 12px;
  font-weight: normal;
  padding: px;
  margin-bottom: 0px;
}

#info .information h3 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #fff;
  text-align: ;
  color: #000000;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  font-size: 20px;
  font-weight: normal;
  padding:  15px;
  margin: 0 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
	height: 300px;
}

.twitter h3 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #fff;
  text-align: ;
  color: #000000;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  font-size: 23px;
  font-weight: normal;
  padding:  15px;
  margin: 0 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
	height: 300px;
}


@media only screen and (max-width: 640px) {
#info {
  padding: 0;
  margin-top: -20px;
  margin-bottom: -20px;
}

#info .information h3 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #fff;
  text-align: ;
  color: #000000;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  font-size: 15px;
  font-weight: normal;
  padding:  15px;
  margin: 0 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
	height: 280px;
}
}




/*横スクロール*/
.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */         
    max-width:  90%; 
	margin: 0 auto;
	padding-top:  0px;
	padding-right:  30px;
	         /* 余白指定 */
}
 .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
	 padding-top:  0px;
	padding-right:  25px;
	padding-left: 25px ;
    }

.horizontal-list::-webkit-scrollbar {height:15px;}/*バーの太さ*/
.horizontal-list::-webkit-scrollbar-track {
	background:#fff;
border-radius: 40px;
}/*バーの背景色*/
.horizontal-list::-webkit-scrollbar-thumb {
	background:#ff69b4;
border-radius: 40px;
}/*バーの色*/

    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: %;
		padding: 0px -10px 0px 0px;

      /* 見た目調整 */
      height: 100%;
		width: 85%;
      margin: 0px 15px 20px 40px;
      font-size: px;
      background: #fff;
	 border-radius: 20px 20px 20px 20px;
    }


@media only screen and (max-width: 640px) {
/*横スクロール*/
.parent {
    text-align: center;         /* 子要素を左右中央揃えにする */         
    max-width:  90%; 
	margin: 0 auto;
	padding-top:  0px;
	padding-right:  0px;
	         /* 余白指定 */
}
 .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
	 padding-top:  0px;
	padding-right:  0px;
	padding-left: 0px ;
	margin-top: 8px;
    }

    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: %;
		padding: 0px -10px 0px 0px;

      /* 見た目調整 */
      height: 100%;
		width: 100%;
      margin: 0px 0px 10px 0px;
      font-size: px;
      background: #fff;
	 border-radius: 20px 20px 20px 20px;
    }

}

@media only screen and (max-width: 640px) {
.horizontal-list::-webkit-scrollbar {height:0px;}/*バーの太さ*/
.horizontal-list::-webkit-scrollbar-track {
	background:#fff;
border-radius: 40px;
}/*バーの背景色*/
.horizontal-list::-webkit-scrollbar-thumb {
	background:#fff;
border-radius: 40px;
}/*バーの色*/

}


/* line 126, scss/style.scss */
#news {
  background-color:#ffccca;
  margin: 1em;
  padding: 0.5em;
  border: solid 3px #5e4747;
  border-radius: 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	padding: 1em 0 0.2em;
  background-image: ;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
  
}
/* line 128, scss/style.scss */
#news .ttl {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: ;
  text-align: center;
  color: #fff;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  font-size: 14px;
  font-weight: normal;
  padding: 3px;
  margin-bottom: 8px;
}
/* line 138, scss/style.scss */
#news #newslist {
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  float: none;
}
/* line 145, scss/style.scss */
#news #newslist .more a {
  background-color: #6E6597;
  color: black;
}



#story {
  background-color:#ffccca;
	margin: 1.5em;
  padding: 0em 1em 0em 1em;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	padding: 0em 0 0 0em;
  background-image: ;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}

.h2

/* line 214, scss/style.scss */
#story img {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 1em 0 0;
}



/* line 155, scss/style.scss */
#system {
 background-color:#ffccca;
  margin: 1.5em;
  padding: 0em 1em 0em 1em;;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	padding: 0em 0 0 0em;;
  background-image: ;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}
.h2
/* line 158, scss/style.scss */
#system img {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 1em 0 0;
}
/* line 164, scss/style.scss */
#system li {
  display: inline-block;
}
/* line 167, scss/style.scss */
#system .system_cap1 {
  max-width: 800px;
  margin: 3em auto 3em;
}
/* line 170, scss/style.scss */
#system .system_cap1 li {
  width: 30%;
  max-width: 240px;
  margin: 2px;
}
/* line 174, scss/style.scss */
#system .system_cap1 li img {
  width: 100%;
  vertical-align: bottom;
  margin: 0;
}
/* line 181, scss/style.scss */
#system .system_cap2 {
  max-width: 800px;
  margin: 3em auto 0;
}
/* line 184, scss/style.scss */
#system .system_cap2 li {
  width: 45%;
  max-width: 480px;
  margin: 2px;
}
/* line 188, scss/style.scss */
#system .system_cap2 li img {
  width: 100%;
  vertical-align: bottom;
  margin: 0;
}

.sys_cara{ background-color:#fff;
  margin: 1em;
	width: 50%;
  border: solid px ;
  border-radius: 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	padding: 1em 1em 0.2em;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 520px) {
  /* line 199, scss/style.scss */
  #system .system_cap1 li {
    width: 45%;
  }
  /* line 204, scss/style.scss */
  #system .system_cap2 li {
    width: 90%;
  }
}
/* line 210, scss/style.scss */

/* line 222, scss/style.scss */
#chara {
  background-color:#ffccca;
  margin: 1.5em;
  padding: 0.5em;
  border: solid 3px #5e4747;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
	padding: 0em 0 0 0em;;
  background-image: ;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
}
/* line 230, scss/style.scss */
#chara .ttl {
  width: 100%;
  max-width: 800px;
  height: auto;
 
}

.center{margin: 0;  
  padding: 0; 
  text-align: center; }

/* line 236, scss/style.scss */
#chara li {
  display: inline-block;
  width: 45%;
  max-width: px;
  margin: 10px;
}
/* line 241, scss/style.scss */
#chara li img {
  width: 100%;
  max-width: 400px;
  height: auto;
  vertical-align: bottom;
  text-align:center;
}

@media only screen and (max-width: 800px) {
  /* line 251, scss/style.scss */
  #chara {
    background-size: 512px auto;
  }
  /* line 253, scss/style.scss */
  #chara .ttl {
    margin: 3em 0 1em;
  }
  /* line 256, scss/style.scss */
  #chara li {
    width: 90%;
  }
}

/*------ページトップへ戻るbtn------*/