@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
html, body {
  overscroll-behavior: contain; /* スクロールバグ防止（ビュン防止） */
}

html{
    scroll-behavior: smooth;
}

body{
  font-family: 'Sawarabi Gothic', sans-serif;
    word-break: break-word;
      line-height: 1.6;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


button{
  background: none;
  border: none;
}



img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

li{
    list-style: none;

}
a.glay{

    color: #888888!important;
}
a{
    color: #ffffff;
    text-decoration: none;
    pointer-events: auto;
}

.akaobi{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 100vh;
    background: linear-gradient(to top, #C8D50E, #a5af18, #e4f11f, #C8D50E);
  z-index: 0;
}




section{
    display: flex;
  scroll-margin-top: 200px!important; /* ヘッダーの高さに合わせて調整 */
    /*←データが多くなってきたらスクロールにする（バーは見た目をカスタマイズすること）*/

    margin: 0 0 80px 0;
}

section:nth-last-child(2){
        margin:0;
}




div.center{

    z-index: 0;
width: 700px;
    /* background-color: #850817; */
    width: 100%;
 display: block;
  justify-content: center; 
}
div.center div{

  -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール補助 */

}

.sticky-parent{
  height: 110vh;
    padding-bottom: 20vh;
}

div.top-sticky-child{
  position: sticky;
  top: 0;
  z-index: 10;

  padding: 2rem 1rem;
  margin: 0;       
}



.sidemenu_right,
.sidemenu_left{
      pointer-events: none;
}

a img:hover{
      animation: scaleUpDown 2s infinite;
      opacity: 0.9;
}

li a:hover{
    background-color: #16eead2d;
    color: white!important;
}


/* WebKit系（Chrome, Safari, Edge） */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent; /* トラック部分を透明に */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* 半透明の黒 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5); /* ホバー時に濃く */
}


.grid-img {
  width: 100%;
  /* height: 300px; */
  object-fit: cover;
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

/**/
.gotop{
    position: fixed;
    background-color: #850817;
    color: white;
    bottom: 20vh;
    right: 8px;
    padding: 27px 8px;
    border-radius: 999px;
    z-index: 99;
      opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.gotop.show {
  opacity: 1;
  visibility: visible;
}





/* 最初は非表示 */
.fade-in-on-scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}


/* スクロールで表示 */
.visible-on-scroll {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}



/*付箋*/
.fusen1{
background-color: #ffffff66;
    padding: 3px;
    font-weight: bold;
}
/*PC⇔SP切り替え*/
.PC-senyou{display: block;}
.SP-senyou{display: none;}
/***/

/*ここまでリセット＆全体的な要素*/

body#imo{
background-color: #F5F0E6;
}

body{
    width: 100%;
    background-color:#F5F5F5;
    z-index: -2;
}


.scroll-arrow {
    top: 30vh;
    right: 1vw;
    position: fixed;
    height: 80%;
    width: 60px;
    background-image: url(img/PC_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    animation: floatUpDown 3s ease-in-out infinite;

      pointer-events: none; /* ← これでクリックを透過させる */
}
@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}








div.wrapper-top{
      background-color: #F5F0E6;
}
p.top-title-sub{
      font-size: larger!important;
}

section#top{
    display: block; 

      height: 200%;        /* ←ここを変更。dvhはstickyの妨げになることがある */
  min-height: 100vh;
}

section#top h1{
      border-bottom: 1vw solid #c8d50e;
    padding: 0px 8px 0px 8px;
    background-color: #f5f5f5b8;
    font-size: 7vw;
    z-index: 1;
    background-color: #484747;
    color: #ece0e0;

      font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}

section#top div.center div{
    margin: 0% auto 0;
}


section#top p{
      text-align: center;
    color: #484747;
    font-size: xx-large;
}

div.spacer-top{
  height: 22vh;
  width: 100%;
}

header{
  /* 最初は非表示にしておく */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;

    display: flex;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 8px;
}

/* スクロール後に表示 */
header.visible-on-scroll {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



header img{
  width: 100px;
}
header div ul{
  display: flex;
  border-radius: 18px;
}

header div ul li{
  margin: 3px 8px;
}

.header-menu{
    padding: 4px 2px;
    width: 100%;
    display: flex;
    border-radius: 18px;
  background: linear-gradient(to top, #9B3F60, #9B3F2C);
}

.header-seikatai{
      padding: 4px 23px;
width: 750px;
    display: flex;
    border-radius: 18px;
  background: linear-gradient(to top, #9B3F30, #F57C68);
}


/*焼き芋ぱっくり＆yuge animation kokokara*/
.yakiimo-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 2000px auto 0;
  overflow: hidden;
}


div.yakiimo-wrap.active{
  overflow: visible;
}

/* 芋を正しいサイズ・動作に戻す */
h1.imo-title{
    font-weight: normal;
    border-bottom: none !important;
    padding: 0 3vw !important;
    top: 20vh !important;
    font-size: 5dvh !important;
    color: #333 !important;
    background-color: #f0f8ff00 !important;
    text-align: center;
    border: none;
    border-radius: 8px;
    left: 50% !important;
    writing-mode: vertical-rl;
    height: 73vh;
}

h1.top-title{
      border-bottom: none!important;
    text-align: center;
    color: #333!important;
    font-size: 8vw!important;
    background: none!important;
    margin: 8vh 0 0 0;
}

.imo {
  position: absolute;
  top: 50%;
  width: 120px;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 1s ease;
  z-index: 1;
}
.imo.left {
  left: 45%;
}
.imo.right {
  left: 55%;
}

img.imo.right{
    width: 22vw;
}
img.imo.left{
    width: 22vw;
}
div.yakiimo-wrap{
      width: 60vw;
}

.yakiimo-wrap.active .left {
  transform: translate(-130%, -50%);
}
.yakiimo-wrap.active .right {
  transform: translate(30%, -50%);
}

/* 湯気ループ化 */
.steam {
  position: absolute;
  top: 0;
  width: 20px;
  height: 100px;
  background: radial-gradient(white 100%, transparent 100%);
  opacity: 0;
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.steam1 { left: 30%; animation-delay: 0s; top: 14%; border-radius: 1000px; height:10vw; width: 10vw;}
.steam2 { left: 23%; animation-delay: 1s; border-radius: 999px; top: 28%;  height: 6vw; width: 7vw;}
.steam3 { width: 5vw; height: 5vw; left: 17%; top: -22%;  animation-delay: 2s; border-radius: 999px;}
.steam4 { left: 70%; animation-delay: 3s; border-radius: 9999px; left: -18%; width: 15vw; height: 16vw; top: -60%;}

.yakiimo-wrap.active .steam {
  animation: steamloop 4s ease-out infinite;
}
@keyframes steamloop {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  20%  { opacity: 0.8; }
  60%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.4); }
}

/* タイトルふわふわループ */
.imo-title {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2em;
  font-weight: bold;
  z-index: 2;
  opacity: 0;
}
.yakiimo-wrap.active .imo-title {
  opacity: 1;
  animation: floatTitle 3s ease-in-out infinite;
}






    /*yuge kokomade*/

section#top figure img{
        top: 29vh;
    width: 130px;
    right: -7px;
    position: fixed;
    z-index: 1;
}







div.center ul a{
    color: #fff;
    text-decoration: none;
}
div.center ul a:visited{
    color: #fff;
}





#top div.center figure{
    filter: drop-shadow(0 0 0.75rem crimson);
    height: 750px;
    width: 750px;
    background-image: url(img/satsumaimo_top_en.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 10000px;
    position: relative;
}

@keyframes scaleUpDown {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
  }
}

.pulse {
  animation: scaleUpDown 2s infinite;
}

div.center figure img{
    margin: auto;
  object-fit: cover; /* 比率崩さず、トリミングする */
  display: block;
}





/**/
/*自己紹介*/

.parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.parallax-section.in-view .video-bg {
  opacity: 1;
  pointer-events: auto;
}



.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  padding-top: 40vh;
}









section#about_me{
/* background-image: url(img/monochrome_face.jpg), url(img/monochrome_back2.jpg);
    background-repeat: no-repeat;
    background-size: 58%,96%;
    background-position: -15vw,right; */
height: 100dvh;
}



#about_me div.center{
  flex-direction: column; /* flexを縦並び */
  align-items: center;     /* 中央寄せしたいなら */
width: 700px;
margin: auto;
}

#about_me div.center table{
    border-collapse: collapse;
}

h2.next-omoi{
      width: 62vw!important;
}


.name1{
padding: 0 2vw 0 2vw;
    font-weight: 300;
    font-size: 50px;
    background-color: #888888;
    color: #fff;
}
.name2{
    font-weight: 200;
    text-align: center;
    background-color: #484747;
    color: #fff;
}
.name3{
      min-width: 50px;
    background-color: #222;
        color: #fff;
}
.name3 a{
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: 100%;
    height: 155px;
    font-size: 28px;
    rotate: 180deg;
    writing-mode: vertical-lr;
    color: #fff;
    cursor: pointer;
    text-align: center;
}
.name3 a:visited{
        color: #fff;
}
td.name3:hover{
    background: #F5F5F5;
}
td.name3 a:hover{
    color: #850817;
}

div.name_kakomi ul li{
    background-color: #11111100;
}

#about_me div.center .name_kakomi{
margin: 0 0 5vh 0;
    display: flex;
    justify-content: space-between;
    width: 70%;
}

.about_me_skill{
    display: block;
}
.about_me_skill img{
    width: 80%;
}
/**/











/*footer*/
footer.satumaimo-fotter{
  background: linear-gradient(to top, #9B3F60, #9B3F2C);
}
footer.satumaimo-fotter p{
text-align: center;
}

.footer-flex{
  display: flex;
  margin: auto !important;
}

div.footer-flex div p{
  text-align: left;
}
div.footer-flex div ul{
  width: 40vw;
}

footer.satumaimo-fotter div{
      justify-content: center;
background-color: none;
margin: 41px 0;
    padding: 2vh auto!important;
    height: auto;
    background: none !important;
    text-align: left;
}

footer.footer-c{
width: 100%;
text-align: center;
}

footer div p{
    margin: auto;
}

p.thanks{
    padding: 40vh 18px;

}

footer p.bottom{
    position: relative;
    bottom: 38px;
    text-align: center;
    z-index: 1;
} 




footer p{
        color: white;
}














/* ↓開くとき用（変更なし） */
@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
} */










/*フェードイン、フェードアウト用のCSS（JS連携）*/
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}


/**/


/*オープニングムービー　JS連携*/
#introVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 9999;
  transition: opacity 1s ease;
}
#introVideo.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}



/**/






/*omoi*/
.genten.omoi,
#top.omoi{
display: flex;
    justify-content: space-between;
    align-items: center!important;

}
.h1-title{
margin: 0 8vw 0 4vw;
}
.imo-shot{
width: 80vw;
    height: 80vh;
    position: relative;
    top: 0;
    background-image: url(img/imo-shot.png);
    background-position: left;
    background-repeat: no-repeat;
    object-fit: cover;
}
.top-shita-hosoku{
    display: block;
    width: 80%;
    margin: auto;
    font-size: x-large;
    text-align: left;
      color: #850817;
}

.genten-moji{
    margin: auto;
    width: 27%;
    min-width: 200px;
    padding: 2vw;
    text-align: left;
    color: #850817;
        font-size: large;
}

.genten-pic{
    width: 60vw;
    height: 80vh;
    min-height: 250px;
    background-image: url(img/taiwa2.png);
    background-position: top;
    background-repeat: no-repeat;
    object-fit: cover;
}

.genten-pic.shanaihou{
    width: 60vw;
    height: 80vh;
    min-height: 250px;
    background-image: url(img/satumaimo-tuusin.png);
    background-position: 63% 84%;
    background-repeat: no-repeat;
    object-fit: cover;
}

.korekara-pic{
      width: 60vw;
    height: 80vh;
    min-height: 250px;
    background-image: url(img/korekara.png);
background-position: 56% 80%;
    background-repeat: no-repeat;
    object-fit: cover;
}

.imi-pic{
      width: 60vw;
    height: 80vh;
    min-height: 250px;
    background-image: url(img/taiwa.png);
background-position: 30% 30%;
    background-repeat: no-repeat;
    object-fit: cover;
}

.imi-pic.sodatu{
      width: 60vw;
    height: 80vh;
    min-height: 250px;
    background-image: url(img/tayorareru.png);
    background-position: 39% 51%;
    background-repeat: no-repeat;
    object-fit: cover;
}

section.mezasu{
background: linear-gradient(to top, #F57C68, #F9C85B);
width: 100%;
height: auto;
}
section.mezasu p{
    padding: 0 8vw;
    font-size: xx-large;
    text-align: left;
    width: auto;
    margin: 18vh auto;
    color: white;
}
section.senden{
display: block;
}
section.senden p{
  color: #850817;
text-align: center;
font-size: x-large;
}
section.senden img{
  margin: auto;
  width: 30vw;
  min-width: 280px;
}
/**/

/**声価隊**/
section#top.seikatai{
  display: flex;

}
section#top.seikatai div.top-moji{
  flex: 1;
  margin: 3vw;
  text-align: left;
}

section#top.seikatai div.top-moji h1 {
  background: none;
      border-bottom: none;
}
section#top.seikatai div.top-moji h1 img{
/* width: 100%; */
margin: auto;
}
section#top.seikatai div.top-moji p {
    margin: auto;
    text-align: left;
    font-size: 20px;
    color: #9B3F30;
    margin-top: 6vh;
    width: 31vw;
}
section#top.seikatai div.top-moji p img{
  width: 85%;
}

section#top.seikatai div.top-img{
  flex: 1;
background-image: url(img/monochrome_back.jpg);
background-position: center;
object-fit: cover;
background-repeat: no-repeat;
background-size: cover;
width: 100%;

}

section.mezasu.seikatai{
  display: block;
  text-align: center;
}

section.mezasu.seikatai h2{
    font-size: 40px;
    margin: 0 auto;
    width: 51vw;
    color: white;
    border-bottom: solid 2px;
    font-weight: bold;
    padding: 8vh 0 6px;
}
section.mezasu.seikatai p{
    font-size: 20px;
    margin: 3vh 0 0 0;
    text-align: center;
}
section.mezasu.seikatai p:last-child{
  padding-bottom: 8vh;
}
button.seikatai-button{
  width: 100%;
}

button.seikatai-button img{
margin: 8vh auto 8vh;
}
section.review.seikatai{
  display: block;
  text-align: center;
}

section.review.seikatai h2{
  font-size: 40px;
  color: #850817;
  margin-bottom: 3vh;
}

section.review.seikatai div.review-box{
  display: flex;
  justify-content: center;
}

section.review.seikatai div.review-box p img{
  margin: 3vw;
}

section.seikatai.speaker{
background: linear-gradient(to top, #91B18F, #F9C85B);
width: 100%;
height: auto;
display: block;
padding: 3vh;
}
section.seikatai.speaker h2{
  text-align: center;
  font-size: 40px;
  color: white;
  padding: 8vh 0 8vh 0;
}

h1.c-pageTitle__main {
    color: #850817!important;
}

div.cms-wrapper{
  width: 100%;
  height: auto;
  min-height: 100vh;
}

div.cms-wrapper iframe {
  scrollbar-width: thin; /* Firefox用 */
  scrollbar-color: rgba(255, 0, 0, 0.4) rgba(0, 0, 0, 0.1); /* Firefox用 */
}

/* WebKit系（Chrome・Edgeなど） */
div.cms-wrapper iframe::-webkit-scrollbar {
  width: 10px;  /* 少し太め */
}

div.cms-wrapper iframe::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);  /* 背景：ほぼ透明 */
}

div.cms-wrapper iframe::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4); /* スクロールつまみ：半透明白 */
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.1); /* うっすら縁取りで“映える” */
}

div.cms-wrapper iframe::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6); /* ホバーで少し濃く */
}


section.seikatai.speaker div.member{
background-color: #f5f0e6;
    border-radius: 18px;
    /* padding: 8vh 3vw; */
    margin: 8vw;
    padding: 8vh 0 0 0;
}
section.seikatai.speaker div.member h3{
text-align: center;
    background-color: #9b3f60;
    color: white;
    width: 308px;
    margin: auto;
    padding: 1vw;
}



section.seikatai.speaker p.member-sub{
color: #9B3F60;
    text-align: center;
}

div.member div{
    margin: auto;
    padding: 3vh 0 8vh 0;
    width: 60vw;
}
div.member div table{
    font-size: 20px;
    line-height: 1.5;
}

div.member div table th{
    color: #850817;
    background: #9b3f6033;
    margin: 31px;
    width: 118px;
    text-align: center;
    vertical-align: middle;
}
div.member div table td{
    padding: 0 0 0 18px;
        color: #850817;
    background: none;
    vertical-align: middle;
}
section.seikatai.real{
display: block;
    margin: 8vh auto;
    width: 100%;
    font-size: 20px;
    max-width: 63vw;
    color: #850817;
}


section.seikatai.real h2 img{
    margin: 18vh auto 3vh;
}

section.seikatai.real p img:first-child{
  margin: 5vh auto 18vh;
}

section.seikatai.real p img{
margin: 18vh auto;
    width: 100%;
    max-width: 60vw;
}

section.mezasu.seikatai .table.table.table-striped{
  margin: 4vh auto;
      width: 100%;
    max-width: 60vw;
}

section.mezasu.seikatai.table{
  padding: 0 auto 18vh;
      margin: 18vh 0 0;
}


section.mezasu.seikatai.table p{
margin: 3vh auto 0;
    text-align: left;
    max-width: 77vw;
}


section.mezasu.seikatai div.table-wrapper{
      padding: 0 0 5vh 0;
}



section.seikatai.qa{
display: block;
font-size: 20px;
}

section.seikatai.qa h2.title{
font-size: 40px;
    text-align: center;
    color: #9b3f60;
    margin: 18vh auto 5vh;

}

section.seikatai.qa button{
  font-size: 20px;
}


div.accordion#accordionBasic.accordion{
    width: 80vw;
    margin: auto;
}


button.accordion-button.collapsed{
    background-color: #9b3f60;
    color: white;
}

button.accordion-button:not(.collapsed){
      background-color: #fff3cd;
    color: #9b3f60;
}

div.accordion-body{
    color: #850817;
}


section.mezasu.seikatai.last-cta{
  padding: 8vh 0;
}

section.seikatai.icon.senden h2{
text-align: center;
    font-size: 40px;
    color: #850817;
    margin: 18vh auto 3vh;
}

section.seikatai.icon.senden p{
color: #850817;
    /* text-align: center; */
    font-size: x-large;
    width: 80vw;
    margin: auto;
    text-align: left;
}

footer.satumaimo-fotter p{
  margin: 0;
}

section.mezasu.seikatai.taiwa{
    width: 57vw;
}

p.icon-omoi{
    margin: 8vh auto 0 !important;
}

/**//**/
/**//**/
/*specialThanks*/
section.genten.omoi.tadantaisama{
    display: block;
    filter: drop-shadow(0 0 0.75em rgba(122, 73, 83));
    width: 90%;
    margin: 8vh auto;
    border-radius: 18px;
    padding: 0 0 1px;
    background-color: #f5f0e6;
}

section.genten.omoi.tadantaisama div.genten-pic{
    width: 80%;
    height: auto;
    min-height: auto;
    margin: auto;
    background: none;

}
section.genten.omoi.tadantaisama div.genten-pic img{
    padding: 5vh 0 0;
    margin: auto;
}

section.genten.omoi.tadantaisama div.genten-moji{
margin: auto;
    width: 80%;
    min-width: 200px;
    /* padding: 0vh 0 0; */
    text-align: left;
    color: #850817;
    font-size: large;
}
section.genten.omoi.tadantaisama section.senden a img{
    margin: 0 auto 18px;
    width: 50%;
    max-width: 280px;
    min-width: 80px;
}

section.genten.omoi.tadantaisama section.senden div.icon{
    width: auto;
    display: flex;
    justify-content: center;
}
button.ulr-cta {
color:white;
    background-color: #9b3f60;
    padding: 18px;
    display: block;
    width: 80%;
    margin: 0 auto 18px;
    font-size: larger;
    border-radius: 18px;
}

/**//**/
/**supporters**/

section.top-shita-hosoku p{
    text-align: center;
    font-size: xx-large;
    margin: 8vh auto 18vh;}

section.supporters.list{
    color: #850817;
    display: block;
    margin: 11vh auto;
    width: 60vw;
    font-size: x-large;
    line-height: 1.8;
    list-style: lower-roman;
}
section.supporters.list h2{
    font-size: 40px;
    margin: 0 0 20px;
    border-bottom: 3px solid #850817;

    margin: 0 auto 3vh;
}
div.genten-moji ul li{
    font-size: x-large;
    margin: auto;
    color: #850817;
    line-height: 1.8;
    list-style: circle;
}

section.genten.omoi.tadantaisama.supporters div.genten-moji h3{
    margin: 30px 0 0 0;
}

section.genten.omoi.tadantaisama.supporters{
    display: flex;
    filter: drop-shadow(0 0 0.75em rgba(122, 73, 83));
    width: 90%;
    margin: 8vh auto;
    border-radius: 18px;
    padding: 0 0 1px;
    background-color: #efefef;
}
section.genten.omoi.tadantaisama.supporters div.img-box{
    margin: auto 3vw;
    height: 100% !important;
    min-width: 200px;
    min-height: 500px;
    width: 100% !important;
    background-image: url(img/imo-shot.png);
    background-position: center;
}



section.jisseki{
      display: block;
    color: #850817;
    width: 80vw;
    margin:18vh auto;
    font-size: x-large;
}

section.jisseki h2{
width: 80vw;
    margin: 18vh auto 20px;
    border-bottom: 3px solid;
}

section.mezasu.supporters.rinen{
    font-size: xx-large;
    display: block;
    text-align: center;
    color: white;
    padding: 8vh 0;
}

section.mezasu.supporters.rinen h2{
font-size: 40px;
    text-decoration-line: underline;
    margin: 0 auto 18px;
}
section.supporters.mail{
    display: block;
    margin: 18vh auto;
    width: 40vw;
    color: #850817;
}
section.supporters.mail p{
  font-size: xx-large;
      word-break: break-word;
}
button#SP-header-button{/*←通常時は隠す*/
display: none;
}









/*1290px以上*/
@media (min-width: 1290px) {

section#web div.center div a img {
    max-width: 300px;
    margin: 18px;
}
}


/*1000px以下*/
@media (max-width: 1000px) {

/*PC⇔SP切り替え*/
.PC-senyou{display: none;}
.SP-senyou{display: block;}
/***/



/**//**/
/*モバイルメニュー*/
button#SP-header-button{
        position: fixed;
        display: block;
        width: 100px;
        top: 2vh;
        left: 2vw;
              cursor: pointer;
              z-index: 99;
}
/* スマホ時にheaderが.showで開く時の上書きルール */
header{
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    height: 100%;
    background-color: #850817c9;
    pointer-events: none;
}
header.show {
    opacity: 1;
    display: block !important;
    visibility: visible;
    pointer-events: auto;
}

/* ←スクロール表示されないようにする */ /* ←これがないとスクロールで勝手に開く */
  
  /* header.visible-on-scroll {
    display: none !important; 
} */
div.hp-menu {
        display: block;
    }
.header-menu {
          font-size: larger;
        text-align: right;
        display: block;
        border-radius: 18px;
        background: none;
}
.header-seikatai {
          font-size: larger;
display: block;
        width: 100%;
        text-align: right;
        border-radius: 0;
        /* padding: 9px; */
        height: 100%;
        /* background-color: #895718; */
        background: linear-gradient(to top, #fff3cd6b, #f57c685e);
}
header {
    height: 100%;
    background-color:#850817c9;
}
header img {
    margin: auto;
        width: 38vw;
}

  /* ←ここを追加！ */
  #SP-header-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
    pointer-events: auto !important;
  }
  /* スクロール後に表示される状態 */
#SP-header-button.visible-on-scroll {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



/**//**/




/**/
/*TOP*/
.scroll-arrow {
  display: none;
}
/**//**/
/*声価隊*/
/**//**/
section#top.seikatai div.top-moji h1 img {
        width: 100%;
        margin: auto;
        position: relative;
        top: 25vh;

}


.SP-senyou.spacer{
        margin: 0;
        width: 100%;
        min-width: 100px;
        min-height: 50vh;
        height: 100%;
}

section#top.seikatai {
  display: block;
          padding: 0;
}
section#top.seikatai div.top-moji{
  overflow: hidden;  
    position: relative;
            margin: 0;
        padding: 0 0 50px 0;
}


section#top.seikatai div.top-moji::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  inset: 0; /* ←上下左右ぜんぶ0でピッタリフィット */
    overflow: hidden; /* ← 重要！背景のはみ出しを防ぐ */
  background-image: url("img/monochrome_back.jpg");
  background-size: cover;
  background-repeat: no-repeat;
object-fit: cover;
  opacity: 0.3; /* ←ここで背景画像だけ半透明に！ */
  z-index: -1;
}


section#top.seikatai div.top-moji p {
    width: 80%;
    font-size: x-large;
        width: 80%;
        text-align: center;
}
section#top.seikatai div.top-img {
display: none;
}
section.mezasu.seikatai h2 {
    width: 90vw;
}
section.mezasu.seikatai p {
    text-align: left;
}

section.review.seikatai h2 {
    font-size: xx-large;
}
section.review.seikatai div.review-box p img {
    margin: auto;
  }
section.seikatai.speaker div.member h3 {
    width: 100%;
    max-width: 75%;
    min-width: 230px;
}
section.seikatai.speaker p.member-sub {
    width: 90%;
    margin: auto;
}
div.member div table th {
    width: auto;
}


section.seikatai.real h2 img {
    margin: 5vh auto 3vh;
}

section.seikatai.real {
    max-width: 90vw;
            margin: auto;
    }



section.seikatai.real p img {
    max-width: 100%;
}
section.seikatai.real p img:first-child {
    margin: 4vh auto 8vh;
}
h2.next-omoi {
    width: 80vw !important;
    font-size: xx-large !important;
}
section.mezasu.seikatai.table p {
    max-width: 100%;
}
section.mezasu.seikatai .table.table.table-striped {
    max-width: 89vw;
}

section.review.seikatai div.review-box {
    display: block;
}

/**//**/



















div.center {
          margin: auto;
    width: 70vw;
    max-width: 100%;
}



section#web > div.sidemenu_right {
    width: 70vw;
    max-width: 100%;
}

.akaobi {
    width: 70vw;
    height: 100dvh;
}






#top div.center figure {
    filter: drop-shadow(0 0 0.75rem crimson);
        height: 100vw;
        width: 100vw;
                max-height: 640px;
        max-width: 640px;
        background-image: url(img/satsumaimo_top_en.png);
        /* background-size: 59%; */
}


.scroll-arrow {
  position: absolute;
  top: 0;
    right: 0;
    height: 100dvh;
    width: 100%;
    background-image: url(img/arrow_down.png);
    background-size: 44px;
    background-position: bottom;
    z-index: 1;
}

#about_me div.center table {
  margin: 18px 0 0 0;
}

#about_me div.center .name_kakomi {
display: block;
}

.name1 {
    font-size: 7vw;
  height: 120px;
}
.name3 a {
  display: inline-block;       /* ← block をやめる */
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 22px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;         /* ← 折り返し防止で潰れ対策 */
  max-width: 100%;
    }


#about_me div.center {
    width: 100%;
}

#about_me div.center .name_kakomi {
    width: 48%;
        max-width: 480px;
}
div.center figure img {
width: 70%;
}
section#web > div.sidetitle_right {
   display: none;/*→原因不明な横ずれ。暫定的に隠す*/
          right: 50%;
height: 80dvh;
        width: 100%;
        position: absolute;
        z-index: 0;
}
section#web > div.sidetitle_right h2 {
         transform-origin: right bottom;
          top: 110px;
          right: 14vw;
          font-size: 8vw;
            background-color: #00000000;
           
}

section#banner > div.sidemenu_left {
    width: 70vw;
    max-width:100%;
    margin: auto;
}


section#banner > div.sidetitle_left {
  display: none;/*→原因不明な横ずれ。暫定的に隠す*/
height: 80dvh;
        width: 100%;
        position: absolute;
        z-index: 0;
}
section#banner > div.sidetitle_left h2 {
        transform-origin: right bottom;
        top: 30px;
        left: -3vw;
        font-size: 8vw;
}
section#banner div.center div::before{
text-align: left;
}

section#other > div.sidemenu_right {
    width: 70vw;
    max-width: 100%;
    margin: auto;
}

section#other > div.sidetitle_right {
 display: none;/*→原因不明な横ずれ。暫定的に隠す*/
          right: 50%;
height: 80dvh;
        position: absolute;
        z-index: 0;
}
section#other > div.sidetitle_right h2 {
         transform-origin: right bottom;
         top: 115px;
        right: 14vw;
        font-size: 8vw;
            background-color: #00000000;
}
section#history > div.sidemenu_left {
    width: 70vw;
    max-width: 100%;
    margin: auto;
}
section#history > div.sidetitle_left {
 display: none;/*→原因不明な横ずれ。暫定的に隠す*/
          right: 50%;
height: 80dvh;
        width: 100%;
        position: absolute;
        z-index: 0;
}
section#history > div.sidetitle_left h2 {
        transform-origin: right bottom;
        top: 100px;
        left: -3vw;
        font-size: 8vw;
}
section#history div.center {
    z-index: 0;
}



footer div {
    width: 70vw;
    margin: auto;
    }

.popup{
    width: 80vw;
    height: 80dvh;

  }
div.footer-flex{
  display: block;
}
div.footer-flex div p {
    padding: 3vh 0;
}

div.footer-flex div ul {
    width: 100%;
}

/**//**/
/*supporters*/
/**//**/
section.supporters.list {
    width: 88vw;
}

section.genten.omoi.tadantaisama.supporters div.genten-moji h2{
        padding: 3vh auto 0;
        display: block;
}
section.genten.omoi.tadantaisama.supporters div.img-box {
    width: 88% !important;
margin: 0 auto 40px;
}
section.genten.omoi.tadantaisama.supporters{
    display: block;
    padding: 4vh 0!important;
}
section.mezasu.supporters.rinen ul {
        text-align: center;
        padding: 0;
        font-size: xx-large;
}
section.mezasu.supporters.rinen ul li{
  margin-bottom: 3vh;
}

section.mezasu.supporters.rinen h2 {
  font-size: xxx-large;
}

section.supporters.mail {

    margin: 18vh auto;
    width: 81vw;
}
section.supporters.mail h2{
          text-align: center;
          font-size: 10vw;
    margin: 0 auto 8vh;
}





  }