@charset "utf-8";

/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/

@import url("rest.css");

/*-------------------------------------------------*/
/*全体設定*/

:root{
--ac1:#ffea81;
--ac2:#63310b;
--tx1:#1A020B;
--tx2:#ffea81;
--tx3:#fff;
--f-not:"Noto Sans JP", sans-serif;
--f-hra:"FP-HiraMinProN-W3", serif;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/*--------------------*/

.sp_only { display:none;}
#wrapper {
width:100%;
font-family: var(--f-hra);
font-size: 22px;
color: var(--tx1);
}
#contents {
width:100%;
margin:0 auto;
}

div,section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
line-height: 1.5em;
letter-spacing: 0.06em;
}

/*-------------------------------------------------*/
/*ヘッダー*/



/*-------------------------------------------------*/
/*フッター*/

footer {
background: url("../images/recom_back.webp");
background-size: cover;
display: flex;
align-items: center;
flex-flow: column;
padding: 90px 0 30px;
}

footer > img:nth-of-type(1) {
width: 150px;
margin-left: 7px;
}
footer > img:nth-of-type(2) {
width: 300px;
margin-top: -87px;
margin-bottom: 110px;
}
footer h2 {
}
footer h2 span {
display: inline-block;
margin-right: 0.8em;
font-size: 80%;
}

.otkr_lnk {
padding: 60px 0;
}
.otkr_lnk img {
width: 600px;
filter: drop-shadow(1px 1px 7px rgba(117,76,36,0.22));
transition: 0.13s ease-in-out;
}
.otkr_lnk img:hover {
filter: drop-shadow(1px 1px 3px rgba(117,76,36,0.22));
}

.sponsor {
width: 1100px;
padding: 110px 0 80px;
}
.sponsor h3 {
font-size: 30px;
text-align: center;
margin-bottom: 25px;
}
.sponsor ul {
width: 100%;
display: flex;
justify-content: center;
}
.sponsor ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sponsor ul img {
width: 100%;
}
.sponA {
gap:5.5%;
margin-bottom: 30px;
}
.sponA li {
width: 47%;
}
.sponB {
gap:2%;
margin-bottom: 60px;
}
.sponB li {
width: 32%;
}
.sponC {
font-size: 18px;
justify-content: space-between;
gap:18px 2%;
}
.sponC li {
width: 23.5%;
}


#copyright {
text-align: center;
font-size: 14px;
font-family:var(--f-ftu);
margin-top: 30px;
}

/*-------------------------------------------------*/
/*コンテンツ*/

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　TOP　◆◆*/

/*--////　loading　////--*/
#loading{
width: 100%;
min-width: 1100px;
height: 100vh;
overflow: hidden;
position: fixed;
z-index: 100;
}
#loading img:not(.loadlogo):not(.lay1){
position: absolute;
top: 0;
height: 105vh;
filter: drop-shadow(1px 1px 7px rgba(96,56,19,0.1));
}
#loading img:nth-of-type(1){
right: 49.92%;
animation: hakeL 6.4s 2s ease-in forwards;
z-index: 103;
}
#loading img:nth-of-type(2){
left: 49.92%;
animation: hakeR 6.4s 2s ease-in forwards;
z-index: 103;
}
#loading img:nth-of-type(3){
right: calc(50% - 250px);
animation: hakeL2 7.3s 2.0s ease-in forwards;
z-index: 102;
}
#loading img:nth-of-type(4){
left: calc(50% - 250px);
animation: hakeR2 7.7s 2.0s ease-in forwards;
z-index: 102;
}
#loading img:nth-of-type(5){
right: calc(50% - 320px);
animation: hakeL3 7.5s 2.0s ease-in-out forwards;
z-index: 101;
}
#loading img:nth-of-type(6){
left: calc(50% - 320px);
animation: hakeR3 8.0s 2.0s ease-in-out forwards;
z-index: 101;
}
@keyframes hakeL{
0%{ transform: translateX(0px);}
20%{ transform: translateX(-1px);}
51%{ transform: translateX(-3px);}
90%{transform: translateX(-160vw) rotate(-25deg) scale(1.5) translateY(280px);}
100%{transform: translateX(-290vw) rotate(-25deg) scale(1.5) translateY(280px);}
}
@keyframes hakeR{
0%{ transform: translateX(0px);}
20%{ transform: translateX(1px);}
51%{ transform: translateX(3px);}
90%{transform: translateX(160vw) rotate(-25deg) scale(1.5) translateY(-280px);}
100%{transform: translateX(290vw) rotate(-25deg) scale(1.5) translateY(-280px);}
}
@keyframes hakeL2{
0%{ transform: translateX(0px);opacity: 1;}
29%{ transform: translateX(0px);opacity: 1;}
49%{ transform: translateX(-50px);opacity: 0.9;}
100%{transform: translateX(-190vw);opacity: 0.0;}
}
@keyframes hakeR2{
0%{ transform: translateX(0px);opacity: 1;}
29%{ transform: translateX(0px);opacity: 1;}
49%{ transform: translateX(50px);opacity: 0.9;}
100%{transform: translateX(190vw);opacity: 0.0;}
}
@keyframes hakeL3{
0%{ transform: translateX(0px);opacity: 1;}
32%{ transform: translateX(0px);opacity: 1;}
52%{ transform: translateX(-70px);opacity: 0.9;}
100%{transform: translateX(-110vw);opacity: 0.0;}
}
@keyframes hakeR3{
0%{ transform: translateX(0px);opacity: 1;}
32%{ transform: translateX(0px);opacity: 1;}
52%{ transform: translateX(70px);opacity: 0.9;}
100%{transform: translateX(110vw);opacity: 0.0;}
}

#loading img.loadlogo{
position: absolute;
top: 42%;
left: calc(50% - 90px);
width: 180px;
z-index: 105;
animation: logo 5.5s 0s linear forwards;
}
@keyframes logo{
0%{ transform: scale(1); opacity: 0.7;}
30%{ transform: scale(1); opacity: 0.7;}
32%{ transform: scale(1.0); opacity: 0.7;}
38%{ transform: scale(1.0); opacity: 0;}
100%{transform: scale(1.0); opacity: 0;}
}

#loading img.lay1{
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 104;
animation: lay1 8.1s 0s linear forwards;
}
@keyframes lay1{
0%{ width: 0px;}
36% {width: 00px;opacity: 0;}
43% {width: 5px;opacity: 1;}
48% {width: 30px;opacity: 1;}
68% {width: 260px; opacity: 1;}
79% {width: 1700px; opacity: 0.6;}
81% {width: 2200px; opacity: 0.3;}
91%{width: 700px; opacity: 0.1;}
100%{width: 100px; opacity: 0;}
}
#loading::after{
position: absolute;
display: block;
content: "";
background: #fff;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 102;
animation: lay2 7.9s 0s linear forwards;
}
@keyframes lay2{
0%{opacity: 0.9;}
64% {opacity: 0.9;}
79% {opacity: 0.8;}
87% {opacity: 0.0;}
100%{opacity: 0;}
}

/*--////　main_visual　////--*/
#main_visual{
width: 100%;
min-width: 1100px;
height: calc(21vw + 470px);
min-height: 780px;
overflow: hidden;
background: url("../images/mainback.webp") no-repeat;
background-size: cover;
position: relative;
}
#main_visual div[class^="cldp"] {
position: absolute;
z-index: 1;
}
#main_visual div[class^="cldp"] img {
width: 100%;
display: block;
}
#main_visual div.cldpl1 {
left: calc(26% - 200px);
top: 2%;
width: calc(12% + 60px);
animation: yureX1 7.11s infinite  ease-in-out alternate;
}
#main_visual div.cldpl1 img {
animation: yureY1 1.32s infinite  ease-in-out alternate;
}

#main_visual div.cldpl2 {
left: calc(10% - 200px);
top: 10%;
width: calc(12% + 80px);
animation: yureX2 10.73s infinite  ease-in-out alternate;
}
#main_visual div.cldpl2 img {
animation: yureY2 1.72s infinite  ease-in-out alternate;
}

#main_visual div.cldpl3 {
left: calc(30% - 330px);
top: 27%;
width: calc(12% + 140px);
animation: yureX3 7.512s infinite  ease-in-out alternate;
}
#main_visual div.cldpl3 img {
animation: yureY3 1.821s infinite  ease-in-out alternate;
}
#main_visual div.cldpr1 {
right: calc(26% - 200px);
top: -1%;
width: calc(12% + 60px);
animation: yureX2 7.51s infinite  ease-in-out alternate;
}
#main_visual div.cldpr1 img {
animation: yureY3 1.521s infinite  ease-in-out alternate;
}
#main_visual div.cldpr2 {
right: calc(10% - 200px);
top: 14%;
width: calc(12% + 140px);
animation: yureX1 10.71s infinite  ease-in-out alternate;
}
#main_visual div.cldpr2 img {
animation: yureY2 1.721s infinite  ease-in-out alternate;
}
#main_visual div.cldpr3 {
right: calc(30% - 350px);
top: 33%;
width: calc(12% + 180px);
animation: yureX3 7.11s infinite  ease-in-out alternate;
}
#main_visual div.cldpr3 img {
animation: yureY1 1.721s infinite  ease-in-out alternate;
}

@keyframes yureX1{
0%{ transform: translateX(0px);}
100%{transform: translateX(16px);}
}
@keyframes yureX2{
0%{ transform: translateX(5px);}
100%{transform: translateX(-9px);}
}
@keyframes yureX3{
0%{ transform: translateX(8px);}
100%{transform: translateX(-9px);}
}
@keyframes yureY1{
0%{ transform: translateY(0px);}
100%{transform: translateY(2px);}
}
@keyframes yureY2{
0%{ transform: translateY(2px);}
100%{transform: translateY(-1px);}
}
@keyframes yureY3{
0%{ transform: translateY(-1px);}
100%{transform: translateY(2px);}
}

#main_visual h1 {
position: absolute;
z-index: 3;
left: 50%;
top: max(30px,calc(10% - 40px));/**/
transform: translateX(-50%);
font-size: clamp(35px,calc(4vw - 16px),56px);
}
#main_visual h2 {
position: absolute;
z-index: 3;
left: 50%;
top:max(290px,calc(52% - 42px));/**/
transform: translateX(-48%);
font-size: clamp(22px,calc(1.8vw - 0px),29px);
}
#main_visual img.mlogo-m {
position: absolute;
z-index: 4;
width: min(300px,calc(7% + 105px));
left: 50%;
top: max(100px,calc(20% - 35px));/**/
transform: translateX(-50%);
}
#main_visual img.mlogo-t {
position: absolute;
z-index: 5;
width: min(600px,calc(14% + 165px));
left: 50%;
top: max(121px,calc(32% - 58px));/**/
transform: translateX(-50%);
}
#main_visual img.mphoto {
position: absolute;
width: max(100%,calc(45% + 910px));
left: 50%;
transform: translateX(-50%);
top:calc(10% + 180px);
/*bottom: min(-30px,calc(470px - 69%));*/
z-index: 8;
}

/*--////　sec_what　////--*/
#sec_what {
background: url("../images/back.webp");
background-attachment: fixed;
min-width: 1100px;
position: relative;
padding-bottom: 120px;
}
#sec_what h1,#sec_what h2 {
color: var(--tx2);
}
#sec_what p {
color: var(--tx3);
line-height: 1.95em;
}

.sec_what_d1 {
min-width: 1100px;
position: relative;
height: 635px;
padding: 115px 0 0px;
z-index: 2;
}
.sec_what_d1 h1 {
writing-mode: vertical-rl;
font-feature-settings: initial;
position: absolute;
left: calc(50% - 260px);
z-index: 4;
line-height: 1.6em;
font-size: 50px;
}
.sec_what_d1 img:first-of-type {
object-fit: cover;
width: 330px;
left: calc(50% - 345px);
top: 45px;
position: absolute;
z-index: 3;
}

.sec_what_d1 h2 {
font-size: 87px;
position: absolute;
left: calc(50% + 20px);
top: 150px;
line-height: 1.45em;
}
.sec_what_d1 p {
width: 450px;
position: absolute;
left: calc(50% - 50px);
bottom: 30px;
}
.sec_what_d1 img:last-of-type {
position: absolute;
width: calc(50% - 270px);
height: 490px;
object-fit: cover;
object-position: 100% 50%;
top: 145px;
}
.sec_what_d2 {
position: relative;
padding: 50px 0 0px;
height: 330px;
z-index: 2;
}
.sec_what_d2 p {
width: 460px;
position: absolute;
top: 100px;
left: calc(50% - 460px);
}
.sec_what_d2 img {
width: calc(50% - 120px);
height: 280px;
object-fit: cover;
object-position: 0% 50%;
position: absolute;
right: 0;
top: 50px;
}

.sec_what_d3 {
position: relative;
padding: 40px 0 0px;
width: 1100px;
margin: 0 auto;
display: flex;
flex-flow: row-reverse;
z-index: 2;
}
.sec_what_d3 p {
width: 460px;
margin-right: 100px;
margin-top: 65px;
}
.sec_what_d3 img {
width: 400px;
height: 270px;
object-fit: cover;
}
.sec_what_d4 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow-x: clip;
overflow-y: visible;
}
.sec_what_d4 img {
opacity: 0;
position: absolute;
width: calc(32% - 100px);
}
.sec_what_d4 img:nth-of-type(2n-1) {
animation: fade-in-tl-R ease-in-out forwards;
animation-timeline: view();
animation-range: cover 39% cover 52%;
transform: translateX(0px);
right: calc(20px - 12%);
}
.sec_what_d4 img:nth-of-type(2n) {
animation: fade-in-tl-L ease-in-out forwards;
animation-timeline: view();
animation-range: cover 39% cover 52%;
transform: translateX(0px);
left: calc(20px - 12%);
}
.sec_what_d4 img:nth-of-type(1) {
top: 430px;
}
.sec_what_d4 img:nth-of-type(2) {
bottom: 385px;
}
.sec_what_d4 img:nth-of-type(3) {
bottom: 25px;
}



@keyframes fade-in-tl-L {
0% {
opacity: 0;
transform: translateX(0px) scale(0.9);
}
100% {
opacity: 0.4;
transform: translateX(50px) scale(1);
}
}
@keyframes fade-in-tl-R {
0% {
opacity: 0.05;
transform: translateX(0px) scale(0.9);
}
100% {
opacity: 0.4;
transform: translateX(-50px) scale(1);
}
}

.inari_link {
width: 1100px;
margin: 0 auto;
padding: 80px 0 60px;
display: flex;
justify-content: space-between;
}
.inari_link li {
position: relative;
z-index: 98;
width: 350px;
border: 1px solid var(--ac1);
padding: 25px 0;
text-align: center;
color: #fff;
transition: 0.2s;
}
.inari_link li:hover {
background: rgba(255,255,255,0.9);
}
.inari_link li:hover::after {
content: "COMING SOON";
color: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

/*--////　sec_about　////--*/

#sec_about {
background: url("../images/about_back.webp");
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
padding: 90px 0 60px;
position: relative;
min-width: 1100px;
overflow-x: clip;
overflow-y: visible;
z-index: 2;
}
#sec_about>h2 {
writing-mode: vertical-rl;
font-feature-settings: initial;
position: absolute;
right: calc(50% - 482px);
top: 200px;
z-index: 4;
line-height: 1.6em;
font-size: 50px;
color: var(--tx2);
letter-spacing: 0.1em;
}
#sec_about>img.sl_ra {
object-fit: cover;
width: 300px;
right: calc(50% - 550px);
top: 103px;
position: absolute;
z-index: 3;
}
.sec_about_d1 {
color: var(--tx3);
width: 650px;
padding: 50px 45px 35px;
background: rgba(0,0,0,0.5);
margin-left: max(0px,20vw - 100px);
margin-top: 110px;
position: relative;
}
.sec_about_d1 h3 {
font-size: 42px;
margin-bottom: 35px;
letter-spacing: 0.07em;
}
.sec_about_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap:30px 20px;
}
.sec_about_list dt {
width: 95px;
color: var(--tx2);
}
.sec_about_list dd {
width: 440px;
line-height: 1.1em;
}
.sec_about_list dd:nth-of-type(1) {
display: flex;
justify-content: space-between;
align-items:flex-end;
margin-top: -8px;
}
.sec_about_list dd:nth-of-type(1) p:nth-of-type(1) {
width: 90px;
text-align: center;
}
.sec_about_list dd:nth-of-type(1) p:nth-of-type(1) span {
font-size: 13px;
display: block;
line-height: 0.9em;
margin-top: -3px;
}
.sec_about_list dd:nth-of-type(1) p:nth-of-type(2) {
width: 340px;
font-size: 20px;
display: block;
margin-bottom: -6px;
}
.sec_about_list dd:nth-of-type(1) p:nth-of-type(2) strong {
font-size: 39px;
font-weight: 500;
}
.sec_about_list dd:nth-of-type(2) {
margin-top: -7px;
}
.sec_about_list dd:nth-of-type(2) p:nth-of-type(1) {
font-size: 26px;
}
.sec_about_list dd:nth-of-type(2) p:nth-of-type(2) {
line-height: 1em;
}
.sec_about_list dd:nth-of-type(3) {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.sec_about_list dd:nth-of-type(3) div {
width: 340px;
}
.sec_about_list dd:nth-of-type(3) div h4 {
margin-bottom: 6px;
}
.sec_about_list dd:nth-of-type(3) div h4:nth-last-of-type(1) {
margin-top: 11px;
}
.sec_about_list dd:nth-of-type(3) div p {
font-size: 18px;
}
.sec_about_list dd:nth-of-type(3) a {
width: 80px;
background: var(--ac1);
color: #63310b;
text-align: center;
border-radius: 40px;
padding: 28px 0 29px;
}
.sec_about_d1>img {
position: absolute;
}
.sec_about_d1>img:nth-last-of-type(2) {
right: 8px;
top: -10px;
width: 125px;
}
.sec_about_d1>img:nth-last-of-type(1) {
left: -10px;
bottom: 8px;
width: 75px;
}

/*--////　sec_recom　////--*/
#sec_recom {
min-width: 1100px;
min-height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 11vh 0 9.5vh;
background: url("../images/back_br.webp");
background-size: cover;
z-index: 0;
overflow-x: clip;
overflow-y: visible;
}

#sec_recom div[class^="rec_c"] {
position: absolute;
}
#sec_recom div[class^="rec_c"] img {
width: 100%;
opacity: 0.3;
}
.rec_cw1 {
left: calc(50% - 820px);
top:-20px;
width: 328px;
height: 10px;
animation: yureX4 5.11s infinite  ease-in-out alternate;
}
.rec_cy1 {
left: calc(50% - 720px);
top:600px;
width: 325px;
height: 10px;
animation: yureX5 5.25s infinite  ease-in-out alternate;
}
.rec_cw2 {
right: calc(50% - 680px);
top:300px;
width: 400px;
height: 10px;
animation: yureX6 4.51s infinite  ease-in-out alternate;
}
.rec_cy2 {
right: calc(50% - 720px);
top:-70px;
width: 335px;
height: 10px;
animation: yureX5 5.27s infinite  ease-in-out alternate;
}
.rec_cw3 {
left: calc(50% - 740px);
bottom: 150px;
width: 415px;
height: 10px;
animation: yureX6 5.18s infinite  ease-in-out alternate;
}
.rec_cy3 {
right: calc(50% - 690px);
bottom: 190px;
width: 265px;
height: 10px;
animation: yureX4 4.74s infinite  ease-in-out alternate;
}

@keyframes yureX4{
0%{ transform: translateX(-10px);}
100%{transform: translateX(35px);}
}
@keyframes yureX5{
0%{ transform: translateX(25px);}
100%{transform: translateX(-15px);}
}
@keyframes yureX6{
0%{ transform: translateX(15px);}
100%{transform: translateX(-25px);}
}

.sec_reco_in {
width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
}
.sec_reco_in h2 {
writing-mode: vertical-rl;
font-feature-settings: initial;
line-height: 1.4em;
font-size: 47px;
color: var(--tx2);
letter-spacing: 0.1em;
padding-left: 16px;
margin: 26px;
}
.sec_reco_in > img {
position: absolute;
width: 330px;
top: -51px;
left: -22px;
}
.sec_reco_in p {
color: var(--tx3);
width: 720px;
margin-top: 50px;
line-height: 1.9em;
}

.sec_reco_in ul {
width: 1100px;
margin: 0 auto;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
gap:25px 0;
}
.sec_reco_in ul li {
width: 530px;
}
.sec_reco_in ul li img {
width: 100%;
border-radius: 10px;
filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.2));
}
.sec_reco_in ul li.coms {
position: relative;
}
.sec_reco_in ul li.coms::after {
content: "COMING SOON";
left: 0;
top: 0;
text-align: center;
padding: 60px 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.2s;
background: rgba(255,255,255,0.8);
border-radius: 10px;
opacity: 0;
z-index: 100;
}
.sec_reco_in ul li.coms:hover::after {
opacity: 1;
}




/*--////　sec_omoi　////--*/

#sec_omoi {
background: url("../images/omoi_back.webp");
background-size: cover;
min-width: 1100px;
position: relative;
height: 620px;
overflow-x: clip;
overflow-y: visible;
}
#sec_omoi div {
position: absolute;
right: calc(50% - 500px);
top: 110px;
}
#sec_omoi div h2 {
writing-mode: vertical-rl;
font-feature-settings: initial;
line-height: 1.4em;
font-size: 50px;
color: var(--tx2);
letter-spacing: 0.1em;
}
#sec_omoi div img {
width: 280px;
position: absolute;
top: -60px;
right: -70px;
}
#sec_omoi p {
width: 550px;
color: var(--tx3);
margin-left:50%;
line-height: 1.9em;
padding-top: 220px;
}
#sec_omoi p::before {
content: "";
float: right;
width: 260px;
height: calc(2 * 1.9em);
}
#sec_omoi p::after{
  content: "";
  display: block;
  clear: both;
}

/*--////　sec_event2　////--*/

#sec_event2 {
background: url("../images/back_wasi.webp");
background-attachment: fixed;
min-width: 1100px;
overflow:hidden;
padding: 120px calc(50% - 550px) 100px;
position: relative;
}
#sec_event2::before {
position: absolute;
content: "";
width: 550px;
height: 100%;
background: url("../images/eve_bgL.webp");
background-repeat:no-repeat;
background-size: contain;
top: 0;
left: -100px;
}
#sec_event2::after {
position: absolute;
content: "";
width: 550px;
height: 100%;
background: url("../images/eve_bgR.webp");
background-repeat:no-repeat;
background-size: contain;
background-position: right;
top: 0;
right: -100px;
}

#sec_event2 h2 {
writing-mode: vertical-rl;
font-feature-settings: initial;
line-height: 1.4em;
font-size: 50px;
color: var(--ac2);
letter-spacing: 0.05em;
padding-left: 20px;
margin: 30px;
}
#sec_event2 img {
position: absolute;
width: 310px;
top: 90px;
left: calc(50% - 585px);
}
#sec_event2 p {
position: absolute;
left: calc(50% - 180px);
color: var(--ac2);
width: 720px;
line-height: 1.9em;
top: 180px;
}
#sec_event2 div {
margin: 70px auto 50px;
text-align: center;
padding: 20px 0;
border: 1px solid var(--ac2);
width: 700px;
}


/*--////　スライドイン設定　////--*/

.sl_fa {
animation: fade-in-tl-a ease-in-out forwards;
animation-timeline: view();
animation-range: cover 18% exit 100%;
opacity: 0;
transform: translateY(50px);
}
@keyframes fade-in-tl-a {
0% {
opacity: 0;
transform: translateY(50px);
}
30% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(-20px);
}
}
.sl_fa2 {
animation: fade-in-tl-a2 ease-in-out forwards;
animation-timeline: view();
animation-range: cover 18% exit 100%;
opacity: 0;
transform: translateY(50px);
}
@keyframes fade-in-tl-a2 {
0% {
opacity: 0;
transform: translateY(50px);
}
30% {
opacity: 0.6;
transform: translateY(0);
}
100% {
opacity: 0.6;
transform: translateY(-20px);
}
}

.sl_ra {
animation: roll-a linear forwards;
animation-timeline: view();
animation-range: cover 12% exit 100%;
opacity: 0;
transform: translateY(40px);
}

@keyframes roll-a {
0% {
opacity: 0;
transform: translateY(40px) rotate(0deg);
}
30% {
opacity: 1;
transform: translateY(0) rotate(24deg);
}
100% {
opacity: 1;
transform: translateY(-20px) rotate(80deg);
}
}

/*--////　お宝逸品ページ　////--*/
.ota_atcl {
width: 1100px;
padding: 100px 0 70px;
margin: 0 auto;
}
.ota_tit {
width: 550px;
display: block;
margin: 0 auto 80px;
}
.ota_h1 {
text-align: center;
font-size: 30px;
color: #AC2429;
padding: 8px 0 6px;
border: #AC2429 solid 1px;
margin-bottom: 60px;
}
.ota_dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1050px;
margin: 0 auto 30px;
font-size: 20px;
line-height: 1.8em;
}
.ota_dl dt {
width: 190px;
margin-bottom: 25px;
}
.ota_dl dd {
width: 850px;
margin-bottom: 25px;
}
.ota_fil {
width: 1050px;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
}
.ota_fil a {
display: flex;
justify-content: space-between;
border: #E2CDA2 solid 2px;
border-radius: 5px;
width: 340px;
padding: 15px 23px;
align-items: center;
font-family: var(--f-not);
transition: 0.2s ease-in-out;
}
.ota_fil a:hover {
background: #F5EEE0;
}
.ota_fil a img {
width: 37px;
}
.ota_fil a p {
width: 230px;
text-align: center;
}