/* ========== 基本スタイル（主にSP・全デバイス共通） ========== */
body {
    margin: 0;
    padding: 0;
    background-color: #fbfcef;
    /*font-family:  "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", serif;*/
    font-family: a-otf-ryumin-pr6n, serif;
    font-style: normal;
    font-weight: 300;
        
	color: #221613;
}

img {
    max-width: 100%; /* 画像が親要素の幅を超えないようにする */
    height: auto;    /* 画像の縦横比を保つ */
    vertical-align: bottom; /* 画像下にできる隙間を消す */
}

section {
    max-width: 1920px;
    margin: 0 auto;
	
}


/* --- ヘッダー --- */
.header {
    position: relative;
    text-align: center;
    background-image: url(../images/main_001.png), url(../images/main_003.png);
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
     background-size: 100% auto, 100% auto; 
    min-height: 600px;
    padding: 40px; 
}


/* ▼▼▼ ロゴのスタイルを絶対配置に変更 ▼▼▼ */
.header-logo {
    position: absolute; /* 絶対配置を指定 */
    top: 50px;          /* 上から50px */
    left: 0;            /* 親要素(.header)の左端から0px */
    width: 236px;       /* 横幅を236pxに指定 */
    height: auto;       /* 高さは自動調整 */
}

/* ▼▼▼ main_002.png用のスタイルを新たに追加 ▼▼▼ */
.header-main-image {
    margin-top: 600px;    /* 上に660pxの余白 */
    margin-bottom: 200px; /* 下に200pxの余白 */
    margin-left: auto;
    margin-right: auto;
}


br.sp {
    display: none;
}
/* --- コンテンツエリア --- */
.contents {
    padding: 40px;
    text-align: center;
	background-image: url(../images/pattern_main.png);
    background-size: 100% auto; 
	background-repeat: repeat-y;
	
}

.contents h2 {
    font-size: 3rem; /* PC用の見出しサイズ */
    line-height: 1.6;
    letter-spacing: 0.25rem;
    font-family: Ryumin Regular KL;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 400;
}

@media ( max-width : 780px ) {
.contents h2 {
    letter-spacing: 0.01rem;
}

}

.contents p {
    font-size: 1.44rem; /* PC用の段落サイズ */
    line-height: 2.44;
    letter-spacing: 0.25rem;
}

@media ( max-width : 780px ) {
.contents p {
    letter-spacing: 0.01rem;
}
}

/* --- ピックアップイベント --- */
.pickup_event {
    text-align: center;
    padding: 20px 0;
}

.carousel-period {
    display: block;
    margin-top: 60px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}


/* ピックアップイベントのタイトルロゴ */
.carousel-title {
    width: 204px; /* PCでの幅を指定 */
    height: auto; /* 高さは自動調整 */
}

@media ( max-width : 780px ) {
.carousel-title {
    width: 304px; /* SPでの幅を指定 */
    height: auto; /* 高さは自動調整 */
}

}

.carousel-flag {
    width: 100px; /* PCでの幅を指定 */
    height: auto; /* 高さは自動調整 */
}

@media ( max-width : 780px ) {
.carousel-flag {
    width: 70px; /* SPでの幅を指定 */
    height: auto; /* 高さは自動調整 */
}
}

.carousel_area {
	/* PC用の背景画像を指定 */
	background-image: url(../images/carousel_bg.png);
	background-repeat: repeat;
	padding: 10px 0;
	position: relative; /* 位置指定の基準にするため */
    overflow: hidden;   /* この要素の外へのはみ出しを隠す */	
	
}


/* ========== slick 矢印ボタンのスタイル ========== */

/* 矢印ボタンの基本スタイル */
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%);
    z-index: 10;
    width: 100px; /* ボタンの幅 */
    height: 100px; /* ボタンの高さ */
    border: none;
    background-color: transparent;
    cursor: pointer;
    /* ボタンのテキストを完全に非表示にする */
    font-size: 0;
    line-height: 0;
    text-indent: -9999px; /* テキストを画面外に飛ばす */
    -webkit-appearance: none; /* デフォルトのボタンのスタイルをリセット */
    -moz-appearance: none;
    appearance: none;
}

/* 前へボタン */
.slick-prev {
    left: 20%; /* 左からの位置 */
    background-image: url(../images/carousel_slide_arrow_l.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* 次へボタン */
.slick-next {
    right: 20%; /* 右からの位置 */
    background-image: url(../images/carousel_slide_arrow_r.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* ホバー、クリック、フォーカス時も矢印の背景画像を維持する */
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
    background-image: url(../images/carousel_slide_arrow_l.png) !important;
	background-size: contain;
    outline: none; /* フォーカス時の青い枠線も消す */
}

.slick-next:hover,
.slick-next:active,
.slick-next:focus {
    background-image: url(../images/carousel_slide_arrow_r.png) !important;
	background-size: contain;
    outline: none; /* フォーカス時の青い枠線も消す */
}

/* 画面幅が768px以下の場合（SP用） */
@media screen and (max-width: 780px) {
    .slick-prev,
    .slick-next {
        width: 10vw;
        height: 10vw;
        top: 50%;
    }
    .slick-prev {
        left: -1vw;
    }
    .slick-next {
        right: -1vw;
    }
}


/* ========== ページネーション（ドット）のスタイル ========== */

/* ドット全体のコンテナ */
.slick-dots {
    bottom: -10px; /* ドットの位置を下に下げる（マージンボトムの代わり） */
}

/* ドット（li要素）のスタイル */
.slick-dots li {
    margin: 0 8px; /* ドット間の余白 */
}

/* ドットのボタン部分のスタイル */
.slick-dots li button:before {
    font-size: 30px;      /* ドットの大きさを指定 */
    color: #ffffff;       /* 非アクティブなドットの色 */
    opacity: 1;           /* 透明にしない */
    -webkit-font-smoothing: antialiased; /* フォントを滑らかに */
    -moz-osx-font-smoothing: grayscale;
}


/* 画面幅が768px以下の場合（SP用） */
@media screen and (max-width: 780px) {
/* ドット（li要素）のスタイル */
.slick-dots li {
    margin: 0 1vw; /* ドット間の余白 */
}
	
.slick-dots li button:before {
    font-size: 3vw;      /* ドットの大きさを指定 */
}	
	
}


/* アクティブなドットのスタイル */
.slick-dots li.slick-active button:before {
    color: #00a8be; /* アクティブなドットの色 */
}

/* --- フッター --- */
.footer {
    text-align: center;
    padding: 40px 20px 400px;
	 background-image: url(../images/footer_img.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
	
	
}

.footer-logo-sp {
    display: none;
}

/* フッターのコピーライト */
.footer-copyright {
    /* 小塚ゴシックに近い、各OSで標準的なゴシック体を指定 */
    font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 18px; 
    color: #231815; 
    margin-top: 20px;
	
    padding: 0 20px; 
}




/* アニメーション */
.fade-in {
    opacity: 0; /* 透明にする */
    transform: translateY(30px); /* 少し下に配置 */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* 1.2秒かけて変化させる */
}

/* 画面内に入ったときに付与 */
.fade-in.is-visible {
    opacity: 1; /* 不透明にする */
    transform: translateY(0); /* 元の位置に戻す */
}




/* ========== 中間サイズ用のスタイル（画面幅が1280px以下の場合に適用） ========== */
@media screen and (max-width: 1480px) {

    .header {
       background-size: 100% auto, 100% auto; 
    }

    .header-main-image {
        margin-top: 40vw;
    }
	
.contents h2 {
    font-size: 2rem; /* PC用の見出しサイズ */
    line-height: 1.6;
}
	
.contents p {
    font-size: 1.2rem; /* PC用の段落サイズ */
    line-height: 1.8;
}
	
	
.carousel-period {
	width: 750px;
	margin-top: 40px;
	margin-bottom: 70px;
}	
	
	
.swiper {
	--swiper-navigation-sides-offset: -30px; /	
    --swiper-pagination-bullet-size: 18px; 
    --swiper-pagination-bullet-horizontal-gap: 6px; 
	
}
	

/* --- 左右の矢印ボタンのカスタマイズ --- */
.swiper-button-prev,
.swiper-button-next {
    width: 100px;
    height: 100px;
	top: 41%; 
}	
	
.footer {
    padding-bottom:200px;	
}
	
    .swiper-pagination {
        margin-top: 5px;
		margin-bottom: 35px;

    }
	
}


/* ========== SP用のスタイル（画面幅が768px以下の場合に適用） ========== */
@media screen and (max-width: 768px) {
    
    /* --- ヘッダー（SP用の上書き） --- */
    .header {
        background-image: url(../images/sp_main_001.png), url(../images/sp_main_003.png);
      min-height: 0; 
        padding: 20px;   /* SP用に内側の余白を調整 */		
		
    }
	
	
	/* ▼▼▼ SP用のロゴのスタイル ▼▼▼ */
    .header-logo {
        /* --- SP用の位置 --- */
        top: 10vw;  /* 画面上端から画面幅の50%の位置へ */
        left: 3vw; /* 画面左端から画面幅の20%の位置へ */
        width: 20vw; /* 横幅を画面幅の20%に指定 */
    }	
	
	
    /* ▼▼▼ SP用のmain_002.pngのスタイル ▼▼▼ */
    .header-main-image {
        margin-top: 70vw;    /* 上に画面幅の50%の余白 */	
		 margin-bottom: 15vw;
			 
    }	

	 br.sp {
        display: block;
    }
	
    /* --- コンテンツエリア（SP用の上書き） --- */
    .contents {
        padding: 5vw 2vw 0px 2vw;
    }
	
	
    /* ピックアップイベントのタイトルロゴ（SP用）*/
    .carousel-title {
        width: 37vw; /* SPでの幅を画面幅の10%に指定 */
    }	
    
    .contents h2 {
        font-size: 1.6rem; /* SP用の見出しサイズ */
    }

    .contents p {
        font-size: 0.87rem; /* SP用の段落サイズ */
    }
    
    .carousel-period {
        width: 85%;
        margin-top: 5vw;
        margin-bottom: 7vw;
    }	
	
	    .carousel_area {
        background-image: url(../images/sp_carousel_bg.png);
        background-size: 100%;
    }

    /* ▼▼▼ ここから追記・修正 ▼▼▼ */
    .swiper {
        width: 98%; /* スライダー全体の幅を画面の98%に指定 */
        --swiper-navigation-sides-offset: -1vw; /* 矢印ボタンの位置を調整 */
        --swiper-pagination-bullet-size: 3vw;
        --swiper-pagination-bullet-horizontal-gap: 1vw;
    }
    /* ▲▲▲ ここまで追記・修正 ▲▲▲ */

    /* --- 左右の矢印ボタンのカスタマイズ --- */
    .swiper-button-prev,
    .swiper-button-next {
        width: 10vw;
        height: 10vw;
        top: 40%;
    }
	
	
	
 .swiper-pagination {
        margin-top: 0px; 
	 	margin-bottom: 25px;
    }

    .footer {
        background-image: url(../images/sp_footer_img.png);
        padding: 10vw auto 20vw;
    }

	
    .footer-logo-pc {
        display: none; /* PC用ロゴを非表示に */
    }
    .footer-logo-sp {
        display: block; /* SP用ロゴを表示 */
    }
	
	.footer-logo-sp img{
		width: 45vw;
	}
	
	 .footer-copyright {
        font-size: 2vw;
        margin-top: 4vw;
    }
	
	
	
}




/* --- ゆらゆら --- */
 
	@keyframes yurayura {
		0% { transform: rotate(0deg); }
		15% { transform: rotate(0deg); }
		19% { transform: rotate(7deg); }
		23% { transform: rotate(0deg); }
        27% { transform: rotate(7deg); }
        31% { transform: rotate(0deg); }
        90% { transform: rotate(0deg); }
		100% { transform: rotate(0deg); }
	}
 
	#sample3 {
		animation: yurayura 2s linear infinite;

		text-align: center;
		margin: 30px auto 0;
		
	}