/*!
header, footer, top module
 ______________________________*/


body#toppage,
body#company,
body#products_info,
body#products_information,
body#formulation,
body#techinfo {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background: url(../img/top/whitepow.jpg) no-repeat center center fixed;
  background-size: cover;
}



html {
  scroll-padding-top: 110px;
  scroll-behavior: smooth;
}

br.sp {
  display: none;
}


/*

tab
________________________*/

.top_tab {
  padding-top: 55px;
  background-color: rgba(231, 229, 254, 0.5);
}

.section_pad_lr {
  padding: 0 50px;
}

.tab_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*
.top_tab h3 {
  color: #fff;
  font-size: 2.7rem;
  text-align: right;
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  order: 2;
}

.top_tab h3 span {
  display: block;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
}
*/
.mod-list-tab-01-wrapper {
  text-align: left;
  order: 1;
}

div.mod-list-tab-01-wrapper ul.mod-list-tab-01 {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  list-style-type: none;
}

div.mod-list-tab-01-wrapper ul.mod-list-tab-01 li {
  margin: 0;
  box-sizing: border-box;
}

div.mod-list-tab-01-wrapper ul.mod-list-tab-01 li a {
  display: block;
  padding: 5px 5px;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
  border: 1px solid var(--color-primary);
}

div.mod-list-tab-01-wrapper ul.mod-list-tab-01 li a.is-active {
  background: rgb(255, 255, 255, 0.8);
  border: 1px solid rgb(255, 255, 255, 0.8);
  color: var(--color-primary);
  font-weight: bold;
}

div.mod-list-tab-01-wrapper ul.mod-list-tab-01 li:nth-child(3n+3) {
  margin-right: 0;
}

.js-tab-content {
  display: none;
  padding: 15px 0;
  text-align: center;
}

.js-tab-content.is-active {
  display: block;
}

.js-tab-content .swiper-horizontal {
  overflow: hidden;
}

.swiper-slide {
  position: relative;
}

.card_img {
  background-color: #fff;
  padding: 5px;
  height: 190px;
  margin-bottom: 18px;
}

.card_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 全体を収める（縦横比維持） */
}

.card_category {
  position: absolute;
  top: 186px;
  left: 15px;
  padding: 5px;
  min-width: 60px;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1;
}

.tit_products {
  color: var(--color-primary);
}

.cate_products {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.tit_info {
  color: #191c96;
}

.cate_info {
  color: #191c96;
  border: 1px solid #191c96;
}

.tit_csr {
  color: #0f8745;
}

.cate_csr {
  color: #0f8745;
  border: 1px solid #0f8745;
}

.tit_cer {
  color: #b1944b;
}

.cate_cer {
  color: #b1944b;
  border: 1px solid #b1944b;
}

.tit_exb {
  color: #961936;
}

.cate_exb {
  color: #961936;
  border: 1px solid #961936;
}

.tit_other {
  color: #333;
}

.cate_other {
  color: #333;
  border: 1px solid #333;
}

.date {
  font-family: Arial, Helvetica, sans-serif;
  color: #999999;
  font-size: 1.6rem;
  margin: 0 0 5px;
  padding: 0;
}

.swiper_cur .swiper-slide h4 {
  font-family: sans-serif;
  font-size: 1.6rem;
  margin: 0 0 5px;
  padding: 0;
}

.swiper_cur .swiper-slide p {
  color: #333;
  font-size: 1.6rem;
  text-align: left;
}

.swipe_cur_body {
  padding: 0 10px;
}

.top_tab_contents {
  border-bottom: 1px solid #685593;
  padding: 0 0 150px;
  background-color: rgba(231, 229, 254, 0.5);
}

/*

swiper mv
________________________*/


.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

/* 
html and body
_______________________________*/
body {
  scroll-behavior: smooth;

}

/*
#top {
  background-image: url(../img/top/top_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
}
*/


/* 
header
_______________________________*/

.header {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 103px;
  z-index: 100;
  top: 0;
}

.contents {
  padding-top: 103px;
}

.header_in {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
}

.header h1 {
  margin: 0;
  padding: 9px 0 0 13px;
}

.header h1 a img {
  width: 81px;
  height: auto;
}

.header_r {
  min-width: 450px;
  text-align: right;
}

.header_icon {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.header_icon li {
  border-left: 1px solid #e8e8e8;
  text-align: center;
}

.header_icon li img {
  width: 18px;
  height: auto;
}

.header_icon li a {
  color: #333;
  text-align: left;
  display: block;
  font-size: 1.5rem;
  padding: 1px 10px;
}

.header_icon li.current a {
  color: #aaa;
  pointer-events: none;

}

/*
.header_icon li:last-child a{
  padding-left:27px;
  background-image: url(../img/common/ico_header_search_rev.svg);
  background-repeat: no-repeat;
  background-size:28px;
  background-position: left top;
}
*/
.header_login_menu {
  display: none;
  /*display: flex;*/
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 0;
  padding: 0;
  list-style-type: none;
}

.header_login_menu li {
  border-left: 1px solid #e8e8e8;
  text-align: center;
}

.header_login_menu li a {
  color: #fff;
  text-align: left;
  display: block;
  font-size: 1.5rem;
  padding: 1px 10px;
  background-color: #4f3c7aaa;
}

.header_login_menu li.cart a {
  position: relative;
  width: 36px;
  height: 26px;
  background-image: url(../img/common/ico_cart_wh.png);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}

.cart span {
  position: absolute;
  padding: 2px 5px;
  background-color: #d78b00;
  color: #fff;
  font-size: 1rem;
  top: -10px;
  right: -8px;
  border-radius: 7px;
}

/* ----------------------------------------------
 pagetop
 ---------------------------------------------- */
.pagetop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: -50px;
}

/*

menu
___________________*/
.header input {
  display: none;
}

ul.menu {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

ul.menu li {
  list-style-type: none;
  position: relative;
}

/*
menu added
____________*/
ul.menu li {}

ul.menu>li {
  border-left: 1px solid #ccc;
  height: 25px;
}

ul.menu>li:last-child {
  border-right: 1px solid #ccc;
}

ul.menu li a,
.toggle_label a {
  color: #333;
  text-align: left;
  display: block;
  font-size: 1.5rem;
  padding: 2px 10px;
}

ul.menu li a span,
.toggle_label span {
  display: block;
  color: #aaa;
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 70%;
}

ul.toggle-inner {
  position: absolute;
  width: 200px;
  margin: 0;
  padding: 0;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.17);
}

ul.toggle-inner li {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 0;
}
ul.toggle-inner li a {
  padding:inherit;
  height: inherit;
}
.has-child:hover ul.toggle-inner li{
  height: auto;
}
.has-child:hover ul.toggle-inner li a{
  padding: 10px;
}

@media screen and (min-width: 600px) {

  /*--/*PCのみ----*/
  ul.toggle-inner {
    background-color: #fff;
    /* for animate */
    opacity: 0;
    line-height: 0;
    display: block;
  }

  ul.menu li.has-child:hover ul.toggle-inner {
    /* for animate */
    opacity: 1;
    line-height: 1.8;
    transition: line-height .2s;
    padding-top: 5px;
  }

  .toggle_label {
    cursor: pointer;
  }

  /*___________________________________*/
}

/*
search
_______________*/
.header_google {
  width: 410px;
  margin: 10px auto 0 auto;
  /* 上に10pxの余白 + 水平方向中央揃え */
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border: 1px solid var(--color-primary);
  z-index: 1;
}

.header_google form,
.header_google label {
  padding: 0;
  margin: 0;
  display: inline-flex;
}

.header_google input[type=text] {
  display: inline-block;
  box-sizing: border-box;
  width: 320px;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 0;
  border: 1px solid var(--color-primary);
  background-color: #fefefe;
  box-shadow: inherit;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: #0a0a0a;
  transition: box-shadow .5s, border-color .25s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.header_google input[type=image] {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
  width: 24px;
  height: 24px;
}



/*
mv
_______________*/
.mv img {
  width: 100%;
  height: auto;
}

.container {
  position: relative;
}

.swiper {
  overflow: visible;
}

/*
/* 前への矢印 */
.swiper-button-prev {
  left: -10px;
}

/* 次への矢印 */
.swiper-button-next {
  right: -10px;
}

/* ページネーション */
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -18px;
}

*/
/*

top_products

__________________*/

.top_company_csr h3,
.top_formulation h3,
.top_products h3,
.top_tab h3,
.top_latest_news h3 {
  font-size: 2.7rem;
  text-align: center;
  margin: 0 0 60px;
  padding: 0;
  color: #4f3c7a;
  font-weight: normal;
  letter-spacing: 2px;
}

.top_company_csr h3 em,
.top_formulation h3 em,
.top_products h3 em,
.top_tab h3 em,
.top_latest_news h3 em {
  font-style: normal;
  color: var(--color-primary);
}

.top_company_csr h3 span,
.top_formulation h3 span,
.top_products h3 span,
.top_tab h3 span,
.top_latest_news h3 span {
  color: #999999;
  display: block;
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.top_products,
.top_company_csr {
  padding: 5.5vw 0 9.5vw;
}

.top_latest_news {
  padding: 60px 0 20px;
  background-color: #f9f9f9;
  /* ごく薄いグレー */
  width: 100%;
}

.top_latest_news>.container {
  display: flex;
  justify-content: center;
}

.top_latest_news>.container h3 {
  width: 200px;
}

.top_latest_news>.container>article>a>h4 {
  font-family: sans-serif;
  font-size: 1.6rem;
  margin: 0 0 5px;
  padding: 0;
}

.top_latest_news>.container>article>a>p {
  color: #333;
  font-size: 1.6rem;
  width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top_products_flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 45px;
  list-style-type: none;
}

.top_products_flex li a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 745/496;
}

.top_products_flex li a h4,
.top_formulation_flex li a h4 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.top_products_flex li a h4 span {
  font-size: 1.2rem;
  width: 80%;
  text-align: center;
}

:lang(en) .top_products_flex li a h4 span {
  font-size: 2rem;
}



.top_products_flex li a h4 em {
  font-style: normal;
  width: 80%;
  text-align: center;
}

.top_products_flex li a img,
.top_formulation_flex li a img,
.top_company_csr_flex li a img {
  transition: transform .6s ease;
}

.top_products_flex li a:hover img,
.top_formulation_flex li a:hover img,
.top_company_csr_flex li a:hover img {
  transform: scale(1.1);
}


/*
top_formulation
________________*/

.top_formulation {
  padding: 5.5vw 0 9.5vw;
  background-color: rgba(231, 229, 254, 0.5);
}

.top_formulation_flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.top_formulation_flex li a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 599/397;

}

/*
top_company_csr_flex
______________________*/

.top_company_csr_flex {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 4%;
  padding: 0;
}

.top_company_csr_flex li {
  width: 40%;
}

.top_company_csr_flex li a {
  display: block;
  overflow: hidden;
  aspect-ratio: 841/509;
}

.footer_link {
  background-color: #f0f0f0;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}

.footer_sub a,
.footer_link_ul a {
  font-size: 1.6rem;
  color: #717171;
}

.footer_link_ul>li {
  padding: 0;
  list-style-type: none;
}

.footer_link_ul>li>ul>li {
  list-style-type: disc;
}

.footer_link_flex {
  display: flex;
  justify-content: center;
}



.footer_sub {
  text-align: center;
}

.footer_sub ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  line-height: 1;
}

.footer_sub ul li {
  border-left: 1px solid #717171;
}

.footer_sub ul li:last-child {
  border-right: 1px solid #717171;
}

.footer_sub ul li a {
  padding: 0 5px;
}

.footer_company {
  padding: 40px 0;
}

.footer_company_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer_company_flex img {
  width: 77px;
  height: auto;
  margin-right: 10px;
}

.footer_company_flex h3 {
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
}

.footer_company_flex p {
  font-size: 1.1rem;
  margin: 0;
  padding: 0;
}

/*
copy
_________________*/
.copy {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 80%;
  font-family: Arial, Helvetica, "sans-serif";
  padding: 5px 0;
}

/*
#breadcrumb
________________________*/
#breadcrumb {
  display: block;
  margin: 20px 0;
  text-align: left;
  font-size: 1.6rem;
}

#breadcrumb ul {
  margin: 0;
  padding: 0;
}

#breadcrumb ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
  text-align: left;
}

#breadcrumb ul li:before {
  content: " / ";
}

#breadcrumb ul li:first-child:before {
  content: none;
}

#breadcrumb ul li,
#breadcrumb ul li a {
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 97%;
  color: #000;
}

.footer_link_flex_article_last {
  padding-left: 100px;
  position: absolute;
  right: 0;
}
.footer_link_ul {
    margin: 20px 50px 20px 0;
    padding: 0;
}

@media screen and (min-width:1200px) {

  .top_products,
  .top_company_csr,
  .top_formulation {
    padding: 80px 0 130px;
    text-align: center;
  }

  .header_google {
    top: calc(100vh + 60px);
  }


}