@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Noto+Serif+JP:wght@200..900&display=swap');
:root {
  --Key-color: #b89966;
  --font-color: #665332;
  --navy-color: #454f98;
  --line-color: #d3bd96;
  --white-color: #FFFFFF;
  --bg-contents: #fcfbf9;
  --btn-color: #1f1c19;
  --provisional-color: #d8d0cd;
  --inner: min(1200px, 96%);
  --tab: min(800px, 100%);
  --font16: clamp(14px, calc(0.5rem + 1.5vw), 16px);
}
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-size: 1rem;
line-height: 1.6;
text-align: left;
color: var(--font-color);
background: 
url("../images/background/pattern.png?") repeat right -10vh,
var(--bg-contents) url("../images/background/bg.png") repeat;
background-size: 
350% auto,
40px auto;
background-attachment: fixed;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
opacity: 0;
transform: translateY(10px);
animation: pageLoadFade 2s ease-out forwards;
}
@keyframes pageLoadFade {
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (min-width: 899px) {
body {
background: 
url("../images/background/pattern.png") repeat left top,
var(--bg-contents) url("../images/background/bg.png") repeat;
background-size: 
1000px auto,
50px auto;
}
}
.wrapper {
width: 100%;
position: relative;
margin: 0 auto;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
}
.mainContents {
flex: 1;
width: var(--inner);
margin: 0 auto;
text-align: center;
}
.inner-contents {
width: var(--inner);
margin: 0 auto;
}
.doubleBorder {
width: var(--inner);
margin: 0 auto clamp(40px, 10vh, 100px);
text-align: center;
border: 2px solid var(--line-color);
box-shadow: 
0 0 0 6px var(--white-color),
0 0 0 10px var(--line-color);
padding: clamp(20px, 4vw, 50px);
background-color: rgba(255, 255, 255, .8);
}
/* TITLE */
h2{
font-family: "Noto Serif JP", serif;
font-weight: 700;
font-size: clamp(2.5em, 4vw, 34px);
}
.ultra-pop {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
gap: 10px;
margin: 0 auto clamp(15px, 4vw, 25px) ;
color: var(--Key-color);
width: 100%;
}
.ultra-pop::before,
.ultra-pop::after {
content: "";
flex-grow: 1;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
}
.ultra-pop::before {
background-image: url("../images/common/title-right.png");
background-position: right center;
}
.ultra-pop::after {
background-image: url("../images/common/title-left.png");
background-position: left center;
}
/* TEXT */
.subtitle{
font-size: clamp(18px, calc(0.8rem + 0.5vw), 20px);
font-weight:600;
}
.text{
font-size:14px;
}
.comingsoon{
font-size: clamp(1.75rem, 1.48rem + 1.15vw, 2.5rem);
color:var(--provisional-color);
margin: 12vh auto;
}
@media screen and (min-width: 899px) {
.comingsoon{
font-size:28px;
}
}
/* tab */
.tab-container {
margin: clamp(2.5rem, 1.42rem + 4.59vw, 5rem) auto 0;
}
@media screen and (min-width: 899px) {
.tab-container {
margin: 80px auto 0;
}
}
.tab-list {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.tab-button {
/* flex: 1; */
padding: 10px 30px;
font-size: 18px;
font-size: clamp(16px, calc(0.5rem + 1.6vw), 18px);
font-weight: 700;
cursor: pointer;
border: 1px solid var(--font-color);
text-align: center;
transition: all 0.3s;
display: block;
}
#tab-tokyo-trigger,
#tab-osaka-trigger {
display: none;
}
.tab-panel {
display: none;
}
#tab-tokyo-trigger:checked ~ .tab-list .tab-tokyo-btn {
background-color: var(--Key-color);
color:var(--white-color);
border: 1px solid var(--Key-color);
}
#tab-tokyo-trigger:checked ~ .panel-tokyo {
display: block;
}
#tab-osaka-trigger:checked ~ .tab-list .tab-osaka-btn {
background-color: var(--Key-color);
color:var(--white-color);
border: 1px solid var(--Key-color);
}
#tab-osaka-trigger:checked ~ .panel-osaka {
display: block;
}
.info-list {
margin: 0 auto;
text-align:left;	
}
@media screen and (min-width: 899px) {
.info-list {
display: grid;
grid-template-columns: 120px 1fr; 
column-gap: 0; 	
}
}
.info-label,
.info-content {
padding: 5px 0;
margin:0 0 3px;
color:var(--font-color);
font-size: clamp(14px, calc(0.5rem + 1.5vw), 16px);
line-height: 1.6;
}
.info-label {
border-bottom: 1px dashed var(--font-color);
font-weight:800;
}
.info-content {
font-weight: 500;
margin: 0;
}
@media screen and (min-width: 899px) {
.info-label,
.info-content {
padding: 10px 0;
margin: 0;
border-bottom: 1px dotted var(--font-color);
color:var(--font-color);
font-size: var(--font16);
line-height: 1.6;
font-weight: 600;
}
}
/* BUTTON */
.original-button {
margin:0 auto;
padding:20px 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
color: var(--white-color);
font-size: 16px;
font-family: "Noto Serif JP", serif;
font-weight: 700;
width:min(350px, 90%);
background-color: var(--Key-color);
transition: 0.3s;
border-radius: 3px;
}
.original-button:hover {
opacity: .7;
background-color: var(--font-color);
}
/* FOTTER */
#footer {
font-size: 12px;
margin: 0 auto ;
text-align:center;
width: 100%;
background-color: var(--navy-color);
padding: 15px 0 0;
position: relative;
color: var(--white-color);
}
#footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height:7px;
background: linear-gradient(to right, 
#9e74ab 0% 5%, #7abdab 5% 10%, #61a6da 10% 15%, #e6a4b2 15% 20%, #e9cf67 20% 25%, #bbd36b 25% 30%,  #95acc7 30% 35%,  #e8e476 35% 40%, #7fba7a 40% 45%,  #ebb059 45% 50%, #e1895e 50% 55%, #d16f61 55% 60%, #8ebce4 60% 65%,  #e377c2 65% 70%, #9e74ab 70% 75%,  #7abdab 75% 80%, #61a6da 80% 85%,  #e6a4b2 85% 90%, #e9cf67 90% 95%, #bbd36b 95% 100%);
}
#footer .inner-footer{
margin:10px auto 70px;
}
#footer .inner-footer dl{
margin:0 auto 10px;
font-size:14px
}
#footer .inner-footer dl dt{
color: var(--Key-color);
}
#footer .inner-footer dl dd{
font-size:16px
}