/*
Theme Name :PyorosTheme221123
Theme URL :https://pyoros-st.com
Description :StudioPyorosのWEBサイトのテーマ
Author:NakaoAkira
Version :1.0
*/


/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}
li {list-style-type: none;}
ul {padding: 0;}
html {
  font-family: 'Noto Sans JP', sans-serif;
color: #333;
font-size: 62.5%;
}
/* ページ全体として、Googleフォントの基本指定 */
/* ブラウザの基本フォントサイズが16px。それの62.5%とすることで 1rem が10pxになる */

body {
font-size: 1.6rem;
}
/* デフォルトのフォントサイズを16pxにしている */


/* body_bg へのフェードイン設定開始 */
.fadeIn {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:backwards;/*2で解説*/
animation-duration:2s;/*3で解説*/
animation-iteration-count:1;/*4で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0.5s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* 終了 */


p{
  text-align: justify;
  text-justify: inter-ideograph;
}
/* p要素はすべて両端揃え */


/* テキストスタイルの設定 */
.fontStyle_big {
font-weight: 500;
font-size: 3.8rem;
}

.midashi2_style {
font-weight: 500;
font-size: 2.4rem;
text-align: left;
color: #333;
padding-bottom: 5px;
}

/* bodyに設定するBG画像の設定 */

.bl_bodyBg {
background-image:url(./image/bg_03.png);
animation: bgiLoop 60s linear infinite;
background-position:
          5% 15%,/* 猫 */
          10% 50%,/* 箱 */
          88% 28%,/* 動画 */
          80% 3%; /* 太陽 */
}

@keyframes bgiLoop {
    0% { background-position: 0 0;}
  100% { background-position: -300px 500px;}
}

/* ファーストビューのflexやdisplayを設定。位置に関すること */
.ly_topFirstView {
margin-bottom: 48px;
}

.topFirstView {
background-image: url(./image/nakao_01.png);
background-repeat: no-repeat;
background-size:50%;
background-position: 100% 40%;
background-color:rgba(255,255,255,0.3);
background-blend-mode:lighten;
}

.topFirstView_line {
  display: block;
}
/* topFirstView　のスマホレイアウト。背景画像と、見出しパディングの設定 */

@media screen and (max-width: 600px) {
.topFirstView > h1 > span:nth-child(2) {
  padding-bottom: 100px;
}
.topFirstView {
  background-size:50%;
}
}



.ly_topList {
display: flex;
flex-wrap: wrap;
}


.topList {
}

.topList > li {
  padding-left: 3.5%;
  padding-right: 3.5%;
  border-radius: 9px;
  background-color: rgba(240,246,252,0.7);
  border: 1px solid #707070;
  font-size: 1.8rem;
  margin-right: 12px;
  margin-bottom: 10px;
  padding-top: 0px;
  padding-bottom: 3px;
}

.topListHash > li {
font-weight: 500;
font-size: 1.8rem;
text-align: left;
color: #444;

}


.bl_topCard {
  background-color:rgba(234,234,234,0.8);
  padding-right: 14px;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 16px;
  margin-bottom: 34px;
  border-radius: 17px;
}

/* bl_topCard のアニメーション */

.fadeIn02 {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:backwards;/*2で解説*/
animation-duration:1.8s;/*3で解説*/
animation-iteration-count:1;/*4で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 1.4s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn03 {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:backwards;/*2で解説*/
animation-duration:1.8s;/*3で解説*/
animation-iteration-count:1;/*4で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 2.1s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}