@charset "UTF-8";
.nav {
    display: table;
    width: 95%;
	height: 20px;
    background: #FFF;
	table-layout:fixed;
}
.nav__item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.nav__item + .nav__item {
    border-left: 1px solid #CCC;
	  
}
.nav__item a {
    display: block;
    padding: 15px 0;
    color: black;
    text-decoration: none;
    font-size: 15px;
}

.nav__item b {
    display: block;
    color: #c0c0c0;
    text-decoration: none;
    font-size: 13px;
}

.nav__item c {
	display: block;
	padding: 15px 0;
	color: black;
	text-decoration: none;
	font-size: 25px;
	font-style: normal;
}
.title {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	margin-top: 40px;
}
.title c {
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	color: #c0c0c0;
	clear: both;
	
}

.sample2 {
	width: 270px;
	height: 326px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: left;
}
.sample2 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.jinbutumei{
	font-size: 80%;
	margin-top: 30px;		
}
.nendai{
	font-size: 80%;
	margin-top: 5px;		
	
}

.sample2 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample2:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}







.sample3 {
	width: 417px;
	height: 326px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: right;
}

.sample3 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.sample3 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample3:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}




.sample4 {
	width: 272px;
	height: 332px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: left;
}

.sample4 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.sample4 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample4:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}




.sample5 {
	width: 300px;
	height: 330px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: left;
}

.sample5 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.sample5 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample5:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}




.sample6 {
	width: 308px;
	height: 383px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: right;
}

.sample6 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.sample6 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample6:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}




.sample7 {
	width: 310px;
	height: 379px;
	overflow: hidden;
	margin: 10px 8px 10px 16px;
	position: relative;
	float: right;
}

.sample7 .caption {
	font-size: 100%;
	text-align: center;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	
}
.sample7 .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.6s ease;
	transition:		all 0.6s ease;
}
.sample7:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

.title {
	font-size: 45px;
	font-weight: bold;
	text-align: center;
	line-height: 100px;
}
.setumei {
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 100px;
}
.phozentai {
	width: 1110px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}.hako {
	width: 990px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 150px;
}
.first {
	margin-left: 120px;
	float: left;
	margin-top: 50px;
}
.next {
	width: 300px;
	height: 400px;
	float: left;
	margin-left: 80px;
	margin-top: 80px;
}
.suuji6 {
	margin-top: 200px;
	margin-left: 680px;
}


.gotop {
	font-size: 18px;
	text-align: center;
	margin-top: 200px;
	margin-bottom: 50px;
	color: black;
	clear: both;
}
.gotop a {
	color: black;
	text-decoration: none;
}

.gotop c {
  position: relative;
  display: inline-block;
  transition: .3s;
}
.gotop c::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: black;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.gotop c:hover::after {
  width: 100%;
}