@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap');

/*全ページ共通*/

html.spacebook {
  font-size: .73vw;
}

body {
  background-color: #fff;
  width: 100%;
  color: #000;
  margin: 0;/* bodyの余白を削除 */
  padding: 0;/* bodyの余白を削除 */
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

img {
  vertical-align: bottom;
}

h1 {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 2.6rem;
}

h2 {
  font-size: 2.4rem;
}

/*全ページ共通終わり*/

.toppage{
  background:url(character_image/blue_back2.png)no-repeat top/cover;
  width:100%;
  height:auto;
}

.toppage h2{
  font-size:4rem;
  padding-top: 10rem;
  text-align: center;
}

main{
  position: relative;
  width:100%;
  height:auto;
  padding-bottom: 6rem;
  background: url(character_image/pink_back.png) center bottom / contain no-repeat;
}

main img{
position:relative;
}

.blue_spacis {
  position:absolute;
  left:78%;
  top: 32rem;
  width: 13%;
  aspect-ratio: 197/410;
  }

.cherry_fllowtumn {
  position: absolute;
  left: 9rem;
  bottom: 39rem;
  width: 21rem;
  aspect-ratio: 1 / 1;
}

 .cherry_fllowtumn_zorn{
    position:relative;
    }
  .cherry_fllowtumn_zorn{
      position:absolute;
      left:3.5rem;
      top:62.5rem;
      }

/*概要テーブル*/
.table_x {
  border-collapse: collapse;
  width: 65%; /* 表を横に伸ばす */
  margin-top: 8rem;
    table-layout: fixed; /* セルの幅を固定 */
   margin-left: 5%;
   font-size: 1.64rem;
}

td{
  border: 1px solid #ddd;
  padding: .8rem;
  word-wrap: break-word; /* テキストを折り返す */
}

.x td.q {
  width: 30%; /* 質問列の幅を設定 */
  text-align: center;
  background-color:aliceblue;
  font-weight: bold;
  border: 1px solid skyblue;
}

.x td.a {
  width: 70%; /* 答え列の幅を設定 */
  background-color:white;
  border: 1px solid skyblue;
}

.table_y {
  border-collapse: collapse;
  width: 65%; /* 表を横に伸ばす */
  margin-top: 10rem;
  table-layout: fixed; /* セルの幅を固定 */
  margin-left: auto; /* 左側のマージンを自動に設定 */
  margin-right: 5%; /* 右側のマージンを0に設定 */
  font-size: 1.64rem;
}

.y td.q {
  width: 30%; /* 質問列の幅を設定 */
  text-align: center;
  background-color:papayawhip;
  font-weight: bold;
  border: 1px solid pink;
}

.y td.a {
  width: 70%; /* 答え列の幅を設定 */
  background-color:white;
  border: 1px solid pink;
}
  


.footer {
  padding: 1.4rem 1rem 2rem;
  text-align: center;
  margin-top: 4rem; /* アプリ開発とメディア運営の間に余白を追加 */
}


.footer-separator {
  border: none;
  border-top: 2px solid white;
  margin: 2rem 0;
}

footer p {
  color: black;
  text-align: center;
  margin: 0;
}

.footer-line {
  border-top: 1px solid black;
}


/*リンクメニュー*/

.story {
  text-align: center; /* 中央揃え */
  margin-top: 2.5rem;
}

.story_tab{
  padding-top: 6rem;
}

.story-item {
  margin: 2rem 0;
}

.story a {
  background-color:#95D1C6;
  border: 3px solid white;
  color: white;
  border-radius: 5rem;
  width: 70%;
  display: inline-block;
  padding-top: 1.9rem;
  padding-bottom:2.2rem;
  font-size: 2.4rem;
  text-align: center;
  -webkit-box-shadow:5px 5px 10px 1px gray;
          box-shadow:5px 5px 10px 1px gray;
}

/*x部分*/



.logo-link_blue_spacis {
  display: block;
  position: absolute;
  right: 9%;
  top: 28rem;
  width: 5rem; /* 画像の幅を指定 */
  height: 5rem; /* 画像の高さを指定 */
  background: url(character_image/logo-black.png) no-repeat;
  background-size: contain; /* 画像のサイズを要素に合わせて調整 */
}

.logo-link_cherry_fllowtumn {
  display: block;
  position: absolute;
  left: 19%;
  top: 90rem;
  width: 5rem; /* 画像の幅を指定 */
  height: 5rem; /* 画像の高さを指定 */
  background: url(character_image/logo-black.png) no-repeat;
  background-size: contain; /* 画像のサイズを要素に合わせて調整 */ 
}


@media screen and (max-width: 640px) {
  html.spacebook {
    font-size: 2.4vw;
  }

  main {
    padding-bottom: 3rem;
  }

  .toppage h2 {
    font-size: 2rem;
    padding-top: 7rem;
    text-align: center;
}

.table_x {
  margin-top: 4rem;
  font-size: .7rem;
}

td{
  padding: .4rem;
}

.blue_spacis {
  top: 19rem;
  width: 19%;
}

.logo-link_blue_spacis {
  width: 3rem;
  top: 17rem;
  right: 4%;
  height: 2.6rem;
}

.table_y {
  margin-top: 5rem;
  font-size: .7rem;
}

.cherry_fllowtumn {
  left: 2rem;
  bottom: 15rem;
  width: 9rem;
}

.logo-link_cherry_fllowtumn {
  top: 47rem;
  width: 3rem;
  height: 2.6rem;
}

.story_tab {
  padding-top: 0;
}

.story a {
  padding-top: .7rem;
  padding-bottom: .7rem;
  font-size: 1.2rem;
}

}