@charset "UTF-8";
/* CSS Document */



/* FV*/

.sp{
display:none;
}

.pc{
display:block;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}



.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
　object-fit: cover;
　object-position: center;
  opacity: 0;
  z-index: 2;
  animation: fadeInImage 0s ease 0.2s forwards;
}

.content {
  position: relative;
  z-index: 4;
  opacity: 0;
  padding: 0 20px;
  animation: fadeInContent 0.2s ease 0.8s forwards;
  text-align: center;
}

.main-title {
  width:100%;
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}

.sub-title {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 0 2rem;
  letter-spacing: 0.05em;
}


.scroll-text {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}



@keyframes fadeInImage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInContent {
  0% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollLine {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    height: 80px;
    opacity: 1;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}


@media (max-width: 768px) {
  .main-title {
    width:60%;
    font-size: 2.5rem;
  }
  .sub-title {
    font-size: 1.4rem;
  }

.sp{
display:block;
}


.pc{
display:none;
}




}

/* ここまで */

/* キャンペーン　設定 */

.cp_column{

display:flex;
width:100%;

}



.cp_column_list{
margin:20px auto;
width:50%;
text-align:center;
}


/* button　設定 */

.pp{

display:flex;
width:100%;
padding-top:50px;

}

.btn001 {
    margin: 0 auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    max-width: 260px; /* ボタンの幅 */
    height: 60px; /* ボタンの高さ */
    color: rgb(163, 141, 11); /* テキスト色 */
    background-color: #fff; /* ボタン背景色 */
    font-size: 1.8rem; /* フォントサイズ */
    font-weight:bold;
　text-decoration: none;
  border: double 4px rgb(163, 141, 11);
  border-radius: 3px;
  transition: .4s;
}

.btn001:hover {
  background: #fffbef;
}


@media screen and (orientation: portrait) {


.cp_column{

display:block;
width:100%;
}

.cp_column_list{
margin:20px auto;
width:100%;
text-align:center;
}


.btn001 {
margin:20px 10px;
}

.pp{
display:inline;
width:100%;
padding-top:50px;
}




.container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
　object-fit: cover;
　object-position: center;
  opacity: 0;
  z-index: 2;
  animation: fadeInImage 0.1s ease 0.2s forwards;
}




.boximg-a{
		 width: 80%;
		 top:-4%;
		 left: 8%;
	}

.jtbox2{
		 font-size:2.8vw;
		 padding:16em 2em 4em;
		 2em;
		 margin: 4.5em auto;
		 display: block;
		 width: 96%;
		 height: auto;
	}
	 .jtbox2 p{
		 font-size:3.5vw;
		 line-height: 1.8em;
	}

.flor,.flol{
		 float: none;
	}











}




/* タブの設定 */

.tabs{
  width:100%;
  margin:10px auto;
  position:relative;
}

.tab-buttons span{
  color:#000;
  background:#fff;
  cursor:pointer;
  display:block;
  width:33.3%;
  float:left;
  text-align:center;
  height:60px;
  line-height:40px;
}
.tab-content{
  padding:15px;
  background:#fff;
  display:inline-block;
  color:#000;
}
#lamp{
  width:50%;
  height:4px;
  background:#A38D0B;
  display:block;
  position:absolute;
  top:65px;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content2{
  left:33.3%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content3{
  left:50%;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}
#lamp.content1{
  left:0;
  transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
}



/* 見出し設定 */

.border1 {
  margin-top:50px;
  font-size:3.0rem;
  text-align:center;
  position: relative;
  padding: 0.25em 0;
}

.border1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(163, 141, 11), transparent);
  background: linear-gradient(to right, rgb(163, 141, 11), transparent);



 .m1100{
	 max-width: 96%;
	 width: 1100px;
	 display: block;
	 margin: 0 auto;
}



#sec02{
	 margin-top:2em;
}
 #sec03{
	 padding: 3em 0 5em 0;
	 background-color:rgba(255,255,230,0.25);
}
 #sec03 p{
	 padding: 0 1em;
	 box-sizing: border-box;
}
 #sec03 h3{
	 padding: .5em 1em;
	 box-sizing: border-box;
}
 #sec04{
	 background-color:rgba(230,235,245,0.5);
	 padding: 5em 0 0 0;
	 box-sizing: border-box;
}
 #sec05{
	 padding: 4em 0;
	 background-color:rgba(255,255,230,0.6);
}
 #sec06{
	 background-color:rgba(230,235,245,0.4);
	 padding: 4em 0 1em 0;
	 box-sizing: border-box;
}


 .fadein_ {
	 opacity : 0;
	 transform : translate(0, 1.5em);
	 transition : all 1s;
}
 h1.fadein_ {
	 opacity : 0;
	 transform : translate(-0.8em, 0);
	 transition : all 1s;
	 transition-delay: 0.2s;
}
 h2.fadein_ {
	 opacity : 0;
	 transform : translate(-0.8em, 0);
	 transition : all 1s;
	 transition-delay: 0.4s;
}
 .fadein_.delay {
	 transform : translate(0, 2.5em);
	 transition : all 1.2s;
}
 .fadein_.num{
	 transform : translate(0, 0.5em);
	 transition : all 0,5s;
}
 .fadein_.scrollin_ {
	 opacity : 1;
	 transform : translate(0, 0);
}



.jtbox2{
		 font-size:2.8vw;
		 padding:16em 2em 4em;
		 2em;
		 margin: 4.5em auto;
		 display: block;
		 width: 96%;
		 height: auto;
	}
	 .jtbox2 p{
		 font-size:3.5vw;
		 line-height: 1.8em;
	}


 .flor{
	 float: right;
}
 .flol{
	 float: left;
}

.boximg-a{
	 position: absolute;
	 width: 40%;
	 top:4%;
	 right: 5%;
	 z-index: 4;
	 transform: rotate(-4deg);
	 box-shadow: .4em .4em 0px 0 rgb(0, 0, 0, 0.2);
}






/* スマホ設定 */　

@media screen and (max-width: 767px) {


.cp_column{

display:block;
width:100%;

}


.cp_column_list{
margin:20px auto;
width:50%;
text-align:center;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
　object-fit: cover;
  opacity: 0;
  z-index: 2;
  animation: fadeInImage 0.1s ease 0.2s forwards;
}




.boximg-a{
		 width: 80%;
		 top:-4%;
		 left: 8%;
	}

.jtbox2{
		 font-size:2.8vw;
		 padding:16em 2em 4em;
		 2em;
		 margin: 4.5em auto;
		 display: block;
		 width: 96%;
		 height: auto;
	}
	 .jtbox2 p{
		 font-size:3.5vw;
		 line-height: 1.8em;
	}

.flor,.flol{
		 float: none;
	}



}