@charset "utf-8";
body{font-family:"メイリオ", Meiryo,"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; font-size:13px; color:#333; line-height:1.3em; text-align:center; margin:0; padding:0;}

body {
  margin: 0;
  padding: 0;
  color: #333333;
  line-height: 1.3em;
  text-align: center;
}
#header {
  margin: 0 auto;
  padding: 30px 0;
  width: 1000px;
  text-align: left;
}
div#logo {
  width: 1000px;
  height: 118px;
  text-align: left;
}
div#title {
  height: 136px;
  text-align: center;
}

.nav {
  width: 1000px;
  height: 40px;
  background-color: #cc0000;
  margin: 0 auto;
  padding: 0;
  display: flex;
}
.nav li {
  position: relative;
  list-style: none;
    display: block;
  width: 200px;
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background: #cc0000;
  line-height: 2.8;
  font-weight: bold;
  border-right: 1px solid #eee;
  box-sizing: border-box;

}
.nav li a {
  display: block;
  width: 200px;
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.8;
  background: #cc0000;
  text-decoration: none;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}

.nav > li:hover {/*layer-1*/
  color: #dd0000;
  background:  #ffdddd;
  }

.nav > li:hover > a {/*layer-1*/
  color: #dd0000;
  background:  #ffdddd;
}
.nav > li li:hover > a {/*layer-2*/
  color: #dd0000;
  background: #ffdddd;
}
.nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
  z-index: 99;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
}
.nav li ul li a {
  border-top: 1px solid #eee;
  text-align: left;
  padding-left: 10px;
  font-size: 12px;
  
}
.nav li:hover > ul > li {
  overflow: visible;
  height: 40px;
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul:before {/*layer-2?*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .nav li ul li ul.left:before,/*layer-2-left?*/
  .nav li ul li ul li ul.left:before {/*layer-3-left?*/
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 5px solid transparent;
    border-right: 5px solid #fff;
  }
  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
#contents {
  margin: 5px auto;
  width: 1000px;
  overflow: hidden;
}
#main {
  width: 720px;
  float: left;
  margin-top: 5px;
  font-size: 17px;
  }

#main_contents1{
width: 700px;
float: left;
}

.main_title {
  width: 700px;
}

.main_title h3 
{
color:#364e96;/*文字色*/
padding: 0.5em 1em;/*上下の余白*/
border-top: solid 2px #364e96;/*上線*/
border-bottom: solid 2px #364e96;/*下線*/
text-align: left;
}



#sideWrap {
  width: 260px;
  float: right;
}
#side {
  background: #FFF none repeat scroll 0% 50%;
  width: 260px;
}
#side p {
  color: #333333;
  font-size: 14px;
  margin: 0;
  text-align: left;
}

/*サイドバーリボン*/
.ribbon1 {
    display: inline-block;
    position: relative;
    height: 40px;/*リボンの高さ*/
    line-height: 40px;/*リボンの高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0 60px;/*横の大きさ*/
    font-size: 16px;/*文字の大きさ*/
    background: #ffc668;/*塗りつぶし色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}

.ribbon1:before, .ribbon1:after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon1:before{
    top: 0;
    left: 0;
    border-width: 20px 0px 20px 15px;
    border-color: transparent transparent transparent #FFF;
    border-style: solid;
}

.ribbon1:after{
    top: 0;
    right: 0;
    border-width: 20px 15px 20px 0px;
    border-color: transparent  #FFF transparent transparent;
    border-style: solid;
}



#footer {
  margin: 0 auto;
  padding: 30px 0;
  width: 1000px;
  text-align: center;
  background-color:#fff;
}

#page-top {

/*位置指定*/
position: fixed;
bottom: 500px;
right: 30px;
z-index:100;
}

#page-top a{

/*背景色*/
background-color:#ddd;
/*文字色*/
color:black;
/*文字周り余白*/
padding:20px;
/*ボタンの丸み*/
border-radius: 5px;
}

/*-------------------------
  右から左に流れるテキスト
-------------------------*/
/* MARQUEE */
 
.marqueeRightLeft {
	max-width: 700px;
	padding: 0.5em 0;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	text-align: left;
	border-top: 1px solid #6c5441;
	border-bottom: 1px solid #6c5441;
	color:#6c5441;
	font-weight: bold;
}
.marqueeRightLeft p:after {
	content: "";
	white-space: nowrap;
}
.marqueeRightLeft p {
	margin: 0;
	padding-left: 100%;
	display: inline-block;
	white-space: nowrap;
		-webkit-animation-name:marqueeRL;
		-webkit-animation-timing-function:linear;
		-webkit-animation-duration:20s;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-name:marqueeRL;
		-moz-animation-timing-function:linear;
		-moz-animation-duration:20s;
		-moz-animation-iteration-count:infinite;
		-ms-animation-name:marqueeRL;
		-ms-animation-timing-function:linear;
		-ms-animation-duration:20s;
		-ms-animation-iteration-count:infinite;
		-o-animation-name:marqueeRL;
		-o-animation-timing-function:linear;
		-o-animation-duration:20s;
		-o-animation-iteration-count:infinite;
		animation-name:marqueeRL;
		animation-timing-function:linear;
		animation-duration:20s;
		animation-iteration-count:infinite;
}
 
@-webkit-keyframes marqueeRL {
	from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marqueeRL {
	from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);}
}
@-ms-keyframes marqueeRL {
	from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);}
}
@-o-keyframes marqueeRL {
	from {-o-transform:translate(0);} to {-o-transform:translate(-100%);}
}
@keyframes marqueeRL {
	from {transform:translate(0);} to {transform:translate(-100%);}
}


/*-------------------------
  右から左に流れるアニメーション
-------------------------*/

* {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
}
body {
  padding: 30px 50px;
}
h1 {
  margin-bottom: 100px;
}
h2 {
  margin-bottom: 50px;
}
/* スライドする要素 */
.content {
  width: 50px;
  height: 50px;
}
.content:nth-child(1) {
  background-color: tomato;
}
.content:nth-child(2) {
  background-color: orange;
}
.content:nth-child(3) {
  background-color: blue;
}
.content:nth-child(4) {
  background-color: green;
}
.content:nth-child(5) {
  background-color: red;
}
.content:nth-child(6) {
  background-color: black;
}
.content:nth-child(7) {
  background-color: white;
}
.content:nth-child(8) {
  background-color: yellow;
}
.content:nth-child(9) {
  background-color: tomato;
}
.content:nth-child(10) {
  background-color: orange;
}
.content:nth-child(11) {
  background-color: blue;
}
.content:nth-child(12) {
  background-color: green;
}
.content:nth-child(13) {
  background-color: red;
}
.content:nth-child(14) {
  background-color: black;
}
.content:nth-child(15) {
  background-color: white;
}
.content:nth-child(16) {
  background-color: yellow;
}
.content:nth-child(17) {
  background-color: green;
}
.content:nth-child(18) {
  background-color: red;
}
.content:nth-child(19) {
  background-color: black;
}
.content:nth-child(20) {
  background-color: white;
}
.content:nth-child(21) {
  background-color: yellow;
}
/* スライドレールの枠 */
.wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 120px;
  margin-bottom: 100px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* ホバー時の装飾（パターン3） */
.content-hover {
  transition: all 0.2s;
  margin-right: 20px;
}
.content-hover:hover {
  transform: translateY(-20px);
  border-radius: 0 10%;
  box-shadow: 0 3px 10px 0 #333;
  opacity: 0.8;
  cursor: pointer;
}

/*-------------------------
  任意の文字が画像の上に現れる
-------------------------*/

.sample1 {
	width:			65px;
	height:			65px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		50%;
	text-align: 		center;
	padding-top:		15px;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

/*-------------------------
  マウスオーバーで画像が浮き上がる
-------------------------*/

.img_wrap{
  border: 1px solid #ddd;
  width: 62px;
  height: 62px;
  margin: 15px auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}