@import url('https://fonts.googleapis.com/css2?family=Vesper+Libre:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&family=Noto+Serif:wght@400&display=swap');
:root {
  --aboutfontsize: 14px;
  --abouth1pc: 2.6rem;
  --maincol: #40b;
  --col2: #f6c;
  --col3: #40b;
  --col4: #fff;
  --linkcol: #ef0;
}
html,body,div,p,span,h1,h2,h3,h6,em,a,section { margin:0; padding:0; font-weight: 400; font-style: normal; box-sizing: border-box;}
html, body {font-size: var(--aboutfontsize);   -webkit-text-size-adjust: 100%;}
body { font-family: 'Noto Sans JP'; -webkit-font-smoothing:none; color: var(--maincol); }
p,h1,h2,h3,h4 { font-size:1rem; line-height: 1;}
a { color:inherit; text-decoration-thickness:.2rem; }

#abou { visibility: hidden; transform-origin: center center; transform:scale(.77, 1) skewY(1deg); width: 118vw; margin-left:-9vw; text-align: justify; }

section { font-size: 1.9rem; font-feature-settings: "palt";  margin:7rem 0}
section.top { height:72vh; padding-top:52vh }
section.top h2 { margin:0.7rem 0}
/* .tume { margin-right: -.4rem;} */


.imgimglogo { margin: 3rem 0; padding:0 1.0rem 0 1.8rem; position: relative;}
.fantalogo {aspect-ratio: 1 / .215; image-rendering:pixelated; }
h6 {font-size: 2.3rem; line-height:1.15; font-weight: 400; margin-bottom:1.3rem}
h6 em {font-size: 2.83rem !important; }
@media (max-width: 639px) {
  h6 em {font-size: 2.9rem !important; }
}


p { display: inline; position: relative !important;}
p { font-size: 1.9rem; line-height:1.7 !important; letter-spacing: .1rem !important;}
em { color:var(--col2); letter-spacing: 0rem;}
h1 { font-size: 2.61rem; line-height:1.45; font-weight: 300 !important;}
/* h1 em { line-height:1.1; letter-spacing: -.01rem;} */
h1 em { line-height:1.1; letter-spacing: -.1rem; margin-left:.1rem; margin-right:.1rem}
h2 { font-size: 1.55rem; line-height:1.35; letter-spacing: .1rem;}
h3, h3 em { font-size: 1.35rem; line-height:1.5; padding-bottom: 5.5rem; letter-spacing: .1rem; }
h3, h3 em { font-weight: 400; }
.info, h3 { text-align: center; }

strong { padding:0 0.5rem 0 .5rem;  border:1px solid var(--maincol);
overflow: hidden; height:2rem; display: inline-block; margin-bottom: -.4rem;}
strong span {line-height: .9; }
em strong {  border:1px solid var(--col2);}

img { width:100%; height:auto; }
img.tobira {  aspect-ratio: 3 / 3.1;}
img.tobiraday { width:17%;aspect-ratio: 4 / 1; mix-blend-mode: multiply;
position: absolute; z-index: 399; bottom:-0.7rem; right:-0.7rem}
img.company {  aspect-ratio: 3 / 1.4;}
.imgimg { margin: 2rem 0; padding:.3rem; position: relative;}

#abou span.imbar { width:0.01rem !important; display: block; }
#abou span.im {aspect-ratio: 3/2.4; box-sizing:content-box; display: block; clear: both; }
#abou span.im img { width:100%;  height:100%; } /* filter: grayscale(90%) brightness(114%);  */
.phga {border:.3rem solid #000; box-sizing: border-box; }
#abou span.imbar1 { float:right; height: 8.2rem !important;  }
#abou span.imbar1a { float:right !important; height: 0.1rem !important;  }
#abou span.im1 { float:right; width:21rem; padding-left:1.9rem; } 
#abou span.im1a { float:right; width:21rem; padding-left:1.9rem; } 
#abou span.imbar2 { float:left; height: 11rem !important;  }
#abou span.im2 { float:left; width:14rem; padding-right:1.9rem; } 
#abou span.imbar3 { float:left; height: 10.5rem !important;  }
#abou span.im3 { float:left; width:6.5rem; padding-right:1.5rem; } 
#abou span.imbar4 { float:right; height: 22rem !important;  }
#abou span.im4 { float:right; width:6.5rem; padding-left:1.5rem; } 
/* profile photo */
#abou span.imbar5 { float:right; height: 7.8rem !important;  }
#abou span.im5 { float:right; width:6rem; padding-left:0.8rem; margin-right: -.7rem;} 
#abou span.imbar6 { float:left; height: 7.8rem !important;  }
#abou span.im6 { float:left; width:6rem; padding-right:0.8rem; margin-left: -.7rem;} 





#sakiyomi { display:none; }
#sakiyomi img {width:2px;}
.phga_pane { position: fixed; z-index: 111; top:0;  cursor: grab; display: none; background-color: rgba(0, 0, 0, .75);
height:9.9vh; width:9.9vh; overflow: scroll; overflow-y: hidden; box-sizing:content-box;  }
.phga_pane_loading { position:absolute; z-index: 1; left:0; top:0; width:100%; height:100%; }
.phga_pane_main { position:absolute; z-index: 2; left: 0; top: 0; width:100%; height:100%;}
.phga_pane_set { width:100%; height:100%; }
.phga_pane_set img { width:9.9vh; height:9.9vh }
img.phgabig_loading { image-rendering: pixelated;}
.phga {cursor: pointer; }
.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;    -webkit-overflow-scrolling: none;    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}
#fanta{ visibility: hidden; position: absolute; z-index: 111; width:10rem; right:5rem; top:23rem;  mix-blend-mode: multiply;}
.batsu{ pointer-events: none; visibility: hidden; display: block;    width: 60px;   height: 60px;    position: fixed; left:0.5rem; top:0.75rem; z-index: 333; mix-blend-mode: difference; opacity: .9;}
.batsu::before, .batsu::after{
    content: "";    display: block;    width: 100%;    height: 1px;    background: #fff;
    transform: rotate(45deg);    transform-origin:0% 50%;    position: absolute;    top: calc(14% - 5px);    left: 14%;
}
.batsu::after{    transform: rotate(-45deg);    transform-origin:100% 50%;    left: auto;    right: 14%;}

#iframe { width:10rem; height:10rem; position: absolute; top:0; left:0; border:none; z-index: 999;}