@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Oswald:400,500|Teko:400,500');

@font-face {
	font-family: "Noto";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/NotoSansCJKjp-Regular.eot");
	src: url("../fonts/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"),url("../fonts/NotoSansCJKjp-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Noto";
	font-style: normal;
	font-weight: 500;
	src: url("../fonts/NotoSansCJKjp-Medium.eot");
	src: url("../fonts/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Medium.woff") format("woff"),url("../fonts/NotoSansCJKjp-Medium.otf") format("opentype");
}

@font-face {
	font-family: "Noto";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/NotoSansCJKjp-Bold.eot");
	src: url("../fonts/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"),url("../fonts/NotoSansCJKjp-Bold.woff") format("woff"),url("../fonts/NotoSansCJKjp-Bold.otf") format("opentype");
}
body,h1,h2,h3,h4,h5,h6,ul,p,form,input,ul,ol,li,dl,dd,dt,section,header,nav,article,aside,hgroup,header,footer,figure,figcaption,summary {
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
    -webkit-font-smoothing: antialiased;
}
table {
	border-collapse: collapse;
}
img {
	border: none;
	vertical-align: top;
}
.clear {
	clear: both;
}

/*  FONT SIZE
-------------------------------------------------*/
body {
	font-size: 15px;	
}
.login_bar  .lang li {
	font-size: 18px;
}
.category_hd {
	font-size: 19px;
}
nav .upper_inner li,
nav .lower_inner li,
div.footer_link_inner li {
	font-size: 14px;
}
nav li span {
	font-size: 30px;
}
.copy {
	font-size: 10px;	
}

@media(max-width: 960px) {
nav li span {
	font-size: 26px;	
}
}
@media(max-width: 768px) {
nav .upper_inner li,
nav .lower_inner li {
	font-size: 13px;	
}
nav .upper_inner  li span,
nav .lower_inner li span {
	font-size: 22px;
}
}

@media(max-width: 767px) {
body {
	font-size: 15px;	
}
.login_name {
	font-size: 12px;
}

ul.side_lang  li {
	font-size: 16px;
}
nav .upper_inner li,
nav .lower_inner li {
	font-size: 15px;
}
nav .upper_inner li span,
nav .lower li span {
	font-size: 19px;
	display: none;
}
div.footer_link_inner li {
	font-size: 13px;
}
}
@media(max-width: 320px) {
div.footer_link_inner li {
	font-size: 12px;
}
}


/*  BASE
-------------------------------------------------*/
body {
	color: #222;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.8;
}

nav {
	position: fixed;
	top: 30px;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #FFF;
	color: #004E9D;
	z-index: 8500;
	overflow: hidden;
	display: none;
}
.nav_inner {
	position: relative;
}

.nav_inner .hdr {
	position: absolute;
	top: 20px;
	left: 28px;
}
.nav_inner  .hdr .logo {
	width: 180px;	
}
.nav_inner .hdr .logo img {
	width: 100%;
	height: auto;	
}
.nav_inner  .close_btn {
	position: absolute;
	right: 35px;
	top: 28px;	
}
.close_trigger {
	width: 42px;
	height: 33px;
	position: relative;
	cursor: pointer;
	transition: ease-out 0.3s;
}
.close_trigger span {
	width: 42px;
	height: 5px;
	background: #004E9D;
	position: absolute;
	left: 0;
	transition: ease-out 0.3s;
}
.close_trigger span.bar2 {
	top: 14px;	
}
.close_trigger span.bar3 {
	top: 28px;	
}
.close_trigger.open {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.close_trigger.open span.bar1 {
  -webkit-transform: translateY(14px) rotate(-45deg);
  transform: translateY(14px) rotate(-45deg);
}
.close_trigger.open span.bar2 {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.close_trigger.open span.bar3 {
  opacity: 0;
}

.upper {
	position: absolute;
	top: 40%;
	width: 100%;
	transform: translateY(-180px);
}
nav.medium .upper {
	top: 90px;
	transform: translateY(0px);
}

.upper_inner {
	max-width: 960px;
	height: 290px;
	margin: 0 auto 80px;	
}
/* nav.medium .upper_inner {
	height: 270px;
} */
@media (min-width: 961px) {
	.upper_inner {
		height: 380px;
	}
	nav.medium .upper_inner {
		height: 360px;
	}
}
.category_hd {
	font-family: 'Teko', sans-serif;
	line-height: 1.0;
	margin-bottom: 40px;
	letter-spacing: 1px;
	-webkit-animation: fadeIn 0.7s linear forwards;
	animation: fadeIn 0.7s linear forwards;
}
.category_hd span {
	padding: 2px 14px 0px;
	background: #004e9d;
	color: #FFF;	
}

.upper div.col {
	float: left;
}
.upper_inner div.col.first {
	width: 45%;	
}
.upper_inner div.col.second {
	width: 30%;	
}
.upper_inner div.col.third {
	width: 25%;	
}
nav .lower {
	position: absolute;
	top: 80%;
	width: 100%;
	height: 60vh;
	background: #FFF url(../images/nav_bg.png) repeat-x 0 0;
	background-size: 113px;
	padding: 50px 0;
	box-sizing: border-box;
}
@media(min-width: 1500px) {
nav .lower {
	background-size: 130px;
}
}

nav .upper a {
	text-decoration: none;
	color: #004E9D;
	padding-right: 36px;
}
nav .lower a {
	text-decoration: none;
	color: #FFF;
}
nav .upper_inner li,
nav .lower_inner li {
	list-style: none;
	line-height: 0.9;
	font-family: "ヒラギノ角ゴ Pro W3", 'Noto', "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0 0 30px;
	-webkit-backface-visibility: hidden;
	-webkit-animation: fadeIn 0.7s linear forwards;
	animation: fadeIn 0.7s linear forwards;
}

nav .upper_inner li.coming,
nav .upper_inner li.coming a,
nav .lower_inner li.coming,
nav .lower_inner li.coming a {
	opacity: 0.3;
	cursor: inherit;
	display: inline-block;
}

nav li span {
	font-family: 'Teko', sans-serif;
	padding-right: 36px;
	background: url(../images/arrow_right.svg) no-repeat right 0px top 6px;
	background-size: 23px;
	display: inline-block;
	margin-bottom: 4px;
}
nav li.coming span {
	background: none!important;
}

nav li.nav_talk {
	position: relative;	
}
nav li.nav_talk:after {
	content: '';
	width: 60px;
	height: 60px;
	background: url(../images/nav_talk.png) no-repeat 0 0;
	background-size: 60px;
	position: absolute;
	top: -11px;
	left: 128px;
}
nav li.nav_talk span {
	padding-right: 108px;	
}

nav .lower_inner li span {
	padding-right: 36px;
	background: url(../images/arrow_right_wht.svg) no-repeat right 0px top 6px;
	background-size: 23px;
}

.lower_inner {
	max-width: 960px;
	margin: 30px auto 0;	
}
nav .lower_inner li {
	float: left;
	margin-right: 30px;	
}
.lower_inner li:last-child {
	margin-right: 0;	
}


nav li:hover  span {
	-webkit-animation: navHover 0.3s ease infinite alternate;
	animation: navHover 0.3s ease infinite alternate;
}

.footer_wave {
	height: 70px;
	background-image: url(../images/separate_up_blue.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: 113px;
	position: relative;
}

div.footer_link {
	background: #004E9D;
	padding-bottom: 30px;
}
.footer_link:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
div.footer_link_inner {
	width: 690px;
	margin: 0 auto;
}
div.footer_link_inner div.col {
	float: left;
	width: 270px;	
}
div.footer_link_inner div.col.end {
	width: 140px;	
}
div.footer_link_inner li {
	list-style: none;
	margin: 0 0 10px;
	color: #FFF;
	position: relative;
	padding-left: 1em;
}
div.footer_link_inner li:before {
	content: '・';
	position: absolute;
	left: 0;
	top: 0;
}
div.footer_link_inner li.coming {
	opacity: 0.4;	
}
div.footer_link_inner li.coming a,
div.footer_link_inner li.coming a:hover {
	cursor: inherit;
	text-decoration: none!important;	
}

div.footer_link_inner li a {
	color: #FFF;
	text-decoration: none;	
}
@media(min-width: 769px) {
div.footer_link_inner li a:hover {
	text-decoration: underline;	
}
}

footer {
	clear: both;
	background: #FFF;
	padding: 45px 0 25px;
	text-align: center;	
}
footer .footer_logo {
	width: 107px;
	margin: 0 auto 35px;	
}
.footer_logo img {
	width: 100%;
	height: auto;	
}
.copy {
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
	color: #004E9D;
	font-weight: bold;	
}
.pagetop {
	position: fixed;
	right: 35px;
	bottom: 75px;
	width: 48px;
	height: 48px;
	border-radius: 28px;
	border: 2px solid #FFF;
	background: #004E9D url(../images/pagetop_arw.svg) no-repeat 23px 11px;
	background-size: 9px;
	text-align: center;
	cursor: pointer;
	transition: ease 0.2s;
	display: none;
	z-index: 8000;
}

.header_inner #switchBtn {
	position: fixed;
	right: 35px;
	top: 50px;
	transition: all 0.1s;
}
/*
.barOff .header_inner #switchBtn {
	top: 28px;
}
*/
.trigger {
	width: 42px;
	height: 33px;
	position: relative;
	cursor: pointer;
	transition: ease-out 0.3s;
}
.trigger span {
	width: 42px;
	height: 5px;
	background: #FFF;
	position: absolute;
	left: 0;
	transition: ease-out 0.3s;
}
.heroOver .trigger span {
	background: #004E9D;
	border: 1px solid #FFF;
}
.trigger span.bar2 {
	top: 14px;	
}
.trigger span.bar3 {
	top: 28px;	
}
.trigger.open {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.trigger.open span.bar1 {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
}
.trigger.open span.bar2 {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.trigger.open span.bar3 {
  opacity: 0;
}


.login_bar {
	background: rgba(0,52,115,1.0);
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	color: #FFF;
	padding: 0 30px;
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	box-sizing: border-box;
}
.login_bar a {
	display: block;
	color: #FFF;
	text-decoration: none;
	line-height: 30px;
}
.login_bar .login_name a {
	padding-left: 15px;
	padding-right: 40px;
	background: url(../images/icon_setting_wht2.svg) no-repeat right 10px center;
	background-size: 18px;
}
.login_bar .login_name.opened a {
	background: #FFF;
	color: #004e9d;	
}
.login_bar  ul.lang {
	margin-left: 60px;	
}
.login_bar  ul.lang li {
	list-style: none;
	float: left;
	font-family: 'Oswald', sans-serif;
}
.login_bar a {
	padding: 0 5px;	
}
.login_bar div.login_name {
	position: relative;
}

.search_wrap .search_icon{
	display: none;
}
.login_bar .search_wrap{
	position: relative;
	height: 100%;
}
.login_bar .search_icon{
	display: block;
	height: 100%;
	width: 30px;
	cursor: pointer;
}
.login_bar .search_icon svg{
	width: 25px;
	height: 25px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	vertical-align: bottom;
}

.login_bar .search_icon .icon-blue {
	display: none;
}
.login_bar .search_menu{
	display: none;
	position: absolute;
	right: 0;
	top: 30px;
	color: #004e9d;
	background: #FFF;
	padding: 10px 20px;
	border-left: 1px solid rgba(0,52,115,1.0);
	border-right: 1px solid rgba(0,52,115,1.0);
	border-bottom: 1px solid rgba(0,52,115,1.0);
}
.search_block_inner{
	display: flex;
	width: 100%;
	/* max-width: 250px; */
}
.search_input{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #222;
	flex-grow: 1;
	border: 1px solid #ddd;
	padding: 10px 10px;
	font-size: 16px;
	border-radius: 3px;
}
 .search_submit{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #004e9d;
	color: #fff;
	padding: 0 5px;
	font-size: 14px;
	width: 60px;
	flex-shrink: 0;
	border: none;
	border-radius: 3px;
	margin-left: 5px;
}
@media(min-width: 768px) {
a.user_edit:hover,
.login_name a.hover {
	color: #004e9d;
	background: #FFF url(../images/icon_setting_blu2.svg) no-repeat right 10px center;
	background-size: 18px;

}
.search_icon.is-open {
	color: #004e9d;
	background: #FFF;
}
.search_icon.is-open .icon-white{
	display: none;
}
.search_icon.is-open .icon-blue{
	display: block;
}
}
div.login_name ul.edit_menu {
	position: absolute;
	top: 30px;
	left: -1px;
	min-width: 280px;
	display: none;
	z-index: 9999;
	border-left: 1px solid rgba(0,52,115,1.0);
	border-right: 1px solid rgba(0,52,115,1.0);
	border-bottom: 1px solid rgba(0,52,115,1.0);
}
.login_bar  ul.edit_menu li {
	list-style: none;
	float: none;
}
.login_bar ul.edit_menu li a {
	background: #FFF;
	color: #004e9d;
	text-decoration: none;
	display: block;
	padding: 0 15px;
	height: 40px;
	line-height: 40px;
	white-space: nowrap;
}
.login_bar ul.edit_menu li a:hover {
	background: #E5EDF6;	
}

.login_bar ul.lang li:first-child a:after {
	content: '/';
	margin-left: 10px;
}
.login_bar ul.lang li a.current {
	text-decoration: underline;	
}
.login_bar ul.lang li a.current:after {
	text-decoration: none!important;
	display: inline-block;
}


@media(max-width: 960px) {
nav .nav_inner {
	height: 130px;
}
nav .upper {
	position: static;
	transform: translateY(0);
}
.upper_inner,
.lower_inner {
	margin: 0 28px 15px;
	height: auto;
}
.upper_inner:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}


nav .lower {
	position: static;
	transform: translateY(0);
}
.lower_inner li {
	margin-right: 0;
	width: 33%;	
}

nav li.nav_talk:after {
	left: 110px;
}
div.footer_link_inner {
	width: auto;
	margin: 0 20px;	
}
div.footer_link_inner div.col,
div.footer_link_inner div.col.end  {
	width: 50%;	
}

div.footer_link_inner li {
	margin: 0 0 5px;
}
}

@media(min-width: 768px) {
.side_member,
div.col li.account {
	display: none;	
}

}

@media(max-width: 768px) {
.upper_inner,
.lower_inner {
	margin: 0 20px 15px;	
}
.upper_inner div.col {
	width: 30%;	
}
.upper_inner div.col.first {
	width: 40%;	
}

nav .upper_inner  li span,
nav .lower_inner li span {
}
nav .lower_inner li {
	margin-right: 0;
}
nav li.nav_talk:after {
	left: 100px;
}
nav .lower {
	background: #FFF url(../images/nav_bg.png) repeat-x 0 0;
	background-size: 60px;
}
.pagetop {
	transform: scale(0.8);
	bottom: 10px;
	right: 10px;
}
}
.side_search{
	display: none;
}
@media(max-width: 767px) {

.login_bar {
	display: none;	
}
.header_inner #switchBtn,
header.barOff .header_inner #switchBtn {
	top: 15px;
	right: 15px;
}
.trigger {
	width: 29px;
	height: 23px;
}
.trigger span {
	width: 29px;
	height: 3px;
}
.trigger span.bar2 {
	top: 10px;	
}
.trigger span.bar3 {
	top: 20px;	
}


nav {
	width: 80%;
	top: 0;
	left: inherit;
	right: -80%;
	display: block;
	transition: ease-out 0.2s;
	overflow: auto;
}
nav.slideOpen {
	right: 0;	
}
nav .nav_inner,
.nav_inner .hdr,
.nav_inner .hdr .logo,
.nav_inner .close_btn,
.category_hd {
	display: none;
}
.trigger.open span.bar2 {
	top: 20px;	
}
.upper_inner {
	margin: 20px 0px 10px;	
}
.lower_inner {
	margin: 0px 0px 40px;	
}
.side_member {
	background: #004e9d;
	color: #FFF;
	padding: 0 0 10px;
}
.side_member:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.side_member a {
	color: #FFF;
	text-decoration: none;	
}
.side_search{
	display: block;
	padding: 0 20px;
}
.side_search .search_block_inner{
	margin: 30px auto 0;
	max-width: 100%;
}

.login_name {
	padding: 0;
	text-align: center;
	font-size: 12px;
}
.login_name a.user_edit {
	font-weight: normal;
	display: block;
	padding: 5px 0;
	background: url(../images/icon_setting_wht2.svg) no-repeat right 15px center;
	background-size: 18px;
}
.login_name a span {
	font-weight: bold;
	font-size: 15px;
}

div.login_name ul.edit_menu {
	position: static;
	top: inherit;
	left: inherit;
	width: 100%;
	border: none;
	text-align: left;
}
div.login_name ul.edit_menu li {
	font-weight: normal;
	list-style: none;
	font-size: 15px;
}
div.login_name ul.edit_menu li a {
	text-align: left;
	font-weight: normal;
	padding: 4px 20px;
	display: block;
	background: url(../images/arrow_right_wht.svg) no-repeat right 15px center;
	background-size: 18px;
}

ul.side_lang {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
ul.side_lang  li {
	list-style: none;
	font-family: 'Oswald', sans-serif;
}
ul.side_lang li:first-child a:after {
	content: '/';
	margin-left: 10px;
	margin-right: 10px;
}
ul.side_lang li a.current {
	text-decoration: underline;	
}
ul.side_lang li a.current:after {
	text-decoration: none!important;
	display: inline-block;
}



.upper_inner div.col,
.upper_inner div.col.first,
.upper_inner div.col.second,
.upper_inner div.col.third,
.lower ul {
	width: auto;
	float: none;
	margin: 0 15px 0 20px;
}
nav .upper_inner li,
nav .lower_inner li {
	margin-bottom: 15px;
	line-height: 0.8;
	float: none;
	margin-right: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
nav .upper_inner li span,
nav .lower li span {
	background: none;
}
nav .upper a,
nav .lower a {
	padding-right: 0;
	display: block;	
}
nav .upper a {
	background: url(../images/arrow_right.svg) no-repeat right center;
	background-size: 18px;
}
nav .lower a {
	background: url(../images/arrow_right_wht.svg) no-repeat right  center;
	background-size: 18px;
}
nav .lower {
	height: auto;
	padding-top: 30px;
	min-height: 50vh;
}
nav li.nav_talk:after {
	width: 44px;
	height: 44px;
	background: url(../images/nav_talk.png) no-repeat 0 0;
    background-size: 44px;
	left: 110px;
}
.lower_inner li {
	float: none;
	width: auto;
}

nav .upper_inner li.coming,
nav .upper_inner li.coming a,
nav .lower_inner li.coming,
nav .lower_inner li.coming a {
	display: none;
}

.menuOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	display: none;
	z-index: 8000;
}
.icon_trigger {
	position: fixed;
	z-index: 9999;
	right: calc(80% + 15px);
	top: 15px;
	display: block;
	width: 29px;
	height: 29px;
	transition: all .2s;
	cursor: pointer;
	display: none;
}
.icon_trigger.slideOpen {
	transform: rotate(135deg);
}
.icon_trigger:after,
.icon_trigger:before {
	position: absolute;
	top: 13px;
	display: inline-block;
	box-sizing: border-box;
	width: 29px;
	height: 3px;
	content: '';
	cursor: pointer;
	background: #FFF;
}
.icon_trigger:before {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.footer_wave {
	background-size: 60px;
	height: 40px;
}
footer {
	padding: 20px 0;	
}
footer .footer_logo {
	width: 18%;
	margin: 0 auto 20px;	
}

}

@media(max-width: 320px) {
div.footer_link_inner {
	margin: 0 15px;	
}
}




@keyframes navHover {
0% {
	background-position: right 0px top 6px;
}
100% {
	background-position: right 10px top 6px;
}
}
@keyframes fadeIn {
	0% { opacity: 0 }
	30% { opacity: 0 }
	100% { opacity: 1.0 }
}