@charset "UTF-8";

/*----------------------------------------------------
	topNews

上段ニュース欄
----------------------------------------------------*/
.topNews {
	width:100%; 
	padding:1rem;
	font-weight:normal;
	text-align:left;
	background-color:#eeeeee;
}
.topNews p {
	margin-bottom:1rem;
	font-size:100%;
}
.topNews p:last-child {
	margin-bottom:0;
}
/*----------------------------------------------------
	brandVisual

上段ブランドビジュアル
----------------------------------------------------*/
.brandVisual {
	width:100%;
	margin: 2rem 0 0 0;
	display:flex;
	flex-wrap: wrap;
}
.brandVisual-unit {
	width:100%;
	margin-bottom:1em;
}
.brandVisual-unit img {
	width:100%;
}
/*----------------------------------------------------
	newsTopics

中段ニュース欄
----------------------------------------------------*/
.newsTopics {
	width: 100%;
	margin-top:2rem;
	margin-bottom:2rem;
}
.newsTopics dl {
	padding: 2rem 1rem;
	background-color: #eeeeee;
}
.newsTopics dt {
	padding-left:1rem;
	padding-bottom: 1rem;
}
.newsTopics dd {
	padding-left:10px;
	margin-bottom:1rem;
}
.newsTopics dd:last-child {
	margin-bottom:0;
}
.newsBadge {
	padding:0.1rem 0.5rem 0.1rem 0.5rem;
	background-color:#1d4d93;
	color:#ffffff;
	font-weight:bold;
}
/*----------------------------------------------------
	brandLogo

中段ブランドロゴ
----------------------------------------------------*/
.brandLogo {
	width:100%;
	margin: 2rem 0.5rem 2rem 0.5rem;
}
.brandLogo h2 {
	font-size: 120%;
	margin-bottom: 0.7em;
	text-align: left;
}
.brandLogo ul {
	width:100%;
}
.brandLogo ul li {
	text-align: left;
	vertical-align: top;
	display: inline-block;
	width:48%;
	margin-right:1%;
	margin-bottom:2%;
}
.brandLogo ul li:last-child {
	margin-right:0;
}
.brandLogo li a {
	display: block;
	border: 1px solid #cccccc;
	padding: 1.5em 1.5em;
	margin-bottom:0.7em;
}
.brandLogo li p {
	display: block;
	text-align: center;
	font-size:90%;
	margin-bottom: 1em;
}
.brandLogo img {
	width: 100%;
}
/*----------------------------------------------------
	brandPage

中段ブランドページバナー
----------------------------------------------------*/
.brandPage {
	width:100%;
	margin: 2rem 0.5rem 2rem 0.5rem;
}
.brandPage h2 {
	font-size: 120%;
	margin-bottom: 0.7em;
	text-align: left;
}
.brandPage ul {
	width:100%;
}
.brandPage ul li {
	text-align: left;
	vertical-align: top;
	display: inline-block;
	width:48%;
	margin-right:1%;
	margin-bottom:2%;
}
.brandPage ul li:last-child {
	margin-right:0;
}
.brandPage li a {
	display: block;
	padding: 0;
	margin-bottom:0.7em;
}
.brandPage li p {
	display: block;
	text-align: left;
	font-size:90%;
	margin-bottom: 1em;
}
.brandPage img {
	width: 100%;
}
/*----------------------------------------------------
	stylingMovie

中段ムービー
----------------------------------------------------*/

.stylingMovie {
	width:100%;
	background-color:#ffffff;
	padding:0;
	margin:2.5em 0 2em 0;
}
.stylingMovie h2 {
	text-align:center;
	position:relative;
	margin-bottom:1.5em;
}
.stylingMovie h2 span {
	position:relative;
	z-index:5;
	display:inline-block;
	padding:0 10px;
	font-size:1.6rem;
	background:#ffffff;
}
.stylingMovie h2::after, .stylingMovie h2::before {
	position:absolute;
	top:50%;
	z-index:0;
	width:50%;
	height:1px;
	content:"";
	background:#000;
}
.stylingMovie h2::before {
	left:0;
}
.stylingMovie h2::after {
	right:0;
}

/*----------------------------------------------------
	lowerareabanner

下段バナーエリア
----------------------------------------------------*/
.lowerareabanner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left:0.5em;
	padding-right:0.5em;
	margin-top:2em;
}
.lowerareabanner .banner-unit {
	width: 49%;
	margin-bottom:1em;
}
.lowerareabanner .banner-unit img {
	width: 100%;
	margin-bottom:1rem;
}
.lowerareabanner .banner-unit p {
	font-size: 100%;
}
/*----------------------------------------------------
	lowerareaicon

下段アイコンエリア
----------------------------------------------------*/
.lowerareaicon {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left:0.5em;
	padding-right:0.5em;
	margin-top:2em;
	margin-bottom:6em;
}
.lowerareaicon .icon-unit {
	width: 49%;
	margin-bottom:1em;
}
.lowerareaicon .icon-unit img {
	width: 100%;
	margin-bottom:1rem;
}
.lowerareaicon .icon-unit p {
	text-align:center;
	font-size: 100%;
}
.lowerareaicon .icon-unit p span {
	font-size: 130%;
	font-weight: bold;
}
.brPc {
	display: none;
}
.brSp {
	display: bolck;
}

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

/*----------------------------------------------------
	topNews

上段ニュース欄
----------------------------------------------------*/
.topNews {
	padding:1rem 0 1rem 0;
	text-align:center;
	background-color:#ffffff;
}
.topNews p {
	font-size:120%;
}
/*----------------------------------------------------
	brandVisual

上段ブランドビジュアル
----------------------------------------------------*/
.brandVisual {
	width:100%;
	max-width:1190px;
	margin: 2rem auto 2rem auto;
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.brandVisual-unit {
	width:49%;
}
.brandVisual-unit img {
	width:100%;
}

/*----------------------------------------------------
	newsTopics

中段ニュース欄
----------------------------------------------------*/
.newsTopics {
/*	margin-top:3rem; */
	margin-bottom:35px;
}
.newsTopics dl {
	padding: 2rem 0;
}
.newsTopics dt {
	clear: left;
	float: left;
	width: 9%;
	padding-left:2rem;
	padding-bottom: 0;
}
.newsTopics dd {
	margin-left: 10%;
}
/*----------------------------------------------------
	brandLogo

中段ブランドロゴ
----------------------------------------------------*/
.brandLogo {
	width:100%;
	max-width:1190px;
}
.brandLogo h2 {
	font-size: 140%;
	margin-bottom: 1em;
}
.brandLogo ul li {
	width:20%;
	margin-right:0.8%;
	margin-bottom:0.8%;
}
.brandLogo li p {
	font-size:100%;
}
/*----------------------------------------------------
	brandPage

中段ブランドページバナー
----------------------------------------------------*/
.brandPage {
	width:100%;
	max-width:1190px;
}
.brandPage h2 {
	font-size: 140%;
	margin-bottom: 1em;
	padding:0;
}
.brandPage ul li {
	width:24%;
	margin-right:1%;
	margin-bottom:1%;
}
.brandPage li p {
	font-size:100%;
}
/*----------------------------------------------------
	stylingMovie

中段ムービー
----------------------------------------------------*/
.stylingMovie {
	width:994px;
	background-color:#ffffff;
	padding:0;
	margin:2em 0 2.5em 0;
}
.stylingMovie h2 {
	text-align: left;
	margin:0 0 20px 0;
	padding:0;
}
.stylingMovie h2 span {
	font-size:140%;
	padding:0;
}
.stylingMovie h2::before {
	content: none;
}
.stylingMovie h2::after {
	content: none;
}

/*----------------------------------------------------
	lowerareabanner

下段バナーエリア
----------------------------------------------------*/
.lowerareabanner {
	width: 100%;
	max-width:1190px;
	margin-left:auto;
	margin-right:auto;
}
.lowerareabanner .banner-unit {
	width: 24.2%;
	margin-bottom:1em;
}
.lowerareabanner .banner-unit img {
	width: 100%;
	margin-bottom:1rem;
}
.lowerareabanner .banner-unit p {
	font-size: 100%;
}
/* 4カラムで最後の行を左寄せにする */
.lowerareabanner::before{
  content:"";
  display: block;
  width:24.2%;
  order:1;
}
.lowerareabanner::after{
  content:"";
  display: block;
  width:24.2%;
}
/*----------------------------------------------------
	lowerareaicon

下段アイコンエリア
----------------------------------------------------*/
.lowerareaicon {
	width: 100%;
	max-width:1190px;
	margin-left:auto;
	margin-right:auto;
}
.lowerareaicon .icon-unit {
	width: 24.2%;
	margin-bottom:1em;
}
.lowerareaicon .icon-unit img {
	width: 100%;
	margin-bottom:1rem;
}
.lowerareaicon .icon-unit p {
	font-size: 100%;
}
.brPc {
	display: block;
}
.brSp {
	display: none;
}
/* 4カラムで最後の行を左寄せにする */
.lowerareaicon::before{
  content:"";
  display: block;
  width:24.2%;
  order:1;
}
.lowerareaicon::after{
  content:"";
  display: block;
  width:24.2%;
}
}