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

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

body {
  background-color: black;
  width: 100%;
  color: white;
  margin: 0;/* bodyの余白を削除 */
  padding-top: 20px;/* 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: 10px;
    margin-right: 10px;
        }

        .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{

  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{

  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{

  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{

  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 {

  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 {

  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{

  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{

  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;
}

  
}





*{box-sizing:border-box}
body{margin:0}
a{text-decoration:none}
img{vertical-align:bottom}

html{scroll-behavior:smooth}
#footer{scroll-margin-top:60px}

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:#000;
  color:#fff;
}

.site-header-inner{
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand-logo-img{
  height:20px;
  display:block;
}

.global-nav a{
  font-size:10px;
  color:#f5f5f5;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media screen and (min-width:769px){
  .site-header-inner{
    padding:15px 35px;
  }
  .brand-logo-img{
    height:24px;
  }
  .global-nav a{
    font-size:15px;
  }
}

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

  .link_tab{
    padding-top: 4rem; /* ← 12rem → 4rem くらいが妥当 */
  }

}


.set1 h2,
.set1 h3{
  background: linear-gradient(to right, #ff9d00, #feba00,#ff0c9e, #fc45a4);
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


.set2 h2,
.set2 h3{
  background: linear-gradient(to right, #a463ff, #26fe00, #fc9a45);
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


.set3 h2,
.set3 h3{
  background: linear-gradient(to right, #ffffff, #05208f, #ffffff);
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


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

  .mvv .text2{
    margin-left: 10px;
    margin-right: 5px;
  }

  .mvv .text3{
    text-align: left;
    margin-left: 10px;
    margin-right: 5px;
  }

}




@media screen and (min-width: 641px) {

  .mvv .text1{
    padding-inline: 15px;
  }

  .mvv .text2{
    padding-right: 15px;
    padding-left: 5px;
  }

}