/*基本設定*/
@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
}
*::selection {
	background: #D36F7A;
	color: #fff;
}

html {
	-webkit-text-size-adjust: 100%;
	height: 100%;
	font-size: 56.25%;
}


body{
  position: relative;
  margin: 0;
	padding: 0;
  text-align: left;
  font-family: YakuHanJP,"EB Garamond","Roboto","YuGothic",'Noto Sans JP',sans-serif;
  font-optical-sizing: auto;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
figure{
  margin: 0;
}

/*リンク*/
a{
  text-decoration: none;
  height: 100%;
}
a:hover{
  text-decoration: none;
  cursor: pointer !important;
  animation-duration: 0.3s;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  color: #c0c0c0;
}
a:visited {
	text-decoration: none;
}
a.child:hover {
	color: inherit;
}
a img {
	transition: 0.6s ease-in-out;
}
p a {
	text-decoration: underline;
}


/*パーツ*/
p{
	color: #414141;
  font-size: 1.8rem;
	line-height: 1.55;
	letter-spacing: 0.05em;
	margin: 0;
}
h1, h2, h3, h4 {
	line-height: 1.35;
	font-size: 100%;
	letter-spacing: 0.05em;
	margin: 0;
}

img {
	width: 100%;
	height: auto;
	border: 0;
	vertical-align: top;
}

table {
	border-collapse: collapse;
}

th {
	font-weight: 500;
}

ul{
  padding: 0 0;
}
ul li{
  list-style: none;
  display: flex;
  border-style: none;
}
.last{
  margin: 0 !important;
}
.italic{
	font-style: italic;
}
.link__border{
	text-decoration: underline;
	color: #000;
}
.note__texts{
	line-height: 1.3;
	margin-top: 10px;
}


/*フォントサイズ*/

.fs150 {
	font-size: 15rem;
}

.fs72 {
	font-size: 7.2rem;
}

.fs56 {
	font-size: 5.6rem;
}

.fs48 {
	font-size: 4.8rem;
}

.fs45 {
	font-size: 4.5rem;
}

.fs42 {
	font-size: 4.2rem;
}

.fs40 {
	font-size: 4.0rem;
}

.fs36 {
	font-size: 3.6rem;
}

.fs32 {
	font-size: 3.2rem;
}

.fs28 {
	font-size: 2.8rem;
}

.fs24 {
	font-size: 2.4rem;
}

.fs23 {
	font-size: 2.3rem;
}

.fs20 {
	font-size: 2.0rem;
}

.fs18 {
	font-size: 1.8rem;
}

.fs16 {
	font-size: 1.6rem;
}

.fs15 {
	font-size: 1.5rem;
}

.fs14 {
	font-size: 1.4rem;
}

.fs13 {
	font-size: 1.3rem;
}

.fs12 {
	font-size: 1.3rem;
}


/*animation*/
.clear{
  clear: both;
}
.fade{
  opacity: 0;
  z-index: 10;
  transform: translateY(-20px);
  transition: 3s;
}
.late-fade{
  opacity: 0;
  z-index: 10;
  transform: translateY(-20px);
  transition: 3s;
}
.fadeInX-left{
  opacity: 0;
  transform: translateX(-100px);
  transition: all 3s;
}
.fadeInX-right{
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.7s;
}
.fadeInY{
  opacity: 0;
  transform: translateY(-20px);
  transition: all 2s;
}
.bluer{
	opacity: 0;
	filter: blur(10px);
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.under-line{
    background: -webkit-linear-gradient(left, rgb(245, 233, 166) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(245, 233, 166) 50%, transparent 50%);
    background: linear-gradient(left, rgb(245, 233, 166) 50%, transparent 50%);
  background-size: 200% .3em;
    background-position: 100% 1em;
    transition: 3s;
}
.under-line.is-active{
    background-position: 0% 1em;
}


/*--------------------------------------

	Flex

--------------------------------------*/

.flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}


/*--------------------------------------

	base

--------------------------------------*/

:root {
  --glid: 4.34vw;
}



/*--------------------------------------

	opening animation

--------------------------------------*/

.fog__overlay {
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: linear-gradient(rgba(235, 235, 235, 0.17) 0%, rgba(181, 181, 181, 0.67) 81.1%, #b4b4b4 100%);

  z-index: 9999;
  overflow: hidden;
}
.fog-layer {
	position: absolute;
  width: 150%;
  height: 150%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  opacity: 0.8;
  animation: moveFog 1s ease-in-out infinite, fadeFog 1s ease-out forwards;
}

.layer1 {
  top: -20%;
  left: -30%;
  animation-delay: 0s, 0s;
}

.layer2 {
  top: -10%;
  left: -40%;
  animation-delay: 0.3s, 0.3s;
}

.layer3 {
  top: 0%;
  left: -25%;
  animation-delay: 0.6s, 0.6s;
}

@keyframes moveFog {
  0% {
    transform: translate(-5%, -5%);
  }
  50% {
    transform: translate(5%, 5%);
  }
  100% {
    transform: translate(-5%, -5%);
  }
}

@keyframes fadeFog {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}




/*--------------------------------------

	header

--------------------------------------*/

header {
  width: 100vw !important;
  line-height: 0;
  position: fixed;
  top: 0;
  z-index: 9000;

}

#nav-toggle {
position: fixed;
top: 20px;
margin-left: 380px;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 50%;
transition: .6s cubic-bezier(.215,.61,.355,1);
mix-blend-mode: difference;
}
#nav-toggle > div {
width: 20px;
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-\ transform: translateY(-50%) translateX(-50%);
}
#nav-toggle > div > span.toggle {
width: 100%;
height: 1px;
left: 0;
display: block;
background-color: #fff;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
#nav-toggle > div > span.toggle {
width: 100%;
height: 1px;
left: 0;
display: block;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
#nav-toggle span.toggle:nth-child(1) {
top: 0;
}
#nav-toggle span.toggle:nth-child(2) {
top: 10px;
}
.nav__eng{
	color: #fff;
	line-height: 1;
	letter-spacing: 0.05em;
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-\ transform: translateY(-50%) translateX(-50%);
}
.open#nav-toggle span.toggle {
background: #fff;
}
.open#nav-toggle span.toggle:nth-child(1) {
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.open#nav-toggle span.toggle:nth-child(2) {
top: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* z-index */
#nav-toggle {
z-index: 9999;
}
#container {
z-index: 900;
}
#gloval-nav {
  opacity: 0;
  color: #fff;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  visibility: hidden;
  font-size: 29px;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 9998;
  width: 100vw;
  display: flex;
  align-items: center;

}
#gloval-nav nav a {
  line-height: 1.3;
display: block;
text-decoration: none;
box-sizing: border-box;
transition: color .3s ease;
font-size: 1.2rem;;
font-weight: 300;
letter-spacing: .5em;
text-align: left;
}
#gloval-nav nav a:hover{
  opacity: 1;
  transition: all 0.4s ease-out;
}
.gl-left{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.5);
}
.gl-inner{
  overflow: scroll;
  z-index: 9999;
	width: 100vw;
  height: 100vh;
  padding-right: 20px;
  padding-left: 20px;
  background-color: rgb(26 26 26);
  opacity: 1;
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.gl-inner h2{
  font-weight: 300;
  line-height: 1;
  margin-bottom: 10px;
  transition: .6s cubic-bezier(.215,.61,.355,1);
	color: #fff;
}
.gl-inner p{
  font-weight: 400;
    line-height: 1;
    text-align: left;
    color: rgb(134 117 96);
    transition: .6s cubic-bezier(.215,.61,.355,1);
}
.gl-inner ul li p{
	padding-left: 3px;
}
.nav-menu-img{
  position: absolute;
  right: 5%;
  bottom: 30px;
  width: 20%;
}
#gloval-nav nav{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12rem;
	padding: 0 4rem;
	max-width: 430px;
}
#gloval-nav ul {
list-style: none;
padding: 0;
width: 100%;
margin-bottom: 30px;
}
#gloval-nav ul li {
  position: relative;
  display: block;
padding-bottom: 30px;
opacity: 0;
-webkit-transform: translateX(200px);
transform: translateX(200px);
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: transform .3s ease, opacity .2s ease;
transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
}
#gloval-nav ul li:hover{
  opacity: .3;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}
#gloval-nav ul li:hover{
  opacity: .3;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

#gloval-nav ul li:nth-child(1) {
transition-delay: .03s;
}
#gloval-nav ul li:nth-child(2) {
transition-delay: .05s;
}
#gloval-nav ul li:nth-child(3) {
transition-delay: .15s;
}
#gloval-nav ul li:nth-child(4) {
transition-delay: .25s;
}
#gloval-nav ul li:nth-child(5) {
transition-delay: .35s;
}
#gloval-nav ul li:nth-child(6) {
transition-delay: .45s;
}

.others-menu{
  width: 100%;
	max-width: 430px;
	margin-bottom: 12rem;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
	flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
    transition: opacity .2s ease, -webkit-transform .3s ease;
    transition: transform .3s ease, opacity .2s ease;
    transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
		padding: 0 4rem;
}
.Reservation-link{
	height: auto;
}
.Reservation-link img{
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.Reservation-link:hover img{
	transform: translateY(3px);
	opacity: .3;
}
.nav__sns{
	padding-top: 30px;
	border-top: 1px solid #545252;
	width: 100%;
	margin-top: 50px;
}
.follow__texts{
	font-weight: 700 !important;
	text-align: center !important;
	color: #fff !important;
}
.nav__sns .yuna__sns{
	margin-top: 30px;
	grid-gap: 40px;
}


/* open */
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
  width: 100%;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: opacity .9s ease, -webkit-transform 1s ease;
transition: transform 1s ease, opacity .9s ease;
transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
.open #gloval-nav li:hover{
  opacity: 1;
}
.open .others-menu{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: opacity .9s ease, -webkit-transform 1s ease;
transition: transform 1s ease, opacity .9s ease;
transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
.nav-close{
  z-index: 9999;
}



/*--------------------------------------

	fixed

--------------------------------------*/

.l__container{
	position: relative;
	opacity: 0;
  visibility: hidden;
  height: 100%;
}
.l__container.active {
  opacity: 1;
  visibility: visible;
  animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.left__container{
	position: fixed;
	top: 0;
	left: 0;
	width: calc((100vw - 460px) / 2);
	height: 100dvh;
	background-image: url(https://yuna-tsuwano.jp/spirit-of-tsuwano/img/left__fixed__bg.webp);
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.left__container::after{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(0, 0, 0, 0.85);
}
.left__index{
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 20rem 5rem;
}
.left__index h3{
	text-align: center;
	color: #dcdcdc;
}
.left__index ul{
	margin-top: 50px;
	margin-bottom: 0;
}
.left__index ul li{
	margin-top: 30px;
	justify-content: center;
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.left__index ul li a{
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.left__index ul li a:hover{
	transform: translateY(3px);
	opacity: .3;
}
.left__index ul li h2{
    line-height: 1;
    margin-bottom: 5px;
    transition: .6s cubic-bezier(.215,.61,.355,1);
    color: #dcdcdc;
}
.left__index ul li p{
	font-weight: 400;
	    line-height: 1;
	    text-align: center;
	    color: rgb(134 117 96);
	    transition: .6s cubic-bezier(.215,.61,.355,1);
}
.left__banner{
	margin: 50px auto 0;
	max-width: 200px;
}

.left__sns{
	padding-top: 30px;
	border-top: 1px solid #545252;
	max-width: 200px;
	margin: 50px auto 0;
}
.sns__texts{
	font-weight: 700 !important;
	text-align: center !important;
	color: #dcdcdc !important;
}
.left__sns .yuna__sns{
	margin-top: 30px;
	grid-gap: 40px;
}
.left__sns .yuna__sns img{
	width: 20px !important;
	height: 20px !important;
}

.right__container{
	position: fixed;
	top: 0;
	right: 0;
	width: calc((100vw - 460px) / 2);
	height: 100dvh;
}
.right__container::after {
    position: absolute;
    top: 0;
    left: 0;
		z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.7);
}
@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
  }
}
@keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
  }
}
.swiper-container{
  position: relative;
	z-index: 1;
}
.right__mv__wrapper .swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.right__mv__wrapper .swiper-slide-active .swiper-img,
.right__mv__wrapper .swiper-slide-duplicate-active .swiper-img,
.right__mv__wrapper .swiper-slide-prev .swiper-img {
    -webkit-animation: zoomUp 8s linear 0s;
    animation: zoomUp 8s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.right__mv__wrapper .swiper-img {
    background-size: cover;
    background-position: center center;
    height: 100dvh;
}

@media only screen and (max-width: 1200px){
	.left__index, .right__logo__img{
		display: none;
	}
}
@media only screen and (min-width: 1201px){
	#nav-toggle{
		display: none;
	}
}
@media only screen and (max-width: 450px){
	#nav-toggle{
		margin-left: 0;
		right: 20px;
	}
}
.right__container .right__logo__img{
	position: fixed;
	top: 80px;
	right: 50px;
	width: 180px;
	z-index: 20;
}


/*--------------------------------------

	main

--------------------------------------*/

.main__container{
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	background-color: #FAF9F5;
	box-shadow: 0 4px 64px rgba(25,25,25,.15);
}
@media only screen and (min-width: 1025px){
	.main__container{
	border-right: 5px solid #fff;
	border-left: 5px solid #fff;
	box-sizing: content-box;
  }
}


/*--------------------------------------

	firstView

--------------------------------------*/

.firstView__wrapper{
	width: 100%;
	height: 100dvh;
	position: relative;
}
.fv__fixed{
	position: fixed;
	width: 100%;
	max-width: 450px;
	height: 100dvh;
}
.fv__bg{
	position: fixed;
  overflow: hidden;
  max-width: 450px;
	width: 100%;
	height: 100dvh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}
.fv__scroll__main{
	position: absolute;
bottom: 20px;
left: 20px;
}
.fv__scroll__inner {
    text-align: center;
}
.scroll-text{
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
			font-family: "Roboto";
	    font-weight: 500;
	    line-height: 1;
	    color: #F2F2F2;
}
.scroll-text::after{
	content: '';
	    display: inline-block;
	    margin-top: 10px;
	    width: 15px;
	    height: 20px;
	    background-image: url(https://yuna-tsuwano.jp/spirit-of-tsuwano/img/down-arrow.webp);
	    background-size: contain;
	    background-repeat: no-repeat;
	    vertical-align: baseline;
}
.fv__movie__main{
	position: absolute;
	right: 20px;
	bottom: 10vh;
	width: 85px;
	height: 85px;
}
.full__movie{
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	width: 60px;
}
.full__circle {
  animation: spin 40s linear infinite; /* 通常時の無限回転 */
}

.fv__movie__main a:hover .full__circle {
  animation: spin-fast 10s linear infinite; /* ホバー時の高速回転 */
}

/* 通常回転アニメーション */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 逆回転アニメーション */
@keyframes spin-fast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



.fv__bluer {
  z-index: 0;
  position: absolute;
  top: 25.2vh;
  margin-left: 20px;
}

.fv__body__main {
  width: 85%;
}

.fv__body__img,
.fv__scroll__main,
.fv__movie__main {
  vertical-align: bottom;
  opacity: 1;
  -webkit-backface-visibility: hidden;
  filter: blur(0px);
  transition: opacity 0.2s linear, filter 0.2s linear;
}




/*--------------------------------------

	main contents

--------------------------------------*/

.conents__inner{
	position: relative;
	z-index: 10;
}
.story__wrapper, .features__wrapper{
	padding-top: 150px;
	background-color: #FAF9F5;
}
.details__wrapper, .tsuwano__wrapper{
	padding-top: 100px;
	background-color: #FAF9F5;
}
.reserve__wrapper{
	background-color: #FAF9F5;
}
.info__wrapper{
	padding-top: 100px;
	background-color: #F5F4F4;
}

/*--------------------------------------

	overview__wrapper

--------------------------------------*/

.overview__wrapper{
	padding: 200px 20px 50px;
	background: linear-gradient(rgba(29, 29, 29, 0) 0%, rgba(26, 26, 26, 0.89) 10.34%, #000 100%);

}
.ov__title__head{
	width: 95%;
	margin: 0 auto;
}
.ov__body__inner{
	position: relative;
	margin-top: 100px;
	padding: 0 10px;
}
.ov__body__column01, .ov__body__column03{
	position: relative;
}
.ov__body__column02, .ov__body__column03{
	margin-top: 70px;
	position: relative;
}
.ov__column01__texts, .ov__column03__texts{
	width: 80%;
	position: relative;
	z-index: 10;
}
.ov__column02__texts{
	margin-left: 20%;
	width: 80%;
	position: relative;
	z-index: 10;
}
.ov__column01__texts p, .ov__column02__texts p, .ov__column03__texts p{
	color: #BCBCBC;
}
.ov__parallax__no1{
	width: 80%;
	margin-top: -50px;
	margin-left: 20%;
}
.ov__parallax__no2{
	width: 28%;
	margin-top: -30px;
	margin-left: 30px;
}
.ov__parallax__no3{
	width: 30%;
	position: absolute;
	top: 100px;
}
.ov__parallax__no4{
	width: 60%;
	margin-top: 70px;
	margin-left: 30%;
	position: relative;
	z-index: 11;
}
.ov__parallax__no5{
	width: 33%;
	margin-left: 67%;
	position: relative;
	z-index: 10;
	margin-top: -10px;
}
.ov__parallax__no6{
	width: 55%;
	margin-top: 50px;
	margin-left: 10%;
	position: relative;
	z-index: 11;
}
.ov__parallax__no7{
	width: 33%;
	margin-left: 57%;
	margin-top: -30px;
	position: relative;
	z-index: 10;
}

/* 共通スタイル */
.ov__img {
	opacity: 0;
  transform: translateY(20px); /* 初期位置は下にオフセット */
  transition: transform 15s ease-in-out, opacity 1s ease-in-out;
}

/* 上に移動するアニメーション */
.ov__img.visible {
  opacity: 1;
  transform: translateY(-30px); /* 元の位置に戻る */
}

/* 少し早い移動の対象 */
.ov__img.fast {
  transition: transform 13s ease-in-out, opacity 1s ease-in-out;
}

.ov__parallax{
  transition: transform 0.2s ease-out; /* パララックス効果をスムーズに */
}



/*--------------------------------------

	story__wrapper

--------------------------------------*/

.story__wrapper{
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 100px;
	background-image: linear-gradient(to top, transparent 0%, transparent 70%, #000 100%), url(https://yuna-tsuwano.jp/spirit-of-tsuwano/img/story__bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.story__title{
	width: 33.4%;
}
.story__body{
	padding-top: 30px;
	margin-left: 30px;
}
.story__body__texts{
	margin-top: 50px;
	color: #D0D0D0;
}
.story__img__no1{
	margin-top: 50px;
	width: 70%;
}
.story__img__no2{
	margin-top: 40px;
	width: 80%;
	margin-left: 20%;
}


/*--------------------------------------

	features__wrapper

--------------------------------------*/
.features__wrapper{
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 100px;
	background-image: url(https://yuna-tsuwano.jp/spirit-of-tsuwano/img/features__bg.webp);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center;
}
.features__title{
	width: 63.17%;
}
.features__index{
	width: 80%;
	margin-top: 60px;
	margin-left: 20%;
}
.f__index__inner{
	position: relative;
	margin-top: 10px;
}
.f__index__column{
	padding: 10px 0 20px;
	border-top: 1px solid #D0D0D0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
}
.f__index__column::before{
	content: "";
	width: 20px;
	height: 1px;
	background-color: #717171;
	position: absolute;
	top: -1px;
	right: 0;
}
.f__index__title{
	margin-left: 10px;
	margin-right: 10px;
	color: #333333;
}
.f__index__column a{
		margin-left: auto;
}
.f__index__column a:hover img{
	transform: translateY(5px);
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.f__index__column img{
	width: 20px;
	margin-top: 2px;
}
.features__main{
	margin-top: 20px;
}
.features__column{
	position: relative;
	padding-top: 60px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.f__main__no{
	width: 25px;
}
.f__main__no img{
	width: 25px;
}
.f__main__body{
	margin-top: 15px;
	margin-left: 40px;
	flex-grow: 1;
}
.f__main__texts{
	margin-top: 30px;
}
.f__main__image{
	margin-top: 40px;
}
.f__main__image p{
	margin-top: 10px;
	color: #717171;
	line-height: 1.3;
}
.image__no1{
	width: 80%;
}
.image__no2{
	margin-top: 30px;
	width: 70%;
	margin-left: 30%;
}
.image__no3{
	width: 80%;
	margin-left: 20%;
}
.image__no4{
	margin-top: 30px;
	width: 70%;
}
.image__no5{
	width: 70%;
}
.image__no6{
	margin-top: 30px;
	width: 80%;
	margin-left: 20%;
}
.image__no7{
	width: 70%;
	margin-left: 30%;
}
.image__no8{
	margin-top: 30px;
	width: 80%;
}


/*--------------------------------------

	more information

--------------------------------------*/

.reserve__wrapper{
	padding-right: 20px;
	padding-left: 20px;
	background-image: url(https://yuna-tsuwano.jp/spirit-of-tsuwano/img/info__bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.reserve__inner{
	padding: 70px 50px;
}
.reserve__texts p{
	color: #D0D0D0;
	margin-top: 30px;
}
.reserve__more{
	margin-top: 40px;
	transition: .5s cubic-bezier(.215,.61,.355,1);
}
.reserve__wrapper a:hover .reserve__more{
	background-color: rgba(36,35,35,0.8);
}


/*--------------------------------------

	details__wrapper

--------------------------------------*/

.details__wrapper{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
	background: linear-gradient(#ededed 0%, #eaf2f4 25.12%, #cba87e 48.28%, #272c4a 63.55%, #19191c 80.79%, #1a1a1a 100%);
}
.details__title{
	width: 45.6%;
}
.details__wrapper .contents__subTexts{
	width: 80%;
	margin-top: 40px;
	margin-left: 20%;
}
.details__inner{
	margin-top: 80px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.details__index{
	width: 75px;
	position: sticky;
	top: 70px;
	left: 0;
}
.d__index__box{
	position: relative;
	margin-bottom: 40px;
	width: 75px;
}
.d__index__line{
	width: 1px;
	height: calc(100% + 40px);
	background-color: #707070;
	position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
	transform: translateX(-50%);
}
.d__index__circle{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #717171;
	position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	transition: .6s cubic-bezier(.215,.61,.355,1);
}
.circle__01, .time__02, .time__03, .time__04, .time__05, .time__06, .time__07{
	opacity: 0;
}
.d__index__time{
	transition: .6s cubic-bezier(.215,.61,.355,1);
}
.details__contents{
	width: calc(100% - 75px);
	padding-left: 20px;
}
.details__column{
	padding-top: 70px;
	position: relative;
}
.details__column:nth-child(1){
	padding-top: 0;
}
.d__category{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.category__texts{
	border-radius: 12.5px;
	background: #fff;
	border: 1px solid #707070;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	padding: 7px 10px;
	white-space: nowrap;
}
.category__texts p{
	font-family: "Roboto";
	font-weight: 500;
	line-height: 1;
	color: #717171;
}
.category__line{
	margin-left: 10px;
	flex-grow: 1;
	height: 1px;
	background-color: #717171;
}
.d__title{
	margin-top: 30px;
}
.d__title h4{
font-weight: 500;
color: #1d1d1d;
}
.d__column__05 .d__title h4, .d__column__06 .d__title h4, .d__column__07 .d__title h4{
color: #fff;
}
.d__title p{
	margin-top: 5px;
}
.d__column__05 .d__title p, .d__column__06 .d__title p, .d__column__07 .d__title p{
color: #fff;
}
.d__body{
	margin-top: 20px;
}
.d__body p{
	font-family: "Roboto";
}
.d__column__05 .d__body p, .d__column__06 .d__body p, .d__column__07 .d__body p{
	color: #D0D0D0;
}
.d__swiper{
	margin: 30px 0 0;
}
.swiper-slide {
  overflow: hidden;
}
.circle__01.is__visible, .time__02.is__visible, .time__03.is__visible, .time__04.is__visible, .time__05.is__visible, .time__06.is__visible, .time__07.is__visible{
	opacity: 1;
}
.time__01.is__invisible, .circle__02.is__invisible, .circle__03.is__invisible, .circle__04.is__invisible, .circle__05.is__invisible, .circle__06.is__invisible, .circle__07.is__invisible{
	opacity: 0;
}
.time__02:hover .circle__02{
	opacity: 1;
}



/*--------------------------------------

	about tsuwano

--------------------------------------*/

.tsuwano__wrapper{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
}
.tsuwano__wrapper .tsuwano__title{
	width: 70.82%;
	position: relative;
	z-index: 10;
}
.t__main__img{
	width: 70%;
	margin-top: -80px;
	margin-left: 30%;
	position: relative;
	z-index: 0;
}
.t__body{
	margin-top: 70px;
}
.t__01{
	width: 80%;
}
.t__body__img{
	margin-top: 70px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	grid-gap: 20px;
}
.t__b__01{
	width: 45%;
}
.t__b__02{
	width: 55%;
	margin-top: 50px;
}
.t__body__img p {
    margin-top: 10px;
    color: #717171;
    line-height: 1.3;
}
.t__02{
	width: 80%;
	margin-left: 20%;
}
.t__b__03{
	width: 80%;
}
.t__03{
	width: 90%;
}
.t__b__04{
	width: 70%;
	margin-left: 30%;
}


/*--------------------------------------

	faq

--------------------------------------*/

.info__wrapper{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
}
.info__wrapper .info__title{
	width: 73.65%;
}
.info__wrapper .contents__subTexts{
	margin: 40px 0 0 10px;
}
.info__inner{
	position: relative;
	margin-top: 60px;
}
.qa__block{
	position: relative;
	margin-top: 50px;
}
.q__column, .a__column{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
 .a__column{
	 margin-top: 20px;
	 margin-left: 30px;
 }
 .q__texts{
	 padding-left: 8px;
 }
 .a__mark{
	 font-family: "Roboto";
	 color: #717171;
 }
 .a__texts{
	 padding-left: 8px;
	 font-family: "Roboto";
	 color: #717171;
 }


/*--------------------------------------

	footer

--------------------------------------*/

.l__footer{
	background-color: #FAF9F5;
	padding: 100px 20px 20px;
}
.footer__container{
	text-align: center;
}
.footer__logo{
	width: 70%;
	margin: 0 15%;
}
.footer__yuna__info{
	margin-top: 30px;
	margin-bottom: 30px;
	padding-bottom: 50px;
	border-bottom: 1px solid #E6E6E6;
}
.yuna__name h3, .yuna__name p, .yuna__tel p, .yuna__member p{
	font-family: "Zen Old Mincho";
}
.yuna__name h3{
	font-weight: 500;
}
.yuna__name p, .yuna__tel p, .yuna__member p{
	color: #4B4B4B;
}
.yuna__name p{
	margin-top: 10px;
}
.yuna__tel{
	margin-top: 30px;
}
.yuna__member{
	margin-top: 20px;
}
.yuna__member .fs12{
	margin-top: 5px;
	line-height: 1.7;
}
.yuna__sns{
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	grid-gap: 50px;
}
.yuna__sns img{
	width: 30px;
	height: 30px;
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.yuna__sns a:hover img{
	transform: translateY(5px);
	opacity: .5;
}
.footer__pages{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	grid-gap: 50px;
}
.footer__pages a:hover p{
	transform: translateY(3px);
	opacity: .3;
}
.f__pages__left p, .f__pages__right p{
	margin-top: 20px;
	transition: 1s cubic-bezier(.215,.61,.355,1);
}
.footer-info{
	margin-top: 50px;
}

/*打ち消し*/
.f__main__image p, .t__body__img p{
	display: none;
}