@charset "Shift_JIS";

@media only print, only screen and (max-width: 767px){
.tab,
.pc,
.pc_tab{
  display:none !important;
}
.sp,
.tab_sp{
  display:block !important;
}
.topLogo{
  width: 80%;
}
/* Start Animation */
.start {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
}
.start svg {
  position: fixed;
  left: 30%;
  top: 40%;
  z-index: 9999;
}
.start svg.stLogo{
  width: 40%;
}
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}
.mainTtl_{
  width: 50%;
}
#concept {
  fill: #000000;
  stroke: #000000;
  animation:
  fill: none;
  animation: none;
}
path {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 3s ease-in forwards;
  animation: hello 3s ease-in forwards;
  animation-name: hello;
}
path#navi_logo,path#preferLogo,path#shipsLogo,path#concept{
  stroke: none;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 1000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#000000;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 1000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#000000;
}
}
.slick-slider{
  height: 500px !important;
}
.slider li {
  height: 500px !important;
}
.slider li .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform-origin: center top;
  transform: scale(1);
  transition: 3s transform ease-out;
}
.slider li.s-01 .img {
  background-image: url("../images/sp_main_1.jpg");
}
.slider li.s-02 .img {
  background-image: url("../images/sp_main_2.jpg");
}
.slider li.s-03 .img {
  background-image: url("../images/sp_main_3.jpg");
}
.slider li.slick-active .img {
  transform: scale(1.1);
}
.filter-img {
  display: block;
  opacity: 1;
}
.mainTitle_ {
  color: #ffffff;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 0;
  font-size: 50px;
}
.conceptText_ {
  text-align: center;
  animation-name: fadein;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-iteration-count: 1;
  margin: -40% 0 0 0;
}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(200px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
.conceptinner_{
  background: #ffffff;
  padding: 15% 6%;
  margin: 0 auto 10%;
}
.mainTtl_{
  width: 80%;
}
.contentinnter_{
  width: auto;
  margin: 5%;
  padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.styleLinkArea_{
  display: inline-block;
}
.item {
  /*display: none;*/
  float: left;
  font-size: 0;
}
.c-1{
  width: 100%;
}
.c-2,.c-3,.c-4,.c-5{
  width: 50%;
  display: inline-block;
}
.mapArea_{
  padding: 10% 0 5% 0;
}
.mapArea_ .left_{
  width: 100%;
  vertical-align: top;
}
.mapArea_ .right_{
  width: 100%;
}
#js-map {
  margin-bottom: 30px;
  width: auto;
  height: auto;
}
#js-map iframe{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%);
}
.shopLink_{
  display: inline-block;
  width: 60%;
  margin: 0;
  vertical-align: top;
}
.shop_{
  margin: 0;
  padding: 0 0 5% 0;
  width: 100%;
}
.shop_ h3{
  margin: 0;
  line-height: 1.5;
}
.info_{
  border: 1px solid #cccccc;
  padding: 3% 5%;
  margin: 5% 0;
}
}

@media only print, only screen and (min-width: 768px){
  /* Start Animation */
.start {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
}
.start svg {
  position: fixed;
  left: 40%;
  top: 35%;
  z-index: 9999;
}
.start svg.stLogo{
  width: 20%;
}
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  }
.mainTtl_{
  width: 50%;
}
#concept {
  fill: #000000;
  stroke: #000000;
  animation:
  fill: none;
  animation: none;
}
path {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 3s ease-in forwards;
  animation: hello 3s ease-in forwards;
  animation-name: hello;
}
path#navi_logo,path#preferLogo,path#shipsLogo,path#concept{
  stroke: none;
}
   @-webkit-keyframes hello {
   0% {
   stroke-dashoffset: 1000;
   fill:transparent;
  }
   50% {
   fill:transparent;
  }
   100% {
   stroke-dashoffset: 0;
   fill:#000000;
  }
  }
  @keyframes hello {
   0% {
   stroke-dashoffset: 1000;
   fill:transparent;
  }
   50% {
   fill:transparent;
  }
   100% {
   stroke-dashoffset: 0;
   fill:#000000;
  }
  }
.sp,
.tab,
.tab_sp,
.pc{
  display:none !important;
}
.pc_tab{
  display:block !important;
}
h1.topLogo{
  width: 50%;
}
.slick-slider{
  height: 700px !important;
}
.slider li {
  height: 700px !important;
}
.slider li .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform-origin: center top;
  transform: scale(1);
  transition: 3s transform ease-out;
}
.slider li.s-01 .img {
  background-image: url("../images/sp_main_1.jpg");
}
.slider li.s-02 .img {
  background-image: url("../images/sp_main_2.jpg");
}
.slider li.s-03 .img {
  background-image: url("../images/sp_main_3.jpg");
}
.slider li.slick-active .img {
  transform: scale(1.1);
}
.filter-img {
  display: block;
  opacity: 1;
  height: 870px;
}
.mainTtl_{
  width: 50%;
}
.conceptText_ {
  text-align: center;
  animation-name: fadein;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-iteration-count: 1;
  margin: -30% 0 0 0;
}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(200px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
.conceptinner_{
  width: 90%;
  background: #ffffff;
  padding: 60px 20px;
  margin: 0 auto 10%;
}
.subTitle_{
  margin: 2.5% 0;
}
.subTitle_::after{
  content: "";
  width: 5%;
  border-bottom: 1px solid #000000;
  display: block;
  text-align: center;
  margin: 3% auto;
}
.contentinnter_{
  width: 80%;
  margin: 5% auto 0;
  padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.column {
  padding-bottom: 25%;
}
.item {
  /*display: none;*/
  float: left;
  font-size: 0;
}
.styleLinkArea_{
  display: inline-block;
}
.c-1{
  width: 66%;
}
.c-2,.c-3,.c-4,.c-5{
  width: 33%;
  letter-spacing: -100px;
}
.mapArea_{
  padding: 10% 0;
}
.mapArea_ .left_{
  width: 100%;
  vertical-align: top;
}
.mapArea_ .right_{
  width: 100%;
}
#js-map {
  margin-bottom: 30px;
  width: auto;
  height: auto;
}
#js-map iframe{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%);
}
.shopLink_{
  display: inline-block;
  width: 100%;
  margin: 0;
}
.shop_{
  margin: 0;
  padding: 0 0 4% 0;
  width: 100%;
}
.shop_ h3{
  margin: 0;
}
.info_{
  border: 1px solid #cccccc;
  padding: 3%;
  margin: 2% 0;
}
}

@media only print, only screen and (min-width: 1050px){
.sp,
.tab,
.tab_sp,
.pc_tab{
  display:none !important;
}
.pc{
  display:block !important;
}
/* Start Animation */
.start {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
}
.start svg {
  position: fixed;
  left: 45%;
  top: 35%;
  z-index: 9999;
}
.start svg.stLogo{
  width: 220px;
}
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}
.mainTtl_{
  width: 50%;
}
#concept {
  fill: #000000;
  stroke: #000000;
  animation:
  fill: none;
  animation: none;
}
path {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 1.5s ease-in forwards;
  animation: hello 1.5s ease-in forwards;
  animation-name: hello;
}
path#navi_logo,path#preferLogo,path#shipsLogo,path#concept{
  stroke: none;
}
svg.shipsLogo{
  width: 85%;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 500;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#000000;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 500;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#000000;
}
}
/* Top Slider */
.slick-slider{
  height: 870px !important;
}
.slider li {
  height: 870px !important;
}
.slider li .img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transform-origin: center top;
  transform: scale(1);
  transition: 3s transform ease-out;
}
.slider li.s-01 .img {
  background-image: url("../images/main_1.jpg");
}
.slider li.s-02 .img {
  background-image: url("../images/main_2.jpg");
}
.slider li.s-03 .img {
  background-image: url("../images/main_3.jpg");
}
.slider li.slick-active .img {
  transform: scale(1.1);
}
.filter-img {
  display: block;
  opacity: 1;
  height: 870px;
}
.mainTitle_ {
  color: #ffffff;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 0;
  font-size: 50px;
}
.conceptText_ {
  text-align: center;
  animation-name: fadein;
  animation-duration: 1s;
  animation-delay: 4s;
  animation-iteration-count: 1;
  margin: -15% 0 0 0;
}
@keyframes fadein {
from {
  opacity: 0;
  transform: translateY(200px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
.conceptinner_{
  width: 860px;
  background: #ffffff;
  padding: 60px 0;
  margin: 0 auto 10%;
}
.subTitle_{
  margin: 2.5% 0;
}
.subTitle_::after{
  content: "";
  width: 5%;
  border-bottom: 1px solid #000000;
  display: block;
  text-align: center;
  margin: 3% auto;
}
.contentinnter_{
  width: 1050px;
  margin: 5% auto 0;
  padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.column {
  /*padding-bottom: 350px;*/
}
.item {
  display: none;
  float: left;
}
.c-1,.c-2,.c-3,.c-4,.c-5{
  max-height: 525px;
}
.c-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  width: 100%;
}
.c-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  width: 100%;
}
.c-3{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  width: 100%;
}
.c-4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  width: 100%;
}
.c-5 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  width: 100%;
}
.mapArea_{
  padding: 8% 0;
}
.mapArea_ .left_{
  width: 40%;
  vertical-align: top;
}
.mapArea_ .right_{
  width: 57%;
}
#js-map {
  margin-bottom: 30px;
  width: 580px;
  height: 400px;
}
#js-map iframe{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%);
}
.shopLink_{
  display: inline-block;
  width: 69%;
  margin: 2% 0;
}
.shop_{
  margin: 0 0 8% 0;
  padding: 0 0 8% 0;
  width: 88%;
}
.shop_ h3{
  margin: 5% 0 0 0;
}
}