@charset "utf-8";

.brand-header__title {
	font-size: 3rem;
	letter-spacing: 0.2em;
}
.brand-header__lead {
	margin: 4rem auto 5rem;
	font-size: 2rem;
	line-height: 2;
	text-align: center;
}

.toplogo {
	text-align: center;
	margin-top: 3.5rem;
}
.toplogo img{
	max-width: 70vw;
}

.image {
	max-width: 980px;
	height: 640px;
	margin: 0 auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.image-00 {
	background-image: url('/lineup/amelia/img/amelia_1.jpg');
}
.image-01 {
	background-image: url('/lineup/amelia/img/amelia_2.jpg');
}
.image-02 {
	background-image: url('/lineup/amelia/img/amelia_3.jpg');
}
.logo {
	background-image: url('/lineup/amelia/img/logo.png');
}

.line {
	font-family: "Noto Sans JP", sans-serif;
	align-items: center;
	display: flex;
	justify-content: start;
	max-width: 980px;
	margin: 12rem auto 0;
	font-size: 1.7rem;
	font-weight: 500;
}
.line::before {
	background-color: #666666;
	content: "";
	height: 1px;
	width: 60px;
}
.line::before {
	margin-right: 15px;
}
.feature__catch::before {
	content: '';
	display: inline-block;
	width: 3.5rem;
	height: 3.5rem;
	background-image: url('/lineup/amelia/img/icon.png');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 1rem;
}
.feature {
	margin: 10rem auto 0;
	text-align: left;
	max-width: 980px;
}
.feature__catch {
	font-family: "Noto Sans JP", sans-serif;
	font-feature-settings: "palt";
	font-size: 2.7rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-align: left;
}
.feature__catch.copy {
	letter-spacing: 0.3em;
}
.feature__lead {
	display: inline-block;
	/* max-width: 35em; */
	margin: 4rem auto 5rem;
	max-width: 980px;
	font-size: 1.7rem;
	line-height: 2;
	text-align: left;
}
.feature__lead sup {
	font-size: 60%;
}
.feature__short {
	max-width: 980px;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	gap: 50px;
}
.mark {
	text-align: center;
}
.short {
	width: 50%;
}
.short_lead {
	margin-bottom: 0;
}
.column-structure {
	width: 640px;
	margin: 12rem auto 10rem;
}
.column-structure__pic {
	display: flex;
	justify-content: space-between;
}
.column-structure__caption {
	display: block;
	margin: 3rem auto 0;
	font-size: 15px;
	line-height: 1.7;
	text-align: left;
}
.image-sub {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 980px;
	margin: 2rem auto 0;
}
.image-sub__box p {
	margin-top: 1rem;
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}
.column2 {
	display: flex;
	max-width: 980px;
	margin: 50px auto 2rem;
}
#cabbage {
	flex-direction: row-reverse;
}
.feature  + .column2 {
	margin-top: 14rem;
}
.column2.pfasfree {
	margin-bottom: 8rem;
	align-items: center;
}
.column2__detail {
	align-items: center;
	justify-content: center;
}
.column2__pics {
	width: 320px;
}
.column2__head {
	margin: 0 auto 1.4rem;
	font-size: 2rem;
	line-height: 1.8;
}
.column2__text {
	margin: auto auto;
	padding: 0 2rem;
	align-items: center;
	font-size: 1.7rem;
	line-height: 1.8;
}
.column2__text  + .column2__head {
	margin-top: 4rem;
}
.column2__pic {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0.4rem;
}
.column2 img {
	max-width: 60vw;
}
.point {
	max-width: 980px;
	margin: 50px auto 0;
	font-size: 1.7rem;
}

.feature__short img {
	max-width: 80vw;
}
.feature__short img:first-of-type {
	margin-top: 2rem;
}
.point__text {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	line-height: 1.5;
}
.lineup__head {
	font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	margin: 7rem auto 3rem;
	font-feature-settings: "palt";
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-align: center;
}
.product-list__head {
    max-width: 800px;
}
.product {
    max-width: 800px;
}
.product__detail {
	width: 50%;
}
.product__pic {
	width: 50%;
}
.buy-link {
	text-align: center;
}

/* スライダー全体と子要素 */
.basic-slider_wrap,
.basic-slider_wrap *{
  box-sizing:border-box;
}
/* スライダー全体 */
.basic-slider_wrap{
  width:100%;
  max-width:980px;
}
/* スライダー操作エリア */
.basic-slider_area{
  display:flex; /* 前へボタン・スライド・次へボタンを横並びにする */
  align-items:center;
  gap:18px; /* ボタンとスライドの間隔。 */
}
/* 前へボタンと次へボタン */
.basic-slider_button{
  display:flex; /* 矢印をボタン中央へ配置する */
  align-items:center; /* 矢印を縦方向中央へ揃える */
  justify-content:center; /* 矢印を横方向中央へ揃える */
  flex-shrink:0; /* 画面幅が狭くてもボタンを縮小させない */
  width:52px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:52px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ボタンを円形にする */
  background:#4b4b4b; /* ボタンの背景色 */
  color:#ffffff; /* 矢印の文字色 */
  font-family:Arial,sans-serif; /* 矢印表示に使用するフォント */
  font-size:30px; /* 矢印の文字サイズ。値を大きくすると矢印が大きくなる */
  font-weight:700; /* 矢印を太くする */
  line-height:1; /* 矢印の上下位置を整える */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:
    background-color .3s ease,
    opacity .3s ease;
  /*
    0.3秒で背景色と透明度を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}
/* 操作できないボタン */
.basic-slider_button:disabled{
  background:#cbd5e1; /* 無効時の背景色 */
  opacity:.7; /* 無効時の透明度。値を小さくすると薄くなる */
  cursor:default; /* 通常のマウスカーソルを表示 */
}
/* スライド表示エリア */
.basic-slider_view{
  flex:1; /* 左右ボタンを除いた横幅いっぱいに表示 */
  min-width:0; /* 横幅が狭い場合でも正しく縮小できるようにする */
  overflow:hidden; /* 表示中以外のスライドを隠す */
  border-radius:18px; /* 表示エリアの角丸 */
}
/* スライドを横並びにする要素 */
.basic-slider_track{
  display:flex; /* 3枚のスライドを横並びにする */
  width:100%; /* 表示エリアの横幅に合わせる */
  transition:transform .3s ease;
  /*
    0.3秒でスライドを横へ切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}
/* 各スライド */
.basic-slider_slide{
  display:flex; /* 内容を縦方向中央へ配置する */
  flex:0 0 100%; /* 各スライドを表示エリアと同じ横幅にする */
  width:100%; /* スライドを表示エリアの横幅いっぱいにする */
  min-height:220px; /* 最小高さ。値を大きくするとスライドが高くなる */
  justify-content: center;
}
.basic-slider_slide img{
  max-width: 100%;
}
.basic-slider_slide img:nth-of-type(2) {
	display: none;
}
/* ドットナビゲーション */
.basic-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* ドットを縦方向中央へ揃える */
  justify-content:center; /* ドットを横方向中央へ配置する */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* スライドとドットの間隔。値を大きくすると広がる */
}
.slider_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
}

/* 画面幅1024px以下 */
@media(max-width:1024px){

  /* ページ全体 */
  .main{
    padding: 0 12px;
  }
}

/* 画面幅700px以下 */
@media(max-width:700px){

  /* ページ全体 */
  .main{
    padding:24px 12px;
  }

  /* スライダー操作エリア */
  .basic-slider_area{
    gap:8px; /* スマートフォンではボタンとの間隔を小さくする */
  }

  /* 前へボタンと次へボタン */
  .basic-slider_button{
    width:42px; /* スマートフォンではボタンの横幅を小さくする */
    height:42px; /* スマートフォンではボタンの高さを小さくする */
    font-size:25px; /* スマートフォンでは矢印を少し小さくする */
  }

  /* 各スライド */
  .basic-slider_slide{
    min-height:190px;
  }
  .basic-slider_slide img:nth-of-type(1) {
	display: none;
  }
  .basic-slider_slide img:nth-of-type(2) {
	display: block;
  }

}

@media screen and (max-width: 767px) {

	.brand-header__title {
		font-size: 2.6rem;
	}
	.brand-header__lead {
		width: 82%;
		font-size: 1.7rem;
		text-align: left;
		margin-top: 2rem;
	}
	.image {
		height: 80vw;
	}
	.image-00 {
		height: 70vw;
	}

	.feature {
		margin: 0 auto;
	}
	.feature__catch {
		margin-top: 5rem;
		font-size: clamp(16px, 5.5vw, 25px);
		line-height: 1.6;
		letter-spacing: 0.1em;
	}
	.feature__lead {
		width: 100%;
		margin: 2rem auto 3rem;
		font-size: 1.5rem;
		text-align: left;
	}
	.feature__short {
		display: block;
	}
	.short {
		width: 100%;
	}
	.feature__short img:first-of-type {
		margin-top: 0;
	}
	.column-structure {
		display: block;
		width: 70%;
		margin: 7rem auto 5rem;
	}
	.column-structure__pic {
		display: block;
		width: 100%;
		margin-top: 50px;
	}
	.column-structure__pic img {
		display: block;
		margin-bottom: 1rem;
		width: 100%;
		height: auto;
	}
	.column2 {
		max-width: 500px;
		text-align: center;
	}
	.column2__text {
		text-align: left;
	}
	.image-sub {
		width: 90%;
		margin-top: 0;
	}
	.image-sub_pic {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto 1rem;
	}
	.image-sub__box {
		margin-top: 3rem;
	}

	.feature  + .column2 {
		margin-top: 6rem;
	}

	.column2 {
		display: block;
		width: 94%;
		margin: 3rem auto;
	}
	.column2 img {
		max-width: 100%;
	}
	#cabbage {
		flex-direction: row;
    }
	.column2__detail,
	.column2__pics {
		width: 100%;
	}
	.column2__head {
		text-align: center;
	}
	.column2__text {
		width: 94%;
		padding: 0;
		margin: 0;
		font-size: 1.5rem;
	}
	.column2__pic {
		max-width: 80%;
		margin-top: 2rem;
	}

	.product-list {
		margin-top: 5rem;
	}
	.product-list__head {
		max-width: 640px;
		width: 94%;
	}
	.product {
		width: auto;
	}
	.product__pic {
		width: 40%;
	}
	.product__detail {
		width: 60%;
	}

	.buy-link {
		padding: 2rem 0;
	}

}