@charset "utf-8";
html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
html,body {
  widht: 100%;
  min-widht: 100%;
  height: 100%;
  min-height: 100%;
}
html {
  /* ForeFox対応：縦スクロールバーが二重に表示されるのを防止*/
  scrollbar-width: none;
}
body {
  margin-bottom: 100px;
  position: relative;
}
.top {
  width: 100%; min-width: 100%;
  display: flex;
  padding-left: 40px; 
  padding-right: 0px;
}
h1 { font-size: 120% !important; margin-top: 5px; padding-left: 55px; font-weight: 400 !important; letter-spacing: -0.8px;
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-size: 50px auto;
  background-position: 0 8px;
  line-height: 50px;
  margin-left: -32px;
}
.top > :first-child { flex-grow: 2; }
.top img { width: 200px; height: auto; margin-top: 3px; margin-right: 40px; }
img, p, li, div {
  user-select:none; /* CSS3 */
  -moz-user-select:none; /* Firefox */
  -webkit-user-select:none; /* Google Chrome , Safari */
  -o-user-select:none; /* Opera */
  -ms-user-select:none; /* Internet Explorer */
}
button, input[type="submit"],input[type="reset"], input[type="button"] {
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
  border-radius: 3px;
  -webkit-appearance: none;
  padding: 0.3vw 1vw 0.3vw 1vw;  
  border-color: #ccc;
  outline: none;
  background: #efefef;
  box-shadow: none;
  border: 1px solid #555;
  cursor: pointer;
  color: #000;
}
#addsearch { margin-left: 1vw; }

input[type="checkbox"] {
  border: 1px solid #aaaaaa;
  vertical-align: -3px;
  -webkit-appearance: none;
  position: relative;
  margin-right: 7px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  width: 26px;
  height: 26px;
  /*Other Browser*/
  background: #e2e2e2;
  /*For Old WebKit*/
  background: -webkit-gradient(
    linear, left top, left bottom,
    color-stop(0.00, #ffffff),
    color-stop(1.00, #e2e2e2)
  );
   /*For Modern Browser*/
  background: linear-gradient (
    to bottom,
    #ffffff 0%,
    #e2e2e2 100%
  );
  margin-top: 1vw;
}
input[type="checkbox"]:checked {
   /*Other Browser*/
   background: #99cc00;
   /*For Old WebKit*/
   background: -webkit-gradient(
      linear, left top, left bottom,
      color-stop(0.00, #99cc00),
      color-stop(1.00, #87b400)
   );
   /*For Modern Browser*/
   background: linear-gradient(
      to bottom,
      #99cc00 0%,
      #87b400 100%
   );
   border: 1px solid #336600;
}
input[type="checkbox"]:checked:before {
   position: absolute;
   left: 1px;
   top: 16px;
   display: block;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
   content: "";
   width: 10px;
   height: 4px;
   background: #ffffff;
   -webkit-transform: rotate(45deg);
   -webkit-transform-origin: right center;
}

input[type="checkbox"]:checked:after {
   display: block;
   position: absolute;
   left: 9px;
   top: 16px;
   content: "";
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
   width: 16px;
   height: 4px;
   background: #ffffff;
   -webkit-transform: rotate(-53deg);
   -webkit-transform-origin: left center;
}
label, input[type='checkbox'] {
  cursor: pointer;
}

a {
  color: #000;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  cursor: pointer;
}

.wrap_inner p { font-size: 1.3177vw; }
.wrap_inner.cntct_info { margin-top: -3vw; }
.wrap_inner.cntct_info.topps2 { margin-top: -6vw !important; }
.wrap_inner.cntct_info a {
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}
div.stage {
  position: absolute;
  top: 7.32vw;
  left: 0px;
  width: 100vw;
/*  height: 100vh;*/
  z-index: 10;

  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  backface-visibility: hidden;
}
img.base {
  width: 100vw;
  height: 65vw;
  opacity: 0;
}

div.stage img {
  position: absolute;
  top: 0;
  left: 0;
}

footer {
  width: 100%;
  height: 36px;
  border-top: 1px solid #000;
  margin-top: auto !important;
}

footer p {
  width: 100vw;
  text-align: center;
  line-height: 5.71vw;
  font-size: 1.0248vw;
}
footer a {
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 1px;
}
#adrs { margin-top: 5vw; margin-bottom: 5vw; }
#adrs img {
  width: 36.60vw;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.6354vw;
}
#adrs p {
  white-space: pre;
  font-size: 1.3177vw;
  line-height: 2.3426vw;
  width: 100vww;
  text-align: center;
}
#adrs ul {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 3.3674vw;
  gap: 1.3177vw;
}
#adrs ul img {
  width: 2.928vw;
}
#adrs ul.li:first-of-type {
  max-width: 2.928vw;
  flex-basis: 2.928vw;
}

#adrs ul.li:last-of-type {
  max-width: 2.928vw;
  flex-basis: 2.928vw;
}

.wrapper {
  width: 100%;
/*  max-width: 1366px;*/
/*  background-color: #ccc;*/
  height: 100% !important;
  min-height: 100% !important;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
/*
  position: fixed;
  left: 0;
  top: 0;
*/
  width: 100%;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  background-color: #fff;
  z-index: 100;
/*  border-bottom: 1.8px solid #000;*/
  border-bottom: 1.8px solid #000;
/*
  opacity: 0;
  animation: header-FadeIn 1.0s forwards cubic-bezier(0.25, 1, 0.5, 1) 11.0s normal
*/
}
.header.top.load_first {
  opacity: 0;
  animation: header-FadeIn 1.0s forwards cubic-bezier(0.25, 1, 0.5, 1) 9.0s normal
}
.header.UpHdr {
    animation: UpAnim 0.5s forwards;
}

@keyframes UpAnim {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

.header.DownHdr {
    animation: DownAnim 0.5s forwards;
}
@keyframes DownAnim {
  from {
      opacity: 0;
      transform: translateY(-100px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}


.header_inner {
/*  width: calc(100vw - calc(100vw - 100%)) !important;*/
  width: 100%;
  height: 80px;
/*  max-width: 1099px;*/
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0.0vw 0vw 0.0vw 0vw;
}
.logo {
  position: absolute;
  top: 2.45vw;
  left: 9.8vw;
}
.title{
  font-size: 2rem;
  font-weight: 600;
}
.title img {
  width: 17.2155vw;
}

#top_stage {
  width: 100%;
  flex-grow: 1;
  max-height: calc(100% - 50px);
  flex-basis: 0;
  margin-top: -70px;
}
/*
.tagline {
  position: absolute;
  left: 0;
  top: 7.32vw;
  width: 57.10vw;
  padding-top: 5.85%;
}
*/

/* header固定のため余白をつける。メニューのCSSには関係ない */
.main {  
  margin-top: 9.0vw;
  position: relative;
  width: 100vw;
  flex: 1;
}

.nav {
  position: absolute;
  width: 100%;
  background-color: #386fb3 !important;
  padding-top: 20px !important;
  padding-bottom: 20px;
  height: 100%;
  min-height: 92%;
  z-index: 1 !important;
  max-height: 100%;
}


.nav_list {
  margin-top: 0;
  display: flex;
  width: 100%;
  min-width: 100% !important;
  justify-content: space-evenly;
}
.nav_list li {
/*  display: inline-block;*/
}
.nav_list li a {
  color: #fff;
  font-weight: 500;
  font-size: 90% !important;
  text-decoration: none;
}
.nav_item img { width: 3.44vw; height: auto; }
.nav_item li { text-align: left; }

h2 {
  margin-bottom: 1.0em;
  font-weight: 500;
  position: relative;
  display: inline-block;
  margin-left: 3.66vw;
  font-size: 3.29vw;
}
h2:after {
  display: inline-block;
  position: absolute;
  left: -3.66vw;
  top: 49%;
  content: '';
  border-bottom: 0.1vw solid #000;
  width: 1.9765vw;
}
h2 span {
  display: block;
  position: absolute;
  top: 1.9vw;
  left: calc(100%);
  padding-left: 7vw;
  padding-bottom: 2vw;
  font-size: 1.464vw;
  white-space: pre;
}

table.news {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6em;
  border-top: 1px solid #000;
  font-size: 1.317vw;
  /* border-collapse: collapse に指定すると4Kで太さにバラつきがでる*/
  border-collapse: separate; border-spacing: 0;
}
table.news td {
  border-bottom: 1.0px solid #000;
  padding-left: 50px;
  height: 4em;
  virtical-align: middle;
}

table.news td:nth-child(1) { width:15%; } 
table.news td:nth-child(2) { width:75%; font-weight: 600; } 
table.news td:nth-child(3) { width:10%; } 

ul.lnk.news a.selected {
  font-weight: 600 !important;
}
#news_images {
  display: flex;
  align-items: flex-start;
  width: 70vw;
  gap: 2vw;
  margin-top: 2.6354vw;
  margin-bottom: 2.6354vw;
}
#news_images img {
  width: calc(100%/2);
}
#news_wrapp {
  padding-top: 4.3923vw !important; /* 60px */
}
#news_wrapp p {
  font-size: 1.3177vw !important;
  line-height: 1.8em;
}
#news_wrapp h3 {
  margin-bottom: 0 !important;
  padding-bottom: 6.588vw !important;
  border-bottom: 0.0732vw solid #000; 
  font-size: 2.3426vw !important;
}
.wrap.news a.vall {
  font-size: 1.2177vw !important;
}
#news_wrapp p.date {
  margin-top: -5vw;
  margin-bottom: 6.5vw;
}
#news_wrapp p.tag {
  margin-top: 2.5vw;
}
a.news_arrow img {
  width: 2.6354vw;
}
div.arrow {
  width: 2.6354vw;
  min-width: 2.6354vw !important;
}
div.arrow a {
  display: block;
  height: 3vw;
  min-height: 3vw;
  vertical-align: middle;
  padding-top: 1.5vw !important;
}

.wrap {
  width: 87.85vw !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 3.66vw;
}
 
#news.bg, .company.bg, .business.bg, .wrap.bg.news, .wrap.bg.qa {
  background-color: rgba(248, 246, 241, 0.5) !important;
/*  padding: 3.66vw;*/
}
.wrap.business {
  margin-top: 12vw;
}

#products, #matelials, #care_makeup, #tld_info {
  padding-left: 0;
  padding-right: 0;
}
#products .bg {
  background-color: rgba(248, 246, 241, 0.5);
  padding: 3.66vw;
}

#matelials .bg {
  background-color: rgba(234, 240, 227, 0.5);
  padding: 3.66vw;
  padding-bottom: 0px !important;
}

#news a.vall {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4vw;
  font-size: 1.3177vw;
}

#matelials .bg {
  padding-bottom: 7vw !important;
}
#matelials a.vall {
  position: relative;
  width: 12.225vw;
  display: block;
  text-align: center;
  line-height: 2.6vw;
  background-color: #000;
  color: #fff;
  margin: 2vw 0vw 2vw 0vw;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  font-size: 0.8785vw;
  margin-top: -5vw;
}
#matelials a.vall:after {
  display: block;
  position: absolute;
  left: -0.96vw;
  top: 49%;
  content: '';
  border-bottom: 0.1vw solid #fff;
  width: 1.9765vw;
}

#top_vr_showroom h2 {
  margin-bottom: 0;
}
#top_vr_showroom .wrap_inner {
  margin-top: 0;
}
#products .anim-box.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
#news .anim-box.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
#matelials .anim-box.slidein.is-animated {
  animation: slideIn_matelials 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards !important;
}
#care_makeup .anim-box.slidein.is-animated {
  animation: slideIn_matelials 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards !important;
}
#tld_info .anim-box.slidein.is-animated {
  animation: slideIn_tld_info 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards !important;
}
#topps .anim-box.slidein.is-animated {
  animation: slideIn_topps 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards !important;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(-10.98vw);
  }
  40%,100% {
    opacity: 1;
  }
}

@keyframes slideIn_tld_info {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(-5.3vw);
  }
  40%,100% {
    opacity: 1;
  }
}

@keyframes slideIn_topps {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0vw);
  }
  40%,100% {
    opacity: 1;
  }
}

@keyframes slideIn_matelials {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(-7vw);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.slideinR.is-animated {
  animation: slideInR 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideInR {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.rotateInR.is-animated {
  animation: rotateInR 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes rotateInR {
  0% {
    transform: rotateZ(45deg);
    right: calc(100% * -0.4 /2);
    opacity: 0;
  }
  100% {
    transform: rotateZ(0deg);
    right: calc(100% * -0.4 /2);
  }
  40%,100% {
    opacity: 1;
  }
}
.anim-box.rotateInR2.is-animated {
  animation: rotateInR2 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes rotateInR2 {
  0% {
    transform: rotateZ(45deg);
    opacity: 0;
  }
  100% {
    transform: rotateZ(0deg);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim-box.slideInR_common.is-animated {
  animation: slideInR 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideInR_common {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
  }
  40%,100% {
    opacity: 1;
  }
}

.anim { position: relative; }
.anim-box.slideInL_common.is-animated {
  animation: slideInL_common 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideInL_common {
  0% {
    transform: translateX(-50vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
  }
  40%,100% {
    opacity: 1;
  }
}


div.container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap:wrap;
}


.dropdwn {
  max-width: 1200px;
  display: flex;
}

ul {
  text-align: center;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}
li {
  position: relative;
  padding: 5px;
  display: block;
  cursor: pointer;
}

.dropdwn>li {
  margin: 1px;
  display: inline;
}

.dropdwn_menu {
  width: 100%;
  display: none;
  position: absolute;
  margin-left: -5px;
  margin-top: 5px;
  padding: 0;
}

.dropdwn_menu li {
  width: 100%;
}

.dropdwn_menu li a {
  padding: 5px 0;
  margin: -5px 5px -5px -5px;
  display: block;
}
.dropdwn_menu li a:hover {
  font-weight: 600;
}
li a:hover {
/*  color: rgb(65, 65, 65);*/
}

.nav_item li {
  text-align: left;
  font-size: 0.878vw;
}
.nav_item li a:hover {
  font-weight: 600;
}
.dropdwn_menu ul {
  width: 100%;
}
.dropdwn_menu li {
  padding-left: 30px;
  background-color: #386fb3;
  padding-bottom: 0;
  font-size: 100%;
  height: auto;
}
.dropdwn_menu li div:not(:last-of-type) {
  font-size: 0.878vw;
  padding-bottom: 0;
}
.dropdwn_menu li div:last-of-type(1) {
  padding-right: 0;
}
.dropdwn_menu li div h6:after {
  position: absolute;
  display:block;
  height: 1.5739vw;
  content: '';
  border-left: 0.3294vw solid #000;
  left: -1.0vw;
  top: 0;
}
.dropdwn_menu {
  margin-top: 0;
  padding-top: 0 !important;
}

.dropdwn_menu.3 li div h6.spacer {
  margin-top: 0.04vw;
}

.dropdwn_menu.4 li div h6.spacer {
  margin-top: 0.04vw;
}

.nav_item.mat {
  margin-left: -0.7vw;
}
.nav_item.cont {
  margin-top: 0.1vw;
  margin-left: 0.75vw;
}
.pb {
  text-decoration: none;
  cursor: pointer;
}
p.name {
  line-height: 1.2em !important;
}
p.name span {
  margin-top: 0.4em !important;
}
p.name span.sp {
  font-size: 100% !important;
}




/* -- Company -- */
.main._company { margin-bottom: 20vw; }
.bg.company {
  padding-right: 0vw !important; /* 50px */
  background-color: rgba(248, 246, 241, 0.5) !important;
}
.wrap.history { margin-top: 13vw; }
.wrap.global_network { margin-top: 13vw; }
.company h2 {
  margin-bottom: 0;
  padding: 0;
}
.small {
  font-size: 90%; text-align: right;
  display: block;
  width: 100%;
}
p.cap_2.tig { margin-top: 6vw !important; }
h3 {
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 30px !important;
}
h3._topmrgn {
  margin-top: 5.71vw !important; /* 78px */
}
div.company p {
  font-size: 1.3177vw;
  line-height: 1.6em;
}
.cap_1 {
  font-size: 2.489vw;
  margin-top: 2vw;
}
.cap_2 {
  font-size: 2.05vw !important;
  margin-top: 2vw !important;
  margin-bottom: 4.3923vw !important; /* 60px */
}
.cap_3 {
  font-weight: 600;
  margin-top: 2.928vw; /* 40px */
}
.company p span:not(.sp) {
  display: block;
}

xo.pcme img {
  width: 23.2796vw; /* 318px */
}
.wrap-pcme {
  margin-bottom: 29.28vw !important; /* 400px */
}
.workflow1 img {
  margin-top: 4.3923vw; /* 60px */
}
.workflow1 span {
  display: block;
  width: 25.40vw; /* 347px */
  padding: 1.830vw; /* 25px */
  background-color: #c3e4d6;
  margin-top: 1.830vw; /* 25px */
  position: relative;
}
.workflow1 span:after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  border-bottom: 2.196vw solid #c3e4d6; /* 30px */
  border-left: 1.299vw solid transparent;
  border-right: 1.299vw solid transparent;
  top: -2.199vw;
  left: 3vw;
}
.concept img {
  width: 100%;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

video {
  width: 100%;
  margin-top: 3vw;
  margin-bottom: 3vw;
}

.wrap-pcme h2 {
  position: relative;
}
.wrap-pcme h2 span {
  display: block;
  position: absolute;
  left: 0;
  top: 5vw;
  padding-left: 0 !important;
}
/* -- 製品紹介 -- */
#quasi_drugs_item { margin-top: 14vw !important; }
#hair_care { margin-top: 8vw !important; }
#lip { margin-top: 10vw !important; }
#mascara { margin-top: 15vw !important; }
h2.heading { position: relative; margin-top: 10vw; }
h2.heading:before {
  content: '';
  display: block;
  width: 100vw !important;
  height: 17.86237vw;
  border-bottom: none;
  background-size: cover !important;
  z-index: -1;
  position: absolute;
  left: -13vw !important;
  top: -9vw !important;
}
h2#base_make:before { background: url(../img/03_1_basemake.jpg); }
h2#point_make:before { background: url(../img/03_2_pointmake.jpg); }
h2#skin_care_and_hair_care:before { background: url(../img/03_3_skincare.jpg); }
h2#special_items:before { background: url(../img/03_4_specialitems.jpg); }
h2#quasi_drugs_item:before { background: url(../img/03_5_quasidrugsitem.jpg); }

div.product ul.lnk li {
  font-size: 1.1171vw;
}
div.product h3 span {
  white-space: pre;
}
div.product h3 {
  margin-top: 5vw !important;
}
img._03_product {
  width: 100vw;
  min-width: 100vw;
  margin-left: -10.5vw;
}
.product h2 {
  margin-bottom: 0;
  padding: 0;
}
div.product p {
  font-size: 1.3177vw;
  line-height: 1.6em;
}
.product p span:not(.sp) {
  display: block;
}
.wrap_inner {
  padding: 4.3923vw !important; /* 60px */
  padding-right: 3.660vw !important; /* 50px */
}
ul.lnk {
  display: flex;
  gap: 1.5vw;
  margin-top: 4.0vw;
  flex-wrap: nowrap;
}
ul.lnk.basemake { margin-bottom: 3vw; }
ul.lnk.center {
  justify-content: center;
} 
ul.lnk li {
  position: relative;
  margin-left: 0;
  padding-left: 0;
  font-size: 1.1171vw;
}
ul.lnk li:not(:last-of-type):after {
  position: absolute;
  display: block;
  content: '/';
  right: -3vw;
  top: calc(30%/2);
  margin-right: 1vw;
  padding-right: 1vw;
}
.haschild {
  position: relative;
  display: inline-block;
  line-height: 1.0em;
}
.haschild span {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  position: absolute;
  left: calc(100%);
  margin-left: 7vw;
  bottom: 0;
  font-weight: normal;
  line-height: 1.0em;
}


.slider {
  width: 100%;
}
.slider img {
  height: auto;
  width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}


.slider {
  width: 22.0117vw; /* 328-> 378px */
  max-width: 22.0117vw !important;
  min-width: 22.0117vw !important;
  height: auto !important; /* 353 -> 406 */
  overflow:hidden;
  border: 1px solid #f00;
  position: relative;
}

.slider.selected {
  width: 27.6720vw; /* 328-> 378px */
  max-width: 27.6720vw !important;
  min-width: 27.6720vw !important;
  height: auto !important; /* 353 -> 406 */
  overflow:hidden;
  border: 1px solid #f00;
  position: relative;
}

.selected_:after {
  position: absolute;
  content: '';
  width: 27.8140vw !important; /* 328-> 378px */
  max-width: 27.6720vw !important;
  min-width: 27.6720vw !important;
  height: 80%;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: #ecdb91 !important;
}

.slide li img {
  width: 100%; /* 328-> 378px */
  min-width: 100%;
  height: 100%;
}

.slide.selected li img {
  width: 100% !important; /* 328-> 378px */
  max-width: 100% !important; /* 328-> 378px */
  min-width: 100% !important;
  height: 100%;
}


.slick-next{ right:0.4vw !important; }
.slick-prev{ left:0.4vw !important; }
.slick-arrow{ z-index:2 !important; }

.slick-arrow:before{
    content:""!important;
}

　.slick-arrow:before {
    content:""!important;
    width: 10%!important;
    height: 10%!important;
    position: absolute;
    top: 0;
    left: 0;
  }


  .slick-arrow{
    z-index:2!important;
    width:30px!important;
    height:30px!important;
  }

　.slick-next{
    right:-30px!important;
  }

　.slick-prev{
    left:-30px!important;
  }


.prev_icon{
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}
.next_icon{
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translate(0,-50%);
  width: 30px;
  z-index: 1;
}


.slider2 {
  position: relative;
  width: calc(100%/3) !important; /*27.6720vw !important;*/ /* 328-> 378px */
  max-width: calc(100%/3) !important;
  min-width: calc(100%/3) !important;
  height: 36.60vw; /* 500px */
}

.container2.selected {
  position: relative;
  width: 100% !important; /* 328-> 378px */
  max-width: 100% !important;
  min-width: 100% !important;
  height: 36.60vw !important;
}

.container2.selected img {
  width: 100% !important;
}
.container2.selected .slider-item {
  padding-top: 0vw !important;
}

.container2_ {
  width: 27.8140vw !important; /* 328-> 378px */
  max-width: 27.6720vw !important;
  min-width: 27.6720vw !important;
  overflow: hidden;
}

.container2 {
  width: 100% !important; /* 328-> 378px */
  max-width: 100% !important;
  min-width: 100% !important;
  height: 36.60vw; /* 500px */
  overflow: hidden;
}

.slider-list {
  display: flex;
  width: 300% !important;
  height: 100%;
  paddin: 0 !important;
/*
  justify-content: center;
  align-items: center;
*/
}
.slider-item {
  width: 100%;
  height: 100%;
  align-items:  flex-end !important;
  padding-top: 0 !important;
  margin-top: 0;
/*
  display: flex;
  font-size: 30px;
  font-weight: bold;
*/
}
.slider-item img {
  user-select: none;
  width: 83.3% !important;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2vw;
}

.selected .slider-item img {
  margin-top: 0vw;
}

.prev-next-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
/* 220614  display: none;*/
}
.prev-next-box p {
  color: #f00;
  padding: 2px 10px;
  box-sizing: border-box;
  display: block;
  border-radius: 6px;
  font-size: 0 !important;
}
.prev-next-box p:hover {
  cursor: pointer;
}

.prev-next-box p.prev {
  position: absolute;
  content: '';
  left: 2.0vw;
  top: 50%;
  width: 2.0vw;
  height: 2.6916vw;
  background: url(../img/arrow_l.svg);
  background-repeat: no-repeat;
}
.slider2.selected .prev-next-box p.prev {
  left: 1.0vw !important;
}
.slider2.selected .prev-next-box p.next {
  right: 0vw !important;
}
.prev-next-box p.next {
  position: absolute;
  content: '';
  right: 1.0vw;
  top: 50%;
  width: 2.0vw;
  height: 2.6916vw;
  background: url(../img/arrow_r.svg);
  background-repeat: no-repeat;
}
.prev-next-box p:hover {
  cursor: pointer;
}

.selected:after {
  position: absolute;
  content: '';
  width: 100% !important; /* 328-> 378px */
  max-width: 100% !important;
  min-width: 100% !important;
/*
  width: 27.6720vw !important;  328-> 378px
  max-width: 27.6720vw !important;
  min-width: 27.6720vw !important;
 */
  min-height: 29.7218vw; /* 406px */
  left: 0;
  bottom: 0 !important;
  z-index: -1;
}

/* ファンデーション */
.cl-0 .selected:after {
  background-color: #ecdfa3 !important;
}
/* 下地 */
.cl-1 .selected:after {
  background-color: #d1ebdc !important;
}
/* 仕上げ */
.cl-2 .selected:after {
  background-color: #ccc0c0 !important;
}
/* アイシャドウ */
.cl-3 .selected:after {
  background-color: #fddac4 !important;
}
/* アイブロウ */
.cl-4 .selected:after {
  background-color: #e2cdba !important;
}
/* マスカラ */
.cl-5 .selected:after {
  background-color: #dbccc5 !important;
}
/* フェイスカラー */
.cl-6 .selected:after {
  background-color: #f2ddb1 !important;
}
/* リップ */
.cl-7 .selected:after {
  background-color: #e9d0cb !important;
}
/* スキンケア */
.cl-8 .selected:after {
  background-color: #c4d5dc !important;
}
/* ヘアケア */
.cl-9 .selected:after {
  background-color: #f2e7d3 !important;
}
/* スペシャルアイテム */
.cl-10 .selected:after {
  background-color: #c8cfd7 !important;
}

.container2:before {
  position: absolute;
  content: '';
  width: 91.5% !important; /* 328-> 378px */
  max-width: 91.5% !important;
  min-width: 91.5% !important;
/*
  width: 27.6720vw !important;  328-> 378px
  max-width: 27.6720vw !important;
  min-width: 27.6720vw !important;
 */
  height: 27.9218vw !important; /* 406px */
  left: 0;
/*  bottom: -9.0vw;*/
  bottom: 0;
  z-index: -1;
  background-color: rgba(245, 245, 245, 0.7) !important;
/*  background-color: #f5f5f5 !important;*/
  margin-left: calc(1.8302vw/2);
  margin-right: calc(1.8302vw/2);
  box-sizeing: border-box;
}

.wrap_slider {
  display: flex;
  flex-wrap: wrap;
}
.slider2 p.name {
  position: absolute;
/* センタリングする場合
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
*/
  left: 3vw;
  font-size: 1.8034vw !important;
  white-space: pre;
  bottom: 2vw;
  pointer-events: none;
}
.slider2 p span {
  margin-top: -0.3vw;
  font-size: 60%;
}

/* 原料紹介 */
div.lnk_genryo_lst_wrap {
  margin-left: auto;
  margin-right:auto;
  margin-top: 3vw;
  font-size:0.87847vw;
  width: 55%;
  white-space: nowrap;
  border:3px solid #ccc;
  padding: 10px;
  text-align: center;
  margin-bottom: 50px;
  background-color:#9ad3cd;
}
div.lnk_genryo_lst_wrap a {
  display: block;
  width:100%;
  height:100%; margin-bottom: 1vw;
}
div.lnk_genryo_lst_wrap a span {
  font-size:2.3426vw;
}
.block_mtrl img {
  width: 19.0336vw; /* 260px */
  min-width: 19.0336vw; /* 260px */
}
.materials .cap_1 {
  position: relative;
  display: inline-block;
}
.materials .cap_1 span {
  font-size: 1.2177vw;
  position: absolute;
  left: 100%;
  margin-left: 5vw;
  white-space: pre;
  font-weight: normal;
  bottom: 0.3vw;
}

.block_mtrl {
  display: flex;
  gap: 2vw;
  align-items: flex-start;
}
.block_mtrl:not(:last-of-type) {
  margin-bottom: 2vw;
}
.block_mtrl span.bold {
  font-weight: 600;
}

.bg.materials {
  padding-right: 0vw !important; /* 50px */
  background-color: rgba(248, 246, 241, 0.7) !important;
/*  background-color: #f8f6f1 !important;*/
}

.materials a.vall {
  position: relative;
  width: 12.225vw;
  display: block;
  text-align: center;
  line-height: 2.6vw;
  background-color: #000;
  color: #fff;
  margin: 2vw 0vw 2vw 0vw;
  margin-left: auto;
  text-decoration: none;
  font-size: 0.8785vw;
  margin-top: -3vw;
}
.materials a.vall:after {
  display: block;
  position: absolute;
  left: -0.96vw;
  top: 49%;
  content: '';
  border-bottom: 0.1vw solid #fff;
  width: 1.9765vw;
}
.materials .clmn {
  display: flex;
  flex-firection: column;
}
.materials div.wrap_inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wrap.materials.bg {
  margin-bottom: 5vw;
}

#ctlg.on { padding-bottom: 6vw !important; }

.palette-0,.palette-1,.palette-2,.palette-3,.palette-4,.palette-5,.palette-6,.palette-7,.palette-8,.palette-9,.palette-10,.palette-11 {
  -webkit-filter:drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6));
  -moz-filter:drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6));
  -ms-filter:drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6));
  filter:drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.6));
}

.slider2.noslide .prev-next-box {
  display: none !important;
}
#vr_container { margin-top: 2vw; cursor:pointer; width: 76vw; height: 45vw; z-index:100; }

.nav_item.etc {
  position: relative;
}

.nav-open .hamburger_pc {
  display: none;
}
.hamburger_pc {
  position: relative;
  width: 7.6923vw;
  height: 1.6923vw;
  cursor: pointer;
  z-index: 300;
  margin-left: 1.4vw;
  margin-top: -0.60vw;
}
.hamburger_pc .hamburger_border {
    position: absolute;
/*
    left: 11px;
    width: 18px;
    height: 2px;
*/
    left: 0.8052vw;
    width: 1.3177vw;
/*    height: 2px;*/
    height: 0.14641vw;
    background-color: #333;
    transition: all .6s;
}
.hamburger_pc .hamburger_border_top {
/*    top: 14px;*/
    top: 1.02489vw;
}
.hamburger_pc .hamburger_border_center {
/*    top: 20px;*/
    top: 1.4641vw;
}
.hamburger_pc .hamburger_border_bottom {
/*    top: 26px;*/
    top: 1.903367vw;
}

table.news span {
  white-space: pre;
  font-size: 1.024vw;
  position: relative;
  display: block;
}
table.news span a { text-decoration: none; }
table.news span:after {
  position: absolute;
  display: block;
  content: '';
  width: 2vw;
  border-top: 1px solid #000;
  left: -4vw;
  top: 50%;
}
#page_top {
  position: fixed;
  bottom: 3vw;
  width: 2vw;
  right: 2vw;
  display: block;
}
#page_top a {
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 20px 20px;
}
#page_top a:hover {
  text-decoration: none;
}

/* お知らせ */
.wrap.news ul {
  margin-top: -3vw;
}
/* プライバシーポリシー */
.privacy_policy ul {
  width: 100% !important;
  min-width: 100%;
}
.privacy_policy ul li {
  width: 100% !imp/ortant;
  min-width: 100%;
  text-align: left;
  text-indent: -1.0em;
  padding-left: 1.0em;
}
.privacy_policy p {
  line-height: 1.6em;
}
.privacy_policy h5, .privacy_policy h6, .privacy_policy p {
  font-size: 1.2177vw;
}
.privacy_policy h5, .privacy_policy h6 {
  padding: 2.0vw 0 0.5vw 0;
}
.privacy_about_link p {
  margin-bottom: 1.0em;
  text-indent: -1.0em;
  padding-left: 1.0em;
}
.privacy_policy h4 {
  margin-bottom: 4vw;
}
/* FAQ */
.main.faq {
  margin-bottom: 15vw !important;
}
.qa_inner {
  width: 100%;
}
.qa_inner p {
  width: 90%;
  font-size: 1.2177vw;
}
.qa_inner p:first-of-type {
  padding: 0vw 0 0 0;
  font-weight: 600;
}
.qa_inner p:last-of-type {
  padding: 2.0vw 0 0vw 0;
}
.qa_inner p span {
  display: inline-block;
  vertical-align: top;
}
.qa_inner p span:first-of-type {
  width: 15%;
  text-align: center;
  font-weight: 600;
}
.qa_inner p span:last-of-type {
  width: 80%;
}
.wrap.bg.qa {
  margin-bottom: 2.6354vw;
  position: relative;
}
.qa_inner p:last-of-type {
  display: none;
}
.qa_open {
  position: absolute;
  right: 3.0vw;
  top: 3.0vw;
  width: 5vw !important;
  height: 5vw !important;
  min-width: 5vw !important;
  min-height: 5vw !important;
  text-align: center;
  vertical-align: middle;
  font-size: 1.7vw;
  cursor: pointer;
}

/*contact*/
select {
  font-size: 1.0vw; padding: 0.2vw; color: #000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  appearance: none;
  width: 12vw;
  padding: 0.5vw 1.0vw;
  padding-right: 1em;
  border: none;
  outline: 0;
  background: #efefef;
  background-image: none;
  box-shadow: none;
  text-indent: 0.01px;
  text-overflow: ellipsis; // 文字の省略
  cursor: pointer;
}
#contact_form_block .wrapper_select {
  display: inline-block;
  position: relative;
  border: 1px solid #666;
  vertical-align: middle;
  border-radius: 3px;
  background: #efefef;
}
#contact_form_block .wrapper_select:before {
  position: absolute;
  top: 0.95vw;
  right: 1.0vw;
  width: 0;
  height: 0;
  border-width: 0.7320vw 0.3660vw 0 0.3660vw;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
  content: "";
  pointer-events: none;
}
#contact_form_block table th,  #contact_confirm_block th {
  text-align: left;
  padding-right: 2vw;
}
#contact_form_block table td, #contact_confirm_block table td {
  padding-bottom: 0.7vw;
  height: 100%;
  padding: 0;
  line-height: 1.4;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
}
em { color: #f00; font-style: normal; font-size: 70%; }
div.forsp { /*display: none;*/ }
br.spacer {
  display: block;
  content: '';
  margin: -1.0vw 0;
}

/*@media screen and (max-width: 1200px) {*/
  #top_vr_showroom div.wrap_inner p { font-size: calc(1.3177vw*2.6269); }
  #vr_msg { padding-left:1.0em; text-indent: -1.1em; font-size: 3.0vw !important; margin-left: -0.3em !important; }
  .wrap_inner.cntct_info.topps2 { margin-top: 0vw !important; }
  #ctlg.on { padding-bottom: 7vw !important; margin-bottom: 5vw; border-bottom: 1px solid #000; }
  select {
    font-size: 1.0vw; padding: 0.2vw; color: #000;
    width: 43vw;
    padding-right: 1em;
    margin-top: 0.5vw;
    text-indent: 1.4vw;
    text-overflow: ellipsis; // 文字の省略
    cursor: pointer;
  }
  #contact_form_block .wrapper_select {
    display: inline-block;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    height: 11.0vw;
  }
  #contact_form_block .wrapper_select:before {
    top: 3.8vw;
    right: 2.6vw;
    border-width: 3.198vw 1.629vw 0 1.629vw;
  }

  #contact_adrs { width: 75vw; max-width: 75vw !important; }
  select { font-size: 4.0vw; padding: 0.2vw; }
  select {
    height: 2.8em;
  }
  br.spacer {
    display: block;
    content: '';
    margin: -1.4vw 0 !important;
  }

  .company_jigyo {
    display: flex;
    font-size: 1.3177vw;
    width: 80.52vw; /* 1100px */
    border-bottom: 1px solid #000;
  }
  .company_jigyo:first-of-type {
    border-bottom: 1px solid #000 !important;
  }
  .company_jigyo .c1, .company_jigyo .c2, .company_jigyo div {
    border: none !important;
  }
  .company_jigyo_c1_c2 {
    display: flex;
    font-size: 1.3177vw;
    padding: 0 !important;
    margin-top: -0.4vw !important;
    border: none !important;
  }
  .company_jigyo_c1_c2 {
    border: none !important;
  }
  .company_jigyo_c1_c2 ul {
    margin-right: 5vw;
  }
  .company_jigyo_c1_c2 {
    border: none !important;
  }
  .company_jigyo:last-of-type {
    margin-bottom: 7vw;
  }
  .company_jigyo div, .company_jigyo ul {
    width: 25vw !important;
    padding-bottom: 2.928vw; /* px40 */
  }
  .company_jigyo._first {
    margin-top: 10vw;
    border-top: 1px solid #000 !important;
  }
  .company_jigyo._first ul {
    width: 60vw !important;
    border: none !important;
  }
  .company_jigyo._first ul li {
    width: 60vw !important;
  }
  .company_jigyo div {
    display: flex;
    padding-top: 2.928vw; /* px40 */
  }
  .company_jigyo ul {
    padding-top: 2.0vw !important; /* px40 */
    margin-left: 0;
    flex-grow: 1;
  }
  .company_jigyo ul li {
    white-space: pre !important;
    text-align: left;
    cursor: default;
    width: 50vw;
  }
  .company_jigyo div:first-of-type {
    width: 18.30vw; /* 250px */
    padding-left: 4.392vw; /* 60px */
  }
  .company_jigyo ul.c1 {
    max-width: 45.622vw !important; /* 350px */
    width:  45.622vw !important;
  }

  .company_jigyo_c1_c2 {
    display: flex;
    font-size: calc(1.3177vw*2.6269) !important;
    flex-direction: column;
  }
  .company_jigyo_c1_c2 ul {
    width: 100%;
  }

  h2.heading span {
    display: block;
    position: initial;
    padding-left: 0 !important;
  }
  div.forsp { display: block; }
  em { font-size: 70%; }

  #contact_form_block table {
    max-width: 44vw !important;
  }
  #contact_form_block table th, #contact_confirm_block th {
    text-align: left;
    padding-right: 2vw;
    font-size: 150%;
    display: block;
    margin-left: -0.5vw !important;
  }
  #contact_form_block table td, #contact_confirm_block table td {
    max-width: 74vw !important;
    padding-bottom: 0.7vw;
    height: 100%;
    padding: 0;
    font-size: 100%;
  }
  #contact_form_block input, #contact_confirm_block input {
    max-width: 75vw !important;
    line-height: 2.2em;
    font-size: 130%;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  #contact_form_block select {
    line-height: 2.2em;
    height: 2.2em;
  }
  #contact_form_block tr, #contact_confirm_block tr {
    border-bottom: none !important;
  }
  #contact_form_block textarea {
    display: block !important;
    max-width: 74vw !important;
    width: 74vw !important;
    margin-top: 5vw !important;
    padding: 2vw;
  }
  #contact_form_block button {
    width: 7em !important;
  }
  #contact_form_block input[type='button'],
  #frm_confirm input[type='button'] {
    margin-top : 2vw !important;
    margin-left: 2vw;
    width: 7em !important;
  }
  #frm_confirm input[type='submit'], #contact_form_block input[type='submit'], #contact_form_block input[type='reset'] {
    width: 7em !important;
  }
  #contact_form_block td span.sp {
    display: block;
    margin-bottom: 2vw;
  }
  input.sp {
    width: 55vw;
  }
  ._02_totalmarketingsupport,
  ._02_reserchanddevelopment,
  ._02_qualitymanagementsystem {
    display: flex;
    width: 85.65vw; /* 1170px */
    max-width: 85.65vw;
    margin-left: 4.2vw;
    align-items: flex-start;
    flex-direction: column;
    font-size: calc(1.3177vw*2.6269);
    margin-bottom: 2vw;
  }
  ._02_totalmarketingsupport img,
  ._02_reserchanddevelopment img,
  ._02_qualitymanagementsystem img  {
    width: 74.65vw; /* 390px */
    margin-top: 2vw;
  }
  ._02_totalmarketingsupport { gap: 2vw; }
  ._02_totalmarketingsupport img { margin-top: 1vw; }

  input[type="checkbox"] {
    border: 1px solid #aaaaaa;
    vertical-align: -8px;
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    width: 26px;
    height: 26px;
   /*Other Browser*/
    background: #e2e2e2;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #ffffff),
        color-stop(1.00, #e2e2e2)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #e2e2e2 100%
    );
    margin-top: 5vw;
  }
  input[type="checkbox"]:checked {
    /*Other Browser*/
    background: #99cc00;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #99cc00),
        color-stop(1.00, #87b400)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #99cc00 0%,
        #87b400 100%
    );
    border: 1px solid #336600;
  }
  input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 16px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    width: 10px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
  }

  input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 16px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    width: 16px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
  }

  #page_top {
    position: fixed;
    bottom: 3vw;
    width: 8vw;
    right: 0.0vw;
    display: block;
  }

  #topps img {
    margin-left: 9.4vw !important;
  }

  table.news span {
    font-size: 3.80vw;
    margin-left: 4.7vw;
  }
  div.product p {
    font-size: calc(1.3177vw*2.6269);
    line-height: 1.6em;
  }

  .dropdwn_menu {
    display: block;
    margin-top: -3vw;
  }
  .dropdwn_menu.m6 .sub a:first-of-type {
    border-top: 1px solid #eee !important;
  }
  .dropdwn_menu .sub a {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
    margin-left: 20px;
  }
  .pt16 { font-size: calc(1.1171vw*2.6269) !important; }
  .pt18 { font-size: calc(1.2177vw*2.6269) !important; }
  .wrap_inner.pt18 p { font-size: calc(1.2177vw*2.6269) !important; }
  .pt20 { font-size: calc(1.4641vw*2.6269) !important; } 
  .pt22 { font-size: calc(1.6105vw*2.6269) !important; } 
  .pt24 { font-size: calc(1.7569vw*2.6269) !important; }
  .pt26 { font-size: calc(1.9034vw*2.6269) !important; }
  .pt32 { font-size: calc(2.3426vw*2.6269) !important; }
  .pt45 { font-size: calc(3.294vw*2.6269) !important; }
  .privacy_policy h5, .privacy_policy h6, .privacy_policy p {
    font-size: calc(1.2177vw*2.6269) !important;
  }
  .privacy_policy .wrap_inner {
    padding: 0 !important;
  }
  .privacy_policy p span {
    display: block;
  }
  .qa_inner p {
    font-size: calc(1.2177vw*2.6269) !important;
  }
  .qa_open {
    font-size: calc(1.7vw*2.6269) !important;
  }
  .lnk.news li {
    font-size: calc(1.1177vw*2.6269) !important;
  }
  ul.lnk {
    flex-wrap:wrap
  }
  ul.lnk li { padding-top: 0; padding-bottom: 0; }

  #news_images {
    flex-direction: column;
    gap: 6vw;
  }
  #news_images img {
    width: 100%;
  }
  #news_wrapp {
    padding-top: 5.3923vw !important; /* 60px */
  }
  #news_wrapp p {
    font-size: calc(1.3177vw*2.6269) !important;
    line-height: 1.8em;
  }
  #news_wrapp h3 {
    margin-bottom: 0 !important;
    padding-bottom: 9.588vw !important;
    border-bottom: 0.0732vw solid #000; 
    font-size: calc(2.0426vw*2.6269) !important;
  }
  .wrap.news a.vall {
    font-size: calc(1.2177vw*2.6269) !important;
  }
  #news_wrapp p.date {
    margin-top: calc(-3.0vw*2.6269);
    margin-bottom: calc(3.5vw*2.6269);
  }
  #news_wrapp p.tag {
    margin-top: calc(2.5vw*2.6269);
  }
  a.news_arrow img {
    width: calc(2.6354vw*2.6269);
  }
  div.arrow {
    width: calc(2.6354vw*2.6269);
    min-width: calc(2.6354vw*2.6269) !important;
  }
  div.arrow a {
    display: block;
    height: calc(3vw*2.6269);
    min-height: calc(3vw*2.6269);
    vertical-align: middle;
    padding-top: calc(1.5vw*2.6269) !important;
  }

  .wrap.company p {
    font-size: calc(1.2177vw*2.6269) !important;
  }


  h2 {
    margin-bottom: 1.0em;
    margin-left: 3.66vw;
/*    font-size: 8.6425vw;*/
    font-size: 5.7692vw;
    margin-top: 4vw;
    letter-spacing: -0.05rem !important;
  }
  h2:after {
    left: -3.66vw;
    top: 4.6vw !important;
    content: '';
    width: calc(1.9765vw*2.6269);
  }
  h2 span {
    top: calc(1.2vw * 2.6269) !important;
    left: calc(100%);
    padding-left: 7vw;
    padding-bottom: calc(2vw*2.6269) !important;
    font-size: 3.8458vw !important;
  }
  h2 span.br {
    left: 0;
    left: calc(100%);
    padding-left: 0vw;
    display: block !important;
    position: initial !important;
  }

  img._cmsforcms {
    width: calc(58.565vw*2.6269) !important;
    height: auto;
    margin-bottom: 5.856vw;
    margin-top: 9.956vw; /* 136px */
  }

  div.company .info p {
    display: flex;
    border-bottom: 1px solid #000;
    width: 81vw; /* 744px */
    padding-top: 2.9282vw; /* 40px */
    padding-bottom: 2.9282vw; /* 40px */
  }
  div.company .info p span {
    display: block !important;
    padding-left: 0 !important;
    white-space: pre;
  }
  .company p span.sp {
    display: block !important;
    padding-left: 0 !important;
    white-space: pre;
  }
  div.company .info p span.sp {
    display: block !important;
    padding-left: 0;
  }
  .company_global p._01_singapore img, .company_global p._01_shanghai img {
    display: block;
    position: initial !important;
    right: auto;
    top: auto;
    width: 50.399vw !important; /* 265px */ 
    margin-top: 4vw;
    margin-bottom: 4vw;
  }

  .company_global .cap_2 a {
    display: block;
    position: absolute;
    line-height: calc(3.294vw*2.6269); /* 45px */
    width: calc(10.177vw*2.6269); /* 180px */
    left: 50.0vw !important;
    top: -1.0vw;
  }
  .company_global p.cap_2 {
    font-size: 5.294vw !important; /* 45px */
  }
  .company_global p.cap_2 span {
    font-size: 3.5vw !important; /* 45px */
    margin-top: -2.0vw !important;
  }
  .company_jigyo {
    font-size: calc(1.3177vw*2.6269);
    width: 80.52vw; /* 1100px */
  }
  .company_jigyo:last-of-type {
    margin-bottom: 7vw;
  }
  .company_jigyo div, .company_jigyo ul {
    width: 20vw !important;
    border-bottom: 1px solid #000;
    padding-bottom: 2.928vw; /* px40 */
    padding-left: 0;
  }
  .company_jigyo._first {
    margin-top: 11vw;
    border-top: 1px solid #000 !important;
  }
  .company_jigyo div {
    display: flex;
    padding-top: 2.928vw; /* px40 */
  }
  .company_jigyo ul {
    padding-top: 1.3vw;
    margin-left: 0;
    flex-grow: 1;
  }
  .company_jigyo ul li {
    white-space: normal !important;
    text-align: left;
    cursor: default;
  }
  .company_jigyo ul li.indent {
    padding-lefT: 1.0em;
    text-indent: -1.0em;
  }
  .company_jigyo div:first-of-type {
    width: 16.30vw !important; /* 250px */
    padding-left: 0; /* 60px */
  }
  .company_jigyo ul.c1 {
    max-width: 25.622vw !important; /* 350px */
  }

  div.business p {
    font-size: calc(1.3177vw*2.6269) !important;
    line-height: 1.6em;
  }

  .workflow1 span {
    display: block;
    width: 40vw; /* 347px */
    padding: 1.830vw; /* 25px */
    background-color: #c3e4d6;
    margin-top: 1.830vw; /* 25px */
    position: relative;
  }

  img._01_headoffice1 {
    position: initial !important;
    display: block !important;
    width: 60vw !important;
    min-width: 60vw !important; 
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .btn_access {
    font-size: calc(1.3177vw*2.6269); /* 18pt */
    width: calc(9.8828vw*2.6269); /* 135px */
    padding-bottom: calc(1.46412vw*2.6269); /* 20px */
    margin-bottom: calc(4.026vw*2.6269); /* 55px */
  }
  .btn_access.open:after {
     width: calc(3.66vw*2.6269);
     height: calc(3.51vw*2.6269);
     left: calc(2.06vw*2.6269);
  }
  .btn_access.open:before {
     width: calc(3.66vw*2.6269);
     height: calc(3.51vw*2.6269);
     left: calc(4.28vw*2.6269);
  }
  div.company .info2 {
    padding-left: 14.4978vw; /* 280px */
    position: relative;
    margin-top: 4vw;
/*    height: calc(28.17vw*2.6269) !important;  180px */
    min-height: calc(28.17vw*2.6269); /* 180px */
    margin-bottom: 0;
  }
  div.company .info2 p {
    width: 70.465vw; /* 744px */
    white-space: normal !important;
  }
  div.company .info2 p.ws_pre {
    white-space: initial !important;
  }
  div.company .info2 img {
    position: initial;
    display: block;
    width: 60vw !important;
    min-width: 60vw !important; 
    left: auto;
    top: auto;
    margin-top: 3vw;
  }
  .map {
    margin-top: 0 !important;
  }
  .map_info2 {
    margin-top: calc(4.8vw*2.6269) !important;
  }
  div.company .info p span:first-of-type {
/*    width: 20.497vw;  280px */
    width: 14.497vw;
    padding-left: 6.29575vw; /* 86px */
  }
  div.company .info p span:last-of-type {
    width: 39.6749vw;
  }
  .company_enkaku span:first-of-type {
    max-width: 10.50vw; /* 310px */
    width: 10.50vw !important;
    min-width: 10.50vw !important;
    padding-left: 0 !important;
  }
  .company_enkaku span:nth-child(2) {
    max-width: 8.093vw; /* 310px */
    width: 8.093vw !important;
    min-width: 8.093vw !important;
    text-align: right;
    margin-right: 3vw;
  }
  p.notblock span span {
    display: inline-block !important;
  }

  .care_makeup {
    display: block;
  }
  .care_makeup p {
    width: 76.00vw;
    margin-right: 4vw;
  }
  .care_makeup img {
    width: 72.995vw;
  }

  .dx_info {
    display: block;
  }
  .dx_info:first-of-type {
    margin-top: 6.588vw; /* 90px */
  }
  .dx_info:last-of-type {
    margin-top: 3.513vw; /* 48px */
  }
  .dx_info p {
    width: 76.00vw;
    min-width: 76.00vw;
    max-width: 76.00vw;
    margin-bottom: 8vw !important;
  }
  .dx_info p img {
    margin-bottom: 2.1961vw; /* 30px */
    min-width: 76.00vw;
    max-width: 76.00vw;
  }
  .dx_info p span {
    margin-left: -0.5em;
  }
  .topps {
    display: block;
  }
  .topps img {
    width: 76.00vw;
    margin-bottom: 4vw;
  }
  .topps p {
    width: 76.00vw;
  }
  #production-capabilities-and-Main-equipment {
    line-height: 1.0em;
    padding-top: 1.5vw;
  }
  #production-capabilities-and-Main-equipment span {
    margin-top: 2.0vw;
  }
  .cap_1 {
    font-size: calc(2.0vw*2.6269) !important;
    margin-top: 2vw;
  }
  .materials .cap_1 { font-size: 5.0vw !important; letter-spacing: -0.3vw; }
  .materials .cap_1 span {
    font-size: calc(1.2177vw*2.6269);
    position: absolute;
    left: 100%;
    margin-left: 4vw;
    white-space: pre;
    font-weight: normal;
    bottom: 0.8vw !important;
    letter-spacing: -0.1vw;
  }
  .cap_2 {
    font-size: calc(2.05vw*2.6269) !important;
    margin-top: 2vw !important;
    margin-bottom: 4.3923vw !important; /* 60px */
  }
  .cap_3 {
    margin-top: cals(2.928vw*2.6269); /* 40px */
  }

  /* 原料紹介 */
  .clmn {
    margin-top: 2.5vw;
  }
  div.lnk_genryo_lst_wrap {
    margin-top: calc(3vw*2.6269);
    font-size: calc(0.87847vw*2.6269);
    width: 100%;
    white-space:pre;
    border:3px solid #ccc;
    padding: 10px;
    text-align: center;
    margin-bottom: 50px;
    white-space: pre-wrap !important;
  }
  div.lnk_genryo_lst_wrap a {
    display: block;
    width:100%;
    height:100%; margin-bottom: calc(1vw*2.6269);
  }
  div.lnk_genryo_lst_wrap a span {
    font-size: cals(2.3426vw*2.6269);
  }
  .block_mtrl {
    flex-direction: column;
    margin-bottom: 5vw !important;
    width: 73.0336vw !important; /* 260px */
    min-width: 73.0336vw !important; /* 260px */
  }
  .block_mtrl img {
    width: 73.0336vw !important; /* 260px */
    min-width: 73.0336vw !important; /* 260px */
  }
  .materials a.vall {
    margin-top: 3vw !important;
    width: 22.225vw !important;
    height: 5vw;
    line-height: 5vw !important;
  }
  .block_mtrl p {
    font-size: 3.80vw !important;
  }
  /* 原料紹介 */


  .pd {
    padding-top: 0;
    margin-top: -4vw;
    padding-bottom: 4vw;
  }
  .wrap.bg {
    width: 88.461vw !important;
  }
  img.base {
    height: 65vw;
    height: 85vw;
    margin-top: -14vw;
  }
  #top_stage {
    padding-top: 30px;
  }
  #news {
    margin-top: 15vw;
  }
  h2 {
    font-size: 5.7692vw;
    margin-left: 6.69vw !important;
  }
  h2 span {
    font-size: 3.40vw !important;
    top: 2.5vw !important;
    right: -17.00vw;
  }
  #care_makeup h2 span {
    right: -27.00vw !important;
  }
  h2:after {
    display: block;
    position: absolute;
    left: -6.69vw;
    top: 49%;
    content: '';
    border-bottom: 0.1vw solid #000;
    width: 3.846vw;
  }
  .pd {
    padding-right: 0;
  }
  .md {
    width: 100%;
    font-size: 3.40vw !important;
    margin-right: 0;
    padding: 0 !important;
    margin-left: 6vw !important;
/*
    font-size: 3.076vw !important;
*/
  }
  #topps { margin-left: 3.6vw !important; }
  #products div.container {
    flex-direction: column;
    padding: 0;
    align-items: center;
  }
  #products div.item {
    position: relative;
    width: 82.692vw;
    flex-basis:69.23vw;
    margin-top:0px;
    text-align:center;
    margin-bottom: 0px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #products div.container div.item img {
    height: 48.07vw;
    width: 82.692vw;
    object-fit: cover !important;
  }

  #products div.item span:nth-of-type(2n-1) {
    bottom: 11vw !important;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 3.461vw;
    width: 100%;
  }
  #products div.item span:nth-of-type(2n-2) {
    bottom: 6.8vw;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 2.692vw;
  }

  #news a.vall {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4vw;
    font-size: 3.07vw !important;
  }

  #matelials div.item {
    position: relative;
    flex-basis: 25.5749vw !important;
    margin-top: 1.923vw;
    text-align: center;
    margin-bottom: 0px;
  }
  #matelials div.item:nth-last-of-type(1){
    margin-right:auto;
    margin-left: 0.9615vw;
  }
  #matelials div.item:nth-last-of-type(2){
    margin-left:auto;
    margin-right: 0.9615vw;
  }
  #care_makeup a.vall,
  #topps a.vall,
  #tld_info a.vall,
  #matelials a.vall {
    position: relative;
    width: 32.11vw !important;
    display: block;
    text-align: center;
    line-height: 6.923vw;
    background-color: #000;
    color: #fff;
    margin: 2vw 0vw 2vw 0vw;
    margin-left: auto !important;
    margin-right: 2.846vw !important;
    text-decoration: none;
    font-size: 3.07vw !important;
    margin-top: 3vw !important;
    margin-bottom: 5vw !important;
  }
  #matelials a.vall {
    margin-top: -13vw !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  #matelials .bg {
    padding-bottom: 19vw !important;
  }

  .showroom2 a.vall {
    position: relative;
    width: 32.11vw !important;
    display: block;
    text-align: center;
    line-height: 6.923vw;
    background-color: #000;
    color: #fff;
    margin: 2vw 0vw 2vw 0vw;
    text-decoration: none;
    font-size: 3.07vw !important;
    margin-top: 3vw !important;
    margin-bottom: 5vw !important;
  }
  .showroom2 a.vall:after {
    display: block;
    position: absolute;
    left: -2.6vw;
    top: 49%;
    content: '';
    border-bottom: 0.1vw solid #fff;
    width: 5.1923vw;
  }

  #care_makeup a.vall:after,
  #topps a.vall:after,
  #tld_info a.vall:after,
  #matelials a.vall:after {
    display: block;
    position: absolute;
    left: -2.6vw;
    top: 49%;
    content: '';
    border-bottom: 0.1vw solid #fff;
    width: 5.1923vw;
  }

  #care_makeup, #tld_info, #topps {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }

  #products .md {
    width: 75.77vw !important;
    white-space: normal !important;
  }
  #topps .md,
  #care_makeup .md,
  #tld_info .md {
    white-space: normal !important;
    width: 75.77vw !important;
    color: #000 !important;
    margin-top: -1.33vw;
    margin-left: auto;
  }
  #care_makeup .item img {
    position: relative;
    width: 82.69vw !important;
    margin-left: 6vw;
  }
  #tld_info img,
  #topps img {
    position: relative;
    width: 75.96vw !important;
    margin-left: auto;
    margin-top: 3vw;
    margin-right: 3.846vw !important;
  }
  #topps img {
    margin-bottom: 30vw !important;
  }
  #tld_info img {
    margin-left: 10vw !important;
  }

  #topps {
    position: relative;
    left: 0;
/*    width: 82.69vw;*/
    width: 87.85vw;
    margin-left: auto;
    margin-right: auto;
    height: auto !important;
  }
  #topps a.vall {
    margin-left: auto !important;
    margin-right: -3.6vw !important;
  }
  .tld_topps_wrap {
    height: 100%;
  }

  .wrap_slider {
    width: 84vw;
    margin-left: -5vw;
  }
  .slider2 {
    position: relative;
    width: calc(100%/2) !important; /*27.6720vw !important;*/ /* 328-> 378px */
    max-width: calc(100%/2) !important;
    min-width: calc(100%/2) !important;
/*    height: calc(36.60vw*1.5);  */
    height: calc(40.60vw*1.5); /* 500px */
  }
  .slider2 p.name {
    position: absolute;
/*
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
*/
/*    font-size: calc(1.8034vw*2.6269) !important;*/
    left: 3vw;
    font-size: calc(1.5034vw*2.6269) !important;
    white-space: pre;
    bottom: 2.0vw;
    pointer-events: none;
    letter-spacing: -0.5px;
    line-height: 1.0em;
  }
  .slider2 p span {
    margin-top: 0.3vw;
    font-size: 60%;
    padding-top: 0.0em;
    line-height: 1.0em !important;
    padding-bottom: 0.0em;
  }
  .container2.selected {
    position: relative;
    width: 100% !important; /* 328-> 378px */
    max-width: 100% !important;
    min-width: 100% !important;
    height: 42.9218vw !important; /* 406px */
  }
  .container2 {
    width: 100% !important; /* 328-> 378px */
    max-width: 100% !important;
    min-width: 100% !important;
    height: 42.60vw; /* 500px */
    overflow: hidden;
  }
  .container2:before {
    height: 47.9218vw !important; /* 406px */
  }
  .container2.selected:before {
    max-height: 27.9218vw !important; /* 406px */
  }

  .prev-next-box p {
    color: #f00;
    padding: 2px 10px;
    box-sizing: border-box;
    display: block;
    border-radius: 6px;
    font-size: 0 !important;
  }

  .prev-next-box p.prev {
    position: absolute;
    content: '';
    left: 2.0vw;
    top: 50%;
    width: calc(2.0vw*3);
    height: calc(2.6916vw*3);
    background: url(../img/arrow_l.svg);
    background-repeat: no-repeat;
  }
  .slider2.selected .prev-next-box p.prev {
    left: 1.0vw !important;
  }
  .slider2.selected .prev-next-box p.next {
    right: -2vw !important;
  }
  .prev-next-box p.next {
    position: absolute;
    content: '';
    right: 0.0vw;
    top: 50%;
    width: calc(2.0vw*3);
    height: calc(2.6916vw*3);
    background: url(../img/arrow_r.svg);
    background-repeat: no-repeat;
  }


  .product p span.sp {
    display: block;
    line-height: 1.0em !important;
  }
  .haschild span.sp {
    display: block !important;
    position: initial;
    left: auto;
    margin-left: 0vw;
    margin-top: 2.5vw;
    bottom: auto;
    font-weight: normal;
    line-height: 1.0em;
  }
  div.product ul.lnk li {
    font-size: calc(1.1171vw*2.6269);
  }
  h2:after {
    border-bottom: 0.4vw solid #000;
  }
  h2.heading { margin-top: 23vw; }
  h3.pt32 { font-size: 4.5vw !important; }
  h2.heading:before {
    width: calc(100vw*1.2) !important;
    height: calc(17.86237vw*1.2);
    border-bottom: none;
    background-size: cover !important;
    z-index: -1;
    position: absolute;
    left: calc(-30vw*1.2) !important;
    top: calc(-8.5vw*1.2) !important;
  }

  .materials a.vall {
    position: relative;
    width: 12.225vw;
    height: auto;
    display: block;
    text-align: center;
    line-height: calc(2.6vw*2.6269) !important;
    background-color: #000;
    color: #fff;
    margin: 3vw 0vw 3vw 0vw;
    margin-left: auto;
    margin-right: 3vw;
    text-decoration: none;
    font-size: calc(0.8785vw*2.6269);
    margin-top: -3vw;
  }
  .materials a.vall:after {
    display: block;
    position: absolute;
    left: calc(-0.96vw*2.6269);
    top: 49%;
    content: '';
    border-bottom: 0.3vw solid #fff;
    width: calc(1.9765vw*2.6269);
  }

  .workflow1 { position: relative; }
  .workflow1 span {
    display: block;
    position: absolute;
    width: 47.40vw; /* 347px */
    padding: 1.830vw; /* 25px */
    background-color: #c3e4d6;
    left: 34vw;
    top: 62vw;
  }
  .workflow1 span:after {
    display: block;
    content: '';
    position: absolute;
    width: 0;
    border-bottom: 4.196vw solid #c3e4d6; /* 30px */
    border-left: 2.599vw solid transparent;
    border-right: 2.599vw solid transparent;
    top: -4.199vw;
    left: 23vw;
  }

/*
  .tagline {
    width: 72.50vw;
    height: auto;
  }
*/
  table tr {
    display: block !important;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #000;
    padding: 1.5vw 1vw;
  }
  td {
    display: block !important;
    border: none !important;
    font-size: 3.50vw;
    width: 100% !important;
    line-height: 1.6em;
    padding-bottom: 0px !important;
    height: auto !important;
  }

  .title img {
    margin-top: 2.5vw;
    width: 30.23vw !important;
    height: auto;
  }
  .header {
    height: 60px !important;
  }
  .header_inner {
    height: 60px !important;
  }
  .nav {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100% !important;
/*    height: 100vh;*/
    padding-top: 0px;
    background-color: #fff;
    transition: all .6s;
  }
  .hamburger {
    position: absolute;
    left: 2.8846vw;
    top: 1.2vw;
    width: 7.6923vw;
    height: 7.6923vw;
/*
    right: 15px;
    top: 1.2vw;
    width: 7.6923vw;
    height: 7.6923vw;
*/
    cursor: pointer;
    z-index: 300;
  }
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
  }
  .nav_list li a {
/*    font-size: 3.4615vw;*/
    font-size: 1.646vw;
    line-height: 2.0em;
    display: block;
    position: relative !important;
    margin-left: 0px;
  }
  .nav_list li a:after {
    display: block;
    position: absolute !important;
    content: '';
    border-left: 4px solid #000;
    top: 10px;
    left: -1.0em;
    height: 2.0em;
  }
  .nav_item {
    text-align: center;
    padding: 0 14px;
  }
  .nav_item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  .nav_item a:hover {
    font-weight: 600;
/*    background-color: #eee;*/
  }
  .hamburger_border {
    position: absolute;

    left: 11px;
    width: 18px;
    height: 2px;
/*
    left: 2.11538vw;
    width: 3.461538vw;
    height: 0.3846vw;
*/
    background-color: #333;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 14px;
/*    top: 2.6923vw;*/
  }
  .hamburger_border_center {
    top: 20px;  
/*    top: 3.84615vw;*//
  }
  .hamburger_border_bottom {
    top: 26px; 
/*    top: 5.0vw;*/
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
/*    height: 100vh;*/
    z-index: -30;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }
  .nav-open .black_bg {
    opacity: 0 !important;
    visibility: visible;
  }
  .nav_item li { text-align: left !important; }
  .nav_item {
    text-align: left;
    padding: 0 40px !important;
  }
  /* 表示された時用のCSS */
  .nav-open .nav {
    left: 0px;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }

  .dropdwn_menu {
    width: 100%;
    display: none;
    position: relative !important;
    margin-left: 0px !important;
    margin-top: 5px;
    padding: 0;
  }
  .dropdwn_menu li.sub, .dropdwn_menu.m2 li.sub, .dropdwn_menu.m3 li.sub, .dropdwn_menu.m4 li.sub { 
    margin-left: 0px !important;
 }
  .dropdwn_menu li.sub {
    display: flex;
    flex-direction: column !important;
  }
  .dropdwn_menu li.sub div {
    display: flex !important;
    flex-direction: column !important;
    margin-top: -2.0vw !important;
  }
  .dropdwn_menu li div a {
    display: block !important;
    width: 100vw !important; 
    font-size: 3.846vw !important;
  }
  .dropdwn_menu.m2 li div a, .dropdwn_menu.m3 li div a, .dropdwn_menu.m4 li div a {
    display: none !important;
  }

  .dropdwn_menu.m2 li div h6 a, .dropdwn_menu.m3 li div h6 a, .dropdwn_menu.m4 li div h6 a {
    display: block !important;
    width: 100vw !important;
    font-size: 3.846vw !important;
    height: 6.0vw !important;
    margin-top: 2.0vw; 
    margin-left: 6.6vw; 
    border-bottom: none;
 } 
  .dropdwn_menu li.sub div {
    margin: 0 !important;
    padding: 0 !important;
  }
  .dropdwn_menu li div h6:after {
    position: absolute;
    display:block;
    height: 2.0vw !important;
    width: 2.0vw;
    content: '';
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    left: 3.4vw;
    top: 0.8vw;
  }
  .dropdwn_menu.m2 li a {
    border-bottom: none;
  }
  .nav_item a {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .nav_item a:hover {
    background-color: transparent !important;
  }

  .dropdwn_menu.m1 li div a {
    display: block !important;
    width: 100vw !important;
    font-size: 3.846vw !important;
    margin-top: 1.4vw !important;
    min-height: 5.5vw !important;
    margin-left: 6.6vw; 
    border-bottom: 1px solid #eee !important;
  } 
  .dropdwn_menu.m1 li div a:first-of-type {
    margin-top: -1.4vw !important;
  }
  .dropdwn_menu.m1 li div a:after {
    border-left: none !important;
    position: absolute;
    display:block;
    height: 2.0vw !important;
    width: 2.0vw;
    content: '';
    border-left: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    left: -3.0vw;
    top: 2.8vw;
  }

  #adrs img {
    width: 65.38vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 9.615vw;
  }
  #adrs p {
    white-space: pre;
    font-size: 2.692vw;
    line-height: 4.615vw;
    text-align: center;
  }
  #adrs ul {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin-top: 3.3674vw;
    gap: 2.3vw;
  }
  #adrs ul img {
    width: 5.759vw;
  }
  #adrs ul.li:first-of-type {
    max-width: 5.759vw;
    flex-basis: 5.759vw;
  }

  #adrs ul.li:last-of-type {
    max-width: 5.759vw;
    flex-basis: 5.759vw;
  }

  footer p {
    font-weight: 400;
    width: 100%;
    text-align: center;
    line-height: 36px;
    font-size: 80%;
  }
  footer p span {
    display: block;
    font-size: 0;
    line-height: 0;
  }
  footer {
    background-color: #001f5b;
    color: #fff;
    height: 36px;
    z-index: 20 !important;
    margin-top: auto;
    flex-grow: 0; flex-basis: auto;
  }

  .dropdwn_menu li.sub {
    
  }
  .dropdwn_menu li.sub a {
    margin-left: 0px !important;
    padding-bottom: 10px;
    border-style: none;
  }
  .dropdwn_menu li.sub a:after {
    position: absolute;
    display:block;
    height: 14px !important;
    width: 14px;
    content: '';
    border-left: 1.6px solid #fff;
    border-bottom: 1.6px solid #fff;
    left: -20px;
    top: 15px;
  }					      }
/*}*//* sp */


/*---------------------------------------------------------------------------*/

* {
  box-sizing: border-box;
}
img { margin-right: 5px; }
li { font-size: 94%; cursor: pointer; }
ul { margin-left: -1.0em; }
.on { border: 4px solid #f00; }
div { box-sizing: border-box; }
div.thumb {
  display: flex;
  width: 400px;
  flex-wrap: wrap;
  gap: 5px 5px; 
  margin-top: 30px;
}
input { height: 2.0em; }
div.thumb img {
  flex-basis: calc((100% - 70px) / 2) !important;
  width: 44.5%;
  margin-bottom: 10px;
  cursor: pointer;
}
div.thumb img.on {
  flex-basis: calc((100% - 70px) / 2 - 8px);
  height: auto;
  box-sizing: border-box;
  margin-left: -4px;
  margin-top: -4px;
}
#input-title {
  display: flex;
  margin-bottom: 30px;
}
#input-title input[type='text'] {
  margin-left: 10px;
  padding: 0 8px;
}
#input-title span {
  display: block;
  margin-top: 5px;
}
#input-title button {
  margin-top: 5px;
}
button {
  cursor: pointer;
}
span.btn_del img {
  height: 1.0em;
  margin-left: 10px;
}
span.handle img {
  height: 1.0em;
  margin-left: 0px;
}
#menu {
  padding-left: 0;
  margin-left: 0px;
  width: 100% !important;
}
li {
/*
  list-style-type: none;
  margin-left: 0;
*/
  line-height: 1.56em;
  display: flex;
}
#menu li span:first-of-type {
  width: 100%;
}
#menu li {
  box-sizing: border-box !important;
  max-width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 100% !important;
  text-align: left;
  font-size: 92% !important;
}
#menu li:nth-child(odd) {
  background: #555;
}

#top_stage {
  
}
.nav.off {
  height: 30px !important; 
  max-height: 30px !important; 
  min-height: 30px;
  padding: 0;
  overflow: hidden;
}

.nav h3 {
  font-weight; 500;
  font-size: 90%;
  margin-top: -17px !important;
  margin-left: 20px !important;
  padding: 0;
  position: relative;
  padding-left: 10px !important;
  cursor: pointer;
}

#title {
  margin-top: 50px !important;
}

.nav h3:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #fff;
  top: 9px;
  left: -7px;
}
.nav.off h3:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  top: 7.0px;
  left: -5px;
}

.ctrl_view {
  display: block;
/*  position: absolute;*/
/*  height: 45px;*/
/*  border: 1px solid #000;*/
  font-size: 12px;
  background: rgba(192, 192, 192, .2);
  box-sizing: border-box;
/*  border: 1px solid rgba(128, 128, 128, .1);*/
  border-radius: 30px;
  color: #444;
  width: 510px;
  float: right;
  text-align: center;
  line-height: 40px;
  padding-top: 2px;
  padding-bottom: 3px;
  cursor: default !important;
/*
  margin-left: auto;
  margin-right: auto;
*/
}

.ctrl_zout {
  display: inline-block;
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  margin-right: 5px;
  cursor: pointer !important;
  line-height: 35px;
}

.ctrl_scrn {
  display: inline-block;
  color: #fff;
  width: 80px;
  height: 35px !important;
  border-radius: 20px;
  background: rgba(0, 0, 0, .5);
  margin-left: 20px;
  cursor: pointer !important;
  line-height: 35px;
  margin-top: 0px;
}

.ctrl_zin {
  display: inline-block;
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  margin-left: 5px;
  cursor: pointer !important;
  line-height: 35px;
  margin-top: 0px;
}

#downVolume, #upVolume {
  padding-top: 1px;
  font-size: 150% !important;
  line-height: 29px;
}

span#ichi, span#nagasa {
 color: #888xo !important;
}

.video-info {
  width: 370px;
  margin-left: auto;
  padding: 14px;
/*  border: 1px solid #ccc;
  border-radius: 5px;
*/
  color: #444;
}
.video-info p.m {
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 100% !important;
  margin-left: 0;
}
.video-info p {
  font-size: 90% !important;
  line-height: 1.6em;
  margin-left: 1.5em;
}
.video-info p span {
  font-size: 80% !important;
}

#panel-msg {
  overflow-y: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
}

ul#docs {
  margin: 20px 0px 20px 30px; 
}
ul#docs li {
  line-height: 2.4em;
}

#docs a.btn {
  margin-top: 0px !important;
}

a.btn {
  background-color: #001f5b;
  border-radius: 3px;
  padding: 3px 15px 3px 15px;
  color: #fff;
  text-decoration: none;
  font-size: 90%;
  margin-top: 20px !important;
  margin-right: 20px;
  display: inline-block;
}
a.btn:hover {
  opacity: 0.8;
}