@charset "UTF-8";
:root {
    /* --paleblue: rgba(189, 227, 242, 1); */
    --paleblue: #df32b1;
    --pink1: #3f1f37;
    --pink0: #7a4e6f;
    --pink2: #f59cde;
    --pink3: #ff24c5;
    --pink4: #df32b1;
    --blue: #8e93ee;
    --yellow:#f7f756;
    --btnback:white;

    --kaisei-haru: 'Kaisei HarunoUmi', serif;
    --kaisei-opti: 'Kaisei Opti', serif;
    --cardo: 'Cardo', serif;
    --wallpoet: 'Wallpoet', sans-serif;
    --cormorant: 'Cormorant Garamond', serif;
    --abril: 'Abril Fatface', serif;
    --zen-kaku: 'Zen Kaku Gothic Antique', sans-serif;
    --noto-serif: 'Noto Serif JP', serif;
    --noto-sans: 'Noto Sans JP', sans-serif;

    /* 色の変わるテキスト */
    --normalTextColor: #59344f;
    /* --patoTextColor: #f97abe; */
    --patoTextColor: #ff24c5;
    --lastTextColor: white;
    /* 色の変わる背景 */
    /* --bgcolor: rgb(214, 8, 8); */
    /* 白 */
    /* --bgcolor: #f4f2e8; */
    --bgcolor: rgb(251, 245, 245);
}

html{
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    /* font-family: sans-serif; */
    overflow-x: hidden;
    width: 100%;

    /* min-height: 100vh; 
    min-height: calc(var(--vh, 1vh) * 100); */
}

#load{
    position: fixed;
    top: -20vh;
    width: 100%;
    height: 120vh;
    background-color: white;
    z-index: 1003;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loadbg{
    width: 100%;
    height: 120%;
    position: absolute;
}
@media screen and (max-width:767px) {
    .loadbg{
        width: 300%;
    }
    
}
.load-icon{
    width: 10vw;
    height: 10vw;
    max-width: 65px;
    max-height: 65px;
    position: relative;
    animation: logo2 2.4s infinite steps(2,end);
}
.logo1{
    position: absolute;
    width: 10vw;
    height: 10vw;
    max-width: 65px;
    max-height: 65px;
}
.logo2{
    position: absolute;
    clip-path: polygon(0 73%, 21.2% 64.4%, 38.2% 57.2%, 69.2% 48.9%, 100% 45%, 100% 100%, 0 100%);
    /* clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); */
    /* overflow: hidden; */
    width: 10vw;
    height: 10vw;
    max-width: 65px;
    max-height: 65px;
}
.logo2 img{
    width: 10vw;
    height: 10vw;
    max-width: 65px;
    max-height: 65px;
    animation: logo 1.2s infinite ;
}
@keyframes logo {
    0%{
        transform: translateY(-100px);
    }
    50%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}
@keyframes logo2 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(-10deg);
    }
}

.load-text{
    margin-top: 1rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
    font-size: 1rem;
    color: #f2302e;
}

.ticket-link a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ticket-link{
    overflow-x: hidden;
    width: fit-content;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    text-shadow: 1px 1px 0 var(--yellow);
    font-family: var(--kaisei-opti);
    font-size: clamp(0.7rem,3.5vw,1rem);
    padding: 1rem 0 1rem 0.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
}

.ticket-link img{
    width: 100%;
    height: 100px;
    max-width: 70px;
    transform: rotate(90deg);
    animation: hand 2s ease infinite;
}
@keyframes hand {
    0%{
        transform:rotate(90deg) translateX(0);
    }
    10%{
        transform: rotate(90deg) translateX(1vh);
    }
    20%{
        transform: rotate(90deg) translateX(0);
    }
    30%{
        transform: rotate(90deg) translateX(1vh);
    }
    40%{
        transform: rotate(90deg) translateX(0);
    }
    100%{
        transform: rotate(90deg) translateX(0px);
    }
}

@media screen and (max-width:767px) {
.ticket-link img{
    width: 35px;
    height: 40px;
}
}

.nowrap {
    display: inline-block;
    white-space: nowrap;
    padding-right: 1rem;
}

.allwrapper {
    min-height: 100vh; 
    min-height: 120vh; 
    overflow: hidden;
    width: 100%;
}


.bg {
    width: 60vw;
    margin-left: 15vw;
    min-height: 100vh; 
    min-height: 100lvh; 
    position: fixed;
    overflow: hidden;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* background: url("./img/mainv/back2.png") center/cover; */

}

/* .bgimg {
    height: 120vh;
    object-fit: cover;
    opacity: 0.8;
    backface-visibility: hidden;
} */

.wrapper1 {
    padding-left: 5vw;
    padding-right: 5vw;
    
}

.wrapper2 {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding: 10vh 13vw;
    color: var(--normalTextColor);
    text-align: center;
    /* padding-top: 20vh; */
}

.wrapper2-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh;
    /* opacity: 0; */
    z-index: -1;

    background-color: var(--bgcolor);
}

.wrapper2-img {
    width: 100%;
    height: 120vh;
    object-fit: cover;
}

.chikachika-active {
    animation: backchikachika2 2s ease infinite;
}

.chikachika-active2 {
    animation: chikachika2 1s ease infinite;
}

.chikachika-active3 {
    animation: chikachika3 5s ease infinite;
}

@keyframes backchikachika2 {
    0%{
        opacity: 0.1;
    }
    50%{
        opacity: 0.28;
    }
    100%{
        opacity: 0.1;
    }
    
}

@keyframes backchikachika {
    0% {
        opacity: 0.1;
    }

    20% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.2;
    }

    60% {
        opacity: 0.1;
    }

    70% {
        opacity: 0.17;
    }

    90% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.1;
    }

}

@keyframes chikachika {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.3;
    }

    60% {
        opacity: 0.4;
    }

    70% {
        opacity: 0.2;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.2;
    }

}

@keyframes chikachika2 {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0.95;
    }

    50% {
        opacity: 0.98;
    }

    60% {
        opacity: 0.97;
    }

    70% {
        opacity: 0.9;
    }

    90% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.96;
    }
}

@keyframes chikachika3 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }

    15% {
        opacity: 0.2;
    }

    37% {
        opacity: 1;
    }

    38% {
        opacity: 0.2;
    }

    40% {
        opacity: 1;
    }

    42% {
        opacity: 0.2;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.section {
    /* margin: 15vh 0; */
}

.section:last-child {
    margin-bottom: 0;
    padding-bottom: 10vh;
}

/* //////////////////////////////////////////////// */
/* メニュー */
#menuicon{
    position: fixed;
    z-index: 1002;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
}
#menu{
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    background-color: var(--pink2);
    padding: 5vh 0 10vh;
    transform: translateY(-100vh);

    font-size: clamp(1rem,5vw,1.8rem);
    font-family: var(--abril);
    text-align: center;
    color: var(--pink1);
    letter-spacing: 0.15rem;
}
#menu.active{
    transform: translateY(0);
    transition: all 0.2s;
}
#menu ul{
    margin: 2rem auto 4rem;
}

#menu li{
    margin: 1rem;
    transition: all 0.1s;
}
#menu li:hover{
    text-decoration: line-through;
    color: var(--pink3);
}

/*ボタン内側*/

#menuicon #menuicon-area{
    transition: all .4s;/*アニメーションの設定*/
}

#menuicon span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background: var(--pink1);
  	width: 45%;
  }


#menuicon span:nth-of-type(1) {
	top:15px;	
}

#menuicon span:nth-of-type(2) {
	top:23px;
}

#menuicon span:nth-of-type(3) {
	top:31px;
}

#menuicon.active #menuicon-area{
	transform: rotateX(360deg);
}

#menuicon.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
}

#menuicon.active span:nth-of-type(2) {
	opacity: 0;
}

#menuicon.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
}
/* //////////////////////////////////////////////// */
/* タイトル０００ */
.kv-section{
    opacity: 0;
}

/* //////////////////////////////////////////////// */
/* 【また会うためにサヨナラだ！】メッセージ０１０ */
.message010 section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 人生はドッキリだ！最後まで騙されたまま死にたい！ */
.pc-big-serif-wrapper{
    margin-bottom: 20vh;
}
.sp-big-serif-wrapper{
    display: none;
    margin-bottom: 15vh;
}
@media screen and (max-width:767px) {
    .pc-big-serif-wrapper{
        display: none;
    }
.sp-big-serif-wrapper{
    display: block;
}
}
.pc-big-serif-wrapper img,
.sp-big-serif-wrapper img{
    width: 100%;
}
.serif-overwrap{
    overflow: hidden;
}

.upserif {
    transform: translateY(100%);
}

/* テキスト歪み */
.yugami {
    transform: scaleX(1.1);
}

/* テキスト */
.message010-wrap {
    margin-top: 30vh;
    padding: 10vh 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2.7rem;
    transform: scaleX(1.1);
    color: var(--normalTextColor);
}

.uptextwrap {
    display: inline-block;
    line-height: 1.4rem;
    overflow: hidden;
}

.matane {
    transform: scale(1.5);
    line-height: 1.95rem;
    font-weight: 900;
    margin-top: 0.5rem;
}

.uptext {
    display: block;
    /* transform: translateY(200%); */
    white-space: nowrap;

    font-weight: 900;
}

.uptext2 {
    display: block;
    /* transform: translateY(200%); */
    white-space: nowrap;
    margin-left: 0;
    /* font-family: var(--noto-sans); */
}

/* ちょっとずつ大きく */
.uptext-last0 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: clamp(1.4rem, 5vw, 2rem);
    font-weight: 600;
}

.uptext-last1 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
}

.uptext-last2 {
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    line-height: clamp(2.3rem, 5vw, 3.3rem);
    font-weight: 600;
}

.uptext-last3 {
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    line-height: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 600;
}

.uptext-last4 {
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    line-height: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 600;
}

.uptext-last5 {
    font-size: clamp(3.7rem, 4.5vw, 4.1rem);
    line-height: clamp(4.2rem, 5vw, 5rem);
    font-weight: 800;
}

.uptext-last6 {
    font-size: clamp(4rem, 5vw, 5rem);
    line-height: clamp(5rem, 6vw, 6rem);
    text-shadow: 3px 3px 0 #33344b;

    color: var(--lastTextColor);
    font-family: var(--noto-serif);
    font-weight: 900;
}

/* KV差し込み後 */
.text-last{
    font-family: 'Hina Mincho', serif;
    font-size: clamp(1.3rem,5vw,2rem);
    line-height: 2.2;
}
.monologue{
    font-family: 'Hina Mincho', serif;
    line-height: 2.2;
    font-size: clamp(0.8rem,3.5vw,1.5rem);
}

.uptext-pato {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    /* font-family: var(--kaisei-opti); */
    /* color: var(--patoTextColor); */
    font-family: 'Hina Mincho', serif;
    line-height: 2.2;
}

.uptext-highlight {
    text-shadow: 1px 1px 0 #fdff06, -1px -1px 0 #fdff06, 1px -1px 0 #fdff06, -1px 1px 0 #fdff06;
}

.uptext-pato .uptextwrap {
    line-height: clamp(1.8rem, 3vw, 3rem);
}

.uptext-pato.margintop {
    display: inline-block;
    padding-top: clamp(15rem, 10vw, 30rem);
}

.chotto-margintop {
    width: 100%;
    height: clamp(0.2rem, 2vw, 1.4rem);
}

.uptext-pato .uptext {
    display: inline-block;
}

.uptext-pato .nowrap {
    padding: 0;
}

/* //////////////////////////////////////////////// */
/* wrapper2 */
/* 背景 */
.film-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: url("./img/movie_bg6.png");
    background-size: 100%;
    background-repeat: repeat;
    opacity: 0;
    transform: scaleX(1.5);
    z-index: -1;
    color: #040e0e;
}

@media screen and (max-width: 767px) {
    .film-bg {
        background-image: url("./img/movie_bg_sp6.png");
    }
}

/* //////////////////////////////////////////////// */
/* キャスト０２０ */
/* タイトル・スーパーふぃクション ふぉーエヴァー */
h1 {
    font-family: 'Hina Mincho', serif;
}

h1 .textsmall {
    font-size: clamp(0.6rem, 3.5vw, 2rem);
    line-height: clamp(1.5rem, 3.5vw, 2.5rem);
    white-space: nowrap;
}

h1 .textbig {
    display: inline-block;
    margin-top: clamp(1.2rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    transform: scaleY(1.2);
    font-size: clamp(3.5rem, 5vw, 4rem);
    line-height: clamp(4rem, 5vw, 5rem);
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);
}

h1 .nowrap {
    white-space: nowrap;
}

/* メンバーボタン */
.member-btn {
    display: inline-block;
    border-radius: 30px;
    border-left: 3px solid var(--paleblue);
    border-right: 3px solid var(--paleblue);
    color: var(--paleblue);
    font-size: clamp(0.5rem, 1vw, 0.9rem);
    /* padding: 0.2rem 10%; */
    padding: 0.3rem 10%;
    background-color: var(--btnback);
    margin-top: clamp(0.5rem, 5vw, 1rem);
    margin-bottom: 0.5rem;
    letter-spacing: 0.06rem;
    font-weight: bold;

    transition: all 0.2s;
}

.member-btn:hover {
    cursor: pointer;
    transform: translate(2px, 2px);
}

/* 劇場ボタン */
.member-btn.schedule-btn {
    font-size: clamp(0.5rem, 3vw, 0.9rem);
}

/* 演出家 */
.director-namewrap {
    font-size: clamp(0.8rem, 3vw, 1rem);
}

/* フライヤー */
.flyer{
    width: 50%;
    margin: auto;
    margin-top: 10rem;
    position: relative;
    cursor: pointer;
}
.flyer img{
    width: 100%;
}
.flyer-btn{
    content: "";
    position: absolute;
    top: clamp(-40px,10vw,-100px);
    right: clamp(-40px,10vw,-100px);
    width: clamp(80px,10vw,200px);
    height: clamp(80px,10vw,200px);
    background: url("./img/tap.png") center/cover;
}
#flyerview{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    width: 100%;
    z-index: 1000;
    background-color: #3f1f37c6;
    cursor: pointer;
}
#flyerview img{
    height: 100vh;
    object-fit: contain;
}

/* キャスト全体 */
.cast020 {
    text-align: center;
}

/* キャスト見出し */
.title-cast,
/* .title-guest, */
.title-story,
.title-production,
.title-schedule,
.title-ticket,
.title-staff,
.title-goods {
    margin-top: clamp(8rem, 20vw, 15rem);
    /* margin-top: clamp(rem, 20vw, 10rem); */
    /* font-size: clamp(1rem,3vw,2rem); */
    font-size: clamp(2rem, 4vw, 5rem);
    /* font-size: clamp(1.3rem,3vw,2.5rem); */
    font-weight: bold;
    /* color: rgb(83, 22, 94); */
    color: var(--paleblue);
    text-shadow: 2px 2px 0 var(--pink1);
    font-family: var(--abril);
    letter-spacing: 0.2rem;
    transform: scaleX(1.1);
}
@media screen and (max-width:767px) 
{
    .title-cast,
    /* .title-guest, */
    .title-story,
    .title-production,
    .title-schedule,
    .title-ticket,
    .title-staff,
    .title-goods { 
        text-shadow: 1px 1px 0 var(--pink1);
}
}
/* タイトル上の画像の上の余白 */
.title-top{
    margin-top: clamp(rem, 20vw, 10rem);
}

.title-production .nowrap {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* キャストflexbox */
.castwrap {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin: 6vh 0;
    padding-left: 2vw;
    padding-right: 2vw;
}

.guestwrap{
    justify-content: center;
}

.castwrap-small {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.castwrap-small .cast-namewrap {
    font-size: 0.8rem;
}

.castborder {
    display: block;
    width: 60%;
    height: 1px;
    background-color: var(--paleblue);
    margin: auto;
    max-width: 800px;
}

/* キャスト個人 */
.castwrap .castbox,
.castwrap-small .castbox {
    width: calc((100% - 10vw) /5);
    margin-top: clamp(1rem, 5vw, 10vw);
    margin-left: 1vw;
    margin-right: 1vw;
}

/* ゲスト個人 */
.guestwrap .castbox {
    height: 3rem;
}

/* キャスト上　名前ラップ */
.castwrap .cast-namewrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    font-size: 1.2rem;
    white-space: nowrap;
}

/* キャスト上　名前大 */
.castwrap .cast-name {
    text-align: center;
    font-family: var(--zen-kaku);
    letter-spacing: 0.15rem;
}

/* キャスト上　名前英語小 */
.castwrap .cast-namewrap p {
    font-size: 0.7rem;
    letter-spacing: 0;
}

/* キャスト下　名前ラップ */
.castwrap-small .cast-namewrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    font-size: clamp(0.8rem, 2.6vw, 1rem);
    white-space: nowrap;
}

/* キャスト下　名前大 */
.castwrap-small .cast-name {
    text-align: center;
    font-family: var(--zen-kaku);
}

/* キャスト下　名前英語小 */
.castwrap-small .cast-namewrap p {
    font-size: 0.44rem;
    letter-spacing: 0;
}

/* キャスト下　ボタンサイズ */
.castwrap-small .member-btn2 {
    display: inline-block;
    border-radius: 10px;
    font-size: clamp(0.5rem, 1vw, 0.8rem);
    padding: 0.3rem 7%;
    color: var(--paleblue);
    background-color:var(--btnback);
    transform: scaleY(0.9);
    font-weight: bold;
    border-left: 2px solid var(--paleblue);
    border-right: 2px solid var(--paleblue);
    margin-top: clamp(0.5rem, 5vw, 1rem);
    margin-bottom: 0.5rem;
    letter-spacing: 0.06rem;
    cursor: pointer;

    transition: all 0.2s;
}

.castwrap-small .member-btn2:hover {
    transform: translate(2px, 2px);
}

.takahashi {
    /* margin-left: -0.5rem; */
    transform: scaleX(0.8);
}

.message {
    opacity: 0;
    transition: all 1s;
    display: none;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    padding: 5vh 5vw;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    line-height: clamp(1.35rem, 3vw, 1.6rem);
    background-color: #3f1f37c6;
}

.message .inner {
    position: relative;
    display: flex;

    width: fit-content;
    max-width: 800px;
    max-height: 80vh;

    padding-top: clamp(2rem, 5vw, 5rem);
    padding-bottom: clamp(2rem, 5vw, 5rem);
    padding-left: clamp(1rem, 5vw, 3rem);
    padding-right: clamp(1rem, 5vw, 3rem);
    background-color: rgba(255, 255, 255, 0.952);
    color: black;
    border-radius: 20px;

    opacity: 1;
}

.message .innertext {
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    /* padding: 3vw; */
    text-align: justify;

}

.message .innertext .name {
    display: block;
    text-align: center;
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    line-height: clamp(3rem, 2vw, 5rem);
    font-family: var(--zen-kaku);
    white-space: nowrap;
}

.message.active {
    display: flex;
    opacity: 1;
}

.popup_close_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.2rem;
    border-radius: 20px;
    margin: 0.3vw 0.5vw;
    background-color: white;
    color: black;
    border-radius: 50%;
    background-color: #e7e7e7;
    border: 2px solid #33344b;
    cursor: pointer;
}

.popup_close_btn:before {
    content: "";
    position: absolute;
    top: 13px;
    left: 6px;
    width: 15px;
    height: 3px;
    background-color: #33344b;
    transform: rotate(45deg);
    border-radius: 3px;
}

.popup_close_btn:after {
    content: "";
    position: absolute;
    top: 13px;
    left: 6px;
    width: 15px;
    height: 3px;
    border-radius: 3px;
    background-color: #33344b;
    transform: rotate(-45deg);
}

/* cast021(キャスト写真・名前一覧) */
.cast-imgwrap,
.cast-imgwrap2{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: clamp(2rem,5vw,5rem);
    margin-bottom: clamp(2rem,5vw,5rem);
    margin-left: auto;
    margin-right: auto;
}
.cast-imgwrap2{
    display: none;
    flex-direction: column;
}
@media screen and (max-width:767px) {
    .cast-imgwrap{
        display: none;
    }
    .cast-imgwrap2{
        display: flex;
    }
}
.cast-img{
    width: calc(20% - 24px);
    margin: 12px;
    filter: grayscale(1);
    cursor: pointer;
}

@media screen and (max-width:767px) {
    .cast-imgwrap{
        width: 90%;
    }
    .cast-img{
        width: calc(100% / 3 - 12px);
        margin: 6px;
    }
}
.cast-img img{
    width: 100%;
    height: 100%;
}

.cast021-text{
    line-height: 2rem;
    font-size: 1.1rem;
    letter-spacing: 0.1rem;

    margin-bottom: clamp(2rem,5vw,5rem);
}
.cast021-small{
    font-size: 0.85rem;
    line-height: 1.1rem;
}
.cast-sp-inner1,
.cast-sp-inner2,
.cast-sp-inner3{
    display: flex;
    justify-content: center;
}
.cast-sp-inner2{
    flex-wrap: wrap;
}
#cast_slider{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1003;
    background-color: #ff45d1d9;
    height: 120vh;
    width: 100%;
    padding-top: 10vh;
}
#cast_slider.active{
    display: block;
}
#cast_slider img{
    height: 75vh;
}
@media screen and (max-width:767px) {
    #cast_slider{
        padding-top: 15vh;
    }
    #cast_slider img{
        height: initial;
        max-width: 90%;
    }
}
#cast_slider p{
    /* font-family: 'Hina Mincho', serif; */
    font-size: 1.5rem;
    color: var(--pink1);
    letter-spacing: 0.2rem;
    line-height: 3rem;
}
/* //////////////////////////////////////////////// */
/* 以下テキストラップ */
.textwrap {
    padding-top: 2rem;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    line-height: clamp(1.3rem, 3vw, 1.8rem);
}

/* //////////////////////////////////////////////// */
/* ストーリー・プロダクションノート */
#story-wrapper{
    line-height: 1.8;
    text-align: left;
    background-color: var(--pink2);
    padding: 2rem;
    border-radius: 20px;
    font-size: clamp(0.9rem,2vw,1rem);
    margin: 1.5rem auto;
}
@media screen and (max-width:767px) {
#story-wrapper{
    margin-left: 10vw;
    margin-right: 10vw;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
}
.comingsoon {
    margin: 2rem;
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    font-family: var(--noto-sans);
    font-weight: 600;
}

/* //////////////////////////////////////////////// */
/* スケジュール０３０ */

.osaka {
    margin-top: 1rem;
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    font-family: var(--noto-sans);
    font-weight: 600;
}

.tokyo {
    margin-top: 3rem;
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    font-family: var(--noto-sans);
    font-weight: 600;
}

/* 場所 */
.place {
    font-size: clamp(1.5rem, 3.5vw, 2.3rem);
    line-height: clamp(1.7rem, 3.5vw, 2.7rem);

    padding-top: clamp(0rem, 1vw, 1rem);
    padding-bottom: clamp(0rem, 2vw, 0.1rem);

    font-family: var(--kaisei-opti);
    text-shadow: 2px 2px 0 var(--yellow);
}

/* 公演日 */
.play {
    font-size: clamp(0.7rem, 3vw, 0.9rem);
}

/* テキスト左揃え */
.schedule030 .inner {
    text-align: left;
    padding-top: 1rem;
    padding-left: 5vw;
    padding-right: 5vw;

    max-width: 800px;
    margin: auto;
}
@media screen and (max-width:767px) {
    .production,
    .schedule030,
    .ticket040 {
        padding-left: 9vw;
        padding-right: 9vw;
    }
    
    .staff050{
        padding-left: 5vw;
        padding-right: 9vw;
    }
}

/* タイムテーブルラップ */
.timetable {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 1rem auto 0 auto;
}

.timetable .day {
    display: flex;
}

.timetable .time {
    width: 9rem;
}

.timetable .omake {
    text-align: left;
    padding-left: clamp(0.4rem, 2vw, 1.5rem);
    font-size: clamp(0.6rem, 3vw, 0.9rem);
}

/* 公演おまけ */
/* .inner .plan{
    display: inline-block;
    padding-left: clamp(0.4rem,2vw,1.5rem);
    font-size: clamp(0.6rem,3vw,0.9rem);
} */
/* 特典 */
.bonus {
    margin-top: 3vh;
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    line-height: clamp(1rem, 5vw, 1.5rem);
}

/* おみやげ画像 */
.omiyage-wrap{
    display: flex;
    margin: 4rem auto;
    width: fit-content;
}
/* @media screen and (max-width:400px) {
    .omiyage-wrap{
        flex-direction: column;
    }
} */
.omiyage1,
.omiyage2{
    position: relative;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:space-between;
    width: fit-content;
}
.schedule030 .flyer-btn{
    max-width: 120px;
    max-height: 120px;
}
.omiyage1 img,
.omiyage2 img,
.boomerang-img{
    height: clamp(120px,18vw,200px);
}
.omiyage-title {
    color: var(--yellow);
    transform: scaleX(1.2);
    font-weight: bold;
    font-size: clamp(0.9rem,2vw,1.1rem);
    margin-top: clamp(1rem, 3vw, 7rem);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);}
.omiyage-text{
    margin-top: 0.7rem;
    font-size: clamp(0.7rem,1vw,1rem);
}
#omiyage1view,
#omiyage2view{
    width: 100%;
    height: 100vh;
    height: 100lvh;
    background-color: #3f1f37c6;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}
#omiyage1view img,
#omiyage2view img{
    width: 60%;
    max-width: 700px;
    height: auto;
}

/* //////////////////////////////////////////////// */
/* チケット０４０ */
.ticket040 {}

/* 前売り*/
.ticket040 .kinds1,
.boomerang050 .kinds1
{
    color: var(--yellow);
    transform: scaleX(1.2);
    font-weight: bold;
    margin-top: clamp(1rem, 3vw, 7rem);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);}


/* 当日*/
.ticket040 .kinds2 {
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    transform: scaleX(1.2);
    font-weight: bold;
    margin-top: clamp(3rem, 10vw, 10rem);
}

/* 劇団先行販売・一般販売 */
.ticket040 .kinds3 {
    color: var(--paleblue);
    transform: scaleX(1.2);
    font-weight: bold;
    margin-top: clamp(3rem, 10vw, 7rem);
}
/* チケット販売テキスト */
.salenow{
    display: inline-block;
    text-align: center;
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    font-size: clamp(0.7rem,3vw,1.2rem);
    position: relative;
    top: -2rem;
    left: 3rem;
    width: fit-content;
    transform: rotate(-25deg);
    letter-spacing: 0.1rem;
}
.salenow::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    width: 1px;
    transform: rotate(30deg);
    background-color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);}
.salenow::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 1px;
    transform: rotate(-30deg);
    background-color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),1px -1px 0 var(--pink1);
}
/* ボタン */
.ticket-btn img{
    margin-left: 1rem;
}
.ticket-btn{
    display: block;
    transform: scaleX(1);
    background-color: var(--pink1);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    margin: 1rem auto 0;
    width: fit-content;
    transition: 0.2s;
}
.ticket-btn:hover{
    background-color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    color: black;
}
.ippan,
.gekidan{
    display: inline-block;
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    margin-bottom: clamp(0.3rem, 3vw, 1rem);
}



/* チケットの名前 */
.ticket040 .plan {
    font-size: clamp(1.5rem, 3.5vw, 2.3rem);
    line-height: clamp(1.7rem, 3.5vw, 2.7rem);

    margin-top: clamp(2rem, 5vw, 10rem);
    margin-bottom: clamp(0.3rem, 5vw, 0.5rem);

    font-weight: bold;
    font-family: var(--kaisei-opti);
}

/* チケットの名前　余白開けないver */
.ticket040 .nomargin {
    margin-top: clamp(0.3rem, 3vw, 1rem);
}

/* 値段 */
.ticket040 .price {
    font-size: clamp(0.9rem, 2.5vw, 1.9rem);
    line-height: clamp(1.3rem, 3vw, 2.3rem);

    padding-left: clamp(0.4rem, 2vw, 1.5rem);
    white-space: nowrap;
}
/* plan7 */
.hide{
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
.hide.active{
    height: fit-content;
    visibility: visible;
    opacity: 1;
}
.hide-btn{
    background-color: var(--pink1);
    color: white;
    border-radius: 2rem;
    width: fit-content;
    padding: 0.5rem 1.5rem;
    margin: 1rem auto;
    cursor: pointer;
    font-size: clamp(0.9rem,2vw,1rem);
}
#arrow-plan7,
#arrow-story{
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    vertical-align: middle;
}
#arrow-plan7.active,
#arrow-story.active{
    transform: rotate(180deg);
    transition: all 0.2s;
}
.plan7-text{
    /* margin-top: clamp(1.5rem,5vw,2rem); */
    margin-top: 1rem;
}
.plan7-first{
    line-height: clamp(1.7rem, 3vw, 2rem);
}
.nowrap2{
    white-space: nowrap;
}
.plan7-inner{
    text-align: left;
    padding-top: 1rem;
    padding-left: 5vw;
    padding-right: 5vw;
    font-size: clamp(0.7rem, 3vw, 0.9rem);
    line-height: clamp(1.3rem, 5vw, 1.5rem);
    max-width: 800px;
    margin: auto;
    color: var(--pink0);
}
/* 説明 リスト */
.list-text{
    padding-left: 10%;
    padding-right: 10%;
    color: var(--pink0);
    text-align: left;
    font-size: clamp(0.7rem, 2.6vw, 0.9rem);
    line-height: clamp(1rem, 5vw, 1.5rem);
    margin-top: 10px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 基本テキスト */
.ticket040 .text {
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    color: var(--pink0);
}

/* 対象ステージ */
.ticket040 .small {
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    line-height: clamp(1.1rem, 1.8vw, 1.2rem);
}
/* ボーダー */
.ticket-border{
    display: block;
    width: 60%;
    height: 1px;
    background-color: var(--paleblue);
    margin-top: clamp(3rem, 10vw, 10rem);
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.pay{
    display: block;
    color: var(--paleblue);
    transform: scaleX(1.2);
    font-weight: bold;
    margin-top: clamp(1rem, 10vw, 2rem);
    text-align: center;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
}
.list-text.margintop{
    padding-top: clamp(1rem,5vw,2rem);
}
.ribbon{
    display: flex;
    justify-content: center;
    align-items: center;
    width:80%;
    height: clamp(60px,20vw,150px);
    background: url("./img/ribon.png") no-repeat top/contain;
    /* thanks -RIBBON FREAKS- http://ribbon-freaks.com/ */
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(100px, 20vw, 150px);
    font-size: clamp(1rem,5vw,2rem);
    font-weight: bold;
    font-family: var(--kaisei-opti);
    padding-top: clamp(0rem,2vw,1rem);
    text-shadow: 1px 3px 0 rgb(83, 22, 94);
}
.tokuten-title{
display: inline-block;
margin-top: clamp(2rem, 5vw, 3rem);
font-size: 1.5rem;
line-height: 1.8rem;
color: var(--yellow);
text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);
font-family: var(--kaisei-opti);
}
.tokuten2{
    margin-top: clamp(1rem,2vw,1.2rem);
    line-height: clamp(1.7rem, 3vw, 2rem);
}

.star{
    display: block;
    font-size: clamp(0.5rem,2vw,0.9rem);
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink1),1px -1px 0 var(--pink1),-1px -1px 0 var(--pink1),-1px 1px 0 var(--pink1),
    0px 1px 0 var(--pink1),1px 0px 0 var(--pink1),-1px 0px 0 var(--pink1),0px -1px 0 var(--pink1);    margin-top: 1rem;
}

.margintop2{
    margin-top:  clamp(0.5rem,2vw,1rem);
}

.boomerang-img{
    margin: auto;
}
.boomerang-wrap{
width: fit-content;
margin: auto;
}

/* 追加公演！ */
.additional-stage{
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--pink4), 1px -1px 0 var(--pink4), -1px 1px 0 var(--pink4), -1px -1px 0 var(--pink4),
     0px -1px 0 var(--pink4), 0px 1px 0 var(--pink4),1px 0px 0 var(--pink4), -1px 0px 0 var(--pink4);
     font-size: clamp(1rem,2vw,1.2rem);
     line-height: clamp(1rem,2vw,1.2rem);
}
/* //////////////////////////////////////////////// */
/* グッズ０５０ */
.boomerang050{
    padding-left: 9vw;
    padding-right: 9vw;
}
.boomerang050 .kinds1{
    margin-top: 3rem;
}
.boomerang-text{
    margin-top: 1rem;
    line-height: 1.5;
    font-size: clamp(0.8rem,1vw,1rem);
}
.boomerangs{
    display: flex;
    flex-direction: column;
}
.boomerang-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 2rem auto;
}
.boomerang-wrap-img{
    width: 25%;
    min-width: 120px;
}
.boomerang-wrap-img img{
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.boomerang-wrap-texts{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    width: calc(70% - 1.5rem);
    text-align: left;
    margin-left: 1.5rem;
}
.boomerang-wrap-title{
    display: flex;
    align-items: end;
}
.boomerang-wrap-text1{
    font-size: clamp(1.5rem, 3.5vw, 2.3rem);
    line-height: clamp(1.7rem, 3.5vw, 2.7rem);
    font-weight: bold;
    font-family: var(--kaisei-opti);
}
.boomerang-wrap-text2{
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    line-height: clamp(1.3rem, 3vw, 2.3rem);
    margin-left: 0.5rem;
    white-space: nowrap;
    font-family: var(--kaisei-opti);
}
.boomerang-wrap-text3{
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    margin-top: 0.5rem;
    line-height: 1.5;
}
.boomerang-text2{
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    margin: 2rem auto;
    font-weight: bold;
    line-height: 1.5;
}
.boomerang050 .ticket-btn{
    line-height: clamp(1.3rem, 3vw, 1.8rem);
}
@media screen and (max-width:767px) {
.boomerang-wrap{
    width: 95%;
    margin: 1rem auto;
}
.boomerang-wrap-texts{
    margin-left: 0.8rem;
}
}

/* //////////////////////////////////////////////// */
/* スタッフ０５０ */
.staff050 .textwrap {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    /* line-height: clamp(1.3rem,2vw,1.8rem); */
    text-align: left;
    /* width: fit-content; */
    margin: auto;
}

/* フッター */
footer {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}
.footer-info{
    text-align: center;
    line-height: 1.5;
    margin: 1.3rem auto;
}
.footer-iconwrap{
    display: flex;
    align-items: end;
    justify-content: center;
}

.footer-iconwrap img {
    height: 30px;
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* //////////////////////////////////////////////// */
/* レスポンシブ */

@media screen and (max-width:767px) {

    /* ちょっとずつ大きく */
    .uptext-last0 {
        font-size: clamp(20px, 4vw, 30px);
        line-height: clamp(40px, 5vw, 60px);
    }

    .uptext-last1 {
        font-size: clamp(19px, 4vw, 35px);
        line-height: clamp(35px, 7vw, 80px);
    }

    .uptext-last2 {
        font-size: clamp(22px, 4vw, 35px);
        line-height: clamp(35px, 7vw, 80px);
    }

    .uptext-last3 {
        font-size: clamp(25px, 5vw, 40px);
        line-height: clamp(40px, 8vw, 80px);
    }

    .uptext-last4 {
        font-size: clamp(25px, 5vw, 40px);
        line-height: clamp(30px, 8vw, 80px);
    }

    .uptext-last5 {
        font-size: clamp(35px, 8vw, 70px);
        line-height: clamp(60px, 10vw, 80px);
    }

    .uptext-last6 {
        font-size: clamp(45px, 10vw, 90px);
        line-height: clamp(60px, 15vw, 150px);

        text-shadow: 2px 2px 0 #072621;
    }


    /* テキスト歪み */
    .yugami {
        transform: scaleY(1.2);
    }

    /* セリフ */
    .message010-wrap {
        padding-left: 8vw;
        padding-right: 8vw;
        font-size: 0.85rem;
        line-height: 1.25rem;
        /* transform: scaleY(1.2); */
    }

    .wrapper1 {
        padding: 0 3vw;
    }

    .wrapper2 {
        /* padding-top: 10vh; */
        padding-left: 4vw;
        padding-right: 4vw;
    }

    h1 .textbig {
        font-size: clamp(1.8rem, 8vw, 3rem);
        line-height: clamp(2.2rem, 8vw, 4rem);
        /* margin-top: clamp(1.8rem,8vw,3rem); */
        margin-bottom: clamp(1.8rem, 8vw, 3rem);
    }

    .castwrap {
        padding-left: 4vw;
        padding-right: 4vw;
        margin: 3vh 0;
        justify-content: center;
    }

    .castwrap .castbox {
        width: calc(100% /3);
        margin-left: 0;
        margin-right: 0;
    }

    .castwrap-small .castbox {
        width: calc((100% - 10vw) /4);
    }

    /* キャスト名前大 */
    .castwrap .cast-name {
        font-size: clamp(0.9rem, 3vw, 1.2rem);
        letter-spacing: 0.1rem;
    }

    /* キャスト名前英語小 */
    .castwrap .cast-namewrap p {
        font-size: 0.5rem;
        letter-spacing: 0;
    }

    /* キャスト下　ボタン */
    .castwrap-small .member-btn2 {
        display: inline-block;
        border-radius: 10px;
        font-size: 0.5rem;
        padding: 0.2rem 7%;
        margin-top: 0.5rem;
        color: var(--pink4);
        background-color:var(--btnback);
        transform: scaleY(0.9);
        font-weight: 0;
        letter-spacing: 0;
        border: none;
    }

    /* ポップアップコメント */
    .message .inner {
        width: 100%;
    }

    /* ポップアップコメント　クローズボタン */
    .popup_close_btn {
        position: absolute;
        width: 25px;
        height: 25px;
        margin: 6px 6px;
    }

    .popup_close_btn:before {
        top: 9px;
        left: 4px;
        width: 13px;
    }

    .popup_close_btn:after {
        top: 9px;
        left: 4px;
        width: 13px;
    }

    /* チケット値段wrap */
    .ticket040 .plan {
        display: flex;
        flex-direction: column;
    }

    .ticket040 .price {
        padding-top: clamp(0.05rem, 1vw, 0.1rem);
        padding-left: 0;
    }
    .ticket-btn img{
        width: 40px;
        margin-left: 1rem;
    }

    .ribbon{
    text-shadow: 1px 1px 0 rgb(83, 22, 94);
    }
    /* スケジュール */
    .timetable {
        width: 100%;

        margin: 1rem 0 0 0;
    }

    .timetable .omake {
        width: calc(100% - 9rem);
    }

    /* スタッフ */
    .staff050 .textwrap {
        padding-left: 10%;
        padding-right: 10%;
    }

    .footer-iconwrap img {
        height: 20px;
        margin-right: 0.6rem;
        margin-left: 0.6rem;
    }
}