@charset "UTF-8";
/* Reset Style
 * --------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0; }

a {
  text-decoration: none; }

table {
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal; }

strong {
  font-weight: bold; }

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #444; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0; }

/* ////////////////////////////////////////////////
  Font Style
//////////////////////////////////////////////// */
body {
  font-size: 16px;
  /*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
  font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  *font-size: small;
  *font: x-small;
  line-height: 0; }

/* text size sample *8-40 number is pixel number */
.text8 {
  font-size: .5rem; }

.text9 {
  font-size: .5625rem; }

.text10 {
  font-size: .625rem; }

.text11 {
  font-size: .6875rem; }

.text12 {
  font-size: .75rem; }

.text13 {
  font-size: .8125rem; }

.text14 {
  font-size: .875rem; }

.text15 {
  font-size: .9375rem; }

.text16 {
  font-size: 1rem; }

.text17 {
  font-size: 1.0625rem; }

.text18 {
  font-size: 1.125rem; }

.text19 {
  font-size: 1.1875rem; }

.text20 {
  font-size: 1.25rem; }

.text21 {
  font-size: 1.3125rem; }

.text22 {
  font-size: 1.375rem; }

.text23 {
  font-size: 1.4375rem; }

.text24 {
  font-size: 1.50rem; }

.text25 {
  font-size: 1.5625rem; }

.text26 {
  font-size: 1.625rem; }

.text27 {
  font-size: 1.6875rem; }

.text28 {
  font-size: 1.75rem; }

.text29 {
  font-size: 1.8125rem; }

.text30 {
  font-size: 1.875rem; }

.text31 {
  font-size: 1.9375rem; }

.text32 {
  font-size: 2rem; }

.text33 {
  font-size: 2.0625rem; }

.text34 {
  font-size: 2.125rem; }

.text35 {
  font-size: 2.1875rem; }

.text36 {
  font-size: 2.25rem; }

.text37 {
  font-size: 2.3125rem; }

.text38 {
  font-size: 2.375rem; }

.text39 {
  font-size: 2.4375rem; }

.text40 {
  font-size: 2.5rem; }

/*
Font-size list (base: 16px)
 8px = 50%
 9px = 56.25%
10px = 62.5%
11px = 68.75%
12px = 75%
13px = 81.25%
14px = 87.5%
15px = 93.75%
16px = 100%
17px = 106.25%
18px = 112.5%
19px = 118.75%
20px = 125%
21px = 131.25%
22px = 137.5%
23px = 143.75%
24px = 150%
25px = 156.25%
26px = 162.5%
27px = 168.75%
28px = 175%
29px = 181.25%
30px = 187.5%
31px = 193.75%
32px = 200%
33px = 206.25%
34px = 212.5%
35px = 218.75%
36px = 225%
37px = 231.25%
38px = 237.5%
39px = 243.75%
40px = 250%
*/
/* base 13px */
/* text size sample *10-26 number is pixel number */
/*
.text8 { font-size: 62%; }
.text9 { font-size: 70%; }
.text10 { font-size: 77%; }
.text11 { font-size: 85%; }
.text12 { font-size: 93%; }
.text13 { font-size: 100%; }
.text14 { font-size: 108%; }
.text15 { font-size: 116%; }
.text16 { font-size: 124%; }
.text17 { font-size: 131%; }
.text18 { font-size: 139%; }
.text19 { font-size: 147%; }
.text20 { font-size: 154%; }
.text21 { font-size: 162%; }
.text22 { font-size: 170%; }
.text23 { font-size: 177%; }
.text24 { font-size: 185%; }
.text25 { font-size: 193%; }
.text26 { font-size: 200%; }
.text27 { font-size: 208%; }
.text28 { font-size: 216%; }
.text29 { font-size: 224%; }
.text30 { font-size: 231%; }
.text31 { font-size: 239%; }
.text32 { font-size: 247%; }
.text33 { font-size: 254%; }
.text34 { font-size: 262%; }
.text35 { font-size: 270%; }
.text36 { font-size: 277%; }
.text37 { font-size: 285%; }
.text38 { font-size: 293%; }
.text39 { font-size: 300%; }
.text40 { font-size: 308%; }
*/
/*
Font-size list (base: 13px)
 62% =  8px
 70% =  9px
 77% = 10px
 85% = 11px        162% = 21px        239% = 31px
 93% = 12px        170% = 22px        247% = 32px
100% = 13px        177% = 23px        254% = 33px
108% = 14px        185% = 24px        262% = 34px
116% = 15px        193% = 25px        270% = 35px
124% = 16px        200% = 26px        277% = 36px
131% = 17px        208% = 27px        285% = 37px
139% = 18px        216% = 28px        293% = 38px
147% = 19px        224% = 29px        300% = 39px
154% = 20px        231% = 30px        308% = 40px
*/
p {
  font-size: 100%;
  line-height: 1.5; }

h1 {
  font-size: 100%;
  line-height: 1.5; }

h2 {
  font-size: 100%;
  line-height: 1.5; }

h3 {
  font-size: 100%;
  line-height: 1.5; }

h4 {
  font-size: 100%;
  line-height: 1.5; }

h5 {
  font-size: 100%;
  line-height: 1.5; }

h6 {
  font-size: 100%;
  line-height: 1.5; }

table {
  font-size: 100%;
  line-height: 1.5; }

ul, ol, dl {
  font-size: 100%;
  line-height: 1.5; }

strong {
  font-weight: bold; }

sub {
  font-size: 64%;
  line-height: 1; }

sup {
  font-size: 64%;
  line-height: 1; }

form {
  line-height: 1.5; }

/* setting a consistent width, 160px; 
   control of type=file still not possible */
input[type=text], input[type=password], textarea {
  font-size: 100%;
  width: 12.25em;
  *width: 11.9em; }

/*-------------------------------------------------
  Links 
-------------------------------------------------*/
/* Links */
a:link {
  text-decoration: none; }

a:visited {
  text-decoration: underline; }

a:hover, a:active {
  text-decoration: none; }

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.clearfix {
  min-height: 1px; }

* html .clearfix {
  height: 1px;
  /*¥*/
  /*/
	height: auto;
	overflow: hidden;
	/**/ }

.both {
  clear: both; }

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

/* Base Style
* --------------------------------------- */
body {
  color: #333; }

a:link {
  color: #369;
  text-decoration: underline; }

a:visited {
  color: #369;
  text-decoration: underline; }

a:hover {
  color: #369;
  opacity: .8;
  text-decoration: none; }

a:active {
  color: #369;
  opacity: .8;
  text-decoration: none; }

img {
  display: inline-block; }
  @media screen and (max-width: 640px) {
    img {
      max-width: 100%; } }

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

.sp {
  display: none; }
  @media screen and (max-width: 640px) {
    .sp {
      display: inline-block; } }

/*
 * header header header
 */
#header {
 /* background: #ee1c23;
  background: -moz-linear-gradient(top, #ee1c23 0%, #f9b3b6 80%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #ee1c23), color-stop(80%, #f9b3b6));
  background: -webkit-linear-gradient(top, #ee1c23 0%, #f9b3b6 80%);
  background: -o-linear-gradient(top, #ee1c23 0%, #f9b3b6 80%);
  background: -ms-linear-gradient(top, #ee1c23 0%, #f9b3b6 80%);
  background: linear-gradient(to bottom, #ee1c23 0%, #f9b3b6 80%);
  overflow: hidden;*/
  position: relative; }
  #header .inner {
    margin: 0 auto;
    max-width: 960px;
    position: relative; background-color: #fff;}
    #header .inner:before {
      background-color: #fff;
      content: '';
      height: 100%;
      position: absolute;
      right: 100%;
      top: 0;
      width: 100%; }

  #header .inquiryBtn {
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 2.21;
    margin-top: -1.105em;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 50%;
    text-align: center; }
    #header .inquiryBtn:before {
      background-image: url(../img/icInquiry.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      content: '';
      display: inline-block;
      height: 18px;
      margin-right: 5px;
      vertical-align: middle;
      width: 25px; }
    @media screen and (max-width: 640px) {
      #header .inquiryBtn {
        font-size: 12px;
        font-size: 0.75rem;
        right: 5%;
        padding: 0 1.5em; } }
  #header a:link,
  #header a:visited,
  #header a:hover,
  #header a:active {
    color: #ee1c23;
    text-decoration: none; }

#logo {
  background-color: #fff;
  display: inline-block;
  padding: 11px 0 15px;
  position: relative; }
  /* #logo:after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    height: 750px;
    position: absolute;
    right: -190px;
    top: -100px;
    width: 750px; }*/
  #logo a {
    display: block;
    position: relative;
    z-index: 1; }
  @media screen and (max-width: 640px) {
    #logo {
      max-width: 30%;
      padding-left: 5%; } }
#header .hinfo {    position: absolute;
    right: 0;
    top: 20%;
    text-align: right;}
/*.upper_block
	------------------------------*/
#header .ajinomoto_tpl_btn_global{
			display: block;
			font-size: 12px;
			line-height: 1;
			text-align: left;
			padding-bottom: 20px;
			/*padding-right: 30px;*/
		}
#header .ajinomoto_tpl_btn_global a{ color: #333;
			display: inline-block;
			text-decoration: none;
		}
#header .ajinomoto_tpl_btn_global a:hover{
			text-decoration: none;
			color: #DE0202;
		}
#header .ajinomoto_tpl_btn_global a::before{
			content: "";
			width: 17px;
			height: 18px;
			display: inline-block;
			background: url(//www.ajinomoto.com/en/shared_file/img/header_utility_global_icon.png) no-repeat;
			background-size: 17px 18px;
			position: relative;
			top: 4px;
			margin-right: 6px;}

  @media screen and (max-width: 640px) {
  #header .hinfo { max-width: 30%;padding-right: 3%;}
    #header .hinfo .inquiryBtnImg { }
  #header .ajinomoto_tpl_btn_global { display: none;}
  }

#contentNav {
  background: #d4222b;
  background: -moz-linear-gradient(top, #d4222b 0%, #b1171d 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #d4222b), color-stop(100%, #b1171d));
  background: -webkit-linear-gradient(top, #d4222b 0%, #b1171d 100%);
  background: -o-linear-gradient(top, #d4222b 0%, #b1171d 100%);
  background: -ms-linear-gradient(top, #d4222b 0%, #b1171d 100%);
  background: linear-gradient(to bottom, #d4222b 0%, #b1171d 100%);
  position: relative;
  z-index: 1; }
  #contentNav ul {
    border-right-color: rgba(0, 0, 0, 0.18);
    border-right-style: solid;
    border-right-width: 2px;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    max-width: 960px; }
  #contentNav li {
    border-left-color: rgba(0, 0, 0, 0.18);
    border-left-style: solid;
    border-left-width: 2px;
    flex-grow: 1;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2.5;
    text-align: center; }
  #contentNav a {
    display: block;
    height: 100%; }
    #contentNav a:link {
      color: #fff; }
    #contentNav a:visited {
      color: #fff; }
    #contentNav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
      opacity: 1; }
    #contentNav a:active {
      color: #fff; }

/*
 * footer footer footer
 */
#footer {
  margin: 0 auto;
  padding: 15px 0 50px;
  max-width: 960px;
  text-align: right; }

#copyright {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 1; }

/*
 * container container container
 */
#container {
  border-bottom-color: #ef232a;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  padding: 30px 0 76px; }
  #container .inner {
    margin: 0 auto;
    max-width: 960px; }

#main {
  background-image: url(../img/mainBg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 28px;
  margin-bottom: 50px;
  padding-bottom: 310px;
  position: relative; }
  #main .logo {
    position: absolute;
    left: 3%;
    top: 6%;
    /*width: 38%;*/ }
  #main .mainLead {
    position: absolute;
    left: 4.9%;
    bottom: 15%; }
    @media screen and (max-width: 640px) {
	 #main .logo {width: 50%;}
      #main .mainLead {
        font-size: 12px;
        font-size: 0.75rem; } }
  @media screen and (max-width: 640px) {
    #main {
      margin: 0 auto 0;
      padding-bottom: 32%;
      width: 90%; } }

h3 {
  font-size: 30px;
  font-size: 1.875rem;
  margin-bottom: .5em;
  text-align: center; }
  @media screen and (max-width: 640px) {
    h3 {
      font-size: 20px;
      font-size: 1.25rem; } }

.lead {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.66;
  margin-bottom: 85px;
  text-align: center; }
  @media screen and (max-width: 640px) {
    .lead {
      font-size: 14px;
      font-size: 0.875rem; } }

.contents {
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  padding: 0 30px 60px; }
  .contents.skinCare {
    background-color: #f1fcfd;
    border-color: #e6f0f1; }
  .contents.makeUp {
    background-color: #fdf5fb;
    border-color: #f3e8f0;
    margin-bottom: 50px; }
  .contents.hairCare {
    background-color: #fdf8ef;
    border-color: #f2ede5; }
  .contents h4 {
    margin: -25px auto 0;
    max-width: 547px;
    position: relative; }
    .contents h4 .txt {
      height: 25.625%;
      position: absolute;
      left: 0;
      top: 28.75%;
      text-align: center;
      width: 100%; }
      .contents h4 .txt img {
        height: 100%; }
    @media screen and (max-width: 640px) {
      .contents h4 {
        margin-top: -4.8%; } }
  @media screen and (max-width: 640px) {
    .contents {
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 5% 10%;
      width: 90%; } }

.kindList > li {
  border-top-color: #dadada;
  border-top-style: dotted;
  border-top-width: 1px;
  display: flex;
  justify-content: space-between;
  padding: 50px 0 30px; }
  .kindList > li:first-child {
    border-top: none;
    padding-top: 20px; }
  @media screen and (max-width: 640px) {
    .kindList > li {
      flex-wrap: wrap;
      justify-content: center; } }

.kindList .img {
  display: inline-block;
  position: relative; }
  .kindList .img img {
    border-radius: 50%; }
  .kindList .img i {
    background-image: url(../img/kindBg.png);
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    display: block;
    font-size: 15px;
    font-size: 0.9375rem;
    font-style: normal;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    width: 100px; }
    .kindList .img i:before, .kindList .img i:after {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      width: 1px; }
    .kindList .img i span {
      display: inline-block;
      vertical-align: middle; }

.kindList .description {
  max-width: 615px; }
  .kindList .description h5 {
    font-size: 25px;
    font-size: 1.5625rem;
    font-weight: bold;
    margin-bottom: .5em; }
  .kindList .description p {
    margin-bottom: 1.5em; }

.productsList {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .productsList li {
    background-color: #fff;
    border-color: #23a4ee;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    margin-bottom: 25px;
    width: 295px; }
    .productsList li.open .name:before {
      content: url(../img/arrowD.png); }
    .productsList li.open .type {
      border-bottom-right-radius: 0;
      height: 52px; }
  .productsList h6 {
    background-color: #23a4ee;
    cursor: pointer;
    position: relative; }
    .productsList h6 .name {
      box-sizing: border-box;
      display: block;
      height: 50px;
      padding: 12px 0 12px 15px; }
      .productsList h6 .name:before {
        content: url(../img/arrowR.png);
        display: inline-block;
        margin-right: 5px;
        vertical-align: middle; }
      .productsList h6 .name img {
        display: inline-block;
        vertical-align: middle; }
    .productsList h6 .type {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      box-sizing: border-box;
      color: #fff;
      display: block;
      font-size: 14px;
      font-size: 0.875rem;
      height: 54px;
      line-height: 18px;
      padding-top: 16px;
      position: absolute;
      right: -2px;
      top: -2px;
      text-align: center;
      width: 118px; }
      .productsList h6 .type.grn {
        background-color: #22c2aa; }
      .productsList h6 .type.vio {
        background-color: #7e55bc; }
      .productsList h6 .type.pnk {
        background-color: #bc5593; }
      .productsList h6 .type.orn {
        background-color: #ea8e72; }
      .productsList h6 .type.brn {
        background-color: #b48553; }
      .productsList h6 .type.plural {
        padding-top: 8px; }
  .productsList .info {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    padding: 20px 15px; }
    .productsList .info strong {
      display: block;
      font-size: 15px;
      font-size: 0.9375rem;
      min-height: 3em; }
    .productsList .info span {
      display: block;
      font-size: 15px;
      font-size: 0.9375rem;
      margin-bottom: .5em; }
    .productsList .info .close {
      background-color: #23a4ee;
      border-radius: 1em;
      color: #fff;
      cursor: pointer;
      display: block;
      font-size: 12px;
      font-size: 0.75rem;
      font-style: normal;
      line-height: 2em;
      margin: 0 auto;
      text-align: center;
      width: 6em; }

#inquiry {
  background-color: #fff7f6;
  border-color: #ee1c23;
  border-radius: 28px;
  border-style: solid;
  border-width: 2px;
  padding: 30px; }
  #inquiry .ic {
    background-image: url(../img/icInquiry.png);
    background-position: center top;
    background-repeat: no-repeat;
    color: #ee1c23;
    display: inline-block;
    font-style: normal;
    line-height: 1.5;
    margin-right: 38px;
    padding-top: 48px;
    text-align: center;
    vertical-align: top;
    width: 67px; }
  #inquiry p {
    display: inline-block;
    font-size: 18px;
    font-size: 1.125rem;
    vertical-align: top; }
    #inquiry p a {
      display: inline-block;
      margin-top: .8em; }
  @media screen and (max-width: 640px) {
    #inquiry {
      box-sizing: border-box;
      margin: 0 auto;
      max-width: 90%;
      padding: 5%; } }

#inquiryLink {
  background-image: url(../img/inquiryBg.png);
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  height: 154px;
  padding: 25px 0 0 15px;
  position: fixed;
  right: 0;
  top: 490px;
  text-align: center;
  width: 139px; }
  #inquiryLink:before {
    content: url(../img/icInquiryW.png);
    display: inline-block; }
  #inquiryLink p {
    color: #fff; }
  #inquiryLink .requests {
    font-size: 15px;
    font-size: 0.9375rem; }
  @media screen and (max-width: 640px) {
    #inquiryLink {
      display: none; } }

a#inquiryLink:link,
a#inquiryLink:visited,
a#inquiryLink:hover,
a#inquiryLink:active {
  color: #fff;
  text-decoration: none; }

.pgTopWrap {
  padding: 20px 0;
  text-align: right; }
  .pgTopWrap a:link {
    text-decoration: none; }
  .pgTopWrap a:visited {
    text-decoration: none; }
  .pgTopWrap a:hover {
    text-decoration: none; }
  .pgTopWrap a:active {
    text-decoration: none; }
  @media screen and (max-width: 640px) {
    .pgTopWrap {
      padding: 10% 0 20%; } }

.pgTop {
  background-color: #ee1c23;
  background-image: url(../img/arrowTop.png);
  background-position: center 20%;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 70px;
  position: relative;
  text-align: center;
  width: 70px; }
  .pgTop span {
    color: #fff;
    display: block;
    font-size: 11px;
    font-size: 0.6875rem;
    font-style: normal;
    line-height: 1.36;
    position: relative;
    top: 50%;
    width: 100%; }