@charset "UTF-8";

/*リセット系*/
*{
margin:0;
padding:0;
box-sizing: border-box;
text-align: center;
position: relative;
border: none;
outline: none;
}
a img{
border:none;
}
img{
vertical-align:bottom;
height: auto;
pointer-events: none;
}
a img{
pointer-events: auto;
}
li{
list-style-type: none;
display:inline;
}
iframe{
width: 100%;
border:none;
}
.responsive{
width:100%;
height: auto;
}
.SPhover{
opacity: 0.7;
}
/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
*/
html, body{
color: #FFF;
font-size: 0;
font-family: "Noto Sans JP", sans-serif;
font-style: normal;
font-feature-settings: "palt" 1;
letter-spacing: 0.075em;
letter-spacing: 0.1em;
}
html {
font-size: 3.8vw;
line-height: 1.7;
text-align: center;
background: #FFF;
}
.effect{
transition: 1.0s all;
/*transition-delay: 0.3s;*/
transform: translate(0, 5vw);
opacity: 0;
filter: blur(2vw);
}
.effect.active{
transform: translate(0, 0);
opacity: 1;
filter: blur(0);
}
.pc, .inlinePC{
display: none;
}
.responsive{
width:100%;
height: auto;
}
.ctsWrap{
overflow: hidden;
}
#loaderWrap{
width: 100vw;
height: 100dvh;
position: fixed;
top:0;
left: 0;
background: #ffeccd;
z-index: 20;
}
#loader{
position: absolute;
width: 22%;
aspect-ratio:1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loader img{
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#loader img:nth-of-type(1){
position: relative;
}
#loader{
animation:1.0s ease-in-out infinite scales;
transform-origin:50% 50%;
}
#loader img:nth-of-type(2){
animation:0.8s linear infinite rotation;
}
#loader img:nth-of-type(3){
animation:9.6s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
100%{ transform:rotate(-360deg); }
}
@keyframes scales{
  0%{ opacity: 0.8;}
 50%{ opacity: 0.4;}
100%{ opacity: 0.8;}
}
.gold{
border: none;
background: url("../assets/images_common/gold.png") center center;
background-size: 100%;
height: 0.5vw;
}
.wood,
.indexWood{
background: url("../assets/images_common/wood.jpg") top center;
background-size: 100% auto;
padding: 5vw 0;
}
.paper{
    position: relative;
    overflow: hidden;

    color: #89321a;
    width: 90%;
    max-width: 972px;
    margin: 4rem auto 1rem;
    padding: 2rem 1.5rem 4rem;

    background:
        linear-gradient(
            0deg,
            #DAAE74 0%,
            #F3E5D2 6%,
            #FFFFFF 30%,
            #FFFFFF 70%,
            #F3E5D2 94%,
            #DAAE74 100%
        ),
        linear-gradient(
            90deg,
            #DAAE74 0%,
            #FAEAC8 12%,
            #FFF9E7 40%,
            #FFF9E7 60%,
            #FAEAC8 88%,
            #DAAE74 100%
        );

    background-blend-mode: multiply;

    box-shadow: 0 0 1rem rgba(0,0,0,.6);
}
.paper::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        url("../assets/images_common/paper_brend_a.png") center/100% 100% no-repeat,
        url("../assets/images_common/paper_brend_b.png") center/50% auto no-repeat;

    mix-blend-mode: overlay;

    opacity: 1;
}

/*ハンバーガーメニュー*/
.hmBTN,
.modaal-close,
.round-wrap{
width: 16vw;
height: 16vw;
top: 1vw;
left: 1vw;
position: fixed;
z-index: 5;
}
.round-wrap{
mix-blend-mode: overlay;
mix-blend-mode: screen;
}
.rotate {
  width: 100%;
  height: 100%;
  animation: rotate-anime 10s linear infinite;
}
@keyframes rotate-anime {
    0%  {transform: rotate(0);}
  100%  {transform: rotate(-360deg);}
}
.round {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;
  animation: round_anime 10s linear infinite;
  overflow: hidden;
  background: #61d7f1;
}
@keyframes round_anime {
    0% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 30% 70% 60% 40% / 30% 40% 60% 70%;}
}
.modaal-close{
font-size: 0;
background: url("../assets/images_common/hm_close.png") center center no-repeat;
background-size: 100%;
}
.modaal-close:focus,
.modaal-close:hover{
opacity: 0.7;
}

#cr{
text-align: center;
padding: 0.5rem 0 1.5rem 0;
font-size: 0.6rem;
letter-spacing: 0.1em;
color: #f5f1e0;
}

/*PC*/
@media screen and (min-width:768px){
.mobile{
display: none;
}
.pc{
display: block;
}
.inlinePC{
display: inline;
}
.effect{
transform: translate(0, 2vw);
}

html {
font-size: 1.69vw;
}
#loader{
width: 6%;
}

/*ハンバーガーメニュー*/
.hmBTN,
.modaal-close,
.round-wrap{
width: 6.5vw;
height: 6.5vw;
top: 0.75vw;
left: 0.75vw;
}

.paper{
padding: 2rem 4rem 4rem 4rem;
}
.wood,
.indexWood{
padding: 2vw 0;
}
#cr{
padding: 0.5rem 0;
}


.gold{
height: 0.25vw;
}

}


@media screen and (min-width:1080px){
html {
font-size: 18px;
}
}