/**/
body {
  /* 画像ファイルの指定 */
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #fff;
}

/* Card*/
.pic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 30%;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.card-image-box {
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}


.card-box {
    padding: 1.5rem;
}

.card-title {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
	color:#808080;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    transform: scale(1.2);
}
/* スマートフォン向けのスタイル */
/* スマートフォン向けのスタイル */
@media only screen and (max-width: 767px) {
    .card {
        display: block; /* ブロック要素として表示 */
        width: 100%; /* 幅を100%に設定 */
        margin-bottom: 20px; /* カードの下に余白を設定 */
    }

    .card-image-box {
        text-align: center; /* 画像を中央に配置 */
    }

    .card-image {
        max-width: 100%; /* 画像の幅を100%に設定 */
        height: auto; /* アスペクト比を保ったまま高さを自動調整 */
    }

    .card-box {
        padding: 10px; /* カードの内側にパディングを設定 */
        text-align: center; /* タイトルと説明文を中央に配置 */
    }
}
/*sns*/
.pic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fefefe;
}

.sns-box {
    display: flex;
    gap: 0.5rem;
	text-align:center;
}

.btn-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    box-sizing: border-box;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

.btn-sns svg {
    fill: #fff;
}

.btn-pixiv{
    background-color: #0097FA;
}
.btn-insta{
    background: linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));
    color: #fff;
}

.btn-x {
    background-color: #111319;
}

.btn-facebook {
    background-color: #375A94;
}

.btn-line {
    background-color: #5DB40F;
}

.btn-pinterest {
    background-color: #B83026;
}

.btn-sns:hover {
    opacity: 0.8;
}
/* Title*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

.text {
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 220px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}
/**/
body {
  padding: 0;
  background: #202124;
  margin: 0;
}

/* トップのカード一覧を2列固定にする */
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}