@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.item01{
    background: url(../img/slider01.webp)no-repeat center/cover;
}
.item02{
    background: url(../img/slider02.webp)no-repeat center/cover;
}
.item03{
    background: url(../img/slider03.webp)no-repeat center/cover;
}
.item04{
    background: url(../img/slider04.webp)no-repeat center/cover;
}
.item05{
    background: url(../img/slider05.webp)no-repeat center/cover;
}
.item06{
    background: url(../img/slider06.webp)no-repeat center/cover;
}
.item07{
    background: url(../img/slider07.webp)no-repeat center/cover;
}
.slider-child{
    margin-right: 36px;
    width: 360px;
    height: 360px;
   border-radius: 10px;
}
body {
  background-image: url("../img/background.webp");
  background-size: cover;       /* 画面いっぱいに表示 */
  background-repeat: no-repeat; /* 繰り返しなし */
  background-position: center;  /* 中央配置 */
}
/* コンテンツセクション全体 */
.content {
    position: relative;       /* スライダー上に重ねる場合に必要 */
    text-align: center;       /* 水平方向中央寄せ */
    color: #ffffff;           /* 文字色を白に */
    max-width: 800px;         /* 読みやすさのため最大幅を設定 */
    margin: 40px auto;        /* 上下マージンと左右中央寄せ */
    padding: 20px;            /* 内側余白 */
    z-index: 10;              /* スライダーより前面に表示 */
}

/* 見出し */
header {
    text-align: center;   /* 中央寄せ */
    padding: 20px 0;
    color: #ffffff;
}
.content h2 {
    font-size: 2.5rem;        /* 読みやすいサイズ */
    margin-bottom: 20px;
    line-height: 1.2;
}

/* 段落 */
.content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* スライダーの下に背景を暗くして文字を見やすくする場合 */
.slick-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);  /* 半透明黒で文字を際立たせる */
    z-index: 5;                     /* スライダーと文字の間 */
}