body{
  font-family: 'M PLUS 1p', sans-serif;
   padding:0;
   margin:0;
}
  #wrap {

      background-color:whitesmoke;
  }
    #contents{
      max-width: 1280px;
    overflow-x: hidden;
      margin: auto;
    }
  .container {
    max-width: 1024px;
    margin: auto;
  }
   #header .nav {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #E60012;
    position: fixed;
    top: 0;
    opacity: 0.9;
  }
  .nav a{color:white;text-decoration: none;font-size:9px;}
  .nav h1{display: inline;font-weight: normal;}
  .nav a:hover{
    color:yellow;
    position:relative;
    left:1px;
  }
  #form02{
    background-color: white;
    width:100%;
    border: 1px green solid;
}
#form02 input{
    vertical-align: top;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent;
}
#form02{
    border-radius: 7px;
}
#input02{
    border: none;
    width: 90%;
    padding-left: 10px;
    font-size:1.1rem;

}
#submit02{
    width: 10%;
    border: none;
    background-image: url('https://www.analista.jp/img/logo/searchicon.png');
    background-position: center bottom -3px;
    background-size: contain;
    background-repeat: no-repeat;
}
.topLogo {
  text-align: center;
  margin-top: 45px;
  }
.topLogo img {
  max-width: 100%;
}
  .caption p{font-size:1.3rem;}
  #btn-area{padding:200px 0 0 0;}
  #choise .dropdown-menu{font-size:1.3rem;}
  .list-group .g1,.list-group .g2,.list-group .g4,.list-group .g5{color : white;}

  .dark{background-color: #F5F5F5;}
  .h2 a{color: #1C1C1C;font-weight:bold;}
  #footer li a:hover{color: pink;text-decoration: none;}
  .jumbotron{padding:180px 0 180px 0;}
  .searchForm{width:50%;font-size:2rem;}
  #kaisekiText{font-size:1.0rem;}
  .simg img{max-width:40px;position:relative;top:-10px;-webkit-transform:rotate(-10deg);transform:rotate(-10deg); }
  #first{font-weight:bold;font-size:1.3rem;}
  #second{font-weight:bold;font-size:1.2rem;}
  #third{font-weight:bold;font-size:1.1rem;}
  #accordion{max-width:960px;margin :auto; }
  #accordion i{float:left;}
  .btn1:hover{opacity:0.8;}
  .rnum{font-size:1.1rem;width:45px;}
  .journal p{font-size:1.4rem;}
  .logo{transition:box-shadow 0.2s ease ;}
  .logo:hover{box-shadow:1px 2.5px 3px black;-webkit-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}
  .logo:active{box-shadow:0px 0px 0px white;position:relative;top:2px;}
  .skyblue{color: skyblue;}
  #mainSearch{
    display: -ms-grid;
    display: grid;
    margin: 0.3em;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
    -ms-grid-columns: 1fr 80px;
        grid-template-columns: 1fr 80px;
                            grid-template-areas:
    "input sub_btn";
  }
  .under{
    background: linear-gradient(transparent 60%, yellow 60%);
}
.red{
  color: red;
  font-weight: bold;
}
#company {
  padding:1em 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  -ms-grid-columns: 1fr 3fr;
      grid-template-columns: 1fr 3fr;
  justify-items: center;
}

  #mainSearch .input{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: input;}
  #mainSearch .sub_btn{-ms-grid-row: 1;-ms-grid-column: 2;grid-area: sub_btn;}
  #indexGrid{
    display: -ms-grid;
    display: grid;
    max-width: 1280px;
    margin: auto;
    grid-gap: 0.5em 1em;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
        -ms-grid-columns: 180px 1fr 350px;
            grid-template-columns: 180px minmax(300px,auto) 350px;
                            grid-template-areas:
    "leftArea mainArea rightArea";
  }
  #leftArea{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: leftArea;}
  #mainArea{-ms-grid-row: 1;-ms-grid-column: 2;grid-area: mainArea;}
  #rightArea{-ms-grid-row: 1;-ms-grid-column: 3;grid-area: rightArea;}
  .nav-items a{color: #1C1C1C;background-color: lightgray;}
  #mainArea li a {
    text-decoration: none;
  }
  #scoreArea{
    display: -ms-grid;
    display: grid;
    background-color: snow;
    max-width: 1480px;
    margin: auto;
    justify-content: center;
    grid-column-gap: 1.5em;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
    -ms-grid-columns: minmax(140px,auto) minmax(140px,auto) minmax(140px,auto) minmax(90px,240px);
        grid-template-columns: minmax(140px,auto) minmax(180px,auto) minmax(180px,auto) minmax(90px,240px);
                            grid-template-areas:
    "img graf graf shop"
    "spec spec seller seller";
    grid-auto-flow: dense;
  }
  #scoreArea .img{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: img;text-align: center;}
  #scoreArea .rank{-ms-grid-row: 1;-ms-grid-column: 2;grid-area: rank;text-align: center;}
  #scoreArea .shop{-ms-grid-row: 1;-ms-grid-column: 4;grid-area: shop;text-align: center;-ms-grid-column-align: center;justify-self: center;}
  #scoreArea .seller{-ms-grid-row: 2;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: seller;}
  #scoreArea .spec{-ms-grid-row: 2;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: spec;}
  #scoreArea .graf{-ms-grid-row: 7;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: graf;font-size: 0.8rem;color:#1C1C1C;}
  #scoreArea .spec ul, ol {
  padding: 0;
  position: relative;
  z-index: 50;
}

  #scoreArea .spec ul li,#scoreArea ol li {
  color: #2d8fdd;
  border-left: solid 6px #2d8fdd;/*左側の線*/
  background: #f1f8ff;/*背景色*/
  margin-bottom: 3px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-size:0.8rem;
}

  #scoreArea .spec li span{
  float:right;
  padding-right: 1em;
  font-weight: bold;
  font-size:1.0rem;
}
  #scoreArea strong{
  font-size: 5.0rem;
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
  font-family: FontAwesome;
  text-align: center;
  vertical-align: middle;
}

  .rank lead,.point lead{
  /*vertical-align: top;*/
}

#KaisekiArea {
  display               : -ms-grid;
  display               : grid;
  max-width             : 1480px;
  height                : 100%;
  justify-content       : center;
  margin:auto;
  padding: 0.5em 1em;
  grid-gap: 2em;
  -ms-grid-columns : 1fr 3fr;
      grid-template-columns : 1fr 3fr;
  -ms-grid-rows    : auto auto auto;
      grid-template-rows    : auto auto auto;
          grid-template-areas   :
    'SideBar KaisekiText'
    'SideBar ingredients'
    'SideBar commercial';
  background-color      : #f5f5f5;
}
.area-SideBar {
    background-color: floralwhite;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: SideBar;
}
.area-SideBar ul {
  list-style-type: none;
}
.area-SideBar ul li:before{
   content: "◊";
   color: red;
}
.area-SideBar ul li a{
   text-decoration: none;
   color: black;
   font-size: 0.9rem;
}
.area-SideBar ul li a:hover{
   text-decoration: underline;
}

.area-KaisekiText {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: KaisekiText;
        margin: auto;
    max-width: 600px;
}
.area-ingredients {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: ingredients;
}
.area-commercial {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: commercial;
}

  .tox{
    background: linear-gradient(to right, red, #b22222);
  }
  .tox2{
    padding: 0.5em 2.6em;
    background: linear-gradient(to right, red, orange);
  }
  .tox h1,.tox2 h1{
    margin:0;
    padding:0.8em 0.2em;
    color:white;
    font-size: 6vmin;
    text-shadow: 1px 1px 5px gray;
    text-decoration: none;
    line-height: 4rem;
  }

  /*解析テキストエリア*/
  .h1_header {
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #E60012;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #2B4B65;/*左線*/
    font-size:1.4rem;
    margin: 1em 0;
  }
  .kaiseki{
    line-height: 1.8;
    font-size:1.2rem;
  }

.kaiseki h3,.caption h3 {
  position: relative;
  padding: 0.25em 0;
}
.kaiseki h3:after,.caption h3:after {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
.kaiseki p {
  font-size: 1.2rem;
  line-height: 2.8rem;
}

  header h2{
    background-color: gold;
    font-weight: bold;
    font-size: 1.4rem;
    padding: 0.4em 0.5em;
    color: red;
  }

 .kaiseki h4 {
   position: relative;
   padding-left: 1.2em;/*アイコン分のスペース*/
   line-height: 1.4;
   font-size:1.4rem;
 }

.kaiseki h4:before{
   content: "√";/*アイコンのユニコード*/
   position: absolute;/*絶対位置*/
   font-size: 1.3rem;/*サイズ*/
   left: 0;/*アイコンの位置*/
   top: 0;/*アイコンの位置*/
   color: #5ab9ff; /*アイコン色*/
 }
 #access a h1:hover{
  box-shadow: 1px 1px 2px gray;
  position:relative;top:1px;
  left:1px;text-decoration: none;
  background-color: #F5F5F5;
}
 .kaiseki strong,#macro strong{
  font-weight: bold;
}

 figure,figcaption{
  font-size:0.9rem;
  color:slategray;
 }


.h2_header{
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  font-size: 1.3rem;
  margin: 1.3em 0.5em;
  }

.h2_header:before{ font-family: "FontAwesome";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  }

.h1_tag{
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;/*上下中央*/
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  font-size:1.1rem;
}
.h1_tag:before {
  content: '●';
  color: white;
  margin-right: 8px;
}


footer {
  background-color: #E60012;
}
footer .footer{
  max-width: 1024px;
  display: -ms-grid;
  display: grid;
  margin:auto;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3,1fr);
  grid-row-gap: 3em;
  grid-row-gap: 2em;
}
footer .footer ul {
  list-style-type: none;
}
footer ul li a {
  color: white;
  text-decoration: none;
}
/*control css*/
button:hover{box-shadow:1px 1px 3px black;}
.prof{font-size:1.5rem;}
#mainControl2{
  display: -ms-grid;
  display: grid;
 -ms-grid-columns: (150px)[auto-fit];
     grid-template-columns: repeat(auto-fit,150px);
 justify-content: center;
 grid-auto-flow: dense;
 grid-row-gap: 10px;
 grid-column-gap: 5px;
   margin: 0 2em;
}
#mainControl2 a{
  box-shadow: 1px 1px 3px gray;
  text-align: center;
  padding:20px 0  20px 0;
  font-size:1.5rem;
  background-color: navy;
  border-radius: 10px;
  color:white;
}
#mainControl2 a:hover{
  opacity: 0.8;
  text-decoration: none;
}
#mainControl2 .en{
  background-color: red;
}
.lg_btn{
  -ms-grid-row:1;
  grid-row:1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3
}
.whiteContainer{
  background-color: white;
  color: #1C1C1C;
  border-radius: 10px;
  margin: 3em auto;
  padding: 3em;
  max-width: 1280px;
}
.whitesmokeContainer{
  background-color: whitesmoke;
  color: #1C1C1C;
  border-radius: 10px;
  margin: 3em auto;
  padding: 3em;
  max-width: 1280px;
}
#macro{
  display: -ms-grid;
  display: grid;
  grid-gap: 1.5em 0.2em;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  -ms-grid-columns: auto 1fr;
      grid-template-columns: auto 1fr;
                                                      grid-template-areas:
  " all_text all"
  " name_text name"
  " footer_text ...";
}
#macro .photo1{grid-area: photo1;text-align: center;}
#macro .photo2{grid-area: photo2;text-align: center;}
#macro .photo3{grid-area: photo3;text-align: center;}
#macro .all{-ms-grid-row: 1;-ms-grid-column: 2;grid-area: all;text-align: center;}
#macro .all_text{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: all_text;padding:1em 1.5em;}
#macro .name{-ms-grid-row: 2;-ms-grid-column: 2;grid-area: name;text-align: center;}
#macro .name_text{-ms-grid-row: 2;-ms-grid-column: 1;grid-area: name_text;}
#macro .footer_text{-ms-grid-row: 3;-ms-grid-column: 1;grid-area: footer_text;padding:1em 2em;}
#former{
  display               : -ms-grid;
  display               : grid;
  justify-content       : center;
  grid-row-gap          : 10px;
  grid-column-gap       : 5px;
  margin                : 0 2em;
  -ms-grid-rows         : auto auto auto;
  grid-template-rows    : auto auto auto;
  -ms-grid-columns      : 1fr 1fr;
  grid-template-columns : 1fr 1fr;
                                                      grid-template-areas   :
  "product ingredient"
  "seller  seller"
  "msg     msg";
}
#product{
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: product;
}
#ingredient{
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: ingredient;
}
#msg{
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: msg;
}
#seller{
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: seller;
}




#tag_list {
  padding: 0;
  margin-top:0.2em;
}

#tag_list li,#tag_list ol li {
  color: #404040;
  border-left: solid 6px #1fa67a;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-size:0.8rem;
}
#tag_list span {
  float:right;
  margin: 0 0.5em 0 1em;
  font-weight: bold;
}
#tag_req, ol{
  padding: 2em 0.5em;
}

#tag_req li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #dbebf8;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

#tag_req li:before{ /*疑似要素*/
  display:inline-block;
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}
#tag_req a{font-weight: bold;}
.sample_btn{
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
  font-size:1.1rem;
  font-weight: bold;
  margin: 0.5em 0;
  text-align: center;
}

.sample_btn:active{
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

  .ctr{
    display: -ms-grid;
    display: grid;
    grid-gap:0.4em;
    -ms-grid-rows:auto;
        grid-template-rows:auto;
    -ms-grid-columns: (auto)[auto-fit];
        grid-template-columns: repeat(auto-fit,auto);
    grid-auto-flow: dense;
  }
  .ctr .fluid{
    grid-column: span 3;
  }

.fixb{
  position: fixed;
  top: 0px;
  right:0px;
  padding:2rem;
  opacity: 0.8;
  font-size:3rem;
}

.sub_btn{
  border-radius: 20px;
  background-color: lightgreen;
  box-shadow: 1px 1px 2px black;
}
.sub_btn:hover{
  opacity: 0.8;
  position: relative;
  top:1px;
  left:1px;
  box-shadow: 0px 0px 0px ;
}

#snsLink{
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  padding: 0 10% 2em 10%;
  justify-content: center;
  text-align: center;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "tw fb";
}
#snsLink .tw{
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: tw;
}
#snsLink .fb{
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: fb;
}
.table {
  width: 100%;
}
.table a {
  text-decoration: none;
  color: navy;
  display: block;
}
.table a:hover {
  font-weight: bold;
  text-shadow: 1px 1px 3px yellow;
}
.table th , .table tr {
    height: 1em;
}
.table tr:nth-child(odd) {
    background-color:  snow;    /* 背景色指定 */
}
.table_status {
}

.table_status th {
      background-color: navy;
    color: white;
}
.table_status td {
    border: solid 1px black;

   color: navy;
   text-align: center;
}
 .td {
  border:solid 1px black;
  border-collapse: collapse;
}
#store{
  display: flex;
  display: -webkit-flex;
  text-align:center;
}
#store img {
  width: 250px;
}
#store img:hover {
  opacity: 0.9;
  border: solid 2px white;
}
#store .store {
  flex-direction: column;
}
#mainContainer{
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  grid-gap: 0em;
  min-width: 190px;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
                    grid-template-areas:
  "beginner"
  "shampoo"
  "treatment"
  "body"
  "tonic"
  "out "
  "style "
  "color"
  "new"
  "try"
  "search"
  "foundation"
  "clens"
  "essence";
}
#mainContainer .beginner{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: beginner;}
#mainContainer .shampoo{-ms-grid-row: 2;-ms-grid-column: 1;grid-area: shampoo;}
#mainContainer .treatment{-ms-grid-row: 3;-ms-grid-column: 1;grid-area: treatment;}
#mainContainer .body{-ms-grid-row: 4;-ms-grid-column: 1;grid-area: body;}
#mainContainer .tonic{-ms-grid-row: 5;-ms-grid-column: 1;grid-area: tonic;}
#mainContainer .out{-ms-grid-row: 6;-ms-grid-column: 1;grid-area: out;}
#mainContainer .style{-ms-grid-row: 7;-ms-grid-column: 1;grid-area: style;}
#mainContainer .color{-ms-grid-row: 8;-ms-grid-column: 1;grid-area: color;}
#mainContainer .new{-ms-grid-row: 9;-ms-grid-column: 1;grid-area: new;}
#mainContainer .try{-ms-grid-row: 10;-ms-grid-column: 1;grid-area: try;}
#mainContainer .search{-ms-grid-row: 11;-ms-grid-column: 1;grid-area: search;}
#mainContainer .foundation{-ms-grid-row: 12;-ms-grid-column: 1;grid-area: foundation;}
#mainContainer .clens{-ms-grid-row: 13;-ms-grid-column: 1;grid-area: clens;}
#mainContainer .essence{-ms-grid-row: 14;-ms-grid-column: 1;grid-area: essence;}
#mainContainer > div{
  border-radius: 8px;
  border: solid 1px lightgray;
  background-color: white;
}
#mainContainer > div:hover{
  background-color: lightblue;
}

#mainContainer h3 {
  color: #1C1C1C;
  padding: 0.5em;
  text-shadow: 2px 2px 3px white;
  font-size:1.0rem;
  font-weight: bold;
  margin:auto;
}
#mainContainer span {
  font-size:0.7rem;border-radius: 10px;
  background-color: red;
  color: white;
  padding: 0.2em;
  text-shadow: none;
}
#mainContainer p {
  font-size:0.9rem;
  color: gray;
}
#mainContainer a {
  text-decoration: none;
}
#mainContainer a:hover{
}

#accessList{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
#accessList li{
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px #5c9ee7;
  margin-bottom: 5px;
}
#accessList li:hover{
  background-color: lightyellow;
}
#accessList li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;

}
#accessList li a{
   color: #1C1C1C;
   font-weight: bold;
  display: block;
}
#accessList li span{
   position: absolute;
   right: 1em;
   color:#5c9ee7;
}
#accessList li a:hover,#newList li a:hover{
  text-shadow:1px 1px 3px lightgray;
  text-decoration: none;
  font-size: 1.0rem;
  position: relative;
  top:2px;
}
#newList {
  border: none;
  padding: 0.3em 1em 0.3em 2.3em;
  position: relative;
  margin-top: 2em;
}
#newList li {
  line-height: 1.1;
  padding: 0.5em 0;
  list-style-type: none!important;
}
#newList a{
  font-size: 0.9rem;
  color: #1C1C1C;
}
#newList li .new {/*リストのアイコン*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
#newList li:after {/*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: 'new';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
  }
#newList li .summy{
  position: absolute;
  right: 1em;
  color: #ffb03f;
}
.rankNum{

}
.rankNum p{
  font-size: 3vmin;
    vertical-align: top;
}
.rankNum b{
font-family: 'Superclarendon',sans-serif;
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
  font-size: 5rem;
  font-weight: bold;
    vertical-align: bottom;
}
#rank .point {
  color: red;
  font-family: 'Arial Rounded MT Bold','Arial',sans-serif;
  font-size: 1.3rem;
  width: 60px;
}
td,th {
  padding:3px 0px;
}
#ingreProducts{
  display: -ms-grid;
  display: grid;
  grid-gap: 0.7em 0.5em;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}
#ingrid{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
          grid-template-areas:
  'key1 iyaku_mei'
  'incl cate'
  'cas kanyoku'
  'bunshi ID'
  'kaiseki kaiseki'
  'figure figure'
  'graf graf'
  'caption caption';
}
#ingrid .key1{-ms-grid-row: 1;-ms-grid-column: 1;grid-area: key1;}
#ingrid .iyaku_mei{-ms-grid-row: 1;-ms-grid-column: 2;grid-area: iyaku_mei;}
#ingrid .incl{-ms-grid-row: 2;-ms-grid-column: 1;grid-area: incl;}
#ingrid .bunshi{-ms-grid-row: 4;-ms-grid-column: 1;grid-area: bunshi;}
#ingrid .cas{-ms-grid-row: 3;-ms-grid-column: 1;grid-area: cas;}
#ingrid .kanyoku{-ms-grid-row: 3;-ms-grid-column: 2;grid-area: kanyoku;}
#ingrid .ID{-ms-grid-row: 4;-ms-grid-column: 2;grid-area: ID;}
#ingrid .cate{-ms-grid-row: 2;-ms-grid-column: 2;grid-area: cate;}
#ingrid .graf{-ms-grid-row: 7;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: graf;}
#ingrid .kaiseki{-ms-grid-row: 5;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: kaiseki;}
#ingrid .caption{-ms-grid-row: 8;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: caption;margin:2em 1em;}
#ingrid .caption p{font-size: 1.1rem;line-height: 2.2rem;}
#ingrid .figure{-ms-grid-row: 6;-ms-grid-column: 1;-ms-grid-column-span: 2;grid-area: figure;margin:auto;}
#ingrid .figure img{max-width: 100%;}
#ingrid p{
  font-size:14px;
}
#ingrid h2{
  font-size: 2vmin;
}
#jNew {
    counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
#jNew li {
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px red;
  margin-bottom: 5px;
}
#jNew li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}
#jNew li:hover{
    background-color: lightyellow;
}
#jNew a:hover{
  position:relative;
  top:2px;
  left:2px;
}
#jNew a{
  color: #1f1f1f;
  font-weight: bold;
  font-size: 0.9rem;
  display: block;
}
.jNewPR {list-style-type: none;
  padding:0;margin:0;}
.jNewPR li {
  position: relative;
  padding: 0.5em ;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px red;
  margin-bottom: 2px;
}
.jNewPR li:before{
  content: 'PR';
  /* 以下数字をつける */
  position: absolute;
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.jNewPR a {
  color: black;
  font-weight: bold;
}
.jNewPR li:hover {
  position:relative;
  top:2px;
  left:2px;
}
#jNewGreen {
    counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}

#jNewGreen li {
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px green;
  margin-bottom: 5px;
}
#jNewGreen li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}
#jNewGreen li:hover{
    background-color: lightyellow;
}
#jNewGreen a:hover{
  position:relative;
  top:2px;
  left:2px;
}
#jNewGreen a{
  color: #1f1f1f;
  font-weight: bold;
  font-size: 0.9rem;
  display: block;
}
#jNewGreen span {
  float:right;
  color: orange;
}

.jNewTop {list-style-type: none;
  padding:0;margin:0;}
.jNewTop li {
  position: relative;
  padding: 0.5em ;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px red;
  margin-bottom: 2px;
}
.jNewTop li:before{
  content: '特集';
  /* 以下数字をつける */
  position: absolute;
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.jNewTop a {
  color: black;
  font-weight: bold;
}
.jNewTop li:hover {
  position:relative;
  top:2px;
  left:2px;
}

#figureArea{
  display: -ms-grid;
  display: grid;
      -ms-grid-columns: (minmax(auto,400px))[2];
          grid-template-columns: repeat(2,minmax(auto,400px));
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}
#figureArea figure img{max-width:100%;}
#figureArea figcaption{position:relative;top:-30px;right:0px;color:white;text-shadow: 0px 0px 1px black;}
.hide_pc {
  display: none;
}
#ingreList a {
    text-decoration: none;
    color: navy;
}
.try_link {
  max-width:100%;
  margin:1em 0;
}
.try_link:hover {
  opacity: 0.8;position:relative;top:1px;left:1px;
}

/*ワイドサイズ*/
   @media screen and (min-width: 960px) {
  .tox h1,.tox2 h1{
    font-size: 42px;
    line-height: 3rem;
  }
   .rankNum{
  font-size: 70px;
}
   .rankNum p{
    font-size: 2vmin;
   }
  .rankNum b{
    font-size: 8vmin;
   }
}






   /*タブレット以下のサイズ*/
   @media screen and (max-width: 767px) {
     .jumbotron{padding:120px 0 120px 15px;}
     .jumbotron h1{font-size:1.6rem;}
     .searchForm{width:80%;font-size:1.5rem;}
     #contents{overflow-x:hidden;}
     table img{max-width:35px; }
     .simg img{max-width:20px;position:relative;top:-10px;-webkit-transform:rotate(-20deg);transform:rotate(-20deg); }
     #first{font-weight:bold;font-size:1.1rem;line-height:1.1; }
     #second{font-weight:bold;font-size:1.0rem;}
     #third{font-weight:bold;font-size:1.0rem;}
     #first img{max-height: 65px;}
     #second img{max-height: 65px;}
     .rnum{font-size:1.1rem;}
     #footer li a:hover{color: pink;text-decoration: none;}
     .logo{transition:box-shadow 0.2s ease ;}
     .logo:hover{box-shadow:1px 2.5px 3px black;-webkit-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}
     .logo:active{box-shadow:0px 0px 0px white;position:relative;top:2px;
     }
     #scoreArea{
       display: -ms-grid;
       display: grid;
       padding: 0 0.2em;
       grid-gap: 1em;
       -ms-grid-rows: auto;
           grid-template-rows: auto;
       -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
                                                           grid-template-areas:
       "img"
       "graf"
       "rank"
       "shop"
       "seller"
       "spec";
     }
     #KaisekiArea {
       display               : inline;
       width             : 100%;
       height                : 100%;
       background-color      : #f5f5f5;
       padding: 1em 1em;
     }
  .nav h1{font-size:10px;}
     header h1{
       font-size:1.3rem;
     }
     header h2{
       font-size:1.2rem;
     }

      .tox,.tox2{
       padding: 0.2em 0.1em;
    background: linear-gradient(to right, red, #b22222);
     }
     .tox h1,.tox2 h1{
       margin:0;
       padding:0.4em 0.1em;
       color:white;
       line-height: 3.0rem;
     }
     #mainContainer2{
     display: -ms-grid;
     display: grid;
    -ms-grid-columns: (150px)[auto-fit];
        grid-template-columns: repeat(auto-fit,150px);
    justify-content: center;
    grid-auto-flow: dense;
    grid-row-gap: 10px;
    grid-column-gap: 5px;
      margin: 0 2em;
      background-color: lightpink;
   }

     .ctr{
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
       grid-auto-flow: row;
     }
     .ctr .fluid{
       -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
     }
   #former{
    display         : -ms-grid;
    display         : grid;
    margin          : 0 2em;
    grid            :
      "product" auto
      "ingredient" auto
      "msg" auto
      "seller" auto
      / 1fr;
    justify-content : center;
    grid-row-gap    : 10px;
    grid-column-gap : 5px;
   }
   #snsLink{
     display: -ms-grid;
     display: grid;
     -ms-grid-rows: 200px;
         grid-template-rows: 200px;
     justify-content: center;
     text-align: center;
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
                                                         grid-template-areas:
     "tw"
     "fb";
   }
   #store{
     display: inline;
   }
   #store img{
    max-width: 250px;
   }
   #indexGrid{
     display: -ms-grid;
     display: grid;
     -ms-grid-rows: auto;
         grid-template-rows: auto;
     -ms-grid-columns: 100%;
         grid-template-columns: 100%;
                 grid-template-areas:
     "mainArea"
     "leftArea"
     "rightArea"
     "sidebar";
   }
   #mainContainer{
     max-width: 1280px;
     margin: auto;
     display: -ms-grid;
     display: grid;
     -ms-grid-rows: auto;
         grid-template-rows: auto;
     grid-gap: 0.2em;
     -ms-grid-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
                                                         grid-template-areas:
     "shampoo shampoo"
     "treatment treatment"
     "body body"
     "tonic tonic"
     "out out"
     "color color"
     "new try"
     "search journal"
     "foundation clens"
     "essence style"
     "beginner beginner"
     ;
   }
   #mainContainer h5 {
     font-size:1.4rem;
     padding:1em;}
   #mainContainer span {
     float:right;
     font-size:0.7rem;
     border-radius: 10px;
     background-color: red;
     color: white;
     padding: 0.2em;
   }
   #mainContainer p {
     display: none;
   }
   .md_up{
    display: none;
   }
   #macro{
     display: -ms-grid;
     display: grid;
     grid-gap: 1.2em 0.5em;
     -ms-grid-rows: auto;
         grid-template-rows: auto;
     -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
        grid-template-areas:

     " all_text"
     "all"
     "name_text"
     "name"
     "footer_text";
   }
   .whiteContainer{
     padding: 1em;
     margin: 0.5em;
   }
   .whitesmokeContainer{
     background-color: whitesmoke;
     color: #1C1C1C;
     border-radius: 10px;
     margin: 1em 0.5em;
     padding: 1em;
   }
   #ingrid,
  footer .footer,
  #figureArea{
    display: inline;
   }
   #ingreProducts{
    display: inline;
    list-style-type: circle;
  }
   #ingreProducts li{
    padding: 0.3em 0.2em;
   }
  .hide_s {
    display: none;
   }
   .hide_pc {
    display: inline;
   }
   .kaiseki p {
    padding: 1em;
    line-height: 1.7;
   }
   .try_link {
    max-width: 80%;
   }
  }