@charset "UTF-8";

/* 共通部分
--------------------------------------- */
html {
	font-size: 100%;
	scroll-behavior: smooth;
}
body{
	font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
	font-weight: 300;
	line-height: 1.7;
	color: #432;
}
img {
	max-width: 100%;	
}	

/* HEADER
--------------------------------------- */
.page-header	{
	height:74px;
	width:100%;
	position:fixed;
	top:0;
	z-index: 10;
}
@media screen and (max-width: 1000px) {
.page-header {
	background-color: #000;
    height: 51px;
	width: 100%;
	position:fixed;
	top:0;
	z-index: 10;
  	}
}
.linear-blur {
    transform-origin: center top;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 160%;
    z-index: -1;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgb(0, 0, 0));
}
.obititle{
	font-size: 29px;
	font-family: "Shippori Mincho", serif;
	color: white;
	text-align: left;
	width: 100%;
	padding: 10px 40px;
	position: absolute;
}
@media screen and (max-width: 767px) {
.obititle {
	font-size: 18px;
	padding: 9px 9px 9px 20px;
	}
}
.mobile-only {
	display: none;
}
@media (max-width: 768px) {
.mobile-only {
	display: inline;
	}
}

/* Nav
-----------------------------------------*/
.Nav {
	margin-top: 8.8px;
	float: right;
	padding-right: 40px;
}
@media screen and (max-width: 1000px) {
.Nav {
	margin-top: 51px;
	position: relative;
	border-top:none;
	float: none;
	}
}
.Nav .navbtn {
	display: none;
}
@media screen and (max-width: 1000px) {
.Nav .navbtn {
    display: block;
    position: absolute;
    top: -45px;
    right: 5px;
	}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a,
.Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 30px;
    height: 40px;
}
.Nav .navbtn a::before,
.Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:-10px;
    content:"";
    width: 30px;
    height: 1.5px; /*三本線の太さ*/
    background-color: #FFF;
	transition: .2s;
}
.Nav .navbtn a.open::before {
    top:20px;
    transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
}
.Nav .navbtn a::after,
.Nav .navbtn a.close::after {
    position: absolute;
    bottom:12px;
    left:-10px;
    content:"";
    width: 30px;
    height: 1.5px; /*三本線の太さ*/
    background-color: #FFF;
    transition: .2s;
}
.Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(210deg);
	-webkit-transform: rotate(210deg);
	}
}
@media screen and (max-width: 1000px) {
.Nav .navbtn a.open {
  }
}
 
@media screen and (max-width: 1000px) {
  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
	}
}
.Nav .navbtn a span::after,
.Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:-10px;
    content:"";
    width: 30px;
    height: 1.5px; /*三本線の太さ*/
    background-color: #FFF;
}
.Nav .navbtn a.open span::after {
    display: none;
	}
}
.Nav ul.close {
	display: none;
	border-top: solid 1px #333;
}
.Nav > ul {
	margin: 0 auto;
	max-width: 1000px;
}
@media screen and (max-width: 1000px) {
.Nav > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #000;
    height: calc(26vh - 51px);
	}
}
.Nav > ul > li {
	position: relative;
	font-size: 15px;
	display: inline-block;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li {
    display: block;
	}
}
.Nav > ul > li a {
	display: block;
	position: relative;
	text-decoration: none;
	padding: 15px 25px;
	font-size: 15px;
	color: #FFF;
	z-index: 2;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li a {
	background-color: #000;
	color: #FFF;
	}
}
.Nav > ul > li.parent > a {
	padding-right:25px;
}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open {
    border-bottom: none;
	}
}
.Nav > ul > li.parent.open > a{
    color: #FFF;
}
.Nav > ul > li.parent.open > a::after {
	background: #333;
	-webkit-transform: scale(1);
	transform: scale(1);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a {
    color: #333;
	}
}
.Nav > ul > li > ul li a {
	position: relative;
	padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
.Nav > ul > li > ul li a {
    background-color: #FFFFFF;
	}
}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.Nav > ul > li > ul li ul li a {
	padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
    left: 20px;
}


/* PANEL
--------------------------------------- */

#panelArea {
	margin-left: auto;
	margin-right: auto;	
	background-repeat: no-repeat;
}
.main-visual {
    background-size: cover;
    background-position: center;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

h1{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#svg-animation {
    max-width: 95%;
    height: auto;
   }
@media screen and (max-width: 767px) {
#svg-animation {
    max-width: 75vw;
   }
}

   
/***************************************************
 * Generated by SVG Artista on 6/5/2024, 4:00:57 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 2755.7998046875px;
    stroke-dasharray: 2755.7998046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2755.7998046875px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 2755.7998046875px;
    stroke-dasharray: 2755.7998046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2755.7998046875px;
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-fill-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1661.60009765625px;
    stroke-dasharray: 1661.60009765625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1661.60009765625px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1661.60009765625px;
    stroke-dasharray: 1661.60009765625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1661.60009765625px;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both,
                       animate-svg-fill-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-stroke-2 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both,
               animate-svg-fill-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 1717.199951171875px;
    stroke-dasharray: 1717.199951171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1717.199951171875px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 1717.199951171875px;
    stroke-dasharray: 1717.199951171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1717.199951171875px;
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both,
                       animate-svg-fill-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-stroke-3 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both,
               animate-svg-fill-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1717.199951171875px;
    stroke-dasharray: 1717.199951171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1717.199951171875px;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 1717.199951171875px;
    stroke-dasharray: 1717.199951171875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1717.199951171875px;
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both,
                       animate-svg-fill-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
          animation: animate-svg-stroke-4 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both,
               animate-svg-fill-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 123.34483337402344px;
    stroke-dasharray: 123.34483337402344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 123.34483337402344px;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 123.34483337402344px;
    stroke-dasharray: 123.34483337402344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 123.34483337402344px;
  }
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both,
                       animate-svg-fill-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
          animation: animate-svg-stroke-5 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both,
               animate-svg-fill-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 92.62101745605469px;
    stroke-dasharray: 92.62101745605469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62101745605469px;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 92.62101745605469px;
    stroke-dasharray: 92.62101745605469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62101745605469px;
  }
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4s both,
                       animate-svg-fill-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
          animation: animate-svg-stroke-6 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4s both,
               animate-svg-fill-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 119.40311431884766px;
    stroke-dasharray: 119.40311431884766px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 119.40311431884766px;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 119.40311431884766px;
    stroke-dasharray: 119.40311431884766px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 119.40311431884766px;
  }
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.800000000000001s both,
                       animate-svg-fill-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
          animation: animate-svg-stroke-7 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.800000000000001s both,
               animate-svg-fill-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 92.62105560302734px;
    stroke-dasharray: 92.62105560302734px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62105560302734px;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 92.62105560302734px;
    stroke-dasharray: 92.62105560302734px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62105560302734px;
  }
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6000000000000005s both,
                       animate-svg-fill-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
          animation: animate-svg-stroke-8 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6000000000000005s both,
               animate-svg-fill-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 86.55201721191406px;
    stroke-dasharray: 86.55201721191406px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 86.55201721191406px;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 86.55201721191406px;
    stroke-dasharray: 86.55201721191406px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 86.55201721191406px;
  }
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s both,
                       animate-svg-fill-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both;
          animation: animate-svg-stroke-9 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s both,
               animate-svg-fill-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 92.62120056152344px;
    stroke-dasharray: 92.62120056152344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62120056152344px;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 92.62120056152344px;
    stroke-dasharray: 92.62120056152344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 92.62120056152344px;
  }
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s both,
                       animate-svg-fill-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
          animation: animate-svg-stroke-10 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s both,
               animate-svg-fill-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 369.9805603027344px;
    stroke-dasharray: 369.9805603027344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 369.9805603027344px;
  }
}

@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 369.9805603027344px;
    stroke-dasharray: 369.9805603027344px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 369.9805603027344px;
  }
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8s both,
                       animate-svg-fill-11 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s both;
          animation: animate-svg-stroke-11 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8s both,
               animate-svg-fill-11 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 616.3340454101562px;
    stroke-dasharray: 616.3340454101562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 616.3340454101562px;
  }
}

@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 616.3340454101562px;
    stroke-dasharray: 616.3340454101562px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 616.3340454101562px;
  }
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s both,
                       animate-svg-fill-12 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
          animation: animate-svg-stroke-12 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s both,
               animate-svg-fill-12 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 507.4786682128906px;
    stroke-dasharray: 507.4786682128906px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 507.4786682128906px;
  }
}

@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 507.4786682128906px;
    stroke-dasharray: 507.4786682128906px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 507.4786682128906px;
  }
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.600000000000001s both,
                       animate-svg-fill-13 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both;
          animation: animate-svg-stroke-13 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.600000000000001s both,
               animate-svg-fill-13 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s both;
}




.sub_title{
	position: absolute;
	top: 71%;
 	width: 100%;
	transform: translate(-50%, -50%);
	font-size: 27px;
	color: #FFF;
	text-align: center;
}
@media screen and (max-width: 767px) {
.sub_title{
	top: 63%;
	font-size: 18px;
	transform: translate(-30%, -50%);
	text-align: center;
	}
}

/*==================================================
ふわっ
===================================*/


/* fadeIn */

.fadeIn{
animation-name:fadeInAnime;
animation-duration:6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger{
    opacity: 0;
}

/* SHOP INFO
--------------------------------------- */
   
.shop_info{
	position: absolute;
	width: 100%;
	bottom: 0;
	font-family: "Shippori Mincho", serif;
	background-color: #C69C73;
	height: 130px;
	padding-top: 22px;        
}
@media screen and (max-width: 767px) {
.shop_info{
	height: 90px;
	padding-top: 8px;   
	}
}
.shop_info_moji{
	text-align: center;
}
.shopname1{
	font-size: 27px;
	margin: 5px;
}
@media screen and (max-width: 767px) {
.shopname1{
	font-size: 24px;
	}
}

span.tel{
	line-height: 1.2;
}
@media screen and (max-width: 767px) {
span.tel{
	line-height: 1;
	}
}

.tel-link {
	font-size: 20px;
	text-decoration: underline;
	margin-top: 20px;
	color: inherit; /* 親要素の色を継承 */
}
@media screen and (max-width: 767px) {
.tel-link {
	font-size: 16px;
	}
}
.tel-link:hover {
	text-decoration: none; /* ホバー時の下線を消す */
}

/* SYSTEM
--------------------------------------- */

.cd-fixed-bg {
    position: relative;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
}
@media screen and (max-width: 767px) {
.cd-fixed-bg {
	background-attachment: scroll;
	}
}

.cd-fixed-bg.cd-bg-1  {
	background-image: url("./images/top_02_system_bg.jpg");
	background-position: center;
	height: 980px;
}
@media screen and (max-width: 767px) {
.cd-fixed-bg.cd-bg-1  {
	background-image: url("./images/top_02_system_bg.jpg");
	background-position: center;
	height: 1480px;
	background-attachment: scroll;
	}
}
.container1{
	width: 1300px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 10px;
}
.title_system{
	justify-content: center;
	font-family: Noto Sans JP;
	color:white;
	font-size: 18px;
	text-align: center;
	margin: 10px 0 30px;
}
@media screen and (max-width: 767px) {
.title_system{
	margin: 10px;
	}
}
.system_en{
	font-family: "Shippori Mincho", serif;
	font-size: 40px;
}
.ryoukinhyo{
	text-align: center;
	color: #FFF;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px; /* 要素間の隙間を調整 */
	margin-bottom: 20px;      
}
@media screen and (max-width: 767px) {
.ryoukinhyo{
	gap: 0px; /* 要素間の隙間を調整 */
	}      
}
.ryoukinhyo > div {
	padding: 10px;
}     
.ryoukinhyo ul {
	width: 450px;
	list-style-type: none;
	padding: 0;
	margin-top:15px;
}
@media screen and (max-width: 767px) {
.ryoukinhyo ul {
	width: 370px;
	list-style-type: none;
	padding: 0;
	margin-top:15px;
	}
}
.ryoukinhyo li {
	font-size: 22px;
	margin: 5px 0;
}
.encho_inf {
	font-size: 15.5px;
	display: block; /* 必要に応じて他のスタイルも追加 */
}
.rank_title_S{
	width: 450px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
}
@media screen and (max-width: 767px) {
.rank_title_S{
	width: 370px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	}
}
.rank_title_A{
	width: 450px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
}
@media screen and (max-width: 767px) {
.rank_title_A{
	width: 370px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	}
}
.credit_info{
    text-align: center;
    color: #FFF; 
}
.info_dai{
	font-family: Noto Sans JP;
	font-size: 20px;
}
@media screen and (max-width: 767px) {
.info_dai{
	font-size: 16px;
	text-align: center;
	margin: 0 15px;
	}
}
.info_sub{
	font-family: Noto Sans JP;
}
@media screen and (max-width: 767px) {	
.info_sub{
	font-size: 11.5px;
	}
}
.credit{
	font-family: Noto Sans JP;
	margin-bottom: 10px;
}
.credit_txt{
	width: 660px;
	background: rgba(0, 0, 0, 0.65);
	padding: 15px 10px 15px 30px;
	font-size: 12px;
	font-family: Noto Sans JP;
	text-align: left;
}
@media screen and (max-width: 767px) {
.credit_txt{
	margin: 0 10px;
	}
}

/* USER POLISY
--------------------------------------- */

.userpolicy{
	width: 100%;
	height: 40%;
	background-color: #21140A;   
}
.container2{
	width: 1300px;
	height: 555px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 10px;
}
@media screen and (max-width: 767px) {
.container2{
	height: 880px;
	}
}
.text_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	color: #FFF;
}
@media screen and (max-width: 767px) {
.text_box{
	gap: 0px;
	}
}
.userpolicy_left{
	margin-left: 25px;
	margin-top: 20px;
}
@media screen and (max-width: 767px) {
.userpolicy_left{
	width: 95%;
	margin: 0 10px;
	margin-top: 20px;
	}
}
.userpolicy_right{
	margin-left: 10px;     
	margin-top: 20px;
}
@media screen and (max-width: 767px) {
.userpolicy_right{
	width: 95%;
	margin: 0 10px;
	margin-top: 20px;
	}
}
.userpolicy_under{
	margin-left: 10px;
	margin-top: -10px;     
}
@media screen and (max-width: 767px) {
.userpolicy_under{
	width: 95%;
	margin: 0 10px;
	margin-top: 20px;
	}
}

.title_userpolicy{
	color:white;
	font-size: 18px;
	text-align: center;
	width: 100%;
	margin: 10px 0;
}
.userpolicy_en{
	font-size: 40px;
}
@media screen and (max-width: 767px) {
.userpolicy_en{
	font-size: 37px;
	}
}
.userpolicy_jp{
	font-family: Noto Sans JP;
	font-size: 18px;       
}
.userpolicy_title_left{
	width: 500px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	text-align: center;
}
@media screen and (max-width: 767px) {
.userpolicy_title_left{
	width: 98%;
	margin: 0 auto;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	}
}
.userpolicy_title_right{
	width: 500px;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	text-align: center;
}
@media screen and (max-width: 767px) {
.userpolicy_title_right{
	width: 98%;
	margin: 0 auto;
	background-color: #796A56;
	padding: 6px;
	font-size: 22px;
	}
}
.userpolicy_naiyo_left{
	font-size: 12px;
	text-align: left;
	margin: 10px 5px;
}
@media screen and (max-width: 767px) {
.userpolicy_naiyo_left{
	font-size: 12px;
	text-align: left;
	margin: 10px 5px;
	}
}
.userpolicy_naiyo_right{
	width: 504px;
	font-size: 12px;
	text-align: left;
	margin: 10px 5px;
}
@media screen and (max-width: 767px) {
.userpolicy_naiyo_right{
	width: 99%;
	font-size: 12px;
	text-align: left;
	margin: 10px 5px;
	}
}
.userpolicy_naiyo_under{
	width: 520px;
	font-size: 12px;
	text-align: left;
}
@media screen and (max-width: 767px) {
.userpolicy_naiyo_under{
	width: 99%;
	font-size: 12.5px;
	text-align: left;
	margin: 10px 5px;
	}
}
.cd-fixed-bg.cd-bg-2  {
  background-image: url("./images/top_03_bg.jpg");
  height: 300px;
}
@media screen and (max-width: 767px) {
.cd-fixed-bg.cd-bg-2  {
  background-image: url("./images/top_03_bg.jpg");
  height: 150px;
  }
}
.footer {
	padding-top: 25px;
	font-family: Noto Sans JP;
}
.footer_waku{
	background-color: #C69C73;
	text-align: center;
	margin-top: -8px;
	color: white;
	height: 108px;
}
.footer a {
	text-decoration: none !important; /* 下線を確実に消す */
	color: inherit !important; /* 親要素の色を確実に継承する */
	margin-left: 15px;
	margin-top: 10px;
}
.footer a:visited {
	color: inherit; /* クリック済みリンクの色を親要素の色にする */
}        
.copyright{
	margin-top: 10px;
}
#section2,#section3{
}
@media screen and (max-width: 767px) {
#section2,#section3{
	margin-top: -50px;
	padding-top: 50px;
	}
}