@charset "utf-8";
/*----------------*/
/*  初期値クリア  */
/*----------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

body {
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;/*	font-size: 100%; */
}
h1 {
	font-size:2vw;
}


/*------------*/
/*  共通設定  */
/*------------*/

.wrapper{
	margin: 0 auto;
}
.fr {
	float: right;
}
.fl {
	float: left;
}
.cf::after {
	content: "";
	display: block;
	clear: both;
}
/*----------------*/
/*  ヘッダー　　　　 */
/*----------------*/
 h1{color: #4169e1;
	padding-left: 30px;
}
#page-index nav{
	position: relative;
	width: 100%;
	height: 30%;
}
ul.ddmenu {
	list-style: none;
	text-align: right;
	margin-bottom: 10px;
}

ul.ddmenu li {
	display: inline;
	list-style-position: inside;
	padding-right: 3vw;
	padding-left: 3vw;
	border-right: 1.5px solid #ddd;
	text-align: center;
	font-size: 1.5vw;
}
ul.ddmenu li:last-child{
	border-right: none;
}
header nav li a{text-decoration: none;
}

.tell{
	text-align: right;
	padding-right: 20px;
	margin-bottom: 10px;
	position: absolute;
	top: 30px;
	right: 0;
	font-size: 1.1vw;
/*	font-size: 15px;*/
}

/*----------------*/
/*  キービジュアル  */
/*----------------*/
.keyvisual{
	position: relative;
}

.imgkeyvisual{
	width: 100%;
	height:100%;
}
/*----------------*/
/*  センター文字　　 */
/*----------------*/
.type1{
	position: absolute;
	top: 10%;
	left: 3%;
	font-size: 3vw;
/*	font-size: 35px;*/
	color: #fff;
}
.type2{
	position: absolute;
	top: 50%;
	left: 3%;
	font-size: 1.5vw;	
/*	font-size: 20px;*/
	color: #fff;
}
.color1{
	color: #ff0000;
}
/*----------------*/
/*  　6角形　　　　 */
/*----------------*/
.hexagonA {
    margin: 0 auto;
    width: 25%;
    height:100%;
/*    width: 124px;
    height: 72px;*/
    display: block;
    position: relative;
    background:#c0c0c0;
    transition: all 0.2s linear;
    text-decoration: none;
}
 
.hexagonA span {
    width: 100%;
    height: 100%;
/*    height: 72px;*/
/*  line-height: 72px;*/
	display: flex;
	align-items: center;
	justify-content: center; 
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 1.2vw;
/*    font-size: 15px;*/
    transition: .2s
}

 
.hexagonA:before,
.hexagonA:after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #c0c0c0;
    transition: all 0.2s linear;
    z-index: 0;

}
 
.hexagonA:before {
    transform: rotate(60deg);
}
 
.hexagonA:after {
    transform: rotate(-60deg);
}
 
.hexagonA:hover,
.hexagonA:hover:before,
.hexagonA:hover:after {
    background: #bbb;
}

.hexagonA:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

 .hexagonA:hover span{
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

.hexagonA:hover:before,
.hexagonA:hover:after {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}


.hexagonA:hover:before {
    transform: rotate(60deg);
}
 
.hexagonA:hover:after {
    transform: rotate(-60deg);
}   

/*----------------*/
/* 6角形位置調整 　　*/
/*----------------*/

/*上段３*/
.hexagon1{
	position: absolute;
	width: 22%;
	height: 22%;	
	top: 13%;
	right: 29%;
}
.hexagon2{
	position: absolute;
	width: 22%;
	height: 22%;	
	top: 13%;
	right: 12%;
}
/*.hexagon3{
	position: absolute;
	width: 20%;
	height: 20%;
	top: 10%;
	right: 11%;
}*/

/*中段４*/

.hexagon4{
	position: absolute;
	width: 22%;
	height: 22%;
	top: 39%;
	right: 36%;
}
.hexagon5{
	position: absolute;
	width: 22%;
	height: 22%;
	top: 39%;
	right: 20%;
}
.hexagon6{
	position: absolute;
	width: 22%;
	height: 22%;
	top: 39%;
	right: 4%;
}
/*.hexagon7{
	position: absolute;
	width: 20%;
	height: 20%;
	top: 35%;
	right: 5%;
}
*/
/*下段３*/

.hexagon8{
	position: absolute;
	width: 22%;
	height: 22%;
	top: 66%;
	right: 29%;
}
.hexagon9{
	position: absolute;
	width: 22%;
	height: 22%;
	top: 66%;
	right: 12%;
}
/*.hexagon10{
	position: absolute;
	width: 20%;
	height: 20%;
	top: 60%;
	right: 11%;
}*/
/*----------------*/
/*     footer    */
/*----------------*/
footer {
	width: 100%;
	height: 50px;
	background-color: #fff;
	font-size: 1.3vw;
/*	font-size: 15px;*/
	text-align: center;
}
/*----------------*/
/*     topback    */
/*----------------*/
#page-top {
    position: fixed;
    bottom: -100px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}




.test {
	font-size: 1.2vw;
}