@charset "utf-8";

.is-fixed {
    background: #fff;
    box-shadow: 0px 4px 10px -5px rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 999;
}

/* ------------------------------------------------------- */
/* header Menu ------------------------------------------- */
/* ------------------------------------------------------- */

.headerMenu {
    display: table;
}
.headerMenu ul {
    float: right;
}
.headerMenu li {
    display: inline-block;
}
.headerMenu li a {
    background: #999;
    border-radius: 0 0 4px 4px;
    padding: 4px 14px;
    font-size: 1.4rem;
    text-decoration: none;
    color: #fff;
    display: block;
}
.headerMenu li a:hover {
    background: #333;
}
.headerOpMenu {
    margin-top: 50px;
    position: relative;
}
.headerOpMenu a {
    font-size: 3.2rem;
    line-height: 100%;
    color: #bababa;
}
.headerOpMenu a.facebookLink {
    position: relative;
    top: 8px;
}
.headerOpMenu a.facebookLink:hover {
    color: #3B5998;
}
.headerOpMenu .mextLink img {
    width: 135px;
    height: auto;
    vertical-align: middle;
}
button.searchLink {
    background: #bababa;
    border: 0;
    border-radius: 500px;
    color: #fff;
    font-size: 1.7rem;
    padding: 3.5px 7.5px;
    position: relative;
    top: 3px;
}
@media only screen and (max-width:768px) {
    .headerMenu {
        display: block;
    }
    .headerMenu ul {
        position: absolute;
        top: 8px;
        right: 50px;
    }
    .headerMenu li a {
        border-radius: 4px;
        font-size: 1.1rem;
        padding: 4px 8px;
    }
    .headerOpMenu .searchLink {
        display: none;
    }
    .headerOpMenu {
        margin-top: 0;
        position: absolute;
        right: 10px;
        top: 0;
    }
    .headerOpMenu .mextLink {
        position: absolute;
        top: 40px;
        right: 40px;
        width: 90px;
    }
    .headerOpMenu .mextLink img {
        width: 90px;
    }
    .headerOpMenu a {
        font-size: 2.2rem;
    }
    .headerOpMenu a.facebookLink {
        top: 47px;
        right: 135px;
        position: absolute
    }
}

/* ------------------------------------------------------- */
/* footer Menu ------------------------------------------- */
/* ------------------------------------------------------- */

.footerMenu {
    display: inline-block;
    font-size: 1.4rem;
}
.footerMenu li {
    display: inline-block;
    margin-left: 10px;
}
.footerMenu li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    margin-right: 5px;
}
.footerMenu a {
    text-decoration: none;
    color: #000;
}
.footerMenu a:hover {
    text-decoration: underline;
}
@media only screen and (max-width:768px) {
    .footerMenu {
        margin-top: 10px;
        display: block;
    }
}

/* ------------------------------------------------------- */
/* global Menu ------------------------------------------- */
/* ------------------------------------------------------- */

#globalmenu ul {
    margin-bottom: 20px;
	display: flex;
}
#globalmenu nav > ul > li {
    border-right: 2px dotted #c0c0c0;
    width: 160px;
    padding: 8px 0 8px 0;
    text-align: center;
	position: relative;
}
#globalmenu nav > ul > li.linkHome {
    display: none;
}
#globalmenu nav.is-fixed > ul > li.linkHome span {
    opacity: 0;
}
#globalmenu ul li:last-child {
    border-right: 0;
    margin-right: 0;
}
#globalmenu ul li a {
	text-decoration: none;
    font-size: 1.4rem;
	color: #000;
    position: relative;
    display: block;
}
.en-US #globalmenu nav > ul > li > a {
    font-size: 2.0rem;
    padding: 11px 0;
}
#globalmenu nav > ul > li:after {
    background: #666;
    display: block;
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    left: 5%;
    bottom: 0;
    transition: all 0.3s ease;
}
#globalmenu nav > ul > li.linkHome:after {
    display: none;
}
#globalmenu nav > ul > li:hover::after {
    width: 90%;
}
#globalmenu ul li a::before {
    content: attr(title);
    font-size: 2.0rem;
    text-align: center;
    line-height: 110%;
    display: block;
    position: relative;
    color: #c0c0c0;
    margin-bottom: 5px;
}
.en-US #globalmenu ul li a::before {
    display: none;
}
.lower #globalmenu nav > ul {
    margin: 0 auto 20px auto;
    display: table;
    transition: all 0.5s ease;
}
/*.lower #globalmenu nav.is-fixed > ul::before {
    content: "";
    background-image: url("../images/base/logo-ja.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: table-cell;
    width: 150px;
    height: 45px;
}
.ja #globalmenu nav.is-fixed > ul::before {
    background-image: url("../images/base/logo-ja.png");
    background-size: cover;
}
.en-US #globalmenu nav.is-fixed > ul::before {
    background-image: url("../images/base/logo-en-US.png");
    background-size: cover;
}*/
#globalmenu nav.is-fixed > ul > li.linkHome {
    display: inline-block;
    border-right: 0;
}
#globalmenu ul li.linkHome a::before {
    opacity: 0;
}
.ja #globalmenu nav.is-fixed > ul > li.linkHome a,
.en-US #globalmenu nav.is-fixed > ul > li.linkHome a {
    background-image: url("../images/base/logo-ja.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    width: 150px;
    height: 45px;
}
.ja #globalmenu nav.is-fixed > ul > li.linkHome {
}
.en-US #globalmenu nav.is-fixed > ul > li.linkHome {
}
.lower #globalmenu ul li {
    display: inline-block;
}
.lower #globalmenu .is-fixed ul {
    margin: 10px auto;
}
.lower #globalmenu .is-fixed > ul {
    min-width: 810px;
}
.lower #globalmenu .is-fixed ul > li {
    padding: 0;
}
.lower #globalmenu .is-fixed ul li a {
    font-size: 1.2rem;
}
.lower #globalmenu .is-fixed ul li a::before {
    font-size: 1.6rem;
}

/* sub menu */
#globalmenu ul ul {
	position: absolute;
	display: none;
	top: 55px;
	border-left: none;
	margin: 0 auto;
	float: none;
    width: 110%;
    min-width: 100px;
    z-index: 995;
}
.en-US #globalmenu ul ul {
    top: 40px;
}
.lower #globalmenu .is-fixed ul ul {
    top: 25px;
}
#globalmenu nav > ul > li > ul::before {
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0de";
    width: 20px;
    height: 20px;
    margin: 0 auto;
	position: relative;
    font-size: 2.8rem;
    display: block;
    color: #ccc;
}
#globalmenu ul ul li {
    background: #ccc;
	display: block;
	float: none;
	border-bottom: 1px solid #fff;
	height: auto;
	border-right: none;
	width: 100%;
}
#globalmenu ul ul li.gmsub a {padding-right: 20px;}
#globalmenu ul ul li.gmsub li a {padding-right: 0;}
.gmsub a::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	position: absolute;
	right: 5px;
    top: 50%;
    margin-top: -12px;
}
.gmsubNone a::after {
	content: "";
	position: static;
	right: 0;
}
#globalmenu ul ul li a {
	height: auto;
	display: block;
	padding: 10px;
	text-align: center;
    font-size: 1.3rem;
}
#globalmenu ul ul li a:hover {
	background-color: #999;
}
#globalmenu ul ul ul {
	top: -1px;
	left: 100%;
	position: absolute;
	display: none;
}
#globalmenu ul ul ul li {
	border-top: none;
	border-bottom: 1px solid #fff;
}
#globalmenu ul ul ul a {
	background-color: #999;
    padding: 15px 5px!important;
}
#globalmenu ul ul ul a:hover {
	background-color: #666;
}

@media only screen and (max-width:768px) {
    #globalmenu {
        display: none;
    }
}

/* ------------------------------------------------------- */
/* Sp Menu ----------------------------------------------- */
/* ------------------------------------------------------- */

#drawernav {
	display: none;
}

@media only screen and (max-width:768px) {
    
    /*スマートフォン用メニュー*/
    #page {
        padding-top: 50px;
        position: relative;
        z-index: 999;
        left: 0;
        background: #fff;
        -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
    }
    #drawernav {
        display: block;
        overflow-y: scroll;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: #333;
        color: #fff;
        z-index: 995;
        padding-top: 60px;
        -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
    }
    #drawernav > ul {
        list-style: none;
        padding: 15px;
    }
    #drawernav ul li {
        border-bottom: 1px solid #666;
    }
    #drawernav ul li a::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f105";
        padding: 0 5px 0 0;
    }
    #drawernav ul li a.gmc::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f107";
    }
    #drawernav ul li ul {
        margin: 0 0 0 20px;
    }
    #drawernav ul li ul li:last-child {
        border-bottom: none;
    }
    #drawernav ul li a {
        color: #fff;
        display: block;
        padding: 10px;
        text-decoration: none;
    }
    #drawernav ul li a:hover {
        background: #999;
    }
    #drawernav h4 {
        padding: 0 15px;
    }
    #humberger {
        border: 1px solid #666;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 997;
        cursor: pointer;
        box-sizing: border-box;
        display: none;
        display: block;
        width: 35px;
        border-radius: 3px;
        padding: 8px 7px 2px 7px;
        margin: 10px 10px 0 0;
        text-align: center;
        font-size: 1.2rem;
        color: #000;
        background: #fff;
    }
    .drawer-opened #humberger {
        background: #fff;
    }
    .icon-bar {
        height: 1px;
        background: #666;
        display: block;
        margin-bottom: 6px;
        -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        transition: all 0.1s ease;
    }
    .humbergerMenu::before {
        content: "MENU";
    }
    .drawer-opened .humbergerMenu::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f00d";
    }
    .fixed-content {
        right: inherit;
        width: 100%;
        z-index: 996;
        -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
    }
    #overlay {
        z-index: -1;
        opacity: 0;
        background: #000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
        -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
    }
    /**
    * ドロワー開放時のスタイル
    **/

    body.drawer-opened #page {
        left: -240px;
        -webkit-box-shadow: 1px 0 2px #000;
        box-shadow: 1px 0 2px #000;
    }
    body.drawer-opened .fixed-content {
        left: -240px;
    }
    body.drawer-opened #drawernav {
        right: 0;
    }
    #gmenu {
        display: none;
    }
    #humberger {
        display: block;
    }
    body.drawer-opened #humberger .icon-bar {
        background: #000;
    }
    body.drawer-opened #humberger .icon-bar:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
        position: relative;
    }
    body.drawer-opened #humberger .icon-bar:nth-child(2) {
        opacity: 0;
    }
    body.drawer-opened #humberger .icon-bar:nth-child(3) {
        top: -7px;
        transform: rotate(-45deg);
        position: relative;
    }

    body.drawer-opened #overlay {
        z-index: 997;
        opacity: 0.3;
        left: -100%;
    }

	/*drawer の開閉*/
	#drawernav ul li.menu-item-has-children ul { display: none; }
    #drawernav ul li.menu-item-has-children > a {
        padding-right: 30px;
		position: relative;
    }
	#drawernav ul li.menu-item-has-children > a:after {
		font-family: "Font Awesome 5 Free";
		font-weight: 400;
		content: "\f0fe";
		padding: 0 5px 0 0;
        position: absolute;
		font-size: 2.0rem;
		right: 0;
        top: 7px;
	}
	#drawernav ul li.menu-item-has-children > a.active:after {
		content: "\f146";
	}
    
}