@charset "UTF-8";

/*   Contents   */

/*SKIP*/
header ul.skip {
  position: absolute;
  left: -9999em;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

header ul.skip li {
}

/*全体パーツ*/
.fa-caret-right {
  margin: 0 5px 0 0;
}

/*レスポンシブ枠*/
#responsive_area {
  display: none;
}

/*   header   */
header {
  width: 100%;
  background-color: rgba(244, 252, 250, 1);
  position: fixed;
  top: 0;
  z-index: 15;
}

.header_menu {
  display: none;
}

/*    sp menu    */
.header_menu-active {
  background-color: rgba(215, 238, 241, 1);
  display: none;
  left: 0;
  padding-bottom: 300px;
  margin-top: 70px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

#title_area {
  width: 1000px;
  height: 60px;
  margin: 0 auto;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: space-between;
  align-content: center;
  align-items: center;
}

#logo_block {
  width: 290px;
}

#logo_block h2 {
  margin: 0;
}
#logo_block h2 .header_logo {
  width: 170px;
  height: 38px;
  background-image: url(../image/logo.svg);
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

#sub_menu_block {
}

#sub_menu_block ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: space-between;

  list-style: none;
}

#sub_menu_block ul li {
  padding: 0 5px;
  margin: 0;
}

#sub_menu_block ul li a {
  display: block;
  width: 100%;

  padding: 10px;
  font-family: var(--sub-font);

  color: #515b61;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.08em;

  transition: all 0.5s;
}

#sub_menu_block ul li a:hover {
  color: var(--main-color);
}

#sub_menu_company_block {
  width: 120px;
}

#sub_menu_company_block a {
  width: 120px;
  height: 26px;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: center;
  align-content: center;
  align-items: center;

  border-radius: 13px;

  background: rgb(0, 166, 191);
  background: linear-gradient(
    90deg,
    rgba(0, 166, 191, 1) 0%,
    rgba(35, 153, 104, 1) 100%
  );

  font-family: var(--sub-font);

  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.08em;

  position: relative;
  z-index: 0;

  transition: all 0.5s;
}

#sub_menu_company_block a::after {
  font-family: var(--icon-font);
  content: "chevron_right";
  position: absolute;
  right: 5px;
}

#sub_menu_company_block a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(0, 166, 191, 1) 0%,
    rgba(0, 166, 191, 1) 100%
  );
  opacity: 0;
  transition: opacity 0.5s;
  border-radius: 13px;
}

#sub_menu_company_block a:hover::before {
  opacity: 1;
}

#sub_logo_block {
  width: 65px;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: space-between;
}

#sub_logo_block .instagram_link,
#sub_logo_block .officialshop_link {
}

#sub_logo_block .instagram_link {
  width: 23px;

  display: block;
}

#sub_logo_block .officialshop_link {
  width: 25px;

  display: block;
}

#sub_logo_block .instagram_link #instagram_logo,
#sub_logo_block .officialshop_link #officialshop_logo {
  width: 100%;
}

#sub_logo_block .instagram_link #instagram_logo .sub_logo_block_cls,
#sub_logo_block .officialshop_link #officialshop_logo .sub_logo_block_cls {
  transition: all 0.5s;
  fill: #515b61;
  stroke-width: 0px;
}

#sub_logo_block .instagram_link:hover #instagram_logo .sub_logo_block_cls,
#sub_logo_block
  .officialshop_link:hover
  #officialshop_logo
  .sub_logo_block_cls {
  fill: var(--main-color);
}

/*   nav   */
nav#globalnavi {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 11;
  top: 60px;
}

nav#globalnavi ul#globalnavi_block {
  width: 1000px;
  height: 65px;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: space-between;
}

nav#globalnavi ul#globalnavi_block li {
  width: calc(100% / 4 - 5px);
  padding: 0;
  margin: 0;
  display: block;

  position: relative;
}

nav#globalnavi ul#globalnavi_block li a {
  color: #515b61 !important;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: center;
  align-content: center;
  align-items: center;

  width: 100%;

  padding: 10px 0;
  background-color: rgba(255, 255, 255, 1);

  transition: all 0.5s;
}

nav#globalnavi ul#globalnavi_block li a::after {
  font-family: var(--icon-font);
  content: "expand_more";
  display: inline-block;
  margin: 0 0 0 15px;
}

nav#globalnavi ul#globalnavi_block li a span {
  font-size: 1.6rem;
  font-weight: 400;
}

nav#globalnavi ul#globalnavi_block li a:hover {
  color: var(--main-color) !important;
}

nav#globalnavi ul#globalnavi_block li.toothbrush_area a {
}

nav#globalnavi ul#globalnavi_block li.toothpaste_area a {
}

nav#globalnavi ul#globalnavi_block li.oralcare_area a {
}

nav#globalnavi ul#globalnavi_block li.shop_area a {
}

nav#globalnavi ul#globalnavi_block li a svg .globalnavi_icon_cls {
  fill: none;
  stroke: #515b61;
  transition: all 0.5s;
}

nav#globalnavi ul#globalnavi_block li a:hover svg .globalnavi_icon_cls {
  stroke: var(--main-color);
}

nav#globalnavi ul#globalnavi_block li.toothbrush_area a svg {
  width: 17px;
  margin: 0 15px;
}

nav#globalnavi ul#globalnavi_block li.toothpaste_area a svg {
  width: 28px;
  margin: 0 15px;
}

nav#globalnavi ul#globalnavi_block li.oralcare_area a svg {
  width: 33px;
  margin: 0 15px;
}

nav#globalnavi ul#globalnavi_block li.shop_area a svg {
  width: 27px;
  margin: 0 15px;
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block::before,
nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block::before,
nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block::before,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block::before {
}

nav#globalnavi ul#globalnavi_block li.toothpaste_area #toothpaste_menu_block,
nav#globalnavi ul#globalnavi_block li.toothbrush_area #toothbrush_menu_block,
nav#globalnavi ul#globalnavi_block li.oralcare_area #oralcare_menu_block,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block {
  position: absolute;
  top: 65px;
  z-index: 100;

  display: none;
  width: 100%;
  height: auto;

  padding: 0;
}

nav#globalnavi ul#globalnavi_block li.toothpaste_area #toothpaste_menu_block ul,
nav#globalnavi ul#globalnavi_block li.toothbrush_area #toothbrush_menu_block ul,
nav#globalnavi ul#globalnavi_block li.oralcare_area #oralcare_menu_block ul,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block ul {
  margin: 0;
  padding: 0;
  letter-spacing: normal;
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li,
nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li,
nav#globalnavi ul#globalnavi_block li.oralcare_area #oralcare_menu_block ul li,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block ul li {
  padding: 0;
  margin: 0 0 1px 0;
  display: block;

  background-color: #d7eef1;
  border-right: none;

  position: relative;

  width: 100%;
  height: auto;
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li
  a,
nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li
  a,
nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li
  a,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block ul li a {
  color: #00a6bf !important;
  font-size: 1.4rem;
  line-height: 1.8rem;
  text-align: left;
  font-weight: bold;
  text-decoration: none;

  display: block;
  width: 100%;
  height: auto;

  background-color: transparent;

  padding: 20px;

  transition: all 0.5s;
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li
  a::after,
nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li
  a::after,
nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li
  a::after,
nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li
  a::after {
  font-family: var(--icon-font);
  content: "chevron_right";
  position: absolute;
  right: 5px;
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block::before {
}

nav#globalnavi ul#globalnavi_block li.toothpaste_area #toothpaste_menu_block {
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li
  a::before {
}

nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block::before {
}

nav#globalnavi ul#globalnavi_block li.toothbrush_area #toothbrush_menu_block {
}

nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li
  a::before {
}

nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block::before {
}

nav#globalnavi ul#globalnavi_block li.oralcare_area #oralcare_menu_block {
}

nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li
  a::before {
}

nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block::before {
}

nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block {
}

nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li
  a::before {
}

nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li
  a:hover,
nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li
  a:hover,
nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li
  a:hover,
nav#globalnavi ul#globalnavi_block li.shop_area #shop_menu_block ul li a:hover {
  text-decoration: none;
  background-color: #c2e4e8;
}

body#toothpaste_area01
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area01,
body#toothpaste_area02
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area02,
body#toothpaste_area03
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area03,
body#toothpaste_area04
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area04,
body#toothpaste_area05
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area05,
body#toothpaste_area06
  nav#globalnavi
  ul#globalnavi_block
  li.toothpaste_area
  #toothpaste_menu_block
  ul
  li#toothpaste_area06 {
  background-color: rgba(71, 182, 100, 0.3);
}

body#toothbrush_area01
  nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li#toothbrush_area01,
body#toothbrush_area02
  nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li#toothbrush_area02,
body#toothbrush_area03
  nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li#toothbrush_area03,
body#toothbrush_area04
  nav#globalnavi
  ul#globalnavi_block
  li.toothbrush_area
  #toothbrush_menu_block
  ul
  li#toothbrush_area04 {
  background-color: rgba(250, 170, 41, 0.3);
}

body#oralcare_area01
  nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li#oralcare_area01,
body#oralcare_area02
  nav#globalnavi
  ul#globalnavi_block
  li.oralcare_area
  #oralcare_menu_block
  ul
  li#oralcare_area02 {
  background-color: rgba(216, 102, 112, 0.3);
}

body#shop_area01
  nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li#shop_area01,
body#shop_area02
  nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li#shop_area02,
body#shop_area03
  nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li#shop_area03,
body#shop_area04
  nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li#shop_area04,
body#shop_area05
  nav#globalnavi
  ul#globalnavi_block
  li.shop_area
  #shop_menu_block
  ul
  li#shop_area05 {
  background-color: rgba(137, 96, 172, 0.3);
}

/* pankuzu */
#pankuzu_area {
  width: 100%;
  padding: 8px 0 5px;
  margin-top: 12px;
  background: #ececec;
  box-shadow: 0 8px 3px -3px #ccc inset;
}
#pankuzu_area .pankuzu_box ul {
  width: 1160px;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
#pankuzu_area .pankuzu_box li {
  list-style-type: none;
  padding: 0;
  font-size: 1.3rem;
  line-height: 34px;
  font-weight: 400;
}
#pankuzu_area .pankuzu_box a {
  display: inline-block;
  margin: 0 15px 0 0;
  color: #000 !important;
  font-weight: 400;
  text-decoration: none;
}

#pankuzu_area .pankuzu_box a:hover {
  color: #ddd;
  text-decoration: underline;
}

#pankuzu_area .pankuzu_box a {
  position: relative;
  padding: 0 16px 0 0;
}
#pankuzu_area a::before,
#pankuzu_area a::after {
  position: absolute;
  top: 0;
  margin: auto;
  content: "";
}
#pankuzu_area .pankuzu_box a::after {
  font-size: 1.2rem;
  line-height: 34px;
  color: #595757;
  margin: 13px 0 0 0;

  right: 0px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #595757;
  border-right: 1px solid #595757;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*   main   */
main {
  width: 100%;
  margin: 0 auto;
}

main#contents {
  padding-top: 60px;
  position: relative;
}

article {
}

/*article共通パーツ*/

article h1 {
}

/*   footer   */
footer {
  width: 100%;
  padding: 55px 0 70px;
  background-color: #317198;
  margin: 0 auto;

  position: relative;
}

footer .wrapper {
  width: 530px;
  margin: 0 auto;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  justify-content: space-between;
}

footer #footerNavi {
  width: 245px;
  padding: 35px 0;
  margin: 0 auto;
}

footer #footerNavi ul {
  list-style-type: none;
}

footer #footerNavi ul li {
  padding: 0;
  margin: 0 0 20px 0;
}

footer #footerNavi ul li a {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  letter-spacing: 0.08em;
  border: none;
  transition: all 0.5s;
}

footer #footerNavi ul li a:hover {
  color: var(--main-color);
}

footer #footerCopylight {
  width: calc(100% - 245px);
  padding: 0 0 25px 0;

  text-align: left;
}

footer #footerCopylight .logo_block {
  width: 100%;

  text-align: left;
  margin: 0 0 25px 0;
}

footer #footerCopylight .logo_block a {
  width: 182px;
  height: 42px;
  background-image: url(../image/logo_w.svg);
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: block;
  overflow: hidden;
  white-space: nowrap;

  transition: all 0.5s;
}

footer #footerCopylight .sub_logo_block {
  width: 100%;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: flex-start;
}

footer #footerCopylight .sub_logo_block .instagram_link,
footer #footerCopylight .sub_logo_block .officialshop_link {
}

footer #footerCopylight .sub_logo_block .instagram_link,
footer #footerCopylight .sub_logo_block .officialshop_link {
  width: 32px;
  height: 32px;

  margin: 0 20px 0 0;

  background-color: #fff;

  border-radius: 32px;

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;

  justify-content: center;
  align-content: center;
  align-items: center;

  transition: all 0.5s;
}

footer #footerCopylight .sub_logo_block .instagram_link #instagram_logo,
footer #footerCopylight .sub_logo_block .officialshop_link #officialshop_logo {
  width: 60%;
}

footer
  #footerCopylight
  .sub_logo_block
  .instagram_link
  #instagram_logo
  .sub_logo_block_cls,
footer
  #footerCopylight
  .sub_logo_block
  .officialshop_link
  #officialshop_logo
  .sub_logo_block_cls {
  transition: all 0.5s;
  fill: #317198;
  stroke-width: 0px;
}

footer #footerCopylight .sub_logo_block .instagram_link:hover,
footer #footerCopylight .sub_logo_block .officialshop_link:hover {
  background-color: var(--main-color);
}

footer
  #footerCopylight
  .sub_logo_block
  .instagram_link:hover
  #instagram_logo
  .sub_logo_block_cls,
footer
  #footerCopylight
  .sub_logo_block
  .officialshop_link:hover
  #officialshop_logo
  .sub_logo_block_cls {
  fill: #fff;
}

footer #footerCopylight .address_block {
  padding: 20px 0 40px 0;
  text-align: left;
}

footer #footerCopylight .address_block p {
  color: #fff !important;
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 500;
  font-variant: normal;
  text-decoration: none;
  font-style: normal;
  display: block;
  text-align: left;
  letter-spacing: 0.05em;
}

footer #footerCopylight .address_block p.company_name_part {
  color: #fff !important;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  font-variant: normal;
  text-decoration: none;
  font-style: normal;
  display: block;
  text-align: left;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
}

footer address {
  color: #fff !important;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-weight: 300;
  font-variant: normal;
  text-decoration: none;
  font-style: normal;
  display: block;
  text-align: left;
  letter-spacing: 0.05em;
}

#footer_arrow {
  margin: 0 auto;
  padding: 0;
  text-align: right;

  position: absolute;
  bottom: 120px;
  left: calc(50% + 265px);
  right: 0;

  display: block;

  z-index: 100;
}

#footer_arrow a {
  width: 75px;
  height: 75px;
  display: block;
  background-image: url(../image/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
}

/*------------------------------
SmartPhone---768breakPoint
================================*/
@media screen and (max-width: 768px) {
  /*   Contents   */
  /*SKIP*/
  header ul.skip {
    position: absolute;
    left: -9999em;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  header ul.skip li {
  }

  /*全体パーツ*/
  .fa-caret-right {
    margin: 0 5px 0 0;
  }

  /*レスポンシブ枠*/
  #responsive_area {
    display: none;
  }

  /*   header   */
  header {
    width: 100%;
    height: 70px;
    background: rgba(244, 252, 250, 1);

    position: fixed;
    z-index: 9999;
    top: 0;
  }

  .header_menu {
    display: block;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0);

    position: fixed;
    top: 3vw;
    right: 10px;
    z-index: 9999;

    border-bottom: none 1px rgba(230, 230, 230, 0);
  }

  .header_menu #togglemenuicon_area {
    position: relative;
    width: 40px;
    height: 50px;
    box-sizing: border-box;

    margin: 0 auto;
  }

  /* 三本線のスタイルを決める */
  .header_menu #togglemenuicon_area span {
    display: block;
    width: 35px;
    height: 2px;
    background: #000;
    position: absolute;
    left: 4px;
    transition: all 0.5s ease;
    border-radius: 2px;
  }

  /* 線の縦位置の調整 */
  .header_menu #togglemenuicon_area span.lineup {
    top: 9px;
  }
  .header_menu #togglemenuicon_area span.linemiddle {
    top: 19px;
  }
  .header_menu #togglemenuicon_area span.linebottom {
    bottom: 19px;
  }

  .header_menu.is-active #togglemenuicon_area span.lineup {
    top: 21px;
    transform: rotate(45deg);
  }
  .header_menu.is-active #togglemenuicon_area span.linemiddle {
    opacity: 0;
  }

  .header_menu.is-active #togglemenuicon_area span.linebottom {
    top: 21px;
    transform: rotate(-45deg);
  }

  .header_menu #togglemenuicon_area p.copypoint {
    display: none;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .header_menu #togglemenuicon_area p.copypoint::after {
    content: "MENU";
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    color: #999;
    text-align: center;
    letter-spacing: 0.15em;

    display: block;
    transition: all 0.5s ease;
  }

  .header_menu.is-active #togglemenuicon_area p.copypoint::after {
    content: "CLOSE";
  }

  /*    sp menu    */
  /*
.header {
  background-color: #000;
  color: #fff;
  left: 0;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
  width: 100%;
  z-index: 10;
}
*/

  .header.is-open {
    bottom: 0;
    overflow: scroll;
    position: fixed;
    top: 0;
    height: 100%;
  }

  body .header.is-open a {
    color: #515c61 !important;
  }

  .header_menu-active.is-active {
    display: block;
  }

  .header_menu_list {
    border-bottom: 1px solid rgba(215, 238, 241, 1);
    /*border-top: 1px solid #2b2c2d;*/
    color: #515c61;
  }

  .header_menu_list a {
    color: #fff !important;
  }

  .header_menu_list.is-active.header_menu_list a {
    background-color: rgba(215, 238, 241, 1);
    color: var(--main-color) !important;
  }

  .header_menu_hide {
    display: none;
  }

  .header_menu_list.is-active .header_menu_ttl:after {
    -webkit-transform: translateY(0) rotate(180deg);
    transform: translateY(0) rotate(180deg);
  }

  .header_menu_link.is-active .header_menu_arrow:after {
    -webkit-transform: translateY(0) rotate(180deg);
    transform: translateY(0) rotate(180deg);
  }

  .header_menu_ttl {
    font-size: 5vw;
    position: relative;
    background-color: rgba(215, 238, 241, 1);
  }

  .header_menu_ttl > a {
    display: block;
    padding: 3.12% 12.5% 3.12% 10%;
  }

  .header .header_menu_ttl-arrow:after,
  .header .header_menu_arrow:after {
    font-family: var(--icon-font);
    content: "expand_more";
    line-height: 0;
    width: 4vw;
    height: 4vw;
    margin: auto 0 auto 5%;
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    display: inline-flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: center;
    align-content: center;
    align-items: center;
  }

  .header_menu_ttl-arrow {
    font-size: 5vw;
    padding: 3.12% 12.5% 3.12% 10%;
    position: relative;
  }

  .header_menu_list.is-active .header_menu_ttl-arrow {
    background-color: rgba(215, 238, 241, 1);
    color: var(--main-color) !important;
  }

  .header_menu_arrow {
    position: relative;
  }

  .header_menu_link {
    border-bottom: 1px solid rgba(215, 238, 241, 1);
    position: relative;
  }

  .header_menu_link:first-child {
    border-top: 1px solid rgba(215, 238, 241, 1);
  }

  .header_menu_link .header_menu_link_inner {
    display: block;
    font-size: 4vw;
    padding: 3.12% 12.5% 3.12% 15%;
    position: relative;
  }

  .header_menu_link-child {
    background-color: #888;
    padding-left: 5%;
  }

  .header_menu_link-last_box {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 8.75% 12.5% 3.12% 5%;
    position: relative;
  }

  .header_menu_link-last_box:after {
    color: #666;
    content: "＞";
    position: absolute;
    right: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .header_menu_link-last_img {
    margin-right: 6%;
    width: 24.24%;
  }

  .header_menu_link-last_txt {
    width: 57.12%;
  }

  .header_menu_link-last_ttl {
    font-size: 4vw;
    font-weight: bold;
    line-height: 1;
  }

  .header_menu_link-last_lead {
    color: #888;
    font-size: 3vw;
    letter-spacing: -0.1em;
    margin-top: 3.98%;
  }

  .header_menu_icons {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 6.25% auto 0;
    width: 75%;
  }

  .header_menu_icons_item {
    display: inline-block;
    width: 14%;
  }

  .header_menu_icons_link {
    display: block;
  }

  .header_menu_icons_img {
    display: block;
    width: 100%;
  }

  .header_menu_txtLink {
    color: #888;
    line-height: 2.4;
    margin-top: 7.5%;
    padding-left: 5%;
  }

  .header_menu_txtLink a {
    font-size: 3.75vw;
  }

  .header_menu_list.lang-active {
    border-bottom: 1px none #212121;
    /*border-top: 1px solid #2b2c2d;*/
    color: #fff;
    padding: 20px 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: center;
  }
  .header_menu_list #lang_block a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    align-items: center;
    align-content: center;

    height: 51px;

    font-size: 14px;
    font-weight: 300;
    line-height: 15px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .header_menu_list #lang_block span {
    width: 51px;
    height: 51px;

    margin: 0 10px 0 0;

    text-indent: -9999px;
    display: block;
    overflow: hidden;
    white-space: nowrap;

    background-image: url(../images/lang.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    background-color: #9f9f9f;

    border-radius: 50%;
    cursor: pointer;
  }

  #title_area {
    width: 100%;
    height: 70px;

    justify-content: flex-start;
  }

  #logo_block {
    width: 55vw;
    float: left;
  }

  #logo_block h2 {
    margin: 0;
  }

  #logo_block h2 .header_logo {
    width: 100%;
    height: 8.5vw;
    background-image: url(../image/logo.svg);
    background-repeat: no-repeat;
    background-position: 5vw center;
    background-size: contain;
    text-indent: -9999px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
  }

  #sub_menu_block,
  #sub_menu_company_block {
    display: none;
  }

  #sub_logo_block {
    width: 22vw;
    margin: 0 0 0 2vw;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: space-between;
  }

  #sub_logo_block .instagram_link,
  #sub_logo_block .officialshop_link {
  }

  #sub_logo_block .instagram_link,
  #sub_logo_block .officialshop_link {
    width: 10vw;
    height: 10vw;

    margin: 0;

    background-color: #fff;

    border-radius: 13vw;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: center;
    align-content: center;
    align-items: center;

    transition: all 0.5s;
  }

  #sub_logo_block .instagram_link #instagram_logo,
  #sub_logo_block .officialshop_link #officialshop_logo {
    width: 60%;
  }

  #sub_logo_block .instagram_link #instagram_logo .sub_logo_block_cls,
  #sub_logo_block .officialshop_link #officialshop_logo .sub_logo_block_cls {
    transition: all 0.5s;
    fill: #515b61;
    stroke-width: 0px;
  }

  #sub_logo_block .instagram_link:hover #instagram_logo .sub_logo_block_cls,
  #sub_logo_block
    .officialshop_link:hover
    #officialshop_logo
    .sub_logo_block_cls {
    fill: var(--main-color);
  }

  /* pankuzu */
  #pankuzu_area {
    width: 100%;
    margin: 0 auto 2rem auto;
    padding: 70px 1rem 0 1rem;
    font-size: 1.2rem;
    line-height: 34px;
  }

  #pankuzu_area .pankuzu_box ul {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #pankuzu_area a {
    display: inline-block;
    margin: 0 15px 0 0;
    color: #595757;
  }

  #pankuzu_area a:hover {
    color: #ddd;
  }

  #pankuzu_area a {
    position: relative;
    padding: 0 16px 0 0;
  }
  #pankuzu_area a::before,
  #pankuzu_area a::after {
    position: absolute;
    top: 0;
    margin: auto;
    content: "";
  }
  #pankuzu_area a::after {
    font-size: 1.2rem;
    line-height: 34px;
    color: #595757;
    margin: 13px 0 0 0;

    right: 0px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #595757;
    border-right: 1px solid #595757;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /*   main   */
  main {
    width: 100%;
    margin: 0 auto;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: block;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  main#contents {
    padding-top: 70px;
  }

  article {
    width: 100%;
  }

  /*article共通パーツ*/
  a:link {
    color: var(--main-color);
    text-decoration: none;
  }
  a:visited {
    color: var(--main-color);
    text-decoration: none;
  }

  /*   globalnavi   */
  nav#globalnavi {
    display: none;
  }

  /*   footer   */
  footer {
    width: 100%;
    padding: 10px 0;
    background-color: #317198;
    margin: 0 0 0 0;
  }

  footer .wrapper {
    width: 100%;
    margin: 0 auto;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    justify-content: space-between;
  }

  footer #footerNavi {
    width: 100%;
    margin: 0 0 15vw 0;
    padding: 10vw 0 0 10vw;
  }

  footer #footerNavi ul li {
    padding: 0;
    margin: 0 0 8vw 0;
  }

  footer #footerNavi ul li a {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    letter-spacing: 0.08em;
    border: none;
    transition: all 0.5s;
  }

  footer #footerNavi ul li a:hover {
    color: var(--main-color);
  }

  footer #footerCopylight {
    width: calc(100% - 20vw);
    padding: 0 0 25px;
    margin: 0 auto;

    text-align: left;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    justify-content: space-between;
  }

  footer #footerCopylight .logo_block {
    width: 50vw;

    text-align: left;
    margin: 0 0 25px 0;
  }

  footer #footerCopylight .logo_block a {
    width: 50vw;
    height: 13vw;
    background-image: url(../image/logo_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999px;
    display: block;
    overflow: hidden;
    white-space: nowrap;

    transition: all 0.5s;
  }

  footer #footerCopylight .sub_logo_block {
    width: calc(100% - 50vw);

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: flex-end;
  }

  footer #footerCopylight .sub_logo_block .instagram_link,
  footer #footerCopylight .sub_logo_block .officialshop_link {
    width: 32px;
    height: 32px;

    margin: 0 0 0 10px;

    background-color: #fff;

    border-radius: 32px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    justify-content: center;
    align-content: center;
    align-items: center;

    transition: all 0.5s;
  }

  footer #footerCopylight .address_block {
    padding: 0 0 40px 0;
    text-align: left;
  }

  footer #footerCopylight .address_block p {
    color: #fff !important;
    font-size: 1.4rem;
    line-height: 2;
    font-weight: 500;
    font-variant: normal;
    text-decoration: none;
    font-style: normal;
    display: block;
    text-align: left;
    letter-spacing: 0.05em;
  }

  footer #footerCopylight .address_block p.company_name_part {
    color: #fff !important;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 500;
    font-variant: normal;
    text-decoration: none;
    font-style: normal;
    display: block;
    text-align: left;
    letter-spacing: 0.05em;
    margin: 0 0 20px 0;
  }

  footer address {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 200;
    font-variant: normal;
    text-decoration: none;
    font-style: normal;
    display: block;
    text-align: left;
    letter-spacing: 0.05em;
    width: 100%;
  }

  #footer_arrow {
    margin: 0 auto;
    padding: 0;
    text-align: right;

    position: absolute;
    bottom: 30px;
    left: auto;
    right: 0;

    display: block;

    z-index: 100;
  }

  #footer_arrow a {
    width: 75px;
    height: 75px;
    display: block;
    background-image: url(../image/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
  }
}
/* 言語セレクター */
.lang-switcher {
  margin: 18px 0 0;
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  width: 140px;
}
.lang-switcher a {
  display: block;
  text-align: center;
  padding: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.08em;
  font-weight: 700;
  transition: all 0.2s ease;
}
.lang-switcher a:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lang-switcher a.is-active {
  color: #1e5e79;
  background: #fff;
  border-color: #fff;
}
@media (max-width: 780px) {
  .lang-switcher {
    width: 100%;
    grid-auto-flow: column;
  }
  .lang-switcher a {
    padding: 10px 6px;
  }
}