@charset "utf-8";
@import "reset.css";
@import "cmn-options.css";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

#bodywrap {
background-image:url(../img/nicopuchi_bg.png);
position: relative;
z-index: 0;
}

#wrapper_head {
  width: 100%;
  max-width: 740px;
  height: auto;
  margin: 0 auto;
}

#wrapper{
  margin: 0 auto;
  width: 100%;
  max-width: 740px;
  }

#wrapper::before {
  content:"";
  display:block;
  position:fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 740px;
  height:100vh;
  --y-0: 11%;
  --c-0: hsla(221, 100%, 95%, 0.66);
  --x-0: 91%;
  --x-1: 66%;
  --c-1: hsla(348, 100%, 98%, 1);
  --y-1: 37%;
  --c-2: hsla(221, 100%, 91%, 0.76);
  --x-2: 6%;
  --y-2: 8%;
  --c-3: hsla(321, 100%, 88%, 0.41);
  --x-3: 36%;
  --y-3: 87%;
  ;
  background-color: rgb(255, 255, 255);
  background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
  animation: hero-gradient-animation 5s linear infinite alternate-reverse;
  background-blend-mode: normal, normal, normal, normal;
  filter: drop-shadow(0px 0px 10px #aaa);
  }

  @keyframes hero-gradient-animation {
    0% {
        --y-0: 11%;
        --c-0: hsla(348, 100%, 98%, 0.66);
        --x-0: 91%;
        --s-start-0: 4.038772213247173%;
        --s-end-0: 37.2265767974114%;
        --s-start-1: 0%;
        --s-end-1: 63.33640956108327%;
        --x-1: 66%;
        --c-1: hsla(221, 100%, 95%, 1);
        --y-1: 37%;
        --c-2: hsla(345, 100%, 91%, 0.76);
        --x-2: 6%;
        --s-start-2: 12.107536057085522%;
        --s-end-2: 40.984604538912976%;
        --y-2: 8%;
        --c-3: hsla(338, 100%, 88%, 0.41);
        --x-3: 36%;
        --s-start-3: 23.250614245352374%;
        --s-end-3: 55.04592605907191%;
        --y-3: 87%;
    }

    100% {
        --y-0: 79%;
        --c-0: hsla(348, 100%, 98%, 0.66);
        --x-0: 88%;
        --s-start-0: 0;
        --s-end-0: 52;
        --s-start-1: 0;
        --s-end-1: 52;
        --x-1: 4%;
        --c-1: hsla(221, 100%, 95%, 1);
        --y-1: 12%;
        --c-2: hsla(345, 100%, 91%, 0.76);
        --x-2: 27%;
        --s-start-2: 0;
        --s-end-2: 52;
        --y-2: 100%;
        --c-3: hsla(338, 100%, 88%, 0.41);
        --x-3: 79%;
        --s-start-3: 0;
        --s-end-3: 52;
        --y-3: 36%;
    }
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 11%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(221, 100%, 95%, 0.66)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 91%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 4.038772213247173%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 37.2265767974114%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 63.33640956108327%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 66%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(221, 100%, 95%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 37%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(221, 100%, 95%, 0.76)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 6%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 12.107536057085522%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40.984604538912976%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(321, 100%, 88%, 0.41)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 36%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 23.250614245352374%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55.04592605907191%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 87%
}




.kiwi{font-family: 'Kiwi Maru', serif;}



a:hover{opacity: 0.5;}

.txt {
  font-size: 1.5em;
  line-height: 1.5;
}


/* ヘッダー */

#header{
  position:relative;
  /*
  background: url(../img/mv_back.png) 0 0 no-repeat;
  */
  background-size: 100% auto;
  width: 100%;
  padding-top:127%;
  overflow: hidden;
  }

  .font {
    font-size: 1.2em;
  }


.font5 {
  font-size: 1.6em;
}

.font6 {
    font-size: 1em;
    color: #595757
  }

.midashi {
  font-size: 2.1em;
}


#section03 h4 {
  width: 95%;
 padding-top: 8%;
 padding-left: 5%;
}

span {
vertical-align: super; /*テキストを上付きに*/
font-size: 0.55em; /*テキストを小さく*/
}


.sirushi{text-indent: -40px;padding-left: 40px;}

.sirushi::before{
  content: "";/*何も入れない*/
  display: inline-block;
  width: 30px;/*画像の幅*/
  height: 30px;/*画像の高さ*/
  background-image: url(../img/tiara.png);
  background-size: contain;
  vertical-align: middle;
background-repeat: no-repeat;margin-right: 10px;}



/* TOPボタン */
  .pagetop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
	z-index:999;
}
.pagetop a {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}

.dspflex{display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 5%;gap:20px;}
.clm_rv{flex-direction:row-reverse;}




/* フッター
*******************************/
#footer {
  border-top: solid 1px #000;
  text-align: center;
  padding: 10px 0;
  width: 100%;
  margin-top: 5px;
}

#footer p {
  width: 100%;
  margin: 0 auto;
}

ul.example li {
background:#eeeeee;
text-align: center;	
width: 30%;
margin-left:2.2%;
display: inline-block;
}

ul.example li a{
color: #333333;
display: block;
text-decoration:none;
padding:5% 4% 5% 4%;
}



.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  background-color: #ffffff;
}
.youtube-container iframe {
  position: absolute;
  top: 0%;
  bottom:0%;
  left: 0%;
  width: 100%;
  height: 100%;
}


.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}