@charset "utf-8";

#opening{background: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999;}
#opening .imgs {
	width: 420px;
	height: 219px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -110px 0 0 -210px;
	background: url(/images/common/bibry.png) no-repeat -2000px -2000px;
}
body {overflow: hidden;}
.logoend body {overflow: auto;}

/*@media screen and (min-width:641px){*/

#menu {transform: translate(-70px, 0); transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
dl.snslink {transform: translate(70px, 0); transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.openingend #menu,
.openingend dl.snslink {  transform: translate(0, 0);}
.showparts #menu,
.showparts dl.snslink {  transform: translate(0, 0);}

/*
main:after{content: ''; background: url(/images/index/mv/bg.jpg) center top no-repeat; width: 1200px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -600px; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px);}
main.show1:after {opacity: 1;  transform: translate(0, 0);}
*/

.firstview {min-height: 881px; font-size: 0; line-height: 1; overflow: visible; position: relative;}
.firstview:after {content: ''; width: 200%; height: 900px; background: url(/images/index/mv/mask.png) center top repeat-x; position: absolute; left: 50%; top: 0; margin-left: -100%;}
.firstview:before {content: ''; width: 132px; height: 900px; background: url(../images/index/mv/mask-left.png) center top repeat-y; position: absolute; left: 0; top: 0;}
#maskright { width: 132px; height: 900px; background: url(../images/index/mv/mask-right.png) center top repeat-y; position: absolute; right: 0; top: 0; z-index: 100; }
.firstview h1 {z-index: 100;}
.firstview h1,
.firstview div.character {position: absolute; left: 50%; top: 0; width: 1200px; height: 1281px; margin-left: -600px; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.firstview div.character{transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px); opacity: 0;}
.firstview h1 span{background: url(/images/index/mv/logo.png) center center no-repeat; position:absolute; top: 0; left: 0; margin-left: 0; width: 1200px; height: 881px; z-index: 1;}
.firstview h2 {background: url(/images/index/mv/text.png) center center no-repeat; position:absolute; top: 0; left: 50%; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 0); margin-left: -600px; width: 1200px; height: 881px; z-index: 2; text-indent: 200%; overflow: hidden; white-space: nowrap;}
.firstview div.character span{background: url(/images/index/mv/chara.png) center center no-repeat; position:absolute; top: 0; left: 0; margin-left: 0px; width: 1200px; height: 881px; z-index: 0; zoom:1;}
main .pcbg {width: 100%; height: 861px; position: absolute; left: 0%; top: -30px; margin-left:0; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px); z-index: -1; min-width: 1200px;}
main .pcbg span{background: url(/images/index/mv/bg.jpg) center center no-repeat; width: 100%; height: 861px;  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); position: absolute; left: 0; top: 0; background-size: cover;}
main.show1 .pcbg {opacity: 1;  transform: translate(0, 0); top: -50px;}

.safari main .pcbg span,
.safari .firstview h1 span,
.safari .firstview div.character span,
.edge main .pcbg span,
.edge .firstview h1 span,
.edge .firstview div.character span,
.ios main .pcbg span,
.ios .firstview h1 span,
.ios .firstview div.character span,
.ff main .pcbg span,
.ff .firstview h1 span,
.ff .firstview div.character span,
.chrome main .pcbg span,
.chrome .firstview h1 span,
.chrome .firstview div.character span {transition: 0.8s ease-out;}

.firstview.show2 div.character,
.firstview.show2 div.character span,
.firstview.show3 h1 ,
.firstview.show4 h2{opacity: 1;  transform: translate(0, 0);}

.firstview ul {width: 100%; height: 100%; position: relative;}
.firstview ul li:nth-child(1) span{background: url(/images/index/mv/logo.png) center center no-repeat; position:absolute; top: 0; left: 50%; opacity: 1; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 0); margin-left: -600px; width: 1200px; height: 881px; z-index: 1; display: block;}

.img-box { position: relative text-align: center; }
.img-box .active {position: absolute; left: 0; top: 0; opacity: 0; transition: 0.5s; // ゆっくり}
.img-box:hover .active {opacity: 0; }

/* information */

#information { font-size: 0; line-height: 1; width: 1020px; margin: 0 auto; min-width: 1020px;}
#information h2 {background-image: url(/images/index/infomation.png);}

#information div {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: stretch;}
#information .item {display: block; color: #000; padding: 14px 20px; width: 340px; text-align: left;}
#information a:hover {background-color: #f4ede2;}
#information .item img {width: 300px; height: auto; border: 1px solid #c3a150;}
#information .item time {font-size: 13px; color: #c3a252; margin-bottom: 8px; display: block;}
#information .item h3 {font-size: 14px; line-height: 29px; color: #000; margin: 8px 0 7px;}
#information .item:nth-child(3n+1) {clear: both;}

/* works */
#works {background: #fdfaf5;}
#works h2 {background-image: url(/images/index/works.png);}
#works article {width: 100%; text-align: left; padding: 0 0 0 10px;}
#works article + article {margin-top: 80px;}
#works article time {font-size: 13px; color: #c3a252; margin-bottom: 7px; display: block; width: 290px; letter-spacing: 0.05em;}
#works article h3 {font-size: 30px; line-height: 43px; position: relative; margin-bottom: 28px; width: 280px; white-space: nowrap; font-weight: 900; letter-spacing: 0.05em;}
#works article h3:after{content: ''; width: 39px; height: 3px; background: #000; position: absolute; left: 0; bottom: -14px;}
#works article img {float: right; border: 1px solid #c3a150;}
#works article p {font-size: 13px; line-height: 29px; width: 280px;}
#works article p + p {margin: 12px 0 0;}
#works article p.btn {margin-top: 20px;}

/* company */
#companymap h2 {background-image: url(/images/index/company.png);}
#companymap header{position: relative; width: 986px; margin: 0 auto;}
#companymap header .btn{position: absolute; right: 0; top: 0;}
#companymap .slider {width: 986px; overflow: hidden; position: relative; margin-bottom: 47px;}
#companymap h3{font-size: 14px; line-height: 33px; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 3px;}
#companymap p {font-size: 14px; line-height: 33px; letter-spacing: 0.1em;}
#companymap p.about {font-size: 13px; line-height: 26px; color: #5d5d5d; border: 1px solid #c3a150; display: inline-block; margin: 0 auto; padding: 10px 40px; margin-top: 29px;}
#companymap p + p {margin-top: 14px;}
#googlemap {padding: 86px 0 0; text-align: left;}
#googlemap h3,
#googlemap dl{font-size: 12px; line-height: 29px; padding-left: 32px;zoom:1; overflow: hidden;}
#googlemap dl dt {float: left; width: 74px;}
#googlemap dl dd {zoom:1; overflow: hidden;}
#map {width: 631px; height: 236px; float: left; border: 1px solid #c3a150;}

/* recruit */
#recruit {background: #fdfaf5; height: 531px; background-color: #fdfaf5; background-image: url(../images/index/recruit-bg.jpg); background-position: center bottom; background-repeat: no-repeat;}
#recruit h2 {background-image: url(/images/index/recruit.png);}
#recruit p {font-size: 14px; line-height: 33px; letter-spacing: 0.1em;}
#recruit p.btn {margin: 62px 0 0;}
#recruit p.btn a{width: 184px; margin: 0 auto;}
#recruit p.btn a:hover {background-color: #c3a150; color: #fff;}

/* contact */
#contact {}
#contact h2 {background-image: url(/images/index/contact.png);}
#contact p {font-size: 14px; line-height: 33px; letter-spacing: 0.1em; margin-bottom: 14px;}
#contact p.btn a{width: 226px;margin: 0 auto;}
#contact input,
#contact textarea {background: #f5e7c4; width: 716px; margin-top: 15px; height: 34px; line-height: 34px; padding: 0 15px; font-size: 14px;}
#contact textarea {height: 200px; line-height: 24px; padding: 4px 15px;}
#contact p.err {color: #ff0000; font-size: 12px; line-height: 1; margin: 0 auto 0; display: none; text-align: left; width: 716px; font-weight: bold;}
#contact p.err span {display: block;}
#contact .error + p.err {display: block; padding: 7px 0 0; margin-bottom: -5px;}
:placeholder-shown {color: #fff; }
::-webkit-input-placeholder {color: #fff; }
:-moz-placeholder {color: #fff; opacity: 1; }
::-moz-placeholder {color: #fff; opacity: 1; }
:-ms-input-placeholder {color: #fff; }
::-webkit-input-placeholder {color: #fff; letter-spacing: 0.1em;}
input:-webkit-autofill,
textarea:-webkit-autofill{box-shadow: 0 0 0 1000px #f5e7c4 inset;}
#contact button{background:#fff; border: 2px solid #c3a150; color: #c3a150; display: block; width: 226px; height: 46px; line-height: 42px; text-align: center; transition: 0.4s; letter-spacing: 0.1em; margin: 33px auto 0;}
#contact button:hover {background-color: #c3a150; color: #fff;}
#contact button[disabled='disabled'] {opacity: 0; cursor: default; height: 0;}
#contact button[disabled='disabled']:hover {background-color: #fff; color: #c3a150;}
#contact .message {display: none; font-size: 12px; color: #c3a150; line-height: 1; padding: 20px 0 0; margin: 0;}
.ios input[type="button"],.ios input[type="text"],.ios textarea {-webkit-appearance: none; border-radius: 0;}

/* twitter */
#twitter {background: #fdfaf5;}
#twitter h2 {background-image: url(/images/index/twitter.png);}
#twitter .box {min-height: 50px; width: 214px; display: inline-block; vertical-align: top;}
#twitter .box#t2 {min-height: 60px; padding-top: 1px; margin: 0 20px 0 40px;}
#twitter .box#t3 {min-height: 70px; padding-top: 2px; margin: 0 40px 0 20px;}
#twitter .box#t4 {min-height: 70px; padding-top: 3px;}
#twitter .entry {border-bottom: 1px solid #c3a150; font-size: 12px; line-height: 20px; padding:0 0 20px; margin: 0; text-align: left; letter-spacing: 0.1em;}
#twitter .entry + .entry {margin-top: 30px;}
#twitter .entry:after {content: ''; clear: both; display: block;}
#twitter .entry *{word-break: break-all;}
#twitter .entry h3 {font-weight: bold; font-size: 13px; line-height: 28px; color:#c3a150;}
#twitter .entry ul{float: right;}
#twitter .entry ul li {list-style: none; display: inline-block; margin-left: 15px;}
#twitter .entry ul li a {display: block; width: 17px; height: 17px; background: url(/images/index/icon-replayto.png); background-size: 100% auto; font-size: 0; line-height: 1; transition: 0.4s;}
#twitter .entry ul li:nth-child(2) a {background-image: url(/images/index/icon-retweet.png);}
#twitter .entry ul li:nth-child(3) a {background-image: url(/images/index/icon-favorite.png);}
#twitter .entry ul li a:hover {opacity: 0.7;}
#twitter .entry figure {width: 100%; padding: 10px 0;}
#twitter .entry figure img{width: 100%;}
#twitter .entry a{text-decoration: none;}
#twitter .entry a:hover {text-decoration: underline;}
#twitter .entry p.head {color: #848484; margin-bottom: 10px;}
#twitter p.btn {margin: 50px 0 0;}
#twitter p.btn a{width: 226px;margin: 0 auto; font-size: 15px; position: relative; text-align: left; padding: 0 0 0 85px;}
#twitter p.btn a:after,
#twitter p.btn a:before{content: ''; background: url(/images/index/icon-twitter.png) left top no-repeat; width: 24px; background-size: 100% auto; height: 24px; position: absolute; left: 33px; top: 12px; transition: 0.4s;}
#twitter p.btn a:before{opacity: 0; background-image: url(/images/index/icon-twitter-hover.png);}
#twitter p.btn a:hover:before{opacity: 1;}
#twitter p.btn a:hover:after{opacity: 0;}
#twitter #twitter-sp {display: none;}

.swiper-button-next,
.swiper-button-prev{background: url(/images/common/icon-arr.png) center center no-repeat; width: 21px; height: 23px; background-size: 100% auto; vertical-align: middle; margin-top: -16px; left: 14px;}
.swiper-button-next:after,
.swiper-button-prev:after{background: url(/images/common/icon-arr-hover.png) center center no-repeat; width: 100%; height: 100%; background-size: 100% auto; position: absolute; left: 0; top: 0; content: ''; opacity: 0; transition: 0.3s;}
.swiper-button-next{left: inherit; right: 14px; transform: rotate(180deg);}
.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {opacity: 1;}

/*}*/


@media screen and (min-width:1200px){
main:after{background-size: 100% auto; width: 100%; left: 0; margin: 0;}
}
@media screen and (min-width:1920px){
}
@media screen and (max-width:750px){

#opening .imgs {
transform: scale(0.6,0.6);
}


#menu {transform: translate(4.5rem, 0);}
dl.snslink {transform: translate(0, 0);}


main:after{content: ''; background: url(/images/index/mv/bg-sp.jpg) center top no-repeat; width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin-left: 0; background-size: 100% auto; opacity: 0; transition: 0.8s; transform: translate(0, 20px);}
main.show1:after {opacity: 1;  transform: translate(0, 0);}

.firstview {min-height: 44.1rem;}

.firstview h1,
.firstview div.character {left: 0; top: 0; width: 100%; height: 44.1rem; margin-left: 0;}

.firstview h1 span {background: url(/images/index/mv/logo-sp.png) center center no-repeat; left: 0; margin: 0; width: 100%; height: 44.1rem; background-size: 100% auto;}
.firstview h2 {background: url(/images/index/mv/text-sp.png) center center no-repeat; left: 0; margin: 0; width: 100%; height: 44.1rem; background-size: 100% auto;}
.firstview div.character span{background: url(/images/index/mv/chara-sp.png) center center no-repeat; left: 0; margin: 0; width: 100%; height: 44.1rem; background-size: 100% auto;}
/*
.firstview .character span 
.firstview h1 span {display: none;}

.firstview h1,
.firstview div.character {position: absolute; left: 50%; top: 0; width: 1200px; height: 881px; margin-left: -600px;}
.firstview div.character{transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px);}
.firstview h1 span{background: url(/images/index/mv/logo.png) center center no-repeat; position:absolute; top: 0; left: 0; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 0); margin-left: 0; width: 1200px; height: 881px; z-index: 1;}
.firstview h2 {background: url(/images/index/mv/text.png) center center no-repeat; position:absolute; top: 0; left: 50%; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 0); margin-left: -600px; width: 1200px; height: 881px; z-index: 2; text-indent: 200%; overflow: hidden; white-space: nowrap;}
.firstview div.character span{background: url(/images/index/mv/chara.png) center center no-repeat; position:absolute; top: 0; left: 0; opacity: 0; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate(0, 20px); margin-left: 0px; width: 1200px; height: 881px; z-index: 0;}
*/
main .pcbg ,
.firstview:after,
.firstview:before,
#maskright { display: none;}


/* information */
#information { width: 100%; min-width: inherit;}
#information div {display: block;}
#information .item {display: block; color: #000; padding: 1.2rem 3.5rem; width: 100%; float: none;}
#information .item img {width: 30.5rem; height: auto; border: 1px solid #c3a150;}
#information .item time {font-size: 1.3rem; margin-bottom: 0.9rem; display: block;}
#information .item h3 {font-size: 1.4rem; line-height: 2.9rem; margin: 0.9rem 0 0;}

/* works */
#works article {padding: 0 1.7rem;}
#works article + article {margin-top: 4rem;}
#works article time {font-size: 1.3rem; margin:1.5rem 0 0.3rem; display: block; width: auto;}
#works article h3 {font-size: 2rem; line-height: 2.7rem; margin-bottom: 2.2rem; width: auto;}
#works article h3:after{content: ''; width: 1.8rem; height: 0.15rem; bottom: -1.35rem;}
#works article img {float: none; width: 100%; height: auto;}
#works article p {font-size: 1.4rem; line-height: 2.45rem; width: auto;}
#works article p + p {margin: 0.6rem 0 0;}
#works article p.btn {margin-top: 2.8rem;}

/* company */
#companymap header{position: relative; width: 100%; margin: 0 auto;}
#companymap header .btn{position: static; right: 0; top: 0; margin-bottom: 1.7rem;}
#companymap .slider {width: 100%; margin-bottom: 2.8rem;}
#companymap .swiper-slide {width: 100%;}
#companymap .slider img {width: 100%; height: auto;}
#companymap h3{font-size: 1.5rem; line-height: 1.65rem; margin-bottom: 1.1rem;}
#companymap p {font-size: 1.3rem; line-height: 2.55rem; padding: 0 1.7rem; letter-spacing: 0.05em;}
#companymap p.about {font-size: 1.15rem; line-height: 1.85rem; padding: 1rem 1rem; margin-top: 1.7rem; width: 29.6rem;}
#companymap p + p {margin-top: 1.9rem; line-height: 1.7rem;}
#googlemap {padding: 4.3rem 0 0;}
#googlemap h3,
#googlemap dl{font-size: 1.2rem; line-height: 2.45rem; padding-left: 2.7rem;}
#googlemap dl dt {width: 6.7rem;}
#googlemap h3 {margin-bottom: 0.3rem;}
#map {width: 31.5rem; height: 13.8rem; float: none; margin: 0 auto 1.2rem;}

.swiper-button-next,
.swiper-button-prev{background: url(/images/common/icon-arr.png) center center no-repeat; width: 1.05rem; height: 1.105rem; background-size: 100% auto; vertical-align: middle; margin-top: -0.55rem; left: 0.7rem;}
.swiper-button-next:after,
.swiper-button-prev:after{background-size: 100% auto;}
.swiper-button-next{left: inherit; right: 0.7rem;}
.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {opacity: 1;}


/* recruit */
#recruit {height: auto; background-image: url(/images/index/recruit-bg-sp.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; padding-bottom: 24.3rem;}
#recruit p {font-size: 1.3rem; line-height: 2.55rem; padding: 0 1.7rem;}
#recruit p.btn {margin: 2.5rem;}
#recruit p.btn a{width: 100%;}

/* contact */
#contact p {font-size: 1.3rem; line-height: 2.55rem; padding: 0 1.7rem; letter-spacing: 0.03em;}
#contact input,
#contact textarea {background: #f5e7c4; width: 34.2rem; margin: 1rem 1.7rem 0; height: 2.1rem; line-height: 1.4; padding: 0.4rem 0.5rem; font-size: 1.3rem;}
#contact textarea {height: 11rem;}
#contact p.err {font-size: 1.05rem; width: 100%;}
#contact .error + p.err {display: block; padding: 0.7rem 1.7rem 0; margin-bottom: -0;}

#contact button{background:#fff; border: 2px solid #c3a150; color: #c3a150; display: block; width: 34.2rem; height:4.6rem ; line-height: 4.4rem; text-align: center; transition: 0.4s; letter-spacing: 0.1em; margin: 2.5rem auto 0; font-size: 1.5rem;}
#contact button:hover {background-color: #c3a150; color: #fff;}
#contact button[disabled='disabled'] {opacity: 0.6; cursor: default;}
#contact button[disabled='disabled']:hover {background-color: #fff; color: #c3a150;}
#contact .message {display: none; font-size: 1.05rem;  padding: 1.2rem 0 0;}

/* twitter */
#twitter .box {display: none;}
#twitter #twitter-sp {display: block; padding: 0 3.5rem;}
#twitter .entry {font-size: 1.2rem; line-height: 2rem; padding:0 0 1.5rem; border-bottom-width: 0.1rem;}
#twitter .entry + .entry {margin-top: 1.65rem;}
#twitter .entry h3 {font-weight: bold; font-size: 1.3rem; line-height: 2.8rem;}
#twitter .entry ul li {display: inline-block; margin-left: 1.3rem;}
#twitter .entry ul li a {display: block; width: 1.7rem; height: 1.75rem; background-size: 100% auto !important;}
#twitter .entry figure {width: 100%; padding: 1rem 0 0;}
#twitter .entry p.head {color: #848484; margin-bottom: 10px;}
#twitter p.btn {margin: 2.4rem 0 0;}
#twitter p.btn a{width: 34.2rem; margin: 0 auto; font-size: 1.5rem; padding: 0 0 0 13rem;}
#twitter p.btn a:after,
#twitter p.btn a:before{content: ''; background: url(/images/index/icon-twitter.png) left top no-repeat; width: 2.5rem; background-size: 2.45rem auto; height: 2rem; position: absolute; left: 9rem; top: 50%; margin-top: -1rem;}
#twitter p.btn a:before{opacity: 0; background-image: url(/images/index/icon-twitter-hover.png);}
#twitter p.btn a:hover:before{opacity: 1;}
#twitter p.btn a:hover:after{opacity: 0;}

}