@charset "UTF-8";
html::before,
html::after{
    content:"";
    position:fixed;
    pointer-events: none;
    z-index:999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:10px solid #fff;
}
html::after{
  border-radius: 30px;
}
/*-----------------------------------------------
__Header
-----------------------------------------------*/
header{
	position: relative;
}
header .c_logo{
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 100;
}
header .c_logo a{
  display: inline-block;
}
header .c_logo a:hover{
  opacity: 0.7;
}
header .c_logo a img{
  height: 100px;
  width: auto;
}

#c_x{
  position: fixed;
  bottom:0;
  right:0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 20px 15px;
  border-top-left-radius: 10px;
}
#c_x::before,
#c_x::after{
  content:"";
  width: 12px;
  height: 12px;
  position: absolute;
  background: url(../images/round-corner.svg) no-repeat;
  background-size: contain;
  background-position: center;
}
#c_x::before{
  right: 10px;
  top: -12px;
}
#c_x::after{
  left: -12px;
  bottom: 10px;
}
#c_x span{
  margin-bottom: 15px;
  font-size: 0.9rem;
  font-weight: 900;
  writing-mode: vertical-lr;
}
#c_x a{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-radius: 50%;
  background: var(--black);
}
#c_x a:hover{
  animation: hover-bounce .4s linear 0s;
}
nav#c_navi{
  position: fixed;
  right: 40px;
  top:56px;
  z-index: 100;
}
nav#c_navi a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50px;
  padding: 10px 20px;
  color: #fff;
  font-weight: 900;
  border: 2px solid #fff;
  background: var(--bt);
  white-space: nowrap;
}
nav#c_navi a.p_link_fw{
  background: var(--fw);
}
nav#c_navi a:hover{
  animation: hover-bounce .4s linear 0s;
}
nav#c_navi ul{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  gap: 0 30px;
}
nav#c_navi ul > li{
  flex: 1;
}

/*-----------------------------------------------
__Main
-----------------------------------------------*/
#visual{
	position: relative;
	width: 100%;
  height: 100svh;
  min-height: 720px;
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  display: flex;
  margin-bottom: 100px;
}

#visual .headline{
  width: 50%;
  padding: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
#visual h1{
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  animation: h1-in 0.5s forwards 1s;
}
#visual h1 img{
  width: 80%;
  max-width: 500px;
  height: auto;
}
#scroll_down{
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 100%;
  text-align: center;
  color: var(--white);
  text-align: center;
  opacity: 0;
  animation: h1-in 0.5s forwards 1.2s;
}
#scroll_down em::after{
  content: "";
  display: block;
  margin: 5px auto 0;
  width: 32px;
  aspect-ratio: 1;
  background: url(../images/icon_arrow.svg) no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(90deg);
}
#visual .img_box{
  width: 50%;
  padding-right:27px;
  gap: 0 20px ;
  position: relative;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  animation: h1-in 0.5s forwards 0s;
}
#visual .top_slide{
  display: grid;
  gap: 20px 0;
  flex: 1;
}
#visual .top_slide_01{
  animation: vertical-animation 30s linear infinite;
}
#visual .top_slide_02{
  animation: vertical-animation-r 30s linear infinite;
}
#visual .top_slide_item{
  width: 100%;
  aspect-ratio: 1 / 1;
}
#visual .top_slide_item .inner{
  width: 100%;
  height: 100%;
}
#visual .top_slide_item figure{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.title{
  margin-bottom: 60px;
  text-align: center;
}

.caution{
  background: var(--bt-yl);
  border-radius: 16px;
  padding: 34px 34px 15px 34px;
  margin: 45px auto 80px auto;
}
.caution .big{
  text-align: center;
  font-weight: 900;
  font-size: 1.6em;
  letter-spacing: 0.5em;
}

ul.kome > li{
  line-height: 1.4;
  padding-left:20px;
  margin-bottom:0.5em;
  position: relative;
}
ul.kome > li::before{
  content: "\203B";
  position: absolute;
  left: 0;
  top: 0;
}
/*-----------------------------------------------
__Edit
-----------------------------------------------*/
.edit h1{
  font-size: 2rem;
  margin: 1em auto 0.5em auto;
}
.edit h2{
  font-size: 1.6rem;
  color: var(--bt-dark);
  margin: 1em auto 0.5em auto;
}
.edit h3{
  font-size: 1.4rem;
  padding-left: 10px;
  border-left: 5px solid var(--bt-dark);
  margin: 1em auto;
}
.edit li{
  	padding-left:20px;
  	margin-bottom:0.5em;
    position: relative;
}
.edit ul > li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 0.4em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 3px solid #ccc;
  mix-blend-mode: multiply;
}

.edit ol > li{
  counter-increment: number;
  padding-left:30px;
}
.edit ol > li::before{
  content:counter(number);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  text-align: center;
  background: #d9f3f9;
  color: var(--bt);
  border-radius: 3px;
}
.edit table{
  margin: 30px 0;
}
.edit td{
    padding: 10px;
}


/*-----------------------------------------------
__Footer
-----------------------------------------------*/
footer{
  background: var(--white);
  padding: 80px 0 20px;
}
footer .fl_box{
  gap: 40px ;
  color: var(--white);
  margin-bottom: 60px;
}
footer .info{
  width: 70%;
  background: var(--bt);
  border-radius: 20px;
  padding: 40px;
}
footer dl{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
footer dt{
  display: table;
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 1em;
  border-bottom: 2px solid var(--white);
}
footer .name span{
  font-size: 1.4rem;
}
footer .tel{
  margin-top: 20px;
}
footer .tel a{
  font-family: "Poppins", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 2rem;
  font-weight: 900;
  color: var(--bt);
  background: var(--white);
  border-radius: 80px;
  padding: 10px 50px;
}
footer .tel a::before{
  content: "";
  width: 64px;
  height: 64px;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%2312AABE%3B%20stroke-width%3A%200px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22m17.01%2C12.38c-1.23%2C0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57%2C1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53%2C0-.54-.45-.99-.99-.99H1.19C.65%2C0%2C0%2C.24%2C0%2C.99c0%2C9.29%2C7.73%2C17.01%2C17.01%2C17.01.71%2C0%2C.99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 40% auto;
  background-position: center;
}
footer .btn_arrow{
  width: 25%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
footer .btn_arrow a{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px;
  border-radius: 20px;
  color: var(--white);
  font-weight: 900;
  background-color: var(--fw);
}
footer .btn_arrow a:hover{
  animation: bg-color 10s infinite;
}
footer .btn_arrow a::before{
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;

    width: 70px;
    height: 70px;
    background-image: url(../images/icon_arrow_bgw.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all ease .3s;
}

#pagetop{
  margin: 0 auto 20px;
  display: table;
  cursor: pointer;
  position:relative;
  transition: all ease .3s;
}
#pagetop:hover{
  transform: translateY(-10px);
}
footer aside{
  display: block;
  margin: 10px auto 0;
}



@media screen and (max-width: 999px) {/*tablet*/
body{
    overflow-x: hidden;
}
a.tel{
	pointer-events:all;
}
#visual{
  min-height: 728px;
  flex-direction: column;
}
#visual .headline,
#visual .img_box{
  width: 100%;
}
#visual .headline{
  height: 50svh;
  padding: 100px 0;
}
#visual .img_box{
  height: 50svh;
  flex-direction: column;
  gap: 20px 0;
  padding-bottom: 30px;
}
#visual .top_slide{
  display: flex;
  gap: 0 20px;
}
#visual .top_slide_01{
  animation: hor-animation 30s linear infinite;
}
#visual .top_slide_02{
  animation: hor-animation-r 30s linear infinite;
}
#visual .top_slide_item{
  aspect-ratio: auto;
  flex: 0 0 auto;
  width: calc((100% - 40px) / 3);
  min-width: 100px;
  position: relative;
}
@supports (aspect-ratio: 1) {
  #visual .top_slide_item{
    width: 100%;
  aspect-ratio: 1 / 1;
  min-width: auto;
  }
}
#visual .top_slide_item figure{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

footer .fl_box{
  flex-direction: column;
  align-items: flex-end;
}
footer .info{
  width: 100%;
}
footer .btn_arrow{
  width: 35%;
}

}


@media screen and (min-width: 0px) and (max-width: 600px){ /*smart*/
  body{
    font-size: 0.9rem;
    overflow-x: hidden;
  }
  p{
  margin-bottom: 1em;
  }

  header .c_logo{
    width: calc(90% - 40px);
    top: 20px;
  }
  header .c_logo img{
    max-width: 200px;
    height: auto;
  }
  #c_x{
    position: absolute;
    bottom: auto;
    top: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 10px;
    padding: 12px;
  }
  #c_x span{
    display: none;
  }
  #c_x a{
    width: 40px;
    height: 40px;
    padding: 10px;
  }
  #c_x::before{
  right: auto;
  left: -12px;
  top: 0;
  transform: rotate(-90deg);
}
#c_x::after{
  left: auto;
  right: 9px;
  bottom: -12px;
  transform: rotate(-90deg);
}

  nav#c_navi{
    width: calc(90% - 20px);
    opacity: 0;
    animation: fade-in 0.5s forwards 1.5s;
    right: 50%;
    top: auto;
    bottom: 3%;
    transform: translateX(50%) translateY(0);
  }
  nav#c_navi ul{
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    gap: 0 10px;
  }
  nav#c_navi li{
    width: 48%;
  }
  nav#c_navi li a{
    width: 100%;
  }
  

  #pagetop img{
    max-width: 100px;
  }
  
  .wrap{
    width: 80%;
  }
  .fl_box.sm_bl{
    flex-direction:column;
  }
  .pc_no{
    display:block;
  }
  .sm_br{
    display: block;
  }
  
  #visual h1{
    padding: 0 5%;
  }
  #visual .img_box{
    gap: 10px 0;
  }
  #visual .top_slide{
    gap: 0 10px;
  }
  #visual .top_slide_item{
     width: 36vw;
     position: relative;
     flex-shrink: 0;
  }
  #visual .top_slide_item::before{
    content: "";
    display: block;
    padding-top: 100%;
  }
  #visual .top_slide_item figure{
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
  }

  footer{
    padding: 80px 0;
  }
  footer .name span{
    display: block;
  }
  footer .tel a{
    width: 100%;
    font-size: 1.4rem;
    padding: 10px ;
  }
  footer .btn_arrow{
    width: 100%;
    aspect-ratio: 3 / 1;
  }
  footer .btn_arrow a::before{
    bottom: 50%;
    transform: translateY(50%);
  }
}


@media print{
  #visual h1,
  #visual .sub_text,
  #visual .top_slide_01,
  #visual .top_slide_02,
  #c_x,
  nav#c_navi{
    opacity: 1 !important;
    animation:none !important;
  }
}