@charset "UTF-8";
/* CSS Document */
* elements initialization 
/*--------------------------------------------------*/
body {
	color: #232323;
	margin: 0;
	padding:0;
	line-height:1.9;
	font-size: 18px;
	background-color: #FFFFFF;
}
* html body {
	vertical-align: baseline;
	font-family: Verdana, Arial, "ＭＳ Ｐゴシック", sans-serif;
	text-align: left;
} /* lte ie6 */
*:first-child+html body {
	font-family: Verdana, Arial, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
} /* ie7 */
html>/**/body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
} /* ie8 */
html:not(:target) body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
} /* modern browser */


html {
  font-size: 18px;
  	color: #232323;
}
body {
  font-size: inherit; /* ←これでもよい */
  	color: #232323;
    line-height: 1.9;
}


/*-------明朝体-------*/
.min {
	font-family: 'ヒラギノ明朝 Pro W3', '平成明朝','ＭＳ Ｐ明朝', serif;
}

img {
	vertical-align:top;
	border: none;
}
/*IE6*/
* html img {
	vertical-align: bottom;
}
/*IE7*/
*:first-child+html img {
	vertical-align: bottom;
}
wrapper, body, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, select, span, textarea, td, th, ul, section {
	margin:0;
	padding:0;
}
abbr, acronym {
	border:0;
}
address, caption, cite, code, dfn, em, th, strong, var {
	font-style:normal;
	font-weight:normal;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;/*13px*/
	font-weight:normal;
}
input, select, textarea {
	font-size:1em;/*13px*/
}
ol, ul, li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
	font-size:1em;/*13px*/
}
hr {
	display: none;
}
strong, em {
	font-weight: bold;
}
/* ----- form -------*/

button, fieldset, form, input, label, legend, select, textarea {
	font-size:1em;  /*13px*/
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
input, textarea {
	vertical-align: middle;
	padding: 1px;
}
textarea {
	width: 98%;
}
input[type="radio"], input[type="checkbox"] {
	vertical-align: baseline;
	margin-right: 3px;
}
/*----- links color -----*/
a,
a li,
li a ,
a img {
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}



a:link {
	color: #333;
	text-decoration:none;
}
a:visited {
	color: #333;
	text-decoration:none;
}
a:hover {
	color: #ff9000;
	color: #1552aa;
	/*text-decoration: underline;*/
}

.wrapper {
    overflow: hidden;
    min-width: 1200px;
    /*padding-top: 100px;*/
}

header   { 
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
/*    transition: all 0.5s;
    transition-timing-function: cubic-bezier(1, -0.12, 0.54, 0.99);*/
    min-width: 1200px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.80)
}
header h1                 { font-size: 0.7em; color: #b1788f; }
header img.logo           { width: 269px; height: auto; }
header .logoArea          { margin-top: -5px; min-width: 378px; }

header .business_hours    { font-size: 0.7em; line-height: 1.4; margin-left: 50px; }
header .business_hours dl { display: flex; align-items: center; }
header .business_hours dt { background: #b1788f; line-height: 34px; padding: 0 0.8em; margin-right: 1em; border-radius: 5px; color: #FFF; }


header .header_ri         { display: flex; height: 100px; }
header .header_ri nav     { display: block; min-width: 848px; }
header nav .flex          { display: flex; }
header nav ul             { display: flex; align-items: center; /*min-width: 848px;*/ }
header nav ul a li        { font-size: 88%; line-height: 100px; padding: 0 1em; transition: 0.5s;  }
header nav ul a li:hover  { background: rgba(203,203,203,0.40); color: #b1788f; }

header nav ul a li.tel    { border: solid 1px #b1788f; border-radius: 20px; align-items: center; line-height: 2.3; color: #b1788f; margin: 0 2em 0 1em }
header nav ul a li.tel:hover { background: #b1788f; color: #FFF; }
header nav ul a li.tel::before { content: "\f095"; font-family: "Font Awesome 6 Free"; font-weight: 900; padding: 0 0.4em 0 0; }
header nav ul a li.contact{ background: #b1788f; border: solid 1px #b1788f; border-radius: 20px; line-height: 2.3; color: #FFF; }
header nav ul a li.contact:hover { background: #fff; color: #b1788f; }
header nav ul a li.contact::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; padding: 0 0.4em 0 0; }


/***************
FOOTER 
***************/
footer                   { width: 100%; padding: 40px 0 0; }
footer article           { margin: 0 5vw; border-top: solid 1px #cecece; padding: 50px 0!important; }
footer article ul        { display: flex;  }

footer a li              { font-size: 88%; margin: 0 2em; }
footer a li::before      { content: "\f0a9"; font-family: "Font Awesome 6 Free"; font-weight: 900; padding: 0 0.4em 0 0; }
footer p                 { font-size: 13px; }



.pink { background: #fcf7ff!important; }

/****************
TOP PAGE 
****************/
/**** メインビジュアル セクション ****/
#home .main_vis {
  position: relative;
  height: 100%;
}

#home .main {
  width: 100%;
  min-height: 100vh;
  background: url(img/main-vis.jpg) bottom center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}


#home .main .camp-btn { position: absolute; top: 140px; right: 40px; border: solid 1px #FFF;  border-radius: 10px; background: rgba(255,255,255,0.60) }
.main .camp-btn img { width: 250px; height: auto; padding: 5px; box-sizing: border-box; }
.main .camp-btn a img:hover { opacity: 0.6; }

/****　ニュース セクション　****/
section.news              { z-index: 15; padding-bottom: 100px; }
section.news article      { display: flex; position: relative; padding: 0 5vw; justify-content: space-between; }

/**** ニュースタイトルバナー ****/
article .newsTitleArea    { width: 27%; }
article .newsTitle        { width: 100%; border: solid 1px #af758d; padding: 15px; box-sizing: border-box; background: #FFF; margin-top: -23%; }
article .newsTitle .title-inner { background: #af758d; text-align: center; padding: 50px 2vw 40px; box-sizing: border-box; font-size: 85%; }
.title-inner h2           { font-size: 144%; color: #FFF; margin-bottom: 22px; }
.title-inner p            { line-height: 58px;  border: solid 1px #FFF; color: #FFF; }
.title-inner p:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 白の20%不透明（=80%透明） */
  transition: background-color 0.3s ease;     /* 滑らかに変化 */
}

/****　ニュースエリア　****/
section.news .newsArea    { width: 70%; }
.newsPost                 { margin-bottom: 40px; }
.newsPost li a            { display: flex; border-bottom: solid 1px #cecece; font-size: 85%; padding: 2em 3em; }
.newsPost li a .day       { width: 100px; margin-right: 1em; white-space: nowrap; }
.newsPost li a .cat       { background: #9775af; color: #fff; font-size: 0.93em; width: 90px; text-align: center; margin-right: 1em; height: 100%; }
.newsPost li a:hover { background: rgba(237,237,237,0.65); }

.caution                  { border: solid 1px #cecece; padding: 30px; box-sizing: border-box;
}
.caution p.cautionTitle   { margin-bottom: 0.8em; font-size: 100%; }
.caution p.cautionTitle::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    padding: 0 0.4em 0 0;
}
.caution p                { font-size: 88%; }

/****　キレイシリーズエリア　****/
section.kireiArea         { display: flex; justify-content: space-between; margin-bottom: 100px; position: relative; }
section.kireiArea .top_l  { width: 50%; background: url("img/top01.png")no-repeat center / cover; }
section.kireiArea .top_r  { width: 50%; padding: 90px; box-sizing: border-box; }

section.kireiArea h2      { font-size: 266%; }
section.kireiArea h2 + p  { font-size: 133%; margin-bottom: 80px; }

section.kireiArea h3      { font-size: 166%; }

section.kireiArea ul.moreView li { margin-top: 35px; background: url("img/btn_moreView.png") no-repeat; width: 383px; line-height: 57px; }
section.kireiArea ul.moreView a li { color: #FFF; text-align: center; position: relative; }
section.kireiArea ul.moreView a li::after { content: "〉"; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); }

/****  主要美容成分エリア  ****/

section.ingredient        { background: url(img/section-bg.png) no-repeat center fixed; background-size: cover; padding-top: 350px; }


section.ingredient h2.ingr { font-size: 266%; color: #FFF; text-align: center; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); margin-bottom: 80px; }

section.ingredient article { background: #FFF; padding: 95px 0; display: flex; }

section.ingredient article.rev { flex-direction: row-reverse; }

/***　Wエクソソーム　***/
.ingredient article .top_l2 { width: 50%; padding: 50px 90px; box-sizing: border-box; }
.ingredient article .top_r2 { width: 50%; display: flex; }

.ingredient article .top_r3 h2,
.ingredient article .top_l2 h2 { font-size: 166%; margin-bottom: 55px; }
.ingredient article .top_l4 h3,
.ingredient article .top_r3 h3,
.ingredient article .top_l2 h3 { font-size: 133%; margin-bottom: 1em; } 
.ingredient article .top_r3 p,
.ingredient article .top_l2 p  { margin-bottom: 2.5em; font-size: 88%; }
.ingredient article .top_r3 p:last-child,
.ingredient article .top_l2 p:last-child { margin-bottom: 0; }

.ingredient article .top_r2 .top_r2_01 { width: 50%; background: url("img/top02.png") no-repeat center / cover; }
.ingredient article .top_r2 .top_r2_02 { width: 50%; background: url("img/top03.png") no-repeat center / cover; }

p span.cap                       { font-size: 77%; }

.ingredient article .top_r3 { width: 50%; padding: 40px 70px; box-sizing: border-box; }
.ingredient article .top_l3 { width: 50%; display: flex; }

.ingredient article .top_l3 .top_l3_01 { width: calc(100% / 3 ); background: url("img/top04.png") no-repeat center / cover; }
.ingredient article .top_l3 .top_l3_02 { width: calc(100% / 3 ); background: url("img/top05.png") no-repeat center / cover; }
.ingredient article .top_l3 .top_l3_03 { width: calc(100% / 3 ); background: url("img/top06.png") no-repeat center / cover; }

.ingredient article .top_l4 { width: 50%; padding: 90px; box-sizing: border-box; }
.ingredient article .top_r4 { width: 40%; background: url("img/top07.png") no-repeat center / cover; }


/****************
LP 
****************/
/*#lp .main_vis {
  position: relative;
  height: 100%;
}*/

#lp .main {
  width: 100%;
  min-height: 100vh;
  background: url(img/lp-main-vis.jpg) bottom center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* フェード用の疑似要素 */
#lp .main::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: bottom center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
  pointer-events: none;
}
#lp .main::before {
  background-image: var(--next-bg);
}

#lp .main.fade-next::before {
  opacity: 1;
}

#lp .main h2 { color: rgba(245,245,245,0.40) }

#lp .oubo { padding: 90px 0; }
#lp article { padding: 0 5vw; }
#lp .oubo article dl {
    display: flex;
    flex-wrap: wrap;
    border: solid 1px #d53072;
    box-sizing: border-box;
    margin-bottom: 70px;
}
#lp .oubo article dl dt { width: 20%; background-color: #d53072; color: #FFF;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 230%; text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0; }
#lp .oubo article dl dd { width: 80%; padding: 1em 2.5em; box-sizing: border-box; }

#lp .oubo article dl dd.oubo-line { display: flex; justify-content: space-between; align-items: center; }
#lp .oubo article dl dd.oubo-line p { line-height: 1; }
#lp .oubo article dl dd.oubo-line p.friend { line-height: 1.4; }
#lp .oubo article dl dd.oubo-line p a { background-color: #50b631; color: #FFF; padding: 0.9em 2em; border-radius: 0.8em; white-space: nowrap; }
#lp .oubo article dl dd.oubo-line p a:hover { opacity: 0.7; }

#lp .starter { }
#lp .nayami article,
#lp .starter article { padding: 0 10vw; }

#lp .nayami article h2, 
#lp .starter article h2 { font-size: 44px; color: #b0272b; line-height: 1; margin-bottom: 0.5em; }
#lp .starter article h2 span { font-size: 30px;  }
#lp .starter article h3 { font-size: 38px; color: #b0272b; }

#lp .starter article .gyoumu { display: flex; margin: 30px 0; }

#lp .starter article h4 { border: solid 1px #d53072; border-radius: 1em; display: inline-block; font-size: 24px; color: #D53072; padding: 0 1em; line-height: 38px; margin-bottom: 0.8em; }

#lp .starter article .present li,
#lp .starter article .gyoumu li { list-style: disc; margin-left: 1.5em; width: 340px; }
#lp .starter article .present li dl,
#lp .starter article .gyoumu li dl { display: flex; justify-content: space-between; }
#lp .starter article .present li dt,
#lp .starter article .gyoumu li dt { width: 12em; }
#lp .starter article .present .column-ri,
#lp .starter article .gyoumu .column-ri { padding: 0 80px; }

#lp .starter article .present { display: flex; margin: 30px 0; }

#lp .starter article .sample { display: flex; margin: 30px 0; }

p span.big { font-size: 140%; color: #B0272B; }

#lp .nayami article p { font-size: 160%; }
#lp .nayami article .nayamiArea { display: flex; justify-content: space-between; align-items: center; margin: 50px 0; }
#lp .nayami article .nayamiArea p { width: 30%; font-size: 150%; color: #b0272b; white-space: nowrap; }
#lp .nayami article .nayamiArea p:nth-child(2) { width: 40%; }
#lp .nayami article .nayamiArea p img { width: 100%; height: auto; }

#lp .nayami article p.staff {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 30px;
  line-height: 66px;
  padding: 0 70px;
  color: #FFF;
  background-color: #d53072;
  display: inline-block;
  position: relative; /* 基準として必要 */
  margin-top: 50px;
  cursor: pointer;
}

#lp .nayami article p.staff::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 通常の中央より5%上へ移動 */
  right: 20px; /* テキストの右端からの位置（調整可能） */
  width: 30px;
  height: 30px;
  background-image: url("img/crcle-tri.png");
  background-size: contain;
  background-repeat: no-repeat;
}

#lp .nayami article .staff_info {
    border: solid 1px #d53072; padding: 2em 2em 0;
    display: none;
    overflow: hidden;
}

#lp .nayami article .staff_info h2 {
    font-size: 24px; color: #000;
}
#lp .nayami article .staff_info dl { display: flex; gap: 40px; }

#lp .nayami article .staff_info p {
    font-size: 18px;
    margin-bottom: 1.35em;
}
#lp .nayami article .staff_info dt { width: 30%; }
#lp .nayami article .staff_info dt img { width: 100%; height: auto; }


/** ラインの登録方法 **/
#line .main {
    position: relative;
    height: 340px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#line .main .page-mv { position: absolute; top: 0; left: 0; height: 340px; }
#line .main img { object-fit: cover; width: 100%; height: 100%; }
#line .main h2 { position: relative; z-index: 1; opacity: 0.5; margin-bottom: -38px;  }

#line .qrArea { 
    display: flex;
    max-width: 850px;
    width: 80%;
    margin: 80px auto;
    gap: 7%;
}
#line .qrArea .qr {
    width: 21.6%;
}
#line .qrArea .qr img {
    width: 100%;
    height: auto;
}
#line .qrArea p {
    font-size: 48px;
    color: #06c755;
    line-height: 1.2;
}
#line .sample-pouch {
    background: #06c755;
    padding: 30px 50px;
    max-width: 850px;
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 7%;
}
#line .sample-pouch p {
    color: #FFF;
    font-size: 42px;
    line-height: 1.2;
}
#line h3 { 
    font-size: 44px;
    text-align: center;
    margin: 80px auto 40px;
}
#line h4 {
    background: #06c755;
    color: #FFF;
    font-size: 44px;
    max-width: 960px;
    width: 85%;
    margin: auto;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.4;
}
#line .qr-method {
    max-width: 1400px;
    width: 90%;
    margin: 50px auto;
    display: flex;
    gap: 0.7%;
}
#line .qr-method-cont {
    width: 21.85%;
}
#line .qr-method-cont2 {
    width: 2.8%;
    padding: 150px 0;
}
#line .qr-method-cont img,
#line .qr-method-cont2 img {
    width: 100%;
    height: auto;
}

#line .search-method {
    max-width: 695px;
    width: 90%;
    margin: 50px auto;
    display: flex;
    gap: 1.4%;
}
#line .search-method .qr-method-cont {
    width: 45.6%;
}
#line .search-method .qr-method-cont2 {
    width: 6%;
}

#line .message h2 {
    font-size: 48px;
    color: #b0272b;
    line-height: 1;
    margin: 80px 0;
    text-align: center;
}

/**ページ共通**/
/** ラインの登録方法 **/
#page .main {
    position: relative;
    height: 340px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#page .main .page-mv { position: absolute; top: 0; left: 0; height: 340px; width: 100%; }
#page .main img { object-fit: cover; width: 100%; height: 100%; }
#page .main h2 { position: relative; z-index: 1; opacity: 0.5; margin-bottom: -20px;  }





/**タブ**/
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  max-width: 1400px;
  width: 85%;
  margin: 0 auto;
}

/* ▼タブをflexで並べる枠を追加▼ */
.tab_labels {
  display: flex;
  gap: 15px; /* ← ここで隙間をつける */
  margin-bottom: -3px; /* 下線と整合を取るために調整（必要に応じて） */
}

/* タブボタンのスタイル */
.tab_item {
  flex: 1;
  height: 50px;
  border-bottom: 3px solid #b1788f;
  background-color: #fff;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #969696;
  transition: all 0.2s ease;
  padding: 0 10px;
  box-sizing: border-box;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#company:checked ~ #company_content,
#history:checked ~ #history_content,
#QA:checked ~ #QA_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #E6CDD7;
  color: #b0272b;
}

/* 選択中のタブのlabelを、[for="id"] で指定する */
#company:checked ~ .tab_labels label[for="company"],
#history:checked ~ .tab_labels label[for="history"],
#QA:checked ~ .tab_labels label[for="QA"] {
  background-color: #E6CDD7;
  color: #b0272b;
}

#page article {
    padding: 90px 0;
}
#page h2 {
    font-size: 44px;
    color: #b0272b;
    line-height: 1;
    margin-bottom: 2.5em;
    text-align: center;
    
}
#page h3 {
    font-size: 38px;
    color: #b0272b;
    padding: 40px 0 15px;
    margin-bottom: 40px;
    border-bottom: solid 1px #b0272b;
}
#page .tab_content .c-inner p {
    margin-bottom: 1.0em;
}
#page .c-inner,
#page .tab_content .c-inner {
    padding-left: 13%;
}

#page .tab_content .c-inner .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;    
}
#page .tab_content .c-inner .flex p {
    width: 70%;
    text-align: center;
}
#page .tab_content .c-inner .flex .karino {
    width: 30%;
}
.karino img { width: 100%; height: auto; }

.c-inner .c-table {
    width: 100%;
}
.c-inner .c-table tr {
    border-bottom: solid 1px #969696;
}
.c-inner .c-table th {
    font-weight: bold;
}
.c-inner .c-table th,
.c-inner .c-table td {
    vertical-align: top;
    padding: 1.4em 0;
}

.c-enkaku {
    line-height: 1.75;
}
.c-enkaku_item {
    position: relative;
    display: flex;
}
.c-enkaku__date {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 5.8rem;
    padding-right: 1.6rem;
    font-weight: bold;
    color: #B02658;
}
.c-enkaku__date:before,
.c-enkaku__date:after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
}
.c-enkaku__date:before {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #B02658;
    top: 0.5em;
    right: 0;
}
.c-enkaku__date:before,
.c-enkaku__date:after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
}
.c-enkaku__date:after {

    width: 1px;
    height: 150%;
    top: 1.0em;
    right: 0.33rem;
    background: #B02658;
}
.c-enkaku__dtl {
    padding-left: 2.6rem;
}

.ques {
    border: solid 1px #969696;
    background: #F5F5F5;
    margin-bottom: 1.5em;
    padding: 1em 1.5em;
}
.ques::before {
    content: "Q.";
    font-family: Georgia, "Times New Roman", Times, "serif";
    color: #b02658;
    margin-right: 0.5em;
    font-size: 150%;
}
.ans {
    border: solid 1px #969696;
    padding: 1em 1.5em;
    display: none;
    overflow: hidden;
    margin-bottom: 1.5em;
    margin-left: 2em;
}
.ans::before {
    content: "Ans.";
    font-family: Georgia, "Times New Roman", Times, "serif";
    color: #b02658;
    margin-right: 0.5em;
    font-size: 150%;
}

.p-inner {
    max-width: 1400px;
    width: 85%;
    margin: 0 auto;
}
.p-flex { 
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5%;
    margin-bottom: 4em;
}
.p-flex .p-img {
    width: 35%;
}
.p-flex .p-img img {
    width: 100%;
    height: auto;
}

.p-flex .p-content {
    width: 60%;
}
.p-inner h4 {
    font-size: 28px;
    line-height: 1.2;
    color: #b0272b;
    margin-bottom: 1.5em;
}
.note { font-size: 14px; }
.p-content .p-volume {
    margin-top: 2em;
}
span.price {
    font-size: 140%;
    font-family: Georgia, "Times New Roman", Times, "serif";
    font-weight: bold;
    color: #B02654;
}

.friend,
.campaign,
.contactus,
.post_area {
    max-width: 1400px;
    width: 85%;
    margin: auto;
}
#page .post_area h2 {
    text-align: left;
    font-size: 40px;
}

.friend p,
.campaign p,
.contactus p,
.post_area p {
    width: 90%;
    margin: 1.5em auto;
}

.friend form,
.campaign form,
.contactus form {
    max-width: 1400px;
    width: 85%;
    margin: 25px auto 50px;
    padding: 10px 0;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 7px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
    font-size: 95%;
    line-height: 1.8;
}
.friend form dl,
.campaign form dl,
.contactus form dl {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    padding: 15px 0;
    text-align: right;
    flex-wrap: wrap;
}
.friend form dt,
.campaign form dt,
.contactus form dt {
    width: 30%;
    padding: 15px 0;
    border-top: solid 1px #ccc;
}

.friend form dt p,
.campaign form dt p,
.contactus form dt p {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
} 
.friend form dt p .require,
.campaign form dt p .require,
.contactus form dt p .require {
    background: #d9534f;
    border: 1px solid #d43f3a;
    display: inline-block;
    float: left;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 3px;
}
.friend form dt p .optional,
.campaign form dt p .optional,
.contactus form dt p .optional {
    background: #337ab7;
    border: 1px solid #2e6da4;
    display: inline-block;
    float: left;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 3px;
}

.friend form dd,
.campaign form dd,
.contactus form dd {
    width: 70%;
    padding: 15px 0 15px 5%;
    box-sizing: border-box;
    text-align: left;
    border-top: solid 1px #ccc;
}
.friend form textarea,
.friend form input[type="url"],
.friend form input[type="text"],
.friend input[type="email"],
.friend input[type="tel"],
.campaign form textarea,
.campaign form input[type="url"],
.campaign form input[type="text"],
.campaign input[type="email"],
.campaign input[type="tel"],
.contactus form textarea,
.contactus form input[type="url"],
.contactus form input[type="text"],
.contactus input[type="email"],
.contactus input[type="tel"] {
    max-width: 90%;
    padding: 7px 2%;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #fafafa;
    -webkit-appearance: none;
    font-size: 100%;
    font-family: inherit;
    margin-top: 7px;
}

.friend input[type="button"],
.friend input[type="submit"],
.campaign input[type="button"],
.campaign input[type="submit"],
.contactus input[type="button"],
.contactus input[type="submit"] {
    background-color: #24890d !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 10px 30px 11px !important;
    text-transform: uppercase !important;
    vertical-align: bottom !important;
    margin-top: 15px !important;
    cursor: pointer;
    margin-right: 1.5em;
}
.friend div.btn,
.camapaign div.btn,
.contactus div.btn {
    width: 90%;
    margin: 0 auto;
}
.friend .to-top,
.campaign .to-top,
.contactus .to-top {
     text-align: center;
}
.friend .to-top a,
.campaign .to-top a,
.contactus .to-top a {
    display: inline-block;
    border: solid 1px #b1788f;
    border-radius: 20px;
    align-items: center;
    line-height: 2.3;
    color: #b1788f;
    padding: 0 1em;
    margin: 0 2em 0 1em; 
}
.friend .to-top a:hover,
.campaign .to-top a:hover,
.contactus .to-top a:hover {
    background: #b1788f;
    color: #FFF;
}


#page section article .exosomes,
#page section article .ingredients {
    max-width: 1200px;
    width: 85%;
    margin: auto;
}
#page section article .exosomes p,
#page section article .ingredients p {
    margin-bottom: 1.6em;
}

ul.moreView li { margin-top: 35px; background: url("img/btn_moreView.png") no-repeat; width: 383px; line-height: 57px; }
ul.moreView a li { color: #FFF; text-align: center; position: relative; }
ul.moreView a li::after { content: "〉"; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); }

.mt100 { padding-top: 100px; }



/**************
ホットニュース一覧
**************/
.archive                 { margin-bottom: 40px; max-width: 1440px; width: 80%; margin: auto; }
.archive ul { }
.archive li a            { border-bottom: solid 1px #cecece; display: flex; flex-wrap: wrap; padding: 1em 2em; }
.archive li a .day       { display: inline-block; width: auto; margin-right: 1.5em; width: 12%; white-space: nowrap; }
.archive li a .cat       { background: #9775af; color: #fff; font-size: 0.93em; width: 10%; text-align: center; height: 100%; margin-right: 1.5em; }
.archive li a h3.sub     { color: #000!important; font-size: 100%!important; border-bottom: none!important; padding: 0!important; margin-bottom: 0!important; width: 70%; }


.archive li a:hover      { background: rgba(237,237,237,0.65); }

.wp-pagenavi { margin-top: 2em; }


.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #d6d6d6;
}



.pc { display: block; }
.sp { display: none; }


    /* タブレット */

    @media (min-width: 768px) and (max-width: 1260px) {

        .wrapper {
            overflow: hidden;
            min-width: 100%;
        }

        header {  min-width: 100%; }
        header nav .flex { display: block; }
        header nav ul a li { line-height: 40px; }
        
        
        #home .main {
            width: 100%;
            min-height: 100vh;
            background: url(img/main-vis-pad.jpg) center;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        #home .main .camp-btn { position: absolute; top: 140px; right: 40px; border: solid 1px #FFF;  border-radius: 10px; background: rgba(255,255,255,0.60) }
        .main .camp-btn img { width: 250px; height: auto; padding: 5px; box-sizing: border-box; }
        .main .camp-btn a img:hover { opacity: 0.6; }
        
        .friend form dl,
        .campaign form dl,
        .contactus form dl {
            display: block;
        }
        .friend form dt,
        .campaign form dt,
        .contactus form dt {
            width: 100%;
            padding: 5px 0;
        }
       .friend form dt p,
       .campaign form dt p,
       .contactus form dt p {
            width: 100%;
            justify-content: flex-start;
        }
        .friend form dt p span,
        .campaign form dt p span,
        .contactus form dt p span {
            margin-right: 2em;
        }
        .friend form dd,
        .campaign form dd,
        .contactus form dd {
            width: 100%;
            padding: 0px 0 5px 5%;
        }
        
        .archive                 { max-width: 1260px; width: 86%; }
        .archive li a            { border-bottom: solid 1px #cecece; display: flex; flex-wrap: wrap; padding: 1em 1.5em; }
        .archive li a .day       { display: inline-block; width: auto; margin-right: 1.5em; width: 12%; white-space: nowrap; }
        .archive li a .cat       { background: #9775af; color: #fff; font-size: 0.93em; width: 15%; text-align: center; height: 100%; margin-right: 1.5em; }

        .archive li a:has(.cat) h3.sub      { color: #000!important; font-size: 100%!important; border-bottom: none!important; padding: 0!important; margin-bottom: 0!important; width: 60%; }

        .archive li a:not(has(.cat)) h3.sub { color: #000!important; font-size: 100%!important; border-bottom: none!important; padding: 0!important; margin-bottom: 0!important; width: 82%!important; }

        .archive li a:hover                 { background: rgba(237,237,237,0.65); }

    }

    /* スマホ */
    @media only screen and (max-width: 767px) {
        .pc { display: none; }
        .sp { display: block; }

        nav.sp ul {
            display: none;
        }
        nav.sp.open ul {
            display: block;
        }

        .wrapper {
            overflow: hidden;
            min-width: 100%;
            /*padding-top: 100px;*/
        }

        header {  min-width: 100%; }
        
        #home .main {
            width: 100%;
            min-height: 100vh;
            background: url(img/main-vis-sp.jpg) center;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        .main .camp-btn { width: 40%; right: 20px!important; }
        .main .camp-btn img { width: 100%; height: auto; }

        #sp-navi-btn ,
        #sp-navi-btn span {
    	    display: block;
    	    transition: all .3s;
        }
        #sp-navi-btn {
        	display: block;
        	width: 50px;
        	height: 26px;
        	position: absolute;
        	right: 20px;
        	top:34px;
        }
        #sp-navi-btn span {
        	position: absolute;
        	left: 0;
        	width: 100%;
        	height: 2px;
        	background-color: #af758d;;
        	border-radius: 2px;
        }
        #sp-navi-btn span:nth-of-type(1) {
        	top: 0px;
        }
        #sp-navi-btn span:nth-of-type(2) {
        	top: 12px;
        }
        #sp-navi-btn span:nth-of-type(3) {
        	bottom: 0px;
        }
        #sp-navi-btn span:nth-of-type(4):after {
            content: "MENU";
            letter-spacing: 0px;
            color: #af758d;;
            font-size: 100%;
        }

        #sp-navi-btn.open span:nth-of-type(1) {
        	-webkit-transform: translateY(12px) rotate(-45deg);
        	transform: translateY(12px) rotate(-45deg);
        }
        #sp-navi-btn.open span:nth-of-type(2) {
        	opacity: 0;
        }
        #sp-navi-btn.open span:nth-of-type(3) {
        	-webkit-transform: translateY(-12px) rotate(45deg);
        	transform: translateY(-12px) rotate(45deg);
        }
        #sp-navi-btn span:nth-of-type(4) {
            bottom: 0px;
            background: none;
        	top: 30px;
        }

        nav {
        	margin: 0 !important;
        	height: 0px !important;
        	overflow: visible;
        	width: 100%;
        	top: 0px;
        	left: 0;
        	text-align: left;
        }
    
        nav ul {
        	display: none;
        	padding: 0;
        	position: absolute;
        	top: 100px;
        	left: 0;
        	background:#af758d;
        	width: 102%;
        	z-index: 999999;
        }

        nav li {
            display: block;
            border-bottom: 1px solid #FFF;
            background: none;
            float: none;
            height: auto;
            line-height: 30px !important;
            width: 100% !important;
        }
        nav li a {
            padding: 20px 0px 20px 8%;
            height: auto;
            width: 100% !important;
            text-align: left !important;
            font-size: 110%;
            color: #FFF !important;
            display: block;
            box-sizing: border-box;
        }
        nav li a:hover {
        	padding: 20px 0px 20px 8%;
        	width: 100% !important;
        	text-decoration:none;
        	background:#ededed;
        	color: #0a3e73 !important;
        	display:block;
        }
        
        
        section.news article {
            display: block;
            position: relative;
            padding: 0 5vw;
            justify-content: space-between;
        }
        article .newsTitleArea {
            width: 100%;
        }
        section.news .newsArea {
            width: 100%;
        }
        
        .newsPost li a {
            display: flex;
            flex-wrap: wrap;
            border-bottom: solid 1px #cecece;
            font-size: 100%;
            padding: 1em;
        }
        .newsPost li a .day {
            width: 100%;
            margin-right: 1em;
        }
        section.kireiArea {
            display: block;
            justify-content: flex-start;
            flex-wrap: wrap;
            
        }
        section.kireiArea .top_l { width: 100%; }
        section.kireiArea .top_l img { width: 100%; height: auto; }
        section.kireiArea .top_r { width: 100%; padding: 0 3vw; }
        
        section.ingredient {
            background: url(img/section-bg-sp.png) no-repeat top center;
            
            background-attachment: scroll;
            padding-top: 250px;
        }
        section.ingredient article {
            display: block;
            padding: 50px 0;
        }
        .ingredient article .top_l2 {
            width: 100%;
            padding: 40px 10vw;
            box-sizing: border-box;
        }
        .ingredient article .top_r2 {
            width: 100%;
            height: 350px;
        }
        .ingredient article .top_l3 {
            width: 100%;
            height: 350px;
        }
        .ingredient article .top_r3 {
            width: 100%;
            padding: 20px 10vw;
        }
        .ingredient article .top_l4 {
            width: 100%;
            padding: 20px 10vw;
        }
        .ingredient article .top_r4 {
            width: 100%;
            height: 200px;
            background-size: contain;
        }
        .ingredient article.rev { flex-direction: row; }
        
        
        /** キャンペーン ***/
        #lp .oubo {
            padding: 30px 0;
        }
        #lp .oubo article dl {
            display: block;
        }
        #lp .oubo article dl dt {
            width: 100%;
            padding: 30px 0;
        }
        #lp .oubo article dl dd {
            width: 100%;
            padding: 1em;
        }
        #lp .oubo article dl dd.oubo-line {
            display: block;
        }
        #lp .oubo article dl dd.oubo-line p {
            line-height: 1.2;
        }
        #lp .oubo article dl dd.oubo-line p:last-child {
            text-align: center;
        }
        #lp .starter article .present,
        #lp .starter article .gyoumu {
            display:block;
        }
        #lp .starter article .present .column-ri,
        #lp .starter article .gyoumu .column-ri {
            padding: 0; 
        }

        #lp .starter article .present p img,
        #lp .starter article .gyoumu p img {
            width: 100%; height: auto;
        } 
        
        #lp .nayami article, #lp .starter article {
            padding: 0 5vw;
        }
        #lp .starter article .sample {
            display: block;
            margin: 30px 0;
        }
        #lp .starter article .sample p img {
            width: 100%; height: auto;
        }
        #lp .nayami article .nayamiArea {
            display: block;
        }
        #lp .nayami article .nayamiArea p {
            width: 100%;
        }
        #lp .nayami article .nayamiArea p:nth-child(2) {
            width: 80%;
        }
        #lp .nayami article .staff_info dl {
            display: block;
            gap: 0px;
        }
        #lp .nayami article .staff_info dt {
            width: 80%;
        }
        #lp .nayami article .staff_info {
            padding: 1em;
        }
        
        #line section { width: 94%; margin: auto; }
        #line .qrArea {
            display: block;
            margin: 50px auto;
            width: 100%;
        }
        #line .qrArea .qr {
            width: 50%;
            margin-bottom: 2.5em;
        }
        #line .qrArea p {
            font-size: 38px;
        }
        #line .sample-pouch {
            padding: 30px 20px;
            width: 100%;
            margin: auto;
            display: block;
            box-sizing: border-box;
        }
        #line .sample-pouch p {
            color: #FFF;
            font-size: 35px;
            letter-spacing: -0.06em;
            line-height: 1.2;
        }
        #line .sample-pouch .pouch-img {
            text-align: center;
        }
        #line h3 {
            margin: 80px auto 20px;
        }
        #line h4 {
            font-size: 36px;
            width: 100%;
        }
        #line .qr-method {
            width: 100%;
            margin: 50px auto;
            gap: 2%;
            flex-wrap: wrap;
        }
        #line .qr-method-cont {
            width: 40%;
        }
        #line .qr-method-cont2 {
            width: 6%;
        }
        #line .message h2 {
            font-size: 25px;
        }
        
        
        #page article {
            padding: 50px 0;
        }
        #page h2 {
            margin-bottom: 1.5em;
        }
        .tabs {
            width: 95%;
        }
        .tab_content {
            padding: 40px 15px 0;
        }
        #page .tab_content .c-inner {
            padding-left: 5%;
        }
        .c-inner .c-table th {
            font-weight: bold;
            white-space: nowrap;
            padding-right: 1.5em!important;
        }
        
        .p-inner {
            max-width: 1400px;
            width: 85%;
            margin: 0 auto;
        }
        .p-inner .c-inner {
            padding-left: 0!important;
        }
        
        .friend,
        .campaign,
        .contactus,
        .post_area {
            width: 95%;
            
        }
        
        .friend form dl,
        .campaign form dl,
        .contactus form dl {
            display: block;
        }
        .friend form dt,
        .campaign form dt,
        .contactus form dt {
            width: 100%;
            padding: 5px 0;
        }
       .friend form dt p,
       .campaign form dt p,
       .contactus form dt p {
            width: 100%;
            justify-content: flex-start;
        }
        .friend form dt p span,
        .campaign form dt p span,
        .contactus form dt p span {
            margin-right: 2em;
        }
        .friend form dd,
        .campaign form dd,
        .contactus form dd {
            width: 100%;
            padding: 0px 0 5px 5%;
        }
        
        .archive                 { width: 94%; }
        .archive li a            { border-bottom: solid 1px #cecece; display: flex; flex-wrap: wrap; padding: 1em 1.5em; }
        .archive li a .day       { display: inline-block; width: auto; margin-right: 1.5em; width: 100%; white-space: nowrap; }
        .archive li a .cat       { background: #9775af; color: #fff; font-size: 0.93em; width: 25%; text-align: center; height: 100%; margin-right: 1.5em; }

        .archive li a h3.sub      { color: #000!important; font-size: 100%!important; border-bottom: none!important; padding: 0!important; margin-bottom: 0!important; width: 100%; }



     
}
/*
@supports (-webkit-touch-callout: none) {
  section.ingredient {
    background-attachment: scroll;
  }
}
*/


.alignleft {
	display: inline !important;
	float: left !important;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
	margin: 0.4em 1.6em 1.6em 0;
}

blockquote.alignright,
.wp-caption.alignright,
img.alignright {
	margin: 0.4em 0 1.6em 1.6em;
}

blockquote.aligncenter,
.wp-caption.aligncenter,
img.aligncenter {
	clear: both;
	margin-top: 0.4em;
	margin-bottom: 1.6em;
}

.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
	margin-bottom: 1.2em;
}

/* ContactForm7 */
span .wpcf7-list-item { 
display : block ;
}