/* **************************
   header
************************** */

.header,
.header_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: top 0.4s ease-in-out, background-color 0.6s ease-in-out;/* topの時間は青いナビゲーション（headerNav）と揃えること */
}

.header {
	z-index: 2005;
}

.header_bg {
	z-index: 2000;
	/*transition: all 0.6s ease-in-out;/* backgroundとtopをtransitionさせる、topについては.headerと同期させる必要があるので、設定値を変更する際には注意 */
}

@media (max-width: 767px) {
	.header_bg {
		height: 80px;
	}
}

@media (min-width: 768px) {
	.header_bg {
		height: 100px;
	}
}

/* start headerの状態 */

/* トップページはメインビジュアルの演出が終わるまで最初隠しておく */
.header_topPage.beforeAnimation  {
	opacity: 0;
}

/* トップページは、メインビジュアルの演出が終わったら、top:20pxのところから30pxのところに、スッと降りてくる演出を入れる */
.header_topPage.onAnimation {
	opacity: 1;
	transition-property: all;
	transition-duration: .6s;
	transition-delay: .4s;
	/*easeInOutCubic*/
	-webkit-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1);
         -o-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1);
            transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1);
}

.header_topPage.afterAnimation {
	opacity: 1;
	transition: top 0.6s ease-in-out;
}


@media (max-width: 767px) {

	.header_topPage.beforeAnimation  {
		top: -10px;
	}
	
	.header_topPage.onAnimation {
		top: 0px;
	}

	.header_topPage.afterAnimation {
		top: 0px;
	}

}

@media (min-width: 768px) {

	.header_topPage.beforeAnimation  {
		top: 20px;
	}
	
	.header_topPage.onAnimation {
		top: 30px;
	}

	.header_topPage.afterAnimation {
		top: 30px;
	}

}

@media (min-width: 768px) and (max-height: 680px) {
	
	.header_topPage.header_topPage {
		top: 0px;
	}
	
}

/* トップページのヘッダーは少しスクロールしたら上に迫り上げる */
/*  */
.header_topPage.onScroll {
	top: 0;
	opacity: 1;
	transition: top 0.6s ease-in-out;
}

/* ヘッダーの背景を黒にするとき */
.header.bgBlack, 
.header_bgBlack {
	top: 0;
	opacity: 1;
} 

.header.bgBlack + .header_bg,
.header_bgBlack + .header_bg {
	/* .header_bgBlackは、wrapperの「上」にheaderを配置するときに使う。トップページ以外で使う。headerの高さ分をwrapperのpadding-topで確保し、そこにheaderを重ねている。
	   .header.bgBlackは、wrapperの「前面」にheaderを重ねるときに使う。トップページで使う。*/
	background: #111;
	top: 0;
}

/* ヘッダーの下に青いナビゲーションがついてるページは、スクロールしたらヘッダーは隠して、青いナビゲーションだけにする。 */
/* 黒背景のヘッダーで適用されるので、CSSの書く順番は、bgBlackの下にする */
@media (max-width: 767px) {
	.header.header_withNav.header_navUp,
	.header.header_withNav.header_navUp + .header_bg,
	.headerNav.navUp {
		top: -80px;
	}
}

@media (min-width: 768px) {
	.header.header_withNav.header_navUp,
	.header.header_withNav.header_navUp + .header_bg,
	.headerNav.navUp {
		top: -100px;
	}
}

/* トップページのメインビジュアルでは、最初ヘッダーが若干下の位置にあるが、グローバルナビを開いたら、上に移動させる */
.header.openGlobalNav, .header.openEndGlobalNav {
	top: 0 !important;/* javascriptで設定した値を強制上書き */
}

/* 画面が小さいと、メニュー内でスクロールが発生。
ロゴの裏にメニューがスクロールされるので、背景を白にする
.header.openEndGlobalNav + .header_bg {
	/*background: #fff;/* headerが、header_bgBlackとのきでも、こちらを優先させるたいので、CSSの書く順番に注意。bgBlackの指定より下に書くこと 
	/*z-index: 2004;
	transition: none;
}

.header.closeGlobalNav + .header_bg {
	transition: none;
}
*/

/* end headerの状態 */

.header_inner {
	margin: 0 auto;
	box-sizing: border-box;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
			align-items: center;
	/* ロゴとボタンを両端へ */
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
		justify-content: space-between;
}

.headerLogo_link {
	position: relative;
	line-height: 1;
	vertical-align: middle;
}

.headerLogo svg {
	display: block;/* 余分な余白が消えてデザイン通りになる */
}

.headerLogo path {
	fill: #fff;
	transition: all 0.15s ease-out; /* ロゴの色を変える */
}

/* openEndGlobalNavのタイミングだと、アニメーションさせると若干遅いので、openGlobalNavのタイミングからdelayを目測で適用 */
.header.openGlobalNav .headerLogo path {
	transition: all 0.15s ease-out .4s; /* ロゴを黒に帰る */
	fill: #111;
}

body:not(.isTouch) .headerLogo:hover path {
	opacity: .6;
}

/* スマホ */
@media (max-width: 767px) {

    .header_inner {
		min-height: 80px;
		padding: 0 6.25%;/* 20px/320px相当 */
	}
	
	.headerLogo svg {
		width: 70px;
		height: 15px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

    .header_inner {
		height: 100px;/* min-heightだと、IE11でalign-items: centerが効かない */
		padding: 0 40px;
	}
	
	.headerLogo svg {
		width: 130px;
		height: 28px;
	}

}

@media all and (-ms-high-contrast:none) and (max-width: 767px){
	*::-ms-backdrop, .header_inner {
		height: 80px;
	}
}

@media all and (-ms-high-contrast:none) and (min-width: 768px){
	*::-ms-backdrop, .header_inner {
		height: 100px;
	}
}

/* **************************
   グローバルナビ
************************** */

/* グローバルナビを開くボタン */

.globalNavButton_wrapper {
	position: relative;
	margin-left: auto;/* これを指定しないとIE11で右端にならない */
}

.globalNavButton {
	display: block;
	position: relative;
	z-index: 2006;
	cursor: pointer;
	transition: all 0.2s ease-out;
}

body:not(.isTouch) .globalNavButton:hover {
	-webkit-transform: scale(1.35);/* 40pxから54pxへ拡大 */
        -ms-transform: scale(1.35);
            transform: scale(1.35);
}

.globalNavButton svg {
	position: relative;
	vertical-align: top;
	width: 100%;
	height: 100%;
}

/* スマホ */
@media (max-width: 767px) {    

	.globalNavButton {
		width: 22px;
		height: 22px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {
	
	.globalNavButton {
		width: 40px;
		height: 40px;
	}

}

/* グローバルメニューが開いた後の閉じるボタン（ globalNavButtonより背面にしないと、globalNavButtonのクリックの邪魔になる ） */

.globalNavButton:before {
	content: '';
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #111;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 0.15s ease-out .5s;/* アニメーション行きと帰りでdelayを変える */
	opacity: 0;
}

.header.openGlobalNav .globalNavButton:before {
	transition: all 0.15s ease-out;/* アニメーション行きと帰りでdelayを変える */
	opacity: 1;
}

/* スマホ */
@media (max-width: 767px) {    

	.globalNavButton:before {
		width: 16px;
		height: 16px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {
	
	.globalNavButton:before {
		width: 26px;
		height: 26px;
	}

}

/* クリックしたら広がる大きな丸 */

/* .globalNav_bgの中心点 */
.globalNav_bg_wrapper {
	position: fixed;
	z-index: 2002;
}

.globalNav_bg {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	background: #fff;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition-property: all;
	transition-duration: .9s;
	/* easeInOutCubic */
	-webkit-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1);
			transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1);
	/* easeInOutQuad
	-webkit-transition-timing-function : cubic-bezier(0.455, 0.03, 0.515, 0.955);
            transition-timing-function : cubic-bezier(0.455, 0.03, 0.515, 0.955); */
	backface-visibility: hidden;
}

.globalNav_bg_wrapper.openGlobalNav .globalNav_bg {
	width: 300vmax;/* 正方形の対角線が√2（1.4142...）なので、円の半径を150vmaxとする */
	height: 300vmax;
}

/* IE11はvmaxは使えない */
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, .globalNav_bg_wrapper.openGlobalNav .globalNav_bg {
		width: 6000px;
    	heighT: 6000px;
	}
}

/* Edgeもvmaxがダメでした */
_:-ms-lang(x)::backdrop, .globalNav_bg_wrapper.openGlobalNav .globalNav_bg {
	width: 6000px;
    heighT: 6000px;
}

/* グローバルナビ */

.globalNav {
	-webkit-box-flex: 0;
       -ms-flex: none;
           flex: none;
	position: absolute;
	top: -200vh;/* 閉じてるときは、画面の外に隠しておく */
	left: 0;
	width: 100%;
	z-index: 2003;
	transition: opacity 0.4s ease-in-out .3s;
	opacity: 0;
	color: #111;
}

.globalNav.openEndGlobalNav {
	top: 0;/* 隠していたのを戻す */
	opacity: 1;
	position: relative;
}

.globalNav a {
	color: inherit;
	text-decoration: none;
}

.globalNav_inner {
	display: -webkit-box;
    display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
        -ms-flex-align: center;
			align-items: center;
	box-sizing: border-box;
}

.globalNav_contents {
	margin-top: 40px;
	margin-bottom: 40px;
	-webkit-box-flex: 0;
        -ms-flex: none;
			flex: none;
	-webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.globalNav_list {
	font-weight: 600;
	line-height: 1;
	position: relative;
}

.globalNav_item {
	position: relative;
}

.globalNav_link {
	display: block;
	color: inherit;
	transition: all 0.1s ease-out;
}

.globalNav_link.disabled {
	pointer-events: none;
	cursor: pointer;
	color: #ccc;
}

body:not(.isTouch) .globalNav_link:hover,
.globalNav_link.active {
	color: #406ab6;
}

.globalNav_link.active:before {
	content: '';
	border-radius: 50%;
	position: absolute;
	background: #406ab6;
}

/* スマホ */
@media (max-width: 767px) {

}

/* other menu */

.globalNav_side {
	
}

.globalNav_side_top {
	
}

.header_contact {
	font-weight: 600;
	transition: all 0.2s ease;
}

body:not(.isTouch) .header_contact:hover {
	color: #707070;
}

.headerMenu {
	
}

.headerMenu a {
	color: inherit;
	transition: all 0.2s ease;
}

body:not(.isTouch) .headerMenu a:hover {
	color: #707070;
}

.header_contact {
	display: block;
	font-weight: 600;
	line-height: 1;
}

.header_sns {
	font-size: .9em;
}

.headerMenu {
	line-height: 1.2;
}

/* open animation */

.globalNav_item,
.header_contact, 
.header_sns, 
.headerMenu_item {
	opacity: 0;
}

.globalNav.openEndGlobalNav .globalNav_item, 
.globalNav.openEndGlobalNav .header_contact, 
.globalNav.openEndGlobalNav .header_sns, 
.globalNav.openEndGlobalNav .headerMenu_item {
    transform: translate3d(-10px, 0 ,0);
    -webkit-animation: MenuOptionFadeIn 1s ease;
    animation: MenuOptionFadeIn 1s ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: MenuOptionFadeIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(1) {
	-webkit-animation-delay: .0s;
    animation-delay: .0s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(2) {
	-webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(3) {
	-webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(4) {
	-webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(5) {
	-webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(6) {
	-webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(7) {
	-webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.globalNav.openEndGlobalNav .globalNav_item:nth-child(8) {
	-webkit-animation-delay: .7s;
    animation-delay: .7s;
}

.globalNav.openEndGlobalNav .header_contact {
	-webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.globalNav.openEndGlobalNav .header_sns {
	-webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.globalNav.openEndGlobalNav .headerMenu_item:nth-child(1) {
	-webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}

.globalNav.openEndGlobalNav .headerMenu_item:nth-child(2) {
	-webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

.globalNav.openEndGlobalNav .headerMenu_item:nth-child(3) {
	-webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@-webkit-keyframes MenuOptionFadeIn {
    0% {
		opacity: 0;
		transform: translate3d(-10px, 0 ,0);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, 0 ,0);
    }
}

@-moz-keyframes MenuOptionFadeIn {
    0% {
		opacity: 0;
		transform: translate3d(-10px, 0 ,0);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, 0 ,0);
    }
}

@keyframes MenuOptionFadeIn {
    0% {
		opacity: 0;
		transform: translate3d(-10px, 0 ,0);
    }

    100% {
        opacity: 1;
		transform: translate3d(0, 0 ,0);
    }
}

/* スマホとタブレット */
@media (max-width: 991px) {

	.globalNav_inner {
		padding: 80px 6.25% 6.25%; /* 80pxはヘッダーの高さ。6.25は、20px/320px */
		min-height: 100vh;
	}

	.globalNav_list {
		font-size: 25px;
	}

	.globalNav_item:first-child {
		margin-bottom: 10px;
	}
	
	.globalNav_item:nth-child(3) {
		margin-bottom: 10px;
	}

	.globalNav_link {
		padding: 5px 0 5px 17px;
	}

	.globalNav_link.active:before {
		width: 10px;
		height: 10px;
		top: calc(.5em + 5px);/* 5pxはpadding-top */
		left: 0;
		margin-top:-5px;
	}

	.globalNav_side {
		margin: 27px 0 0 17px;
	}

	.header_contact {
		font-size: 20px;
	}

	.header_sns {
		margin-top: 25px;
	}

	.header_sns .sns .twitter a,
	.header_sns .sns .facebook a {
		width: 32px;
		height: 32px;
	}

	.headerMenu {
		margin: 20px 0 0;
		font-size: 10px;
	}

	.headerMenu_item {
		padding: .5em 0;
	}

}

/* タブレット */
@media  (min-width: 768px) {

	.globalNav_inner {
		min-height: 100vh;
	}

	.globalNav_list {
		font-size: 40px;
	}

	.globalNav_side {
		margin-top: 36px;
	}

	.header_contact {
		font-size: 36px;
	}

	.header_sns .sns .twitter a,
	.header_sns .sns .facebook a {
		width: 42px;
		height: 42px;
	}

	.headerMenu {
		font-size: 13px;
	}

}

/* PC */
@media (min-width: 992px) {
	
	.globalNav_inner {
		padding: 63px 40px 0;/* 内容物（globalNav_contents）が、ロゴの下端（63px）から画面下の間で、垂直中央に来るように、paddingを設定 */
	}

	.globalNav_contents {
		position: relative;
		margin-right: 30px; 
		margin-left: 40px;
	}

	.globalNav_list {
		font-size: 56px;
		left: -.1em;
	}

	.globalNav_item {
		margin: 0 0 .25em;/* 14px相当*/
	}
	
	.globalNav_item:first-child {
		margin-bottom: .61em;/*34px相当*/
	}
	
	.globalNav_item:nth-child(3) {
		margin-bottom: .8em;
	}
	
	.globalNav_item:last-child {
		margin: 0;
	}

	.globalNav_link.active:before {
		width: .42em;/*24px*/
		height: .42em;/*24px*/
		top: .55em;
		left: -.65em;
		margin-top:-.21em;/*24px*/
	}

	.globalNav_side {
		position: absolute;
		right: 0;
		bottom: 0;
		max-width: 100%;
		width: 426px;
		padding: 0 0 6px;
	}

	.globalNav_side_top {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
	}

	.globalNav_side_bottom {
		margin: 22px 0 0;
	}

	.headerMenu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
			-ms-flex-pack: justify;
				justify-content: space-between;
	}

}

@media screen and (max-height: 760px) {
	.globalNav_list {
		font-size: 48px;
	}
}

@media screen and (max-height: 670px) {
	.globalNav_list {
		font-size: 40px;
	}
}

@media screen and (max-height: 580px) {
	.globalNav_list {
		font-size: 32px;
	}
}

@media screen and (max-height: 490px) {
	.globalNav_list {
		font-size: 24px;
	}
}


/* **************************
   2階層目以降のページで出てくる、ヘッダーの下の青いメニュー
************************** */

.headerNav {
	background: #406ab6;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2001;
	box-sizing: border-box;
	transition: top 0.4s ease-in-out;/* スクロールしたら上に移動 */
}

.headerNav_inner {
	margin: 0 auto;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.headerNav_title {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-weight: normal;
	line-height: 1;
	letter-spacing: .012em;
	position: relative;
	white-space: nowrap;
}

@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, .headerNav_title {
		-webkit-box-flex:0;
        -ms-flex:none;
            flex:none;
	}
}

.headerNav_link {
	color: inherit;
	text-decoration: none;
	display: block;
	line-height: 1;
	letter-spacing: .012em;
	cursor: pointer;
	display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
			-ms-flex-align: center;
				align-items: center;
}

.headerNav_link span {
	display: block;
	position: relative;
}

.headerNav_link span:before {
	content: "";
	box-shadow: 0px 0px 0px 2px #fff;/* borderだとアニメーションが汚いので、box-shadowで代替*/
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	transition: all .2s;
}

body:not(.isTouch) .headerNav_link span:hover:before {
	box-shadow: 0px 0px 0px 4px #fff;/* borderだとアニメーションが汚いので、box-shadowで代替*/
}

.headerNav_link.active {
	pointer-events: none;
	cursor: default;
}

.headerNav_link.active span:after {
	content: "";
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translate(-50%,-50%);
}

/* スマホ */
@media (max-width: 767px) {    

	.headerNav {
		padding: 0 6.25%;/* 20px/320px相当 */
		margin-top: 80px;/* ヘッダーの高さ */
	}

    .headerNav_inner {
		min-height: 45px;
	}

	.headerNav_title {
		font-size: 12px;
		position: relative;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.headerNav_title:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: .4em .3em 0 .3em;
		border-color: #fff transparent transparent transparent;
		position: relative;
		left: .5em;
		top: .1em;
	}

	.headerNav_list {
		position: absolute;
		top: 45px;
		left: -200vw;/* 最初は画面の外に隠す */
		right: auto;
		background: #406ab6;
		border-top: 1px solid #fff;
		padding: 10px 0;
		/*transform: translate(0,-5%);*/
		opacity: 0;
		transition: opacity 0.15s ease-out;
	}

	.headerNav.openHeaderNav .headerNav_list {
		left: 0;
		right: 0;
		/*transform: translate(0,0);*/
		opacity: 1;
	}

	.headerNav_link {
		padding: 0 6.25%;/* 20px/320px相当 */
		min-height: 30px;
		font-size: 10px;
	}

	.headerNav_link span {
		padding-left: 25px;
	}

	.headerNav_link span:before {
		width: 15px;
		height: 15px;
		left: 10px;
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {

	.headerNav {
		padding: 0 80px;/* 60px??? */
		margin-top: 100px;/* ヘッダーの高さ */
	}

    .headerNav_inner {
		min-height: 60px;
	}

	.headerNav_title {
		font-size: 15px;
		padding: 0 20px 0 0;
		margin: 0 20px 0 0;
	}

	.headerNav_title:after {
		content: '';
		display: block;
		width: 1px;
		height: 1.2em;
		background: #fff;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0,-50%);
	}

	.headerNav_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 13px 0;
	}

	.headerNav_item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.headerNav_link {
		padding: 10px 15px 10px 0;
		margin-right: 15px;
		font-size: 13px;
	}

	.headerNav_link span {
		padding-left: 30px;
	}

	.headerNav_link span:before {
		width: 16px;
		height: 16px;
		left: 10px;
	}

}

@media all and (-ms-high-contrast:none) and (max-width: 767px){
	*::-ms-backdrop, .headerNav_inner {
		height: 45px;
	}

	*::-ms-backdrop, .headerNav_link {
		height: 30px;
	}
}

@media all and (-ms-high-contrast:none) and (min-width: 768px){
	*::-ms-backdrop, .headerNav_inner {
		
	}
}

/* wrapper */

.wrapper {
	background: #111;
}

/* グローバルナビやモーダルを開いたら、背面のページ全体はスクロールを止める */
.wrapper.stopScroll {
	position: fixed;
	width: 100%;
	/* topプロパティはjsで設定されるので、設定しないでください。*/
}

/* スマホ */
@media (max-width: 767px) {    

    .wrapper {
		
	}

	/* wrapper_headerPositionFrontは、ヘッダーをwrapperの前面に重ねるたいときに使う
	not(wrapper_headerPositionFront)なので、ヘッダーの高さ分のpaddig-topを確保し、そこにヘッダーを重ねる */
	.wrapper:not(.wrapper_headerPositionFront) {
		padding: 80px 0 0;/* ヘッダーの高さ分 */
	}

	.wrapper.wrapper_withNav {
		padding: 125px 0 0;/* ヘッダーとナビゲーションの高さ（45px）分 */
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {    

    .wrapper {
		
	}

	.wrapper:not(.wrapper_headerPositionFront) {
		padding: 100px 0 0;/* ヘッダーの高さ分 */
	}

	.wrapper.wrapper_withNav {
		padding: 160px 0 0;/* ヘッダーとナビゲーションの高さ分 */
	}

}


/* **************************
   言語メニュー
************************** */

.languageMenu {
	position: absolute;
	top: 50%;
	transform: translate(-100%,-50%);
	white-space: nowrap;
	letter-spacing: -.4em;
	line-height: 1;
}

.languageMenu_item {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
	padding: 0 .5em .1em;
	position: relative;
}

.languageMenu_item::before {
	content: '';
	display: block;
	width: 1px;
	top: 0;
	bottom: 0;
	background: #fff;
	background: rgba(255,255,255,.7);
	position: absolute;
	left: 0;
}

.languageMenu_item:first-child::before {
	content: none;
}

.languageMenu_link {
	color: #fff;
	text-decoration: none;
	padding: 0 .2em;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	font-weight: bold;
}

.languageMenu_link:hover {
	border-bottom: 1px solid #ffffff;
}

.languageMenu_link.active {
	pointer-events: none;
	border-bottom: 1px solid #ffffff;
}

.header.openGlobalNav .languageMenu_item::before {
	background: #111;
	background: rgba(17,17,17,.7);
}

.header.openGlobalNav .languageMenu_link {
	color: #111;
}

.header.openGlobalNav .languageMenu_link:hover,
.header.openGlobalNav .languageMenu_link.active {
	border-color: #111;
}

/* スマホ */
@media (max-width: 767px) {    

  .languageMenu {
		left: -15px;
		font-size: 8px;
	}
	
	.languageMenu_link {
		
	}

}

/* スマホより大きいとき */
@media (min-width: 768px) {    

  .languageMenu {
		left: -25px;
		font-size: 12px;
	}
	
	.languageMenu_link {
		
	}

}