@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    background-color: black;
    color: #66cccc;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
/*ハンバーガー部分ここから*/

nav {
    display: block;
    width: 220px;
    position: fixed;
    background-color: #ffffff;
    top: 0;
    left: -300;
    bottom: 0;
    transition: all 0.5s;
    z-index: 3;
    opacity: 0;
}

.open nav {
    left: 0;
    opacity: 1;
}

nav .inner {
    padding: 25px;
}

nav .inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav .inner ul li {
    margin: 0;
    border-bottom: 1px solid #333;
}

nav .inner ul li a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    padding: 1rem;
    transition-duration: 0.2s;
}

nav .inner ul li a:hover {
    background-color: #e4e4e4e4;
}

.toggle-btn {
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    z-index: 3;
    cursor: pointer;
}

.toggle-btn span {
    position: absolute;
    display: block;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all 0.5s;
    border-radius: 4px;
}

.toggle-btn span:nth-child(1) {
    top: 4px;
}

.toggle-btn span:nth-child(2) {
    top: 14px;
}

.toggle-btn span:nth-child(3) {
    bottom: 4px;
}

.open .toggle-btn span {
    background-color: #fff;
}

.open .toggle-btn span:nth-child(1) {
    transform: translateY(10px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2) {
    opacity: 0;
}

.open .toggle-btn span:nth-child(3) {
    transform: translateY(-10px) rotate(315deg);
}

#mask {
    display: none;
    transition: all 0.5s; 
}

.open #mask {
    display: block;
    background-color: #000;
    width: 100%;
    height: 100%;
    top: 0
    left 0;
    position: fixed;
    opacity: 0.8;
    cursor: pointer;
}

.toggle-btn {
    display: none;
}

/*ハンバーガー部分ここまで*/
h1 {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 46px;
    font-weight: bold;
    color: #66cccc;
    text-align: center;
    margin-top: 34px;
    margin-bottom: 10px;
}

h2 {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 20px;
}


.main-nav {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0;
    list-style: none;
    justify-content: space-evenly;
}

.main-nav li {
    padding: 2px 15px;
    border-bottom: 1px solid #66cccc;
}

.main-nav a {
    color: #66cccc;
}
.main-nav a:hover {
    color: #ffcc66;
}
/*ヘッダー*/
.big-bg {
    background-size:cover;
    background-position: center top;
    background-image: url(../images/20241103134735.jpg);
    opacity: 0.6;
    width: 100%;
    min-height: 50vh;
    margin-bottom: 30px;
}

.fbwindow {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.youtube-box {
    display: flex;justify-content: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 40px;
}

.youtube-item {
    color: #66cccc;
    padding: 10px;
}


/*Harukaプロフィール*/
.flex_pro-box {
    background-color: #000000;     /* 背景色指定 */
    margin-left: 100px;         /* 余白指定 */
    margin-right: 100px;
    margin-bottom: 30px;
    display: flex;              /* フレックスボックスにする */
}

.flex_pro-item {
    padding: 10px;
    color:  #66cccc;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
}

.flex_pro-item:nth-child(1) {
    background-color:  #000000; /* 背景色指定 */
    flex-basis: 4500px;
}

.flex_pro-item:nth-child(2) {
    background-color:  #000000; /* 背景色指定 */
}

.cherrySpiceprofile {
    color: #66cccc;
    text-align: center;
    margin-right: 250px;
    margin-left: 250px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.cherrylogo {
    background-size: contain;
    background-position: center;
    background-image: url(../images/cherryspicelogo.jpg);
    margin-bottom: 25px;
    width: 100%;
    height: 120px;
}

.cherrymember {
    background-size: contain;
    background-position: center;
    background-image: url(../images/DSC00728edit.jpeg);
    width: 100%;
    height: 680px;
}

.cherrymemberface {
    background-size: contain;
    background-position: center;
    background-image: url(../images/cherrymemberface.jpg);
    width: 100%;
    height: 280px;
    margin-top: 40px;
}

.box {
   margin-left: 500px; /* 外側の余白（上下と中央配置） */
   margin-right: 500px;
   margin-top: 40px;
   margin-bottom: 40px;
   padding: 1em;   /* 内側余白 */
   border-radius:30px; /*丸みを調整 */
   background-color:#f9e8e2;
   text-align: center;
}

.box a:hover {
    color: #FF1A6F;
}

.live {
position: relative;
}

.livetext {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* または他の適切な表示形式 */
}

.footer {
    text-align: center;
}

 /* live page用 */
.livepagephoto {
    background-size:cover;
    background-position: 50px;
    min-height: 15vh;
    background-image: url(../images/livepic.jpeg);
    opacity: 100;
    margin-bottom: 30px;
}

.main-nav2 {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    list-style: none;
    justify-content: space-evenly;
    margin-bottom: 30px
}
.main-nav2 li {
    padding: 2px 15px;
    border-bottom: 1px solid #66cccc;
}
.main-nav2 a {
    color: #66cccc;
}
.main-nav2 a:hover {
    color: #ffcc66;
}

.main-nav3 {
    display: flex;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    list-style: none;
    justify-content: space-evenly;
    margin-bottom: 35px;
    margin-left: 300px;
    margin-right: 300px;

}
.main-nav3 li {
    padding: 2px 10px;
    border-bottom: 1px solid #66cccc;
}
.main-nav3 a {
    color: #66cccc;
}
.main-nav3 a:hover {
    color: #ffcc66;
}

.liveinfo {
    max-width: 800px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    margin-bottom: 20px;
}
.livetitle {
    text-align: center;
    color: #FF1A6F;
    font-size: 30px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
}
.livetime {
    text-align: center;
    color: #ffcc66;
    font-size: 25px;
    font-weight: bold;
}
.livein {
    font-size: 20px;
    position: relative;
    left: 50px;
    margin-right: 90px;
}

.bottomline {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.fontred {
    color: #FF1A6F;
}

.image-container {
    text-align: center;
}

.image-container img {
    width: 50%;
}


/* モバイル版
------------------------------- */
@media (max-width: 700px) {

    .page-title {
        font-size: 2.5rem;
    }

    /* HEADER */

    .toggle-btn {
        display: flex;
    }

    .main-nav {
        display: none;
    }

        .main-nav2 {
        display: none;
    }
        .main-nav3 {
        display: none;
    }
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 20px;
    }
    .main-nav li {
        margin: 0 20px;
    }

    /* HOME */
    .home-content {
        margin-top: 20%;
    }

    .youtube-box {
        flex-direction: column;

    }

    .flex_pro-box {
        flex-direction: column;
        margin: 0px 10px 10px 10px;
    }
    .flex_pro-item:nth-child(1) {
    flex-basis:0px
}

.cherrySpiceprofile {
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 0px;
}
.cherrymember {
    width: 100%;
    height: 500px;
}

.cherrymemberface {
    width: 100%;
    height: 200px;
    margin-top: 0px;
}

.box {
   margin: 0px 10px 30px 10px;
   padding: 1em;   /* 内側余白 */

   background-color:#f9e8e2;
   text-align: center;
}

.footer {
    margin-left: 20px;
    margin-right: 20px;
}

 /* live page用 */

 .livepagephoto {
    min-height: 7vh;
}

.livetitle {
    font-size: 25px;
}

.livein {
    margin-right: 70px;
}

.image-container img {
    width: 90%;
}

}