@charset "UTF-8";

@import url('//fonts.googleapis.com/css?family=Barlow+Condensed:400,600');

* {
  box-sizing:border-box;
  /* tap */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}
*:focus { outline: none; }

html { overflow-y:scroll; }
body {
	width:100%; margin:0; padding:0;
	text-align:center; font-size:14px; line-height:1.7; letter-spacing:0.05em;
	color:#000;
	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	background:#fff;
}

ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
a:link		{ color:#000; text-decoration:none; }
a:visited	{ color:#000; }
a:hover		{ color:#5e5e5e; }
a:active	{ color:#5e5e5e; }
a img {
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
	transition:.2s linear; }
a.fade:hover img { opacity:0.8; }

a.underline { text-decoration:underline; color:#000; }
a.underline:hover { color:#000; }

img { max-width:100%; height:auto; vertical-align:top; }

/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.txt_c { text-align:center; }
.txt_l { text-align:left; }
.txt_r { text-align:right; }

.float_l { float:left; }
.float_r { float:right; }
.clear { clear:both; }
.hidden { visibility:hidden; }

.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.en    { font-family: 'Barlow Condensed', Century Gothic, Futura, Muli,sans-serif; }
.bold  { font-weight:bold; }
.big   { font-size:120%; }
.small { font-size:88%; }
.red   { color:#df003a!important; }
.white { color:#fff!important; }
.black { color:#000!important; }

.mt10  { margin-top:10px; }
.mt20  { margin-top:20px; }
.mt30  { margin-top:30px; }
.mt40  { margin-top:40px; }
.mt50  { margin-top:50px; }
.mt60  { margin-top:60px; }
.mb10  { margin-bottom:10px; }
.mb20  { margin-bottom:20px; }
.mb30  { margin-bottom:30px; }
.mb40  { margin-bottom:40px; }
.mb50  { margin-bottom:50px; }

.con { position:relative; margin:auto; }
a.more { font-size:20px; font-weight:bold; font-family:'Barlow Condensed', sans-serif; }
a.more:after {
  content:""; display:inline-block; width:37px; height:17px; margin-left:9px;
  background:url("/img/top/arrow_more.png") 0 0 no-repeat; background-size:37px 17px; }
a.more:hover { color:#999; }
a.more:hover:after { opacity:0.6; }

/* header */
header { position:absolute; top:0; left:0; background:transparent!important; }
header h1 { top:20px; }

/* mv */
#mv { height:810px; overflow:hidden; }
#mv li { position:relative; background-size:cover; background-position:center; }
#mv .con { position:relative; height:810px; z-index:10; }
#mv li .title { position:absolute; left:0; bottom:46px; text-align:left; }
#mv li .title a { display:block; width:100%; height:100%; color:#fff; position:relative; }
#mv li .title .cat { position:relative; margin-bottom:14px; padding-bottom:22px; line-height:1; font-size:24px; font-family:'Barlow Condensed', sans-serif; }
#mv li .title .cat:after { content:""; display:block; width:46px; height:2px; background:#fff; position:absolute; left:0; bottom:0; }
#mv li .title h2 { font-size:30px; font-weight:bold; line-height:1; }
#mv li .title .btn {
  display:inline-block; margin-top:15px; padding:7px 25px; line-height:1; background:#fff; color:#000; border-radius:4px; font-family:'Barlow Condensed', sans-serif;
  -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
.bx-viewport > ul > li:after {
  content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.1); position:absolute; top:0; left:0; z-index:0; }
.bx-controls { position:relative; width:1340px; margin:auto; }
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { width:auto; right:0; bottom:50px; }
.bx-wrapper .bx-pager.bx-default-pager a { width:8px; height:8px; border-radius:0; background:#a8a8a8; }

/* active */
#mv .bx-wrapper .bx-viewport li[aria-hidden="false"] .title { animation: slideFromLeft 1.5s ease 0s 1 normal; }
@keyframes slideFromLeft {
	0%, 25% { transform: translateX(-50px); opacity: 0; }
	100% { transform: translateX(0px); opacity: 1; }
}

.fadein { transition: .8s; -webkit-transform: translate(0,30px); transform: translate(0,30px); opacity: 0; }
.fadein.show { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1.0; }

/* about */
#top_about { padding-top:100px; }
#top_about .photo { float:left; }
#top_about .txt { margin-left:620px; padding-top:30px; text-align:left; }
#top_about .txt h2 { position:relative; margin-bottom:30px; padding-bottom:30px; font-size:34px; font-weight:normal; letter-spacing:0.08em; }
#top_about .txt h2:after { content:""; display:block; width:46px; height:2px; background:#000; position:absolute; left:0; bottom:0; }
#top_about .txt h3 { font-size:20px; margin-bottom:5px; }
#top_about .txt p { line-height:1.7; }

/* special */
#top_special { margin-top:-80px; padding:160px 0 70px; background:#f7f7f7; }
#top_special .special_side { float:left; width:26%; text-align:left; }
#top_special .special_side .title { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; }
#top_special .special_side h2 { font-size:34px; font-weight:normal; letter-spacing:0.08em; line-height:1.3; }
#top_special .special_side li { font-size:16px; line-height:1.3; }
#top_special .special_side li + li { margin-top:15px; }
#top_special .special_side li a { position:relative; display:inline-block; padding:0 3px 9px 50px; z-index:1; }
#top_special .special_side li a:after {
  content:"";	display:block; position:absolute; left:0; bottom:3px; width:0; height:14px; background:#e8da65;
  transition: .1s linear;	-webkit-transition: .1s linear; z-index:-1; }
#top_special .special_side li:nth-child(1) a:after { background:#e8af65; }
#top_special .special_side li.active a:after,
#top_special .special_side li a:hover:after { width:100%; }
#top_special .special_box { float:right; width:67%; text-align:left; }
#top_special .special_box li { float:left; width:44%; }
#top_special .special_box li:nth-child(2n) { margin-left:12%; }
#top_special .special_box li:nth-child(n+3) { margin-top:10%; }
#top_special .special_box li a { display:block; }
#top_special .special_box li a:hover { opacity:0.8; }
#top_special .special_box li .img { width:100%; height:0; margin-bottom:20px; padding-top:64.7%; background-size:cover; background-position:center; }
#top_special .special_box li .title { font-weight:bold; }
#top_special .special_box li .en { margin-top:10px; color:#5e5e5e; }
#top_special .special_box .txt_r { margin-top:20px; }
.tab-content { display:none; }

/* house */
#top_house { padding:80px 0; }
#top_house h2 { position:relative; margin-bottom:50px; padding-bottom:30px; font-size:34px; font-weight:normal; letter-spacing:0.08em; line-height:1; }
#top_house h2:after { content:""; display:block; width:46px; height:2px; background:#000; position:absolute; left:50%; bottom:0; margin-left:-23px; }
#top_house .house_list { position:relative; }
#top_house .house_list li { float:left; width:20%; }
#top_house .house_list li a { display:block; width:100%; height:0; padding-top:100%; background-size:cover; background-position:center; }
#top_house .house_list li a:hover { opacity:0.8; }
.slick-prev, .slick-next {
  -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear;
  cursor:pointer; position:absolute; top:50%; margin-top:-35px; padding:0; border:0; background:#000; opacity:0.3; }
.slick-prev { left:0; }
.slick-next { right:0; }
.slick-prev:hover, .slick-next:hover { opacity:0.7; }
#top_house .hashtag { margin:50px 0; text-align:center; font-size:0; }
#top_house .hashtag li { display:inline-block; margin:15px 0; padding:0 12px; border-right:1px solid #999; font-size:16px; line-height:1; }
#top_house .hashtag li:last-child { border:0; }

/* news */
#top_news { position:relative; padding:80px 0; }
#top_news:before { content:""; display:block; width:100%; height:380px; background:#f7f7f7; position:absolute; top:0; left:0; }
#top_news h2 { position:relative; margin-bottom:50px; padding-bottom:30px; font-size:34px; font-weight:normal; letter-spacing:0.08em; line-height:1; }
#top_news h2:after { content:""; display:block; width:46px; height:2px; background:#000; position:absolute; left:50%; bottom:0; margin-left:-23px; }
#top_news .news_box { margin-bottom:50px; background:#fff; text-align:left; }
#top_news .news_box a { position:relative; z-index:1; display:block; padding:25px; border-bottom:1px solid #f7f7f7; }
#top_news .news_box .date { float:left; display:block; width:65px; font-ize:16px; color:#5e5e5e; }
#top_news .news_box .title { margin-left:40px; font-weight:bold; }
#top_news .news_box a:hover { background:#999; }
#top_news .news_box a:hover .date, #top_news .news_box a:hover .title { color:#fff; }




@media (min-width: 1341px) {
  body { min-width:1340px; }
  #mv .con { width:1340px; margin:auto; }
	header h1 { left:0; }
  header nav { right:0; }
}
@media (min-width: 1141px) {
  .con { width:1140px; margin:auto; }
}
@media (max-width: 1340px) {
  #mv .con { width:100%; }
  #mv li .title { left:20px; }
  .bx-controls { width:100%; }
  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { right:20px; }
}
@media (max-width: 1140px) {
  .con { width:100%; padding:0 20px; }
  #top_about .photo { width:49%; height:auto; }
  #top_about .txt { margin-left:52%; padding-top:0; }

}
@media screen and (max-width: 1000px) {
  #mv li .title h2 { font-size:24px; }
  #top_about, #top_special, #top_house, #top_news { padding:70px 0; }
  #top_special { margin-top:0; }
  #top_about .txt h2, #top_special .special_side h2, #top_house h2, #top_news h2 { font-size:28px; }
	#top_about .txt h3 { font-size:18px; }
  #top_special .special_side li a { padding-left:30px; }
}
@media screen and (min-width: 769px) {
	#mv li .title a:hover .btn { background:#e8da65; }
}
@media screen and (max-width: 768px) {
  header h1 { top:12px; }

  #mv, #mv .con { height:400px; }
	#mv li .title { max-width:90%; }
  #mv li .title h2 { line-height:1.3; }
  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom:20px; }

  #top_about .photo { width:40%; margin:0 4% 4% 0; }
  #top_about .txt { display:inline; margin-left:0; }
  #top_about .txt h2:after { margin-left:44%; }

  #top_special .special_side, #top_special .special_box { float:none; width:100%; }
  #top_special .special_side .title { margin-bottom:10px; }
  #top_special .special_side ul { margin-bottom:20px; }
  #top_special .special_side li { float:left; width:47%; margin:0; }
  #top_special .special_side li:nth-child(2n) { margin-left:6%; }
  #top_special .special_side li + li { margin-top:0; }
  #top_special .special_side li a { display:block; padding:5px; font-size:13px; white-space:nowrap; }
  #top_special .special_box li { width:47%; }
  #top_special .special_box li:nth-child(2n) { margin-left:6%; }
  #top_special .special_box li:nth-child(n+3) { margin-top:6%; }

  .slick-slider { margin-bottom:30px; }
  #top_house .hashtag { margin:30px 0; }
  #top_house .hashtag li { margin:10px 0; }

  #top_news .news_box a { padding:15px; }
  #top_news .news_box .date { float:none; }
  #top_news .news_box .title { display:block; clear:both; margin:5px 0 0; }
}

@media screen and (max-width: 400px){
  #mv li .title h2 { font-size:20px; }
  #top_about, #top_special, #top_house, #top_news { padding:30px 0; }
  #top_about .txt h2, #top_special .special_side h2, #top_house h2, #top_news h2 { font-size:20px; }
  #top_about .txt h2, #top_house h2, #top_news h2 { margin-bottom:30px; padding-bottom:20px; }
  #top_about .txt h2:after { width:30px; }
	#top_about .txt h3 { font-size:16px; clear:both; }
  #top_special .special_side li { width:100%; margin:0; }
  #top_special .special_side li:nth-child(2n) { margin-left:0; }
  #top_house h2:after, #top_news h2:after { width:30px; margin-left:-15px; }
  #top_house .hashtag li { font-size:14px; }
  #top_news .news_box { margin-bottom:30px; }
}
