﻿body, .txt_color_nomal {
    color: #333!important;
}
/*#aisatsu h2 {
    background: url(Dup/img/png.png) no-repeat 50% 0;
    background-size: 172px auto;
    padding-top: 165px;
}*/


#top_cms .cms_title h2::before {
    bottom: -54px;
}
#top_cms .cms_title h2::after {
    bottom: -74px;
}
#f_menu ul li a {/*★改行される*/
    letter-spacing: 0;
}
.cms_box {
    overflow: hidden;
    position: relative;    padding-top: 38px;
}	
.cms_box:before {
    background: rgba(230, 230, 230, 0.55);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    left: 0;top: 0;
    transform: translateY(0%);
    transition: all 1s 0s ease;
    width: 100%;
    z-index: 1;
}
.cms_box.active:before {
    transform: translateY(101%);
}
.overlay {
    background: rgba(231, 231, 231, 0.97);
}


#top_cms .border_white {
    border: none;
}
#top_cms {
    background: #e6e6e6;
    padding-top: 108px;
    padding-bottom: 10px;
    position: relative;
    z-index: 0;
}
#top_contents figure {
    position: relative;
}
#top_contents figure:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 20px;
    left: 20px;
    background-size: cover;
    z-index: -1;
    background-color: #ffffff;
    background-image: url(Dup/img/stardust.png);
}
/*#top_cms:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 2000px;
    background-image: url(Dup/img/bg_nami.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}*/
.cms_boxInner {
background: #fafafa;
    padding: 53px 10px 30px;
}
.cms_title {
    margin-top: -72px;
}

.foot_tel_bt a, #info_map p.txt_white, #aisatsu h2, #aisatsu p span, #top_contents h2, #top_contents p {
    color: #fff!important;
}
#top_cms h2, #top_cms .cms_title p, .cms_1-a h3, #foot_txt, #f_menu ul li a, .cms_3-c .box_title1, .cms_3-c .box_title2, .cms_3-c .box_txt1 {
    color: #333;
}
#top_cms .cms_title h2::before, #top_cms .cms_title h2::after {
    background-color: #b9b9b9;
}
.cate_list li a {
    background: #333;
    color: #eee;
}
.cms_1-a .date {
    background: #333;
    padding: 2px 12px;
    font-size: 12px;
    color: #fff;
    /* display: inline-block; */
}
.cms_5-c .box_txt1::before, #cms_5-c .box_txt1:before {
    color: #a2a2a2!important;
}
.cms_5-c .box_title1 {
    border-color: #cbcbcb!important;
}
#cms_3-c .cate_title {
    background: #333;
    color: #eee;
    text-align: center;
background-image: url("Dup/img/stardust.png");
}
#cms_2-a h3 {
    position: relative;
    padding: 1rem 1rem;
    border: none;
    border-bottom: 3px solid #949494;
    display: block;
    text-align: center;
}
#cms_2-a h3:before {
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
    border-color: #949494 transparent transparent transparent;
}
#cms_2-a h3:after {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
    border-color: #eee transparent transparent transparent;
}

/* ------------------------------------------------------------------------------------------- */
.shootingstar {
        width: 300px;
    top: -134px;
    right: -60px;
}
.shootingstar2 {
    width: 205px;
    top: -76px;
    right: -76px;
}
.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/* --------------------------------------------------------------------------------- */
/* ----------------------------- SHOOTING　STAR -------------------------------------------- */
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:2.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 1;/*0でも可*/
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:2.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 1;/*0でも可*/
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------------- */
.button-effect {
text-align: center;
}
.button-effect a {
    border: 1px solid;
    width: 200px;
    padding: 6px;
        background: #333;
        color: #fff;
}
#info_map .button-effect {
    margin-top:20px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 317px;
    margin: 0 auto;
    /* min-height: 1vh; */
    position: relative;
    z-index: 1;
}
.btn {
  flex: 1 1 auto;
  margin-top: 24px;
padding: 26px 0 27px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
 }
.btn:hover {
  background-position: right center; /* change the direction of the change here */
}
.btn-1 {
  background-image: linear-gradient(to right, #161726 0%, #808080 51%, #848484 100%);
}
.btn img {width: 116px}
/* ------------------------------------------------------------------------------- */
.line-horizontal {
  position: relative;
  display: inline-block;
}
.line-vertical {
  position: relative;
  display: inline-block;
}
.hero-catch-text.active {
  -webkit-transform: none;
  -ms-transform: none;
  -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
  clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%);
  transition: -webkit-clip-path 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s, clip-path 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s, transform 1s cubic-bezier(0.205, 0.01, 0.075, 0.995) 1s;
}
.hero-catch-text {
  display: inline-block;
  position: relative;
  -webkit-clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
  clip-path: polygon(0 -20%, 0 -20%, 0 120%, 0 120%);
}
.line-horizontal {
  position: relative;
  display: inline-block;
}
.lineHorizontal {
  -webkit-animation-name: lineHorizontal;
  animation-name: lineHorizontal;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.line-horizontal:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 42px;
  opacity: 0;
  width: 100%;
  background-color: #333;z-index: -1;
  content: "";
  animation: lineHorizontal 2s 1.2s cubic-bezier(0.205, 0.01, 0.075, 0.995) forwards;
  /*animation-delay: 1s;*/
}
@keyframes lineHorizontal {
  from {
    transform: translate3d(-100%, 0, 0) scale(1);
    opacity: 0;
    transform-origin: right top
  }
 20% {opacity: 0}
  50% {
    opacity: 0.7;
    transform: translate3d(0, 0%, 0) scale(1)
  }
80% {opacity: 0}
  to {
    transform-origin: right top;
    opacity: 0;
    transform: translate3d(100%, 0, 0) scale(1)
  }
}




.catch {
  position: absolute;
  left: -6%;
  top: 13%;
  z-index: 2;
  color: #fff;
}
.catch .hero-catch {
  font-size: 40px;
  letter-spacing: 0.36vw;
  font-weight: bold;
}
.catch .hero-catch-inner {
  margin-bottom: 1vw;
  line-height: 1;
}
.catch .hero-sub {
  font-size: 22px;
  letter-spacing: 0.14vw;
  font-weight: bold;
}
.bgcatch {
  z-index: 1;
}
.bgcatch .hero-catch-inner, .bgcatch .hero-sub {
  color: #333;
}
@media(max-width: 1200px) {
  .catch {
    left: 2%;
    top: 46%;
  }
  .catch .hero-catch {
    font-size: 30px;
    left: 2%;
  }
  .main_imgWrap::before, .main_imgWrap::after {
    display: none;
  }
}
.header .grid_3 p, .menu_title {
  color: #333;
}
.header .grid_3 a:first-child, .foot_tel_bt a:first-child {
display: none; /*★*/
}
.header .grid_3 a { /*★*/
  background: #333;
  margin-top: 5px;
  padding: 7px 18px 7px 13px;
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
}
.img-container {
  overflow: hidden;
  position: relative;
}
.img-container:before {
  background: rgba(0, 0, 0, 0.42);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transform: translateY(0%);
  transition: all .7s 0s ease;
  width: 100%;
  z-index: 2;
}
.img-container.active:before {
  transform: translateY(101%);
}
#main_menu.fixed {
    padding: 6px 0 3px;
}
#main_menu.fixed .menu_title {
  color: #fff;
}
#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box {
  background-image: linear-gradient(135deg, rgba(26, 26, 26, 1) 0%, rgba(148, 148, 148, 1) 100%) !important;
}
.entry {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
}
    .entry a {
    padding: 13px;
    display: block;
    }
/* ---------------------------------------- LOADER ------------------------------------------------ */
.star {
  height: 0;
  width: 2px;
  background: white;
  background: linear-gradient(transparent, rgba(255, 255, 255, 1));
  animation-name: shooting;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  /*animation-fill-mode: forwards;*/
}
.star-box {
  position: absolute;
  top: 36%;
  left: 56%;
  height: 100px;
  width: 100px;
  transform: rotateZ(45deg);
}
.star2 {
  left: 58.5%;
  top: 35%;
  opacity: 0.6;
}
.star2 .star {
  animation-delay: 0.08s;
}
/*.star3 {
left: 59%;
top: 35%; opacity: 0.4;
}

.star4 .star {
     animation-delay: 0.4s;
}*/
@keyframes shooting {
  0% {
    height: 0;
    opacity: 50%;
  }
  50% {
    height: 60px;
    opacity: 100%;
  }
  100% {
    height: 128px;
    opacity: 0;
  }
}
#loader {
  z-index: 9999;
}
#loader img {
  animation-name: fadein;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  z-index: 1;
}
#loader img {
  width: 100%;
  height: auto;
  /*   position: absolute;*/
  top: 50%;
  left: 0;
}
.loader_icon {
  top: 50%;
  width: 300px;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------------------------------------------------------------------- */
#page9 .cate_box a {
    color: #fff;
}
#page10 li a {/*★*/
    padding: 10px 0;
} 

@media(min-width: 769px) {
 #contents1 .contents_box {
       margin-top: -158px;  
 } 
     .hero-catch-text {
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff,
 -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff,
 0px -1px 1px #ffffff;
 color: #000;
}
}


@media(max-width: 768px) {
    .hero-catch-text {
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff,
 -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff,
 0px -1px 1px #ffffff;
 color: #000;
}
    #page10 .cate li a span {padding-left: 0;/*★*/
    }
    footer .grid_9.pd_20px {
padding: 20px 0;;        
    }
    .star-box {
    top: 36%;
    left: 59%;
}
    .star2 {
    left: 66.5%;
    top: 34%;
}
.line-horizontal:after {
  height: 32px;
}
    #copyright {
        margin-bottom: 54px;
    }
}



@media(min-width: 668px) {
    
 .entry a {
    padding: 21px;
    width: 105px;
}   
.entry {
    position: fixed;
    bottom: 10px;
    left: 11px;
    z-index: 20;
}
}
@media(max-width: 667px) {
    .bgcatch {
    display: none;
}

    #top_contents figure:before {
        display: none;
    }    
.entry .container {
    width: 120px;
}
    #top_cms {
    padding-top: 43px;
}
.cms_box {
    margin-bottom: 60px;
}
    .cms_boxInner {
    padding: 53px 3px 30px;
}
    .pd_20px_sp {
    padding: 10px;
}
    .line-horizontal:after {
        display: none;
    }
    #copyright {/*★*/
    text-align: left;
    padding-left: 10px;
    }
    .loader_icon {
    width: 213px;
}
.catch {
    left: 2%;
    top: 69%;
}
    .catch .hero-catch {
    font-size: 26px;
    left: 0%;
}
.catch .hero-catch-inner {
    margin-bottom: 0vw;
    line-height: 1.5;
}
.catch .hero-sub {
    font-size: 14px;
}
header #logo {
    margin-left: 17px;
}
.shootingstar {
    width: 163px;
    top: -125px;
    right: -3px;
}
.shootingstar2 {
    width: 111px;
    top: -73px;
    right: 0px;
}
.slideAnimeLeftRight {
	animation-duration:1.1s;

}
.slideAnimeRightLeft {
	animation-duration:1.1s;
}
}

    .pager li a, .pager .prev a, .pager .next a {
        color: #fff;/*★*/
    }

@media all and (-ms-high-contrast: none) {
    .header .grid_3 a:last-child {
        padding: 8px 18px 3px 13px;
    }

.pager li:not(.prev) a {
  /*  padding-top: 1px !important;*/
}
.pager li a, .pager .prev a, .pager .next a {
 /*   padding-top: 1px!important;*/
}
#cms_3-e .cate_title {
    padding-bottom: 10px;
}
#cms_3-e .sub_cate_title {
   padding-bottom: 12px; 
}
#page9 .cate_box p a {
padding: 8px 10px 3px;
}
#cms_3-c .cate_title {
    padding-top: 12px;
}
.btn {
    padding-top: 30px;
}
.entry a {
    padding-top: 25px;
}
}