@charset "UTF-8";


/* Font
-------------------------------------------------------------------------------*/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
body{
	font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
body {
	background: #fff none;
}

/* Custom CSS File Overrides
-------------------------------------------------------------------------------*/
#container {
	width:100%;
	min-width:1000px;
	position:relative;
	text-align:center;
	clear: both;
}

/* Layout
-------------------------------------------------------------------------------*/
.contents {
	width:1000px;
	margin:0 auto;
	clear: both;
}

/* Story
-------------------------------------------------------------------------------*/
/* Story MainVisual */
#main_visual {
	width:100%;
	background: #a6aaad;
}

.story_box {
	background:#fff;
}
.tl_main {
	padding:50px 0 40px 0;
	color: #365A8F;
	font-size: 42px;
}
.tl_caption {
	padding-bottom:60px;
	font-size: 22px;
	line-height: 160%;
}
.tl_caption small {
	font-size: 14px;
}
.talk_box {
	width:450px;
	padding:0 20px 0 40px;
	float:left;
	text-align:left;
	font-size:17px;
	line-height:1.9;
}
.talk_box h3 {
	margin-bottom:12px;
	font-size: 25px;
	border-bottom: 1px solid #000;
	width:  100%;
	line-height: 1.5;
	position: relative;
}
.talk_box h3::after {
	position: absolute;
	content: " ";
	border-bottom: 5px solid #000;
	bottom: -3px;
	width:70%;
	display: block;
}
.talk_box h3.h3_long::after {
	width:80%;
}
.talk_box p {
	margin-bottom:20px;
}
.pict_box {
	width:450px;
	padding:60px 40px 0 0;
	float:left;
	text-align:right;
}
.pict_box p {
	margin-bottom:25px;
}
.mv_content {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
.mv_index_right {
	position: absolute;
	right: 2%;
	top: 30%;
}
.mv_index_left {
	position: absolute;
	left: 2%;
	top: 30%;
}
.mv_txt {
	padding: 10px 10px 8px;
	text-align: right;
	background-color: rgba(255, 255, 255, 0.85);
}
.mv_txt.txt_white {
	background-color: rgba(20, 20, 20, 0.9);
}
.mv_txt1 {
	font-size: 14px;
}
.mv_txt2 {
	font-size: 22px;
}
sup {
    position: relative;
	font-size: 70%;
}
.txt_white {
	color: #fff;
}

/* Infomation
-------------------------------------------------------------------------------*/
.info_box {
	margin:0 40px 40px 40px;
	padding:0;
	width:920px;
	display:table;
	background:#365a8f;
	color:#fff;
	text-align:left;
}
.info_name {
	display:inline-block;
	box-sizing:border-box;
	width:320px;
	vertical-align:top;
	padding:20px 20px 0 20px;
}
.info_name h3 {
	font-size:28px;
	float:left;
	margin-right:10px;
}
.info_name p {
	font-size:10px;
	padding-top:5px;
}
.info_name .info_hr {
	border-bottom:1px solid #fff;
	margin-bottom:14px;
	padding-bottom: 7px;
}
.info_name ul {
	margin-left:20px;
	font-size:12px;
}
.info_name li {
	list-style-type:disc;
}
.info_pict {
	display:inline-block;
	box-sizing:border-box;
	vertical-align:middle;
	width:300px;
	text-align:center;
}
.info_cap {
	display:inline-block;
	box-sizing:border-box;
	width:280px;
	padding:0 0 0 20px;
	vertical-align:middle;
	font-size:14px;
	line-height:1.8;
}

/* Button
-------------------------------------------------------------------------------*/
.btn {
  display: inline-block;
  padding: 14px 48px;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #fff;
  background-color: #444;
  border-color: #444;
  margin-top:10px;
  text-decoration:none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #eee;
  text-decoration: none;
  background-color: #aaaaaa;
  border-color: #aaaaaa;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.link_area {
	margin-bottom: 50px;
}
.link_area .btn_index ,
.link_area .btn_next {
	box-sizing: border-box;
	display: inline-block;
	margin: 0 10px;
}

.link_area .btn_index .btn {
	    background: url(../images/arrow_l.png) #444 left 10px center no-repeat;
}
.link_area .btn_next .btn {
	    background: url(../images/arrow_r.png) #444 right 10px center no-repeat;
}

.link_area .btn_index .higherBtn {
	padding: 25px 48px;
}


/* 社名
***************************** */
.subaru_caution_index {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.subaru_caution {
	text-align: right;
	margin-right: 10px;
	padding-bottom: 10px;
}


/*PC menu
-------------------------------------------------*/
.menu_region{
	text-align: left;
	padding: 10px 0 0;
	background: #eee;
	padding-top: 85px;
	padding-bottom: 15px;
}
.lineup_menu_area{
	width: 100%;
	margin: 0;
	z-index: 1000;
	background: #fff;
}

.lineup_menu_area .outbox{
	position: relative;
	height: auto;
	margin: 0 auto;
}

.lineup_menu_area h1{
	width:350px;
	height: 60px;
	position: absolute;
	top: -60px;
	left: 50%;
	margin: 0 0 0 -175px;
	z-index: 300;
	cursor: pointer;
}

.breadcrumb_menu h1{
	top: -85px;
}

.lineup_menu_area h1 img{
	width: 350px;
	height :60px;
}


/*------------------------------------------------------
breadcrumb
------------------------------------------------------*/
.breadcrumb{
	width: 100%;
	margin: 10px auto 0;
}
@media screen and (max-width: 1199px) {
	.breadcrumb{
		max-width: 1000px;
	}
}
@media screen and (min-width: 1200px) {
	.breadcrumb{
		max-width: 1200px;
	}
}

.breadcrumb ol li{
	list-style-type: none;
	display: inline-block;
	text-indent: 5px;
	font-size: 10px;
}

.breadcrumb ol li:after{
	content:">";
	margin: 0 0 0 10px;
}

.breadcrumb ol li.last:after{
	content:"";
	margin: 0;
}

.breadcrumb ol li a:link,
.breadcrumb ol li a:visited,
.breadcrumb ol li a:active{
	text-decoration: underline;
	color:#333;
}
.breadcrumb ol li a:hover{
	text-decoration: none;
	color: #333;
}

#gnav_header {
	margin: 0 auto;
}