@charset "utf-8";
/*-----------------------------------------------------------------------------------------
reset
----------------------------------------------------------------------------------------*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:where([hidden]:not([hidden='until-found'])){display:none!important}
:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}
@supports not (min-block-size:100dvb){:where(html){block-size:100%}}
@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}
:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}
:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}
:where(:disabled){cursor:not-allowed}
:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}
:where(button){border-style:solid}
:where(a){text-underline-offset:.2ex}
:where(ul,ol){list-style:none}
:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}
:where(img,picture,svg){max-inline-size:100%;block-size:auto}
:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}
:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}
:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}
:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

html {
  scroll-behavior: smooth;
}

a{text-decoration: none;}

:hover{transition: 0.5s;}

/*-----------------------------------------------------------------------------------------
important
----------------------------------------------------------------------------------------*/
.smp{display: none !important;}
.hidden{display: none !important;}
/*-----------------------------------------------------------------------------------------
base
----------------------------------------------------------------------------------------*/

body{
    box-sizing: border-box;
    color: #373738;
    background-color: #ebbcc8;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", sans-serif ,"Plus Jakarta Sans", sans-serif;
}

.flex{    display: flex;align-items: center;justify-content: center;}
.flex_c{    display: flex;flex-direction: column; align-items: center;justify-content: center;}
a img:hover{opacity: 0.8;}
/*-----------------------------------------------------------------------------------------
parts
----------------------------------------------------------------------------------------*/
.mamoru{margin: 20px 0;}

/*-----------------------------------------------------------------------------------------
oshimamo
----------------------------------------------------------------------------------------*/
#oshimamo{
  display: flex
  ;
          align-items: center;
          justify-content: center;
          background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.tokyolife.lol/44587884/image/oshimamo/bg_top_bk.png);
          background-repeat: repeat;
          background-attachment: fixed;
          background-position: top center;
          background-blend-mode: revert;
          background-color: #fefff7;
}

/*-----------------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------------*/
#main{
    max-width: 415px;
    width: 100%;
    /*border-radius: 90px;*/
    background-color: #ebbcc8;
    border-left: 1px solid rgb(145, 145, 145);
    border-right: 1px solid rgb(145, 145, 145);
    padding-bottom: 3vh;
    /*margin-bottom: 7vh;*/
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.tokyolife.lol/44587884/image/oshimamo/bg_top.png);
    background-blend-mode: color-burn;
    /*margin-top: 7vh;*/}

/*-----------------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------------*/
#header{position: relative;padding-top: 1vh;}

#header > img.book{        
  width: 22%;
z-index: 10;}
#header > img.bed{
  width: 40%;
  z-index: 10;
}

.logo{padding: 20px 0 0;position: relative;z-index: 99;}

#header .itempic{margin-bottom: -72px;z-index: 99;}
/*-----------------------------------------------------------------------------------------
what
----------------------------------------------------------------------------------------*/
#what{min-height: 360px;       
   display: flex;
   justify-content: center;
   align-items: center;
      }
      
#what .inner-main{position: relative;}
#what .what_bg{position: absolute;z-index: 0;
  display: inline-block; 
  transform-origin: center center;
  animation: spin 20s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


#what .text{position: relative;z-index: 1;        gap: 1em;text-align: center;}
#what h3{    line-height: 1.8em;}
#what h3 span{background-color:#373738;color: white;padding:0.2em 0.5em;margin: 0 0.2em;}
/*-----------------------------------------------------------------------------------------
movie
----------------------------------------------------------------------------------------*/
#movie{
  margin: 2em 0 50px;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.tokyolife.lol/44587884/image/oshimamo/bg_dot.jpg);
  padding: 50px 10px;}

  #movie h2{    
    font-family: "Playfair Display", serif;
    /* background-color: #373738; */
    color: #373738;
    /* padding: 0.2em 2em; */
    width: fit-content;
    margin: -1.3em auto 0;
    font-size: 4em;}


/*-----------------------------------------------------------------------------------------
item
----------------------------------------------------------------------------------------*/
.itemblock{overflow: hidden;}
.itemblock p.btn
{ 
        /* background-color: #373738; */
        padding: 0.5em 1em;
        display: flex;
        align-items: center;
        border: 1px solid;
        color: #373738;
        justify-content: center;
        margin: 1em auto 2em;
}


.itemblock p.btn:hover{
  background-color: #373738;
  color: #ebbcc8;
}

.itemblock h2{    font-size: 1.5em;        font-weight: 500;
  margin-top: 0.5em;
  text-align: center;}


  .textarea
  {   margin-top: 1em;
    opacity: 0.9;}
.textarea p {
  display: flex;
  
  background: #f2f1e8;
    padding: 0.1em 0.7em;    margin-bottom: 0.2em;}

    .textarea p i{display: none;}
/*-----------------------------------------------------------------------------------------
gallry
----------------------------------------------------------------------------------------*/
#gallry ul{
  flex-wrap: wrap;
}
#gallry ul li{width: calc(100% / 3);}


/*-----------------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------------*/
#footer .flex{gap: 1em;}

#toTop p
{position: fixed;
  font-family: "Playfair Display", serif;
  transform: rotate(90deg);
  bottom: 5em;
  display: flex;
  font-size: 1.5em;
  right: calc(50% - 280px);
  align-items: center;
  z-index: 9999;
  color: #373738;}

  #toTop p:hover{color: #7e7e7e;}



  /*----------------*/


/* 初期状態：非表示＆ちょい下にずらす */
.fuwa {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 500ms ease, transform 500ms ease;
  will-change: opacity, transform;
}

/* 表示状態：ふわっと */
.fuwa.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ユーザーがアニメーション軽減設定の場合は即表示 */
@media (prefers-reduced-motion: reduce) {
  .fuwa {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/*-----------------------------------------------------------------------------------------
slider
----------------------------------------------------------------------------------------*/

/* スライダー共通 */
.swiper {
  width: 100%;
  overflow: visible; 
}

.swiper-wrapper{    align-items: center;}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 矢印の位置調整（必要なら） */
.sliderA .swiper-button-prev,
.sliderA .swiper-button-next,
.sliderB .swiper-button-prev,
.sliderB .swiper-button-next{
  color: #333;
  z-index: 9999;
}