/* 
- Name: megamenu.js - style.css
- Version: 1.0
- Latest update: 29.01.2016.
- Author: Mario Loncarek
- Author web site: http://marioloncarek.com
*/


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Body - not related to megamenu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
    font-family: 'Source Sans Pro', sans-serif;
}

* {
    box-sizing: border-box;
}

a {
    color: #333;
}

.description {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.carousel-inner {
  /*  border-top: solid 1px #9d9d9d;*/
}


h1.logo{
    margin-bottom:0;
}
body h1.ttl {
    margin-top: 2px;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.header-inner {
/*	background: -moz-linear-gradient(top, #fff 66px, rgba(5,5,5,0));
	background: -webkit-linear-gradient(top, #fff 66px, rgba(5,5,5,0));
	background: linear-gradient(to bottom, #fff 66px, rgba(5,5,5,0));*/
	background: -moz-linear-gradient(top, #fff 67px, transparent 67px);
	background: -webkit-linear-gradient(top, #fff 67px, transparent 67px);
	background: linear-gradient(to bottom, #fff 67px, transparent 67px);
	height: 100%;
}
header {
	/*ヘッダ固定　https://iritec.jp/web_service/13864/ */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	pointer-events: none;
	background: url(../../files/img/common/header/line_btm.svg) repeat-x 0 67px;
}
header .logo {
	pointer-events: auto;
}
header .menu-sub {
	position: absolute;
	right:15px;
	top: 0.25em;
	z-index:999;
	pointer-events: auto;
}
header .menu-sub p {
	font-size: 1.2rem;
	line-height: 2rem;
}
header .menu-sub a {
	color: #787878;	
}
header .menu-sub a:visited {
	color: #787878;	
}
header .menu-sub a:hover {
	color: #b4b4b4;
	text-decoration: none;
}
.menu-container {
    width: 1140px;
    margin: 0 auto;
	position: relative;/*170919追加*/
}
.menu-mobile {
    display: none;
    padding: 20px;
	pointer-events: auto;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}
.menu > ul {
    margin: 0 auto;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
    float: right;
    z-index: 998;
	pointer-events: auto;	
}

.menu {
	pointer-events: none;	
}


/*スマホメニュー表示時のみ、動くようにする。JSと連動*/
.fixed header .menu {
	pointer-events: auto;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {		
	    clear: both;		
}
	
.menu > ul > li {
    float: left;
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 2em 1em 1em;
    display: block;
    font-size:1.5rem;
}

.menu > ul > li:hover {
    background: #fff;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #fff;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    border:8px solid #ebebeb;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 6px 0 0 10%;
    padding-bottom: 0;
    list-style: none;
    width: 23%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    color: #323232;
    padding: 0.1em 0;
    width: 95%;
    display: block;
    margin-bottom: -2px;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .8em;
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
追加
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu ul p.menu-subtitle{
    font-size:1.7rem;
}
.menu-container a:visited{
    color:#333;
}
ul > li > .line > li.small a{
    font-size:1.5rem;
    line-height: 0.8rem;
    color:#5a5a5a;
}
ul > li > ul > li.f-s14 a{
    font-size:1.7rem;
    line-height: 0.4rem;
}
.b-t{
    font-size:1.7rem;
    font-weight:normal;
    padding-bottom:8px;
    color:#323232;
}
.service > .menu-subtitle > .b-t a{
    font-size:1.7rem;
}
.service > .menu-subtitle > .b-t a:hover{
    color:#b4b4b4;
}
.menu-subtitle .line{
    width:100%;
    border-top:1px solid #b4b4b4;
    padding-top: 16px;
    margin-top: 8px;
}
.menu-subtitle > .line > .small > a:hover{
    color:#b4b4b4;
}
.menu > ul > li > ul > li.service-width{
    width:38%;
}
.menu > ul > li > ul.service {
    width: 140%;
    left: -60%;
    padding: 20px 40px 20px 0;
}
.menu > ul > li > ul.profil {
    width: 150%;
    left: -55%;
    padding: 20px 60px 20px 0px;
}
.menu > ul > li > ul.adoption {
    width: 300px;
    left: 27%;
    padding: 5px 20px 15px 40px;
}
.menu > ul > li > ul.privacy {
    width: 320px;
    left: 38%;
    padding: 10px 20px 20px 70px;
}
.menu-container a:hover{
    color:#b4b4b4;
    background-color:#fff;
}
.fa{
    margin-right:2%;
}
a.hvr-c:hover{
    color:#333;
}
/*-------------------- hover button nav --------------------*/
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0px;
  background: #323232;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0%;
  right: 0%;
}

@media (max-width: 1200px){
.menu-container {
    width: 970px;
}
@media (max-width: 992px){
.menu-container {
    width: 720px;
}
}
@media only screen and (max-width: 736px) {
    .menu-container {
        width: 100%;
    }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 959px) {
    /*.menu-container {
        width: 85%;
    }*/
	
	
	/*ヘッダ固定　https://iritec.jp/web_service/13864/ */
	.menu-container{
/*		height: 100%;*/
/*		position: fixed;*/
/*		height: 100vh;
		overflow:auto;
		-webkit-overflow-scrolling: touch;*/
	}
	.menu {
		height: 100vh;
		overflow:auto;
		-webkit-overflow-scrolling: touch;
	}
/*	.menu .show-on-mobile {
        height: 100vh;
		overflow:auto;
		-webkit-overflow-scrolling: touch;
    }*/
	
	header .menu-sub {
		display: none;
	}
    .menu-mobile {
       display: block;
    }
    .menu-mobile a :hover:before{
        color:#333;
    }
    .menu-dropdown-icon:before {
        display: block;
        margin-top: 8px;
        margin-right: 8px;
    }  

    .menu > ul {
        display: none;
        width:100%;
        margin-top: 5px;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
       background: #e9e9e9;
    }
    .menu > ul > li a {
        padding: 1.5em;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }

    .menu > ul > li > ul.service {
    left: 0%;
    }
    .menu > ul > li > ul > li.service-width {
    width: 100%;
    }
    .menu > ul > li > ul > li {
    margin: 0%;
    }
     .menu > ul > li > ul > .m-t40{
        margin-top:40px;
    }
    .menu > ul > li > ul.profil {
    width: 100%;
    left: 0%;
    padding-left: 20px;
    }
    .menu > ul > li > ul.adoption {
        width:100%;
        left: 0;
        padding: 10px 20px 20px 20px;
    }
    .menu > ul > li > ul.privacy {
    width: 100%;
    left: 0%;
    padding: 10px 20px 20px 20px;
    }
 .menu-container ul a:hover {
    color: #ccc;
    background-color:#f0f0f0;
}
.menu > ul > li > ul.service {
    width: 100%;
    padding: 20px;
}
}