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

/*メニュー
----------------------------------------------*/
nav { width: 100%; height: 80px; background: url(../img/common/bg.png); }
#menu { width: 960px; margin: 0 auto; position: relative; }
h1 { background: url(../img/common/logo.png) no-repeat; width: 340px; height: 80px; position: absolute; top: 0; left: 0; }
h1 a { display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; }
nav ul { display: flex; justify-content: flex-end; align-items: center; letter-spacing: 2px; padding-top: 40px; }
nav ul li { margin-left: 15px; color:#808080;}
nav ul li:first-letter { font-size: 20px; }

.gototop{display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;z-index:9999;}

/*=============================
#btn08
=============================*/
#btn08{
	position:fixed;
	top:10px;
	right:10px;
	z-index:99999;
}
#btn08.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-315deg);
  transform: translateY(20px) rotate(-315deg);
}
#btn08.active span:nth-of-type(2) {
  opacity: 0;
}
#btn08.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(315deg);
  transform: translateY(-20px) rotate(315deg);
}
/*=============================
.btn-trigger
=============================*/

.btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transform: scale(0.7);
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #0030FF;
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}


/*コンテンツ
----------------------------------------------*/
#con { width: 960px; margin: 0 auto; display: flex; justify-content: space-between; }


/*サブメニュー
----------------------------------------------*/
#subMenu { width: 200px; background: url(../img/common/line.png) repeat-y; padding: 50px 0; }
#subMenu dt , #subMenu dd { margin-bottom: 15px; }
#subMenu dt span { background: #000; color: #FFF; display: inline; padding: 0 15px; border-radius: 3px; }
#subMenu dd { background: #F2F2F2; padding: 3px 0; letter-spacing: 2px; }
#subMenu dd:first-letter { font-size: 20px; }
#subMenu .cm { font-size: 20px; }
#subMenu dd a { color: #000; }
#subMenu dd a:hover { color: #0030FF; }
#subMenu dd span { font-size: 10px; }

#now { border-bottom: 2px solid #0030FF; }


/*中身
----------------------------------------------*/
#conIn { width: 760px; text-align: left; }

h2 { font-family: "Roboto", sans-serif; font-weight: 100; font-size: 28px; letter-spacing: 5px; margin-top: 40px; }
h2:first-letter { font-size: 35px; }
.cmfb h2 { font-size: 35px; }

.cen { text-align: center; }


/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
対応頑張る！！＼(^o^)／
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/

@media screen and (max-width: 720px) {
	
	/*メニュー
	----------------------------------------------*/
	nav { width: 100%; height: auto; padding-bottom: 5px; }
	#menu { width: 100%; }
	h1 { width: 70%; background-size:100%;height: 80px; position: relative;margin:auto; }
	nav ul {position:fixed;top:0; width: 100%; margin: 0 auto; padding: 0; font-size: 12px; display: flex; flex-wrap: wrap; justify-content: left; z-index:9999;background:rgba(0,0,0,0.8);padding-top:50px;}
	nav ul li { padding: 5px 10px; margin: 0; }
	nav ul li:first-letter { font-size: 18px; }
	nav ul li:last-child { margin-top: 0; }
	nav ul li img { width: 20px; }
	
	/*コンテンツ
	----------------------------------------------*/
	#con { width: 95%; display: block; }
	
	/*サブメニュー
	----------------------------------------------*/
	#subMenu { width: 100%; text-align: left; background: none; padding: 0; display: flex; flex-wrap: wrap;justify-content: center; }
	#subMenu dd { padding: 3px 10px; }
	
	/*中身
	----------------------------------------------*/
	#conIn { width: 100%; }
	h2 { text-align: center; margin-top: 0; }
	.gototop{display:none;position:fixed;bottom:20px;right:20px;cursor:pointer;width:50px;}
	.gototop img(width:100%;)
}