@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}
body {
  background-color: #ccd5cc;
}
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}

/* image link */
a img		{border:none;margin:0px;padding:0px;}
a:hover img	{filter:alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;}

/* @end */


/* @group Fluid-img */

img { max-width : 100%}

/* @end */


/* @group HTML */

html {
font-family : verdana, sans-serif;
font-size : 75%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.5}

/* @end */


/* @group Heading */

h1 {
font-size : 3em; /* 48px */
font-size : 1em; /* 16px */
line-height : 1; /* 48px */
margin-bottom : 0.5em }

h2 {
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em }

h3 {
font-size : 1.5em; /* 24px */
line-height : 1; /* 24px */
margin-bottom : 1em;
padding-top: 10px}

h4 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
color : #7D4934;
margin-bottom : 1em }

/* hgroup {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
} */

hgroup h2,h5,h6 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
margin-bottom : 1.5em }

/* @end */

/* @group Header #211f1f */

header {
text-align : center;
padding-top : 0.5em;
background : #b4d4b4;

}

header h1 {
text-align : left;
margin-bottom : 0.5em;
margin-left : 1.5em;
color : #d8c2a4
}
header h2 { color : #fff}

/* @end */

/* @group Nav */

nav {
text-align : center;
margin-bottom : 1.5em;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(125,73,52,1) 0%, rgba(43,21,18,1) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,73,52,1)), color-stop(88%,rgba(43,21,18,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* W3C */
}

nav ul { overflow : hidden}
nav ul li { width : 25%;
		float : left}
nav ul li a {
display : block;
color : #d8c2a4;
padding : 0.75em 0}

nav ul li a:hover {
color : white;
background-color : #7d4934}

/* @end */

nav2 {
text-align : center;
margin-bottom : 1.5em;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(125,73,52,1) 0%, rgba(43,21,18,1) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,73,52,1)), color-stop(88%,rgba(43,21,18,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* W3C */
}

nav2 ul { overflow : hidden}

nav2 ul li {
  /* widthの値で1行を何分割するか決まる */
  width : 25%;
	float : left
}
nav2 ul li a {
display : block;
color : #d8c2a4;
padding : 0.75em 0}

nav2 ul li a:hover {
color : white;
background-color : #7d4934}

/* @group Contents */

#contents {
width : 90%;
margin : 0 auto;
text-align : center
}

#contents p {
margin-bottom : 1.5em;
text-align : left}
#contents img {
margin-bottom : 1.5em;
box-shadow : 0 0 5px #2f1f1f}

#flexdiv{
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
  	-webkit-justify-content: space-around;
  	-ms-flex-pack: justify;
	justify-content: space-around;
	flex-wrap: wrap;
}
#flexdiv2 {
padding : 0em 0em;
width: calc(45% - 10px);
}

#typeA {
padding : 1.5em 1.5em;
margin-right : 1.5em;
margin-bottom : 1.5em;
background-color : #f9f9f9;
box-shadow : 0 0 1px #2f1f1f
}


#typeB {
padding : 1.5em 3em;
margin-left : 1.5em;
margin-bottom : 1.5em;
background-color : #211f1f
}

    #typeB h3 {
    color : #ffffff
    }
    #typeB h4 {
    color : #d8c2a4
    }
    #typeB p {
    color : #ffffff
    }

#typeC {
padding : 1.5em 1.5em;
margin-bottom : 1.5em;
background-color : #f9f9f9
}


/* @end */

/* @group Footer b4d4b4 background : url(../images/footer_bg.png)}*/

footer {
padding : 1.5em 0;
color : white;
text-align : center;
background-color : #b4d4b4;
}

/* @end */

/*768px*/
@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/
#contents { text-align : left}

}

/*1024px*/
@media screen and (min-width : 1024px) {

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

header {
margin : 0 auto;
/*1024px以上では幅を固定*/
	width : 960px
}


/* @group Nav */

nav ul {
width : 93.75%;/* 960/1024 */
margin : 0 auto;
/*1024px以上では幅を固定*/
	width : 960px
}

/* @end */

/* @group Contents */

#contents {
overflow : hidden;
/*float : left;*/
width : 93.75%;
	/*1024px以上では幅を固定*/
	width : 960px
}

#contents #main,
#contents #sub {
/*float : left;*/
margin : 0 1.0416667% }

/*
#contents #main { width : 64.5833333%}
#contents #sub { width : 31.25%}
*/

/* @end */




/* @group Footer */

footer {
/*float : left;*/
width : 91.796875%; /*940/1024*/
/*1024px以上では幅を固定*/
	width : 960px;
margin : 0 auto}

/* @end */

}



#scroll-to-top-btn{
	position: fixed;
	top: 0px;
	right: 0px;
	/* height: 155px; */
	width: 100%;
	/* width: 355px; */
	/* color: #FFF; */
	/* font-size: 32px; */
	background-color: #7D4934;
	border: none;
	/* border-radius: 50%; */
	outline: none;
	/* transform: rotate(-90deg); */
	text-align : center;
	opacity: 0;
	transition-duration: 0.5s;

	/* position: fixed;
	bottom: 20px;
	right: 20px;
	height: 155px;
	width: 55px;
	color: #FFF;
	font-size: 32px;
	background-color: #7D4934;
	border: none;
	border-radius: 50%;
	outline: none;
	transform: rotate(-90deg);
	text-align : center;
	opacity: 0;
	transition-duration: 0.5s; */
}

/* カルーセル */

[class^="number-slide"],
[class*=" number-slide"] {
  /* background: #b4d4b4; */
	/* display: flex; */
  align-items: center;
  justify-content: center;
  /* font-size: 11px; */
  color: #555555;
  font-weight: 500;
  text-shadow: #000 1px 0 2px;
  /* height: 300px; */
  /* max-height: 100vh; */
  background-image: url(../images/topimage_n2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.5);
}

/*.number-slide1 {
	display: flex;
}

.number-slide2 {
  background-image: url(../images/topimage_n2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background: rgb(255, 75, 64);
  background: linear-gradient(
    128deg,
    rgba(255, 154, 63, 1) 0%,
    rgba(255, 75, 64, 1) 100%
  ); 
}

.number-slide3 {
  background: rgb(182, 255, 64);
  background: linear-gradient(
    128deg,
    rgba(182, 255, 64, 1) 0%,
    rgba(63, 255, 71, 1) 100%
  );
  background: linear-gradient(
    128deg,
    rgba(189, 255, 83, 1) 0%,
    rgba(43, 250, 82, 1) 100%
  );
}

.number-slide4 {
  background: rgb(64, 255, 242);
  background: linear-gradient(
    128deg,
    rgba(64, 255, 242, 1) 0%,
    rgba(63, 188, 255, 1) 100%
  );
}

.number-slide5 {
  background: rgb(255, 64, 156);
  background: linear-gradient(
    128deg,
    rgba(255, 64, 156, 1) 0%,
    rgba(255, 63, 63, 1) 100%
  );
}
.number-slide6 {
  background: rgb(64, 76, 255);
  background: linear-gradient(
    128deg,
    rgba(64, 76, 255, 1) 0%,
    rgba(174, 63, 255, 1) 100%
  );
} */

.navigation-wrapper {
  position: relative;
}

.dots {
  display: flex;
  padding: 10px 0;
  justify-content: center;
}

.dot {
  border: none;
  width: 10px;
  height: 10px;
  background: #c5c5c5;
  border-radius: 50%;
  margin: 0 5px;
  padding: 5px;
  cursor: pointer;
}

.dot:focus {
  outline: none;
}

.dot--active {
  background: #000;
}

.arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
}

.arrow--left {
  left: 5px;
  fill: "#fff";
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--right {
  left: auto;
  right: 5px;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white'  viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--left {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--right {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

#inner-slider {
	color: #fff;
  /* font-size: 20px; */
	margin:3%;
	text-align: left;
}

#play-data {
  color: #116f48;
  margin-right: 10px;
	text-align: right;
}

#character {
  position: absolute;
  width: 75px;
  height: 110px;
  background-image: url('../images/chara/chara01_small.png');
  background-size: cover;
}