@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,500;1,500&family=Libre+Caslon+Text&family=Noto+Serif+JP:wght@500&family=Shippori+Mincho+B1:wght@800&family=Zen+Kaku+Gothic+Antique:wght@500&display=swap');

/* ローディング：下から弾むロゴ → やさしくフェードアウト */
.site-loader{
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
background: var(--main_grad);
animation: loaderExit 500ms ease 1800ms forwards;
}

.site-loader_logo{
width: clamp(150px, 38vw, 230px);
height: auto;
transform-origin: center bottom;
animation: loaderBounce 1100ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes loaderBounce{
0% { opacity: 0; transform: translateY(80px) scale(.88, 1.08); }
45% { opacity: 1; transform: translateY(-18px) scale(1.02, .98); }
65% { opacity: 1; transform: translateY(5px) scale(1.04, .96); }
82% { opacity: 1; transform: translateY(-5px) scale(.99, 1.01); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loaderExit{
to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce){
.site-loader { animation-duration: 150ms; animation-delay: 0ms; }
.site-loader_logo { animation: none; }
}

.noto-serif{
font-family: "Noto Serif JP", serif;
font-weight: 500;
font-style: normal;
}

.jost{
font-family: "Jost", sans-serif;
font-weight: 500;
font-style: italic;
}

.jost-normal{
font-family: "Jost", sans-serif;
font-weight: 500;
font-style: normal;
}

.ship{
font-family: "Shippori Mincho B1", serif;
font-weight: 800;
font-style: normal;
}

@font-face {
font-family: 'pistilli';
src: url('fonts/Pistilli-Roman.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

.pist{
font-family: 'pistilli';
font-weight: 200
}

body{
font-size:14px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 500;
font-style: normal;
font-feature-settings: "palt";
}

body {
animation: fadeIn 0.4s ease 0s 1 normal;
-webkit-animation: fadeIn 0.4s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

*{
margin:0px;
padding:0px;
box-sizing:border-box;
outline: 0;
}

ul,li{
list-style:none;
}

i{
font-style: normal;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration: none;
transition: 0.2s!important;
color: #fff
}

a:hover{
cursor: pointer
}

h1,h2,h3,h4,h5,h6{
line-height: 100%;
}

:root {
--main_grad:linear-gradient(-90deg,rgba(255, 111, 172, 1) 0%, rgba(255, 169, 172, 1) 100%);
--h2_grad:linear-gradient(90deg,rgba(255, 111, 172, 1) 0%, rgba(255, 169, 172, 1) 100%);
--main:1400px;
--main1200:1200px;
--white:#fff;
--black:#000;
--pink:#ff6fac;
}

/* PICK UP：YouTubeモーダル（PC・モバイル共通） */
html.youtube-modal-open{
overflow: hidden;
}
.youtube-modal{
position: fixed;
inset: 0;
margin: auto;
width: min(960px, 92vw, calc((100dvh - 120px) * 16 / 9));
max-width: 92vw;
max-height: calc(100dvh - 24px);
padding: 48px 0 12px;
border: 0;
background: transparent;
color: #fff;
}
.youtube-modal::backdrop{
background: rgba(35, 18, 29, .82);
backdrop-filter: blur(5px);
}
.youtube-modal_player{
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
overflow: hidden;
}
.youtube-modal_player iframe{
display: block;
width: 100%;
height: 100%;
border: 0;
}
.youtube-modal_close{
position: absolute;
right: 0;
top: 0;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: #fff;
color: #bd4879;
font: 30px/1 sans-serif;
cursor: pointer;
}
.youtube-modal_external{
display: block;
width: fit-content;
margin: 12px auto 0;
font-size: 13px;
text-decoration: underline;
}
.youtube-modal :focus-visible{
outline: 2px solid #ff9ec3;
outline-offset: 3px;
}

/* PROFILE：無料の画像ギャラリー（PC・モバイル共通） */
html.gallery-modal-open{
overflow: hidden;
}
.gallery-modal{
position: fixed;
inset: 0;
margin: auto;
width: min(1000px, 94vw);
max-width: 94vw;
max-height: 96dvh;
padding: 48px 0 0;
border: 0;
background: transparent;
color: #fff;
}
.gallery-modal::backdrop{
background: rgba(35, 18, 29, .9);
backdrop-filter: blur(5px);
}
.gallery-modal_stage{
position: relative;
height: min(74dvh, 900px);
touch-action: pan-y pinch-zoom;
}
.gallery-modal_image{
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery-modal_error{
position: absolute;
inset: 45% 0 auto;
text-align: center;
font-size: 14px;
}
.gallery-modal button{
width: 44px;
height: 44px;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.6);
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
font: 30px/1 sans-serif;
cursor: pointer;
}
.gallery-modal button:hover{
background: rgba(255,111,172,.6);
}
.gallery-modal_close{
position: absolute;
right: 0;
top: 0;
}
.gallery-modal_controls{
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 8px 0;
}
.gallery-modal_count{
min-width: 64px;
text-align: center;
font: 14px/1.5 sans-serif;
}
.gallery-modal :focus-visible{
outline: 2px solid #ff9ec3;
outline-offset: 2px;
}