@charset "utf-8";

/* -------------------------------------------------
     common
 --------------------------------------------------- */
body {
	color:#fff;
	font-size:14px;
	width:100%;
}

#container {
	width: 100%;
	height:auto;
	z-index:1;
}

/* clear both -------------------------- */
.cl{
	clear:both;
	margin:0 auto;
}


/* PC/SP切り替え -------------------------- */
.pc_view{
	display:block !important;
	margin:0 auto;
}

.sp_view{
	display:none !important;
	margin:0 auto;
}

@media screen and (max-width: 770px) {
	.pc_view{
		display:none !important;
		margin:0 auto;
	}
	
	.sp_view{
		display:block !important;
		margin:0 auto;
	}
	.sp_view img{
		width:100%
		height:auto;
	}
}

/* 間隔用 -------------------------- */
.interval40 {
	clear:both;
	width:100%;
	height: 40px;
}

.interval20 {
	clear:both;
	width:100%;
	height: 20px;
}

.interval10 {
	clear:both;
	width:100%;
	height: 10px;
}

/* -------------------------------------------------
     header
 --------------------------------------------------- */
header{
	color:#333;
	font-size:11px;
	width:100%;
	height:250px;
	margin:0 auto;
	text-align:center;
}

#logo {
	max-width:1100px;
	/*height:170px;*/
	margin:0 auto;
}

#logo img {
	width: 100%;
}

#menu_area {
	clear:both;
	width:100%;
	height:80px;
	margin:0 auto;
}

#menu_navi {
	width:1096px;
	height:80px;
	margin:0 auto;
}

#menu_navi ul {
	list-style: none;
	overflow: hidden;
}

#menu_navi li {
	width: 137px;
	height:80px;
	text-align: center;
	float: left;
}

#menu_navi li img {
	width: 137px;
	height:80px;
}

#menu_navi li a {
	display:block;
}

@media screen and (max-width: 770px) {
	header{
		height:auto;
	}
	
	#logo {
		width:100%;
		height:auto;
	}
	
	#logo img {
		width:100%;
		height:auto;
	}

	#menu_area {
		height:0px;
	}

}


/* -------------------------------------------------
     contents
 --------------------------------------------------- */
#contents {
	width:1100px;
	margin:0 auto;
}

@media screen and (max-width: 770px) {
	#contents {
		width:100%;
	}
}

/* -------------------------------------------------
     breadcrumb
 --------------------------------------------------- */
#breadcrumb {
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:0;
}
#breadcrumb li {
	font-size:10px;
	float:left;
	margin:5px;
}
#breadcrumb li a{
	-webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
	text-decoration:none;
}

.breadcrumb {
  clear:both;
  float:left;
  width:100%;
  height:auto;
  margin:0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin:0.5em auto;
}

.breadcrumb li:after {
  /* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 0.3em;
  color: #72a1f7;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 15px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  font-size: 0.9em;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

/* -------------------------------------------------
     top_titlebar
 --------------------------------------------------- */
.top_titlebar {
	clear:both;
	float:left;
	width:1100px;
	height:100px;
	position: relative;
	/*margin-top:30px;*/
}

.top_titlebar img {
	width:1100px;
	height:100px;
}

.top_titlebar .text {
	position: absolute;
  	top: 50%;
  	transform: translate(0%, -50%);
  	left: 20%;
  	font-size: 3.5em;
  	font-family: times new roman,times,serif !important;
}

.howto .title{
	position: relative;
}

.howto .title .title_text{
	position: absolute; 
	top: 50%; 
	transform: translate(-50%, -50%); 
	left: 50%;
	font-size: 3.5em; 
	font-family: times new roman,times,serif !important;
}

.howto .main{
	text-align: center; 
	font-size: 2.5em; 
	font-family: times new roman,times,serif !important;
}

.howto .sub{
	text-align: center; 
	font-size: 1.5em; 
	font-family: times new roman,times,serif !important;
	margin-bottom: 3em;
}

@media screen and (max-width: 770px) {
	.top_titlebar {
		width:100%;
		height:auto;
		/*margin-top:15px;*/
	}
	
	.top_titlebar img {
		width:100%;
		height:auto;
	}
	
	.top_titlebar .text {
		left: 10%;
		font-size: 1.5em;
	}
	
	.howto img{
		max-width: 100%;
	}
	
	.howto .title .title_text{
		position: absolute; 
		top: 50%; 
		transform: translate(-50%, -50%); 
		left: 50%;
		font-size: 1.3em; 
		font-family: times new roman,times,serif !important;
	}
	
	.howto .title img{
		height: auto;
	}
	
	.howto .main{
		font-size: 1.2em;
		width: 90%;
		margin: auto;
	}

	.howto .sub{
		text-align: left; 
		font-size: 0.8em;
		width: 90%;
		margin: auto;
		margin-bottom: 1em;
	}
	
}

/* -------------------------------------------------
     page_title
 --------------------------------------------------- */
.page_title {
	clear:both;
	/*float:left;*/
	display:block;
	width:1100px;
	height:100px;
	margin:10px auto;
}

.page_title img {
	width:1100px;
	height:100px;
}

@media screen and (max-width: 770px) {
	.page_title {
		width:100%;
		height:auto;
	}
	
	.page_title img {
		width:100%;
		height:auto;
	}

}


/* -------------------------------------------------
     group_link
 --------------------------------------------------- */
#group_link {
	clear:both;
	float:left;
	width:1100px;
	height:auto;
	margin:10px auto;
}

#group_link .group_list {
	float:left;
	width: 260px;
	height:130px;
	margin: 5px 7px;
	text-align:center;
}

#group_link .group_list img {
	width: 260px;
	height:130px;
}

#group_link .group_list a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
}

@media screen and (max-width: 770px) {
	#group_link {
		width:100%;
		height:auto;
	}
	
	#group_link .group_list {
		width: 33.333%;
		height:auto;
		margin: 0 0px;
	}

	#group_link .group_list img {
		width: 98%;
		height:auto;
	}

}

/* -------------------------------------------------
     footer
 --------------------------------------------------- */
footer {
	margin-top:60px;
	width:100%;
	clear:both;
}
footer a {
	text-decoration:none;
	color:#424251;
	margin:0 10px;
}
footer a:hover {
	color:#F18B8D;
	text-decoration: underline;
}
footer section {
	width:1000px;
	margin:10px auto;
	position:relative;
	overflow:hidden;
}

footer ul {
	margin:10px auto;
	padding:0 20px 8px;
	text-align:center;
}

footer li {
	display:inline-block;
	font-size:12px;
	margin-top:9px;
}

footer div {
	background:#ffdbe5;
	color:#666;
	text-align:center;
	font-size:12px;
    padding:14px 0;
	clear:both;
}

@media screen and (max-width: 770px) {
	footer section {
		width:100%;
	}
    footer div {
        padding:14px 0 25vw 0;
    }
}


/* -------------------------------------------------
     page_top
 --------------------------------------------------- */
#page_top {
	position:fixed;
	width:72px;
	height:72px;
	text-align:center;
	bottom:10px;
	right:30px;
	z-index:100;
}
#page_top a {
	display:block;
}
#page_top:hover {
	cursor:pointer;
}

@media screen and (max-width: 770px) {
	#page_top {
		bottom:10px;
		right:10px;
	}
}


/* -------------------------------------------------
     pager
 --------------------------------------------------- */
.page_list_box {
	clear:both;
	float:left;
	text-align:center;
	margin-top: 20px;
	width: 100%;
	height:auto;
}

.pager_area{
	display:block;
	clear:both;
	margin:10px auto;
}

a > .arrow_link::after  {
	content: '';
	position: absolute;
	top: 45%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #333;
}