@charset "utf-8";
/*--fade in-----------------------------------------------------------*/
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
html {
}
body {
background-color: #FFFFFF;
min-width: 320px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
font-weight: 400;
height:100%;
}
@media screen and (max-device-width: 1024px) {
body {
min-width: 1140px;
}
}
a:link {
color: #000000;
text-decoration: none;
transition: .2s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #999999;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: inherit!important;
}
.sp {
display: none!important;
}
#wrapper {
position: relative;
overflow: hidden
}



/*--HEADER-----------------------*/
header {
position: absolute;
background-color: #FFF;
width: 100%;
min-width: 980px;
height: 100px;
animation-name: ani_header;
animation-duration: 2s;
z-index: 999;
line-height: normal;
}
header.lower {
position: relative;
animation-name: none;
}
@keyframes ani_header {
    0% {opacity:1;top:-100px;}
	70% {opacity:1;top:-100px;}
	100% {opacity:1;top:0px;}
}
header .inner {
width: 90%;
min-width: 1140px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;

}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 28px;
}
header #headR {
width: 820px;
float: right;
margin-top: 16px;
}
header #headR .headnav {
float: right;
margin-bottom: 18px;
}
header #headR .headnav li {
float: left;
margin-left: 10px;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 15px;
letter-spacing: 0.02em
}
#gnav {
float: right;
width: 100%;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 15px;
letter-spacing: 0.02em
}
#gnav ul {
text-align: right;
}
#gnav ul li {
display: inline;
margin-left: 15px;
}
#gnav ul li a:hover{
text-decoration: none
}
#gnav ul li.info a{
	margin-top: 10px;
	display: inline-block;
	background-color: #FFF;
	color: #222223;
	font-size: 12px;
	padding: 4px 20px 4px 20px;
	line-height: 1em;
	text-decoration: none;
	border: 1px solid #939393;
}
#gnav ul li.info a:hover{
background-color: #222223;
color: #FFF;
}

/*--FIXED_BNR-----------------------*/
#fix_bnr{
position: fixed;
right: 0;
top: 42vh;
z-index: 999;
}
#fix_bnr img{
}
#fix_bnr ul{}
#fix_bnr ul li{
background-color: #000000;
margin-bottom: 2px;
}



/*--MAINVIS-----------------------*/
#mainVis {
position: relative;
height: 70vh;
width: 100%;
background-color: #FFF;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow: hidden;
}
@media screen and (max-device-width: 1024px) {
#mainVis {
height: 70vh!important;
background-attachment: scroll;
}
}

#mainVis .swiper-slide{
height: 70vh;
width: 100%;
background-size: cover;
background-position: center center;
}
/*#mainVis .swiper-slide a{
height: 100vh;
width: 100%;
display: block;
}*/

#mainVis .index_copy{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 160px;
}
@keyframes ani_copy {
    0% {opacity:0;top:calc(50vh + 100px);}
	50% {opacity:1;top:calc(50vh - 150px);}
	100% {opacity:1;top:calc(50vh - 150px);}
}
#mainVis #mv_underbar{
background-color: #FFF;
position: absolute;
width: 100%;
height: 30px;
bottom: 0;
animation-name: ani_mv;
animation-duration: 2s;
}
@keyframes ani_mv {
    0% {opacity:1;height:0px;}
	70% {opacity:1;height:0px;}
	100% {opacity:1;height:30px;}
}


#mainVis #news {
top:200px;
right:-30px;
width: 100px;
position: fixed;
z-index: 9999;
transition: .2s;
animation-name: ani_news;
animation-duration: 3s;
}
@keyframes ani_news {
    0% {right:-100px;}
	70% {right:-100px;}
	80% {right:0px;}
	100% {right:-30px;}
}
#mainVis #news img{
margin-bottom: 10px;
}
#mainVis #news .bnr {
margin-left:0px;
transition: .2s;
animation-duration: 3s;
}
#mainVis #news .bnr:hover {
margin-left:-20px;
}
#mainVis #news_sp {
display: none;
}
#mainVis #gd_mark {
position: absolute;
top:200px;
left:20px;
width: 100px;
height: 100px;
z-index: 9999;
transition: .2s;
animation-name: ani_gd;
animation-duration: 3s;
}
@keyframes ani_gd {
    0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
#mainVis .bg_link{
position: absolute;
width: 100%;
height: 100vh;
z-index: 10;
}


/*#mainVis #news dl {
margin-left: 0px;
margin-right: 10px;
padding: 0px;
margin-bottom: 10px;
}
#mainVis #news dt {
float: left;
width: 80px;
clear: both;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0px;
padding-top: 0px;
color: #999999;
background-color: #E8E8E8;
}
#mainVis #news dd {
margin-left: 80px;
margin-bottom: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 18px;
background-color: #D6D5D6;
}*/

#mainVis a{
display: block;

height: 100vh;
}


/*--INDEX_OUTLINE-----------------------*/
#outline{
height: 640px;
background-size: cover;
background-position: center center;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
position: relative;
color: #FFF;
overflow: hidden
}
#outline p,#outline h2{
position: relative;
z-index: 10;
font-size: 13px;
line-height: 2.8;
letter-spacing: 0.2em;
animation: fadeOut 2s ease 80s 1 forwards;
-webkit-animation: fadeOut 2s ease 80s 1 forwards;
}
@keyframes fadeOut {
 0% {opacity: 1}
 100% {opacity: 0}
}
 @-webkit-keyframes fadeOut {
 0% {opacity: 1}
 100% {opacity: 0}
}


#outline h2.ttl{
font-size: 18px;
padding-bottom: 5px;
padding-top: 160px;
}
#outline h2.ttl span{
border-bottom: 2px solid #FFFFFF;
}
#outline .dot{
background-image: url(../../images/dot.png);
width: 100%;
height: 640px;
position: absolute;
z-index: 1;
top:0;
pointer-events: none;
}
#outline #video_bg{
position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

#outline #youtube-area{
    position: fixed;
    z-index: 1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
  opacity: 0;    
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#outline #youtube-area.appear {
  animation-name:PageAnimeAppear;
  animation-duration:.5s;
  animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

#outline #youtube {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#outline #youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}

/*--INDEX_WORKS-----------------------*/
.index_ttl_works{
text-align: center;
padding-top: 30px;
padding-bottom: 50px;
}
#index_works{
font-size: 10px;
}
#index_works li{
width: 340px;
float: left;
margin-right: 10px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
#index_works li:nth-child(3n){
margin-right: 0px;
}
#index_works.index li:nth-child(10){
display: none!important;
}


#index_works li .thum{
background-color: #FFF;
/*border: 1px solid #e6e9ef;*/
padding: 10px;
transition: .3s;
}
#index_works li .thum:hover{
background-color: #FFF;
/*border: 1px solid #e6e9ef;*/
}
#index_works li .thum figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 320px;
  height: 194px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  text-align: center;
}
#index_works li .thum:hover figcaption {
  opacity: 1;
}
#index_works li .thum a{
width: 320px;
height: 194px;
display: block;
text-decoration: none;
color: #FFF;
  display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	letter-spacing: 0.1em;
}
#index_works li .thum img{
width: 320px;
height: 194px;
object-fit: contain;
}
#index_works li .tag{
margin-left: 10px;
}
#index_works li h3{
margin-left: 10px;
margin-right: 10px;
min-height: 5.2em
}
.index_works_view{
clear: both;
text-align: center;
padding-bottom: 180px;
}

.info_spe{
    clear: both;
    text-align: center;
    border: 1px solid #232323;
    padding: 5px;
    margin-bottom: 180px;
}
.info_spe .read{
font-size: 20px;
font-weight: 200
}

.index_recruit_bnr{
    text-align: center;
    margin-bottom: 180px;
}
.index_recruit_bnr img{
width: 100%;
height: auto
}

.info_taisaku{
    width: 998px;
    clear: both;
    border: 1px solid #232323;
    padding: 20px;
    margin-bottom: 0px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 12px;
}
.info_taisaku .ttl{
text-align: center;
margin-bottom: 15px;
font-size: 14px;
}
.info_taisaku ul{
padding: 15px;
}
.info_taisaku li{
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid #212121;
    border-radius: 30px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: bold;
}

.bnr_special{
width: 1040px;
margin-left: auto;
margin-right: auto;
}
.bnr_special h2{
float: none;
padding-top: 10px;
padding-bottom: 10px;
}
.bnr_special ul{
width: 100%;
float: none;
padding-bottom: 40px;
/*border-bottom: 1px solid #A2A2A2;*/
}
.bnr_special li{
width: 100%;
/*width: 500px;
float: left;*/
margin-right: 0px;
margin-bottom: 30px;
padding-top: 10px;
line-height: 1.7;
font-size: 12px;
/*border-top: 1px solid #A2A2A2;*/
}
.bnr_special li:last-child{
margin-right: 0px;
}
.bnr_special li:nth-child(2n){
margin-right: 0px;
}
.bnr_special li img{
/*width: 100%;
height: auto;*/
}
.bnr_special li .thum{
width: 260px;
height: 140px;
float: left;
margin-right: 15px;
}
.bnr_special li .thum img {
  width: 260px;
height: 140px;
  object-fit: cover;
}

.bnr_special li .txt{
width: calc(100% - 280px);
float: left;
line-height: 1.5;
}
.bnr_special li .ttl{
font-size: 15px;
font-weight: 600;
margin-bottom: 5px;
}
.bnr_special li .ttl span{
background-color: #000;
color: #FFF;
font-size: 12px;
padding: 1px 10px;
margin-right: 8px;
}
.bnr_special li .meta{
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
}
.bnr_special li .meta i,
.bnr_special li .meta .ico{
margin-right: 0.5em;
vertical-align: middle
}
.bnr_special li .exp{
}
.bnr_special li strong{
background: linear-gradient(transparent 70%, #ffff66 70%);
}
.bnr_special li .btn_detail{
float: right;
padding-top: 5px;
}
.bnr_special li .btn_detail a{
    background-color: #1F1F1F;
    color: #FFF;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
}

/*--BNR_EBENT--*/
#bnr_event{
text-align: center;
margin-bottom: 60px;
position: relative;
}
#bnr_event img{
width: 93%!important;
height: auto
}
#bnr_event .swiper-button-next,
#bnr_event .swiper-button-prev{
}


.bnr_contents{
width: 1040px;
margin-left: auto;
margin-right: auto;
padding-top: 80px;
}
.bnr_contents li{
width: 254px;
float: left;
margin-right: 8px;
margin-bottom: 20px;
}
.bnr_contents li:nth-child(4n){
margin-right: 0px;
}

.bnr_contents li img{
width: 100%;
height: auto;
}



.sns{
width: 490px;
}
.sns h2{
margin-bottom: 10px;
}
.sns.instagram{
float: left;
position: relative;
width: 100%;
}
.sns.instagram li{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.sns.instagram li:nth-child(3n){
margin-right: 0px;
}
.sns.facebook{
float: right;
}
.sns.instagram a{
position: absolute;
display: block;
width: 100%;
height: 155px;
z-index: 2;
}
/*--FOOTER_CONTACT-----------------------*/
#footer_contact{
clear: both;
background-color: #222223;
color: #FFF;
}
#footer_contact .inner{
width: 1040px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 25px;
}
#footer_contact .inner h2{
text-align: center;
padding-bottom: 20px;
}
#footer_contact .inner ul{
width: 100%;
border-right: 1px solid #FFFFFF;
}
#footer_contact .inner ul li{
float: left;
width: calc(33% - 2px);
border-left: 1px solid #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 11px;
font-weight: 500;
}
#footer_contact .inner ul li img{
margin-top: 10px;
}
#footer_contact .inner ul li a{
	margin-top: 10px;
	display: block;
	width: 230px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	color: #222223;
	font-size: 14px;
	line-height: 36px;
	text-decoration: none;
	border: 1px solid #FFFFFF;
}
#footer_contact .inner ul li a:hover{
background-color: #222223;
color: #FFF;
}

/*--FOOTER-----------------------*/
#footer {
background-color: #f2f2f2;
clear: both;
}
#footer .inner {
width: 1040px;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 50px;
}
#footer ul {
height: 90px;
}
#footer li {
float: left;
margin-right: 35px;
font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1;
}
#footer li a:hover{
text-decoration: none
}
#footer li.sns_ico {
margin-right: 15px;
}
#footer li:nth-child(8),#footer li:nth-child(9) {
float: right;
margin-right: 0px;
margin-left: 10px;
}
#footer .info{
font-size: 11px;
line-height: 1.6;
}
#footer .logo{
float: none;
margin-right: 10px;
margin-bottom: 30px;
}

#footer .adress_wrap{
float: left;
margin-right: 30px;
margin-bottom: 30px;
}


#footer .pageTop {
display: inline;
float: right;
margin-top: 20px;
}
#footer strong {
font-weight: 500;
}
/*--COMMON-----------------------*/
.contents {
width: 1040px;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 100px;
}
#ttl_box {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: left;
/*border-bottom: 2px solid #272729;*/
}
#ttl_box h2{
width: 1040px;
margin-right: auto;
margin-left: auto;
}
#mv_sub{
width: 100%;
height: 400px;
background-color: #000;
text-align: center;
}
.slide-bottom, .fadeInmark01{
opacity: 0
}
.slideInUp{
animation-name: slideInUp;
animation-duration: 2s;
}
@-webkit-keyframes slideInUp {
    0% {opacity:0;top:50px;}
	100% {opacity:1;top:0px;}
}
.fadeIn01{
animation-name: fadeIn01;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn01 {
    0% {opacity:0;}
	30% {opacity:1;}
	60% {opacity:1;}
	100% {opacity:1;}
}
.fadeIn02{
animation-name: fadeIn02;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn02 {
    0% {opacity:0;}
	30% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:1;}
}
.fadeIn03{
animation-name: fadeIn03;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn03 {
    0% {opacity:0;}
	30% {opacity:0;}
	60% {opacity:0;}
	100% {opacity:1;}
}
.bar a {
  position: relative;
  display: inline-block;
  transition: .3s;
  padding-bottom: 3px;
}
.bar a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #000;
  opacity: 0;
  transition: .3s;
}
.bar a:hover::after {
  bottom: 0;
  opacity: 1;
}
.is-fixed {
  position: fixed;
  top: 0;
  z-index: 2;
  /*width: 100%;*/
}
.is-hide {
  transform: translateY(-100%);
}
/*--WORKS DETAIL-----------------------*/
#w_detail{
font-size: 12px;
line-height: 1.8;
}
#w_detail img{
margin-bottom: 40px;
}
#w_detail .ttl{
font-weight: 500;
font-size: 18px;
padding-bottom: 25px;
}
#w_detail .txt{
width: 550px;
float: left;
text-align: justify;
}
#w_detail .data{
font-size: 11px;
background-color: #f0f0f0;
padding-top: 24px;
padding-bottom: 24px;
padding-left: 30px;
padding-right: 30px;
width: 300px;
float: right;
}
#w_detail .tag{
clear: both;
border-top: 1px solid #000000;
margin-top: 50px;
padding-top: 10px;
font-size: 11px;
margin-bottom: 50px;
}
#w_detail .btn_back img{
margin-bottom: 0px;
}
.tag_list{
clear: both;
border-top: 1px solid #000000;
margin-top: 50px;
padding-top: 10px;
font-size: 11px;
margin-bottom: 50px;
}
.tag_list li{
float: left;
padding-right: 15px;
}
/*--ABOUT US-----------------------*/
.about_mv{
background-image: url(../../about/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 100vh!important;
}
@media screen and (max-device-width: 1024px) {
.about_mv{
background-attachment: scroll;
}
}
.about_mv .copy{
padding-top: 0px;
display: block;
width: 50px;
margin-left: auto;
margin-right: auto;
color: #FFF;
writing-mode: vertical-rl;
line-height: 50px;
font-size: 26px;
}
.about_read{
text-align: center;
font-weight: 500;
padding-top: 70px;
padding-bottom: 150px;
}
.about_read span {
background: linear-gradient(transparent 70%, #ffff66 70%);
}
.about_read .heading{
font-size: 18px;
margin-bottom: 1em;
}
.about_read p{
margin-bottom: 2em;
}
.about_mv_sub{
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 100vh!important;
}
@media screen and (max-device-width: 1024px) {
.about_mv_sub{
background-attachment: scroll;
}
}
.about_mv_sub .copy{
padding-top: 80px;
display: block;
width: 50px;
margin-left: auto;
margin-right: auto;
color: #FFF;
writing-mode: vertical-rl;
line-height: 50px;
font-size: 26px;
}



.outline{
width: 670px;
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
}
.outline ul{
display:table;
font-weight: 500;
margin-bottom: 30px;
}
.outline ul li{
display:table-cell;
vertical-align:middle;
text-align:center;

}
.outline ul li:nth-child(odd){
background-color: #F3F4F5;
width: 170px;
height: 170px;

}
.outline ul li:nth-child(even){
width: 80px;
height: 170px;
font-size: 30px;
}
.outline h3{
font-size: 16px;
font-weight: 500;
border-top: 1px solid #e7e9ed;
  border-bottom: 1px solid #e7e9ed;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
}
.outline p{
font-size: 12px;
text-align: justify;
line-height: 1.8em;
}
.feature ul{
line-height: 1.2em;
}
.feature ul li{
background-color: #F3F4F5;
width: 245px;
float: left;
margin-right: 20px;
}
.feature ul li:last-child{
margin-right: 0px;
}
.feature ul li .ttl{
font-size: 14px;
font-weight: 500;
text-align: center;
padding-top: 10px;
}
.feature ul li .exp{
font-size: 11px;
padding:12px;
}
.feature a{
text-decoration: underline
}
.ph_staff {
margin-top: 50px;
}

.message{
background-color: #F3F4F5;
}
.message .inner{
width: 1040px;
margin-right: auto;
margin-left: auto;
padding-top: 50px;
padding-bottom: 50px;
}
.message .inner .ph{
float: left;
width: 200px;
padding-left: 100px;
}
.message .inner .txt{
width: 550px;
padding-right: 100px;
float: right;
font-size: 12px;
line-height: 1.8em;
text-align: justify;
}
.message .inner .txt .ttl{
font-size: 14px;
font-weight: 400;
padding-bottom: 1.2em
}
.message .inner .txt .name{
text-align: right;
padding-top: 2em;
}
.ttl_company{
text-align: center;
padding-bottom: 40px;
}
table.company{
width: 520px;
border-top: 1px solid #e0e0e0;
font-size: 12px;
float: left;
}
table.company th,table.company td{
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}
#map{
width: 460px;
height: 480px;
float: right;
}
/*--RECRUIT-----------------------*/
.recruit_mv{
    background-image: url(../../about/images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    /*background-attachment: fixed;*/
}
@media screen and (max-device-width: 1024px) {
.recruit_mv{
background-attachment: scroll;
}
}
.recruit_mv .copy{
padding-top: 80px;
}
.recruit_read{
background-color: #e7e9ed;
font-size: 12px;
text-align: center;
padding-bottom: 30px;
padding-left: 150px;
padding-right: 150px;
padding-top: 30px;
margin-bottom: 50px;
}
.rec_ttl{
font-weight: 500;
text-align: center;
font-size: 16px;
padding-top: 40px;
padding-bottom: 40px;
}
table.recruit{
width: 100%;
border-top: 1px solid #e0e0e0;
font-size: 12px;
}
table.recruit th,table.recruit td{
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}
.rec_ph img{
width: 100%;
height: auto
}
.rec_ph ul{
}
.rec_ph ul li{
width: 245px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.rec_ph ul li:nth-child(4n){
margin-right: 0px;
}
.rec_form_ttl{
    text-align: center;
    padding-top: 100px;
    margin-bottom: 30px;
    font-weight: 400;
    border-bottom: 2px solid #222223;
}


/*--STAFF-----------------------*/
.staff_mv{
background-image: url(../../staff/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
@media screen and (max-device-width: 1024px) {
.staff_mv{
background-attachment: scroll;
}
}
.staff ul{
line-height: 1.2em;
}

.staff ul li{
width: 300px;
height: 430px;
float: left;
margin-right: 70px;
text-align: justify
}
.staff ul li img{
width: 300px;
height: auto;
}
.staff ul li:nth-child(3n){
margin-right: 0px;
}
.staff ul li .name{
font-size: 13px;
font-weight: 400;
padding-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
.staff ul li .en{
font-size: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}
.staff ul li .exp{
border-top: 1px solid #e0e0e0;
font-size: 10px;
padding-top: 8px;
padding-left: 10px;
padding-right: 10px;
line-height: 1.5;
}
.staff ul li .exp p{
margin-bottom: 3px;
}
/*--FAQ-----------------------*/
.faq_mv{
background-image: url(../../faq/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
@media screen and (max-device-width: 1024px) {
.faq_mv{
background-attachment: scroll;
}
}
#faq_nav{
width: 300px;
float: left;
line-height: normal;
font-size: 14px;
font-weight: 400;
padding-top: 30px;
transition: .9s;
}
#faq_nav li{
margin-bottom: 1.5em;
padding-left: 15px;
transition: .6s;
border-left: 4px solid #FFFFFF;
}
#faq_nav li a{
text-decoration: none;
}
#faq_nav li.on{
border-left: 4px solid #676767;
}
.faq{
width: 700px;
float: right;
}
.faq h3{
padding-top: 26px;
font-size: 16px;
font-weight: 500;
margin-bottom: 30px;
}
.faq .faq_q{
font-weight: 200;
/*background-color: #e7e9ed;*/
/*font-weight: bold;*/
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 50px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 20px;
line-height: 1.5;
background-image: url(../../faq/images/ico_q.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 30px 30px;
}
.faq .faq_a{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 50px;
border-radius: 4px;
margin-bottom: 50px;
font-size: 12px;
line-height: 1.5;
background-image: url(../../faq/images/ico_a.png);
background-repeat: no-repeat;
background-position: 10px 15px;
background-size: 30px 30px;
}

/*--PRIVACY-----------------------*/
.privacy {
width: 860px;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.privacy h4{
font-size: 13px;
font-weight: bold;
padding-top: 1.5em;
}
.privacy .ind {
  padding-left: 1em;
  text-indent: -1em;
}
.privacy a{
text-decoration: underline;
}

/*--NEWS-----------------------*/
.news_ttl{
font-size: 18px;
font-weight: 400;
border-bottom: 2px solid #303030;
margin-bottom: 50px;
}
.navigation{
display: none;
}
.entry-content img{}

/*--CONTACT-----------------------*/
.contact {
width: 860px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
background-color: #F0F2F6;
}
.contact .ttl{
font-size: 15px;
padding-bottom: 15px;
}
.contact ul{
border-bottom: 4px solid #222223;
text-align: center;
margin-bottom: 30px;
}
.contact ul a:hover{
text-decoration: none;
}
.contact ul li{
display: block;
width: 50%;
float: left;
background-color: #e7e9ed;
font-size: 16px;
}
.contact ul li:hover{
background-color: #C4C5CA;
}
.contact ul li a{
display: block;
padding-top: 10px;
padding-bottom: 10px;
color: #707070;
}
.contact ul li a:hover{
color: #222223;
}
.contact ul li.active{
background-color: #222223;
}
.contact ul li.active a{
cursor: default;
color: #FFF;
}
.contact .req{
color: #DF4800
}
.contact table{
width: 100%;
margin-top: 50px;
}
.contact table td,.contact table th{
padding: 20px;
}
.contact table textarea{
width: 100%!important;
height: 5em!important;
background-color: #FFF;
}
.contact input{
background-color: #FFF;
}
:focus{outline: none;}
.col{position: relative;}
input[type="text"],textarea{color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;border-radius:3px;}
.effect{border: 0; padding: 8px 12px; border: 1px solid #ccc; position: relative; background: transparent;}
.effect ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #F0F2F5; transition: 0.3s; z-index: -1;}
textarea{display:block;}
.effect:focus ~ .focus-bg{transition: 0.3s; width: 100%;}

@font-face{font-family:"IonIcons";src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");font-weight:normal;font-style:normal}

.select-wrap {
    position: relative;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 43px;
    color: #7F878C;
    pointer-events: none;
}
select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#333;
    width:100%;
    border-radius:3px;
	background-color: #FFF!important;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap{
margin-bottom: 10px;
}

.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}
.select-wrap.select-inverse > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}
.form_end button {
    padding: 10px 60px;
    font-size: 1.2em;
	font-weight: 500;
    background-color: #000;
    color: #fff;
    border-style: none;
	cursor: pointer;
	display:block;
  margin: 0 auto
}
.form_end button:hover {
background-color: #323232;
    color: #fff;
}
.form_end{
border-top: 2px solid #ECECEC;
padding-top: 10px;
}

/*----MODEL HOUSE------*/
#modelhouse .mv{
margin-bottom: 30px;
}
#modelhouse .ttl{
padding-left: 20px;
float: left;
font-weight: 500;
white-space: nowrap
}
#modelhouse .ttl img{
float: left;
margin-right: 30px;
}
#modelhouse .ttl .hd{
font-size: 30px;
font-weight: 500;
}
#modelhouse .reserve{
padding-right: 20px;
float: right;
margin-bottom: 60px;
}
#modelhouse .detail{
    border: 1px solid #000000;
    padding: 20px;
    line-height: 1.5;
}
#modelhouse .detail iframe{
float: left;
width: 400px;
height: 350px;
margin-right: 30px;
}
#modelhouse .detail .txt{
width: 550px;
float: left
}
#modelhouse .detail .txt .notice{
    border-top: 1px solid #999999;
    margin-top: 20px;
    padding-top: 20px;
    font-size: 12px;
}
#modelhouse .concept_read{
    font-size: 22px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 1em;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    padding-top: 30px;
    padding-bottom: 30px;
}
#modelhouse .mh_detail{
margin-top: 80px;
margin-bottom: 40px;
}
#modelhouse .mh_detail .ph{
float: left;
margin-right: 30px;
}
#modelhouse .mh_detail .txt .head_ttl{
font-size: 18px;
font-weight: 500;
margin-bottom: 0.5em;
letter-spacing: 0.1em;
}
#modelhouse .mh_detail .txt strong,
#modelhouse .txt.end strong,
#modelhouse .concept_p strong{
background: linear-gradient(transparent 70%, #ffff66 70%);
}
#modelhouse .txt.end{
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
border-top: 1px solid #9D9D9D;
    border-bottom: 1px solid #9D9D9D;
    margin-bottom: 50px;
}
#modelhouse .gallary ul{
margin-bottom: 30px;
}
#modelhouse .gallary ul li{
width: 155px;
margin-right: 22px;
margin-bottom: 22px;
float: left;
}
#modelhouse .gallary ul li:nth-child(6n){
margin-right: 0px;
}
#modelhouse .gallary ul li img{
width: 100%;
height: auto;
}


.event_nav ul{
text-align: center;
margin-bottom: 30px;
list-style: none;
    display:flex;
    justify-content: center;
}
.event_nav ul a:hover{
text-decoration: none;
}
.event_nav ul li{

background-color: #e7e9ed;
font-size: 16px;
}
.event_nav ul li:hover{
background-color: #C4C5CA;
}
.event_nav ul li a{
display: block;
padding: 10px;
color: #707070;

}
.event_nav ul li a:hover{
color: #222223;
}
.event_nav ul li.active{
background-color: #222223;
}
.event_nav ul li.active a{
cursor: default;
color: #FFF;
}


/*--LAND-----------------------*/
.land_mv{
    background-image: url(../../land/images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
.land_mv h2{
color: #FFF;
font-size: 32px;
font-weight: 100;
}
.tochi_read{
text-align: center;
font-size: 16px;
font-weight: 500;
margin-bottom: 120px;
}
.tochi_read span {
    background: linear-gradient(transparent 70%, #fff000 70%);
}
.tochi_cont{
margin-bottom: 100px;
}
.tochi_cont .heading{
font-size: 36px;
font-weight: 100;
line-height: 1.2;
margin-bottom: 40px;
}
.tochi_cont .heading .ico{
float: left;
margin-right: 40px;
}
.tochi_cont .heading p{
padding-left:1em;
text-indent:-1em;
}
.tochi_cont .fig{
float: left
}
.tochi_cont .txt{
width: 350px;
float: right;
font-size: 13px;
}
.tochi_cont .txt p{
margin-bottom: 1em;
}
.tochi_cont .txt span {
    background: linear-gradient(transparent 70%, #fff000 70%);
}
.contact_tochi_header{
padding-top: 10px;
padding-bottom: 10px;
background-color: #222223;
color: #FFF;
text-align: center;
font-size: 16px;
margin-bottom: 15px;
}
.contact_tochi_radio{
margin-top: 80px;
}
.contact_tochi_radio label{
display: block;
float: left;
background-color: #1C1C1C!important;
color: #FFF;
text-align: left;
font-size: 14px!important;
width: calc(46% - 40px);
margin-right: 2%;
margin-left: 2%;
margin-bottom: 10px;
border-radius: 4px;
padding: 20px;
}
.contact_tochi_radio label:hover{
background-color: #4E4E4E!important;
}

/*--FLOW-----------------------*/
.flow_mv{
    background-image: url(../../flow/images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.flow_ttl{
text-align: center;
margin-bottom: 30px;
}
.flow_list{
margin-bottom: 30px;
}
.flow_list li{
position: relative;
width: 116px;
margin-right: 16px;
background-color: #222223;
color: #FFF;
text-align: center;
float: left;
font-size: 12px;
line-height: 1.2;
padding: 15px 0px;
transition: .3s
}
.flow_list li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #222223;
}
.flow_list li:last-child:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: none;
  border-left: none;
}
.flow_list li:last-child{
margin-right: 0;
}
.flow_list li .label{
 display: flex;
  align-items: center;
  justify-content: center;
height: 3em;
margin-top: 5px;
}
.flow_list li a{
color: #FFF;
text-decoration: none;
display: block;
}
.flow_list li:hover{
background-color: #4C4C4C;
}

.flow_prof{
margin-bottom: 50px;
}
.flow_prof .thum{
float: left;
margin-right: 10px;
}
.flow_prof .balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #e7e9ed;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.flow_prof .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e7e9ed;
}
.flow_prof .balloon1-left p.heading {
  font-size: 14px;
}

.flow_wrap{
margin-bottom: 50px;
}
.flow_wrap .step_num{
width: 220px;
float: left
}
.flow_wrap .step_num .label{
background-color: #222223;
color: #FFF;
line-height: 1.2;
padding: 5px 20px;
border-radius: 4px;
}
.flow_wrap .step_cont{
width: 770px;
float: right
}
.flow_wrap .step_cont .acount{
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.flow_wrap .step_cont .acount .thum{
float: left;
margin-right: 10px;
}
.flow_wrap .step_cont .acount span{
margin-top: 5px;
display: inline-block
}
.flow_wrap .step_cont .entry{
    border-left: 2px solid #E7E9ED;
    padding-left: 40px;
    margin-left: 22px;
    margin-bottom: 20px;
    line-height: 1.7;
}
.flow_wrap .step_cont .entry .photo{
float: left;
margin-right: 15px;
padding-bottom: 20px;
}
.flow_wrap .step_cont .entry .photo img{
border-radius: 4px;
}
.flow_wrap .step_cont .entry .comment{
background-color: #e7e9ed;
font-size: 11px;
line-height: 1.4;
padding: 15px;
border-radius: 4px;
}
.flow_wrap .step_cont .entry .comment .thum{
float: left;
margin-right: 10px;
}
.flow_wrap .step_cont .entry .comment a{
text-decoration: underline
}
.flow_wrap .end_message{
text-align: center;
font-size: 18px;
margin-top: 100px;
}

/*20201031イベント*/
.eve_mv img{
width: 100%;
height: auto
}
/*20201031イベント*/
.eve_mv_fix{
text-align: center
}
.eve_mv_fix img{
width: 100%;
max-width: 1240px;
height: auto
}
.detail_btn a{
background-color: #000;
color: #FFF!important;
padding: 2px 20px;
border-radius: 20px;
}
.eve_detail{
/*width: 730px;*/
margin-left: auto;
margin-right: auto
}
.eve_detail .read{
text-align: center;
margin-bottom: 1em;
}
.eve_detail table{
width: 100%;
border-top: 1px solid #D1D1D1;
margin-bottom: 2em
}
.eve_detail table th,
.eve_detail table td{
    vertical-align: top;
    border-bottom: 1px solid #D1D1D1;
    padding-top: 10px;
    padding-bottom: 10px;
}
.eve_detail table th{
white-space: nowrap;
padding-right: 1em;
}
.eve_detail .column{
border: 1px solid #D1D1D1;
padding: 10px;
font-size: 12px;
margin-bottom: 1em;
line-height: 1.6;
}
.res_tel{
text-align: center;
margin-bottom: 1em;
}
.res_tel span{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #555555;
}
.eve_notice{
font-size: 12px;
}
.eve_ph{
text-align: center;
margin-bottom: 2em;
}
.eve_ph li{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.eve_ph li img{
width: 260px;
height: auto
}

.btn_reserve{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.btn_reserve a{
    display: block;
    background-color: #424242;
    color: #FFF;
    font-size: 28px;
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 8px;
    width: 100%;
    text-decoration: none;
    background-image: -webkit-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: -moz-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: -o-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: linear-gradient(180deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
	line-height: 1;
}
.btn_reserve a span{
font-size: 14px;
}
.btn_reserve a:hover{
    background-image: -webkit-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: -moz-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: -o-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: linear-gradient(180deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
}
.btn_ttl{
font-size: 22px;
text-align: center;
line-height: 1.3
}
.btn_weblink{
text-align: center;
margin-top: 2em;
}
.btn_weblink a{
display: inline-block;
background-color: #000000;
color: #FFF;
padding: 10px 50px;
border-radius: 8px;
}

.point_list{
text-align: center;
padding-bottom: 3em;
font-weight: 500;
}
.point_list li span {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

.point_list_thumbox{
text-align: center;
padding-bottom: 3em;
font-weight: 500;
font-size: 14px;
}
.point_list_thumbox li {
float: left;
width: 32%;
margin-right: 2%;
}
.point_list_thumbox li:last-child {
margin-right: 0%;
}
.point_list_thumbox li img{
width: 100%;
height: auto
}
.point_list_thumbox li span {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

.eve_read{
font-weight: 500;
text-align: center;
font-size: 16px;
padding-bottom: 40px;
}















@media screen and (max-width: 479px) {

.pc {
display: none!important;
}
.sp {
display: inherit!important;
}
.img_full {
width: 100%;
height: auto;
}
body {
background-color: #FFFFFF;
min-width: 320px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}

a:link {
color: #000000;
text-decoration: none;
transition: .2s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #999999;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.sp {
display: inherit!important;
}
.pc {
display: none!important;
}
#wrapper {
position: relative;
}
/*--HEADER-----------------------*/
header {
position: absolute;
background-color: #FFF;
width: 100%;
min-width: 320px;
height: 70px;
animation-name: ani_header;
animation-duration: 2s;
z-index: 999;
line-height: normal;
}
header.lower {
position: relative;
animation-name: none;
}

@keyframes ani_header{
0% {opacity:1;top:-100px;}
70% {opacity:1;top:-100px;}
100% {opacity:1;top:0px;}
}
header .inner {
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
header a {
text-decoration: none;
}
header h1 {
float: left;
margin-top: 14px;
margin-left: 20px
}
header h1 img{
width: 170px;
height: auto;
}
header #headR {
display: none;
width: 553px;
float: right;
margin-top: 16px;
}
header #headR .headnav {
width: 160px;
float: right;
margin-bottom: 18px;
}
header #headR .headnav li {
float: left;
margin-left: 10px;
}
#gnav {
float: right;
width: 100%;
}
#gnav ul {
text-align: right;
}
#gnav ul li {
display: inline;
margin-left: 20px;
float: left
}

/*--FIXED_BNR-----------------------*/
#fix_bnr{
position: fixed;
right: 0;
top: auto;
z-index: 999;
bottom: 0;
left: 0;
width: 100%;
}
#fix_bnr ul{}
#fix_bnr ul li{
background-color: #000000;
margin-bottom: 0px;
margin-right: 1px;
width: calc(calc(100% - 2px) / 3);
float: left;
padding-top: 5px;
padding-bottom: 7px;
}
#fix_bnr ul li:last-child{
margin-right: 0px;
}
#fix_bnr img{
width: 100%;
height: auto
}

/*--MAINVIS-----------------------*/
#mainVis {
position: relative;
height: 100vh;
width: 100%;
background-color: #000000;
background-size: cover;
background-position: center center;
background-attachment: scroll;
background-repeat: no-repeat;
overflow: hidden;
}


#mainVis .index_copy{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
}
#mainVis .index_copy img{
width: 100%;
height: auto;
}
@keyframes ani_copy {
    0% {opacity:0;top:150px;}
	50% {opacity:1;top:100px;}
	100% {opacity:1;top:100px;}
}
#mainVis #mv_underbar{
background-color: #FFF;
position: absolute;
width: 100%;
height: 10px;
bottom: 0;
animation-name: ani_mv;
animation-duration: 2s;
}
@keyframes ani_mv {
    0% {opacity:1;height:0px;}
	70% {opacity:1;height:0px;}
	100% {opacity:1;height:10px;}
}


#mainVis #news {
display: none;
position: absolute;
top:200px;
right:-30px;
width: 100px;
transition: .2s;
animation-name: ani_news;
animation-duration: 3s;
}
@keyframes ani_news {
    0% {right:-100px;}
	70% {right:-100px;}
	80% {right:0px;}
	100% {right:-30px;}
}
#mainVis #news:hover {
right:0px;
}




#mainVis #news_sp{
display: inherit;
position: absolute;
bottom:110px;
left: 10px;
transition: .2s;
animation-name: ani_news_sp;
animation-duration: 3s;
z-index: 9999;
}
@keyframes ani_news_sp {
    0% {bottom:-150px;}
	70% {bottom:-150px;}
	80% {bottom:130px;}
	100% {bottom:110px;}
}
#mainVis #news_sp .bnr{
float: left;
margin-right: 15px;
}
#mainVis #gd_mark {
position: absolute;
top:auto;
left:20px;
width: 70px;
height: 70px;
background-color: aqua;
z-index: 9999;
transition: .2s;
animation-name: ani_gd;
animation-duration: 3s;
bottom: 130px;
}
#mainVis #gd_mark img{
width: 70px;
height: auto;
}
@keyframes ani_gd {
    0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
/*--INDEX_OUTLINE-----------------------*/
#outline{
height: auto;
background-size: cover;
background-position: center center;
text-align: left;
margin-top: 100px;
margin-bottom: 50px;
position: relative;
color: #FFF;
background-color: #403F3F;;
padding-top: 100px;
padding-bottom: 50px;
}
#outline p,#outline h2{
position: relative;
z-index: 10;
font-size: 12px;
line-height: 2.1;
letter-spacing: 0.2em;
padding-left: 30px;
padding-right: 30px;
text-align: justify;
pointer-events: none;
}
#outline p{
padding-top: 0px;
}
#outline h2.ttl{
font-size: 14px;
padding-top: 0px;
padding-bottom: 30px;
text-align: center;
top: -5vh;
}
#outline h2.ttl span{
border-bottom: 2px solid #FFFFFF;
}
#outline .dot{
background-image: url(../../images/dot.png);
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0;
pointer-events: none;
}
#outline #video_bg{
position: absolute;
	top: 18vh;
	left: 0%;
	object-fit: cover;
	transform: translate(0%, 0%);
	width: 100%;
	height: auto;
}
/*--INDEX_WORKS-----------------------*/
.index_ttl_works{
text-align: center;
padding-top: 30px;
padding-bottom: 50px;
}
#index_works{
font-size: 8px;
}
#index_works li{
width: 46%;
float: left;
margin-right: 2%;
margin-bottom: 2%;
position: relative;
overflow: hidden;
margin-left: 2%;
min-height: 155px;
}
#index_works li:nth-child(3n){
margin-right: 2%;
}
#index_works.index li:nth-child(10){
display: block!important;
}
#index_works li .thum{
background-color: #FFF;
padding: 4px;
transition: .3s;
}
#index_works li .thum img{
width: 100%;
height: auto;
}
#index_works li .thum:hover{
background-color: #000;
}
#index_works li .thum figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
  text-align: center;
  overflow: hidden;
}
#index_works li .thum:hover figcaption {
  opacity: 1;
}
#index_works li .thum a{
width: 320px;
height: 100px;
text-decoration: none;
color: #FFF;
  display: table-cell;
  text-align: center;
	vertical-align: middle;
	font-size: 12px;
	letter-spacing: 0.1em;
    line-height: 1.3;
}
.index_works_view{
clear: both;
text-align: center;
padding-bottom: 50px;
}

.info_spe{
    clear: both;
    text-align: center;
    border: 1px solid #232323;
    padding: 5px;
    margin-bottom: 30px;
     font-size: 11px;
}

.info_taisaku{
    width: 90%!important;
    clear: both!important;
    border: 1px solid #232323!important;
    padding-top: 10px!important;
    padding-right: 10px!important;
    padding-left: 10px!important;
    padding-bottom: 10px!important;
    margin-bottom: 0px!important;
    margin-top: 30px!important;
    margin-left: auto!important;
    margin-right: auto!important;
    font-size: 11px;
}
.info_taisaku .ttl{
text-align: center!important;
margin-bottom: 15px!important;
}
.info_taisaku ul{
padding: 15px;
}
.info_taisaku li{
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid #212121;
    border-radius: 30px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 15px;
}

.bnr_special{
width: 90%!important;
margin-left: auto!important;
margin-right: auto!important;
}
.bnr_special h2{
float: none;
padding-top: 10px;
padding-bottom: 20px;
}
.bnr_special ul{
width: 100%;
float: none;
}
.bnr_special li{
width: 100%!important;
float: none!important;
margin-bottom: 20px;
padding-top: 20px;
line-height: 1.7;
font-size: 12px;
/*border-top: 1px solid #A2A2A2;*/
}
.bnr_special li:last-child{
margin-right: 0px!important;
}
.bnr_special li img{
width: 100%!important;
height: auto!important;
}

.bnr_special li:nth-child(2n){
margin-right: 0px;
}
.bnr_special li .thum{
width: 100%;
height: auto;
    float: none;
    margin-right: 0px;
    margin-bottom: 10px;
}
.bnr_special li .thum img {
  width: 100%;
height: auto;
  object-fit: cover;
}
.bnr_special li .txt{
float: none;
width: calc(100% - 0px);
}
.bnr_special li .ttl{
font-size: 15px;
font-weight: 600;
margin-bottom: 5px;
}
.bnr_special li .ttl span{
background-color: #000;
color: #FFF;
font-size: 12px;
padding: 1px 10px;
margin-right: 8px;
}
.bnr_special li .meta{
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
}
.bnr_special li .meta img{
width: 16px!important;
height: auto!important;
}
.bnr_special li .exp{
}
.bnr_special li strong{
background: linear-gradient(transparent 70%, #ffff66 70%);
}
.bnr_special li .btn_detail{
text-align: right;
padding-top: 5px;
}
.bnr_special li .btn_detail a{
    background-color: #1F1F1F;
    color: #FFF;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 10px;
}

/*--BNR_EBENT--*/
#bnr_event{
text-align: center;
margin-bottom: 60px;
position: relative;
}
#bnr_event img{
width: 93%!important;
height: auto
}
#bnr_event .swiper-button-next,
#bnr_event .swiper-button-prev{
display: none;
}

.bnr_contents{
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
.bnr_contents li{
width: 49%;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.bnr_contents li:nth-child(3n){
margin-right: 2%;
}
.bnr_contents li:nth-child(2n){
margin-right: 0px;
}

.bnr_contents li img{
width: 100%;
height: auto;
}



.sns{
display: none;
width: 490px;
}
.sns h2{
margin-bottom: 10px;
}
.sns.instagram{
float: left;
}
.sns.facebook{
float: right;
}
/*--FOOTER_CONTACT-----------------------*/
#footer_contact{
clear: both;
background-color: #222223;
color: #FFF;
}
#footer_contact .inner{
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 25px;
}
#footer_contact .inner h2{
text-align: center;
padding-bottom: 20px;
}
#footer_contact .inner ul{
width: 92%;
margin-left: auto;
margin-right: auto;
border-right: none;
}
#footer_contact .inner ul li{
float: left;
width: calc(100% - 3px);
border-left: 1px solid #FFFFFF;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
font-size: 11px;
font-weight: bold;
border-right: 1px solid #FFFFFF!important;
margin-bottom: 30px;
}
#footer_contact .inner ul li:first-child{
width: 100%;
float: none;
border-left: none!important;
border-right:none!important;
font-size: 11px;
}
#footer_contact .inner ul li:nth-child(4){
border-right: 1px solid #FFFFFF;
}

#footer_contact .inner ul li img{
margin-top: 10px;
}
#footer_contact .inner ul li:nth-child(1) img,
#footer_contact .inner ul li:nth-child(3) img,
#footer_contact .inner ul li:nth-child(4) img{
width:100%;
height: auto;
}
#footer_contact .inner ul li a{
	margin-top: 10px;
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	color: #222223;
	font-size: 14px;
	line-height: 36px;
	text-decoration: none;
	border: 1px solid #FFFFFF;
}
#footer_contact .inner ul li:first-child a{
width: 80%;
	background-color: transparent;
border: none;
}
#footer_contact .inner ul li a:hover{
background-color: #222223;
color: #FFF;
}

/*--FOOTER-----------------------*/
#footer {
background-color: #f2f2f2;
clear: both;
}
#footer .inner {
width: 90%;
margin-right: auto;
margin-left: auto;
padding-top: 40px;
padding-bottom: 90px;
}
#footer #ft_gnav{
display: none;
position: fixed;
width: 100%;
height: 100vh;
background-color: #f2f2f2;
z-index: 9999998;
top: 0;
left:0;
padding-top: 50px;
}
#footer ul {
height: auto;
font-size: 16px;
}
#footer li {
float: none;
margin-right: 0;
margin-bottom: 7px;
text-align: center;
font-family: "Roboto", sans-serif;
font-weight: 400;
letter-spacing: 0.02em
}
#footer li a:hover{
text-decoration: none
}
#footer li:nth-child(8),#footer li:nth-child(9) {
float: none;
margin-right: 0px;
margin-left: 0px;
}
#footer .info{
font-size: 11px;
line-height: 1.6;
}
#footer .info_ft a{
	margin-top: 10px;
	display: inline-block;
	width: 15em;
	color: #222223;
	font-size: 13px;
	padding: 8px 20px 8px 20px;
	line-height: 1em;
	text-decoration: none;
	border: 1px solid #222223;
}
#footer .logo{
display: none;
float: left;
margin-right: 50px;
}

#footer .adress_wrap{
float: none;
margin-right: 0px;
margin-bottom: 30px;
}

#footer .pageTop {
display: inline;
float: none;
margin-top: 0px;
text-align: right;
}
#footer .adress a {
text-decoration: underline!important
}
/*--COMMON-----------------------*/
.contents {
width: 92%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 50px;
}
#ttl_box {
width: 100%;
/*background-color: #222223;*/
}
#ttl_box h2{
width: 100%;
margin-right: auto;
margin-left: auto;

}
#ttl_box h2 img{
padding-left: 25px;
}
#mv_sub{
width: 100%;
height: 400px;
background-color: #000;
text-align: center;
}
.slide-bottom{
opacity: 0
}
.slideInUp{
animation-name: slideInUp;
animation-duration: 2s;
}
@-webkit-keyframes slideInUp {
    0% {opacity:0;top:50px;}
	100% {opacity:1;top:0px;}
}
.fadeIn01{
animation-name: fadeIn01;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn01 {
    0% {opacity:0;}
	30% {opacity:1;}
	60% {opacity:1;}
	100% {opacity:1;}
}
.fadeIn02{
animation-name: fadeIn02;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn02 {
    0% {opacity:0;}
	30% {opacity:0;}
	60% {opacity:1;}
	100% {opacity:1;}
}
.fadeIn03{
animation-name: fadeIn03;
animation-duration: 2s;
}
@-webkit-keyframes fadeIn03 {
    0% {opacity:0;}
	30% {opacity:0;}
	60% {opacity:0;}
	100% {opacity:1;}
}
.bar a {
  position: relative;
  display: inline-block;
  transition: .3s;
  padding-bottom: 3px;
}
.bar a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #000;
  opacity: 0;
  transition: .3s;
}
.bar a:hover::after {
  bottom: 0;
  opacity: 1;
}
.is-fixed {
  position: fixed;
  top: 0;
  z-index: 2;
  /*width: 100%;*/
}
/*--WORKS DETAIL-----------------------*/
#w_detail{
font-size: 12px;
line-height: 1.8;
}
#w_detail img{
margin-bottom: 20px;
width: 100%;
height: auto;
}
#w_detail .ttl{
font-weight: 500;
font-size: 14px;
padding-bottom: 15px;
}
#w_detail .txt{
width: 100%;
float: none;
text-align: justify;
margin-bottom: 20px;
}
#w_detail .data{
font-size: 10px;
background-color: #f0f0f0;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: auto;
float: none;
}
#w_detail .tag{
clear: both;
border-top: 1px solid #000000;
margin-top: 10px;
padding-top: 10px;
font-size: 9px;
margin-bottom: 50px;
}
#w_detail .btn_back img{
margin-bottom: 0px;
width: 110px;
height: auto;
}
/*--ABOUT US-----------------------*/
.about_mv{
background-image: url(../../about/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
}

.about_mv .copy{
padding-top: 50px;
text-align: center!important;
display: block;
width: 50px;
margin-left: auto;
margin-right: auto;
line-height: 50px;
font-size: 20px;
}
.about_mv .copy img{
width: 280px;
height: auto;
}
.about_read{
text-align: justify;
font-weight: 500;
padding-bottom: 90px;
font-size: 13px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.about_read br{
display: none;
}
.about_read p{
margin-bottom: 2em;
}
.about_read img{
width: 100%;
height: auto;
}
.outline{
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
}
.outline ul{
display:table;
font-weight: bold;
margin-bottom: 30px;
width: 100%;
}
.outline ul li{
display:table-cell;
vertical-align:middle;
text-align:center;

}
.outline ul li:nth-child(odd){
background-color: #e7e9ed;
width: 30%;
height: 150px;

}
.outline ul li:nth-child(even){
width: 5%;
height: 150px;
font-size: 20px;
}
.outline h3{
font-size: 16px;
font-weight: bold;
border-top: 2px solid #e7e9ed;
  border-bottom: 2px solid #e7e9ed;
  text-align: center;
  margin-bottom: 20px;
}
.outline p{
font-size: 12px;
text-align: justify;
line-height: 1.8em;
}
.feature ul{
line-height: 1.2em;
}
.feature ul li{
background-color: #e7e9ed;
width: 48%;
float: left;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 2%;
min-height: 250px;
}
.feature ul li img{
width: 100%;
height: auto;
}
.feature ul li:last-child{
margin-right: 0px;
}
.feature ul li .ttl{
font-size: 12px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
.feature ul li .exp{
font-size: 10px;
padding:12px;
}
.feature a{
text-decoration: underline
}
.ph_staff {
margin-top: 50px;
}
.ph_staff img{
width: 100%;
height: auto
}


.message{
background-color: #e7e9ed;
}
.message .inner{
width: 90%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
}
.message .inner .ph{
float: none;
width: 70%;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
text-align: center;
margin-bottom: 15px;
}
.message .inner .ph img{
width: 100%;
height: auto;
}
.message .inner .txt{
width: 100%;
padding-right: 0px;
float: right;
font-size: 12px;
line-height: 1.8em;
text-align: justify;
}
.message .inner .txt .ttl{
font-size: 14px;
font-weight: bold;
padding-bottom: 1.2em
}
.message .inner .txt .name{
text-align: right;
padding-top: 2em;
}
.ttl_company{
text-align: center;
padding-bottom: 40px;
}
table.company{
width: 100%;
border-top: 1px solid #e0e0e0;
font-size: 10px;
float: none;
margin-bottom: 20px;
}
table.company th,table.company td{
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #e0e0e0;
}
table.company th{
white-space: nowrap;
}
#map{
width: 100%;
height: 230px;
float: none;
}
/*--RECRUIT-----------------------*/
.recruit_mv{
background-image: url(../../recruit/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
}

.recruit_mv .copy{
padding-top: 80px;
}
.recruit_mv .copy img{
width: 280px;
height: auto;
}
.recruit_read{
background-color: #e7e9ed;
font-size: 10px;
text-align: justify;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin-bottom: 20px;
}
.rec_ttl{
font-weight: bold;
text-align: center;
font-size: 16px;
padding-top: 40px;
padding-bottom: 40px;
}
table.recruit{
width: 100%;
border-top: 1px solid #e0e0e0;
font-size: 11px;
}
table.recruit th,table.recruit td{
padding-left: 2%;
padding-right: 2%;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #e0e0e0;
display: block;
width: 96%;
}
table.recruit th{
background-color: #e7e9ed;
}
.rec_ph ul{
}
.rec_ph ul li{
width: 23%;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
.rec_ph ul li img{
width: 100%;
height: auto;
}
.rec_ph ul li:nth-child(4n){
margin-right: 1%;
}



/*--STAFF-----------------------*/
.staff_mv{
background-image: url(../../staff/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
height: 200px!important;
}
.staff ul{
line-height: 1.2em;
margin-top: 30px;
}
.staff ul li{
width: 46%;
height: auto;
min-height: 400px;
float: left;
margin-left: 2%;
margin-right: 2%;
text-align: justify
}
.staff ul li img{
width: 100%;
height: auto;
}
.staff ul li:nth-child(3n){
margin-right: 1%;
}
.staff ul li:nth-child(4n){
margin-right: 1%;
}
.staff ul li .name{
font-size: 12px;
font-weight: bold;
padding-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
.staff ul li .en{
font-size: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}
.staff ul li .exp{
border-top: 1px solid #e0e0e0;
font-size: 10px;
padding-top: 8px;
padding-left: 10px;
padding-right: 10px;
line-height: 1.5;
}
.staff ul li .exp p{
margin-bottom: 3px;
}
/*--FAQ-----------------------*/
.faq_mv{
background-image: url(../../faq/images/mv_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
height: 200px!important;
}
#faq_nav{
width: 100%;
float: none;
line-height: normal;
font-size: 12px;
font-weight: 400;
padding-top: 15px;
margin-bottom: 50px;
}
#faq_nav li{
margin-bottom: 1em;
padding-left: 10px;
transition: .6s;
}
#faq_nav li a{
text-decoration: none;
}
#faq_nav li.on{
background-color: #FFF;
border-left: none;
}
.faq{
width: 100%;
float: right;
}
.faq h3{
padding-top: 26px;
font-size: 16px;
font-weight: 500;
margin-bottom: 30px;
}
.faq .faq_q{
/*background-color: #e7e9ed;*/
font-weight: 200;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 50px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 16px;
line-height: 1.5;
background-image: url(../../faq/images/ico_q.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 30px 30px;
}
.faq .faq_a{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 50px;
border-radius: 4px;
margin-bottom: 50px;
font-size: 12px;
line-height: 1.5;
background-image: url(../../faq/images/ico_a.png);
background-repeat: no-repeat;
background-position: 10px 15px;
background-size: 30px 30px;
}

/*--PRIVACY-----------------------*/
.privacy {
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.privacy h4{
font-size: 13px;
font-weight: bold;
padding-top: 1.5em;
}
.privacy .ind {
  padding-left: 1em;
  text-indent: -1em;
}
.privacy a{
text-decoration: underline;
}

/*--NEWS-----------------------*/

.news_ttl{
font-size: 15px;
font-weight: 500;
border-bottom: 2px solid #303030;
margin-bottom: 30px;
}
.entry-content img{
width: 100%!important;
height: auto!important;
}
/*--CONTACT-----------------------*/
.contact {
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 14px;
background-color: #F0F2F6;
}
.contact .ttl{
font-size: 15px;
padding-bottom: 15px;
}
.contact ul{
border-bottom: 4px solid #222223;
text-align: center;
margin-bottom: 10px;
}
.contact ul a:hover{
text-decoration: none;
}
.contact ul li{
display: block;
width: 50%;
float: left;
background-color: #e7e9ed;
font-size: 13px;
}
.contact ul li:hover{
background-color: #C4C5CA;
}
.contact ul li a{
display: block;
padding-top: 10px;
padding-bottom: 10px;
color: #707070;
}
.contact ul li a:hover{
color: #222223;
}
.contact ul li.active{
background-color: #222223;
}
.contact ul li.active a{
cursor: default;
color: #FFF;
}
.contact .req{
color: #DF4800
}
.contact table{
width: 100%;
margin-top: 10px;
}
.contact table td,.contact table th{
padding: 10px;
display: block;
width: calc(100% - 20px);
}

:focus{outline: none;}
.col{position: relative;}
input[type="text"],textarea{color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;border-radius:3px;}
.effect{border: 0; padding: 8px 12px; border: 1px solid #ccc; position: relative; background: transparent;}
.effect ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #F0F2F5; transition: 0.3s; z-index: -1;}
textarea{display:block;}
.effect:focus ~ .focus-bg{transition: 0.3s; width: 100%;}

@font-face{font-family:"IonIcons";src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");src:url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"),url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");font-weight:normal;font-style:normal}

.select-wrap {
    position: relative;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 43px;
    color: #7F878C;
    pointer-events: none;
}
select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#333;
    width:100%;
    border-radius:3px;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}
.select-wrap.select-inverse > select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #fff;
}
.form_end button {
    padding: 10px 60px;
    font-size: 1.2em;
	font-weight: 500;
    background-color: #000;
    color: #fff;
    border-style: none;
	cursor: pointer;
	display:block;
  margin: 0 auto
}
.form_end button:hover {
background-color: #323232;
    color: #fff;
}
.form_end{
border-top: 2px solid #ECECEC;
padding-top: 10px;
}
/*--SP NAV-----------------------*/

#panel-btn{
  display: inline-block;
  position: fixed;
  width: 40px;
  height: 40px;
  margin: 20px 0 10px;
  border-radius: 50%;
  
  right: 20px;
  top: 0px;
  z-index: 9999999;
  animation-name: ani_header;
animation-duration: 2s;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #000;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}



/*--MODEL HOUSE-----------------------*/
#modelhouse .mv{
margin-bottom: 20px;
}
#modelhouse .mv img{
width: 100%;
height: auto;
}
#modelhouse .ttl{
padding-left: 0px;
float: none;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
}
#modelhouse .ttl img{
float: none;
width: 30%;
height: auto;
}
#modelhouse .ttl .hd{
font-size: 18px;
font-weight: 500;
clear: both;
}
#modelhouse .reserve{
padding-right: 0px;
float: none;
margin-bottom: 10px;
text-align: center;
background-color: #000000
}
#modelhouse .reserve a{
color: #FFF
}
#modelhouse .detail{
    border: 1px solid #000000;
    padding: 20px;
    line-height: 1.5;
}
#modelhouse .detail iframe{
float: none;
width: 100%;
height: 250px;
margin-right: 0px;
}
#modelhouse .detail .txt{
width: 100%;
float: none
}
#modelhouse .detail .txt .notice{
    border-top: 1px solid #999999;
    margin-top: 20px;
    padding-top: 20px;
    font-size: 12px;
}
#modelhouse .concept_read{
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 1em;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    padding-top: 30px;
    padding-bottom: 30px;
}
#modelhouse .mh_detail{
margin-top: 80px;
margin-bottom: 40px;
}
#modelhouse .mh_detail .ph{
float: none;
margin-right: 0px;
margin-bottom: 10px;
}
#modelhouse .mh_detail .ph img{
width: 100%;
height: auto;
}
#modelhouse .mh_detail .txt .head_ttl{
font-size: 18px;
font-weight: 500;
margin-bottom: 0.5em;
letter-spacing: 0.1em;
}
#modelhouse .mh_detail .txt strong,
#modelhouse .txt.end strong,
#modelhouse .concept_p strong{
background: linear-gradient(transparent 70%, #ffff66 70%);
}
#modelhouse .txt.end{
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid #9D9D9D;
    border-bottom: 1px solid #9D9D9D;
    margin-bottom: 50px;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 1px solid #9D9D9D;
    border-right: 1px solid #9D9D9D;
}
#modelhouse .txt.end br{
display: none;
}
#modelhouse .gallary ul{
margin-bottom: 30px;
}
#modelhouse .gallary ul li{
width: 48%;
margin-right: 4%;
margin-bottom: 22px;
float: left;
}
#modelhouse .gallary ul li:nth-child(6n){
margin-right: 0px;
}
#modelhouse .gallary ul li:nth-child(2n){
margin-right: 0px;
}
#modelhouse .gallary ul li img{
width: 100%;
height: auto;
}

/*--LAND-----------------------*/
.land_mv{
    background-image: url(../../land/images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    height: 200px!important
}
.land_mv h2{
color: #FFF;
font-size: 18px;
font-weight: 100;
text-align: center;
}
.tochi_read{
text-align: left;
font-size: 13px;
font-weight: 500;
margin-bottom: 60px;
}
.tochi_read br{
display: none
}
.tochi_read span {
    background: linear-gradient(transparent 70%, #fff000 70%);
}
.tochi_cont{
margin-bottom: 50px;
}
.tochi_cont .heading{
font-size: 19px;
font-weight: 400;
line-height: 1.4;
margin-bottom: 40px;
}
.tochi_cont .heading br{
display: none;
}
.tochi_cont .heading .ico{
float: left;
margin-right: 20px;
}
.tochi_cont .heading .ico img{
width: 70px;
height: auto;
margin-top: -10px;
}
.tochi_cont .heading p{
padding-left:1em;
text-indent:-1em;
}
.tochi_cont .fig{
float: none;
margin-bottom: 20px;
}
.tochi_cont .fig img{
width: 100%;
height: auto;
}
.tochi_cont .txt{
width: 100%;
float: none;
font-size: 13px;
}
.tochi_cont .txt p{
margin-bottom: 1em;
}
.tochi_cont .txt span {
    background: linear-gradient(transparent 70%, #fff000 70%);
}
.contact_tochi_header{
padding-top: 10px;
padding-bottom: 10px;
background-color: #222223;
color: #FFF;
text-align: center;
font-size: 16px;
margin-bottom: 15px;
}
.contact_tochi_radio{
margin-top: 40px;
}
.contact_tochi_radio label{
    display: block;
    float: none;
    background-color: #FFF!important;
    color: #1C1C1C;
    text-align: left;
    font-size: 14px!important;
    width: calc(100% - 40px);
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 20px;
    border: 1px solid #1C1C1C;
}
.contact_tochi_radio label:hover{
background-color: #4E4E4E!important;
}

/*--FLOW-----------------------*/
.flow_mv{
    background-image: url(../../flow/images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.flow_ttl{
text-align: center;
margin-bottom: 30px;
}
.flow_list{
margin-bottom: 30px;
}
.flow_list li{
width: 49%;
margin-right: 2%;
background-color: #222223;
color: #FFF;
text-align: center;
float: left;
font-size: 12px;
line-height: 1.2;
padding: 15px 0px;
transition: .3s;
margin-bottom: 20px;
}
.flow_list li:last-child{
margin-right: 0;
}
.flow_list li:nth-child(2n){
margin-right: 0;
}
.flow_list li .label{
 display: flex;
  align-items: center;
  justify-content: center;
height: 3em;
margin-top: 5px;
}
.flow_list li a{
color: #FFF;
text-decoration: none;
display: block;
}
.flow_list li:hover{
background-color: #4C4C4C;
}
.flow_list li .thum{
float: left;
padding-left: 10%;
margin-right: -10%;
}

.flow_prof{
margin-bottom: 50px;
}
.flow_prof .thum{
float: left;
margin-right: 10px;
}
.flow_prof .thum img{
width: 70px;
height: auto
}
.flow_prof .balloon1-left {
  position: relative;
  display: inline-block;
  margin: 0em 0 1.5em 0px;
  padding: 7px 20px;
  min-width: 70px;
  max-width: 100%;
  color: #555;
  background: #e7e9ed;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  width: 200px;
}
.flow_prof .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 0px solid transparent;
  border-right: 0px solid #e7e9ed;
}
.flow_prof .balloon1-left p.heading {
  font-size: 14px;
}

.flow_wrap{
margin-bottom: 50px;
}
.flow_wrap .step_num{
width: 100%;
float: none;
margin-bottom: 15px;
}
.flow_wrap .step_num .label{
background-color: #222223;
color: #FFF;
line-height: 1.2;
padding: 5px 20px;
border-radius: 4px;
}
.flow_wrap .step_cont{
width: 100%;
float: none
}
.flow_wrap .step_cont .acount{
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.flow_wrap .step_cont .acount .thum{
float: left;
margin-right: 10px;
}
.flow_wrap .step_cont .acount span{
margin-top: 5px;
display: inline-block
}
.flow_wrap .step_cont .entry{
    border-left: 2px solid #E7E9ED;
    padding-left: 40px;
    margin-left: 22px;
    margin-bottom: 20px;
    line-height: 1.7;
}
.flow_wrap .step_cont .entry .photo{
float: left;
margin-right: 15px;
padding-bottom: 20px;
}
.flow_wrap .step_cont .entry .txt{
margin-bottom: 15px;
}
.flow_wrap .step_cont .entry .photo img{
border-radius: 4px;
width: 100%;
height: auto;
}
.flow_wrap .step_cont .entry .comment{
background-color: #e7e9ed;
font-size: 11px;
line-height: 1.4;
padding: 15px;
border-radius: 4px;
}
.flow_wrap .step_cont .entry .comment .thum{
float: left;
margin-right: 10px;
}
.flow_wrap .step_cont .entry .comment a{
text-decoration: underline
}

.flow_wrap .end_message{
text-align: center;
font-size: 14px;
margin-top: 50px;
}

/*20201031イベント*/
.eve_mv img{
width: 100%;
height: auto
}
.detail_btn a{
background-color: #000;
color: #FFF!important;
padding: 2px 20px;
border-radius: 20px;
}
.eve_detail{
/*width: 730px;*/
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
.eve_detail .read{
text-align: justify;
margin-bottom: 1em;
}
.eve_detail .read br{
display: none
}
.eve_detail table{
width: 100%;
border-top: 1px solid #D1D1D1;
margin-bottom: 2em
}
.eve_detail table th,
.eve_detail table td{
    vertical-align: top;
    border-bottom: 1px solid #D1D1D1;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
}
.eve_detail table th{
white-space: nowrap;
padding-right: 1em;
}
.eve_detail .column{
border: 1px solid #D1D1D1;
padding: 10px;
font-size: 12px;
margin-bottom: 1em;
line-height: 1.6;
}
.res_tel{
text-align: center;
margin-bottom: 1em;
}
.res_tel span{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #555555;
}
.eve_notice{
font-size: 12px;
}
.eve_ph{
text-align: center;
margin-bottom: 2em;
}
.eve_ph li{
display: inline
}
.eve_ph li img{
width: 45%;
height: auto;
margin-bottom: 8px;
}

.btn_reserve{
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
}
.btn_reserve a{
    display: block;
    background-color: #213982;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
    width: 100%;
    text-decoration: none;
    background-image: -webkit-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: -moz-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: -o-linear-gradient(270deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
    background-image: linear-gradient(180deg,rgba(49,49,49,1.00) 50%,rgba(0,0,0,1.00) 50%);
}
.btn_reserve a span{
font-size: 12px;
}
.btn_reserve a:hover{
    background-image: -webkit-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: -moz-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: -o-linear-gradient(270deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
    background-image: linear-gradient(180deg,rgba(105,105,105,1.00) 50%,rgba(55,55,55,1.00) 50%);
}
.btn_ttl{
font-size: 18px;
text-align: center;
line-height: 1.3
}
.btn_weblink{
text-align: center;
margin-top: 2em;
}
.btn_weblink a{
display: inline-block;
background-color: #000000;
color: #FFF;
padding: 10px 50px;
border-radius: 8px;
}


.point_list{
text-align: center;
padding-bottom: 3em;
font-weight: 500;
}
.point_list li span {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

.point_list_thumbox{
text-align: center;
padding-bottom: 3em;
font-weight: 500;
font-size: 14px;
}
.point_list_thumbox li {
float: left;
width: 100%;
margin-right: 0%;
margin-bottom: 2em
}
.point_list_thumbox li:last-child {
margin-right: 0%;
}
.point_list_thumbox li img{
width: 100%;
height: auto
}
.point_list_thumbox li span {
background: linear-gradient(transparent 70%, #ffff66 70%);
}

.eve_read{
font-weight: 500;
text-align: left;
font-size: 16px;
padding-bottom: 40px;
}
.eve_read br{
display: none
}
.eve_lp img{
width: 100%;
height: auto
}

input{ font-size:16px!important; } /*フォームのフォーカスOFF*/
textarea{ font-size:16px!important; }
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-size:16px;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

}