@charset "Shift_JIS";


body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,img,figure {
	margin: 0px;
	padding: 0px;
}

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
img{
	border: none;
}

#robo { color: #35363b;     font-family: HondaGlobalFontEN-Regular, "�q���M�m�p�S W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", ���S�V�b�N��, YuGothic, "���S�V�b�N Medium", "Yu Gothic Medium", Meiryo, sans-serif; 
	/* padding-top: 65px; */
 }
#robo a {
	text-decoration: none;
	coror: #35363b;
}
#robo a:hover {
	text-decoration: underline;
}
.sp_none{ display: none;}
.pc_none{ display: block;}

/* �p������ �[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[ */
nav.breadcrumbs {
	font-size: 12px;
	height: 2.5em;
	color: #041d41;
	box-shadow: 0px 10px 7px -11px rgba(76,59,26,1) inset;
	background-color: #fffefb;
	overflow-x: scroll;
    word-break: keep-all;
    white-space: nowrap;
	scrollbar-width: none;
}
nav.breadcrumbs::-webkit-scrollbar {
    display: none;
}

.breadcrumbs ol {
 padding: 0.6em 2vw 0.3em 3vw;
}
.breadcrumbs li {
  display: inline;
  list-style: none;
}
.breadcrumbs li::after{
  content: '��';
  display: inline-block;
  padding: 0 0.5em;
}

.breadcrumbs li:last-child::after{
  display: none;
}

.breadcrumbs li a {
  text-decoration: none;
  color: #35363b;
}


/* �y�[�W�i�r�Q�[�V���� �[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[ */
.contents_navi ul {
	width: 70vw;
	margin: 0 auto;
	list-style: none;
	padding-top: 20vw;
	padding-bottom: 14vw;
}
.contents_navi li {
	border: 1px solid #041D41;
	margin-bottom: 4vw;
	padding: 3vw 3vw;
	font-size: 14px;
	position: relative;
}
.contents_navi li.local {
	background-color: #041d41;
	color: #fde731;
}
.contents_navi li::before {
  content: '';
    border: 0;
    border-top: solid 1px #041D41;
    border-right: solid 1px #041D41;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg);
}
.contents_navi li.local::before {
	border-top: solid 1px #fff;
    border-right: solid 1px #fff;
}
.contents_navi a li:hover {
	background-color: #041d41;
	color: #fde731;
	text-decoration: none;
}
.contents_navi a li:hover::before {
	border-top: solid 1px #fff;
    border-right: solid 1px #fff;
}


.contents3 {
	border-top: 1px solid #B3B3B3;
	margin-top: 16vw;
}

#robo .contents3 h2 {
	font-size: 5.5vw;
	font-family: HondaGlobalFontEN-Regular, "�q���M�m�p�S W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", ���S�V�b�N��, YuGothic, "���S�V�b�N Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	padding: 16vw 0 6vw 0;
	text-align: center;
}
.contents3 ul {
	margin: 0 10vw;
	list-style: none;
}
.contents3 li {
	margin-bottom: 6vw;
	font-size: 14px;
}
.contents3 li div {
	overflow: hidden;
	width: 100%;
	border: 1px solid #B3B3B3;
	line-height: 0;
}
.contents3 figure img{
	width: 100%;
	transition: transform .7s ease;
}
.contents3 figure img:hover{
	transform: scale(1.07);
}

.contents3 figcaption {
	margin-top: 1.5vw;
	line-height: 1.6em;
	color: #35363b;
}


/* PC�\�� ���������������������������������������������������������������������������� */
@media screen and (min-width: 768px) {

  .sp_none{ display: block;}
  .pc_none{ display: none;}
	

/* ���C���r�W���A�� �[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[ */
  #robo {
		/* padding-top: 120px; */
	}
	
  .mv-wrap {
	height: 570px;
  }
  .mv-txt .main-copy{
    font-size: 48px;
  }

  .mv-txt .sub-copy{
    font-size: 24px;
  }

  .video, .mv-bg, video{
	height: 570px;
  }

/* �p������ �[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[ */
  .breadcrumbs ol {
	  width: 980px;
	  margin: 0 auto;
  }


/* �y�[�W�i�r�Q�[�V���� �[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[�[ */	
  .contents_navi ul {
	width: 838px;
	margin: 0 auto;
	/* padding-top: 120px; */
	padding-bottom: 80px;
	display: flex;
	justify-content: space-between;
  }
  .contents_navi li {
	width: 231px;
	margin-bottom: 0;
	padding: 15px;
  }
	
  .contents3 div {
	width: 980px;
	margin: 0 auto;
  }


  .contents3 {
	margin-top: 70px;
	padding-bottom: 0px;
  }

  #robo .contents3 h2 {
	font-size: 40px;
	padding: 90px 0 30px 0;
  }
  .contents3 ul {
	margin: 50px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
  }
  .contents3 li {
	margin-bottom: 30px;
	font-size: 14px;
	flex-basis: 458px;
  }
  .contents3 figcaption {
	margin-top: 8px;
  }


}