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


#wrap {
width: 100%;
height: auto;
position: relative;
line-height: 1.5;
color: #754c24;
width: 100%;
font-family: "tk-takumi-shokei-font", sans-serif;
font-weight: 200;
font-style: normal;

}

#header{
position: relative;
  border-left: solid 22px #359dd1;
  border-right: solid 22px #359dd1;
}

#header img{
    width: 100%;
    display: block;
  }

  .logo {    
position: absolute;
    width: 40%;
    top: 0%;
    left: 30%;
}

.mail a {
    text-align: center;
    background: #fff100;
    padding: 1.5em 0;
    transition: 0.3s;
    text-decoration: none;
    display: block;
    color: #ff0000;


}

.mail h3{
  font-family: ab-showamaru, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(20px + 2 * (100vw - 320px)/1600);
}

.mail span{
    font-size:calc(20px + 12 * (100vw - 320px)/1600)
}

#wrap a:hover {
background-color:#754c24;
  color: #fffeee;
opacity: 1;

}


 .mail img {
  width: 100%;
  height: auto;
  max-width: 30px;
  max-height: 20px;
  margin-top: 4px;
  margin-right  : 10px;
  
}


/* //////////////////////// */

#main {
  height: auto;
  z-index: 10;
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
  border-left: solid 22px #359dd1;
  border-right: solid 22px #359dd1;
}

.container{
      max-width: 1020px; 
      margin: 0 auto;
      display: block;
      padding: 6.25rem 1rem;
}

#main .container h2{
  font-family: ab-showamaru, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 3.125rem;
  line-height: 0;
  font-size: calc(32px + 24 * (100vw - 320px)/1600);


}

.giza img{
  width: 100%;
  display: block;  
}


/* //////////////////////// */

#description{
      background:#fffeee  ;
      position: relative;
}

#description p{
  font-size: 2rem;
  line-height: 1.75;
  font-size: calc(18px + 14 * (100vw - 320px)/1600);
}

#description .container::before{
    position: absolute;
    content: "";
    display: inline-block;
    width: 1000px;
    height: 125px;
        max-width: 95%;
    background-repeat: no-repeat;
    background-image: url(../images/illust_top.png);
    background-position: center;
    background-size: contain;
    top: 10%;
    right: 0;
    left: 0;
    margin: auto;
}

#description .container::after{
    position: absolute;
    content: "";
    display: inline-block;
    width: 1000px;
    height: 125px;
    max-width: 95%;
    background-image: url(../images/illust_bottom.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 10%;
    right: 0;
    left: 0;
    margin: auto;
}


/* ////////////////// */

#personality{
    background-image: repeating-linear-gradient(180deg, #359dd14d, #359dd14d 9px, #83ceea4d 10px, #83ceea4d 32px);
}

.personality_content{
  position: relative;
  background-size: 100% 100%;
    padding: 1.5rem;
    background: #fffeee;
    border-radius: 30px;
    border: solid #754c24 16px;
}

.personality_content::before{
    position: absolute;
    content: "";
    display: inline-block;
    width: 220px;
    height: 70px;
    max-width: 90%;
    background-image: url(../images/illust_candy.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    top: -15%;
    left: -10%;

    animation-name: katakata;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
}
.personality_content::after{
  
    position: absolute;
    content: "";
    display: inline-block;
    width: 220px;
    height: 70px;
    max-width: 100%;
    background-image: url(../images/illust_chips.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -15%;
    right: -7%;

     animation-name: katakata;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes katakata {
  0% {
    transform: translateY(-2px) rotate(6deg);
  }

  10% {
      transform: translate(0) rotate(0deg);
  }
  20% {
      transform: translate(0) rotate(-6deg);
  }
  30% {
      transform: translateY(-2px) rotate(0deg);
  }
  40% {
      transform: translateY(-2px) rotate(6deg);
  }
  50% {
      transform: translate(2px) rotate(-2deg);
  }
  60% {
      transform: translateY(2px) rotate(0deg);
  }
  70% {
      transform: translate(0) rotate(6deg);
  }
  80% {
      transform: translate(2px) rotate(-2deg);
  }
  90% {
      transform: translate(0) rotate(0deg);
  }
  100% {
      transform: translateY(-2px) rotate(6deg);
  }
}

.personality_box{
  display: flex;
  justify-content: space-between;
}

.personality_block img{
  width: 90%;
}








/* //////////////////////// */

#youtube{
  background: #754c24;
}

#youtube h2{
  color: #fffeee;
  
}

.item-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}


.item-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* //////////////////////// */

a {
transition: 0.3s;
}

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}

.sp {
display: none;
}

.pc {
  display: block;
  }

hr {
border-top: 0px;
}

/*  ============================= */

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

  .sp {
  display: block;
  }

  .pc {
  display: none;
  }

  /* //////////////////////// */



#header, #main{
    border-left: solid 10px #359dd1;
    border-right: solid 10px #359dd1;
}

.logo{
    width: 70%;
    top: 18%;
    left: 15%;
}


/* //////////////////////// */

.mail a {
      padding: 0.8rem 0;
}

/* //////////////////////// */


#main {
  width: 100%;
}

.container{
    padding: 3.25rem 1rem;
}

#main .container h2{
  margin-bottom: 2rem;
}

/* //////////////////////// */

#description .container::before{
  top: -6%;
}

 #description .container::after{
  bottom: -6%;
 }

/* //////////////////////// */


.personality {
width: 100%;
max-width: none;
}


.personality_block{
    margin-bottom: 1rem;
}


.personality_content{
      border: solid #754c24 8px;
}



.personality_content::before{
    width: 100px;
    height: 55px;
        top: -3%;
        left: -5%;
}

.personality_content::after{
    width: 110px;
    height: 62px;
    bottom: -4%;
    right: 0%;
}

}
/* //////////////////////// */

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

  .personality_box{
    display: block;
  }


.personality_content::after{
    width: 110px;
    height: 62px;
    bottom: -4%;
    right: 0%;
}

.personality_box{
  display: block;
}


}