/*

*/




/*base*/
html{
font-size:10px;/*64.5%*/
}

body{
  background: #ffffff;
  color: #000000;
  font-size: 1.4rem;
  line-height:1.5;
  font-family: "Noto Sans JP", sans-serif;
  background-image: url(../img/AdobeStock_hosi.jpeg) ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
}

img{
  max-width: 100%;
  vertical-align:bottom;
}


.hachi-maru-pop-regular {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 400;
  font-style: normal;
  color: #000;
}

/*きらきら星が落ちてくるようなアニメーション
https://qiita.com/nekoneko-wanwan/items/8f8968dfeb459d81cdf1
https://q-az.net/javascript-kirakira-stars-effect/
*/
.star {
  animation: kirakira 15s linear;
  color: rgba(255, 255, 255, 0.434);
  display: inline-block;
  height: 1em;
  line-height: 1em;
  position: fixed;
  top: -1em;
  z-index: 1000;
}

@keyframes kirakira {
  0% {
    transform:translateY(0) rotateY(0);
  }
  100% {
    transform:translateY(calc(100vh + 1em)) rotateY(3600deg);
  }
}


/********　文字を光りながら出現させるためのCSS　*********/
.glowAnime span{opacity: 0;}
/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }
@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}


/*虹色の星
  https://www.ccs1981.jp/blog/css%E3%81%A7%E8%89%B2%E3%82%93%E3%81%AA%E3%82%82%E3%81%AE%E3%82%92%E8%99%B9%E8%89%B2%E3%81%AB%E5%85%89%E3%82%89%E3%81%9B%E3%82%8B/
*/
.glowAnime_star{
  /* アニメーションの長さ */
  animation: gaming 2s linear infinite;
}
@keyframes gaming {
  /* 色の指定 */
  0% { color: Magenta; }
  33% { color: yellow; }
  66% { color: Cyan; }
  100% { color: Magenta; }

}


/*layout
.header,
.main,
.article,
.section,
.footer{
border:solid 1px #894ced;
}
*/

.container{
  margin-left:200px;
}

.header_nav{
  font-size: 18px;
}

.header_nav a{
  padding-left: 20px;
}

.main-visal{
  margin-left:200px;
  position:relative;
  margin-bottom: 50px;
}

.main-visal h1{
  font-size: 50px;
  margin-bottom: 20px;
}

.main-visal h2{
  font-size: 20px;
  margin-bottom: 5px;
}


.sns-links{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
}

.sns-links img {
  width:30px;
  height:auto;
  margin-left: 5px;
}

.article{
  position:relative;
}

.sidebar{
  width:200px;
  min-height:300px;
  position:absolute;
  top:0;
  left:0;
  font-size: 17px;
  line-height:3
}

.sideber-item{
  margin-left: 30px;
}

.samplebox {
  font-size: 80px;
  color: #fff;
  position: absolute;
  top: 300px;
  left: 400px;
}

/* toppage */
.works-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-right: 200px;
  margin-bottom: 100px;
}

.works-item{
  width:calc((100% - 60px) / 4);
  padding:5px;
  border: solid 5px transparent;
}

.works-item.is-active{
  background:rgba(255, 255,0, 0.5);
}

.works-item:hover {
  border: solid 5px #ffffff;
}

.works-item img{
  pointer-events: none;
}

.back-btn {
  padding: 28px 24px;
  background-color: #000;
  color: #388;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50%;
  text-align: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

/*about*/
.main-text{
  padding: 60px 0;
  line-height:2.5
}

.about-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-right: 200px;
  margin-bottom: 100px;
}


.about-item{
  min-width:200px;
  width:calc((100% - 60px) / 4);
  border:solid 2px #ffffff;
  border-radius:10px;
  height: 130px;
  text-align: center;
  font-size: 17px;
  background-color: #ffffff61;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-heading{
  font-size: 30px;
  margin-bottom: 20px;
}

.flow-list{
 margin-bottom: 100px;
}

.flow-item{
  width:250px;
  border:solid 2px #ffffff;
  border-radius:10px;
  height: 130px;
  text-align: center;
  font-size: 17px;
  background-color: #ffffff61;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  /*

  */
}

.flow-item-text{
  margin-left: 300px;
  margin-right: 200px;
  font-size: 17px;
}

.contact-choice{
  display: flex;
}

.contact-textbox{
  width:250px;
  border:solid 2px #ffffff;
  border-radius:10px;
  height: 130px;
  text-align: center;
  font-size: 17px;
  background-color: #ffffff61;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.contact-textbox input{
  margin-left: 50px;
}

.contact-input{
  display: flex;
}

.contact-input textarea{
  background-color: #ffffff61;
  border:solid 2px #ffffff;
  width: 500px;
  margin-left: 100px;
  border-radius:10px;
  height: 130px;
  align-items: center;
  text-align: center;
  font-size: 25px;
}

.contact-input input{
  background-color: #ffffff61;
  border:solid 2px #ffffff;
  width: 500px;
  margin-left: 100px;
  border-radius:10px;
  height: 130px;
  align-items: center;
  text-align: center;
  font-size: 20px;
}



.contact-selection{
  display: flex;
  font-size: 17px;
  align-items: center;

}

.contact-textbox-radio{
  margin-left: 100px;
  text-align: center;
  
}

.contact-textbox-radio label{
  margin-left: 60px;
  font-size: 20px;
}

.contact-button{
  border: solid 1px #000;
  background-color: #000;
  margin: 20px;
  padding: 20px 70px;
  color:#ffffff;
  font-size: 17px;
  margin-bottom: 100px;
}