:root{
    --background-color:#FFF1F3;
    --color-darkpink:#D8458C;
    --color-blue:#4AB8FF;
    --color-brown:#461100;
    --color-gray:#C7C7C7;
    --color-lightpink:#DD6BA3;
    --color-walk:#92CF75;
    --color-red: #FF4A4A;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", 'Noto Sans JP', sans-serif; 
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body{
    margin: 0;
    font-feature-settings: 'palt';
    color: var(--color-brown);
}

main{
    background-color: var(--background-color);
}

li {
    list-style-type: none;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}

a {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
}

/*headerのCSS*/
header{
    height: 70px;
    margin: 0;
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: #ffffff;
    top: 0;
    box-shadow: 10px -2px 5px black;
}

header>nav>ul.pcmenu{
    margin: 0;
    display: flex;
    padding: 0;
    position: relative;
}

header>nav>ul.pcmenu>li{
    list-style: none;
    height: 70px;
    line-height: 70px;
    margin-right: 0px;
    color: var(--color-darkpink);
    position: relative;
    width: 140px;
    cursor: pointer;
    font-weight: 590;
}


header>nav>ul.pcmenu>li#logo{
    width: calc( 100% - 200px );
}

header>nav>ul.pcmenu>li img{
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    margin-right: 50px;
}

header ul.pcmenu a{
    display: block;
}

header ul.pcmenu li ul{
    visibility: hidden;
    opacity: 0;
    margin: 0px;
    padding: 0px;
    position: absolute;
    height: 0px;
    width: 180px;
    text-align: center;
    left: -70px;
}


header ul.pcmenu li:hover ul{
    transition: .3s ease-in-out;
    display: block;
    height: fit-content;
    visibility: visible;
    opacity: 1;
    box-shadow: 2px 2px 10px #00000042;
}

header ul.pcmenu li ul li{
    list-style: none;
    height: 45px;
    line-height: 45px;
    font-size: 12px;
    background-color: var(--color-darkpink);
    color: var(--background-color);
    text-align: center;
    transition: .2s;
}

header ul.pcmenu li ul li:hover {
  background-color: #cf2b7b;
}

header ul.pcmenu li ul li a{
    color: #ffffff;
}

header>.menu_bar , .menu_bar_close{
    display: none;
}

header .phone-menu{
    display: none;
}

/* 多言語切り替えボタン */
header .jaen {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

header .jaen .ja,
header .jaen .en {
  padding: 0 10px;
  cursor: pointer;
}

header .jaen .ja.active,
header .jaen .en.active {
  font-weight: bold;
}



@media screen and (max-width: 768px) {
    header .phone-menu{
        display: none;
    }

    header .phone-menu.active{
        display: block;
        margin: 5px auto 0 auto;
        width: 100%;

    }
    
    header .phone-menu li img{
        /*transform: translate(-50%,-50%);*/
        height: 30px;
        line-height: 30px;
    }

    
    
    header ul{
        background-color: var(--color-lightpink);
        width: 100%;
        padding: 0;
        color: #fff;
        float: left;
        margin: 0 auto;
      }
     
      header ul.active{
        display: block;
    }
      
    header  li{
        list-style: none;
      }
      
      header ul ul{
        height: 0;
        padding: 0;
        overflow: hidden;
        transition: .5s;
        border-top: 1px solid #fff;
        background-color: #fff;
        color: var(--color-lightpink);
        margin:0;
      }
      
      header ul li li{
        border-bottom: 1px dotted var(--color-lightpink);
        padding: 10px 0 10px 10px;
        margin-left:15px;
        color: var(--color-lightpink);
      }

      header ul li li a{
        text-decoration: none;
        color: var(--color-lightpink);
      }
      
      header ul:nth-of-type(1) li.active li:last-child{
        border-bottom:1px solid #fff; 
      }
      
      header button{
        position: relative;
        border: none;
        width: 100%;
        background-color: inherit;
        color: #fff;
        cursor: pointer;
        text-align: left;
        padding: 15px 0 15px 20px;
        font-size:1em;
      }
      header button:hover{
        background-color: var(--color-darkpink);
      }
      
      header button::before,
      header button::after{
        content:"";
        position: absolute;
        top: 20px;
        width: 1.5px;
        height: 8px;
        background-color: #fff;
        transition: .5s;
      }
      
      header button::before{
        transform: rotate(-45deg);
        right: 35px;
      }
      
      header button::after{
        transform: rotate(45deg);
        right: 30px;
      }
      
      header li.active button::before{
        transform: rotate(-135deg);
        transition:.5s;
      }
      
      header li.active button::after{
        transform: rotate(135deg);
        transition:.5s;
      }
      
      header ul:nth-of-type(2){ background-color: #357D87; }
      header ul:nth-of-type(2) ul{ background-color: #519FA5; border-top: 1px solid #5D9FA8; }
      header ul:nth-of-type(2) button:hover{ background-color: #1C4B56; }
      header ul:nth-of-type(2) li li{ border-bottom: 1px dotted #73BEBF; }
      header ul:nth-of-type(2) li.active li:last-child{ border-bottom:1px solid #5D9FA8; }
      
      header ul.active{ overflow-y: auto; }

      header .phone-menu .jaen {
        position: absolute;
        top: 10px;
        right: 40px;
      }

      header .jaen .ja,
      header .jaen .en {
        padding: 0 5px;
      }
}

@media screen and (max-width:768px){
    header{
        height: 0vh;
    }

    header.open{
        height: 100vh;
    }

    header .active{
        display: block;
    }

    header .unactive{
        display: none;
    }

    header>div{
        height: 50px;
    }
    /*
    header>.menu_bar>span,.menu_bar_close>span{
        display: block;
        width: 25px;
        border-bottom: var(--color-lightpink) solid 2px;
        line-height: 5px;
        height: 4px;
        margin: 0 auto;
    }

    header>.menu_bar>p.open{
        margin-top: 4px;
    }*/

    header>.menu_bar{
        display: block;
        position: fixed;
        right: 10px;
        width: 50px;
        z-index: 3;
        cursor: pointer;
        width: 50px;
        height:50px;
        border-radius: 5px;

    }

    header>.menu_bar span{
        display: inline-block;
        transition: all .2s;/*アニメーションの設定*/
        position: absolute;
        left: 14px;
        height: 2px;
        border-radius: 5px;
        width: 45%;
        background: var(--color-darkpink);
    }

    header>.menu_bar.unactive span{
        background: var(--color-darkpink);
    }

    
    header>.menu_bar span:nth-of-type(1) {
        top: 13px;
    }
    header>.menu_bar span:nth-of-type(2) {
        top: 19px;
    }
    header>.menu_bar span:nth-of-type(3) {
        top: 25px;
    }

    header>.menu_bar.unactive span:nth-of-type(1) {
        top: 14px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    header>.menu_bar.unactive span:nth-of-type(2) {
        opacity: 0;
    }
    header>.menu_bar.unactive span:nth-of-type(3) {
        top: 26px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }


    header>.menu_bar_close{
        position: absolute;
        margin-top: 10px;
        left: calc( 100% - 40px);
        display: none;
        height: 20px;
        color: var(--color-lightpink);
    }

    header>.menu_bar_close.active{
        display: block;
    }

    header>nav{
        display: none;
    }

    header>nav>ul.pcmenu{
        margin: 0;
        display: block;
        padding: 0;
        position: static;
    }

    header>nav>ul.pcmenu>li{
        margin: 0 auto;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }

    header>nav>ul.pcmenu>li.header-events{
        display: block;
        align-items: center;
    }

    header>nav>ul.pcmenu>li.header-about{
        margin-top: 100px;
        display: block;
    }

    header>nav>ul.pcmenu>li.header-info{
        margin-top: 100px;
    }

    header>nav>ul.pcmenu>li img{
        transform: translate(-50%,-50%);
    }

    header ul.pcmenu li ul{
        display: block;
        text-align: center;
        margin: 0 auto;
        opacity: 1;
    }

    header ul.pcmenu li ul li{
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        list-style: none;
        display: block;
        margin: 0 auto;
        width: 150px;
    }

    header ul.pcmenu li ul li a{
        color: var(--color-lightpink);
        margin: 0  auto;
        text-align: center;
    }




    /*
    header>nav>ul.pcmenu{
        display: none;
    }

    header>nav>ul.smmenu{
        display: block;
    }*/
}

/*footer*/
footer {
    color: white;
    background: var(--color-dark-orange);
    font-size: 14px;
    position: relative;
    font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", 'Noto Sans JP', sans-serif;
  }
  
  footer p {
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: var(--color-lightpink);
  }
  
  footer a {
    text-decoration: none;
    color: #FFF;
  }
  
  footer ul {
    max-width: 1000px;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    list-style-type: none;
    padding: 0;
  }
  
  footer ul.link li {
    display: flex;
    padding: 0 20px 0 0;
    align-items: center;
  }
  
  footer ul.link li:not(:last-child)::after {
    content: "";
    height: 14px;
    width: 1px;
    background: #FFF;
    display: inline-block;
    margin-left: 20px;
  }
  
  footer ul.social-icon li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-orange);
    transition: .3s;
    cursor: pointer;
  }
  
  footer ul.social-icon li:not(:last-child) {
    margin-right: 20px;
  }
  
  footer ul.social-icon li a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
  }
  
  footer ul.social-icon li img {
    width: 25px;
    height: 25px;
    cursor: pointer;
  }
  
  footer ul.social-icon .instagram-icon {
    position: relative;
    overflow: hidden;
  }
  
  footer ul.social-icon .instagram-icon div {
    position: absolute;
    z-index: 2;
    background: var(--color-orange);
    width: 60px;
    height: 60px;
    transition: .3s;
  }
  
  footer ul.social-icon .instagram-icon::before {
    content: "";
    width: 60px;
    height: 60px;
    background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
    position: absolute;
    top: 23px;
    left: -18px;
    z-index: 1;
  }
  
  footer ul.social-icon .instagram-icon::after {
    content: "";
    width: 60px;
    height: 60px;
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    position: absolute;
    z-index: 0;
    top: 0;
  }
  
  footer ul.social-icon .instagram-icon img {
    z-index: 2;
  }

  footer ul.social-icon .twitter-icon {
    background: #55acee;
  }
  
  footer ul.social-icon .facebook-icon {
    background: #3B5998;
  }

  footer ul.social-icon .instagram-icon div {
    opacity: 1;
  }

  footer ul.social-icon .line-icon {
    background: #00B900;
  }
  
  footer ul.social-icon .youtube-icon {
    background: #FF0000;
  }
  
  /* PC */
  @media screen and (min-width: 1040px) {
    footer ul.social-icon .twitter-icon {
      background: #55acee;
    }
    
    footer ul.social-icon .facebook-icon {
      background: #3B5998;
    }
  
    footer ul.social-icon .instagram-icon div {
      opacity: 1;
    }
  
    footer ul.social-icon .line-icon {
      background: #00B900;
    }
    
    footer ul.social-icon .youtube-icon {
      background: #FF0000;
    }
  }