@charset "UTF-8";
/*
 * top.css PC版トップページ
 */


/*　スクロール　*/

.scroll a {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 5%;
  font-size: 0.8em;
  font-weight: 600;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #000;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
.scroll a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000;
} 

.scroll a::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* タイトル部分　*/

.bg01 {
	background:linear-gradient(90deg,#FFF 0%,#FFF 35%,#FF973E 35%,#FF973E 100%);
	padding: 20px 0px 0px;
}



/*　TOP画像　*/

.text_concept {
	white-space: nowrap;
	background-color: #000;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	position: absolute;
	top: 75%;
	z-index:90;
	padding: 10px 30px;
}
.text_concept02 {
	font-size: 1.5em;
	letter-spacing: 0.2em;
	padding: 0px 8px;
}

.main_imgBox {
    height: 650px;
    overflow: hidden;
    position: relative; 
}

.circle_waku{
	width: 320px;
	position: absolute;
	top:80%;
	right: 5%;
	z-index: 80;
}

.font-weight-bold{
	font-size: 1.5em;
	padding: 0px 8px;
	}
	
.circle{
  width: 150px;
  height: 150px;
  padding: 40px 10px 20px;	
  margin: 0px;
  border-radius: 50%;
  text-align:center;
  background: #FFF;
  border: 2px solid #FF973E;
  font-size: 0.8em;
}

  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 650px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_imgM {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_imgM:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_imgM:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_imgM:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_imgM:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_imgM:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }


@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
            z-index:9;
    }
    100% { opacity: 0 }
}

/*　全共通タイトル　*/

.sub_title {
	font-size: 1.5em;
	text-align: center;
	letter-spacing: 0.1em;
}


/* 施術メニュー */

.menu_btn {
  background-color: rgba(255,255,255,0.3);
  box-shadow: 0px 5px 5px rgba(153,153,153,0.4);
  border-radius: 8px;
  margin: 5px;
  padding: 0px;
}

a:hover .menu_btn{
	opacity: 0.5;
}

/*　交通安全　*/


.bg_safety {
	background-color: #FF973E;
	background-image:url(../img/top/safety.png);
	background-position:center right;
	background-repeat: no-repeat;
}
.line {
	border-bottom: 1px solid #fff;
	padding: 0px 0px 8px;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}

tr td img {
	height: 30px;
	width: auto;
}
.d-flex dt {
	background-color: #000;
	width: 20%;
	text-align:center;
	padding: 12px 0px;
	color: #fff;
	font-weight:normal;
}
.d-flex dd {
	padding: 10px 16px;
}