@charset "utf-8";

:focus-visible{
    outline: auto!important;
}

body.category-opened{width:100%;position:fixed;}

#header{z-index:5;}
body.category-opened #header{position:fixed !important;}

.content-pc{display:block;}
.content-sp{display:none;}

.section-bg{width:100%;text-align:center;}
.section{width:100%;max-width:1200px;margin:0 auto;}

/* テクノロジーヘッダ */
#techheader{position:relative;height:77px;z-index:4;}
#techheader h1{width:100%;margin:0;text-align:center;}
#techheader h1 a{display:block;padding:20px 0;}
#techheader h1 img{display:block;margin:0 auto;}
#techheader-fixed{position:absolute;left:0px;width:100%;top:77px;height:0px;background-color:#FFF;overflow:hidden;}
#techheader-fixed p{width:100%;margin:0;}
#techheader-fixed p a{display:block;padding:8px 0 6px;color:#FFF;background-color:#888;text-align:center;}
#techheader-fixed p a:hover{opacity:0.7;}
#techheader-fixed p span{display:inline-block;margin:0 auto;font-size:18px;line-height:28px;}
#techheader-fixed p span:before{content:'';display:inline-block;width:16px;height:16px;background:url(../img/technology/techheader-icon.png) no-repeat center;background-size:100%;vertical-align:-2px;margin-right:8px;}

#techheader.fixed #techheader-fixed{position:fixed;top:0px;height:auto;overflow:hidden;}
#techheader.fixed.view #techheader-fixed{top:106px;height:auto;overflow:visible;}

.breadcrumbs ul {list-style: none;margin: 15px 0 0 10px;padding: 0;}
.breadcrumbs ul li {margin: 0 5px 0 0;float: left;}
.breadcrumbs ul li a{text-decoration: none;color: #333333;}
.breadcrumbs ul li a:hover {text-decoration: underline;}
.breadcrumbs ul li:after {padding: 0 0 0 6px;content: ">";}
.breadcrumbs ul li:last-child:after {content:none;}

/* カテゴリーメニュー */
#category{position:fixed;right:100%;width:100%;top:106px;bottom:0px;z-index:5;transition: all 1s ease 0s;padding-top:42px;box-sizing:border-box;}
#category:after{content:'';position:absolute;left:0px;width:100%;top:0px;height:100%;z-index:1;background-color:#FFF;opacity:0.9;}

body.category-opened #category{right:0%;}

#category-close{position:absolute;left:0px;width:100%;top:0px;z-index:2;}
#category-close a{display:block;color:#FFF;font-size:18px;line-height:28px;background-color:#888;padding:8px 0 6px;text-align:center;}
#category-close a:hover{opacity:0.7;}
#category-close a span{display:inline-block;margin:0px auto;}
#category-close a span:before{content:'';display:inline-block;width:13px;height:13px;background:url(../img/technology/category-close.png) no-repeat center;background-size:100%;vertical-align:-2px;margin-right:8px;}

#category-scroll{width:100%;margin-right:auto;overflow:hidden;overflow-y:auto;height:100%;position:relative;}
.ps-scrollbar-y-rail{z-index:3;}
.ps-container.ps-active-y>.ps-scrollbar-y-rail{background-color:#FFF;position:absolute;}
.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#5c5c5c;}

.category-section{position:relative;z-index:2;background-color:#FFF;}
.category-section h2{width:99.667%;max-width:1196px;margin:0 auto;color:#000;font-size:22px;font-weight:normal;line-height:42px;text-align:center;padding-top:30px;position:relative;}
.category-section h2:after{content:'';display:block;position:absolute;left:0px;bottom:0%;width:100%;height:21px;border-top:1px solid #a6a7ab;z-index:1;}
.category-section h2 span{position:relative;z-index:2;display:inline-block;line-height:42px;padding:0 10px;position:relative;}
.category-section h2 span:before{content:'';display:block;position:absolute;left:0px;bottom:0%;width:100%;height:21px;border-top:1px solid #FFF;z-index:-1;}

.category-box{width:100%;margin:0 auto;padding:0 0 20px;clear:both;}
.category-box h3{position:relative;width:99.667%;max-width:1196px;margin:0 auto;color:#000;font-size:16px;font-weight:normal;line-height:40px;text-align:center;background-color:#FFF;border:1px solid #a6a7ab;font-family:'Frutiger Neue W01 Bd';}
.category-box h3:hover{background-color:#c7000b;color:#FFF;}
.category-box h3 a{display:block;color:#000;text-decoration:none;}
.category-box h3 a:hover{color:#FFF;}
.category-box h3 a span{position:relative;z-index:2;}
.category-box h3.category-parents a{position:absolute;left:0px;top:0px;width:100%;height:0%;overflow:hidden;}
.category-box h3.category-parents a:after{content:'';position:absolute;display:block;background-color:#000;}
.category-box h3.category-parents:hover{background-color:#FFF;color:#000;}

.category-box h3 a.toggle-open{z-index:2;}
.category-box h3 a.toggle-open:after{right:34px;top:25px;width:2px;height:30px;}
.category-box h3 a.toggle-close{z-index:1;}
.category-box h3 a.toggle-close:after{right:20px;top:39px;width:30px;height:2px;}
.category-box h3.toggle-open a.toggle-open{display:none;}

.category-box ul{max-width:1200px;margin:0 auto;padding:0 0 0 2px;}
.category-box ul:after{content:'';display:block;width:100%;height:0px;clear:both;}
.category-box li{margin:2px 0 0;padding:0;list-style:none;float:left;text-align:center;}
.category-box li a{display:block;color:#FFF;font-size:16px;line-height:56px;text-decoration:none;background-color:#c7000b;position:relative;}
.category-box li a:after{content:'';display:block;position:absolute;left:0px;width:100%;top:0px;height:0%;background-color:#FFF;opacity:0.3;z-index:1;}
.category-box li a:hover:after{height:100%;}

.category-box li.double a{line-height:20px;padding:8px 0;}
	
#category-box1 li{width:25%;padding-right:2px;}
#category-box2 li{width:25%;padding-right:2px;}
#category-box3 li{width:25%;padding-right:2px;}
#category-box5 li{width:16.667%;padding-right:2px;}

#category-section2 ul{width:100%;max-width:360px;margin:0 auto;padding:0;}
#category-section2 ul:after{content:'';display:block;width:100%;height:20px;clear:both;}
#category-section2 li{width:100%;float:left;margin:0px;padding:0;list-style:none;}
#category-section2 a{display:block;}
#category-section2 img{display:block;width:100%;height:auto;}
#category-section2 a:hover img{opacity:0.7;}

#category ul#category-pc{display:block;}
#category ul#category-sp{display:none;}

.content-dummy{width:100%;max-width:1200px;margin:0 auto 10px;}
.content-dummy img{width:100%;height:auto;}

/* 絞り込み検索 */
/* -------------------------------------------------- */
#refine-bg{background-color:#ca0814;text-align:center;}
#refine{max-width:1200px;margin:0 auto;}

.refine-parents{background-color:#ca0814;}
.refine-parents h2{color:#FFF;font-size:34px;text-align:center;line-height:1.7em;margin:0;padding-top:8px;}

#refine-slider{position:relative;margin-top:4px;height:54px;}
#refine-scroller{position:absolute;left:0;width:100%;top:0;height:100%;}
#refine-scroller .ps-scrollbar-x-rail{height:0;}
#refine-scroller .ps-scrollbar-x{height:0;}

.controller{position:absolute;top:0;margin-top:0px;width:60px;transition: all 0.5s ease 0s;background-repeat:no-repeat;background-position:center center;background-size:auto 80%;}
.controller:after{content:'';display:block;width:100%;padding-top:54px;}

#controllerLeft{left:0;background-image:url(../img/technology/controllerLeft.png);}
#controllerRight{right:0;background-image:url(../img/technology/controllerRight.png);}

#refine-slider.limitLeft #controllerLeft,
#refine-slider.limitRight #controllerRight{width:0;}

.refine-parents ul{margin:0;padding:0;white-space:nowrap;}
.refine-parents ul:after{content:'';display:block;clear:both;}
.refine-parents li{list-style:none;white-space:nowrap;background-color:#FFF;padding:0;margin:0 0 0 7px;display:inline-block;text-align:center;border-radius:10px 10px 0 0;overflow:hidden;vertical-align:bottom;}
.refine-parents li.opend,
.refine-parents li.selected,
.refine-parents li.hover{background-color:#dedede;}
.refine-parents li:first-child{margin-left:23px;}
.refine-parents li:last-child{margin-right:30px;}
.refine-parents li a{color:#ca0814;font-size:18px;line-height:42px;padding:0 21px 12px;display:block;position:relative;text-decoration:none;}
.refine-parents li a:hover{text-decoration:none;}
.refine-parents li a span{font-size:13px;line-height:2em;position:absolute;left:0;width:100%;bottom:0;}

.refine-open{background:url(../img/technology/refine-arrow.png) no-repeat center bottom;background-size:auto 33%;}
.refine-open:after{content:'';display:block;position:absolute;left:0;width:100%;bottom:0;height:0;background:url(../img/technology/refine-close.png) no-repeat center bottom;background-size:auto 33%;}

#refine-child-bg{background-color:#dedede;text-align:center;}
.refine-child{max-width:1200px;margin:0 auto;background-color:#dedede;}

.refine-tag{padding:28px 0 0 25px;margin:0;}
.refine-tag li{border:1px solid #ca0814;border-radius:5px;background-color:#FFF;list-style:none;margin:0 9px 9px 0;padding:10px;display:block;float:left;}
.refine-tag li.selected,
.refine-tag li.hover{background-color:#ca0814;}
.refine-tag li.selected a,
.refine-tag li.hover a{color:#FFF;}
.refine-tag li a{color:#ca0814;display:inline-block;font-size:18px;line-height:1.16em;white-space:nowrap;text-decoration:none;}
.refine-tag li a:hover{text-decoration:none;}
.refine-tag li a span{font-size:13px;margin-left:5px;}

.opend .refine-open:after{height:100%;}

.refine-result{padding:17px 25px;margin:0;clear:both;text-align:left;}
.refine-result:after{content:'';display:block;width:100%;clear:both;}
.refine-result dt{color:#000;font-size:16px;line-height:1.2em;float:left;margin:0 10px 0 0;padding:0;}
.refine-result dd{color:#000;font-size:16px;line-height:1.2em;float:left;padding:0;margin:0 0 0 10px;}
.refine-result dd:before{content:'>';display:inline-block;margin-right:10px;}
.refine-result dt+dd{margin-left:0;}
.refine-result dt+dd:before{content:'';margin-right:0;}
.refine-result span{margin-left:5px;}

.inner a:link,
.inner a:visited{text-decoration:underline;}
.inner a:hover{text-decoration:none;}

.contentFluid a:link,
.contentFluid a:visited{text-decoration:underline;}
.contentFluid a:hover{text-decoration:none;}

/* suggest
-------------------------------------------------- */
#suggest {
	margin-top:2em;
}
#suggest .section {
	max-width:1332px;
	padding-bottom: 79px;
}
#suggest h3 {
	color:#cc0000;
	font-size:32px;
	font-weight:bold;
	line-height:46px;
	text-align:center;
	margin-bottom:33px;
}

.suggest-layout{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	width:100%;
	margin:0 auto;
}

.suggest-layout:after{
	content:'';
	display:block;
	clear:both;
}

.suggest-box{
	width:28.229%;
	float:left;
	margin-left:3.829%;
	background-color:#eeeeee;
}

.suggest-box a{
	display:block;
	position:relative;
	font-size:20px;
	height:100%;
}

.suggest-box a:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0.25em solid #cc0000;
	opacity:0;
	transition:all .5s;
	z-index:2;
}

.suggest-box a:link{
	text-decoration:none;
}

.suggest-box a:hover:before{
	opacity:1;
}

.suggest-box p{
	margin:0;
	color:#000000;
	font-weight:normal;
	text-align:left;
	position:relative;
	z-index:1;
}

.suggest-box p.suggest-image{
	position:relative;
	margin-bottom:2.66%;
}

.suggest-box p.suggest-image:before{
	content:'';
	display:block;
	position:relative;
	padding-top:66.49%;
	z-index:1;
}

.suggest-box p.suggest-image img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:2;
}

.suggest-box p.suggest-title{
	margin:0 6.649% 2.66%;
	font-size:1.1875rem;
	font-weight:bold;
	line-height:1.734em;
	min-height:3.467em;
}

.suggest-box p.suggest-text{
	font-size:1.0625rem;
	line-height:1.77em;
	margin:0 6.649%;
	margin-bottom:2.66%;
	min-height:7.08em;
}

.suggest-box p.suggest-title2{
	margin:0 6.649% 2.66%;
	font-size:1.7875rem;
	font-weight:bold;
	line-height:1.734em;
	min-height:3.467em;
}

.suggest-box p.suggest-text2{
	font-size:1.4625rem;
	line-height:1.77em;
	margin:0 6.649%;
	margin-bottom:2.66%;
	min-height:7.08em;
}










.suggest-box p.suggest-category{
	font-size:13px;
	line-height:1.693em;
	width:100%;
	position:static;
	padding-top:0.55em;	
	padding-left:6.649%;
	padding-bottom:4em;
}
.suggest-box p.suggest-category span{
	display:inline-block;
	margin-right:18px;
}
.suggest-box p.suggest-category span:last-child{
	margin-right:0;
}

.suggest-box p.suggest-date{
	margin:0 auto;
	margin-right:0;
	padding:0 0 5.852%;
	padding-right:5.852%;
	width:36.171%;
	font-size:14px;
	line-height:1.572em;
	min-height:5.286em;
	text-align:right;
}
.suggest-box p.suggest-date{
	width:auto;
	min-height:0;
	position:absolute;
	bottom:0;
	right:0;
}

/* pager
-------------------------------------------------- */
#pager .section {
	padding-bottom: 111px;
}
#pager h3 {
	color:#cc0000;
	font-size:32px;
	font-weight:bold;
	line-height:46px;
	text-align:center;
	margin:0 auto 32px;
}

.pager-layout{
	width:720px;
	margin:0 auto;
}

.pager-layout:after{
	content:'';
	display:block;
	clear:both;
}

.pager-layout p{
	width:300px;
	float:left;
	margin-left:40px;
	font-size:16px;
	font-weight:normal;
	line-height:23px;
	text-align:center;
}

.pager-layout p:first-child{
	float:right;
	margin-left:0;
	margin-right:40px;
}

.pager-layout p a{
	display:block;
	color:#333333;
	border:2px solid #b9b9b9;
	padding:20px 0;
	text-decoration:underline;
}

.pager-layout p a:hover{
	text-decoration:none;
}

.link-line:hover{text-decoration:none;}
a:hover img{opacity:.5;}
.suggest-box a:hover{opacity:1;}
.suggest-box a:hover img{opacity:1;}
#pager a:hover{opacity:1;}

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

#mHeader__header .mHeader__langSwicher-wrapper{line-height:1.15;}

@media (max-width: 1332px) {

.suggest-box p.suggest-title{
	font-size:1.426vw;
}

.suggest-box p.suggest-text{
	font-size:1.276vw;
}
.suggest-box p.suggest-category{
	font-size:0.976vw;
}

.suggest-box p.suggest-date{
	font-size:1.051vw;
}

}

@media(max-width:767px){

.inner a:hover{text-decoration:underline;}

/* suggest
-------------------------------------------------- */
#suggest .section {
	padding-bottom: 11.2%;
}
#suggest h3 {
	font-size:4.267vw;
	line-height:1.4375em;
	margin-bottom:4.4%;
}

.suggest-layout{
	width:80%;
}

.suggest-box{
	width:100%;
	float:none;
	margin-left:0;
	display:none;
}

.suggest-box:nth-child(1){
	display:block;
}

.suggest-box a:before{
	width:0;
	height:0;
	border-width:0;
	transition:all 0;
}

.suggest-box a:hover:before{
	opacity:0;
}

.suggest-box p.suggest-image{
	margin-bottom:5.334%;
}

.suggest-box p.suggest-image:before{
	padding-top:66.667%;
}

.suggest-box p.suggest-title{
	margin:0 5.667% 5.334%;
	font-size:3.467vw;
	line-height:1.5384em;
	min-height:0;
}

.suggest-box p.suggest-text,
.suggest-box p.suggest-category{
	font-size:3.467vw;
	padding-top:2.667vw;
}
.suggest-box p.suggest-text{
	margin:0 5.667%;
	line-height:1.5384em;
	padding-bottom:4.5%;
}

.suggest-box p.suggest-category{
	padding-left:5.667%;
	line-height:1.3464em;
}
.suggest-box p.suggest-category span{
	margin-right:0.8em;
}

.suggest-box p.suggest-date{
	padding-right:5.667%;
	padding-bottom:5.667%;
	width:40.667%;
	font-size:3.2vw;
	line-height:1.417em;
}

/* pager
-------------------------------------------------- */
#pager .section {
	padding-bottom: 30.934%;
}
#pager h3 {
	font-size:4.267vw;
	line-height:1.4375em;
	margin-bottom:4.4%;
}

.pager-layout{
	width:93.068%;
}

.pager-layout p{
	width:44.843%;
	margin-left:3.439%;
	font-size:3.467vw;
	line-height:1.6154em;
}

.pager-layout p:first-child{
	margin-left:0;
	margin-right:3.439%;
}

.pager-layout p a{
	color:#000000;
	border:0.077em solid #979797;
	padding:0.885em 0;
}

.pager-layout p a:hover{
	text-decoration:underline;
}

	#feedback .section {
		padding: 5.3333vw 0;
	}
	#feedback #flow_area .underline {
		font-size: 3vw;
	}
	#flow_area p {
		padding-top: 0;
	}
	#feedback #flow_area .small-text {
		margin-top: 0;
		padding: 0;
		font-size: 2.8vw;
	}
	#feedback #flow_area .btns a {
		margin: 0;
		font-size: 2.8vw;
	}

}

@media(max-width:500px){

.refine-parents h2{font-size:4vw;padding-top:0;}
#refine-slider{margin-top:0;height:38px;overflow:hidden;}
#refine-slider:after{content:'';display:block;padding-top:38px;}

.controller{margin-top:0;width:38px;}
.controller:after{padding-top:38px;}
	
.refine-parents li{margin:0 0 0 0.2em;}
.refine-parents li:first-child{margin-left:0.8em;}
.refine-parents li:last-child{margin-right:1em;}
.refine-parents li a{font-size:3.5vw;line-height:20px;padding:0 1.1em 18px;}
.refine-parents li a span{font-size:3vw;line-height:21px;}
.refine-tag{padding:1em 0 0 1em;}
.refine-tag li{margin:0 0.1em 0.1em 0;padding:0 0.5em 0.3em;}
.refine-tag li a{font-size:3.192vw;}
.refine-result{padding:5px 1em;}
.refine-result dt{font-size:3vw;}
.refine-result dd{font-size:3vw;}

}

/* -------------------------------------------------- */

/* フィードバック */
#feedback{}
#feedback #flow_area{max-width:920px;margin:0 auto;}

#feedback .btns-reason{padding:30px 10px 0;margin:0 50px 10px;text-align:center;}
#feedback .btns-reason textarea{width:100%;margin:0 0 20px;resize:vertical;}
#feedback .btns-reason a{padding:15px 20px;margin:0 10px 20px;max-width:220px;cursor:pointer;}

/* トレンド */
#trend{position:relative;z-index:3;}
#trend h2{margin:0;font-size:24px;line-height:26px;padding:38px;text-align:center;}

#trend-checker{background-color:#000;}

.trend-layout{background-color:#EEE;position:relative;overflow:hidden;}
.trend-box{background-color:#CCC;width:33.3%;position:absolute;left:0;top:0;z-index:1;}
.trend-box p{margin:0;}
.trend-box p.trend-new{position:absolute;left:2.5%;width:13.267%;top:2.5%;z-index:2;}
.trend-box p.trend-new img{width:100%;height:auto;display:block;}
.trend-box p.trend-img{position:relative;z-index:1;}
.trend-box p.trend-img img{width:100%;height:auto;display:block;}
.trend-box.trend-show{z-index:3;}

.trend-text{position:absolute;left:10px;bottom:10px;right:10px;z-index:3;background-color:#2e2e2e;}
.trend-text p{position:relative;z-index:2;color:#FFF;}

.trend-date{font-size:18px;line-height:32px;text-align:center;background-color:#5c5c5c;float:left;width:37%;}
.trend-group{font-size:18px;line-height:32px;text-align:center;background-color:#5c5c5c;float:right;width:63%;border-left:1px solid #ccc;}
.trend-title{font-size:22px;line-height:30px;padding:20px 10px 10px;text-align:center;clear:both;}
.trend-detail{font-size:21px;line-height:29px;min-height:78px;padding:10px;text-align:left;}

.trend-link{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:3;}
.trend-link a{display:block;width:100%;height:100%;}
.trend-link a span{display:none;}
.trend-link a:after{content:'';display:block;position:absolute;left:0px;width:100%;bottom:0px;height:0%;background-color:#FFF;}
.trend-link a:hover:after{height:100%;opacity:0.3;}

.trend-show .trend-link a{display:block;}

.trend-section{width:100%;position:relative;border-bottom:1px solid #a6a7ab;border-right:1px solid #a6a7ab;margin-top:0;}
.trend-section:after{content:'';display:block;width:100%;height:0px;clear:both;}

h2#trend-category{position:relative;}
h2#trend-category:after{content:'';display:block;position:absolute;left:0px;bottom:0%;width:100%;height:50px;border-top:1px solid #a6a7ab;z-index:1;}
h2#trend-category span{position:relative;z-index:2;display:inline-block;line-height:26px;padding:0 10px;position:relative;}
h2#trend-category span:before{content:'';display:block;position:absolute;left:0px;bottom:0%;width:100%;height:12px;border-top:1px solid #FFF;z-index:-1;}

.trend-category{float:left;width:16.667%;background-color:#FFF;border-top:1px solid #a6a7ab;border-left:1px solid #a6a7ab;}
.trend-category h3{margin:0;color:#000;font-size:16px;font-weight:normal;line-height:70px;position:relative;font-family:'Frutiger Neue W01 Bd';}
.trend-category h3 a{display:block;color:#000;text-decoration:none;padding:0;}
.trend-category h3 a:before{content:'';position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#FFF;display:block;z-index:1;}
.trend-category h3 span{position:relative;display:block;z-index:2;padding:0;}
.trend-category h3 a:hover{color:#FFF;}
.trend-category h3 a:hover:before{background-color:#c7000b;}

.trend-category h3.double{line-height:22px;}
.trend-category h3.double span{padding:13px 0;}

.trend-category h3.trend-parents:hover{background-color:#c7000b;color:#FFF;}
.trend-category h3.trend-parents a{position:absolute;left:0px;top:0px;width:100%;height:100%;overflow:hidden;}
.trend-category h3.trend-parents a:before{height:0%;}

.trend-category h3 a.trend-open{z-index:4;}
.trend-category h3 a.trend-close{z-index:3;}
.trend-category.trend-open h3 a.trend-open{display:none;}
.trend-category.trend-open h3{background-color:#c7000b;color:#FFF;}
.trend-category.trend-active h3{background-color:#c7000b;color:#FFF;}

.trend-category.trend-active h3.trend-only a{color:#FFF;}
.trend-category.trend-active h3.trend-only a:before{background-color:#c7000b;}

.trend-toggle{position:absolute;top:100%;left:0px;width:100%;}
.trend-toggle.trend-hide{height:0px;overflow:hidden;}

.trend-toggle ul{margin:0;padding:0;position:relative;}
.trend-toggle ul:before{content:'';display:block;position:absolute;left:0px;width:100%;top:0px;height:100%;background-color:#c7000b;opacity:0.95;z-index:1;}
.trend-toggle ul:after{content:'';display:block;width:100%;height:0px;clear:both;}
.trend-toggle li{margin:0;padding:0;list-style:none;position:relative;z-index:2;float:left;width:16.667%;font-size:13px;line-height:78px;}
.trend-toggle li a{display:block;color:#FFF;text-decoration:none;}
.trend-toggle li a:before{content:'';display:inline-block;width:0;height:0;border:5px solid transparent;border-left:5px solid #FFF;}
.trend-toggle li a:after{content:'';display:block;position:absolute;left:0px;width:100%;top:0px;height:0%;background-color:#FFF;opacity:0.3;z-index:1;}
.trend-toggle li a:hover:after{height:100%;}
.trend-toggle li.trend-open a:after{height:100%;}

.trend-toggle li.double{line-height:19px;}
.trend-toggle li.double a{padding:20px 0;}

#goto-index{display:none;}
#goto-index p{margin:0 20px;}
#goto-index a{display:block;border:1px solid #CCC;position:relative;}
#goto-index a:after{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FFF;opacity:0;z-index:2;}
#goto-index img{display:block;width:100%;max-width:666px;height:auto;margin:0 auto;position:relative;z-index:1;}

@media(max-width:1199px){
	
.trend-date{font-size:1.8vw;line-height:2em;}
.trend-group{font-size:1.8vw;line-height:2em;}
.trend-title{font-size:1.8vw;line-height:1.2em;}
.trend-detail{font-size:1.75vw;line-height:1.2em;min-height:3.87em;}
	
.category-box li a{font-size:12px;}
#category-box5 li{width:20%;}

.trend-category h3{font-size:13px;}
.trend-toggle li{font-size:9px;}
.trend-toggle li a:before{border-width:3px;}

h2#trend-category{margin:0 20px;}
.trend-section{width:auto;margin:0 20px;}
	
}

@media(max-width:767px){

.content-pc{display:none;}
.content-sp{display:block;}

#techheader h1{width:100%;margin:0 auto;}
#techheader h1 a{padding:8px 0;}
#techheader h1 img{width:65.334%;height:auto;}
	
/* テクノロジーヘッダ */	
#techheader{height:auto;}
#techheader-fixed h1{padding:19px 0;}
#techheader-fixed h1 img{height:19px;width:auto;}
#techheader-fixed p a{padding:6px 0 4px;}
#techheader-fixed p a:hover{opacity:1;}
#techheader-fixed p span{font-size:15px;line-height:20px;}

#techheader.fixed.view #techheader-fixed{top:60px;}

/* カテゴリーメニュー */
#category{top:0px;padding-top:30px;}
	
#category-close a{font-size:15px;line-height:30px;padding:0;}
#category-close a:hover{opacity:1;}

.category-section h2{width:96%;font-size:15px;line-height:27px;padding-top:9px;}

.category-box{}
.category-box h3{width:96%;font-size:12px;line-height:40px;}
.category-box h3:hover{background-color:#FFF;color:#000;}
.category-box h3.category-parents a{height:100%;}
.category-box h3 a:hover{color:#000;}
.category-box h3 a.toggle-open:after{right:19px;top:12px;height:16px;}
.category-box h3 a.toggle-close:after{right:12px;top:19px;width:16px;}
	
.category-toggle.category-hide{height:0px;overflow:hidden;}
	
.category-box ul{padding:0 0 1.4% 2%;}
.category-box li{margin:1.362% 0 0;}
.category-box li a{font-size:12px;line-height:56px;}
.category-box li a:hover:after{height:0%;}
	
#category-box1 li,
#category-box2 li,
#category-box3 li,
#category-box5 li{width:48.3%;margin-right:1.362%;padding-right:0px;}

#category-section2 ul{width:100%;max-width:350px;margin:0 auto;padding:0;}
#category-section2 ul:after{height:10px;}
#category-section2 li{width:100%;padding:0 0 10px;}
#category-section2 li a{width:100%;padding:0;}

#category-section2 a:hover img{opacity:1;}

#category ul#category-pc{display:none;}
#category ul#category-sp{display:block;}
	
#feedback{padding:0 20px;line-height:1.5625;}
#feedback h2{font-size:17px;line-height:32px;}
#feedback h2 br{display:inline;}
#feedback p br{display:inline;}
#feedback .btns-reason{margin:25px 0;padding:0;display:block;}
#feedback #flow_area .btns_reason a{margin:20px 0px 0;}

#trend .section{padding-bottom:20px;}
#trend h2{padding:18px;}
#trend h2:after{height:29px;}
#trend h2 span{line-height:24px;}
#trend h2 span:before{height:10px;}
	
#trend h2#trend-category{margin-top:20px;}
	
.trend-box{width:49.999%;}

.trend-text{left:5px;bottom:5px;right:5px;}
.trend-date{font-size:2.6vw;line-height:1.6em;}
.trend-group{font-size:2.6vw;line-height:1.6em;}
.trend-title{font-size:10px;line-height:15px;padding:5px 5px 0px;}
.trend-detail{font-size:10px;line-height:15px;min-height:44px;padding:5px;}
.trend-link a:hover:after{height:0%;}
	
.trend-section{width:auto;margin:0 20px;}
.trend-category{width:49.99%;position:relative;z-index:1;}
.trend-category.trend-open{z-index:2;}
.trend-category h3 a:hover{color:#000;}
.trend-category h3 a:before{height:0%;}
.trend-category h3 a:hover:before{background-color:#FFF;}
.trend-category h3.trend-parents:hover{background-color:#FFF;color:#000;}
.trend-category.trend-open h3.trend-parents:hover{background-color:#c7000b;color:#FFF;}

.trend-toggle{width:200%;}
.trend-toggle li{width:49.99%;line-height:56px;font-size:12px;}
.trend-toggle li a:hover:after{height:0%;}
	
	
.trend-toggle li.double{line-height:18px;}
.trend-toggle li.double a{padding:10px 0;}

#trend-category1 .trend-toggle{left:-100%;}
#trend-category3 .trend-toggle{left:-100%;}
#trend-category5 .trend-toggle{left:-100%;}

#goto-index{display:block;}
#goto-index .section{padding-bottom:0;}

}



#grid {
  display: grid;
  padding: 15px;
  height: 100px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}


/* 上付き文字設定
-------------------------------------------------- */
span-sup{
  color: black;             /* 文字色を黒にする */
  font-size: 0.5em;       /* 文字サイズを半分にする */
  vertical-align: super;  /* 上付き文字にする */
}

/* 上付き文字設定
-------------------------------------------------- */
span-sup2{
  color: red;             /* 文字色をに赤にする */
  font-size: 0.5em;       /* 文字サイズを半分にする */
  vertical-align: super;  /* 上付き文字にする */
}