@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz@6..96&display=swap');
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body { position: relative; margin: 0;}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 0.5em;
  line-height: 0;
  letter-spacing: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.75em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

@media screen and (min-width: 769px) {
  .sp,
  .sp-show {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pc,
  .pc-show {
    display: none !important;
  }
}


img {
  display: block;
  width: 100%;
}

/**
 * page contents
 * ============================================
 */
:root {
  --font-family-heading: 'Bodoni Moda', serif;
  --font-family-season: the-seasons, sans-serif;
  --font-family-min: hiragino-mincho-pron, serif;
  --color-theme: #A8A4D0;
  --color-section-bg-main: #FFFFFF;
  --color-section-bg-sub: #FBF8F6;
  --color-section-header: #4E4D64;
  --color-text-main: #4E4D64;
  --color-text-heading: var(--color-theme);
}
html {
  font-size: 0.6944444444vw;
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.5641025641vw;
  }
}

.p-container_1200 {
  position: relative;
  margin: 0 auto;
  width: 83.3333333333vw;
}
@media screen and (max-width: 768px) {
  .p-container_1200 {
    width: calc(100% - 12.3076923077vw);
  }
}

.p-container_1220 {
  position: relative;
  margin: 0 auto;
  width: 84.7222222222vw;
}
@media screen and (max-width: 768px) {
  .p-container_1220 {
    width: calc(100% - 12.3076923077vw);
  }
}

.p-container_1260 {
  position: relative;
  margin: 0 auto;
  width: 87.5vw;
}
@media screen and (max-width: 768px) {
  .p-container_1260 {
    width: calc(100% - 12.3076923077vw);
  }
}

.site_header,
.site_footer {
	background-color: var(--color-section-header);
}
@media screen and (min-width: 769px) {
	.site_footer { height: 18.2vw;}
}
.sp-nav { width:100%;}
.p-nav {
	position: relative;
	width:100%;
	padding: 45px 6.2%;
	background-color: var(--color-text-main);
	z-index: 100001;
}
.p-nav_cmn { 
	padding: 0;
	border-bottom: 1px solid var(--color-theme);
}
.j-navcmn {
	display: block;
	padding:20px 0;
	color: #fff;
	font-family: var(--font-family-season);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 5%;
}
.j-navcmn.online { position: relative;}
.j-navcmn.online::after {
	content:'';
	position: absolute; left: 0; top:50%; transform: translate(6.8em, -50%);
	width:12px; height:12px;
	background: url("../img/icn_arrow.svg") right top no-repeat;
	background-size:100% auto;
}

.p-nav_cmn--otheritem {
	background-color: var(--color-text-main);
}
.p-nav_cmn:nth-child(1) { border-top: 1px solid var(--color-theme);}
.p-nav_cmn + .p-nav_cmn { border-top: none;}

.p--sleep-retino-relmask {
  font-size: 1.6rem;
  font-size: 16px;
  font-family: hiragino-kaku-gothic-pron, "hiragino-mincho-pro", "ヒラギノ角ゴ ProN W6", "HiraMinProN-W6", "hiragino-mincho-pron", sans-serif;
  font-weight: 400;
  color: var(--color-text-main);
  font-feature-settings: "palt";
  background-color: var(--color-section-bg-main);
}
@media screen and (max-width: 768px) {
  .p--sleep-retino-relmask {
    padding-top: 13.7vw;
  }
}
.p--sleep-retino-relmask h1, .p--sleep-retino-relmask h2, .p--sleep-retino-relmask h3, .p--sleep-retino-relmask h4, .p--sleep-retino-relmask h5, .p--sleep-retino-relmask h6, .p--sleep-retino-relmask p {
  font-family: hiragino-kaku-gothic-pron, "hiragino-mincho-pro", "ヒラギノ角ゴ ProN W6", "HiraMinProN-W6", "hiragino-mincho-pron", sans-serif;
  font-weight: 400;
  color: var(--color-text-main);
  font-feature-settings: "palt";
}


.p-follow {
  position: fixed;
  bottom: 5rem;
  right: 3.2rem;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .p-follow {
    bottom: 0.5rem;
    right: 7rem;
  }
}
.p-follow_btn {
  width: 18.8rem;
}
@media screen and (max-width: 768px) {
  .p-follow_btn {
    width: 10rem;
  }
}
.p-follow_list {
  margin-top: 1rem;
  width: 24rem;
}
.p-kv {
  position: relative;
}
.p-kv_bg {
  z-index: 1;
}
.p-kv_txt_01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.p-kv_txt_02 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

h2.p-section-heading {
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-style: italic;
  font-size: 6.1rem;
  color: var(--color-text-heading);
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  h2.p-section-heading {
    font-size: 4.5rem;
  }
}

/* 	p--sleep-retino-relmask                             
---------------------------------------------------------- */
.p--sleep-retino-relmask h2 {
	position: relative;
	font-family: var(--font-family-season);
	font-style: normal;
	font-weight: 600;
	font-size:min(12.31vw, 96px);
}
.p--sleep-retino-relmask h3 {
	margin-bottom: 30px;
	font-size:min(4.61vw, 28px);
	font-weight: bold;
	letter-spacing: 10%;
}
.p--sleep-retino-relmask h4 {
	margin-bottom: 10px;
	font-size:min(5vw, 20px);
	font-weight: bold;
	letter-spacing: 10%;
}
.p--sleep-retino-relmask p {
	font-size:min(3.84vw,20px);
	line-height: 1.8;
	letter-spacing: 10%;
}
.p--sleep-retino-relmask p + p { margin-top: 1.1em;}
.p--sleep-retino-relmask p.sub,
.p--sleep-retino-relmask p.note { font-size:min(2.9vw,12px);}

.p--sleep-retino-relmask p.note { text-align: right;}

/*---- kv ----*/
.kv--link { transition: .4s all;}
.kv--link.fixed { position: fixed; bottom:0; left: 0; z-index: 999;
	width:100%; height: auto;
	animation: slideUp 0.4s forwards ease-out;
}
@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(30px); /* 30px 下に隠しておく */
	}
	100% {
		opacity: 1;
		transform: translateY(0);    /* 定位置へ */
	}
}

.ul--kv--link {
	display: flex;
}
.ul--kv--link li { width:50%; background: #fff;}
.ul--kv--link li a { 
	display: flex; align-items: center; justify-content: center;
	position: relative; 
	height: 100%;
	text-align: center; 
	background: #fff;
}
.ul--kv--link li a::after {
	content:''; position: absolute; right: 4%; top:50%; transform:translateY(-50%) rotate(45deg);
	width:8px; height:8px;
	border-top:2px solid var(--color-text-main); border-right:2px solid var(--color-text-main);
}

.ul--kv--link .nlc {
	width:55.55555%;
	font-size:min(4vw, 24px);
}
.ul--kv--link .nlc a {
	padding: .8em 0;
	color: #fff;
	font-weight: bold;
	background: #ED7C95;
}
.ul--kv--link .nlc a::after { border-color: #fff;}

.ul--kv--link .amazon img { width:86px;}

@media screen and (min-width: 769px) {}
@media screen and (max-width: 768px) {
	.ul--kv--link .amazon img { width:68px;}
	.ul--kv--link li a::after { right: 8%;}
}

/*---- about ----*/
.about--area { padding: 50px 0 100px; background: var(--color-section-bg-sub);}
.about--area h2 span { position: relative; z-index: 3;}
.about--area h2::before {
	content:''; position: absolute; right:0; top:0; transform: translate(0,0);
	width:162px; height:128px;
	background: url("../img/bg_ttl_about.png") center center no-repeat;
	background-size: 100% auto;
	z-index: 1;
}
.about--area p { line-height: 2.5;}

@media screen and (min-width: 769px) {
	.about--area .fx { 
		display: flex; 
		flex-direction: row-reverse; 
		justify-content: space-between; 
		align-items: center;
	}
	.about--area h2 {}
}
@media screen and (max-width: 768px) {
	.about--area { padding-bottom: 10.2%;}
	.about--area h2 { margin-bottom: 20px; text-align: right;}
	.about--area h2::before {
		width:92px; height: 76px; transform: translate(0,-24%);
	}
	.about--area .sub { text-align: right;}
}

/*---- product ----*/
.product--area { position: relative; padding: 110px 0 100px; background: var(--color-section-bg-main);}
.product--area::before {
	content:''; position: absolute; left: 0; bottom:0;
	width:min(12.63888888%, 182px); height: 100%;
	background: url("../img/bg_01.png") left bottom no-repeat;
	background-size:100% auto;
}

.product--area .img {
	position: relative;
}
.product--area .img::after {
	content:''; position: absolute; left: 12%; top:0; transform: translate(0,-40%);
	width:192px; height:196px;
	background: url("../img/bg_02.png") left top no-repeat;
	background-size: 100% auto;
	z-index: 1;
}
.product--area .photo { position: relative; z-index: 4;}

.product--area .logo { width:193px; margin-bottom: 25px;}

.product--area p { font-size:min(4vw, 20px); letter-spacing: 0;}
.product--area p .price { font-size:min(5vw, 32px); font-weight: bold;}
.product--area p small { font-size:min(3vw, 12px); font-weight: bold;}

@media screen and (min-width: 769px) {
	.product--area .fx {
		display: flex; justify-content: space-between; align-items: flex-end;
	}
	.product--area .fx h2 { padding-bottom: 1.2em;}
	.product--area .fx h3 { margin-bottom: 20px; white-space: nowrap;}
	.product--area .photo {
		width:290px;
		margin:0 64px 0 142px;
	}
}
@media screen and (max-width: 768px) {
	.product--area { padding: 60px 0;}
	.product--area::before {
		content:''; position: absolute; left: 0; bottom:0;
		width:min(100%, 100%); height: 100%;
		background: url("../img/bg_sp_pro.png") right bottom no-repeat;
		background-size:100% auto;
	}
	
	.product--area .fx h2 { text-align: center;}
	.product--area .photo {
		width:46.4%;
		margin:50px auto 40px;
	}
	.product--area .img::after {
		width:120px; height:122px; transform: translate(-10%,-47%);
	}
	
	.product--area .txt { padding-left: 6.7%;}
	.product--area .logo { width:146px; margin-bottom: 16px;}
}

/*---- whats ----*/
.whats--area { padding: 128px 0 110px; background: var(--color-section-bg-sub);}

.whats--area h2 { margin-bottom: 1.23em; padding-left: 0.9em; font-size:min(5.8vw,38px);}
.whats--area h2 span { display: inline-block; position: relative; z-index: 4;}
.whats--area h2 span::before {
	content:'“'; position: absolute; left: 0; top :0; transform:translate(-60%, -31%);
	color: var(--color-theme); font-size:200px; z-index: -1;
}
.whats--area h2 span::after {
	content:'”'; position: absolute; right: 0; top :0; transform:translate(60%, -12%);
	color: var(--color-theme); font-size:200px; z-index: -1;
}
@media screen and (min-width: 769px) {
	.whats--area .fx { display: flex; justify-content: space-between;}
	.whats--area .fx .txt { width:61,33333%;}
	.whats--area .fx .img { width:29.5%;}
}
@media screen and (max-width: 768px) {
	.whats--area { padding: 80px 0 40px;}
	.whats--area h2 span::before, .whats--area h2 span::after { font-size:100px;}	
	.whats--area h3 { line-height: 2; text-align: center;}
	.whats--area .photo { margin:20px 24.615384% 0; }
}

/*---- recommend--area ----*/
.recommend--area { position: relative; padding: 80px 0 127px;  background: var(--color-section-bg-main);}
.recommend--area h3 { text-align: center;}
.recommend--area .fx { position: relative; }
.ul--rei { margin-top: 32px;}
.ul--rei li {
	position: relative;
	margin-bottom: 20px;
	padding:.7em 1em .7em 3.1em;
	color: #fff;
	font-size:min(4vw,21px);
	background: var(--color-text-main);
	border-radius: 40px;
	letter-spacing: 10%;
}
.ul--rei li::before {
	content:''; position: absolute; left: 1.2em; top:50%; transform: translate(0,-50%);
	width:19px; height:17px;
	background:url("../img/icn_check.png") left top no-repeat;
	background-size: auto 100%;
}
@media screen and (min-width: 769px) {
	.recommend--area::before {
		content:''; position: absolute; right: 0; bottom: 0;
		width:40%; height: 100%;
		background: url("../img/bg_03.png") right bottom no-repeat;
		background-size: auto 100%;
	}
	.recommend--area .inner { width:min(913px, 78vw);}
	.recommend--area .fx { display: flex; flex-direction: row-reverse; justify-content: space-between;}
	.recommend--area .fx .txt { width:47.3165388%; padding-top: 30px;}
	.recommend--area .fx .img { width:43.26396%;}
}
@media screen and (max-width: 768px) {
	.recommend--area {
		padding: 40px 0 80px;  
		background: var(--color-section-bg-main) url("../img/bg_sp_whats.png") center center no-repeat;
		background-size: auto 100%;
	}
	.recommend--area .photo { margin:40px 15.38461538% 0;}
}

/*----point--area ----*/
.point--area { position: relative; padding: 110px 0 110px; background: var(--color-section-bg-sub);}
.point--area::before {
	content:''; position: absolute; left: 0; top: 0;
	width:24.861111%; height: 100%;
	background: url("../img/bg_04.png") left top no-repeat;
	background-size: 100% auto;
}

.point--area h2 { text-align: right; margin-bottom: 80px;}
.point--area h3 { margin-bottom: 0;}
.point--area h4 {
	margin:20px auto 10px;
	font-size: min(4.5vw, 20px); font-weight: bold;
	text-align: center; 
	letter-spacing: 5%;
}
.point--area h5 {
	margin:20px auto 10px;
	font-size: min(4.5vw, 20px); font-weight: bold;
	text-align: center; 
}
.point--area ul p { font-size:min(4vw, 15px); line-height: 1.5; letter-spacing: 5%; text-align: center;}

.ttl--point { display: flex; justify-content: center; align-items: center; margin-bottom: 40px;}
ul + .ttl--point { margin-top: 180px;}

.ttl--point .num { width:56px;}
.ttl--point .ttl { position: relative; padding-left: 74px;}
.ttl--point .ttl::before { 
	content:''; position: absolute; left: 20px; top:50%; transform:translate(0, 0);
	width:34px; height:1px;
	background:var(--color-text-main);
}
@media screen and (max-width: 768px) {
	.point--area { padding: 15.384615% 0 15.384615%;}
	.point--area::before { width:0;}
	.point--area h2 { text-align: left; margin-bottom: 33px;}
	
	.ttl--point { flex-direction: column;}
	.ttl--point .ttl { padding:24px 0 0;}
	.ttl--point .ttl::before {
		left: 50%; top:12px; transform: translate(-50%, 0);
		width:34px; 
	}
	.ttl--point h3 { font-size:min(6.16vw, 24px);}
	
	ul + .ttl--point { margin-top: 80px;}
}

/*---- ul--point_01 ----*/
.ul--point_01 { display: flex; justify-content: center; gap:42px;}
.ul--point_01 li {
	padding: 40px 0px;
	background: #fff; border-radius: 20px;
}
.ul--point_01 li .photo { padding: 0 60px; }
.ul--point_01 li .photo img { border-radius: 12px;}
@media screen and (max-width: 768px) {
	.ul--point_01 { flex-direction: column; gap:24px;}
}

/*---- ul--point_02 ----*/
.ul--point_02 {
	display: flex; justify-content: center; gap: 83px; width:min(82vw, 483px); margin: 0 auto 60px;
}
.ul--point_02 li { position: relative; width:min(41.4%, 200px)}
.ul--point_02 li:nth-child(2)::before {
	content:'✕'; 
	position: absolute; left: 0; bottom:40%; transform: translate(-130%, 10%);
	font-size:60px; font-weight: 300;
	color: var(--color-text-main);
}
.ul--point_02 li h4 { font-size:min(5.6vw, 32px);}
.ul--point_02 li h5 { font-size:min(4.6vw, 20px); font-weight: bold; text-align: center; line-height: 1.5;}

@media screen and (max-width: 768px) {
	.ul--point_02 { gap:2%; align-items: flex-start;}
	.ul--point_02 li { width:48.7%;}
	.ul--point_02 li:nth-child(1) {
		display: flex; flex-direction: column-reverse; 
	}
	.ul--point_02 li:nth-child(2) {
		padding-top: 55%;
	}
	
	.ul--point_02 li:nth-child(1) h4 { margin-top: 0;}
	.ul--point_02 li:nth-child(1) .photo { margin-top: 10px;}
	.ul--point_02 li h5 { margin-top: 2px;}
	
	.ul--point_02 li:nth-child(2)::before {
		transform: translate(-70%, -112%);
		font-size:40px;
	}
}

/*---- ul--point_03, .ul--point_04 ----*/
.ttl--point--ul { text-align: center; margin-bottom: 20px; line-height: 1.5;}

.ul--point_03,
.ul--point_04 {
	position: relative;
	display: flex; justify-content: space-between; gap: 24px; margin: 0 auto 50px; padding-bottom: 50px;
}
.ul--point_04 { margin-bottom: 40px; padding-bottom: 0;}
.ul--point_03 li,
.ul--point_04 li { width:30%;}

.ul--point_03 .photo,
.ul--point_04 .photo { text-align: center;}
.ul--point_03 .photo img,
.ul--point_04 .photo img { width:100px; margin: 0 auto;}

.ul--point_03::before {
	content: '';
	position: absolute; left: 50%; bottom:0; transform: translate(-50%, 0);
	width:80%; height: 1px;
	background:  var(--color-text-main);
}

@media screen and (min-width: 769px) {
	
}
@media screen and (max-width: 768px) {
	.ul--point_03,
	.ul--point_04 { flex-direction: column; gap:24px;}
	.ul--point_03 li,
	.ul--point_04 li { width:100%;}
}

/*---- howto--area ----*/
.howto--area { padding: 110px 0 110px; background: var(--color-section-bg-main);}

.ul--howto {
	display: flex; justify-content: space-between; gap:80px;
}
.ul--howto li { position: relative; width:20%;}
.ul--howto li h4 { margin: 12px 0; text-align: center;}
.ul--howto li p { font-size: min(4vw, 16px);}

.ul--howto li::before {
	content:'';
	position:absolute; left: 0; top:50%; transform: translate(-210%,0);
	width:0; height:0;
	border-left: 23px solid var(--color-text-main);
	border-top:12px solid transparent;
	border-bottom:12px solid transparent;
}
.ul--howto li:nth-child(1)::before { border: none;}

.ul--howto .step--num {
	font-family: var(--font-family-season);
	font-size: min(5vw, 24px);
	text-align: center;
	color: var(--color-text-main);
	
	display: none; /* フォントちゃうわ！ */
}

@media screen and (min-width: 769px) {
	.howto--area h2 { margin-bottom: 1.6em; font-size:min(7vw,64px);}
}
@media screen and (max-width: 768px) {
	.howto--area { padding: 60px 0;}
	.howto--area h2 { text-align: center;}
	
	.ul--howto { flex-direction: column; gap:47px; margin: 34px 14.833% 0;}
	.ul--howto li { width:100%; text-align: center;}
	.ul--howto li::before {
		content:'';
		position:absolute; left: 50%; top: 0; transform: translate(-50%,-105%);
		width:0; height:0;
		border-top: 19px solid var(--color-text-main);
		border-left:11px solid transparent;
		border-right:11px solid transparent;
	}
	.ul--howto li .photo { display: block; width:min(80%, 180px); margin: 0 auto; }
}

/*----special--area ----*/
.special--area { padding: 80px 0 145px; background: var(--color-section-bg-sub);}
.special--area h2 { margin-bottom: .4em; font-size:min(7vw,64px); text-align: center; }
.special--area h3 { margin-bottom: 1.2em; text-align: center;}
.special--area .lead { font-size:min(3.2vw,20px); text-align: center;}

.special--area .img_01 { width:min(100%, 740px); margin: 26px auto 60px;}

.special--area .fx { 
	display: flex; justify-content: space-between; align-items: center; gap:25px;
	width:min(100%, 740px);
	margin:30px auto 0;
}

.special--area .txt01 {
	font-family: var(--font-family-min); 
	font-size:min(4vw, 18px); 
	line-height: 1.5; 
	letter-spacing: 10%;
}
.special--area .name {  
	margin-top: 14px;
	font-family: var(--font-family-min); 
	font-size:min(8vw, 23px); 
	font-weight: bold;
}
.special--area .fx dl { position: relative; margin-top: 16px;}
.special--area .fx .txt .buy_btn {
	position: relative; top: auto; left: auto; right: auto; bottom: auto;
	display: block; width:min(100%, 196px); 
	padding:10px;
	font-size:min(4vw, 18px); font-family: var(--font-family-min); font-weight: bold;
	color: #fff;  text-align: center; letter-spacing: 10%;
	background: var(--color-text-main);
}

.special--area .fx .txt .buy-tooltip {
	top:100%; bottom:0; left: 0; right: 0;
	width:min(100%, 196px);
	padding-top: .8em;
}
.special--area .fx dd ul {
	display: flex; gap:12px; flex-direction: column;
	padding: 20px 8px;
	background: var(--color-theme);
}
.special--area .fx dd ul::before {
	content:'';
	position:absolute; left: 50%; top:0; transform: translate(-50%,0);
	width:0; height:0;
	border-bottom: 14px solid var(--color-theme);
	border-left:7px solid transparent;
	border-right:7px solid transparent;
}
.special--area .fx dd ul li {
	width:100%; height:38px; 
	text-align: center;
	background: #fff;
}
.special--area .fx dd ul li a { 
	display: block; padding: 9px;
	text-align: center;
}
.special--area .fx dd ul li img { display: block; margin: 0 auto; height: 20px; width: auto;}

@media screen and (min-width: 769px) {
	.special--area .note { width:min(88%, 740px); margin:15px auto 0;}
	
	.special--area .fx .img {
		width:61.3333%;
	}
	.special--area .fx .txt {
		width:37.916666%;
	}
}
@media screen and (max-width: 768px) {
	.special--area { padding: 100px 0 100px;}
	.special--area .img_01 { margin-bottom:25px;}
	.special--area .fx { flex-direction: column;}
	.special--area .fx .txt { width:100%; text-align: center;}
	.special--area .fx dl { width:196px; margin: 12px auto 0;}
	.special--area .fx .txt .buy-tooltip { padding-top: 14px;}
	.special--area .fx dd ul { padding: 12px 8px;}
}


/*----  ----*/
@media screen and (min-width: 769px) {
	
}
@media screen and (max-width: 768px) {
	
}