@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:100,400,700|Noto+Sans+JP:400,500,700&display=swap');

/*
font-family: 'Barlow Condensed', sans-serif;
100:thin        | 使用
200:extra-light |
300:light       |
400:regular     | 使用
500:medium      |
600:semi-bold   |
700:bold        | 使用
800:extra-bold  |
900:black       |

font-family: 'Noto Sans JP', sans-serif;
太さ
100:thin        |
300:light       |
400:regular     | 使用
500:medium      | 使用
700:bold        | 使用
900:black       |

*/


*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-family:'Noto Sans JP', sans-serif; font-size:10px; line-height:1.6; font-weight:400; }
body{ -webkit-text-size-adjust:100%; width:100%; overflow-x:hidden; }
body *{ max-height:999999px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; vertical-align:top; }

/* pc */
@media screen and (min-width: 738px) {
	body{ font-size:1.6rem; line-height:1.6; }
	.sp{ display:none; }
	.inner{ max-width:1200px; margin:0 auto; }
	main .inner{ max-width:1240px; padding:0 20px; }
}

/* スマホ */
@media screen and (max-width: 737px) {
	body{ font-size:1.4rem; line-height:1.6; }
	.pc{ display:none; }
}

#header{
	position:fixed; left:0; top:0; z-index:110;
	background:#FFFFFF; width:100%;
}

#header .logo{ position:absolute; }
#header .logo a{
	display:block; font-size:0; line-height:0;
	background:url("../img/logo.svg") no-repeat center/100%;
}
#header .shop a{
	display:block; font-family:'Barlow Condensed', sans-serif; text-align:center; font-weight:400;
	background:url("../img/h/shop.svg") no-repeat center bottom;
}

#header .sns a{
	display:block; font-size:0; line-height:0;
	background-repeat:no-repeat; background-position:center bottom;
}

/* pc */
@media screen and (min-width: 1001px) {
	#header{ height:78px; border-bottom:6px solid #000000; }
	#header .sp_elm{ display:none; }

	#header .logo{ left:24px; top:22px; }
	#header .logo a{ width:151px; height:34px; }
	
	#header .nav{}
	#header .nav .page{
		display:flex;
		font-family:'Barlow Condensed', sans-serif;
		border-left:1px solid #000000;
		position:absolute; right:250px; bottom:0;
	}
	#header .nav .page a{
		display:inline-block;
		font-size:2.4rem; line-height:4.5rem; font-weight:700; color:#EC2D1F;
		border-right:1px solid #000000; padding:0 25px 0.5rem;
	}

	#header .open{ display:none; }
	#header .shop{ position:absolute; right:165px; bottom:0; }
	#header .shop a{
		width:55px; height:50px;
		font-size:1.5rem; line-height:1.0;
		background-size:55px 42px; padding-right:8px;
	}
	#header .sns{ display:flex; padding:0 19px 0 39px; position:absolute; right:0; bottom:0; }
	#header .sns a{ width:29px; height:60px; }
	#header .sns a.y{ background-image:url("../img/h/youtube.svg"); }
	#header .sns a.t{ background-image:url("../img/h/twitter.svg"); }
	#header .sns a.f{ background-image:url("../img/h/facebook.svg"); }
	#header .sns a.y{ background-size:27px auto; margin-right:16px; }
	#header .sns a.t{ background-size:29px auto; background-position:center bottom 33px; }
	#header .sns a.f{ background-size:15px auto; margin-left:5px; }
	
	#footer{ padding-top:25px; }
	#footer .link{
		display:flex; justify-content:center; flex-wrap:nowrap; max-width:1000px;
		border-bottom:1px solid #000000;
		padding:20px 0; margin:0 auto;
	}
	#footer .link a{ padding:0 2em; }
	#footer .link a:hover{ text-decoration:underline; }
	#footer .copy{ text-align:center; padding:20px 0; }

	#upper{ position:fixed; right:0; bottom:0; }
	#upper a{
		display:block; width:72px; height:72px;
		background:url("../img/upper.svg") no-repeat repeat center;
		font-size:0; line-height:0;
	}
	
	#pagetop{ display:block; width:100%; height:78px; border-bottom:6px solid #000000; }
}

/* スマホ */
@media screen and (max-width: 1000px) {
	#header{
		position:fixed; left:0; top:0; z-index:100;
		height:55px; width:100%;
		background:#FFFFFF;
	}
	#header .pc_elm{ display:none; }

	#header .logo{ left:16px; top:16px; }
	#header .logo a{ width:107px; height:24px; }
	
	#header .nav{
		position:fixed; top:55px; left:0; width:100%; overflow:hidden;
		background:#000000; border-top:1px solid #000000;
		height:1px; transition:height 300ms 0s ease;
	}
	#header .nav.on{ height:calc(100% - 55px); overflow-y:auto; }
	#header .nav .nav_inner{ min-height:100%; position:relative; padding-bottom:103px; }
	#header .nav .page{ display:table; width:100%; }
	#header .nav .page a{
		display:table-cell; vertical-align:middle; text-align:center; background:#FFFFFF; width:calc(100% / 3);
		padding:13px;
		font-family:'Barlow Condensed', sans-serif; font-size:1.9rem; line-height:1.0; font-weight:700; color:#EC2D1F;
		position:relative;
	}
	#header .nav .page a:not(:last-child)::after{
		display:block; content:""; width:1px; background:#000000;
		position:absolute; top:15px; right:0; bottom:15px;
	}
	#header .nav .link{}
	#header .nav .link a{
		display:block;
		padding:15px;
		border-bottom:1px solid #FFFFFF;
		font-size:1.4rem; line-height:1.6; color:#FFFFFF;
		background:url("../img/h/sp/header_arr.svg") no-repeat right 14px center/auto 11px;
	}
	#header .sns{ display:flex; justify-content:center; position:absolute; left:0; bottom:0; width:100%; }
	#header .sns a{ width:35px; height:75px; }
	#header .sns a.y{ background-image:url("../img/h/sp/youtube.svg"); }
	#header .sns a.t{ background-image:url("../img/h/sp/twitter.svg"); }
	#header .sns a.f{ background-image:url("../img/h/sp/facebook.svg"); }
	#header .sns a.y{ background-size:34px auto; margin-right:24px; }
	#header .sns a.t{ background-size:37px auto; background-position:center bottom 44px; }
	#header .sns a.f{ background-size:19px auto; margin-left:6px; }

	#header .shop{ position:absolute; top:0; right:63px; }
	#header .shop a{
		display:block; width:63px; height:55px;
		font-size:0; line-height:0;
		background:url("../img/h/shop.svg") no-repeat center/33px 25px;
	}
	#header .open{
		float:right;
		background:#000000; width:63px; height:55px;
		position:relative;
	}
	#header .open span{ display:block; width:24px; position:absolute; left:20px; }
	#header .open span::before{ display:block; content:""; width:5px; height:3px; background:#FFFFFF; float:left; }
	#header .open span::after{ display:block; content:""; width:16px; height:3px; background:#FFFFFF; float:right; }
	#header .open span:nth-child(1){ top:21px; }
	#header .open span:nth-child(2){ top:27px; }
	#header .open span:nth-child(3){ top:33px; }
	
	#footer .link{ background:#000000; color:#FFFFFF; display:flex; flex-wrap:wrap; padding:10px 0; }
	#footer .link a{
		display:block; width:50%;
		text-align:center;
		padding:15px 10px;
	}
	#footer .copy{ text-align:center; padding:20px 0; }

	#upper{ text-align:right; }
	#upper a{
		display:inline-block; width:52px; height:52px; vertical-align:top;
		background:url("../img/upper.svg") no-repeat repeat center;
		font-size:0; line-height:0;
	}
	
	#pagetop{ display:block; width:100%; height:55px; }
}

.tab{ background:#F7F7F7; position:relative; }
.tab .cat .inner{ display:table; }
.tab .cat .inner>*{ display:table-cell; text-align:center; vertical-align:middle; position:relative; }
.tab .cat span{ color:#EB2C1F; }
.tab .cat span::after{ display:block; content:""; background:#EB2C1F; position:absolute; }
.tab .arhive .t{ cursor:pointer; }
.tab .arhive .t::before{
	display:inline-block; content:""; vertical-align:middle;
	background:url("../img/news/search.svg") no-repeat center/100%;
}
.tab .arhive .t::after{
	display:inline-block; content:""; vertical-align:middle;
	background:url("../img/news/search_arr.svg") no-repeat center/100%;
}
.tab .arhive .l{ background:rgba(255,255,255,1.0); list-style:none; }
.tab .arhive .l .arhive_inner{ list-style:none; height:100%; overflow-y:auto; }
.tab .arhive .l a{ display:block;  }

/* pc */
@media screen and (min-width: 738px) {
	.tab{ min-height:60px; }
	.tab .arhive{ position:absolute; right:0; top:15px; z-index:99; font-size:1.6rem; line-height:1.6; text-align:right; }
	.tab .arhive .t{ display:inline-block; }
	.tab .arhive .t::before{ width:19px; height:19px; margin-right:10px; }
	.tab .arhive .t::after{ width:14px; height:8px; margin:0 20px; }
	.tab .arhive .l{ margin-top:19px; height:calc((1.6rem * 1.6 + 10px) * 5); }
	.tab .arhive .l .arhive_inner{ height:100%; overflow-y:auto; padding:0 29px 0 29px;  }
	.tab .arhive .l a{ padding:5px 10px; text-align:right; }
	.tab .arhive .l ul a{ text-align:left; }
	.tab .cat .inner{ font-size:1.9rem; line-height:1.6; height:90px; }
	.tab .cat .inner>*{ padding:35px; }
	.tab .cat span::after{ height:3px;  bottom:30px; left:35px; right:35px; }
}

/* スマホ */
@media screen and (max-width: 737px) {
	.tab .arhive{ font-size:1.4rem; line-height:1.6; }
	.tab .arhive .t{
		display:block; position:relative;
		padding:15px 20px 15px 10px;
	}
	.tab .arhive .t::before{ width:15px; height:15px; margin-right:10px; }
	.tab .arhive .t::after{ position:absolute; right:5px; top:calc(50% - 3px); width:11px; height:7px; }
	.tab .arhive .l{ width:100%; z-index:99; height:calc((1.4rem * 1.6 + 10px) * 5); border-bottom:1px solid #000000; }
	.tab .arhive .l a{ padding:5px 10px; }
	.tab .cat{ overflow-x:auto; }
	.tab .cat .inner{ font-size:1.4rem; line-height:1.6; height:70px; }
	.tab .cat .inner>*{ padding:15px; }
	.tab .cat span::after{ height:2px; bottom:19px; left:15px; right:15px; }
}

/*************************************************************************************
タイトル関連
*************************************************************************************/

h2.h2_ttl{ background:#000000; font-family:'Barlow Condensed', sans-serif; font-weight:400; color:#FFFFFF; text-align:center; }

h3.h3_ttl{ line-height:1.0; text-align:center; background:url("../img/top/h3.svg") no-repeat center bottom; }
h3.h3_ttl:not(.jp){ font-family:'Barlow Condensed', sans-serif; font-weight:400; }
h3.h3_ttl.jp{ font-weight:700; }

/* pc */
@media screen and (min-width: 738px) {
	h2.h2_ttl{ font-size:7.0rem; line-height:135px; }
	
	h3.h3_ttl{ background-size:45px 9px; padding-bottom:25px; margin-bottom:55px; }
	h3.h3_ttl:not(.jp){ font-size:4.0rem; }
	h3.h3_ttl.jp{ font-size:2.8rem; }
}

/* スマホ */
@media screen and (max-width: 737px) {
	h2.h2_ttl{ font-size:3.5rem; line-height:80px; }
	
	h3.h3_ttl{ font-size:2.9rem; background-size:21px 5px; padding-bottom:15px; margin-bottom:25px; }
	h3.h3_ttl:not(.jp){ font-size:2.9rem; }
	h3.h3_ttl.jp{ font-size:2.2rem; }
}


/*************************************************************************************
ボタン関連
*************************************************************************************/

.navigation{}
.navigation h2,
.navigation .screen-reader-text{ display:none; }
.navigation .nav-links{ display:flex; justify-content:center; }
.navigation .nav-links>*{ text-align:center; }
.navigation .nav-links>*.current{ background:#000000; color:#FFFFFF; }
.inner:not(.details) .navigation a.next,
.inner:not(.details) .navigation a.prev{ background:url("../img/pager_arr.svg") no-repeat center; font-size:0 !important; line-height:0 !important; }
.inner:not(.details) .navigation a.next{ transform:rotate(180deg); }

.details .navigation{ background:#F7F7F7; position:relative; text-align:center; }

.details .navigation a[rel="prev"],
.details .navigation a[rel="next"],
.details .navigation a.next,
.details .navigation a.prev{ position:absolute; font-family:'Barlow Condensed', sans-serif; color:#EB2C1F; font-weight:700; }

.details .navigation a[rel="next"]::after,
.details .navigation a[rel="prev"]::before,
.details .navigation a.next::after,
.details .navigation a.prev::before{
	display:inline-block; content:""; vertical-align:top;
	background:url("../img/top/sp/news_arr.svg") no-repeat center/100%;
}
.details .navigation a[rel="prev"]::before,
.details .navigation a.prev::before{ transform:rotate(180deg); }

.b_btn{
	display:inline-block;
	background:#000000;
	font-family:'Barlow Condensed', sans-serif; text-align:center; color:#FFFFFF; text-align:center;
	position:relative;
}
.b_btn::before,
.b_btn::after{ display:block; content:""; background:#FFFFFF; position:absolute; top:0; bottom:0; }
.details .navigation a.b_btn{ color:#F7F7F7; }
.details .navigation a.b_btn::before,
.details .navigation a.b_btn::after{ background:#F7F7F7; }

/* pc */
@media screen and (min-width: 738px) {
	.navigation .nav-links>*{ font-size:1.4rem; line-height:3.6rem; width:3.6rem; height:3.6rem; margin:0 5px; }
	.inner:not(.details) .navigation a.next,
	.inner:not(.details) .navigation a.prev{ background-size:9px 15px; }

	.details .navigation{ padding:30px; }
	.details .navigation a[rel="prev"],
	.details .navigation a[rel="next"],
	.details .navigation a.next,
	.details .navigation a.prev{ font-size:1.8rem; line-height:3.6rem; top:calc(50% - 1.8rem); }
	.details .navigation a[rel="prev"],
	.details .navigation a.prev{ left:15px; }
	.details .navigation a[rel="next"],
	.details .navigation a.next{ right:15px; }
	
	.details .navigation a[rel="prev"]::before,
	.details .navigation a[rel="next"]::after,
	.details .navigation a.next::after,
	.details .navigation a.prev::before{ width:11px; height:3.6rem; margin:0 15px; }
	
	.b_btn{ width:130px; line-height:3.8rem; font-weight:700; }
	.b_btn:not(.jp){ font-size:2.0rem; }
	.b_btn.jp{ font-size:1.6rem; }
	.b_btn::before,
	.b_btn::after{ width:6px; }
	.b_btn::before{ left:3px; }
	.b_btn::after{ right:3px; }
}

/* スマホ */
@media screen and (max-width: 737px) {
	.navigation{ margin:0 -20px; }
	.navigation .nav-links>*{ font-size:1.4rem; line-height:3.4rem; width:3.4rem; height:3.4rem; margin:0 5px; }
	.inner:not(.details) .navigation a.next,
	.inner:not(.details) .navigation a.prev{ background-size:8px 14px; }
	
	.details .navigation{ padding:20px; }
	.details .navigation a[rel="prev"],
	.details .navigation a[rel="next"],
	.details .navigation a.next,
	.details .navigation a.prev{ font-size:0; line-height:0; top:calc(50% - 1.8rem); }
	.details .navigation a[rel="prev"],
	.details .navigation a.prev{ left:0; }
	.details .navigation a[rel="next"],
	.details .navigation a.next{ right:0; }
	.details .navigation a[rel="prev"]::before,
	.details .navigation a[rel="next"]::after,
	.details .navigation a.next::after,
	.details .navigation a.prev::before{ width:17px; height:4.0rem; margin:0 27px; }
	
	.b_btn{ width:120px;  line-height:4.0rem; font-weight:700; }
	.b_btn:not(.jp){ font-size:1.8rem; }
	.b_btn.jp{ font-size:1.8rem; }
	.b_btn::before,
	.b_btn::after{ width:6px; }
	.b_btn::before{ left:3px; }
	.b_btn::after{ right:3px; }
}

/* end */