/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
/* ------ General Settings ------ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');
img {
 max-width: 100%;
 height: auto;
 width: auto\9;
}
a:hover {
 opacity: 1;
 text-decoration: none;
}
body {
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 400;
 text-align: center;
 margin: 0;
 padding: 0;
}
#wrapper {
 width: 100%;
 overflow: hidden;
}
.sp {
 display: none !important;
}
.br_pc {
 display: inherit;
}
.br_sp {
 display: none;
}
@media screen and (max-width:900px) {
 /* ------ General Settings ------ */
 img {
  max-width: 100%;
  height: auto;
  width: auto\9;
 }
 a:hover {
  opacity: 1;
  text-decoration: none;
 }
 body {
  text-align: center;
  margin: 0;
  padding: 0;
 }
 #wrapper {
  width: 100%;
  overflow: hidden;
 }
 .pc {
  display: none !important;
 }
 .sp {
  display: inherit !important;
 }
 .br_pc {
  display: none !important;
 }
 .br_sp {
  display: inherit !important;
 }
}
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
 /*fixedで全面に固定*/
 position: fixed;
 width: 100%;
 height: 100%;
 z-index: 999;
 background: #fff;
 text-align: center;
 color: #fff;
}
/* Loading画像中央配置　*/
#splash_logo {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
 width: 100px;
}
/* fadeUpをするアイコンの動き */
.fadeUp {
 animation-name: fadeUpAnime;
 animation-duration: 0.5s;
 animation-fill-mode: forwards;
 opacity: 0;
}
@keyframes fadeUpAnime {
 from {
  opacity: 0;
  transform: translateY(0);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}
/* ------ Header ------ */
header {
 position: fixed;
 top: 0;
 width: 100%;
 height: 180px;
 z-index: 100;
}
.header-inner {
 width: 100%;
 overflow: hidden;
 position: relative;
 text-align: center;
 height: 180px;
 box-sizing: border-box;
 background: #fff;
}
header h1 {
 width: 90px;
 position: absolute;
 top: 45px;
 left: 45px;
}
.header-info {
 width: 72px;
 position: absolute;
 top: 45px;
 right: 45px;
}
.header-info ul {
 width: 72px;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.header-info li {
 width: 30px;
}
#gnav {
 position: absolute;
 bottom: 46px;
 left: 180px;
 height: 9.3px;
}
#gnav ul {
 display: flex;
 justify-content: space-between;
 width: 285px;
}
#gnav ul li, #gnav ul li a {
 line-height: 1;
}
#gnav ul li a img {
 height: 9.3px;
 vertical-align: top;
}
.car {
 position: absolute;
 bottom: 48px;
 right: 45px;
 width: 382px;
 height: 20px;
}
/* ------ dog ------ */
.dog {
 position: relative;
 width: 132px;
 height: 108px;
 z-index: 50;
 left: 16.5px;
 bottom: 25px;
 padding-top: 33px;
 box-sizing: border-box;
}
.dog:hover {
 background: url(../images/goodluck.svg) no-repeat right top;
 background-size: 93px auto;
}
.dog p {
 width: 85.5px;
 height: 70.5px;
 background: url(../images/dog_off.png) no-repeat;
 background-size: 85.5px auto;
 text-indent: -9999px;
}
.dog:hover > p {
 background: url(../images/dog_ani.gif) no-repeat;
 background-size: 85.5px auto;
 text-indent: -9999px;
}

.bg_dog{
	z-index: 9;
	position: absolute;
	bottom: -90px;
	left: 0;
 width: 100%;
 height: 90px;
		background: url("../images/bg_l.png") no-repeat left top,url("../images/bg_r.png") no-repeat right top;
}
@media screen and (max-width:900px) {
 /* ------ Header ------ */
 header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 84px;
  z-index: 100;
 }
 .header-inner {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  height: 84px;
  box-sizing: border-box;
  background: #fff;
 }
 header h1 {
  width: 42px;
  position: absolute;
  top: 21px;
  left: 21px;
 }
 #nav {
  position: fixed;
  top: 84px;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.77);
  transition: all 0.3s ease-in-out;
  visibility: hidden;
 }
 .header-info ul {
  width: 100%;
  display: block;
  padding: 0;
 }
 .header-info-sp {
  list-style-type: none;
  padding-bottom: 0;
  margin-bottom: 16.8vw;
  border-bottom: none;
  width: 100%;
 }
 .header-info-sp a {
  display: block;
  padding: 0;
  transition: all 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
 }
 .header-info-sp a img {
  height: 9.3vw !important;
 }
 .car {
  position: absolute;
  bottom: 21px;
  right: 21px;
  width: 213px;
  height: 15px;
 }
 /* ------ dog ------ */
 .dog {
  position: relative;
  width: 18.2vw;
  height: 15vw;
  z-index: 10;
  left: 0.5vw;
  bottom: 16vw;
  padding-top: 5.3vw;
  box-sizing: border-box;
 }
 .dog:hover {
  background: url(../images/goodluck.svg) no-repeat right top;
  background-size: 13vw auto;
 }
 .dog p {
  width: 12vw;
  height: 9.8vw;
  background: url(../images/dog_off.png) no-repeat;
  background-size: 12vw auto;
  text-indent: -9999px;
 }
 .dog:hover > p {
  background: url(../images/dog_ani.gif) no-repeat;
  background-size: 12vw auto;
  text-indent: -9999px;
 }
}
@media screen and (max-width: 480px) {}
/*スマホメニュー*/
.fullscreenmenu {
 display: none;
 position: absolute;
 bottom: 46px;
 left: 180px;
 height: 9.3px;
}
@media screen and (max-width:900px) {
 .fullscreenmenu {
  display: inherit;
  position: inherit;
  bottom: auto;
  left: auto;
  height: auto;
 }
 /*sp menu*/
 .menu, .menu span {
  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  box-sizing: border-box;
 }
 .menu {
  position: fixed;
  z-index: 9999;
  top: 21px;
  right: 21px;
  cursor: pointer;
  width: 24.5px;
  height: 24.5px;
  ;
  color: #000;
  background: #fff;
  padding: 0 0 0 0;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
 }
 .menu span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 0;
  height: 1px;
  background-color: #000;
  width: 24.5px;
  ;
 }
 .menu span:nth-of-type(1) {
  top: 0;
 }
 .menu span:nth-of-type(2) {
  top: 8px;
 }
 .menu span:nth-of-type(3) {
  top: 16px;
 }
 .menu.active span:nth-of-type(1) {
  top: 3px;
  left: 0;
  transform: translateY(6px) rotate(-45deg);
  width: 24.5px;
  ;
 }
 .menu.active span:nth-of-type(2) {
  opacity: 0;
 }
 .menu.active span:nth-of-type(3) {
  top: 15px;
  left: 0;
  transform: translateY(-6px) rotate(45deg);
  width: 24.5px;
  ;
 }
 #nav {
  position: fixed;
  top: 84px;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100vh;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.77);
  transition: all 0.3s ease-in-out;
  visibility: hidden;
 }
 #nav.active {
  right: 0;
  opacity: 1;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
 }
 .sp-nav {
  width: 100%;
  margin: 0;
  padding: 13.5vw 0 0 0;
 }
 .sp-nav li {
  list-style-type: none;
  padding-bottom: 0;
  border-bottom: none;
 }
 .sp-nav li + li {
  margin-top: 13.5vw;
 }
 .sp-nav li a {
  display: block;
  padding: 0;
  transition: all 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
 }
 .sp-nav li a img {
  height: 2.8vw;
 }
}
/*メイン　スライダー*/
.main {
 width: 100%;
 margin-top: 180px;
	position: relative;
}
.coming {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -106px;
 right: auto;
 bottom: auto;
 text-align: center;
 -webkit-transition: 300ms;
 -moz-transition: 300ms;
 -o-transition: 300ms;
 transition: 300ms;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 z-index: 15;
}
.sosial {
 width: 130px;
 position: absolute;
 top: auto;
 left: 50%;
 margin-left: -62px;
 right: auto;
 bottom: 50px;
 text-align: center;
 -webkit-transition: 300ms;
 -moz-transition: 300ms;
 -o-transition: 300ms;
 transition: 300ms;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 z-index: 16;
}
.sosial li {
 display: inline-block;
}
.sosial li:first-child {
 margin-right: 22px;
}
.main .swiper-wrapper p {
 height: 90px;
 position: absolute;
 bottom: -90px;
 left: 0px;
 width: 100%;
 z-index: 10;
 color: #000;
 font-size: 90%;
 line-height: 1.5;
 text-align: center;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 display: flex;
 align-items: center;
 justify-content: center;
}
.main .swiper-wrapper figure {
 position: relative;
}
.main .swiper-wrapper figure img {
 width: 100%;
 height: auto;
}
.main .swiper-container {
 overflow: inherit;
}
/* Common Styles */
.main .swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: -50px;
 right: 45px;
 left: inherit;
 width: 90%;
 text-align: right;
}
.main .swiper-pagination-bullet {
 width: 7px;
 height: 7px;
 display: inline-block;
 border-radius: 100%;
 border: #231815 1px solid;
 opacity: 0.9;
 background: none;
}
.main .swiper-pagination-white .swiper-pagination-bullet {
 background: none;
 border: #fff 1px solid;
}
.main .swiper-pagination-bullet-active {
 opacity: 1;
 background: #231815;
}
.main .swiper-button-prev {
 background-image: url(../images/ic_r.png) !important;
 left: 10px;
 right: auto;
 background-size: 10px auto;
}
.main .swiper-button-next {
 background-image: url(../images/ic_l.png) !important;
 right: 10px;
 left: auto;
 background-size: 10px auto;
}
@media screen and (max-width:900px) {
 .main {
  width: 100%;
  margin-top: 84px;
 }
 .coming {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -106px;
  right: auto;
  bottom: auto;
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 15;
 }
 .sosial {
  width: 130px;
  position: absolute;
  top: auto;
  left: 50%;
  margin-left: -62px;
  right: auto;
  bottom: 50px;
  text-align: center;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 16;
 }
 .sosial li {
  display: inline-block;
 }
 .sosial li:first-child {
  margin-right: 22px;
 }
 .main .swiper-wrapper p {
  height: 11.3vw;
  position: absolute;
  bottom: -12.5vw;
  left: 0px;
  width: 100%;
  z-index: 10;
  color: #000;
  font-size: 2.5vw;
  line-height: 1.5;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .main .swiper-wrapper figure {
  position: relative;
 }
 .main .swiper-wrapper figure img {
  width: 100%;
  height: auto;
 }
 .main .swiper-container {
  overflow: inherit;
 }
 /* Common Styles */
 .main .swiper-pagination {
  display: none;
 }
 .main .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -50px;
  right: 45px;
  left: inherit;
  width: 90%;
  text-align: right;
 }
 .main .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 100%;
  border: #231815 1px solid;
  opacity: 0.9;
  background: none;
 }
 .main .swiper-pagination-white .swiper-pagination-bullet {
  background: none;
  border: #fff 1px solid;
 }
 .main .swiper-pagination-bullet-active {
  opacity: 1;
  background: #231815;
 }
 .main .swiper-button-prev {
  background-image: url(../images/ic_r.png) !important;
  left: 10px;
  right: auto;
  background-size: 10px auto;
 }
 .main .swiper-button-next {
  background-image: url(../images/ic_l.png) !important;
  right: 10px;
  left: auto;
  background-size: 10px auto;
 }
}
@media screen and (max-width: 480px) {
 .main .swiper-wrapper p {
  font-size: 73%;
 }
}
@media screen and (max-width: 320px) {
 .main {
  margin-bottom: 40px;
 }
 .main .swiper-wrapper p {
  position: absolute;
  bottom: -80px;
  left: 0px;
  width: auto;
  padding: 0 75px;
  z-index: 10;
  color: #000;
  font-size: 83%;
  line-height: 1.5;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
 }
}
/*works*/
.works {
 max-width: 1110px;
 position: relative;
 margin: -10px auto 0 auto;
}
.works-inner {
 padding: 0px 17px 0px 30px;
}
.works li {
 width: calc(calc(100% - 65px)/5);
 margin: 0px 13px 13px 0px;
 cursor: pointer;
 background-color: #fff;
}
.works li img {
 transition: .5s;
 width: 100%;
}
.works li img:hover {
 opacity: 0.5;
}
.fancybox-slide--image {
 padding: 44px 60px;
}
.fancybox-text {
 padding-top: 0.5em;
 font-size: 80%;
}
.fancybox-infobar {
 display: none;
}
.fancybox-button {
 background: rgba(00, 00, 00, .0);
 border: 0;
}
.fancybox-button {
 color: #333;
}
.fancybox-button:hover {
 color: #666;
}
.fancybox-progress {
 background: #666;
}
.fancybox-thumbs__list a::before {
 border: 6px solid #666;
}
.fancybox-caption {
 color: #000;
}
.fancybox-caption::before {
 background-image: none;
}
.fancybox-navigation .fancybox-button--arrow_right div {
 position: relative;
 display: inline-block;
 padding: 10px;
}
.fancybox-navigation .fancybox-button--arrow_right div svg, .fancybox-navigation .fancybox-button--arrow_left div svg {
 display: none;
}
.fancybox-navigation .fancybox-button--arrow_right div::before {
 content: '';
 width: 15px;
 height: 15px;
 border-top: solid 1px #000;
 border-right: solid 1px #000;
 position: absolute;
 left: 5px;
 top: 13px;
 transform: rotate(45deg);
}
.fancybox-navigation .fancybox-button--arrow_left div::before {
 content: '';
 width: 15px;
 height: 15px;
 border-top: solid 1px #000;
 border-right: solid 1px #000;
 position: absolute;
 left: 15px;
 top: 42px;
 transform: rotate(-135deg);
}
.fancybox-navigation .fancybox-button--arrow_right div:hover, .fancybox-navigation .fancybox-button--arrow_left div:hover {
 opacity: 0.6;
}
.fancybox-is-open .fancybox-bg {
  opacity:1;
}

@media screen and (max-width:1110px) {
 .works {
  max-width: auto;
  margin: 0 auto;
 }
 .works-inner {
  padding: 0px 17px 0px 30px;
 }
 .works li {
  width: calc(calc(100% - 65px)/5);
  margin: 0px 13px 13px 0px;
  cursor: pointer;
 }
}
@media screen and (max-width:768px) {
 .works {
  max-width: auto;
  margin: 0 auto;
 }
 .works-inner {
  padding: 0px 15px 0px 28px;
 }
 .works li {
  width: calc(calc(100% - 39px)/3);
  margin: 0px 13px 13px 0px;
  cursor: pointer;
 }
}
/* ------ Footer ------ */
footer {
 width: 100%;
 padding: 120px 0 45px 0;
 text-align: center;
}
.information {
 width: 530px;
 margin: 0 auto;
}
.information dl {
 overflow: hidden;
 text-align: left;
 font-size: 15px;
 line-height: 1.7;
 margin-bottom: 57px;
}
.information dt {
 width: 110px;
 text-align: left;
 float: left;
 font-weight: normal;
}
.information dd {
 width: 420px;
 text-align: left;
 float: left;
 margin-bottom: 25px;
}
.information dd a {
 color: #000;
}
.flogo {
 width: 262px;
 margin: 0 auto 40px auto;
}
.copyright {
 font-size: 12px;
}
@media screen and (max-width:768px) {
 /* ------ Footer ------ */
 footer {
  width: 100%;
  padding: 17.3vw 0 7.46vw 0;
  text-align: center;
 }
 .information {
  width: 77.33vw;
  margin: 0 auto;
 }
 .information dl {
  overflow: hidden;
  text-align: left;
  font-size: 2.4vw;
  line-height: 1.7;
  margin-bottom: 13.3vw;
 }
 .information dt {
  width: 18vw;
  text-align: left;
  float: left;
  font-weight: normal;
 }
 .information dd {
  width: 59.33vw;
  text-align: left;
  float: left;
  margin-bottom: 5.3vw;
 }
 .information dd a {
  color: #000;
 }
 .flogo {
  width: 40.6vw;
  margin: 0 auto 4.6vw auto;
 }
 .copyright {
  font-size: 1.8vw;
 }
}