@charset "utf-8";

/* モバイルファースト */

/* レイアウト ******************************************************************************************/

body { padding-top: 82px;}

h1.logo { width: 60px; height: 20px; margin-left: -30px; padding: 0; position: fixed; top: 7px; left: 50%; z-index: 98;}
h1.logo a { display: inline-block; width: 60px; height: 20px;}
h1.logo img { max-width: 100%;}

.header { width: 100%; height: 34px; background: #FFF; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 96;}
.header .language { float: right; margin-right: 8px; line-height: 34px;}
/*.header .language a { color: #999; text-decoration: none;}
.header .language a.current,
.header .language a:hover { color: #222; text-decoration: underline;}*/

ul#qtranslate-chooser { padding: 0;}
ul#qtranslate-chooser li { display: inline-block; position: relative;}
ul#qtranslate-chooser li a { display: inline-block; width: 20px; height: 34px; position: relative;}
ul#qtranslate-chooser li a span { display: none;}
ul#qtranslate-chooser li.lang-ja a:after,
ul#qtranslate-chooser li.lang-en a:after {
	display: block; width: 20px; height: 34px; color: #999; text-align: center; text-decoration: none;
	position: absolute; top: 0; left: 0;
}
ul#qtranslate-chooser li.lang-ja a:after { content: "jp";}
ul#qtranslate-chooser li.lang-en a:after { content: "en";}
ul#qtranslate-chooser li.lang-ja.active a:after,
ul#qtranslate-chooser li.lang-en.active a:after,
ul#qtranslate-chooser li.lang-ja a:hover:after,
ul#qtranslate-chooser li.lang-en a:hover:after { color: #222; text-decoration: underline;}
ul#qtranslate-chooser li.lang-ja:after { content: "/"; position: absolute; top: 0; right: -5px;}

.globalnavi {
	width: 100%; height: 40px; padding: 8px 0 0; background: #FFF;
	position: fixed; top: 34px; left: 0; transition: .5s; z-index: 95;
}
.globalnavi.hide { transform: translateY(-100%);}

.globalnavi ul {
	display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	padding: 0;
}
.globalnavi ul li { width: 26%;}
.globalnavi a { display: block; height: 26px; padding: 6px 0; line-height: 13px; text-align: center; text-decoration: none;}
.globalnavi a.current { margin: 0 8%; border: solid 1px #CCC; border-radius: 4px;}
.globalnavi a:hover { color: #222;}
.globalnavi span { display: block; font-size: 13px;}
.globalnavi span:last-child { font-size: 8px;}
.globalnavi .icon_cart { color: #FFF; position: relative;}
.globalnavi .icon_cart::after {
	content: ''; display: block; width: 16px; height: 16px; margin-left: -8px;
	background: url(../img/icon_cart.svg) no-repeat;
	background-size: cover;
	position: absolute; top: -2px; left: 50%;
}

.globalnavi ul li:last-child { width: 22%;}
.globalnavi ul li:last-child a { position: relative;}
.globalnavi ul li:last-child a::after {
	content: ''; display: block; width: 1px; height: 18px; background: #E1E1E1;
	position: absolute; top: 10px; left: 0;
}

.contents_wrap {}

.footer { height: 60px; margin: 35px 0 0; text-align: center;}
.footer .logo { padding: 10px 0 6px; line-height: 0; opacity: 0.4;}
.footer .logo img { width: 100px;}
.footer .copyright { display: block; font-size: 8px; opacity: 0.5;}

#btnPageTop { display: none; position: fixed; right: 15px; bottom: 20px; z-index: 20;}
#btnPageTop a { display: inline-block; width: 40px; height: 40px;}
#btnPageTop a img { width: 100%;}

.freearea {}
.freearea img { max-width: 100%; height: auto;}

@media screen and (min-width: 768px) {

	body { padding-top: 100px;}

	h1.logo { width: 84px; height: 28px; margin-left: -42px; position: fixed; top: 8px; left: 50%;}
	h1.logo a { width: 84px; height: 28px;}
	
	.header { height: 44px;}
	.header .language { margin-right: 30px; line-height: 44px; font-size: 16px;}
	
	ul#qtranslate-chooser li a { width: 34px; height: 44px;}
	ul#qtranslate-chooser li.lang-ja a:after,
	ul#qtranslate-chooser li.lang-en a:after { width: 34px; height: 44px;}
	ul#qtranslate-chooser li.lang-ja:after { position: absolute; top: 0; right: -6px;}

	.globalnavi { height: 46px; position: fixed; top: 44px; left: 0;}
	.globalnavi a { height: 32px; line-height: 32px;}
	.globalnavi a:hover { opacity: 0.7;}
	.globalnavi span { display: inline-block; margin: 0 4px; font-size: 19px;}
	.globalnavi span:last-child { font-size: 11px;}
	.globalnavi .icon_cart::after {
		width: 24px; height: 24px; margin-left: 0;
		position: absolute; top: 2px; left: 50%;
	}

	.globalnavi ul li:last-child a::after { width: 1px; height: 24px; background: #CFCFCF;}

	#btnPageTop { position: fixed; right: 30px; bottom: 30px;}
	#btnPageTop a { width: 50px; height: 50px;}

}


/* 記事一覧 ******************************************************************************************/

h2.category_label { padding: 25px 15px 5px; font-size: 19px;}

.article_list {}

.article_list a { text-decoration: none;}
.article_list a:hover { text-decoration: underline;}

.article_list ul {
	display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; flex-wrap: wrap;
	padding: 25px 5px 0;
}
.article_list ul li { width: 50%; margin: 0 0 35px; padding: 0 5px; box-sizing: border-box;}
.article_list ul li .image_wrap { position: relative;}
.article_list ul li .image_wrap::before {
	content: ''; display: block; padding-top: 100%; /*padding-top: 141.43%; A4比率*/
}
.article_list ul li .image {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
	width: 100%; height: 100%; text-align: center;
	position: absolute; top: 0; left: 0;
}
.article_list ul li .image img {
	width: 100%; height: 100%;
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

.article_list ul li .text_wrap { margin: 12px 0 0;}
.article_list ul li .text_wrap .meta { font-size: 10px; overflow: hidden;}
.article_list ul li .text_wrap .meta .new { float: left; color: #C11A1A; font-weight: bold;}
.article_list ul li .text_wrap .meta .recommend { float: left; color: #1D51A3; font-weight: bold;}
.article_list ul li .text_wrap .meta .date { float: right;}
.article_list ul li .text_wrap .title { margin: 10px 0; font-size: 12px; line-height: 140%; word-break: break-all;}
.article_list ul li .text_wrap .subtitle { margin: 0; font-size: 10px; word-break: break-all;}

.article_list ul li:nth-child(-n+10) { width: 100%;}
.article_list ul li:nth-child(-n+10) .text_wrap .meta { font-size: 12px;}
.article_list ul li:nth-child(-n+10) .text_wrap .title { margin: 10px 0; font-size: 16px;}
.article_list ul li:nth-child(-n+10) .text_wrap .subtitle { font-size: 12px;}

.pagenation { padding: 20px 0; text-align: center;}
.pagenation ul { padding: 0;}
.pagenation ul li { display: inline-block;}
.pagenation a {
	display: inline-block; width: 30px; height: 30px; margin: 0 8px; line-height: 30px; text-decoration: none;
}
.pagenation a.num {
	background: url(../img/bg_pager.svg) no-repeat;
	background-size: 30px 30px;
}
.pagenation a.current,
.pagenation a.num:hover {
	color: #FFF;
	background: url(../img/bg_pager_current.svg) no-repeat;
	background-size: 30px 30px;
}

@media screen and (min-width: 480px) {
	
	.article_list ul li { width: 25%; padding: 0 15px;}
	.article_list ul li:nth-child(-n+10) { width: 50%;}
	.article_list ul li:nth-child(-n+10) .text_wrap .meta { font-size: 12px;}
	.article_list ul li:nth-child(-n+10) .text_wrap .title { margin: 10px 0; font-size: 16px;}
	.article_list ul li:nth-child(-n+10) .text_wrap .subtitle { font-size: 12px;}
	
}

@media screen and (min-width: 768px) {
	
	h2.category_label { padding: 40px 20px 20px; font-size: 24px;}

	.article_list ul li { width: 12.5%;}
	.article_list ul li:nth-child(-n+10) { width: 20%;}
	.article_list ul li:nth-child(-n+10) .text_wrap .meta { font-size: 12px;}
	.article_list ul li:nth-child(-n+10) .text_wrap .title { margin: 10px 0; font-size: 16px;}
	.article_list ul li:nth-child(-n+10) .text_wrap .subtitle { font-size: 12px;}
	
}


/* 記事詳細 ******************************************************************************************/

.article_detail { max-width: 800px; margin: 0 auto; padding: 40px 20px;}

.article_detail .head_area { margin: 0 0 40px;}
.article_detail .head_area .meta {}
.article_detail .head_area .meta a { display: inline-block; margin-right: 8px;}
.article_detail .head_area .meta span { display: block; margin: 8px 0 0; color: #999;}
.article_detail .head_area h2 { font-size: 20px; line-height: 140%; font-weight: normal; position: relative;}
.article_detail .head_area h2::after {
	content: ''; display: block; width: 30px; height: 2px; background: #222;
	position: absolute; left: 0; bottom: -2px;
}

.article_detail .text_area { font-size: 16px; line-height: 180%;}
.article_detail .text_area img { max-width: 100%; height: auto;}

.article_detail .tag_area { display: -webkit-flex; display: flex; margin: 50px 0 0;}
.article_detail .tag_area a {
	display: inline-block; height: 20px; margin: 0 0 10px 10px; padding: 0 15px; line-height: 20px; color: #FFF; text-decoration: none;
	background: #222; border-radius: 4px;
}
.article_detail .tag_area a:hover { opacity: 0.7;}

.article_detail .sns_area { display: -webkit-flex; display: flex; margin: 50px 0 0;}
.article_detail .sns_area div { width: 33.33%; padding: 0 2px;}
.article_detail .sns_area div a { display: block; padding: 8px 0; text-align: center; background: #F0F0F0;}
.article_detail .sns_area div a img { width: 16px;}

.fullImage { margin: 0 -20px;}

@media screen and (min-width: 768px) {

	.article_detail { padding: 60px 20px;}

	.article_detail .head_area .meta { font-size: 14px;}
	.article_detail .head_area h2 { font-size: 28px;}
	.article_detail .text_area { font-size: 18px;}
	.article_detail .tag_area { font-size: 14px;}
	.article_detail .tag_area div:first-child { padding: 5px 0 0;}
	.article_detail .tag_area a { height: 28px; line-height: 28px;}
	.article_detail .sns_area div a { padding: 12px 0;}
	.article_detail .sns_area div a img { width: 22px;}

	.fullImage { margin: 0;}

}


/* モーダルメニュー ******************************************************************************************/

body.modal_open { overflow: hidden;}	/* iOSの背景スクロール停止 */

.btn_menu { position: fixed; top: 0; left: 0; z-index: 99;}
.btn_menu > div { padding: 13px 0 0 13px;}

.menu-trigger,
.menu-trigger span { display: block; transition: all .2s; box-sizing: border-box;}
.menu-trigger { width: 16px; height: 8px; position: relative;}
.menu-trigger span {
	width: 100%; height: 2px; background-color: #444; border-radius: 1px;
	position: absolute; left: 0;
}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger span:nth-of-type(2) { bottom: 0;}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(3px) rotate(-45deg);
            transform: translateY(3px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	-webkit-transform: translateY(-3px) rotate(45deg);
            transform: translateY(-3px) rotate(45deg);
}

.modal_menu {
	display: none; width: 100%; height: 100%; background: #FFF; overflow: scroll; z-index: 97;
	position: fixed; top: 0; left: 0;
	-webkit-overflow-scrolling: touch;	/* iOSで滑らかなスクロール */
}
body::-webkit-scrollbar,
.modal_menu::-webkit-scrollbar {	/* Chrome、Safariでスクロールバー非表示 */
    display:none;
}
body { -ms-overflow-style:none;}	/* IE、Edgeでスクロールバー非表示 */

.modal_menu .menu_area { margin: 60px 0 0;}
.modal_menu .menu_area a:hover { color: #222;}
.modal_menu .menu_area > ul { margin: 15px 0 0; padding: 0;}
.modal_menu .menu_area > ul > li {}
.modal_menu .menu_area > ul > li a { display: block; padding: 15px 20px; font-size: 18px; text-decoration: none; position: relative;}
.modal_menu .menu_area > ul > li a span { display: inline-block; margin-left: 15px; font-size: 9px;}

.modal_menu .menu_area > ul > li > ul { display: none; margin: 0; padding: 0;}
.modal_menu .menu_area > ul > li > ul > li a { padding: 10px 20px 10px 35px;}

.modal_menu .menu_area > ul > li a.toggle:after {
	content: ''; display: block; width: 16px; height: 16px; margin: -8px 0 0; position: absolute; top: 50%; right: 20px;
	background: url(../img/icon_arrow01.svg) no-repeat;
	background-size: cover;
}
.modal_menu .menu_area > ul > li a.toggle.open:after {
	background: url(../img/icon_arrow02.svg) no-repeat;
}

.modal_menu .menu_area img.logo { width: 120px;}

.modal_menu .copyright { margin: 40px 20px 20px; font-size: 8px;}

@media screen and (min-width: 768px) {
	
	.btn_menu > div { padding: 17px 0 0 30px;}

	.menu-trigger { width: 20px; height: 10px; position: relative;}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(4px) rotate(-45deg);
				transform: translateY(4px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		-webkit-transform: translateY(-4px) rotate(45deg);
				transform: translateY(-4px) rotate(45deg);
	}
	
	.modal_menu .menu_area { max-width: 800px; margin: 60px auto 0;}
	.modal_menu .menu_area a:hover { color: #999;}
	.modal_menu .copyright { max-width: 760px; margin: 40px auto 20px;}

}