@charset "utf-8";
/* CSS Document */

.container{
	background:url(../img/back-7.gif);
}

.container-inner{
	max-width:850px;
	margin:0 auto;
	
	background:#CCC;
}

.main-img{
	max-width:850px;/*850px*/
	margin:0;
	padding:0;
	
	position:relative;
	bottom:2px;
	
	height:497px;
}

.main-img img{
	width:100%;
	
}

.logo{
	position:absolute;
	top:10px;
	left:20px;
}
.main-img .logo .w-logo{
	width:120px;
	
}


.kaisei-decol-regular {
  font-family: "Kaisei Decol", serif;
  font-weight: 400;
  font-style: normal;
  
  color:#FFF;

}

.ttl{
	position:absolute;
	top:6px;
	left:175px;
	
	display:flex;
	flex-direction:row;
	align-items:center;
	}
.ttl-clr{
	font-size:1.2em;
}	
.ttl-yk{	
	font-size:1.2em;
	text-indent:-0.8em;
	}

.ttl2{
	position:absolute;
	top:28px;
	left:137px;
	color:#FFF;
	font-size:1em;
	
	}

.ttl3{
	position:absolute;
	top:45px;
	left:120px;
	color:#FFF;
	font-size:1em;
	
	}


.topimg-cap{
	position:absolute;
	bottom:0;
	right:0;
	background:#FFF;
	opacity:0.6;
	
	padding-left:10px;
	padding-bottom:0;
	padding-right:10px;
	padding-top:0;
	
	border-radius:8px 0 0 0;
	
	font-weight:normal;
	}
	
strong{
	font-weight:normal;
}


.g-menu{
	max-width:850px;/*850px*/
	margin-left:auto;
	margin-bottom:0;
	margin-right:auto;
	margin-top:-7px;
	
	background:#160c4f;

}
.g-menu li{
	float:left;
}

.g-menu li a{
	display:block;
	background:#160c4f;
	color:#CCC;
	text-align:center;
	/*letter-spacing:0.1em;
	vertical-align:middle;*/
	

	width:212px;
	padding-left:0px;
	padding-bottom:8px;
	padding-right:0px;
	padding-top:8px;
	
	border-right:solid 1px #CCC;
	
}
.g-menu li .last{
	width:210px;
	border:0;
}

.g-menu li a:hover{
	background:#00008b;
	color:#EEE;
}


/*==== コンテンツ ====*/
.contents{

	margin:30px;
	
	border-radius:15px;
	
	box-shadow:inset 2px 5px 10px #999;
	background:#EEE;
}

.setumei{
	margin:30px auto;
	width:60%;
	color:#333;
}

h2{
	margin-left:20px;
	margin-bottom:20px;
	margin-right:0;
	margin-top:0px;
	
	padding-top:20px;
}

.sample-site{
	display:flex;
		flex-direction:row;
	flex-wrap:wrap;
	justify-content: space-between;
	
	margin:10px;
}

.ss-sam{
	margin:10px;
	text-align:center;

}

.ss-sam a:hover{
	opacity:0.7;

}
.ss-sam img{
	width:150px;
}

.ss-title, .ss-title-btn{
	color:#333;
}


/*======BTN=======*/

.btn-s/*,
button.btn */{
  font-size: 1.8rem;/*1.6rem*/
  font-weight: 700;
  line-height: 2em;/*5 2.5em*/
  position: relative;
  /*padding:3vw 4vw;
  display: inline-block;*/
  /*padding: 0.5rem 0.5rem;1rem 4rem
  padding:10em 10em;*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  /*border-radius: 0.5rem;
  border-radius: 100vh;*/
  width:150px;
  height:142px;
 
cursor:default;
}
/*その他と主な共通部分は省略*/

.btn-s{
  overflow: hidden;
  /*padding: 1rem;1.5rem 6rem*/
  /*width:190px;
  width: clamp(1.6rem, 5rem);*/
  /*height:180px;
  height: clamp(1.6rem, 5rem);*/
  /*resize:both;
  overflow:auto;*/
  /*display:inline;*/

  color: #fff;
  border-radius: 0;
  background: #000;


}

.btn-s span {
  position: relative;

}

.btn-s:before{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/**/
  height: 100%;/**/
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #eb6877;

cursor:default;
}

/*.btn-s:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
*/
}

		.btn-s:active:before 
		.ss-title-btn:active:before{
 	 /* スマホの長押しでメニューを表示させない 
 	 -webkit-
 	 */
	  -webkit-touch-callout: none;
	 user-select: none;
 		pointer-events: none;

 		}

.btn-s span a{
	color:#FFF;
border-bottom:dotted 2px #CCC;
}
.btn-s span a:hover{
	opacity:0.7;
}


/******* メディアクエリ での制御 *******/
@media (hover: hover) {
.btn-s:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
}

@media (hover: none) {
.btn-s:active:before{
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
}



/*==== フッター ====*/
.footer{
	max-width:770px;
	
	margin:0 auto;
	padding-left:20px;
	padding-bottom:20px;
	padding-right:20px;
	padding-top:20px;
	/**/
	border-top:solid 1px #000;
}

.f-menu{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	
	margin-bottom:20px;
}

.f-menu li a{
	width:200px;
	color:#333;
}

.f-menu li a:hover{
	color:#999;
}


.footer p{
	width:180px;
	
	margin:0 auto;
}


.sctop-li{
	display:none;
}

@media screen and (max-width: 1080px){
	.g-menu li a{
	
	font-size:0.8em;
	}
	

	
	.ss-sam{
	margin:10px auto;
	}
	
	.sctop-li{
	display:block;
	}

	
}