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

/*全ページ共通*/

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

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

body {
  width: 100%;
  color: #000;
  margin: 0;/* bodyの余白を削除 */
  padding: 0;/* bodyの余白を削除 */
  background:url(company_image/Earth.jpg) center bottom/cover fixed;
}

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

a {
  text-decoration: none;
}

img {
  vertical-align: bottom;
}

h1 {
  margin: 0;
  font-size: 2.6rem;
}

h2 {
  font-size: 2.4rem;
}

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



.footer {
  background-color: black;
  padding: 1.4rem 1rem 2rem;
  text-align: center;
}

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

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

.responsive-image {
  max-width: 30%; /* 画像の最大幅を親要素の幅に合わせる */
  height: auto; /* 画像の高さを自動調整 */
  display: block;
  margin: 0 auto; /* 画像を中央に配置 */
}

.image-philosophy {
  text-align: center;
  margin: 2rem 0; /* 画像の上下に余白を追加 */
}

/*概要テーブル*/
table {
  border-collapse: collapse;
  width: 90%; /* 表を横に伸ばす */
    table-layout: fixed; /* セルの幅を固定 */
   margin-left: 2.5%;
}

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

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

td.a {
  width: 70%; /* 答え列の幅を設定 */
}

.company_block{
  padding-top:6rem;
}

.company{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  border:3px solid grey;
  border-radius: 2.5rem;
  background-color: white;
  margin:5rem;
  font-size: 1.8rem;
}

.spacebook-logo {
  max-width: 70%; /* 画像の最大幅を親要素の幅に合わせる */
  height: auto; /* 画像の高さを自動調整 */
  display: block;
  margin: 0 auto; /* 画像を中央に配置 */
  padding:3rem;
}




.philosophy a{
  display: block; /* リンクをブロック要素に変更 */
  width: 100%; /* 親要素の幅に合わせる */
  color: black;
  font-size: 2.5rem;
  margin:0 auto;
}

.philosophy h1 {
  position: relative;
  border: 3px solid grey;
  border-radius: 2.5rem;
  background-color: white;
  margin: 5rem;
  text-align: center;
  -webkit-box-shadow:5px 5px 10px 1px gray;
          box-shadow:5px 5px 10px 1px gray;
}
/**/
.philosophy h1 a {
    -webkit-transition: color 0.3s ease, border 0.3s ease;
    -o-transition: color 0.3s ease, border 0.3s ease;
    transition: color 0.3s ease, border 0.3s ease; /* 枠線と色の変化をスムーズに */
    position: relative; /* 擬似要素のために必要 */
    padding-bottom:0.3%;
}

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

.philosophy h1 a:hover {
    color: transparent; /* ホバー時に文字色を透明に設定 */
}

.philosophy h1 a:hover::before {
    opacity: 1; /* ホバー時に表示 */
}

.philosophy h1 a:hover::after {
  padding-bottom:0.3%;
    content: "心を基点に"; /* ホバー時に表示 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: -o-linear-gradient(left, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff);
    background: -webkit-gradient(linear, left top, right top, from(#2638ff), color-stop(#6f78ff),color-stop(#27bcee), color-stop(#6f78ff), to(#2638ff));
    background: linear-gradient(to right, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/**/


.service ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並びにするために追加 */
  list-style: none;
  padding: 0;
  margin:0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 横並び要素を中央揃えにするために追加 */
}

.service ul li {
  margin:0 2%; /* リンク間のスペースを設定 */
  padding-top: 30px;
  padding-bottom:50px;
}

.service-icon {
width: 90%; /* アイコンの幅を設定 */
height: auto; /* 高さを自動調整 */
margin-bottom: 10px; /* アイコンとテキストの間に余白を追加 */
padding-bottom: 10px;
}



/**/
.service ul li {
  position: relative; /* 擬似要素を使用するために必要 */
  margin: 0 2%; /* リンク間のスペースを設定 */
  padding-top: 30px;
  padding-bottom: 50px;
}

.service ul li a {
  display: block;
  background-color: white;
  border: 3px solid gray;
  color: gray;
  font-weight: bold;
  text-align: center;
  border-radius: 50px;
  width: 27rem;
  aspect-ratio: 1 / 1;
  font-size: 2.4rem;
  margin-top: 2rem;
  padding: 2rem;
  position: relative;
  -webkit-transition: color 0.3s ease, border 0.3s ease;
  -o-transition: color 0.3s ease, border 0.3s ease;
  transition: color 0.3s ease, border 0.3s ease;
}

.service ul li a::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50px; /* 枠線を丸くする */
  border: 3px solid transparent; /* 初期状態の枠線を透明に設定 */
  background: -o-linear-gradient(left, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff);
  background: -webkit-gradient(linear, left top, right top, from(#2638ff), color-stop(#6f78ff),color-stop(#27bcee), color-stop(#6f78ff), to(#2638ff));
  background: linear-gradient(to right, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff); /* グラデーションを適用 */
  -webkit-mask: 
      -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, 
      -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: 
      linear-gradient(#fff 0 0) padding-box, 
      linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; /* 枠線の変化をスムーズに */
  opacity: 0; /* 初期状態では透明に設定 */
}

.service ul li:hover a {
  color: transparent; /* ホバー時に文字色を透明に設定 */
}

.service ul li:hover a::before {
  opacity: 1; /* ホバー時に表示 */
}

.service ul li:hover .service-icon {
  -webkit-filter: none;
          filter: none; /* ホバー時にフィルターを無効にすることでカラー画像を表示 */
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  -o-transition: filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease; /* フィルターの変化をスムーズに */
}

.service ul li:hover .service-text {
  background: -o-linear-gradient(left, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff);
  background: -webkit-gradient(linear, left top, right top, from(#2638ff), color-stop(#6f78ff),color-stop(#27bcee), color-stop(#6f78ff), to(#2638ff));
  background: linear-gradient(to right, #2638ff, #6f78ff,#27bcee, #6f78ff, #2638ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* グレーの画像をカラーに変更 */
.service ul li a:hover .service-icon[src*="top_message_grey.png"] {
  content: url("company_image/top_message.jpg");
}

.service ul li a:hover .service-icon[src*="BLUECOSMOS_logo_grey.png"] {
  content: url("company_image/BLUECOSMOS_logo.png");
}

.service ul li a:hover .service-icon[src*="spacis_grey.png"] {
  content: url("company_image/spacis.png");
}


/**/

.service-text{
  display: block;
  margin-block: 1rem;
}

.service_title {
text-align: center;
padding-top:20px;
}

.philosophy{
  margin-bottom: 20rem;
  padding-bottom: 1rem;
}

.block_a{
  background-color: whitesmoke;
}

.block_b{
  background-color: #000033;
}

footer{
  background-color: #000033;
}

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

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

  .block_b {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1rem;
  }

  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 1rem;
  }
}