@charset "utf-8";
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-color: transparent;
	background-attachment: scroll;
}


@font-face {
	font-family: myHiragino;
	src: local("Hiragino Kaku Gothic Pro"),
		local("Hiragino Kaku Gothic ProN"),
		local("HiraKakuProN-W3");
	font-weight: normal;
}
@font-face {
	font-family: myHiragino;
	src: local("HiraKakuPro-W6"),
		local("HiraKakuProN-W6");
	font-weight: bold;
}

body, option, select {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}




body {
	position: relative;
	width: 100%;
	background-color: #fff;
	font-size: 16px;
	color: #000;
	line-height: 1.5;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	letter-spacing: 1.6px;
}

img {
	max-width: 100%;
	vertical-align: top;
}
.txtRight {
	text-align: right;
}
.txtCenter {
	text-align: center;
}

/* Edge, IE */
@supports (-ms-ime-align:auto) {
	p {
		text-align: left;
	}
}
@media all and (-ms-high-contrast: none) {
	p {
		text-align: left;
	}
}




@media screen and (mix-width:641px) {
	html, body {
		font-size: 24px;
	}
}
@media screen and (max-width:640px) {
	html, body {
		font-size: 14px;
	}
}



@media screen and (min-width:641px) {
	.pc {
		display: block !important;
	}
	.sp {
		display: none !important;
	}
	.pc.inline {
		display: inline !important;
	}
}
@media screen and (max-width:640px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	.sp.inline {
		display: inline !important;
	}
}


a {
	display: inline-block;
	transition: .1s all ease-out;
	color: #000;
}
a:link, a:visited {
	text-decoration: none;
}

a:link, a:visited {
}

a:active, a:hover {
	text-decoration: none;
}

a {
	transition: color .3s ease;
}
a:hover {
	color: #eb0a1e !important;
}



/*
 toyota red
 #EB0A1E
*/

#gHeader {
	letter-spacing: 1px;
}
#gHeadContent .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
#gHeader h1 {
	font-size: 1rem;
	color: #eb0a1e;
	text-align: center;
	line-height: 0;
}
#gHeader h1 img {
	width: 200px;
	vertical-align: middle;
}
#gHeader .searchBox,
#gHeader #menuBox {
	width: 30%;
}
#gHeader #menuBox {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.searchBox {
}
.searchBox input {
	-webkit-appearance: none;
	width: 15em;
	padding: .5em .7em .5em 2.5em;
	font-size: 1rem;
	border: none;
	border-radius: 2em;
	color: #666;
	background: #efefef url(/assets/image/icon_search.svg) no-repeat scroll 1em center / auto 50%;
}
.searchBox input::placeholder {
	color: #58595B;
}
.langBtn {
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 1em;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1;
}
.langBtn > * {
	display: block;
	padding: .1em .8em;
}
.langBtn > * + * {
	border-left: 1px solid #000000;
}
.langBtn > span {
	color: #EB0A1E;
}
.langBtn > a {
	color: #BCBCBC;
}
.menuBtn {
	display: inline-block;
	z-index: 15;
}
.menuBtn a {
	display: block;
}
.menuBtn span {
	display: block;
	width: 100%;
	margin: .45rem 0;
	height: 4px;
	background-color: #000;
	transition: all .3s ease-out;
}
.menuOpen .menuBtn span {
	opacity: 0;
}
.menuOpen .menuBtn span:first-child {
	transform-origin: center center;
	transform: translate3d(.3rem, .72rem, 0) rotate(45deg);
	opacity: 1;
}
.menuOpen .menuBtn span:last-child {
	transform-origin: center center;
	transform: translate3d(.3rem, -.72rem, 0) rotate(-45deg);
	opacity: 1;
}


#gHeader #gNavi {
	position: absolute;
	width: 100%;
	background-color: #EB0A1E;
	z-index: 8;
}
#gHeader #gNavi.fixed {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
}
#gHeader::after {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: calc(3.4em - 1px);
	font-size: .9em;
}
#gHeader #gNavi .wrapper {
}
#gHeader #gNavi .wrapper .scrollWrap {
	position: relative;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
}
#gHeader #gNavi .scrollWrap::-webkit-scrollbar {
	display: none;
}
#gHeader #gNavi ul.cateMenu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 100%;
	font-size: .9rem;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}
#gHeader #gNavi ul.cateMenu li {
	flex: 1;
}
#gHeader #gNavi ul.cateMenu li:first-child {
	flex: .7;
}
#gHeader #gNavi .cateMenu a {
	position: relative;
	display: block;
	padding: 1.2em 2em;
	color: #fff;
	font-weight: bold;
}
#gHeader #gNavi .cateMenu a.this {
	background-color: #909090;
	text-decoration: none;
	transition: background-color .5s ease;
}
#gHeader #gNavi .cateMenu a.this.hidden {
	background-color: unset;
}
#gHeader #gNavi .cateMenu a:hover {
	color: #fff !important;
}
#gHeader #gNavi .cateMenu a .text {
	position: relative;
	display: inline-block;
}
#gHeader #gNavi .cateMenu a:not(.this) .text .line {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	line-height: 0;
}
#gHeader #gNavi .cateMenu a:not(.this) .text .line::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 2px;
	background-color: #FFF;
	transition: width .2s ease-out;

}
#gHeader #gNavi .cateMenu a:hover .text .line::after {
	width: 100%;
}

a .icon {
	display: inline-flex;
	align-items: center;
}
a .icon::after {
	content: "";
	display: block;
	width: 1.1em;
	height: 1.1em;
	margin-left: .7em;
}
a .icon.typeBlank::after {
	background: transparent url(/assets/image/icon_blank.svg) no-repeat scroll center center / contain;
}



#gFooter {
	background-color: #F5F4F5;
	font-size: 1rem;
}
#gFooter .links {
}
#gFooter .links .linksBody {
	position: relative;
	display: flex;
	align-items: stretch;
}
#gFooter .links .linksBody .logo {
	display: flex;
	align-items: center;
}
#gFooter .links .linksBody .logo img {
	margin: 0 auto;
}
#gFooter .links .linksBody .logo a {
	display: block;
	width: 100%;
	text-align: center;
}
#gFooter .links .linksBody .relatedSites {
	width: 100%;
	margin: 3.5em 0;
}
#gFooter .links .linksBody .relatedSites header h2 {
	line-height: 1;
}
#gFooter .links .linksBody .relatedSites nav {
	margin-top: .5em;
	line-height: 2;
}
#gFooter .links .linksBody .relatedSites nav a {
	display: block;
	white-space: nowrap;
}
#gFooter .links .linksBody .relatedSites nav .textLinks {
	display: flex;
	align-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	font-size: .875em;
}
#gFooter .links .linksBody .relatedSites .textLinks a:not(:last-child) {
	margin-right: 2em;
}

#gFooter .footerContents {
	border-top: 2px solid #fff;
}
#gFooter .footerContents .utilityBody {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1em 0;
}
#gFooter .footerContents .utilityBody .links {
	display: flex;
	justify-content: flex-start;
}
#gFooter .footerContents #utilityNavi {
	padding: 10px 0;
	font-size: .875em;
}
#gFooter .footerContents #utilityNavi a {
	display: inline-block;
	margin: 0 10px;
	color: #58595B;
}
#gFooter .footerContents #utilityNavi a.ccpa {
	margin-top: .3em;
}
#gFooter .footerContents .copyright p {
	padding: 1em 0;
	color: #000;
	font-size: .75em;
	line-height: 1;
	letter-spacing: .2px;
	text-align: right;
	color: #58595B;
}






/* SNS button */
#fixedButtons {
	display: none !important; /* hide share buttons */
	position: fixed;
	z-index: 9;
}
#sharesSNS nav a {
	display: block;
	vertical-align: top;
}
#sharesSNS nav a img {
	width: 36px;
	height: 36px;
}
#fixedButtons #scrollTop {
	background-color: rgba(0, 0, 0, .85);
}
#fixedButtons #scrollTop a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	width: 100%;
	padding: .8em 0;
	color: #fff;
}
#fixedButtons #scrollTop a .icon {
	display: block;
	width: 1.2em;
	border-top: 2px solid #979797;
	text-align: center;
	line-height: .8em;
}
#fixedButtons #scrollTop a .icon::after {
	display: inline-block;
	width: .6em;
	height: .6em;
	margin-left: 0;
	border-top: 2px solid #979797;
	border-left: 2px solid #979797;
	transform: rotate(45deg);
}
#fixedButtons #scrollTop a .text {
	display: block;
	margin-top: .2em;
	font-size: .75em;
	line-height: 1em;
	font-weight: bold;
	writing-mode: vertical-rl;
}
@media screen and (min-width: 641px) {
	#fixedButtons {
		top: 50%;
		right: 0;
		transform: translate3d(100%, 0, 0);
		transition: transform .2s ease-in;
	}
	#fixedButtons.show {
		transform: translate3d(0, 0, 0);
	}
	#fixedButtons .wrap {
		transform: translate3d(0, -50%, 0);
		width: 36px;
		margin-right: 20px;
	}
	#sharesSNS nav {
		margin-bottom: 40px;
	}
	#sharesSNS nav a {
		margin: 10px 0;
	}
	
	#fixedButtons #scrollTop {
		border-radius: 4px;
	}
	#fixedButtons #scrollTop a .text {
		width: 1em;
	}
}
@media screen and (max-width: 1280px) {
	#fixedButtons .wrap {
		margin-right: 10px;
	}
	#gFooter .footerContents .utilityBody .links {
		display: block;
	}
}
@media screen and (max-width: 640px) {
	#fixedButtons {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
	}
	#fixedButtons.show .wrap {
		transform: translate3d(0, 0, 0);
	}
	#fixedButtons .wrap {
		display: flex;
		align-items: stretch;
		height: 56px;
		/*
		height: calc(56px + 44px + env(safe-area-inset-bottom));
		padding-bottom: calc(44px + env(safe-area-inset-bottom));
		*/
		margin-right: 0;
		background-color: rgba(245, 245, 245, .9);
		transform: translate3d(0, 100%, 0);
		transition: transform .2s ease-in;
	}
	#sharesSNS {
		flex: 3;
	}
	#sharesSNS nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100%;
	}
	#sharesSNS nav a {
		text-align: center;
	}
	#scrollTop {
		flex: 1;
		display: flex;
	}
	#fixedButtons #scrollTop a {
		flex: 1;
		justify-content: center;
		padding: 0;
	}
	#fixedButtons #scrollTop a:hover {
		color: #fff !important;
	}
	#fixedButtons #scrollTop a .text {
		margin-top: .5em;
		margin-bottom: .5em;
		writing-mode: unset;
	}
}


/* =====================================================
	 mainContant */

#mainContant {
	display: block;
}


body.menuOpen,
body.modalOpen {
	overflow: hidden;
}


.arrowLink {
	font-weight: bold;
}
.arrowLink .icon {
	position: relative;
	display: inline-block;
	margin-left: 1em;
	width: 30px;
	height: 2px;
	background-color: #eb0a1e;
	vertical-align: middle;
}
.arrowLink .icon::after {
	content: "";
	position: absolute;
	top:0;
	right: 0;
	display: block;
	width: 10px;
	height: 2px;
	margin-left: 0;
	background-color: #eb0a1e;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
span.arrowLink .icon {
	margin-left: 0;
	margin-right: 1em;
}
.arrowLink .icon.typeLess {
	width: .5em;
	height: 1px;
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.arrowLink .icon.typeLess::after {
	width: .5em;
	height: 1px;
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}


.modalWindow {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
}
.modalWindow .wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.modalWindow .wrapper .contents {
	position: relative;
	overflow: auto;
}
.modalWindow .wrapper a.close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 30px;
	height: 30px;
}
.modalWindow .wrapper a.close::before,
.modalWindow .wrapper a.close::after {
	content: "";
	position: absolute;
	top: 50%;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 2px;
}
.modalWindow .wrapper a.close::before {
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.modalWindow .wrapper a.close::after {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.modalWindow .wrapper .contents #modalMovie {
	padding: 40px 0; 
}

.modalWindow .wrapper iframe {
	vertical-align: top;
}

.pic a.modal figure {
	max-width: 480px;
}
.modalImage {
	display: none;
}
.modalWindow .modalImage {
	display: block;
	width: 80%;
	max-width: 1280px;
	margin: 5% auto;
}
body.modalOpen {
	overflow: hidden;
}





@media screen and (max-width:767px) {
	.modalWindow .wrapper .contents #modalMovie {
		padding: 30px 0;
	}
	.modalWindow .wrapper a.close {
		width: 20px;
		height: 20px;
	}
	.modalWindow .wrapper a.close::before,
	.modalWindow .wrapper a.close::after {
		height: 2px;
	}
	#modalContent.modalWindow .wrapper .contents {
		width: 90%;
	}
}


/* =====================================================
	 modal menu */

#menuContent {
	z-index: 12;
}
#menuContent .wrapper {
	background-color: rgba(255, 255, 255, .95);
}
#menuContent .contents a {
	display: block;
}
#menuContent .contents a + a {
	margin-top: 1em;
}
#menuContent .contents .category nav a {
	font-weight: bold;
}
#menuContent .contents .category {
}
#menuContent .contents .other {
	margin-top: 2em;
	font-size: .875em;
}
#menuContent .contents .other a {
	color: #58595B;
}
#menuContent .contents .related nav {
	margin-top: 1em;
}
#menuContent .contents .related nav a::before {
	content: ">";
	display: inline-block;
	margin-right: .3em;
	color: #979797;
	
}

.followSNS {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: .7em;
	color: #58595B;
}
#menuContent .followSNS {
	margin-top: 3em;
}
.followSNS nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 5px;
}
.followSNS nav a + a {
	margin-top: 0 !important;
}
.followSNS nav a {
	margin-left: 10px;
}
.followSNS nav a img {
	width: 36px;
}
.followSNS nav a.typeFeedRss img {
	border-radius: 18px;
}

.footerContents .followSNS {
	width: 230px;
}
.footerContents .followSNS h2 {
	font-size: 12px;
}
.footerContents .followSNS nav a img {
	width: 28px;
}


#menuContent .menuBtn {
	position: absolute;
	top: 1em;
	right: 0;
}



/* =====================================================
	 sideContent */
#sideContent {
	font-size: 1rem;
}
#sideContent .wrapper {
}
#sideContent h3 {
	margin-bottom: 1em;
	font-size: 1.25em;
	letter-spacing: 1px;
}
.accessRanking {
}
.accessRanking ol {
}
.accessRanking ol li {
	padding: 1.1em 0;
}
.accessRanking ol li:nth-child(2n+1) {
	background-color: #F5F4F5;
}
.accessRanking article {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 4.5em;
}
.accessRanking article .rank {
	width: 2em;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}
.accessRanking li:nth-child(-n+3) article .rank {
	color: #EB0A1E;
}
.accessRanking article .rank + .content {
	flex: 1;
	padding-right: 1.5em;
}
/* IE */
@media all and (-ms-high-contrast: none){
	.accessRanking a {
		width: 100%;
	}
	.accessRanking article .content {
		width: 295px;
	}
}
.accessRanking article .content .title {
	margin-bottom: .2em;
	max-height: 4.1em;
	font-size: .875em;
	font-weight: bold;
	line-height: 1.3;
	overflow: hidden;
}
.accessRanking article .content .data {
	font-size: .75em;
}
.accessRanking article .content .data .category {
	padding: 0 .7em;
	background-color: #EB0A1E;
	border-radius: 1em;
	color: #fff;
	font-weight: bold;
}
.accessRanking article .content .data .category + .update {
	margin-left: 1em;
}

#sideContent .subContents {
	margin-top: 1.5em;
	padding: 1.5em;
	background-color: #F5F4F5;
}
#sideContent .subContents section + section {
	margin-top: 3em;
}
#sideContent .subContents h3 {
	padding: .6em 0;
	border-top: 1px solid #EB0A1E;
	border-bottom: 1px solid #EB0A1E;
	font-size: 1em;
	text-align: center;
	line-height: 1;
	color: #EB0A1E;
}


/* =====================================================
	 information (banner) */
.fBnr {
	margin-top: 5%;
}
.fBnr + .fBnr {
	margin-top: 3%;
}

#sideContent .subContents #information {
	font-size: 1rem;
}
#sideContent .subContents #information .fBnr {
	background-color: #FDFDFD;
	font-size: .75em;
}
.fBnr + .fBnr {
	margin-top: 1.5em;
}
.fBnr a {
	width: 100%;
	vertical-align: top;
	transition: all .3s ease-out;;
}
.fBnr a:hover {
	opacity: .6;
}
.fBnr.djmorizo {
	padding: 1em;
}
.fBnr.djmorizo figure {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fBnr.djmorizo figure > img {
	width: 47%;
}
.fBnr.djmorizo figure figcaption {
	width: 48%;
}
.fBnr.youtube {
}
.fBnr.youtube figure {
	display: flex;
	align-items: center;
}
.fBnr.youtube figure > img {
	width: 53%;
}
.fBnr.youtube figure figcaption {
	width: 47%;
	padding: 1em;
	font-weight: bold;
}
.fBnr.youtube figure figcaption img {
	margin-top: .3em;
}
.fBnr.twitter {
}
.fBnr.twitter figure {
}
.fBnr.twitter figure img {
}
.fBnr.twitter figure figcaption {
	display: flex;
	justify-content: center;
	padding: .7em 0;
	text-align: center;
	font-weight: bold;
}
.fBnr.twitter figure figcaption span {
	display: inline-block;
	width: 2em;
	margin-right: 1em;
}

.fBnr.whoisKagawa figure figcaption {
	display: none;
}
.fBnr.whoisKagawa .modalContent {
	display: none;
}

.fBnr.RSS figure {
	display: flex;
	align-items: center;
	padding: 10px;
}
.fBnr.RSS figure img {
	width: 36px;
}
.fBnr.RSS figure figcaption {
	padding-left: 10px;
}



#whoisKagawa.modalContent {
	max-width: 800px;
	margin: 0 auto;
	color: #FFF;
}
#whoisKagawa.modalContent h3 {
	margin-bottom: 1em;
	font-size: 1.5rem;
	font-weight: normal;
	text-align: center;
}
#whoisKagawa.modalContent article {
	font-size: 1.2rem;
}
#whoisKagawa.modalContent figure {
	margin-bottom: 1em;
	text-align: center;
}
@media screen and (min-width:641px) and (max-width:1280px) {
	.modalWindow .contents {
		margin: 0 5%;
	}
}



#sideContent .subContents #categoryNavi {
}
#sideContent .subContents #categoryNavi nav {
	margin-top: 1em;
}
#sideContent .subContents #categoryNavi nav a {
	display: block;
	margin-top: .7em;
	padding: 1.2em;
	background-color: #FFF;
	border-radius: 2em;
	font-size: .875em;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	letter-spacing: 1.6px;
	transition: all .3s ease-out;
}
#sideContent .subContents #categoryNavi nav a:hover {
	background-color: #909090;
	color: #fff !important;
}




@media screen and (min-width: 1281px) {
	#gHeadContent .wrapper {
		width: 1280px;
		margin: 0 auto;
		padding: 23px 80px;
	}
	#gHeader nav .wrapper {
		width: 1280px;
		margin: 0 auto;
		padding: 0 80px;
	}
	#gFooter .wrapper {
		width: 1280px;
		margin: 0 auto;
		padding: 0 80px;
	}
	.menuBtn {
		width: 48px;
	}
	#gFooter .links .linksBody .logo {
		width: 240px;
		margin-right: 50px;
	}
	#gFooter .links .linksBody .logo img {
		width: 180px;
	}
	#gFooter .links .linksBody .logo a img {
		width: 140px;
	}
	
	#mainBody {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 1280px;
		margin: 60px auto;
		padding: 0 80px;
	}
	#mainContant {
		width: 688px;
		padding-bottom: 4em;
	}
	#sideContent {
		width: 360px;
	}
	
	#modalContent.modalWindow .wrapper iframe {
		width: 854px;
		height: 480px;
	}
}

@media screen and (max-width: 1280px) {
	#gHeadContent .wrapper {
		padding: 23px 40px;
	}
	
	.menuBtn {
		width: 32px;
	}
	#gFooter {
		position: relative;
		margin-top: 10%;
	}
	#gFooter .links {
		min-width: initial;
	}
	
	#gFooter .footerContents .utilityBody {
		display: block;
		padding: 0;
	}
	
	#gHeadContent {
		position: relative;
	}
	.btnSearchOpen.sp {
		display: inline-block !important;
	}
	#gHeadContent .searchBox form {
		position: absolute;
		top: 0;
		left: 0;
		align-items: center;
		width: 0;
		height: 100%;
		background-color: #EFEFEF;
		overflow: hidden;
		transition: width .2s ease-out;
		z-index: 2;
	}
	#gHeadContent .searchBox form.searchOpen {
		width: 70%;
	}
	#gHeadContent .searchBox .box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		padding-left: 80px;
	}
	#gHeadContent .searchBox input {
		display: block;
		width: 95%;
		padding: .5em 0;
		border-radius: 0;
		background: none;
		font-size: 1.2em;
	}
	#gHeadContent .searchBox .btnSearchOpen {
		position: relative;
		z-index: 3;
	}
}

@media screen and (min-width:641px) {
	#menuContent .contents {
		display: table;
		justify-content: center;
		white-space: nowrap;
	}
	#menuContent .contents a {
		display: block;
	}
	#menuContent .contents .naviLeft,
	#menuContent .contents .naviRight {
		display: table-cell;
		width: 50%;
		padding: 0 4em;
	}
	#menuContent .contents .naviLeft {
		border-right: 1px solid #BCBCBC;
	}
	#menuContent .contents .naviRight {
		border-left: 1px solid #BCBCBC;
	}
	#menuContent .contents .naviLeft .other .ccpa {
		white-space: normal;
	}
}

@media screen and (min-width:641px) and (max-width:1280px) {
	#mainBody {
		margin-top: 40px;
	}
	#sideContent {
		margin-top: 80px;
	}
	#sideContent .wrapper {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0 40px;
	}
	#sideContent .wrapper .accessRanking {
		width: 45%;
	}
	.accessRanking article {
		height: 7em;
	}
	#sideContent .wrapper .subContents {
		width: 50%;
		margin-top: 0;
	}
	.accessRanking article .content .title {
		max-height: 5.5em;
	}
	
	#gFooter .links .linksBody {
		display: block;
		padding-top: 50px;
	}
	#gFooter .links .linksBody .logo img {
		width: 150px;
	}
	#gFooter .links .linksBody .relatedSites {
		margin: 20px 0;
		text-align: center;
	}
	#gFooter .links .linksBody .relatedSites header {
		margin-top: 30px;
	}
	#gFooter .links .linksBody .relatedSites nav .textLinks {
		justify-content: center;
		width: 600px;
		margin: 20px auto;
	}
	#gFooter .links .linksBody .relatedSites .textLinks a,
	#gFooter .links .linksBody .relatedSites .textLinks a:not(:last-child) {
		margin: 0 1em;
	}
	
	
	#gFooter .footerContents {
		padding: 20px 0;
		text-align: center;
	}
	#gFooter .footerContents .copyright p {
		margin-top: 10px;
		text-align: center;
	}
	
	.footerContents .followSNS {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	.footerContents .followSNS nav {
		margin-top: 10px;
		margin-left: 0;
		justify-content: center;
	}
	.footerContents .followSNS nav a {
		margin: 0 5px;
	}
}

@media screen and (max-width: 640px) {
	#mainBody {
		margin-top: 20px;
	}
	#sideContent {
		margin-top: 50px;
	}
	#sideContent .subContents {
		display: flex;
		flex-direction: column-reverse;
	}
	#sideContent .subContents section:not(:first-child) {
		margin: 0 0 40px 0;
	}
	#sideContent .subContents h3 {
		font-size: 16px;
	}
	#sideContent .subContents #categoryNavi nav a {
		font-size: 14px;
	}
	
	#gHeadContent .wrapper {
		padding: 15px 20px;
	}
	#gHeader h1 {
		width: 160px;
	}
	#gHeader h1 img {
		width: 100%;
	}
	#gHeader .searchBox,
	#gHeader #menuBox {
		width: 32px;
	}
	#gHeadContent .searchBox form.searchOpen {
		width: calc(100% - 72px);
	}
	#gHeadContent .searchBox .box {
		padding-left: 56px;
	}
	#gHeader::after {
		height: 3.2em;
	}
	#gHeader #gNavi ul li:last-child {
		display: flex;
		flex-wrap: nowrap;
	}
	#gHeader #gNavi ul li:last-child::after {
		content: "";
		display: block;
		width: 3em;
	}
	
	#menuBox {
		display: none;
	}
	#menuBox .langBtn {
		display: none;
	}
	#gHeader #gNavi .cateMenu a {
		padding: 1em 2em;
		font-size: 1.1111em;
	}
	#gHeader #gNavi .btnScroll {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 3em;
		height: 100%;
		background-color: rgba(0, 0, 0, .75);
	}
	#gHeader #gNavi .btnScroll::after {
		content: "";
		display: block;
		width: .8em;
		height: .8em;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: translate3d(calc(-1em + 1em / 1.4), 0, 0) rotate(45deg);
	}
	#gHeader #gNavi.viewAll ul li:last-child::after,
	#gHeader #gNavi.viewAll .btnScroll {
		display: none;
	}
	#gHeader #gNavi.viewAll ul li:last-child {
		display: block;
	}
	
	
	#gFooter {
		/*margin-bottom: 58px;*/
	}
	
	
	#gFooter .links .linksBody {
		display: block;
		align-items: initial;
		padding: 20px;
		border-width: 0;
	}
	#gFooter .links .linksBody .logo {
		display: block;
		width: 125px;
		min-height: initial;
		height: auto;
		margin-top: 30px;
	}
	
	#gFooter .links .linksBody .relatedSites {
		margin: 40px 0 0 0;
	}
	#gFooter .links .linksBody .relatedSites header h2 {
		font-size: 16px;
	}
	#gFooter .links .linksBody .relatedSites nav {
		margin-top: 30px;
	}
	#gFooter .links .linksBody .relatedSites nav a {
		margin: 15px 0;
	}
	#gFooter .links .linksBody .relatedSites nav .textLinks {
		display: block;
		margin-top: 3%;
		font-size: 14px;
	}
	#gFooter .links .linksBody .relatedSites .textLinks a:not(:first-child) {
		margin-left: 0;
	}
	
	#gFooter .footerContents .wrapper {
		padding: 10px 20px;
	}
	#gFooter .footerContents #utilityNavi {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		padding: 0;
		font-size: 14px;
	}
	#gFooter .footerContents #utilityNavi a {
		display: block;
		width: 50%;
		margin: 20px 0 0;
		text-align: left;
	}
	#gFooter .footerContents #utilityNavi a.ccpa {
		width: 100%;
		margin-top: 20px;
	}
	
	#gFooter .footerContents .copyright p {
		margin-top: 20px;
		font-size: 12px;
		text-align: left;
		line-height: 1.4em;
	}
	#gFooter .footerContents .copyright p .nowrap {
		white-space: nowrap;
	}
	
	#sideContent .subContents {
		padding: 50px 20px;
	}
	#sideContent .subContents #information .fBnr {
		font-size: 12px;
	}
	
	body {
		transition: margin-left .2s ease-out;
	}
	body.menuOpen {
		margin-left: -50%;
	}
	body.menuOpen #gHeader #menuBox {
		display: none;
	}
	#modalMenu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 100%;
		width: 100%;
		transition: left .2s ease-out;
		z-index: 13;
	}
	.menuOpen #modalMenu {
		left: 0;
	}
	#modalMenu #menuContent .langBtn {
		margin-left: -.8em;
		font-size: 1.25rem;
	}
	#modalMenu #menuContent .menuBtn {
		position: absolute;
		top: 20px;;
		right: 20px;
		width: 50px;
		padding-right: 10px;
	}
	#modalMenu #menuContent .menuBtn span {
		transition: none;
	}
	#modalMenu #menuContent .menuBtn .midLine {
		opacity: 0;
	}
	#modalMenu #menuContent {
		position: relative;
	}
	#modalMenu #menuContent {
		position: relative;
		width: 100vw;
		height: 100vh;
	}
	#modalMenu #menuContent .wrapper {
		position: relative;
		justify-content: flex-start;
		padding: 40px 0;
		background-color: #fff;
	}
	#menuContent .contents {
		display: block;
		width: 100%;
		padding: 0 80px 40px 40px;
		font-size: 1.15rem;
		letter-spacing: 1px;
	}
	#menuContent .contents .naviLeft {
		margin-top: 1em;
		padding-top: 2em;
		border-top: 2px solid #979797;
	}
	#menuContent .contents .naviRight {
		margin-top: 2em;
		padding-top: 2em;
		border-top: 2px solid #979797;
	}
	#menuContent .contents a + a {
		margin-top: 1.5em;
	}
	
	#menuContent .contents .related {
		font-size: .85em;
	}
	#menuContent .contents .related nav {
		margin-top: 1.5em;
	}
	
	.followSNS {
		margin-top: 2em;
	}
	
	#mainContant.articlePage {
		margin: 20px;
	}
}




/* =====================================================
   card */

.card {
	display: flex;
}
.card a {
	position: relative;
	display: block;
	width: 100%;
}
.card a * {
	pointer-events: none;
}
.card figure {
	position: relative;
}
.card .movie figure::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left; 0;
	width: 100%;
	height: 100%;
	background: transparent url(/image/btn_play.png) no-repeat scroll center center/ 10% auto;
	z-index: 3;
}

.card .text {
		font-size: 1rem;
		padding-bottom: 1.8em;
}
.card .text .title {
	max-height: 3.1em;
	margin-top: -.25em;
	font-size: 1.125em;
	font-weight: bold;
	overflow: hidden;
}
.card .text .lead {
	max-height: 4.7em;
	margin-top: .7em;
	font-size: .875em;
	overflow: hidden;
	}
	.card .text .data {
		position: absolute;
		bottom: 0;
		width: 100%;
}
.card .text .data .update {
	line-height: 1.2;
}
.card .text .data .arrowLink {
	margin-left: auto;
	white-space: nowrap;
}

.card.landscape {
	
}
.card.landscape + .card.landscape {
	margin-top: 2em;
}
.card.landscape a {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.card.landscape figure {
	width: 33.3%;
}
.card.landscape .text {
	position: relative;
	width: 62%;
}



.card a figure {
	position: relative;
	vertical-align: top;
	overflow: hidden;
}
.card a figure::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #212121;
	opacity: 0;
	transition: opacity .3s ease;
}
.card a:hover figure::after {
	opacity: .3;
}

.card .data {
	display: flex;
	align-items: center;
	font-size: .75em;
}
.card .data > * {
	display: block;
}
.card .data .update {
	color: #58595B;
	transition: color .3s ease;
}
a:hover .data .update {
	color: #eb0a1e !important;
}


@media screen and (min-width:641px) {
	.cardList.cell2,
	.cardList.cell3 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.cardList.cell2 .card.portrait {
		width: 47%;
	}
	.cardList.cell3 .card.portrait {
		width: 31%;
	}
	.cardList .card.portrait .text .title {
		max-height: 4.6em;
	}
	.cardList .card.portrait .text .lead {
	}
	.cardList.cell2 .card.portrait a {
		position: relative;
	}
	.cardList.cell2 .card.portrait .lead {
		margin-top: .5em;
	}
}
@media screen and (max-width:640px) {
	.cardList.cell2 .card +  .card {
		margin-top: 1.5em;
	}
	.card.landscape a {
		flex-direction : row-reverse;
	}
	.card.landscape figure {
		width: 38%;
	}
	.card.landscape .text {
		width: 55%;
	}
	.card .text {
		padding-bottom: 0;
	}
	.card .text .title {
		max-height: 2.8em;
		margin-top: -.1em;
		font-size: 16px;
		line-height: 1.3;
	}
	.card .text .lead {
		font-size: 1em;
	}
	.card .text .data {
		position: relative;
		margin-top: .3em;
	}
	.card .text .data .update {
		font-size: 11px;
	}
	.card .text .data .arrowLink {
		font-size: 12px;
	}
	
	.card.landscape .text .lead,
	.card.landscape .data .arrowLink {
		display: none;
	}
	.card.landscape .text .title {
		max-height: 4em;
	}
}



.topContent .wrapper {
	display: flex;
	justify-content: space-between;
}


.topContent header {
	width: 32%;
}
.topContent .articlePage {
	width: 68%;
}




/* =====================================================
	 category top */

.categolyTop {
}
.categolyTop header {
}
.categolyTop header h2 {
	font-size: 2em;
	line-height: 1;
	letter-spacing: 2px;
}
.categolyTop header p {
	margin-top: 1.2em;
	padding: 0.8em 0;
	border-top: 2px solid #EB0A1E;
	border-bottom: 2px solid #EB0A1E;
	font-size: .875em;
}
.categolyTop .newest {
	margin-top: 30px;
}
.categolyTop .newest .card .text {
	margin-top: 1em;
}
.categolyTop .newest .card .text .title {
	font-size: 1.25em;
}
.categolyTop .newest .card .text .lead {
	font-size: .875em;
}
.categolyTop .newest .card .text .update {
	font-size: 1.16667em;
}

.categolyTop .cardList {
	margin-top: 60px;
}
.categolyTop .cardList.cell2 {
	margin-top: 20px;
}
.categolyTop .cardList.cell2 .card.portrait {
	margin-top: 40px;
}

.categolyTop .viewMore {
	text-align: center;
}
.categolyTop .viewMore a {
	display: inline-flex;
	align-items: center;
	padding: 1em 4em;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 1px;
	transition: transform .2s ease-in;
}
.categolyTop .viewMore a.slideDown {
	transform: translate3d(0, 100%, 0);
}
.categolyTop .viewMore a .icon {
	width: 10px;
	height: 10px;
	margin-left: 1em;
	border-bottom: 1px solid #979797;
	border-right: 1px solid #979797;
	transform: rotate(45deg) translate3d(0, -30% ,0);
}


@media screen and (min-width:641px) {
	.categolyTop .cardList.cell2 .card.portrait figure {
		display: none;
	}
	.categolyTop .cardList.cell2 .card.portrait:nth-child(n+7) {
		display: none;
	}
	.categolyTop .cardList .card.portrait .text .title {
		font-size: 1em;
	}
	.categolyTop .newest .card figure {
		margin: 0 100px;
	}
	.categolyTop .viewMore {
		margin-top: 80px;
	}
	.categolyTop .viewMore a {
		padding: 1em 4em;
		font-size: .875em;
	}
}
@media screen and (max-width: 1280px) and (min-width: 641px) {
	#mainContant.categolyTop {
		margin: 40px 40px 80px 40px;
	}
	
}
@media screen and (max-width:640px) {
	#mainContant.categolyTop {
		margin: 20px 20px 40px 20px;
	}
	.categolyTop header h2 {
		text-align: center;
	}
	.categolyTop header p {
		font-size: 1em;
	}
	.categolyTop .cardList.cell2 .card.portrait:nth-child(n+3) {
		display: none;
	}
	.categolyTop .newest .card .text .lead {
		max-height: 8em;
	}
	.categolyTop .cardList.cell2 .card.portrait a {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction : row-reverse;
	}
	.categolyTop .newest .card .text .title {
		max-height: 4.5em;
	}
	.categolyTop .cardList.cell2 .card.portrait figure {
		width: 38%;
	}
	.categolyTop .cardList.cell2 .card.portrait .text {
		width: 55%;
	}
	.categolyTop .cardList.cell2 .card.portrait .text .title {
		max-height: 4em;
	}
	.categolyTop .cardList .card.portrait .text .lead, 
	.categolyTop .card.portrait .data .arrowLink {
		display: none;
	}
	
	.categolyTop .viewMore {
		margin-top: 40px;
	}
	.categolyTop .viewMore a {
		font-size: 1em;
	}
	.categolyTop .viewMore a:hover {
		color: initial !important;
	}
	
}







/* =====================================================
   article */

.articlePage {
	font-size: 1rem;
}
.articlePage header h2 {
	margin-top: .8em;
	font-size: 1.5rem;
	font-weight: bold;
}
.articlePage header .data {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: .8em;
}
.articlePage header .data span {
	display: block;
	line-height: 1;
}
.articlePage header .data span.category {
	padding: .5em 1em;
	background-color: #EB0A1E;
	border-radius: 1em;
	font-size: .88em;
	color: #fff;
}
.articlePage header .data span.update {
	margin-left: 2em;
	font-size: .75em;
	color: #58595B;
}

.articlePage #anchorTitles {
	margin-top: 3em;
}
.articlePage #anchorTitles header h3 {
	font-size: 1.5rem;
	color: #EB0A1E;
}
.articlePage #anchorTitles .anchors {
	margin-top: 1em;
	border: 2px solid #F5F4F5;
	background-color: #F5F4F5;
}
.articlePage #anchorTitles .anchors ul {
	padding: 2em 3em;
}
.articlePage #anchorTitles .anchors li {
	display: flex;
	justify-content: flex-start;
	font-size: .9em;
	font-weight: bold;
}
.articlePage #anchorTitles .anchors li + li {
	margin-top: 1em;
}
.articlePage #anchorTitles .anchors li::before {
	content: "・";
}
.articlePage #anchorTitles .anchors a {
	display: block;
	text-decoration: underline;
}



.articlePage .textBody {
	margin-top: 3em;
}
.articlePage .textBody p {
	margin: 1em 0;
}
.articlePage .textBody h3 {
	position: relative;
	margin-top: 2.5em;
	margin-bottom: 1.5em;
	padding: .7em 0 .7em 1em;
	border-left: 3px solid #EB0A1E;
	font-size: 1.25em;
}
.articlePage .textBody .txtColor01 {
	color: #eb320a;
}

.articlePage .textBody a.txtLink,
.articlePage .textBody a.modal.movie,
.articlePage .textBody a {
	text-decoration: underline;
}

.articlePage .topic {
	margin-top: 1em;
	overflow: hidden;
}
.articlePage .topic + hr {
	height: 4px;
	margin-top: 3em;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: inherit;
}
.articlePage hr + .topic {
	margin-top: 3em;
}
.articlePage .topic header {
	text-align: center;
}
.articlePage .topic section.topic +  section.topic {
	margin-top: 3em;
}
.articlePage dl {
	margin-top: 2em;
}
.articlePage dl:not(:first-child) {
	margin-top: 2em;
}
.articlePage dl dt {
	display: flex;
	margin-bottom: .5em;
	font-size: .85em;
	font-weight: bold;
}
.articlePage dl dt .prefix {
	display: block;
	margin-right: 1em;
}
.articlePage dl dt .text {
	flex: 1;
}
.articlePage dl dd {
	margin-left: 2em;
}

.articlePage dl + dl,
.articlePage dl + p,
.articlePage p + dl,
.articlePage dd + dt {
	margin-top: 3em;
}
.articlePage dl dt {
	margin-left: 1em;
	font-size: .85em;
	font-weight: bold;
	line-height: 1.4;
}
.articlePage .topic p + p {
	margin-top: 1.5em;
}
.articlePage .topic p a {
	display: inline;
}
.articlePage .pic {
	margin: 2em auto;
	text-align: center;
}
.articlePage dl dd .pic {
	margin-left: -2em;
}
.articlePage .imgFloat {
	position: relative;
	width: 50%;
	margin-bottom: .5em;
}
.articlePage .imgFloat.floatLeft {
	float: left;
	margin-right: 1.5em;
}
.articlePage .imgFloat.floatRight {
	float: right;
	margin-left: 1em;
}
.articlePage .imgFloat {
}
.articlePage .movieEmbeded {
	margin-top: 1.5em;
	text-align: center;
}
.articlePage .movieEmbeded figure {
	line-height: 1.5;
}
.articlePage .movieEmbeded figure,
.articlePage .pic figure {
	display: inline-block;
}
.articlePage .movieEmbeded figure figcaption,
.articlePage .pic figcaption {
	margin-top: .2em;
	font-size: .7em;
	text-align: left;
	line-height: 1.3;
}
.articlePage .pic figure {
	display: inline-table;
	margin: 0 auto;
	max-width: 100%;
}
/* ie11 */
@media all and (-ms-high-contrast: none) {
	.articlePage .pic figure img {
		width: 100%;
	}
}
.articlePage .pic figure figcaption {
	display: table-footer-group;
}
.articlePage figcaption .name {
	font-weight: bold;
}
.articlePage .reminiscence {
	display: block;
	max-width: 880px;
	text-align: center;
	margin: 2em  auto;
}
.articlePage .reminiscence .txtBody {
	display: block;
	padding: 1em 2em;
	background-color: rgba(0, 0, 0, .05);
	line-height: 1.8;
	text-align: left;
}
.articlePage .reminiscence header + .txtBody {
	margin-top: 0;
}
.articlePage .reminiscence .ann {
	margin-top: 0;
	font-size: .75rem;
}
.articlePage .ann {
	margin-top: 3em;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5;
}
.articlePage ul.txtIndent > li {
	margin-top: .8em;
	padding-left: 1em;
	text-indent: -1em;
}
.articlePage ul.disc li {
	margin-left: 1em;
	text-indent: 0;
	list-style-type: disc;
}
.articlePage .relationLinks {
	margin: 2em 0;
	line-height: 2.5;
	overflow: hidden;
}
.articlePage .relationLinks a {
	text-decoration: underline;
	line-height: 1.6;
}



.articlePage footer .editor {
	width: 90%;
	margin: 4em auto 0;
	padding: 1.5em;
	background-color: rgba(0, 0, 0, 0.1);
	font-size: .8rem;
}
.articlePage .editor .name {
	font-size: 1.2em;
	font-weight: bold;
}
.articlePage .editor .name + p {
	margin-top: .5em;
}

.articlePage .newsPicks.editor {
	font-size: 1rem;
	text-align: center;
	background-color: transparent;
}
.articlePage .newsPicks.editor .wrap {
	display: inline-block;
	padding: 1.5em;
	background-color: rgba(0, 0, 0, 0.1);
}
.articlePage .newsPicks.editor figure {
	display: flex;
	justify-content: start;
	align-items: center;
}
.articlePage .newsPicks.editor figcaption {
	margin-left: 2em;
	text-align: left;
	line-height: 1.5;
}
.articlePage .newsPicks.editor figcaption .title {
	color: #eb0a1e;
}
.articlePage .newsPicks.editor figcaption .name {
	font-weight: bold;
}

.txtJustify {
	display: flex;
	justify-content: space-between;
}
.txtJustify span {
	display: block;
}


.articlePage #pageNavi {
	margin-top: 4em;
}
.articlePage #pageNavi #titleLink {
}
.articlePage #pageNavi #titleLink nav {
	display: flex;
	align-items: center;
}
.articlePage #pageNavi #titleLink nav > *.prevPage {
	text-align: right;
}
.articlePage #pageNavi #titleLink .title {
	font-size: .9em;
	color: #EB0A1E;
	font-weight: bold;
}
.articlePage #pageNavi #titleLink a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 6em;
	margin-top: .5em;
	padding: 1em 2em;
	border: 1px solid #707070;
	border-radius: 5px;
	font-size: .9rem;
}
.articlePage #pageNavi #titleLink .prevPage a::before {
	content: "";
	display: block;
	width: .8em;
	height: .8em;
	margin-right: 1.3em;
	border-top: 2px solid  #EB0A1E;
	border-left: 2px solid  #EB0A1E;
	line-height: .8;
	transform: rotate(-45deg);
}
.articlePage #pageNavi #titleLink .nextPage a::after {
	content: "";
	display: block;
	width: .8em;
	height: .8em;
	margin-left: 1.3em;
	border-top: 2px solid  #EB0A1E;
	border-right: 2px solid  #EB0A1E;
	line-height: .8;
	transform: rotate(45deg);
}
.articlePage #pageNavi #titleLink a .text {
	flex: 1;
	line-height: 1.3;
	display: block;
	max-height: 3.8em;
	font-weight: bold;
	text-align: left;
}
.articlePage #pageNavi #pagingLink {
	margin-top: 40px;
}
.articlePage #pageNavi #pagingLink nav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.articlePage #pageNavi #pagingLink nav > * {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	margin: 0 1em;
	border-radius: 4px;
	line-height: 1;
}
.articlePage #pageNavi #pagingLink a {
	border: 2px solid #979797;
	font-weight: bold;
}
.articlePage #pageNavi #pagingLink a:hover {
	background-color: #979797;
	color: #fff !important;
}
.articlePage #pageNavi #pagingLink span.this {
	background-color: #58595B;
	color: #fff;
}
.articlePage #pageNavi #articleNavi {
	margin-top: 3em;
	padding: 2em;
	background-color: #F5F4F5;
	line-height: 1;
}
.articlePage #pageNavi #articleNavi nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}
.articlePage #pageNavi #articleNavi a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}
.articlePage #pageNavi #articleNavi a.prevArticle::before {
	content: "";
	display: block;
	width: .8em;
	height: .8em;
	margin-right: 1em;
	border-top: 2px solid  #EB0A1E;
	border-left: 2px solid  #EB0A1E;
	line-height: .8;
	transform: rotate(-45deg);
}
.articlePage #pageNavi #articleNavi a.nextArticle::after {
	content: "";
	display: block;
	width: .8em;
	height: .8em;
	margin-left: 1em;
	border-top: 2px solid  #EB0A1E;
	border-right: 2px solid  #EB0A1E;
	line-height: .8;
	transform: rotate(45deg);
}
.articlePage #pageNavi .hidden {
	visibility: hidden;
}




@media screen and (max-width:640px) {
	#contentFooter > .wrapper {
		width: 100%;
		padding: 0 6%;
	}
}

/* =====================================================
   feature */

#feature .articlePage .textBody + footer {
	margin-top: 6em;
}
.articlePage section.txtIndent p {
	text-indent: 1em;
}


.aphorism {
	font-feature-settings: "none";
	text-align: center;
}
.aphorism ul {
	display: inline-block;
	margin: 4em 0;
	text-align: left;
}
.aphorism ul li {
	margin: 1em 0;
}
.aphorism .pic {
	margin-right: 1em;
}




@media screen and (min-width:1281px) {
.articlePage .movieEmbeded iframe {
	width: 688px;
	height: 400px;
}
}
@media screen and (min-width:641px) {
	.articlePage #pageNavi #titleLink nav {
		justify-content: space-between;
	}
	.articlePage #pageNavi #titleLink nav > * {
		width: 47%;
	}
	
	.column .articlePage figure.right {
		float: right;
		margin: 0 0 0 2em;
		width: 50%;
	}
	.articlePage .pic figure.sideBySide img {
		max-width: 46%;
		max-height: 400px;
		vertical-align: middle;
	}
	.articlePage .pic figure.sideBySide img + img {
		margin-left: 20px;
	}
	
	.articlePage .flexLand {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
	}
	.articlePage .flexLand .pic {
		width: 37%;
		margin: 0;
	}
}
@media screen and (max-width:1280px) {
	.articlePage {
		margin: 40px;
	}
	
	.contentBody {
		padding: 7.5%;
	}
	.articlePage .textBody {
		margin-top: 8%;
	}
	.articlePage h2 {
		font-size: 2em;
	}
	.articlePage .reminiscence {
		margin: 1em auto;
		padding: 0;
	}
	.articlePage .reminiscence .txtBody {
		padding: 1.5em;
	}
	.articlePage .movieEmbeded iframe {
		width: calc(100vw * .7);
		height: calc(100vw * .7 / 16 * 9);
	}
	
	.aphorism ul {
		margin: 2em 0;
	}
	.aphorism ul li {
		padding-left: 2em;
		text-indent: -2em;
	}
	.aphorism ul li br.sp {
		display: block !important;
	}
}


@media screen and (max-width:640px) {
	.topContent {
		margin-bottom: 5%;
	}
	.topContent .wrapper {
		display: block;
		padding: 0;
	}
	.topContent .articlePage {
		width: 100%;
	}
	.topContent header {
		display: none;
	}
	
	.articlePage {
		font-size: 16px;
	}
	.articlePage header h2 {
		font-size: 18px;
		line-height: 1.4;
	}
	.articlePage header .data span.category {
		padding: .4em .8em;
		font-size: 14px;
	}
	.articlePage header .data span.update {
		margin-left: 1em;
		font-size: 12px;
	}
	
	.articlePage .textBody h3 {
		font-size: 16px;
	}
	.articlePage dl dd {
		margin-left: 1em;
	}
	.articlePage :not(.notIndent) dd figure {
		margin-left: -1em;
	}
	
	.articlePage .pic figure.sideBySide img + img {
		margin-top: 5%;
	}
	.articlePage .textBody p {
		line-height: 1.65;
	}
	
	.articlePage .relationLinks {
		font-size: 1em;
		line-height: 3.5;
	}
	.articlePage .relationLinks a {
		display: inline-block;
	}
	
	
	.articlePage dl.notIndent dd {
		margin-left: 0;
	}
	.articlePage ul.txtIndent > li {
		padding-left: 0;
		text-indent: 0;
	}
	.articlePage ul.disc li {
		margin-left: 0;
		text-indent: 0;
		list-style-type: none;
	}
	.articlePage ul.disc li::before {
		content: "・";
	}
	
	.articlePage footer .editor {
		width: 100% !important;
	}
	.articlePage .newsPicks footer .editor {
		padding: 0;
	}
	.articlePage .newsPicks footer .editor .wrap {
		padding: 5%;
	}
	.articlePage footer .editor img {
		width: 35%;
	}
	.articlePage .newsPicks footer .editor figcaption {
		margin-left: 5%;
	}
	
	.articlePage #anchorTitles header h3 {
		font-size: 22px;
	}
	.articlePage #anchorTitles .anchors {
		position: relative;
		margin-top: .5em;
	}
	.articlePage #anchorTitles .toggleBtn {
		position: absolute;
		top: -2.5em;
		right: 0;
		height: 1.4em;
		overflow: hidden;
	}
	.articlePage #anchorTitles .toggleBtn a {
		padding-right: .3em;
		text-decoration: none;
		font-size: 14px;
	}
	.articlePage #anchorTitles .toggleBtn a span {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
	}
	.articlePage #anchorTitles .toggleBtn a .open::after {
		content: "";
		display: block;
		width: .6em;
		height: .6em;
		margin-left: .5em;
		border-bottom: 1px solid  #979797;
		border-left: 1px solid  #979797;
		transform: translate3d(0, -.2em, 0) rotate(-45deg);
	}
	.articlePage #anchorTitles .toggleBtn a .close::after {
		content: "";
		display: block;
		width: .6em;
		height: .6em;
		margin-left: .5em;
		border-top: 1px solid  #979797;
		border-left: 1px solid  #979797;
		transform: translate3d(0, .2em, 0) rotate(45deg);
	}
	.articlePage #anchorTitles .toggleBtn a {
		transition: transform .3s ease-out;
	}
	.articlePage #anchorTitles .wrap {
		overflow: hidden;
	}
	.articlePage #anchorTitles .toggleBtn.close a {
		transform: translate3d(0, -1.5em, 0);
	}
	.articlePage #anchorTitles .anchors ul {
		padding: 2em 1.5em;
	}
	.articlePage #anchorTitles .anchors li {
		font-size: 14px;
	}
	.articlePage .movieEmbeded figure {
		width: 100%;
	}
	.articlePage .movieEmbeded iframe {
		width: 100%;
		height: calc((100vw - 40px) / 16 * 9);
	}
	.articlePage #pageNavi {
		margin-top: 2em;
	}
	.articlePage #pageNavi #titleLink nav {
		flex-direction: column-reverse;
	}
	.articlePage #pageNavi #titleLink a {
		font-size: 14px;
	}
	.articlePage #pageNavi #titleLink nav > div {
		margin-top: 2em;
		width: 100%;
	}
	.articlePage #pageNavi #titleLink .title {
		display: block;
		text-align: center;
	}
	.articlePage #pageNavi .hidden {
		display: none;
	}
	.articlePage #pageNavi #pagingLink nav > * {
		margin: 0 10px;
		font-size: 1.12em;
	}
	.articlePage #pageNavi #articleNavi {
		width: calc(100% + 40px);
		margin-left: -20px;
		padding: 2em 20px;
	}
	.articlePage #pageNavi #articleNavi a.prevArticle::before {
		margin-right: .5em;
	}
	.articlePage #pageNavi #articleNavi a.nextArticle::after {
		margin-left: .5em;
	}
	
	
	
	
}



/* =====================================================
	 categoryBlock */
.categoryBlock {
	margin-top: 4em;
	border-top: 2px solid #EB0A1E;
}
.categoryBlock h2 {
	margin: .7em 0;
	font-size: 1.5rem;
	font-weight: bold;
}
.categoryBlock header.title {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.categoryBlock header.title a {
	font-size: .875em;
	color: #909090;
}
.categoryBlock:not(#newArrivals) header.title h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	display: block;
	width: 1.4em;
	height: 2px;
	background-color: #EB0A1E;
}

@media screen and (min-width:641px) {
	.categoryBlock header.title {
		margin-bottom: 1.5em;
	}
}
@media screen and (max-width:1280px) {
	.categoryBlock {
		margin: 60px 40px 0;
	}
	.categoryBlock header.title {
		margin-bottom: 1em;
	}
}


/* =====================================================
   recommend */

#recommend.categoryBlock {
	margin-top: 4em;
	border-top: none;
}
#recommend.categoryBlock h2 {
}
@media screen and (max-width:1280px) {
	#recommend.categoryBlock {
		margin: 40px 0 0;
	}
}



/* =====================================================
   search result */

#result .searchBox {
	margin: 1em 0 2em;
	text-align: center;
}
#result .searchBox input {
	width: 100%;
	margin-right: 0;
	padding: 1em 1em 1em 2.5em;
	font-size: 20px;
	background-size: 20px auto;
	background-position: 30px center;
}
#result .fs-result-msg {
	margin: 2em 0;
	padding: 1em 0;
	border-top: 1px solid #979797;
	border-bottom: 1px solid #979797;
}
#result .fs-result-msg p {
	font-size: 16px;
	text-align: left;
	line-height: 1.3;
}
#result .fs-result-msg p .words {
	margin-right: .4em;
	font-size: 20px;
	font-weight: bold;
}
#result .fs-result-msg p .nowrap {
	display: inline-block;
	margin-top: 4px;
	white-space: nowrap;
}
#result .fs-result-msg p.pages {
	margin-top: 4px;
	font-size: 14px;
}
#result .fs-paginate {
	max-width: 800px;
	margin: 4em auto 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
#result .fs-paginate ul {
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 4em;
}
#result .fs-paginate ul li {
	display: table;
	margin: 0 1em;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 1;
}
#result .fs-paginate ul li a {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: .7em .5em;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
}
#result .fs-paginate ul li.fs-prev {
	position: absolute;
	left: 0;
	margin: 0;
}
#result .fs-paginate ul li.fs-current a {
	border-bottom-color: #eb0a1e;
	color: #eb0a1e;
}
#result .fs-paginate ul li.fs-next {
	position: absolute;
	right: 0;
	margin: 0;
}

#result .fs-paginate ul li.fs-prev a,
#result .fs-paginate ul li.fs-next a {
	position: relative;
	padding: .7em 0;
}
#result .fs-paginate ul li a.arrowLink .icon {
	display: block;
	margin-left: 0;
	margin-top: .2em;
}
#result .fs-paginate ul li a.arrowLink .icon {
	width: 25px;
}
#result .fs-paginate ul li.fs-prev a.arrowLink .icon {
	margin-right: .5em;
}
#result .fs-paginate ul li.fs-prev a.arrowLink .icon::after {
	right: unset;
	left: 0;
	transform-origin: left center;
	transform: rotate(-45deg);
}
#result .fs-paginate ul li.fs-next a.arrowLink .icon {
	margin-left: .5em;
}

.searchBox .cateList {
	margin-top: 2em;
}
.searchBox .cateList ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.searchBox .cateList ul li {
	display: block;
	margin: .3em;
}
.searchBox .cateList ul li a {
	display: block;
	padding: .5em 1.3em;
	border: 1px solid #58595b;
	border-radius: 2em;
	font-size: 1.05em;
	font-weight: bold;
	line-height: 1;
	color: #000;
}
.searchBox .cateList ul li.current a {
	background-color: #58595b;
	color: #fff;
}
.searchBox .cateList ul li a:hover {
	background-color: #58595b;
	color: #fff !important;
	text-decoration: none;
}


@media screen and (max-width: 1280px) and (min-width: 641px) {
	#result > .wrapper {
		padding: 0 40px;
	}
}
@media screen and (max-width:640px) {
	#result > .wrapper {
		padding: 0 20px;
	}
	#result .searchBox {
		margin-bottom: 20px;
	}
	#result .searchBox input {
		background-size: 28px auto;
		background-position: 20px center;
	}
	
	#result .fs-result-msg {
		margin: 20px 0;
		padding: 1em;
	}
	#result .fs-result-msg p.pages {
		text-align: right;
	}
	
	#result .cardList .card {
		padding: 20px 0 0;
	}
	#result .fs-paginate ul li {
		margin: 0 .2em;
	}
	.searchBox .cateList ul li a {
		padding: .6em 1.2em;
	}
}

@media all and (-ms-high-contrast:none){
	#result .fs-paginate ul li a {
		padding: .7em .5em .3em;
	}
}

#result span.fs-loading {
	display: block;
	text-align: center;
}


/* Cookies policy */
#cookiesPolicy {
	margin: 0 5%;
}
#cookiesPolicy h2 {
	margin-bottom: 1em;
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0;
}
#cookiesPolicy h3 {
	margin-top: 2em;
	margin-bottom: 1em;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing: 0;
}
#cookiesPolicy p + p,
#cookiesPolicy p + div,
#cookiesPolicy script + p {
	margin-top: 1.5em;
}
#cookiesPolicy ul.hyphen {
	list-style-type: none;
	margin: 1em 0;
}
#cookiesPolicy ul.hyphen li {
	margin: .5em 0 .5em 2em;
}
#cookiesPolicy ul.hyphen li:before {
	content: "-";
	float: left;
	text-indent: -1.2em;
}
@media screen and (min-width: 1281px) {
	#cookiesPolicy {
		margin: 0 200px;
	}
}