@charset "utf-8";
    /*全ページ共通*/

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

body {
  background-color: black;
  width: 100%;
  color: white;
  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;
}

.sp_none {
  display: block;
}

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

        .philosophy_text {
          display: block;
          width: 100%;
          max-width: 700px;
          aspect-ratio: 700 / 163;
          margin: 8rem auto 5rem;

        }

        .philosophy_message h1{
          text-align: center;
        }
        .philosophy_message h2{
          color:white;
          text-align: center;
          padding-top: 100px;
          font-size: 30px;
        }


        /*ミッション*/
        .mvv p img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center 90%;
        }
        .mvv .text {
          font-size: 12px;
          line-height: 1.78;
        }
        .mvv {
          margin-top: 70px;
          margin-bottom: 50px;
        }
      

        .philosophy_top{
          max-width: 100%;
          margin:0 auto;
          background-color: black;
          margin-bottom: 400px;
        }

        .mvv h2{
          font-size:2.5rem;
          text-align: center;
        }

        .mvv h3{
          font-size:3rem;
          text-align: center;
        }

        .mvv .text1{
          font-size: 2rem;
          margin-left: 1.5rem;
          margin-right: 2rem;
        }

        .mvv{
          display: grid;
          grid-template-rows: 35rem 12.5rem 35rem 7.5rem 20rem;
          grid-template-columns: 50% 50%;
        }
          
          .set1 {
          grid-row: 1/2;
          grid-column: 1/2;
          align-self: center;
          }
          
          .photo1 {
             grid-row: 1/2;
             grid-column: 2/3;
          }
          
          .set2 {
            grid-row: 3/4;
            grid-column: 2/3;
            align-self: center;
            }
            
            .photo2 {
               grid-row: 3/4;
               grid-column: 1/2;
            }

            .mvv .text2{
              font-size: 2rem;
              margin-left: 3rem;
              margin-right: .5rem;
            }
          

            .set3 {
              grid-row: 5/6;
              grid-column: 1/3;
              align-self: center;
              padding-bottom: 8rem;
              }

              .mvv .text3{
                font-size: 2rem;
                text-align: center;
              }
                
        /*mvv*/

        .set3::before{
          content: "";
          position:fixed;
          left:0;
          top:15rem;
          width: 100%;
          height: 100%;
          background:url(philosophy_image/value.jpg)no-repeat center/cover;
          z-index: -1;
          pointer-events: none;
          }

          /*トップメッセージ*/

          .top_message{
            background-color: black;
          }
          .message_area{
            display: grid;
            grid-template-rows: 60rem;
            grid-template-columns: 45% 55%;
            padding-top: 8rem;
          }
          .message_area .ceo {
            grid-row: 1/2;
            grid-column: 1/2;
            padding-top: .1rem;
            text-align: center;
            }

            .ceo img{
              width: auto;
              max-width: 70%;
              height: auto;
              padding-top: 2.5rem;
            }

            .message_area .text4{
            grid-row: 1/2;
            grid-column: 2/3;
          }

          .message h2{
            text-align: center;
            
          }

          .message{
            margin-right: 15%;
            margin-left: 5%;
          }

          .text4{
            font-size: 1.6rem;
          }

          .message4{
            margin-top: 1rem;
          }

          .sign{
            margin-top: 3rem;
            text-align: right;
            font-size: 2rem;
          }


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

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

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

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

/*リンクメニュー*/



.link {
  background-color: black;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 5rem;
  text-align: center; /* 中央揃え */
}

.link_tab{
  padding-top: 12rem;
}

.link-item {
  margin: 0;
}



/*アイテム1*/



/* リンクアイテムの基本スタイル */
.link-item_1 a,
.link-item_2 a,
.link-item_3 a {
  background-color: black;
  border: 3px solid grey;
  color: grey;
  border-radius: 5rem;
  width: 70%;
  display: inline-block;
  padding: 2rem;
  font-size: 2.4rem;
  text-align: center;
  text-decoration: none; /* テキストの下線を削除 */
  transition: color 0.3s ease, border 0.3s ease; /* 枠線と色の変化をスムーズに */
  position: relative; /* 擬似要素のために必要 */
  margin: 2rem 0;
}

/*ホバー時のスタイル */
.link-item_1 a:hover,
.link-item_2 a:hover,
.link-item_3 a:hover {
  color: transparent; /* ホバー時に文字色を透明に設定 */
}

/* ホバー時の擬似要素スタイル */
.link-item_1 a::before {
  content: "";
  position: absolute;
  top: -.3rem;
  left: -.3rem;
  right: -.3rem;
  bottom: -.3rem;
  border-radius: 5rem;/* 枠線を丸くする */
  border: .3rem solid transparent;  /* 初期状態の枠線を透明に設定 */
  background: linear-gradient(to right, #2638ff, #6f78ff, #27bcee, #6f78ff, #2638ff);  /* グラデーションを適用 */
  -webkit-mask: 
      linear-gradient(#fff 0 0) padding-box, 
      linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  transition: opacity 0.3s ease;  /* 枠線の変化をスムーズに */
  opacity: 0;   /* 初期状態では透明に設定 */
}

/* ホバー時の擬似要素表示 */
.link-item_1 a:hover::before,
.link-item_2 a:hover::before,
.link-item_3 a:hover::before {
  opacity: 1;  /* ホバー時に表示 */
}

/* ホバー時の擬似要素スタイル */ 
.link-item_1 a::before,
.link-item_2 a::before,
.link-item_3 a::before {
  content: "";
  position: absolute;
  top: -.3rem;
  left: -.3rem;
  right: -.3rem;
  bottom: -.3rem;
  border-radius: 5rem; /* 枠線を丸くする */
  border: .3rem solid transparent;  /* 初期状態の枠線を透明に設定 */
  -webkit-mask: 
      linear-gradient(#fff 0 0) padding-box, 
      linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  transition: opacity 0.3s ease;   /* 枠線の変化をスムーズに */
  opacity: 0;  /* 初期状態では透明に設定 */
}

/* ホバー時の擬似要素スタイル */ 
.link-item_1 a::before {
  background: linear-gradient(to right, #2638ff, #6f78ff, #27bcee, #6f78ff, #2638ff); /* グラデーションを適用 */
}
.link-item_2 a::before {
  background: linear-gradient(to right, #fe00dc, #ff9748,#ff9748, #fe00dc);  /* グラデーションを適用 */
}
.link-item_3 a::before {
  background: linear-gradient(to right, #26ffba, #6fffab,#6fffab,#26ffba); /* グラデーションを適用 */
}

/* ホバー時のテキストグラデーション */

.link-item_1 a:hover .service-text,
.link-item_1 a:hover .note {
  background: linear-gradient(to right, #2638ff, #6f78ff, #27bcee, #6f78ff, #2638ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ホバー時のテキストグラデーション */

.link-item_2 a:hover .service-text,
.link-item_2 a:hover .note {
  background: linear-gradient(to right, #fe00dc, #ff9748,#ff9748, #fe00dc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}


/* アイテム2終わり/アイテム3始まり */
 ホバー時のテキストグラデーション 
.link-item_3 a:hover .service-text,
.link-item_3 a:hover .note {
  background: linear-gradient(to right, #26ffba, #6fffab,#6fffab,#26ffba);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/*アイテム3終わり*/










.philosophy_message h2{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right,  #000000, #272727, #000000);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
}



.set1 h2{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #fbff00, #fe00dc, #fc45a4);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }
  

.set1 h3{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #ff9748, #fe00dc, #fc45a4);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }

.text1 p,
.text2 p,
.text3 p{
  color: #fff; 
}

.set2 h2{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #a463ff, #26fe00, #fc9a45);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }

.set2 h3 {
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #a463ff, #26fe00, #fc9a45);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }


.set3 h2 {
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #ffffff, #05208f, #ffffff);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }
  .set3 h3{
    color: white;
  }
  

.set3 h3{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #ffffff, #05208f, #ffffff);
  transition: left 0.5s ease;
  
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  
  color: transparent;
  
  }

.message h2{
  animation: AnimationTitle 5s ease infinite;
  background: linear-gradient(to right, #fbff00, #fe00dc, #fc45a4);
  transition: left 0.5s ease;

  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
}

footer {
  font-size: 1.6rem;
}

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

  html.spacebook {
    font-size: 2vw;
  }
  
  .sp_none {
    display: none;
  }

  .mvv,
  .message_area {
    display: block;
  }

  .set1,
  .set2 {
    margin-bottom: 9rem;
  }

  .message {
    margin-inline: 8%;
  }

  .text4 {
    font-size: 1.8rem;
  }


/* ホバー時の擬似要素スタイル */ 
.link-item_1 a::before,
.link-item_2 a::before,
.link-item_3 a::before {
  opacity: 1;
}

/* ホバー時の擬似要素スタイル */ 
.link-item_1 a::before {
  background: linear-gradient(to right, #2638ff, #6f78ff, #27bcee, #6f78ff, #2638ff); /* グラデーションを適用 */
}
.link-item_2 a::before {
  background: linear-gradient(to right, #fe00dc, #ff9748,#ff9748, #fe00dc);  /* グラデーションを適用 */
}
.link-item_3 a::before {
  background: linear-gradient(to right, #26ffba, #6fffab,#6fffab,#26ffba); /* グラデーションを適用 */
}

/* ホバー時のテキストグラデーション */

.link-item_1 a .service-text,
.link-item_1 a .note {
  background: linear-gradient(to right, #2638ff, #6f78ff, #27bcee, #6f78ff, #2638ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ホバー時のテキストグラデーション */

.link-item_2 a .service-text,
.link-item_2 a .note {
  background: linear-gradient(to right, #fe00dc, #ff9748,#ff9748, #fe00dc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}


/* アイテム2終わり/アイテム3始まり */
.link-item_3 a .service-text,
.link-item_3 a .note {
  background: linear-gradient(to right, #26ffba, #6fffab,#6fffab,#26ffba);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

  
}