/*
Theme Name: みずほのポートフォリオ
Theme URI: http://example.com/
Author: みずほの
Author URI: http://example.com/
Description: シンプルなポートフォリオ用WordPressテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mizuho
*/


/* =====================
   Reset & 基本設定
===================== */
body {
    margin: 0;
    line-height: 1.6;
    color: #189fba;
    font-family: "Yu Mincho", serif;
    background: #fcfdbf;
}
body.wp-singular.works-template-default.single.single-works.postid-56.logged-in.admin-bar.no-customize-support.wp-theme-mizuho {
    background: #ffffee;
}
a { color: #189fba; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 星空の背景のスタイル */
.star-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景にする */
  overflow: hidden;
}

/* 星のスタイル */
.star {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 5s infinite;
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}


/* =====================
   ヘッダー
===================== */
header {
    color: #189fba;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: serif;
}
header h1 { margin: 0; font-size: 1.5rem; }
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1.5rem;
}
nav a { color: #189fba; font-weight: bold; }

/* =====================
   セクション
===================== */
main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: serif;
}
section {
    margin-bottom: 3rem;
}
section h2 {
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 10px;
}

section h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}
/* =====================
   Works グリッド
===================== */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.work-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
    padding: 1rem;
}
.work-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* =====================
   フッター
===================== */
footer {
    background: #189fba;
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}

/* =====================
   TOPページ
===================== */

.top-main {
    max-width: 800px;
    margin: auto;
    padding: 40px;
    background: white;
    border-radius: 20px;
}

/*自己紹介*/
.introduction {
    display: flex
;
    max-width: 750px;
    margin: 3rem auto;
    background-color: white;
}

.introduction img {
    width: 200px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* カード間の余白 */
}

.top-lp-img, .top-bnr-img {
    width: 48%; /* 2列表示 */
    box-sizing: border-box; /* padding込みで幅計算 */
    padding: 0.5rem;
}

.top-LP img, .top-bnr img {
    width: 100%;
    display: block;
}

/*.top-LP a {
    background-color: white;
    margin: 0.5rem;
    padding: 1rem;
    border: 1px solid #6ad1c8;
    border-radius: 20px;
}*/

/* スマホ対応（1列表示） */
@media screen and (max-width: 768px) {
    .top-lp-img, .top-bnr-img {
        width: 100%;
    }
}


/* 方眼紙 */
.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
  
    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}

.portfolio-gallery img {
    width: 100%;
}