@charset "UTF-8";
/*
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * DESCRIPTION
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * Common layout. 
 * @link       		http://hakohako.info/
 * @author      	Tomoya & hakohako
 * @copyright   	Copyright (c)2016 hakohako
 *
 * Browser :IE9 or more / Safari latest / Firefox latest
 * LICENSE - The MIT License (MIT)
 * Please do not edit this file as much as possible.
 *
 *
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * TABLE OF CONTENTS
 * -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
 * 1.0 - Common
 * ----------------------------------------------------------------------------------------------------
 * Facebook Like Box
 * wrapper
 * Terminal by display
 * Bottom & Tag
 *
 *
 * ----------------------------------------------------------------------------------------------------
 * 2.0 - Header
 * ----------------------------------------------------------------------------------------------------
 * Website Title
 * Description
 * Font Website Title
 * Font Description
 *
 * ----------------------------------------------------------------------------------------------------
 * 3.0 - Navi
 * ----------------------------------------------------------------------------------------------------
 * SM &TB Main Navigation
 * Font SM &TB Main Navigation
 * PC Main Navigation 
 * Font PC Main Navigation 
 * Page Next & Back
 * Pagination
 * 
 * ----------------------------------------------------------------------------------------------------
 * 4.0 - Contents
 * ----------------------------------------------------------------------------------------------------
 * Breadcrumbs
 * Font Breadcrumbs
 *
 * ----------------------------------------------------------------------------------------------------
 * 5.0 - Footer
 * ----------------------------------------------------------------------------------------------------
 * Footer
 * Font Footer
 * aside 
 *
 * ========================================================================
 *
 *ex)
 *@media only screen and (max-width:767px) {}
 *@media only screen and (min-width:768px) and (max-width:959px) {}
 *@media only screen and (min-width:960px) {}
 *
 */

/*====================================================
1.0 - Common
=====================================================*/
html { font: 62.5% / 1.231  Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; -webkit-font-smoothing: antialiased;}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body {
  font-family: "-apple-system", "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  font-feature-settings : "palt";
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}



/* Facebook Like Box width: 100%  ---------------*/
.fbcomments,.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}
/*wrapper ---------------*/
.wrapper { background:#fff; }
.wrapper:after,
.wrap:after{ content: "."; height: 0; clear: both; display: block; visibility: hidden; }
@media only screen and (max-width:767px) {
	.wrapper{ width:100%; margin:0 auto;}
	.wrap{ width:94%; margin:0 auto;}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	.wrapper{ width:750px; margin:0 auto; position:relative; }
	.wrap{ width:750px; margin:0 auto;}
}
@media only screen and (min-width:960px) {
	.wrapper{ width:750px; margin:0 auto; position:relative; }
	.wrap{ width:750px; margin:0 auto;}
}
/*Terminal by display ---------------*/
/*
ex)
.pc-display 	= 	DesktopPC or Laptop
.tb-display 	=	Tablet
.sm-display	=	Smartphone
*/
@media only screen and (max-width:767px) {
	.tb-display,
	.pc-display{ width:0px; height:0px; overflow:hidden; transition: .3s; /*display:none;*/}
}
@media only screen and (min-width:768px) and (max-width:959px) {
	.sm-display,
	.pc-display{ width:0px; height:0px; overflow:hidden; transition: .3s; /*display:none;*/}
}
@media only screen and (min-width:960px) {
	.sm-display,
	.tb-display{ width:0px; height:0px; overflow:hidden; transition: .3s; /*display:none;*/}
}

/*Bottom & Tag ---------------*/
.typebtn{ transition: .3s; text-align:center; vertical-align:middle; white-space:nowrap; display:inline-block; margin:0; padding:6px 12px; border:1px solid transparent; border-radius:8px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.typebtn:hover{background: #00a0e9; transition: .3s;}




/*====================================================
2.0 - Header
=====================================================*/
div#header{ height:85px;}
/* Website Title */
div#header h1{ padding:30px 0 5px 25px;}
/* Description */
div#header h2{ padding:0 0 0 25px;}
/* Custom Logo */
div#header .custom-logo-link{ padding:15px 0 0 25px; display:block; width:220px; }
div#header .custom-logo-link img{ width: auto; height:60px!important;}
/*------------------------------------------------------------------------*/
/* Font Website Title */
div#header h1{font-size:18px; font-size:1.8rem;}
/* Font Description */
div#header h2{font-size:10px; font-size:1.0rem;}



/*====================================================
3.0 - Navi
=====================================================*/
/*SM &TB Main Navigation */
div#nav div#tglMenu{ position:absolute; top:25px; right:25px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: inline-block; cursor: pointer; width: 35px; height: 35px; background: #000 url(../img/menubtn.svg) no-repeat; border-radius: 35px; z-index:100; -moz-transition: -moz-transform .3s ease-in,border-radius 0.5s ease-in; -webkit-transition: -webkit-transform .3s ease-in,border-radius 0.5s ease-in; -o-transition: -o-transform .3s ease-in,border-radius 0.5s ease-in;-ms-transition: -ms-transform .3s ease-in,border-radius 0.5s ease-in; transition: transform .3s ease-in,border-radius 0.5s ease-in;}
div#nav div#tglMenu.active{background:#000 url(../img/menubtn.svg) !important;border-radius: 5px !important;-moz-transform: rotate(-90deg);  -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg);  -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
div#nav #navigation{ display:none;}
@media only screen and (max-width:959px) {
	/*SM &TB Main Navigation */
	div#nav div#tglMenu{ transition: .3s; }
	div#nav ul li a{ display:block; padding:15px 0; background:#000000; color:#FFFFFF; text-decoration:none; width:100%; background: rgba(0, 0, 0, 0.8); margin:0; transition-duration: 0.3s; transition-timing-function: ease-in; border-bottom:#FFFFFF 1px solid; }
  div#nav ul li a{ padding-left: 10px;}
  div#nav ul li a:hover{ display:block; color:#FFFFFF; text-decoration:none; width:100%; background: rgba(178, 30, 35, 0.8); transition: background-color 0.3s linear; }
  div#nav ul li ul li a{ padding-left: 20px;}
}
@media only screen and (min-width:960px) {
	/* PC Main Navigation */
	div#nav{ width:0px!important; height:0px!important; overflow:hidden!important; transition: .3s; /*display:none;*/}
	div#nav div#tglMenu{ width:0px!important; height:0px!important; overflow:hidden!important; transition: .3s; /*display:none;*/}
	div#pc-navigation{ position:absolute; top:25px; right:25px; padding-left:0px;}
	div#pc-navigation ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
	div#pc-navigation ul li{ float: left; position:relative;}
	div#pc-navigation ul li a{ display: block; margin: 0;  transition: .2s; padding:5px 10px; }
	div#pc-navigation ul li ul{ list-style: none; position: absolute; z-index: 9999; top: 100%; left: 0; margin: 0; padding: 0;}
	div#pc-navigation ul li ul li a{ white-space: nowrap; overflow:visible;  transition: .2s; }
	div#pc-navigation ul li ul{ overflow: hidden; height: 0; transition: .2s;}
	div#pc-navigation ul li:hover ul{ overflow: visible;  transition: .2s;}
	/* Font PC Main Navigation */
	div#pc-navigation ul li a{ font-size:13px; color: #000; line-height: 1; text-decoration: none; }
	div#pc-navigation ul li ul li a{ background: #000; color:#fff; text-align: left; }
	div#pc-navigation ul li:hover > a{ background: #00a0e9; color:#fff; }
	div#pc-navigation ul li a:hover{ background: #00a0e9; color:#fff; }
}

/*Page Next & Back*/
#etc-block{ width:100%; height:100px; position:relative; margin:0px auto; }
.back-btn{ position:absolute; top:0px!important; left:25px; }
.next-btn{ position:absolute; top:0px!important; right:25px; }
.back-btn,.next-btn,.back-btn a,.next-btn a{ color:#fff; text-align:center; vertical-align:middle; white-space:nowrap; text-decoration:none; display:block; width: 35px; height: 35px; border-radius:35px; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.back-btn{ background: #dedede url(../img/arrow_back.svg) center center no-repeat; }
.next-btn{ background: #dedede url(../img/arrow_next.svg) center center no-repeat; }
.back-btn a{ background: #000 url(../img/arrow_back.svg) center center no-repeat;	transition-duration: 0.2s; transition-timing-function: ease-in; }
.next-btn a{ background: #000 url(../img/arrow_next.svg) center center no-repeat;	transition-duration: 0.2s; transition-timing-function: ease-in; }
.back-btn a:hover{ background: #00a0e9 url(../img/arrow_back.svg) center center no-repeat; transition: background-color 0.2s linear; }
.next-btn a:hover{ background: #00a0e9 url(../img/arrow_next.svg) center center no-repeat; transition: background-color 0.2s linear; }

/*  Pagination */
/*.page-link{ width:100%; clear:both; padding:30px 0;}
.page-link:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.page-link-left{float:left; display:inline-block; font-size:1.3rem;}
.page-link-right{float:right; display:inline-block; font-size:1.3rem;}
.page-link-left a:before{content:url(../img/icon_triangle_l.gif); padding-right:5px;}
.page-link-right a:after{ content:url(../img/icon_triangle_r.gif); padding-left:5px; }*/
#pgnation{display:block; width:100%; text-align:center; margin:20px auto 60px auto;}

#pgnation span{ border:1px solid #ddd!important;  margin:0.2em;}
#pgnation a{ color:#fff; margin:0.2em;}

#pgnation span,
#pgnation a{ display:inline-block; border-radius:18px; text-decoration:none; text-align:center; width:36px; height:36px; font-size:14px; line-height:36px; }

#pgnation a,
#pgnation a:link{ background:#000; transition: .3s; }
#pgnation a:hover{ background:#00a0e9; transition: .3s; }

#pgnation .dots{background:#fff;}
#pgnation .dots{border:none!important; padding:0px 0px!important;}
@media only screen and (max-width:767px) {
	#pgnation{ clear:both;}
	#pgnation{ padding:20px 0 0 0; margin:0px auto 40px auto;}
}


/*====================================================
4.0 - Contents
=====================================================*/
/* Breadcrumbs */
.nav-list{width:100%;margin:0px;}
.nav-list ul.breadcrumbs{padding:0!important;margin:0!important;}
.nav-list ul.breadcrumbs li{list-style-type:none;margin:0;padding:0;display:inline-block;font-size:11px;}
.nav-list ul.breadcrumbs li a{display:inline-block;margin:0;}
.nav-list ul.breadcrumbs li{padding-right:5px;}
.nav-list ul.breadcrumbs li:after{padding-left:8px;content: url(../img/icon_breadcrumb.svg);width:10px;height:10px;display:inline-block;}
.nav-list ul.breadcrumbs li:last-child:after{font-size:9px;content: "";}
@media only screen and (max-width:767px) {
	.nav-list .nav-list-position{transition: .5s; height:0px; overflow:hidden; }
}
@media only screen and (min-width:768px) and (max-width:959px) {
	.nav-list .nav-list-position{ width:100%; margin:0 auto;  padding:20px 0 30px 25px; transition: .5s;}
}
@media only screen and (min-width:960px) {
	.nav-list .nav-list-position{ width:100%; margin:0 auto; padding:15px 0 15px 25px; transition: .5s;}
}
/* Font Breadcrumbs */
.nav-list ul.breadcrumbs li{ font-size:12px;  font-size:1.2rem;}



/*====================================================
5.0 - Footer
=====================================================*/
/* Footer */
div#footer{ width:100%; background:rgba(255,255,255, .8); padding:25px 0;}
div#footer #return{ padding:25px 0; text-align:center; width:100%; display:block;}
div#footer #return a{ color:#fff; text-align:center; vertical-align:middle; white-space:nowrap; text-decoration:none; display: inline-block; width: 35px; height: 35px; border-radius:35px; text-indent: 100%; white-space: nowrap; overflow: hidden; border:#dedede 1px solid; background:url(../img/arrow_top.svg) center center no-repeat; }
div#footer #page-end{ text-align:center; width:100%; display:block; }

/* Font Footer */
div#footer #page-end{ font-size:10px;  font-size:1.0rem;}

/* aside */
div#footer .aside:after { content: ""; height: 0; clear: both; display: block; visibility: hidden; }
div#footer .aside{ padding: 0 20px; }
@media only screen and (max-width:767px) {
	div#footer .aside{ width:94%; margin:0 auto;}
}
 @media only screen and (min-width:768px) and (max-width:959px) {
	div#footer .aside{ width:750px; margin:0 auto; }
	div#footer .aside .left-box{ float:left; width:45%; }
	div#footer .aside .right-box{ float:right; width:45%; } 
}
 @media only screen and (min-width:960px) {
	div#footer .aside{ width:750px; margin:0 auto;}
	div#footer .aside .left-box{ float:left; width:45%; }
	div#footer .aside .right-box{ float:right; width:45%; }
}