@charset "utf-8";

@font-face{
  font-family:"Corporate Logo Medium";
  src:url(assets/fonts/corporate-logo-medium.woff2) format("woff2");
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:"Corporate Logo Rounded";
  src:url(assets/fonts/corporate-logo-rounded-bold.woff2) format("woff2");
  font-weight:700;
  font-display:swap;
}

:root{--page-bg:#4d3d8f}   

*{box-sizing:border-box}
html,body{margin:0;padding:0}

html{background:var(--page-bg)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block}

.page{
  min-height:100vh;
  min-height:100dvh;
  background:var(--page-bg);   
}

.wrap{
  container-type:inline-size;
  width:100%;
  max-width:480px;          
  margin:0 auto;
}

.stage{
  position:relative;
  --u:0.37037037cqw;        
  
  min-height:calc(540 * var(--u));
  min-height:max(100vh, calc(540 * var(--u)));
  min-height:max(100dvh, calc(540 * var(--u)));
  overflow:hidden;
  font-family:"Corporate Logo Medium","Hiragino Maru Gothic ProN","BIZ UDPGothic",sans-serif;
  color:#000;
}

.fill{
  position:absolute;
  left:0; top:0;
  width:100%;
  
  height:max(100%, calc(545.25 * var(--u)));
  object-fit:cover;
  object-position:64% 0;
}

.e{
  display:inline-block;
  
  height:1.1875em;
  width:auto;
  vertical-align:-0.25em;   
}

.head > *{position:absolute;margin:0}

.photo{
  left:calc(32 * var(--u));
  top:calc(30 * var(--u));
  width:calc(95 * var(--u));
  height:calc(95 * var(--u));
  border-radius:50%;
  overflow:hidden;
  
  box-shadow:0 0 0 calc(5.5 * var(--u)) rgba(255,255,255,.5);
}
.photo img{width:100%;height:100%;object-fit:cover}

.name{
  left:calc(141.6 * var(--u));
  top:calc(31.5 * var(--u));
  font-family:"Corporate Logo Rounded","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:700;
  font-size:calc(23.7 * var(--u));
  line-height:1.15;
  color:#fff;
  white-space:nowrap;
}

.rule{
  left:calc(140.2 * var(--u));
  width:calc(101 * var(--u));
  height:calc(2.25 * var(--u));
  background:repeating-linear-gradient(90deg,#fff 0 calc(2.25 * var(--u)),transparent calc(2.25 * var(--u)) calc(4.5 * var(--u)));
}
.rule-1{top:calc(63.1 * var(--u))}
.rule-2{top:calc(90 * var(--u))}

.tokyo{
  left:calc(159 * var(--u));
  top:calc(71 * var(--u));
  width:calc(66 * var(--u));
  height:auto;
}

.line{
  left:calc(133.5 * var(--u));
  top:calc(91.1 * var(--u));
  width:calc(35.25 * var(--u));
  height:calc(35.25 * var(--u));
}
.line img{width:100%;height:100%}

.note{
  left:calc(164.1 * var(--u));
  top:calc(103.6 * var(--u));
  font-size:calc(7.7 * var(--u));
  line-height:1.3;
  color:#fff;
  white-space:nowrap;
}

.panel{
  position:absolute;
  left:calc(19.1 * var(--u));
  top:calc(140.4 * var(--u));
  width:calc(231.7 * var(--u));
  height:calc(319.5 * var(--u));
  background:rgba(255,255,255,.5);
}
.heading{
  position:absolute;
  left:calc(20 * var(--u));     
  top:calc(8.6 * var(--u));     
  width:calc(189 * var(--u));
  height:auto;
}
.body{
  position:absolute;
  left:0; right:0;
  top:calc(65 * var(--u));      
  text-align:center;
  font-size:calc(10.2 * var(--u));
  line-height:calc(13.5 * var(--u));   
  white-space:nowrap;
}
.body p{margin:0 0 calc(13.5 * var(--u))}   
.body p:last-child{margin-bottom:0}
.kao{font-family:"Corporate Logo Medium","Noto Sans","Hiragino Sans","Segoe UI",system-ui,sans-serif}  

.btn{
  position:absolute;
  left:calc(41.8 * var(--u));
  top:calc(478 * var(--u));
  width:calc(186.5 * var(--u));
  height:calc(35.25 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  border:calc(2.25 * var(--u)) solid #fff;
  border-radius:calc(40 * var(--u));
  background:linear-gradient(90deg,#516fff 0%,#a86be1 50%,#ff66c4 100%);
  font-family:"Corporate Logo Rounded","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:700;
  font-size:calc(14 * var(--u));
  line-height:1;
  color:#fff;
  white-space:nowrap;
}