@charset "UTF-8";

/* 背景設定 */
body{
    background-image: url(../../../img/product/lepetitprince/design/images/wall_gra.png);
    color: #333333;
    background-attachment: fixed;
    font-family: 'Noto Sans JP', sans-serif;
    transition: .7s;
    margin: 0;
}

h1 {
  text-align: center;
  font-size: 24px;
}

h2 {
  text-align: center;
  font-size: 22px;
}

img {
  margin: auto;
  display: block;
  height: auto;
}

.image-row {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 15px; /* 画像間の隙間 */
}

.image-container {
    width: 50%;
    text-align: center;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.image-container p {
    padding: 0px 0 0 0;
    font-size: 14px;
}

p.important {
  /* フォントの種類 */
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  /* フォントの大きさ */
  font-size: 16px;
  /* フォントの色（16進数コード） */
  color: #ffffff;
  /* 太さ */
  font-weight: normal;
  /* スタイル（斜体など） */
  font-style: italic;
}

p.shop {
  text-align: center;
}

.bg01{ background-image: url(../../../img/product/lepetitprince/design/images/wall_gra_star.png); }
.bg02{ background-image: url(../../../img/product/lepetitprince/design/images/wall_gra3.png); }
.bg03{ background-image: url(../../../img/product/lepetitprince/design/images/wall_gra_star.png); }
.bg04{ background-image: url(../../../img/product/lepetitprince/design/images/wall_gra2.png); }

p.link {
    padding-left: 30px;
    line-height: 25px;
    background: url(../../../img/product/lepetitprince/design/images/link.png) no-repeat;
}

.textlink a {
	position: relative;
	color: #fff;
	text-decoration: none;
}
.textlink a:hover {
	color: #fff;
}
.textlink a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition: width 0.3s;
}

.textlink a:hover::after {
	width: 100%;
}

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #bea42e;/* ボーダーの色と太さ */
    background:#bea42e;
    padding: 30px 90px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#333;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .3s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

/* ふわっその場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*コンテンツ部分*/
.box{
  width:100%;
}
/*追従ボタン*/
.fix-btn{
  position:fixed;
  z-index:1;
  background:#fffaa3;
  width:335px;
  border-radius:15px;
  text-decoration:none;
  font-size:20px;
  text-align:center;
  color:#05099b;
  padding:20px 0;
  right:20px;
  bottom:20px;
}
.fix-btn:hover{
  animation: move 4s infinite;
}
@keyframes move {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(4deg, 4deg);
  }
  10% {
    transform: skew(-3deg, -3deg);
  }
  15% {
    transform: skew(2deg, 2deg);
  }
  20% {
    transform: skew(-1deg, -1deg);
  }
  25% {
    transform: skew(0.6deg, 0.6deg);
  }
  30% {
    transform: skew(-0.4deg, -0.4deg);
  }
  35% {
    transform: skew(0.2deg, 0.2deg);
  }
}

/* ナビ */
.nav_wrapper{
    position: fixed;
    z-index: 5;
    width: 105%;
    top: 50%;
    transform: translateY(-50%);
}

.nav_list{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc((100% - 450px) / 4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav_list li{
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 50px;
    border: solid 1px #f9d8d5;
}

.nav_list li a{
    display: inline-block;
    padding: 20px 40px;
    font-weight: 700;
    color: #f9d8d5;
}
.nav_item a {
  text-decoration: none;
}

@media screen and (max-width: 1400px) {
    .nav_wrapper {
        display: none;
    }
}

.current{
    background-color: #f3aca6 !important;
}

.current a{
    color: #fff !important;
}

/* コンテンツ */
.article{
    max-width: 430px;
    margin: 0 auto;
    position: relative;
}

.section{
    padding: 50px;
    min-height: 1000px; /* ← 超重要 */
}

#sec01{ background-color: #60a0d6; color:#fff; }
#sec02{ background-color: #5185b1; color:#fff; }
#sec03{ background-color: #395b78; color:#fff; }
#sec04{ background-color: #dca19c; color:#fff; }