@charset "UTF-8";
/*
------------------------------------------------------------
------------------------------------------------------------
common
------------------------------------------------------------
------------------------------------------------------------*/
html {
  scroll-behavior: smooth; }

body {
  height: 100%;
  position: relative;
  font-size: 16px;
  line-height: 2em;
  color: #333; }
  @media (max-width: 768px) {
    body {
      font-size: 14px; } }

body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text {
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; }

a {
  color: #333;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }

a[href^="tel:"] {
  pointer-events: none;
  cursor: default; }
  @media (max-width: 500px) {
    a[href^="tel:"] {
      pointer-events: auto;
      cursor: pointer; } }

hr {
  border: none;
  border-top: 1px solid #dbdbdb;
  margin: 30px 0;
  height: 1px; }

sup {
  vertical-align: super;
  font-size: 0.6em;
  line-height: 1; }

mark {
  color: #333;
  background-color: #f7deb9; }

.PT10 {
  padding-top: 10px; }

.PT20 {
  padding-top: 20px; }

.PT30 {
  padding-top: 30px; }

.PT40 {
  padding-top: 40px; }

.PT50 {
  padding-top: 50px; }

.PT60 {
  padding-top: 60px; }

.PT70 {
  padding-top: 70px; }

.PT80 {
  padding-top: 80px; }

.PT90 {
  padding-top: 90px; }

.PT100 {
  padding-top: 100px; }

.PT110 {
  padding-top: 110px; }

.PT120 {
  padding-top: 120px; }

.MT10 {
  margin-top: 10px; }

.MT20 {
  margin-top: 20px; }

.MT30 {
  margin-top: 30px; }

.MT40 {
  margin-top: 40px; }

.MT50 {
  margin-top: 50px; }

.MT60 {
  margin-top: 60px; }

.MT70 {
  margin-top: 70px; }

.MT80 {
  margin-top: 80px; }

.MT90 {
  margin-top: 90px; }

.MT100 {
  margin-top: 100px; }

.MT110 {
  margin-top: 110px; }

.MT120 {
  margin-top: 120px; }

.PB10 {
  padding-bottom: 10px; }

.PB20 {
  padding-bottom: 20px; }

.PB30 {
  padding-bottom: 30px; }

.PB40 {
  padding-bottom: 40px; }

.PB50 {
  padding-bottom: 50px; }

.PB60 {
  padding-bottom: 60px; }

.PB70 {
  padding-bottom: 70px; }

.PB80 {
  padding-bottom: 80px; }

.PB90 {
  padding-bottom: 90px; }

.PB100 {
  padding-bottom: 100px; }

.PB110 {
  padding-bottom: 110px; }

.PB120 {
  padding-bottom: 120px; }

.MB10 {
  margin-bottom: 10px; }

.MB20 {
  margin-bottom: 20px; }

.MB30 {
  margin-bottom: 30px; }

.MB40 {
  margin-bottom: 40px; }

.MB50 {
  margin-bottom: 50px; }

.MB60 {
  margin-bottom: 60px; }

.MB70 {
  margin-bottom: 70px; }

.MB80 {
  margin-bottom: 80px; }

.MB90 {
  margin-bottom: 90px; }

.MB100 {
  margin-bottom: 100px; }

.MB110 {
  margin-bottom: 110px; }

.MB120 {
  margin-bottom: 120px; }

.indent1 {
  padding-left: 1em;
  text-indent: -1em; }

.indent2 {
  padding-left: 2em;
  text-indent: -2em; }

.indent3 {
  padding-left: 3em;
  text-indent: -3em; }

.indent4 {
  padding-left: 4em;
  text-indent: -4em; }

.indent5 {
  padding-left: 5em;
  text-indent: -5em; }

.indent6 {
  padding-left: 6em;
  text-indent: -6em; }

.indent7 {
  padding-left: 7em;
  text-indent: -7em; }

.indent8 {
  padding-left: 8em;
  text-indent: -8em; }

.indent9 {
  padding-left: 9em;
  text-indent: -9em; }

.indent10 {
  padding-left: 10em;
  text-indent: -10em; }

.indent1h {
  padding-left: 1.5em;
  text-indent: -1.5em; }

.indent {
  text-indent: 1em; }

/*
------------------------------------------------------------
------------------------------------------------------------
共通スタイル
------------------------------------------------------------
------------------------------------------------------------*/
.content {
  width: 96%;
  max-width: 1020px;
  margin-right: auto;
  margin-left: auto; }
  @media (max-width: 1200px) {
    .content {
      width: 96%; } }
  @media (max-width: 768px) {
    .content {
      width: 94%; } }
  @media (max-width: 500px) {
    .content {
      width: 90%; } }

.content-s {
  width: 80%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }
  @media (max-width: 1400px) {
    .content-s {
      width: 80%; } }
  @media (max-width: 768px) {
    .content-s {
      width: 94%; } }
  @media (max-width: 500px) {
    .content-s {
      width: 90%; } }

.main-color {
  color: #6167ad; }

.secondary-color {
  color: #ea8c00; }

.tertiary-color {
  color: #619caa; }

.strong-color {
  color: #d71c24; }

.text-color {
  color: #333; }

.text-light-color {
  color: #666; }

.bold {
  font-weight: bold; }

.normal {
  font-weight: normal; }

.en-font {
  font-family: 'Raleway', sans-serif;
  font-weight: 400; }

.en-font-italic {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-style: italic; }

.en-font-semibold {
  font-family: 'Raleway', sans-serif;
  font-weight: 600; }

.en-font-extrabold {
  font-family: 'Raleway', sans-serif;
  font-weight: 800; }

.base-size-ll {
  font-size: 30px; }
  @media (max-width: 768px) {
    .base-size-ll {
      font-size: 28px; } }
  @media (max-width: 500px) {
    .base-size-ll {
      font-size: 26px; } }

.base-size-l {
  font-size: 24px; }
  @media (max-width: 768px) {
    .base-size-l {
      font-size: 22px; } }
  @media (max-width: 500px) {
    .base-size-l {
      font-size: 20px; } }

.base-size-m {
  font-size: 20px; }
  @media (max-width: 768px) {
    .base-size-m {
      font-size: 18px; } }
  @media (max-width: 500px) {
    .base-size-m {
      font-size: 16px; } }

.base-size {
  font-size: 16px; }
  @media (max-width: 768px) {
    .base-size {
      font-size: 14px; } }

.base-size-s {
  font-size: 85%; }

.base-size-ss {
  font-size: 70%; }

.base-line {
  line-height: 2em; }

.base-line-s {
  line-height: 1.4em; }

.base-line-ss {
  line-height: 1.2em; }

.lead {
  font-size: 18px;
  font-weight: bold; }
  @media (max-width: 768px) {
    .lead {
      font-size: 16px; } }

.center {
  text-align: center; }

.center-pc {
  text-align: center; }
  @media (max-width: 768px) {
    .center-pc {
      text-align: left; } }

.center-tb {
  text-align: center; }
  @media (max-width: 500px) {
    .center-tb {
      text-align: left; } }

.right {
  text-align: right; }

.flex {
  display: flex; }

.flex-col {
  display: flex;
  flex-direction: column; }

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

.flex-between {
  display: flex;
  justify-content: space-between; }

.flex-end {
  display: flex;
  justify-content: flex-end; }

.flex-al-center {
  display: flex;
  align-items: center; }

.flex-full-center {
  display: flex;
  align-items: center;
  justify-content: center; }

.link-text {
  color: #589ac7;
  text-decoration: underline; }
  .link-text:hover {
    opacity: 0.6; }

.icon-inline {
  width: 20px;
  height: 20px;
  margin: 0 3px -4px 3px;
  display: inline; }
  @media (max-width: 768px) {
    .icon-inline {
      width: 18px;
      height: 18px;
      margin: 0 3px -3px 3px; } }

/* list */
.list {
  padding-left: 1em;
  list-style: none; }
  .list li {
    position: relative; }
    .list li::before {
      content: "";
      position: absolute;
      left: -1em;
      top: 0.7em;
      width: 0.6em;
      height: 0.6em;
      background-color: #666;
      border-radius: 50%; }
    .list li:not(:first-child) {
      margin-top: 13px; }
  .list ol li {
    list-style: none; }

.list-s {
  padding-left: 1em;
  list-style: none; }
  .list-s li {
    position: relative; }
    .list-s li::before {
      content: "";
      position: absolute;
      left: -1em;
      top: 0.7em;
      width: 0.6em;
      height: 0.6em;
      background-color: #666;
      border-radius: 50%; }

.list-disc {
  padding-left: 1em; }
  .list-disc li {
    list-style: disc; }

.inner {
  padding-left: 1em; }

/* ページ内リンク */
/*a.anchor{
	display: block;
	margin-top: -80px;
	padding-top: 80px;
	@include tb {
		margin-top: -50px;
		padding-top: 50px;
	}
}*/
/* タイトル */
.heading-top {
  margin-bottom: 50px; }
  .heading-top div {
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    line-height: 1.2em; }
    @media (max-width: 1200px) {
      .heading-top div {
        font-size: 16px; } }
    @media (max-width: 768px) {
      .heading-top div {
        font-size: 12px; } }
    .heading-top div::before {
      content: "●";
      display: inline-block;
      margin-right: 5px;
      color: #6167ad;
      font-size: 0.8em; }
  .heading-top h2 {
    font-weight: bold;
    font-size: 50px;
    line-height: 1.2em; }
    @media (max-width: 1200px) {
      .heading-top h2 {
        font-size: 40px; } }
    @media (max-width: 768px) {
      .heading-top h2 {
        font-size: 30px; } }

.heading-common {
  margin-bottom: 60px;
  align-items: center;
  display: flex;
  font-weight: bold;
  font-size: 34px;
  line-height: 1.4em;
  font-feature-settings: "palt"; }
  @media (max-width: 768px) {
    .heading-common {
      margin-bottom: 50px;
      font-size: 26px; } }
  @media (max-width: 500px) {
    .heading-common {
      font-size: 22px; } }
  .heading-common::before, .heading-common::after {
    background-color: #666;
    content: "";
    flex-grow: 1;
    height: 1px;
    min-width: 20px; }
  .heading-common::before {
    margin-right: 20px; }
    @media (max-width: 768px) {
      .heading-common::before {
        margin-right: 10px; } }
  .heading-common::after {
    margin-left: 20px; }
    @media (max-width: 768px) {
      .heading-common::after {
        margin-left: 10px; } }
  .heading-common sup {
    transform: translateY(-0.4em); }

.heading-sub {
  margin-bottom: 60px;
  padding-left: 15px;
  position: relative;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.4em;
  font-feature-settings: "palt"; }
  @media (max-width: 768px) {
    .heading-sub {
      margin-bottom: 50px;
      font-size: 24px; } }
  @media (max-width: 500px) {
    .heading-sub {
      font-size: 20px; } }
  .heading-sub::before {
    width: 6px;
    height: 40px;
    border-radius: 2px;
    position: absolute;
    content: '';
    background-color: #6167ad;
    top: 1px;
    left: 0; }
    @media (max-width: 768px) {
      .heading-sub::before {
        top: 0;
        height: 32px; } }
    @media (max-width: 500px) {
      .heading-sub::before {
        height: 28px; } }

/* カテゴリーアイコン */
.category-icon {
  width: 140px;
  height: 24px;
  font-size: 14px;
  font-feature-settings: "palt";
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px; }
  @media (max-width: 1200px) {
    .category-icon {
      width: 120px;
      height: 20px;
      border-radius: 10px;
      font-size: 12px; } }
  .category-icon.category-cmp {
    background-color: #6167ad; }
  .category-icon.category-chem {
    background-color: #ea8c00; }
  .category-icon.category-decla {
    background-color: #666; }
  .category-icon.category-cons {
    background-color: #619caa; }

/* button */
.common-button, .common-button-l, .common-button-s {
  margin-top: 50px;
  display: flex;
  justify-content: center; }
  @media (max-width: 500px) {
    .common-button, .common-button-l, .common-button-s {
      margin-top: 30px; } }
  .common-button a, .common-button-l a, .common-button-s a {
    min-width: 270px;
    min-height: 54px;
    margin: 0 auto;
    padding: 5px 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    font-feature-settings: "palt";
    color: #fff;
    border-radius: 27px;
    background-color: #666; }
    @media (max-width: 768px) {
      .common-button a, .common-button-l a, .common-button-s a {
        min-width: 250px;
        min-height: 50px;
        border-radius: 25px; } }
    @media (max-width: 320px) {
      .common-button a, .common-button-l a, .common-button-s a {
        min-width: 220px; } }
    .common-button a img, .common-button-l a img, .common-button-s a img {
      width: 10px;
      height: auto;
      margin-left: 5px; }
      @media (max-width: 768px) {
        .common-button a img, .common-button-l a img, .common-button-s a img {
          width: 8px; } }
    .common-button a span, .common-button-l a span, .common-button-s a span {
      width: calc(100% - 15px); }
      @media (max-width: 768px) {
        .common-button a span, .common-button-l a span, .common-button-s a span {
          width: calc(100% - 13px); } }
    .common-button a:hover, .common-button-l a:hover, .common-button-s a:hover {
      background-color: #888;
      box-shadow: 0 0px 6px rgba(84, 84, 84, 0.5); }

.common-button.c-primary a, .c-primary.common-button-l a, .c-primary.common-button-s a {
  background-color: #6167ad; }
  .common-button.c-primary a:hover, .c-primary.common-button-l a:hover, .c-primary.common-button-s a:hover {
    background-color: #858ec5; }

.common-button.c-p-dark a, .c-p-dark.common-button-l a, .c-p-dark.common-button-s a {
  background-color: #3e4174; }
  .common-button.c-p-dark a:hover, .c-p-dark.common-button-l a:hover, .c-p-dark.common-button-s a:hover {
    background-color: #6167ad; }

.common-button.c-secondary a, .c-secondary.common-button-l a, .c-secondary.common-button-s a {
  background-color: #ea8c00; }
  .common-button.c-secondary a:hover, .c-secondary.common-button-l a:hover, .c-secondary.common-button-s a:hover {
    background-color: #eba530; }

.common-button-l a {
  min-width: 340px;
  min-height: 68px;
  padding: 5px 20px;
  font-size: 20px;
  border-radius: 34px; }
  @media (max-width: 768px) {
    .common-button-l a {
      min-width: 250px;
      min-height: 50px;
      padding: 5px 15px;
      border-radius: 25px;
      font-size: 14px; } }
  @media (max-width: 320px) {
    .common-button-l a {
      min-width: 220px; } }
  .common-button-l a span {
    width: calc(100% - 25px); }
    @media (max-width: 768px) {
      .common-button-l a span {
        width: calc(100% - 13px); } }

.common-button-s {
  margin-top: 20px; }
  .common-button-s a {
    min-width: 220px;
    min-height: 44px;
    padding: 5px 10x;
    font-size: 14px;
    border-radius: 22px; }
    @media (max-width: 768px) {
      .common-button-s a {
        min-width: 150px;
        min-height: 40px;
        border-radius: 20px;
        font-size: 12px; } }
    .common-button-s a span {
      width: calc(100% - 15px); }
      @media (max-width: 768px) {
        .common-button-s a span {
          width: calc(100% - 13px); } }

.dl-button, .dl-button-l, .dl-button-s {
  margin-top: 50px;
  display: flex;
  justify-content: center; }
  @media (max-width: 500px) {
    .dl-button, .dl-button-l, .dl-button-s {
      margin-top: 30px; } }
  .dl-button a, .dl-button-l a, .dl-button-s a {
    min-width: 270px;
    min-height: 54px;
    margin: 0 auto;
    padding: 5px 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    font-feature-settings: "palt";
    color: #fff;
    border-radius: 27px;
    background-color: #3e4174; }
    @media (max-width: 768px) {
      .dl-button a, .dl-button-l a, .dl-button-s a {
        min-width: 250px;
        min-height: 50px;
        border-radius: 25px; } }
    @media (max-width: 320px) {
      .dl-button a, .dl-button-l a, .dl-button-s a {
        min-width: 220px; } }
    .dl-button a img, .dl-button-l a img, .dl-button-s a img {
      width: 16px;
      height: auto;
      margin-left: 5px; }
      @media (max-width: 768px) {
        .dl-button a img, .dl-button-l a img, .dl-button-s a img {
          width: 14px; } }
    .dl-button a span, .dl-button-l a span, .dl-button-s a span {
      width: calc(100% - 15px); }
      @media (max-width: 768px) {
        .dl-button a span, .dl-button-l a span, .dl-button-s a span {
          width: calc(100% - 13px); } }
    .dl-button a:hover, .dl-button-l a:hover, .dl-button-s a:hover {
      background-color: #6167ad;
      box-shadow: 0 0px 6px rgba(84, 84, 84, 0.5); }

.dl-button-l a {
  min-width: 340px;
  min-height: 68px;
  padding: 5px 20px;
  font-size: 20px;
  border-radius: 34px; }
  @media (max-width: 768px) {
    .dl-button-l a {
      min-width: 250px;
      min-height: 50px;
      padding: 5px 15px;
      border-radius: 25px;
      font-size: 14px; } }
  @media (max-width: 320px) {
    .dl-button-l a {
      min-width: 220px; } }
  .dl-button-l a img {
    width: 20px; }
    @media (max-width: 768px) {
      .dl-button-l a img {
        width: 14px; } }
  .dl-button-l a span {
    width: calc(100% - 25px); }
    @media (max-width: 768px) {
      .dl-button-l a span {
        width: calc(100% - 13px); } }

.dl-button-s {
  margin-top: 20px; }
  .dl-button-s a {
    min-width: 220px;
    min-height: 44px;
    padding: 5px 10x;
    font-size: 14px;
    border-radius: 22px; }
    @media (max-width: 768px) {
      .dl-button-s a {
        min-width: 150px;
        min-height: 40px;
        border-radius: 20px;
        font-size: 12px; } }
    .dl-button-s a span {
      width: calc(100% - 15px); }
      @media (max-width: 768px) {
        .dl-button-s a span {
          width: calc(100% - 13px); } }

.dl-disabled {
  width: 220px;
  min-height: 44px;
  margin-top: 20px;
  padding: 5px 0;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2em;
  text-align: center;
  font-feature-settings: "palt";
  color: #fff;
  border-radius: 22px;
  background-color: #dbdbdb; }
  @media (max-width: 768px) {
    .dl-disabled {
      width: 150px;
      min-height: 40px;
      border-radius: 20px;
      font-size: 12px; } }

.arrow-button {
  font-weight: bold; }
  .arrow-button a {
    display: flex;
    align-items: center;
    font-size: 16px; }
    .arrow-button a:hover {
      color: #6167ad; }
      .arrow-button a:hover img {
        opacity: 0.6; }
  .arrow-button img {
    width: 40px;
    height: auto;
    margin-left: 5px; }

.button-wrap {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  @media (max-width: 500px) {
    .button-wrap {
      margin-top: 0; } }
  .button-wrap .common-button, .button-wrap .common-button-l, .button-wrap .common-button-s,
  .button-wrap .form-button,
  .button-wrap .form-dl-button {
    margin: 20px 10px 0 10px; }
    @media (max-width: 500px) {
      .button-wrap .common-button, .button-wrap .common-button-l, .button-wrap .common-button-s,
      .button-wrap .form-button,
      .button-wrap .form-dl-button {
        margin: 30px 0 0 0; } }

/* table */
.table {
  width: 100%; }
  @media (max-width: 1200px) {
    .table {
      font-size: 15px; } }
  @media (max-width: 768px) {
    .table {
      font-size: 14px; } }
  @media (max-width: 500px) {
    .table {
      font-size: 13px; } }
  .table th {
    padding: 15px 20px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    line-height: 1.6em;
    background-color: #dbdbdb; }
    @media (max-width: 768px) {
      .table th {
        padding: 10px 8px;
        text-align: left; } }
  .table td {
    padding: 15px 20px;
    line-height: 1.6em;
    border-bottom: solid 1px #dbdbdb;
    vertical-align: top;
    word-break: break-all; }
    @media (max-width: 768px) {
      .table td {
        padding: 10px 8px; } }
    .table td .dl-button-s {
      justify-content: flex-start; }
      .table td .dl-button-s a {
        margin: 0; }

@media (max-width: 768px) {
  .table-col th {
    text-align: center; } }
.table-col td {
  vertical-align: middle; }

.table-row {
  border-top: solid 1px #dbdbdb; }
  .table-row th {
    border-bottom: solid 1px #fff; }
  .table-row tr:last-child th {
    border-bottom: solid 1px #dbdbdb; }

.scroll-text {
  display: none; }
  @media (max-width: 500px) {
    .scroll-text {
      display: block; } }
  .scroll-text .text {
    padding: 0 5px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6167ad;
    font-size: 13px;
    line-height: 1.6em;
    font-feature-settings: "palt"; }
    .scroll-text .text img {
      width: 16px;
      height: auto; }
      @media (max-width: 320px) {
        .scroll-text .text img {
          width: 13px; } }

@media (max-width: 500px) {
  .table-scroll {
    overflow-x: scroll; }
    .table-scroll .table, .table-scroll .table-link {
      width: 690px; } }

/* box */
.bk-box, .bk-box-s {
  width: 100%;
  padding: 30px 50px;
  background-color: #f0f0f0;
  border-radius: 4px; }
  @media (max-width: 768px) {
    .bk-box, .bk-box-s {
      padding: 20px 5%; } }

.bk-box-s {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }

.border-box, .border-box-s {
  width: 100%;
  padding: 30px 50px;
  border: solid 1px #dbdbdb;
  border-radius: 4px; }
  @media (max-width: 768px) {
    .border-box, .border-box-s {
      padding: 20px 5%; } }

.border-box-s {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }

/*　header　
------------------------------------------------------------
------------------------------------------------------------*/
header {
  width: 100%;
  height: 80px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
  @media (max-width: 768px) {
    header {
      height: 50px; } }

.header-logo {
  width: 160px;
  margin: 0 20px 0 50px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1200px) {
    .header-logo {
      margin: 0 20px; } }
  @media (max-width: 768px) {
    .header-logo {
      width: 110px;
      margin: 0 10px; } }
  @media (max-width: 500px) {
    .header-logo {
      width: 100px; } }
  .header-logo img {
    width: 100%;
    height: auto; }
  .header-logo a:hover {
    opacity: 0.6; }

/* nav（PC） */
@media (max-width: 768px) {
  .pc-nav-wrap {
    display: none; } }

.pc-nav {
  margin-right: 95px;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 1400px) {
    .pc-nav {
      margin-right: 90px; } }
  @media (max-width: 1200px) {
    .pc-nav {
      font-size: 15px; } }
  .pc-nav .pc-nav-item {
    position: relative;
    line-height: 1.2em;
    font-feature-settings: "palt"; }
    .pc-nav .pc-nav-item:hover .pc-nav-link {
      color: #6167ad; }
  .pc-nav .pc-nav-link {
    min-width: 50px;
    display: block;
    padding: 20px 15px;
    font-weight: bold;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1400px) {
      .pc-nav .pc-nav-link {
        padding: 20px 10px; } }
    @media (max-width: 1200px) {
      .pc-nav .pc-nav-link {
        padding: 15px 10px; } }

.dropdown {
  width: 320px;
  padding: 15px 20px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 102;
  background-color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease; }
  @media (max-width: 1200px) {
    .dropdown {
      width: 230px; } }
  .dropdown a {
    padding: 10px 0;
    display: flex;
    justify-content: flex-start; }
    .dropdown a::before {
      margin: 9px 5px 0 0;
      background-color: #6167ad;
      content: "";
      height: 2px;
      width: 10px; }
      @media (max-width: 1200px) {
        .dropdown a::before {
          margin: 8px 5px 0 0; } }
    .dropdown a:hover {
      opacity: 0.6; }
    .dropdown a.disabled {
      pointer-events: none;
      color: #999; }
      .dropdown a.disabled::before {
        background-color: #b5b5b5; }
  .dropdown p {
    padding: 10px 0;
    font-weight: bold;
    color: #6167ad; }

.pc-nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); }

/* sitemap・nav */
.main-nav-wrap {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  padding: 50px 80px 80px 80px;
  position: fixed;
  top: 0;
  left: 100%;
  background-color: #f0f0f0;
  z-index: 100;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden auto;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1200px) {
    .main-nav-wrap {
      padding: 50px 80px 80px 10px; } }
  @media (max-width: 768px) {
    .main-nav-wrap {
      padding: 50px 10px 30px 10px; } }
  @media screen and (max-width: 590px) {
    .main-nav-wrap {
      padding: 90px 10px 30px 10px; } }
  @media (max-width: 500px) {
    .main-nav-wrap {
      padding: 60px 10% 30px 10%;
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: nowrap; } }
  @media (max-width: 320px) {
    .main-nav-wrap {
      padding: 60px 5% 30px 5%; } }
  .main-nav-wrap.active {
    left: 0; }

.main-nav-box {
  width: 23%;
  max-width: 322px;
  margin: 0 1%;
  display: flex;
  flex-direction: column; }
  @media (max-width: 768px) {
    .main-nav-box {
      width: 46%;
      max-width: 460px; } }
  @media (max-width: 500px) {
    .main-nav-box {
      width: 100%; } }
  .main-nav-box hr {
    border-top: 1px solid #fff; }
    @media (max-width: 500px) {
      .main-nav-box hr {
        display: none; } }

.main-nav-category {
  height: 120px;
  margin-top: 30px;
  padding: 15px;
  border-top: solid 1px #fff;
  background: url("../images/common/circle_quarter_white.svg") no-repeat;
  background-size: contain;
  background-position: left center;
  display: flex;
  flex-direction: column;
  pointer-events: none; }
  @media (max-width: 1200px) {
    .main-nav-category {
      height: 100px; } }
  @media (max-width: 768px) {
    .main-nav-category {
      height: 70px;
      padding: 10px 15px 15px 15px; } }
  @media (max-width: 500px) {
    .main-nav-category {
      height: auto;
      margin-top: 5px;
      padding: 15px 10px;
      background: none;
      background-color: #fff;
      flex-direction: row;
      align-items: center;
      pointer-events: auto; } }
  .main-nav-category img {
    width: 30px;
    height: auto; }
    @media (max-width: 768px) {
      .main-nav-category img {
        width: 20px; } }
  .main-nav-category p {
    padding-top: 5px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2em;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1400px) {
      .main-nav-category p {
        font-size: 20px; } }
    @media (max-width: 1200px) {
      .main-nav-category p {
        padding-top: 2px;
        font-size: 16px; } }
    @media (max-width: 500px) {
      .main-nav-category p {
        width: calc(100% - 40px);
        padding: 0 0 0 5px; } }

.main-nav {
  margin: 10px 5px 0 15px;
  font-feature-settings: "palt";
  line-height: 1.2em; }
  @media (max-width: 1400px) {
    .main-nav {
      font-size: 15px; } }
  @media (max-width: 1200px) {
    .main-nav {
      font-size: 14px; } }
  @media (max-width: 500px) {
    .main-nav {
      max-height: 0;
      margin: 0;
      overflow: hidden; } }
  .main-nav a {
    padding: 10px 0;
    display: flex;
    justify-content: flex-start; }
    .main-nav a::before {
      margin: 9px 5px 0 0;
      background-color: #6167ad;
      content: "";
      height: 2px;
      width: 10px; }
      @media (max-width: 1200px) {
        .main-nav a::before {
          margin: 8px 5px 0 0; } }
    .main-nav a:hover {
      opacity: 0.6; }
    .main-nav a.disabled {
      pointer-events: none;
      color: #999; }
      .main-nav a.disabled::before {
        background-color: #b5b5b5; }
  .main-nav p {
    padding: 10px 0;
    font-weight: bold;
    color: #6167ad; }
  @media (max-width: 500px) {
    .main-nav.other {
      max-height: 100%;
      margin: 15px 0 0 0; } }

.main-nav-arrow {
  display: none; }
  @media (max-width: 500px) {
    .main-nav-arrow {
      display: block;
      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } }

.main-nav-category.active .main-nav-arrow {
  transform: rotate(180deg); }

.main-nav.active {
  max-height: 100%;
  padding: 15px 10px 15px 30px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  background-color: #fff; }
  .main-nav.active::before {
    position: absolute;
    content: "";
    background-color: #dbdbdb;
    top: 0;
    width: calc(100% - 20px);
    height: 1px;
    left: 10px; }

.main-nav-button {
  display: none; }
  @media (max-width: 500px) {
    .main-nav-button {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between; } }
  .main-nav-button li {
    width: 32%;
    height: 60px; }
    .main-nav-button li a {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      line-height: 1.2em;
      text-align: center;
      color: #fff;
      font-feature-settings: "palt";
      background-color: #3e4174; }
      .main-nav-button li a:hover {
        background-color: #6167ad; }
        .main-nav-button li a:hover img {
          transform: scale(1.15); }
  .main-nav-button img {
    width: 20px;
    height: auto;
    margin-bottom: 2px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* 背景のスクロールを無効にするクラス */
.no-scroll {
  overflow: hidden !important; }

/* burger-button */
.burger-button {
  width: 80px;
  height: 80px;
  padding: 28px 22px;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #333;
  border: none;
  cursor: pointer;
  z-index: 101;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 768px) {
    .burger-button {
      width: 50px;
      height: 50px;
      padding: 14px 12px; } }
  .burger-button:hover {
    background-color: #545454; }
  .burger-button span {
    width: 36px;
    height: 4px;
    background-color: #fff;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 768px) {
      .burger-button span {
        width: 26px;
        height: 3px; } }
  .burger-button.active .burger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg); }
    @media (max-width: 768px) {
      .burger-button.active .burger-line:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg); } }
  .burger-button.active .burger-line:nth-child(2) {
    opacity: 0; }
  .burger-button.active .burger-line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg); }
    @media (max-width: 768px) {
      .burger-button.active .burger-line:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg); } }

/* header-button */
.header-button-wrap {
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 101; }
  @media (max-width: 768px) {
    .header-button-wrap {
      top: 0;
      right: 50px; } }
  @media (max-width: 500px) {
    .header-button-wrap {
      z-index: 100; } }

.header-button {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0px 6px rgba(84, 84, 84, 0.5); }
  @media (max-width: 768px) {
    .header-button {
      flex-direction: row;
      box-shadow: none; } }
  .header-button li {
    width: 80px;
    height: 80px; }
    @media (max-width: 768px) {
      .header-button li {
        width: 90px;
        height: 50px; } }
    @media (max-width: 500px) {
      .header-button li {
        width: 50px; } }
    .header-button li a {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 11px;
      line-height: 1.2em;
      text-align: center;
      color: #fff;
      font-feature-settings: "palt";
      background-color: #3e4174; }
      @media (max-width: 768px) {
        .header-button li a {
          font-size: 10px; } }
      @media (max-width: 500px) {
        .header-button li a {
          color: #6167ad;
          background-color: #fff; } }
      .header-button li a:hover {
        background-color: #6167ad; }
        @media (max-width: 500px) {
          .header-button li a:hover {
            background-color: #fff; } }
        .header-button li a:hover img {
          transform: scale(1.15); }
    .header-button li:not(:last-child) a::after {
      content: '';
      width: 70px;
      height: 1px;
      display: inline-block;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 5px; }
      @media (max-width: 768px) {
        .header-button li:not(:last-child) a::after {
          width: 1px;
          height: 40px;
          bottom: 5px;
          left: auto;
          right: 0; } }
      @media (max-width: 500px) {
        .header-button li:not(:last-child) a::after {
          background-color: #dbdbdb; } }
    @media (max-width: 500px) {
      .header-button li:first-child a::before {
        content: '';
        width: 1px;
        height: 40px;
        display: inline-block;
        background-color: #dbdbdb;
        position: absolute;
        bottom: 5;
        left: 0; } }
  .header-button img {
    width: 30px;
    height: auto;
    margin-bottom: 5px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 768px) {
      .header-button img {
        width: 17px;
        margin-bottom: 2px; } }
    @media (max-width: 500px) {
      .header-button img {
        width: 20px; } }

/*　footer　
------------------------------------------------------------
------------------------------------------------------------*/
footer {
  padding: 60px 50px 30px 50px;
  position: relative;
  background-color: #3e4174; }
  @media (max-width: 768px) {
    footer {
      padding: 60px 5% 30px 5%; } }
  @media (max-width: 500px) {
    footer {
      padding: 60px 5% 60px 5%; } }
  @media (max-width: 320px) {
    footer {
      padding: 60px 5% 70px 5%; } }

.footer-section {
  margin: 0 auto;
  color: #fff;
  font-feature-settings: "palt";
  text-align: center; }
  .footer-section h1 {
    margin-bottom: 60px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1em; }
    @media (max-width: 500px) {
      .footer-section h1 {
        margin-bottom: 30px; } }
    .footer-section h1 span:nth-child(1) {
      padding-right: 5px;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 40px; }
      @media (max-width: 768px) {
        .footer-section h1 span:nth-child(1) {
          padding-right: 2px;
          font-size: 30px; } }
      @media (max-width: 500px) {
        .footer-section h1 span:nth-child(1) {
          font-size: 24px; } }
    .footer-section h1 span:nth-child(2) {
      font-size: 30px; }
      @media (max-width: 768px) {
        .footer-section h1 span:nth-child(2) {
          font-size: 24px; } }
      @media (max-width: 500px) {
        .footer-section h1 span:nth-child(2) {
          font-size: 20px; } }
  .footer-section .copyright {
    font-size: 11px;
    line-height: 1.2em; }
    @media (max-width: 768px) {
      .footer-section .copyright {
        font-size: 10px; } }

/* ページトップ */
#page-top {
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: 0;
  right: 0; }
  #page-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/common/circle_quarter_white.svg") no-repeat;
    background-size: cover;
    background-position: center center;
    transform: rotate(180deg); }
  @media (max-width: 768px) {
    #page-top {
      width: 90px;
      height: 90px; } }
  @media (max-width: 500px) {
    #page-top {
      width: 74px;
      height: 74px; } }
  @media (max-width: 320px) {
    #page-top {
      width: 72px;
      height: 72px; } }
  #page-top a {
    display: block;
    width: 120px;
    height: 120px;
    padding: 20px 0 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #6167ad;
    font-size: 16px;
    text-align: center;
    line-height: 1.2em;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    position: absolute;
    z-index: 1; }
    @media (max-width: 768px) {
      #page-top a {
        width: 90px;
        height: 90px;
        padding: 10px 0 0 20px;
        font-size: 12px; } }
    @media (max-width: 500px) {
      #page-top a {
        width: 74px;
        height: 74px; } }
    @media (max-width: 320px) {
      #page-top a {
        width: 72px;
        height: 72px; } }
    #page-top a img {
      width: 20px;
      height: auto;
      margin-bottom: 10px; }
      @media (max-width: 768px) {
        #page-top a img {
          width: 16px;
          margin-bottom: 5px; } }
  #page-top:hover a {
    opacity: 0.6; }

/*
------------------------------------------------------------
------------------------------------------------------------
トップページ
------------------------------------------------------------
------------------------------------------------------------*/
/* slider */
.slider-wrap {
  max-width: 2560px;
  margin: 0 auto;
  padding-top: 80px; }
  @media (max-width: 768px) {
    .slider-wrap {
      padding-top: 50px; } }
  .slider-wrap img {
    width: 100%;
    height: auto;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1400px) {
      .slider-wrap img {
        height: 379px;
        object-fit: cover; } }
    @media (max-width: 1200px) {
      .slider-wrap img {
        height: 300px; } }
    @media (max-width: 768px) {
      .slider-wrap img {
        height: 208px; } }
    @media (max-width: 500px) {
      .slider-wrap img {
        height: auto; } }

.slick-dots {
  bottom: 0; }
  @media (max-width: 768px) {
    .slick-dots {
      bottom: -5px; } }
  @media (max-width: 500px) {
    .slick-dots {
      bottom: -30px; } }
  .slick-dots li {
    width: 40px; }

.slick-dots li button {
  width: 40px;
  height: 4px;
  background: linear-gradient(to bottom, #dbdbdb 50%, transparent 50%);
  border-radius: 0px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .slick-dots li button::before {
    display: none; }

.slick-dots li button:hover {
  background: linear-gradient(to bottom, #6167ad 50%, transparent 50%); }

.slick-dots li.slick-active button {
  background: linear-gradient(to bottom, #666 50%, transparent 50%); }

/* お知らせ */
.top-notice-wrap {
  width: 96%;
  max-width: 1400px;
  margin: 60px auto 50px auto; }
  @media (max-width: 768px) {
    .top-notice-wrap {
      width: 94%;
      margin: 60px auto 100px auto; } }
  @media (max-width: 500px) {
    .top-notice-wrap {
      width: 90%; } }

.top-notice {
  display: flex; }

.top-notice-box {
  margin: 0 15px;
  flex: 1; }
  @media (max-width: 500px) {
    .top-notice-box {
      margin: 0 10px; } }
  .top-notice-box a:hover {
    opacity: 0.6; }
  .top-notice-box div {
    margin-bottom: 15px;
    padding: 0 15px 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #666; }
    @media (max-width: 768px) {
      .top-notice-box div {
        padding: 0 15px 5px 15px;
        flex-direction: column;
        align-items: stretch; } }
    @media (max-width: 500px) {
      .top-notice-box div {
        padding: 0 0 5px 0;
        flex-direction: column;
        align-items: stretch; } }
    .top-notice-box div .notice-date {
      margin-left: 15px;
      font-weight: bold; }
      @media (max-width: 768px) {
        .top-notice-box div .notice-date {
          margin: 5px 0 0 0; } }
      @media (max-width: 500px) {
        .top-notice-box div .notice-date {
          font-size: 13px; } }
  .top-notice-box .notice-text {
    padding: 0 15px;
    line-height: 1.6em; }
    @media (max-width: 500px) {
      .top-notice-box .notice-text {
        padding: 0;
        font-size: 13px; } }

.slick-slider .slick-track, .slick-slider .slick-list {
  width: 100%; }

.slick-prev::before, .slick-next::before {
  display: none; }

.slick-prev, .slick-next {
  width: 40px;
  height: 40px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1; }
  @media (max-width: 768px) {
    .slick-prev, .slick-next {
      top: calc(100% + 42px); } }
  .slick-prev:hover, .slick-next:hover {
    opacity: 0.6; }

.slick-prev {
  left: -2%; }
  @media (max-width: 1400px) {
    .slick-prev {
      left: -2%; } }
  @media (max-width: 500px) {
    .slick-prev {
      left: 0; } }

.slick-next {
  right: -2%; }
  @media (max-width: 1400px) {
    .slick-next {
      right: -2%; } }
  @media (max-width: 500px) {
    .slick-next {
      right: 0; } }

.slick-prev.slick-disabled, .slick-next.slick-disabled {
  opacity: 0.6;
  pointer-events: none; }

.top-notice .slick-dots {
  bottom: -60px; }
.top-notice .slick-dots li {
  width: 10px; }
.top-notice .slick-dots li button {
  width: 10px; }

/* 導入 */
.top-intro-wrap {
  max-width: 2560px;
  height: 700px;
  margin: 0 auto;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: url("../images/top/top_intro_text.svg"), url("../images/top/top_intro_img01.jpg"), url("../images/top/top_intro_img02.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 110px auto,auto 600px, auto 600px;
  background-position: right 20px bottom,left 50px center, right 50px center; }
  @media (max-width: 1200px) {
    .top-intro-wrap {
      height: auto;
      background: url("../images/top/top_intro_text.svg"), url("../images/top/top_intro_img01_sp.jpg"), url("../images/top/top_intro_img02_sp.jpg");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 80px auto,auto 380px, auto 380px;
      background-position: right 20px bottom,left 50px top 30px, right 50px bottom 30px; } }
  @media (max-width: 768px) {
    .top-intro-wrap {
      background: url("../images/top/top_intro_text.svg"), url("../images/top/top_intro_img01_sp.jpg"), url("../images/top/top_intro_img02_sp.jpg");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 80px auto,55% auto, 55% auto;
      background-position: right 10px center,left top 30px, right bottom 30px; } }
  @media (max-width: 500px) {
    .top-intro-wrap {
      background: url("../images/top/top_intro_text.svg"), url("../images/top/top_intro_img01_sp.jpg"), url("../images/top/top_intro_img02_sp.jpg");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 80px auto,80% auto, 80% auto;
      background-position: right 10px top,left top 30px, right bottom 30px; } }
  @media (max-width: 320px) {
    .top-intro-wrap {
      background: url("../images/top/top_intro_text.svg"), url("../images/top/top_intro_img01_sp.jpg"), url("../images/top/top_intro_img02_sp.jpg");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 80px auto,85% auto, 85% auto;
      background-position: right 10px top,left top 30px, right bottom 30px; } }

.top-intro {
  max-width: 880px;
  width: 70%;
  margin-right: 25%;
  padding: 50px;
  background: rgba(240, 240, 240, 0.95);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1400px) {
    .top-intro {
      margin-right: 15%; } }
  @media (max-width: 1200px) {
    .top-intro {
      margin: 160px auto; } }
  @media (max-width: 768px) {
    .top-intro {
      width: 80%;
      margin: 100px auto;
      padding: 5%; } }
  .top-intro h2 {
    margin: 20px 0 30px 0; }
    @media (max-width: 768px) {
      .top-intro h2 {
        margin: 10px 0 20px 0; } }
    .top-intro h2 span:nth-child(1) {
      margin-right: 5px;
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      font-size: 70px; }
      @media (max-width: 768px) {
        .top-intro h2 span:nth-child(1) {
          margin-right: 3px;
          font-size: 30px; } }
    .top-intro h2 span:nth-child(2) {
      font-weight: bold;
      font-size: 50px; }
      @media (max-width: 768px) {
        .top-intro h2 span:nth-child(2) {
          font-size: 24px; } }
  .top-intro h3 {
    margin-bottom: 50px;
    font-size: 24px; }
    @media (max-width: 768px) {
      .top-intro h3 {
        margin-bottom: 30px;
        font-size: 18px; } }
  @media (max-width: 1200px) {
    .top-intro p br:nth-child(1), .top-intro p br:nth-child(3) {
      display: none; } }

/* 化学物質情報伝達における全体スキーム */
.top-about-wrap {
  width: 96%;
  max-width: 1200px;
  margin: 90px auto 0 auto;
  text-align: center; }
  @media (max-width: 768px) {
    .top-about-wrap {
      width: 94%;
      margin-top: 50px; } }
  @media (max-width: 500px) {
    .top-about-wrap {
      width: 90%; } }
  .top-about-wrap h2 {
    margin: 0 auto;
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 40px;
    line-height: 1.2em;
    z-index: -2; }
    @media (max-width: 768px) {
      .top-about-wrap h2 {
        font-size: 30px; } }
    @media (max-width: 500px) {
      .top-about-wrap h2 {
        font-size: 24px; } }
    @media (max-width: 320px) {
      .top-about-wrap h2 {
        font-size: 20px; } }
    .top-about-wrap h2::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 50%;
      transform: translateY(-50%) rotate(-30deg);
      width: 4px;
      height: 60px;
      background: #333; }
      @media (max-width: 768px) {
        .top-about-wrap h2::before {
          left: -15px;
          width: 3px;
          height: 40px; } }
    .top-about-wrap h2::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%) rotate(30deg);
      width: 4px;
      height: 60px;
      background: #333; }
      @media (max-width: 768px) {
        .top-about-wrap h2::after {
          right: -15px;
          width: 3px;
          height: 40px; } }

.top-about {
  margin-top: 50px;
  padding: 60px 90px;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1200px) {
    .top-about {
      padding: 50px 70px; } }
  @media (max-width: 768px) {
    .top-about {
      width: 100%;
      margin-top: 15px;
      padding: 30px 5%; } }
  .top-about .img-man {
    width: 170px;
    position: absolute;
    right: calc(50% + 280px);
    top: -110px;
    z-index: -1;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1200px) {
      .top-about .img-man {
        width: 120px;
        right: calc(50% + 250px);
        top: -80px; } }
    @media (max-width: 768px) {
      .top-about .img-man {
        width: 90px;
        left: 5%;
        right: auto;
        top: -55px; } }
    @media (max-width: 500px) {
      .top-about .img-man {
        width: 80px;
        left: 1%;
        top: -50px; } }
    @media (max-width: 320px) {
      .top-about .img-man {
        width: 70px;
        top: -45px; } }
  .top-about .img-gear {
    width: 150px;
    position: absolute;
    right: 30px;
    bottom: -60px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1200px) {
      .top-about .img-gear {
        width: 120px;
        right: 20px;
        bottom: -40px; } }
    @media (max-width: 768px) {
      .top-about .img-gear {
        width: 80px;
        right: 1%; } }
    @media (max-width: 500px) {
      .top-about .img-gear {
        width: 60px;
        bottom: -25px; } }
    @media (max-width: 320px) {
      .top-about .img-gear {
        width: 50px; } }
  .top-about img {
    width: 100%;
    height: auto; }

/* 最新情報 */
.top-news-list-wrap {
  width: 96%;
  max-width: 1400px;
  margin: 160px auto 120px auto;
  padding: 35px 30px;
  position: relative;
  border-top: solid 1px #666;
  border-bottom: solid 1px #666;
  display: flex;
  justify-content: space-between;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1200px) {
    .top-news-list-wrap {
      padding: 35px 30px 35px 0; } }
  @media (max-width: 768px) {
    .top-news-list-wrap {
      width: 94%;
      margin: 230px auto 120px auto;
      padding: 15px 0;
      display: block; }
      .top-news-list-wrap .heading-top {
        position: absolute;
        left: 0;
        top: -140px; }
      .top-news-list-wrap .arrow-button {
        position: absolute;
        right: 0;
        bottom: -60px; } }
  @media (max-width: 500px) {
    .top-news-list-wrap {
      width: 90%; } }

.news-tab {
  position: absolute;
  top: -33px;
  right: 30px;
  display: flex; }
  @media (max-width: 768px) {
    .news-tab {
      right: 50%;
      transform: translateX(50%); } }
  @media (max-width: 500px) {
    .news-tab {
      top: -41px; } }
  .news-tab li {
    width: 180px;
    height: 32px;
    margin: 0 4px;
    font-feature-settings: "palt";
    border-radius: 14px 14px 0 0;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1200px) {
      .news-tab li {
        width: 140px;
        border-radius: 12px 12px 0 0;
        font-size: 14px; } }
    @media (max-width: 768px) {
      .news-tab li {
        width: 106px;
        border-radius: 10px 10px 0 0;
        font-size: 11px; } }
    @media (max-width: 500px) {
      .news-tab li {
        width: 70px;
        height: 40px;
        margin: 0 2px;
        font-size: 10px; } }
    .news-tab li.tab-cmp {
      border-top: 1px solid #6167ad;
      border-left: 1px solid #6167ad;
      border-right: 1px solid #6167ad; }
      .news-tab li.tab-cmp a {
        color: #6167ad; }
    .news-tab li.tab-chem {
      border-top: 1px solid #ea8c00;
      border-left: 1px solid #ea8c00;
      border-right: 1px solid #ea8c00; }
      .news-tab li.tab-chem a {
        color: #ea8c00; }
    .news-tab li.tab-decla {
      border-top: 1px solid #666;
      border-left: 1px solid #666;
      border-right: 1px solid #666; }
      .news-tab li.tab-decla a {
        color: #666; }
    .news-tab li.tab-cons {
      border-top: 1px solid #619caa;
      border-left: 1px solid #619caa;
      border-right: 1px solid #619caa; }
      .news-tab li.tab-cons a {
        color: #619caa; }
    .news-tab li br {
      display: none; }
      @media (max-width: 500px) {
        .news-tab li br {
          display: block; } }
    .news-tab li a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center; }
      .news-tab li a:hover {
        opacity: 0.6; }

.top-news-heading {
  width: 25%;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .top-news-heading {
      padding: 0; } }

.top-news-list {
  width: 73%;
  margin-left: 2%; }
  @media (max-width: 768px) {
    .top-news-list {
      width: 90%;
      margin: 0 auto; }
      .top-news-list li:not(:last-child) a {
        padding-bottom: 15px;
        border-bottom: solid 1px #dbdbdb; } }
  .top-news-list a {
    margin: 15px 0;
    display: flex;
    align-items: center; }
    @media (max-width: 768px) {
      .top-news-list a {
        flex-wrap: wrap; } }
    .top-news-list a:hover {
      opacity: 0.6; }
  .top-news-list .news-date {
    width: 100px;
    margin-left: 20px;
    font-weight: bold;
    line-height: 1.6em; }
  .top-news-list .news-text {
    width: calc(100% - 140px - 100px);
    line-height: 1.6em; }
    @media (max-width: 768px) {
      .top-news-list .news-text {
        width: 100%;
        margin-top: 10px; } }

/* footer上共通コンテンツ */
.pre-footer {
  display: flex; }
  @media (max-width: 500px) {
    .pre-footer {
      flex-direction: column; } }
  .pre-footer li {
    flex: 1; }
  .pre-footer a {
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center; }
    .pre-footer a:hover:after {
      transform: scale(1.05);
      opacity: 0.6;
      filter: brightness(130%); }
  .pre-footer .inner {
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media (max-width: 1200px) {
      .pre-footer .inner {
        padding: 20px 5% 60px 5%; } }
    @media (max-width: 768px) {
      .pre-footer .inner {
        min-height: 240px; } }
  .pre-footer .pre-footer-cmp a:before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #6167ad;
    z-index: -2; }
  .pre-footer .pre-footer-cmp a:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/common/pre_footer_cmp_bk.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all .8s ease;
    z-index: -1; }
  .pre-footer .pre-footer-cmp p {
    font-weight: bold;
    font-size: 30px; }
    @media (max-width: 768px) {
      .pre-footer .pre-footer-cmp p {
        font-size: 20px; } }
  .pre-footer .pre-footer-chem a:before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #eba530;
    z-index: -2; }
  .pre-footer .pre-footer-chem a:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/common/pre_footer_chem_bk.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all .8s ease;
    z-index: -1; }
  .pre-footer .pre-footer-chem p {
    font-weight: bold;
    font-size: 20px; }
  .pre-footer .pre-footer-chem .img {
    width: calc(100% - 120px);
    max-width: 600px;
    margin: 5px auto 0 auto; }
    @media (max-width: 1200px) {
      .pre-footer .pre-footer-chem .img {
        width: 90%; } }
    @media (max-width: 768px) {
      .pre-footer .pre-footer-chem .img {
        width: 100%; } }
    .pre-footer .pre-footer-chem .img img {
      width: 100%;
      height: auto; }
  .pre-footer h2 {
    margin: 30px auto 20px auto;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2em;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .pre-footer h2 span:nth-child(1) {
      margin-bottom: 20px;
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      font-size: 60px; }
      @media (max-width: 1200px) {
        .pre-footer h2 span:nth-child(1) {
          font-size: 46px; } }
      @media (max-width: 768px) {
        .pre-footer h2 span:nth-child(1) {
          margin-bottom: 10px;
          font-size: 32px; } }
      @media (max-width: 500px) {
        .pre-footer h2 span:nth-child(1) {
          font-size: 36px; } }
      .pre-footer h2 span:nth-child(1) sup {
        display: inline-block;
        transform: translateY(-0.4em);
        font-size: 0.3em; }
    .pre-footer h2 span:nth-child(2) {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-style: italic;
      font-size: 14px; }
      @media (max-width: 768px) {
        .pre-footer h2 span:nth-child(2) {
          font-size: 12px; } }
  .pre-footer .arrow {
    width: 60px;
    height: 60px;
    margin-left: calc(100% - 100px);
    position: absolute;
    right: 20px;
    bottom: 20px;
    border: solid 1px #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 1200px) {
      .pre-footer .arrow {
        width: 44px;
        height: 44px;
        right: 10px;
        bottom: 10px;
        margin-left: calc(100% - 44px); } }
    .pre-footer .arrow img {
      width: 10px;
      height: auto; }

/*
------------------------------------------------------------
------------------------------------------------------------
下層ページ
------------------------------------------------------------
------------------------------------------------------------*/
/* ページタイトル */
.page-title-wrap {
  height: 380px;
  position: relative; }
  .page-title-wrap.page-news {
    background: url("../images/news/header_news.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-cmp {
    background: url("../images/cmp/header_cmp.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 500px) {
      .page-title-wrap.page-cmp {
        background-position: left -130px center; } }
  .page-title-wrap.page-chem {
    background: url("../images/chemsherpa/header_chem.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 500px) {
      .page-title-wrap.page-chem {
        background-position: left -130px center; } }
  .page-title-wrap.page-help {
    background: url("../images/help/header_help.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-docs {
    background: url("../images/docs/header_docs.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-consortium {
    background: url("../images/consortium/header_consortium.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-entry {
    background: url("../images/entry/header_entry.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-member {
    background: url("../images/member/header_member.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-access {
    background: url("../images/access/header_access.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .page-title-wrap.page-policy {
    background: url("../images/policy/header_policy.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1200px) {
    .page-title-wrap {
      height: 340px; } }
  @media (max-width: 768px) {
    .page-title-wrap {
      padding-top: 50px;
      height: 190px; } }

.page-title {
  padding: 0 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
  @media (max-width: 768px) {
    .page-title {
      padding: 0 5px; } }
  .page-title p {
    padding-top: 60px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 20px; }
    @media (max-width: 1200px) {
      .page-title p {
        padding-top: 50px;
        font-size: 16px; } }
    @media (max-width: 768px) {
      .page-title p {
        padding-top: 35px;
        font-size: 10px; } }
    .page-title p::before {
      content: "●";
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      margin-right: 5px;
      color: #fff;
      font-size: 0.8em; }
      @media (max-width: 768px) {
        .page-title p::before {
          top: 20px; } }
  .page-title h2 {
    padding-top: 20px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.1em;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-feature-settings: "palt"; }
    @media (max-width: 1200px) {
      .page-title h2 {
        padding-top: 20px;
        font-size: 50px; } }
    @media (max-width: 768px) {
      .page-title h2 {
        padding-top: 5px;
        font-size: 30px; } }
    .page-title h2.long-text {
      font-size: 56px; }
      @media (max-width: 1200px) {
        .page-title h2.long-text {
          font-size: 46px; } }
      @media (max-width: 768px) {
        .page-title h2.long-text {
          font-size: 26px; } }
    .page-title h2.longer-text {
      font-size: 50px; }
      @media (max-width: 1200px) {
        .page-title h2.longer-text {
          font-size: 40px; } }
      @media (max-width: 768px) {
        .page-title h2.longer-text {
          font-size: 23px; } }
      @media (max-width: 320px) {
        .page-title h2.longer-text {
          font-size: 22px; } }

/* パンくずリスト */
.pankuzu {
  min-height: 40px;
  padding: 90px 90px 0 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.4em;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #fff;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 1400px) {
    .pankuzu {
      padding: 85px 90px 0 10px;
      font-size: 14px; } }
  @media (max-width: 1200px) {
    .pankuzu {
      padding: 85px 90px 0 10px;
      font-size: 13px; } }
  @media (max-width: 768px) {
    .pankuzu {
      display: none; } }
  .pankuzu li, .pankuzu p {
    padding-left: 10px; }
    .pankuzu li:not(:last-child)::after, .pankuzu p:not(:last-child)::after {
      content: "";
      display: inline-block;
      width: 6px;
      height: 11px;
      background: url("../images/common/arrow_right_white.svg") no-repeat;
      background-size: contain;
      background-position: center center;
      margin-left: 10px; }
    .pankuzu li a, .pankuzu p a {
      text-decoration: underline;
      color: #fff; }
      .pankuzu li a:hover, .pankuzu p a:hover {
        opacity: 0.6; }
  .pankuzu li br {
    display: none; }

/* 画像 */
.page-img-1 img {
  width: 100%;
  height: auto; }

.page-img-1-s {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }
  .page-img-1-s img {
    width: 100%;
    height: auto; }

/*.page-img-2{
	width: 100%;
	display: flex;
	justify-content: space-between;
	@include sp{
		flex-direction: column;
	}
	img{
		width : calc(50% - 2px) ;
		height: auto;
		@include sp{
			width: 90%;
			margin: 2px 5%;
		}
	}
}*/
/* nav ページ内リンク */
.page-nav, .page-nav-l, .page-nav-s {
  display: flex;
  border-left: solid 1px #666; }
  @media (max-width: 500px) {
    .page-nav, .page-nav-l, .page-nav-s {
      flex-direction: column;
      border-left: none; } }
  .page-nav li, .page-nav-l li, .page-nav-s li {
    flex: 1;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
    font-feature-settings: "palt";
    border-right: solid 1px #666; }
    @media (max-width: 500px) {
      .page-nav li, .page-nav-l li, .page-nav-s li {
        text-align: left;
        border-right: none;
        border-bottom: solid 1px #666; } }
  .page-nav a, .page-nav-l a, .page-nav-s a {
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; }
    @media (max-width: 500px) {
      .page-nav a, .page-nav-l a, .page-nav-s a {
        padding: 15px 10px;
        flex-direction: row; } }
    .page-nav a span, .page-nav-l a span, .page-nav-s a span {
      height: 100%;
      display: flex;
      align-items: center; }
    .page-nav a img, .page-nav-l a img, .page-nav-s a img {
      width: 18px;
      height: auto;
      margin-top: 10px;
      transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
      @media (max-width: 500px) {
        .page-nav a img, .page-nav-l a img, .page-nav-s a img {
          width: 14px;
          margin-top: 0;
          margin-left: 20px; } }
    .page-nav a:hover, .page-nav-l a:hover, .page-nav-s a:hover {
      color: #6167ad; }
      .page-nav a:hover img, .page-nav-l a:hover img, .page-nav-s a:hover img {
        opacity: 0.6; }
    @media (max-width: 500px) {
      .page-nav a br, .page-nav-l a br, .page-nav-s a br {
        display: none; } }

.page-nav-l {
  width: 80%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }
  @media (max-width: 1400px) {
    .page-nav-l {
      width: 80%; } }
  @media (max-width: 500px) {
    .page-nav-l {
      width: 100%; } }

@media (max-width: 500px) {
  .page-nav-s {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; } }
@media (max-width: 500px) {
  .page-nav-s li {
    width: 30%;
    flex: none; } }

/* layout */
.page-section-wrap {
  padding-top: 60px;
  padding-bottom: 120px; }
  @media (max-width: 768px) {
    .page-section-wrap {
      padding-top: 30px;
      padding-bottom: 90px; } }
  .page-section-wrap .page-section {
    margin-top: 120px; }
    @media (max-width: 768px) {
      .page-section-wrap .page-section {
        margin-top: 90px; } }
    .page-section-wrap .page-section .heading-common + .heading-sub {
      margin-top: 0; }
    .page-section-wrap .page-section .heading-sub {
      margin-top: 90px; }
      @media (max-width: 768px) {
        .page-section-wrap .page-section .heading-sub {
          margin-top: 60px; } }

/* テキスト＋画像（60%：40%） */
.text-img-box {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 500px) {
    .text-img-box {
      flex-direction: column; } }
  .text-img-box .text {
    width: 60%; }
    @media (max-width: 500px) {
      .text-img-box .text {
        width: 100%;
        margin-bottom: 30px; } }
  .text-img-box .img {
    width: 40%;
    max-width: 320px;
    margin: 0 auto;
    padding: 0 20px; }
    @media (max-width: 1200px) {
      .text-img-box .img {
        padding: 0 0 0 40px; } }
    @media (max-width: 500px) {
      .text-img-box .img {
        width: 100%;
        padding: 0 40px; } }
  .text-img-box img {
    width: 100%;
    height: auto; }

/* テキスト＋画像（48%：48% 均等サイズ） */
.text-img-h-box {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 500px) {
    .text-img-h-box {
      flex-direction: column; } }
  .text-img-h-box.al-center {
    align-items: center; }
    @media (max-width: 768px) {
      .text-img-h-box.al-center {
        align-items: stretch; } }
  .text-img-h-box.reverse {
    flex-direction: row-reverse; }
    @media (max-width: 500px) {
      .text-img-h-box.reverse {
        flex-direction: column; } }
  .text-img-h-box .text {
    width: 48%; }
    @media (max-width: 500px) {
      .text-img-h-box .text {
        width: 100%; } }
  .text-img-h-box .img {
    width: 48%; }
    @media (max-width: 500px) {
      .text-img-h-box .img {
        width: 100%;
        margin-top: 20px; } }
  .text-img-h-box img {
    width: 100%;
    height: auto; }

.text-img-h-box + .text-img-h-box {
  margin-top: 60px; }
  @media (max-width: 768px) {
    .text-img-h-box + .text-img-h-box {
      margin-top: 50px; } }

/* テキスト＋画像（テキスト回り込み） */
.text-img-flow-box {
  position: relative; }
  @media (max-width: 500px) {
    .text-img-flow-box {
      display: flex;
      flex-direction: column-reverse; } }
  .text-img-flow-box .img {
    float: right;
    width: 280px;
    margin: 0 64px 40px 64px;
    overflow: hidden; }
    @media (max-width: 1200px) {
      .text-img-flow-box .img {
        margin: 0 0 40px 40px; } }
    @media (max-width: 768px) {
      .text-img-flow-box .img {
        width: 248px; } }
    @media (max-width: 500px) {
      .text-img-flow-box .img {
        max-width: 240px;
        width: 100%;
        margin: 30px auto 0 auto; } }
  .text-img-flow-box img {
    width: 100%;
    height: auto; }

/*　最新情報
------------------------------------------------------------
------------------------------------------------------------*/
/* 最新情報：一覧　news
------------------------------------------------------------*/
.news-list-wrap {
  margin-top: 93px;
  padding: 60px 0 120px 0;
  position: relative; }
  @media (max-width: 768px) {
    .news-list-wrap {
      margin-top: 63px;
      padding: 50px 0 90px 0; } }
  .news-list-wrap h3 {
    margin-bottom: 90px;
    font-size: 34px;
    font-weight: bold;
    text-align: center; }
    @media (max-width: 768px) {
      .news-list-wrap h3 {
        margin-bottom: 60px;
        font-size: 26px; } }
    @media (max-width: 500px) {
      .news-list-wrap h3 {
        font-size: 22px; } }

.news-list-wrap .news-tab {
  right: 50%;
  transform: translateX(50%);
  z-index: 1; }
  @media screen and (max-width: 620px) {
    .news-list-wrap .news-tab li {
      width: 84px; } }
  @media (max-width: 500px) {
    .news-list-wrap .news-tab li {
      width: 60px; } }
  @media (max-width: 320px) {
    .news-list-wrap .news-tab li {
      width: 52px; } }
  .news-list-wrap .news-tab li.tab-all {
    border-top: 1px solid #bfbfbf;
    border-left: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf;
    background-color: #bfbfbf; }
    .news-list-wrap .news-tab li.tab-all a {
      color: #fff; }
      .news-list-wrap .news-tab li.tab-all a:hover {
        background-color: #dcdcdc;
        border-radius: 14px 14px 0 0; }
        @media (max-width: 1200px) {
          .news-list-wrap .news-tab li.tab-all a:hover {
            border-radius: 12px 12px 0 0; } }
        @media (max-width: 768px) {
          .news-list-wrap .news-tab li.tab-all a:hover {
            border-radius: 10px 10px 0 0; } }

.news-list-wrap.page-all {
  border-top: solid 1px #bfbfbf; }
  .news-list-wrap.page-all .news-tab li.tab-all a {
    pointer-events: none; }
.news-list-wrap.page-cmp {
  border-top: solid 1px #6167ad; }
.news-list-wrap.page-chem {
  border-top: solid 1px #ea8c00; }
.news-list-wrap.page-decla {
  border-top: solid 1px #666; }
.news-list-wrap.page-cons {
  border-top: solid 1px #619caa; }
.news-list-wrap.page-cmp .news-tab li.tab-cmp, .news-list-wrap.page-chem .news-tab li.tab-chem, .news-list-wrap.page-decla .news-tab li.tab-decla, .news-list-wrap.page-cons .news-tab li.tab-cons {
  position: relative; }
  .news-list-wrap.page-cmp .news-tab li.tab-cmp ::after, .news-list-wrap.page-chem .news-tab li.tab-chem ::after, .news-list-wrap.page-decla .news-tab li.tab-decla ::after, .news-list-wrap.page-cons .news-tab li.tab-cons ::after {
    content: '';
    width: 100%;
    height: 4px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -2px; }
  .news-list-wrap.page-cmp .news-tab li.tab-cmp a, .news-list-wrap.page-chem .news-tab li.tab-chem a, .news-list-wrap.page-decla .news-tab li.tab-decla a, .news-list-wrap.page-cons .news-tab li.tab-cons a {
    pointer-events: none; }

.news-list li {
  padding: 0 10px 0 20px;
  border-bottom: dotted 1px #dbdbdb; }
  @media (max-width: 768px) {
    .news-list li {
      padding: 0; } }
.news-list a {
  margin: 15px 0;
  display: flex;
  align-items: center; }
  @media (max-width: 768px) {
    .news-list a {
      flex-wrap: wrap; } }
  .news-list a:hover {
    opacity: 0.6; }
.news-list img {
  width: 10px;
  height: auto;
  margin-left: 20px; }
  @media (max-width: 768px) {
    .news-list img {
      width: 8px; } }
.news-list .news-date {
  width: 100px;
  margin-left: 20px;
  font-weight: bold;
  line-height: 1.6em; }
.news-list .news-text {
  width: calc(100% - 140px - 100px - 30px);
  line-height: 1.6em; }
  @media (max-width: 768px) {
    .news-list .news-text {
      width: calc(100% - 28px);
      margin-top: 10px; } }

/* ページネーション pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 50px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1em; }
  @media (max-width: 768px) {
    .pagination {
      font-size: 18px; } }
  .pagination a {
    margin: 10px 0;
    padding: 0 20px;
    color: #999; }
    .pagination a:hover {
      opacity: 0.6; }
  .pagination .dots {
    padding: 0 20px;
    color: #999; }
  .pagination .prev, .pagination .next {
    width: 40px;
    height: 40px;
    margin: 10px;
    padding: 0; }
    .pagination .prev img, .pagination .next img {
      width: 100%;
      height: auto; }
  .pagination .current {
    margin: 10px 0;
    padding: 0 20px;
    color: #6167ad;
    pointer-events: none; }

/* 最新情報：詳細　　news/
------------------------------------------------------------*/
.news-detail-wrap {
  padding-top: 60px;
  padding-bottom: 120px; }
  @media (max-width: 768px) {
    .news-detail-wrap {
      padding-top: 30px;
      padding-bottom: 90px; } }

.news-detail {
  margin-bottom: 70px; }
  @media (max-width: 768px) {
    .news-detail {
      margin-bottom: 20px; } }
  .news-detail .news-title {
    margin: 20px 0 60px 0;
    padding-top: 20px;
    font-size: 30px;
    font-weight: bold;
    font-feature-settings: "palt";
    line-height: 1.4em;
    border-top: solid 1px #333; }
    @media (max-width: 768px) {
      .news-detail .news-title {
        margin: 10px 0 30px 0;
        font-size: 24px; } }
    @media (max-width: 500px) {
      .news-detail .news-title {
        font-size: 20px; } }
  .news-detail .news-date {
    width: 100px;
    margin-left: 20px;
    font-weight: bold;
    line-height: 1.6em; }
  .news-detail .news-text p:not(:first-child) {
    margin-top: 30px; }
    @media (max-width: 768px) {
      .news-detail .news-text p:not(:first-child) {
        margin-top: 20px; } }
  .news-detail .news-text a {
    color: #589ac7;
    text-decoration: underline; }
    .news-detail .news-text a:hover {
      opacity: 0.6; }

/*　chemSHERPA
------------------------------------------------------------
------------------------------------------------------------*/
/* chemSHERPA：chemSHERPAについて chemSHERPA/aboutchemsherpa
------------------------------------------------------------*/
.aboutchem-intro {
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .aboutchem-intro {
      margin-bottom: 50px; } }
  @media (max-width: 500px) {
    .aboutchem-intro {
      margin-bottom: 30px;
      flex-direction: column; } }
  .aboutchem-intro .text {
    width: 50%; }
    @media (max-width: 500px) {
      .aboutchem-intro .text {
        width: 100%; } }
    .aboutchem-intro .text .logo {
      width: 70%;
      max-width: 340px;
      margin: 0 auto 50px auto; }
      @media (max-width: 768px) {
        .aboutchem-intro .text .logo {
          margin: 10px auto 30px auto; } }
  .aboutchem-intro .img {
    width: 50%;
    max-width: 320px;
    margin: -70px auto 0 auto;
    padding: 0 20px; }
    @media (max-width: 1200px) {
      .aboutchem-intro .img {
        padding: 0 40px; } }
    @media (max-width: 768px) {
      .aboutchem-intro .img {
        margin: -40px auto 0 auto;
        padding: 0 50px; } }
    @media (max-width: 500px) {
      .aboutchem-intro .img {
        width: 100%;
        margin: -40px auto 30px auto; } }
  .aboutchem-intro img {
    width: 100%;
    height: auto; }

.aboutchem-overview {
  display: flex; }
  @media (max-width: 500px) {
    .aboutchem-overview {
      flex-direction: column; } }
  .aboutchem-overview li {
    margin: 0 15px;
    flex: 1; }
    @media (max-width: 500px) {
      .aboutchem-overview li:first-child {
        margin: 0; }
      .aboutchem-overview li:not(:first-child) {
        margin: 30px 0 0 0; } }
    .aboutchem-overview li h4 {
      margin-bottom: 30px;
      color: #ea8c00;
      font-weight: bold;
      text-align: center;
      font-size: 18px;
      font-weight: bold; }
      @media (max-width: 768px) {
        .aboutchem-overview li h4 {
          margin-bottom: 10px;
          font-size: 16px; } }

.aboutchem-box {
  margin-top: 100px; }
  @media (max-width: 768px) {
    .aboutchem-box {
      margin-top: 60px; } }
  .aboutchem-box li {
    padding: 40px 20px 20px 140px;
    position: relative;
    border-left: solid 3px #ea8c00;
    background-color: #f0f0f0;
    z-index: 0;
    counter-increment: num; }
    @media (max-width: 768px) {
      .aboutchem-box li {
        padding: 40px 20px 20px 110px; } }
    @media (max-width: 500px) {
      .aboutchem-box li {
        padding: 50px 5% 20px 5%; } }
    .aboutchem-box li:not(:first-child) {
      margin-top: 10px; }
    .aboutchem-box li::before {
      content: counter(num,decimal-leading-zero) ".";
      position: absolute;
      top: 0;
      left: 10px;
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      font-size: 100px;
      line-height: 1em;
      color: #fff;
      z-index: -1; }
      @media (max-width: 768px) {
        .aboutchem-box li::before {
          font-size: 80px; } }
    .aboutchem-box li h4 {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 24px; }
      @media (max-width: 768px) {
        .aboutchem-box li h4 {
          font-size: 22px; } }
      @media (max-width: 500px) {
        .aboutchem-box li h4 {
          font-size: 20px; } }
    .aboutchem-box li hr {
      border-top: 1px solid #fff;
      margin: 20px 0; }
    .aboutchem-box li .arrow-button {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
      text-align: right; }

/* chemSHERPA：chemSHERPA説明資料 chemSHERPA/aboutchemsherpa/description
------------------------------------------------------------*/
.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media (max-width: 500px) {
    .video-list {
      flex-direction: column;
      align-items: center; } }
  .video-list li {
    width: 46%;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; }
    @media (max-width: 768px) {
      .video-list li {
        width: 47%; } }
    @media (max-width: 500px) {
      .video-list li {
        width: 90%; } }
    .video-list li .video-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden; }
      .video-list li .video-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
    .video-list li p {
      padding-top: 5px;
      line-height: 1.6em;
      font-size: 14px; }
      @media (max-width: 768px) {
        .video-list li p {
          font-size: 13px; } }

/* chemSHERPA：サービス事業者/リンク集　chemSHERPA/link
------------------------------------------------------------*/
.table-link {
  width: 100%; }
  @media (max-width: 1200px) {
    .table-link {
      font-size: 15px; } }
  @media (max-width: 768px) {
    .table-link {
      font-size: 14px; } }
  @media (max-width: 500px) {
    .table-link {
      font-size: 13px; } }
  .table-link th {
    padding: 15px 10px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    line-height: 1.6em;
    background-color: #dbdbdb; }
    @media (max-width: 768px) {
      .table-link th {
        padding: 10px 8px;
        text-align: left; } }
  .table-link td {
    padding: 15px 10px;
    line-height: 1.6em;
    border-bottom: solid 1px #dbdbdb;
    vertical-align: middle;
    word-break: break-all; }
    @media (max-width: 768px) {
      .table-link td {
        padding: 10px 8px; } }
    .table-link td span {
      font-weight: bold; }
    .table-link td a {
      color: #589ac7;
      text-decoration: underline; }
      .table-link td a:hover {
        opacity: 0.6; }
  .table-link tr:first-child th:nth-child(2) {
    border-bottom: dotted 1px #999; }
  .table-link tr:nth-child(2) th:nth-child(1),
  .table-link tr:nth-child(2) th:nth-child(3),
  .table-link tr:nth-child(2) th:nth-child(5) {
    background-color: #cfcfcf; }
  .table-link tr:nth-child(2) th:nth-child(6) {
    border-right: solid 1px #bdbdbd; }
  .table-link td:nth-child(2),
  .table-link td:nth-child(4),
  .table-link td:nth-child(6) {
    background-color: #f0f0f0; }
  .table-link td:nth-child(7) {
    border-right: solid 1px #dbdbdb; }
  .table-link td:nth-child(2), .table-link td:nth-child(3), .table-link td:nth-child(4),
  .table-link td:nth-child(5), .table-link td:nth-child(6) {
    text-align: center; }

/* chemSHERPA：セミナー　chemSHERPA/seminar
------------------------------------------------------------*/
/* chemSHERPA：データ作成支援（ツール等）：外部リスト類利用サービス　chemSHERPA/list
------------------------------------------------------------*/
/* 送付先box */
.address-box {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  padding: 30px 50px;
  display: flex;
  background-color: #f0f0f0;
  border-radius: 4px; }
  @media (max-width: 768px) {
    .address-box {
      padding: 20px 5%;
      flex-direction: column; } }
  .address-box p:nth-child(1) {
    width: 6em; }
  .address-box p:nth-child(2) {
    width: calc(100% - 6em); }
    @media (max-width: 768px) {
      .address-box p:nth-child(2) {
        width: 100%; } }

/* chemSHERPA：データ作成支援（ツール等）：システム開発関連情報　chemSHERPA/tool
------------------------------------------------------------*/
.login-box-wrap {
  margin-top: 90px;
  display: flex;
  justify-content: space-between; }
  @media (max-width: 768px) {
    .login-box-wrap {
      margin-top: 50px;
      flex-direction: column; } }

.login-box {
  margin: 0 20px;
  padding: 50px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); }
  @media (max-width: 768px) {
    .login-box {
      width: 80%;
      margin: 0 auto; } }
  @media (max-width: 500px) {
    .login-box {
      width: 100%;
      padding: 30px 20px; } }
  .login-box h4 {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 24px;
    text-align: center; }
    @media (max-width: 768px) {
      .login-box h4 {
        font-size: 22px; } }
    @media (max-width: 500px) {
      .login-box h4 {
        font-size: 20px; } }
  .login-box:nth-child(1) h4 {
    color: #6167ad; }
  .login-box:nth-child(2) h4 {
    color: #ea8c00; }
  @media (max-width: 768px) {
    .login-box:nth-child(2) {
      margin-top: 20px; } }

.login-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  @media (max-width: 500px) {
    .login-list {
      flex-direction: column; } }
  .login-list dt {
    width: 110px;
    font-weight: bold; }
    @media (max-width: 500px) {
      .login-list dt {
        width: 100%; } }
  .login-list dd {
    width: calc(100% - 110px); }
    @media (max-width: 500px) {
      .login-list dd {
        width: 100%; } }

/* chemSHERPA：データ作成支援（ツール等）：システム開発関連情報：新規登録フォーム　chemSHERPA/registration
------------------------------------------------------------*/
/* フォームパーツ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea {
  width: 100%;
  margin: 10px 0;
  padding: 5px 10px;
  box-sizing: border-box;
  background-color: #fff;
  border: solid 1px #dbdbdb;
  border-radius: 3px; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background-color: #fff;
  box-shadow: none; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #333 !important; }

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

::placeholder {
  color: #999; }

/* セレクトボックス */
.select {
  margin-top: 10px; }

select::-ms-expand {
  display: none; }

select {
  width: 49.5%;
  margin: 0;
  padding: 5px 10px;
  box-sizing: border-box;
  border: solid 1px #dbdbdb;
  border-radius: 3px;
  position: relative;
  background-color: #fff;
  z-index: 1;
  color: #333;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../images/common/arrow_down_black.svg") no-repeat right 0.8em center/14px auto; }
  @media (max-width: 500px) {
    select {
      width: 100%; } }

/* チェックボックス */
.checkbox {
  width: 2em;
  height: 2em;
  margin-right: 0.5em;
  position: relative;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  vertical-align: -0.9em; }

.checkbox:checked::before {
  width: 10px;
  height: 20px;
  top: 4px;
  left: 12px;
  transform: rotate(50deg);
  border-right: 3px solid #3e4174;
  border-bottom: 3px solid #3e4174;
  content: '';
  position: absolute; }
  @media (max-width: 768px) {
    .checkbox:checked::before {
      width: 9px;
      height: 18px;
      top: 3px;
      left: 9px; } }

/* ラジオボタン */
.radio {
  margin-right: 1em; }

.radio-mark {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  margin-top: -0.2em;
  margin-right: 0.5em;
  position: relative;
  vertical-align: middle; }

.radio input[type="radio"]:checked + .radio-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #3e4174;
  border-radius: 50%;
  transform: translate(-50%, -50%); }

/* フォームボタン */
.form-button, .form-dl-button {
  position: relative;
  display: inline-block; }
  .form-button::after, .form-dl-button::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 18px;
    background: url("../images/common/arrow_right_white.svg") no-repeat center/contain;
    pointer-events: none; }
  .form-button input, .form-dl-button input {
    width: 270px;
    height: 54px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    line-height: 1.2em;
    font-feature-settings: "palt";
    color: #fff;
    border-radius: 27px;
    border: none;
    background-color: #3e4174;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 768px) {
      .form-button input, .form-dl-button input {
        width: 250px;
        height: 50px;
        border-radius: 25px; } }
    @media (max-width: 320px) {
      .form-button input, .form-dl-button input {
        width: 220px; } }
    .form-button input:hover, .form-dl-button input:hover {
      background-color: #6167ad;
      box-shadow: 0 0px 6px rgba(84, 84, 84, 0.5); }

.form-button.c-secondary input, .c-secondary.form-dl-button input {
  background-color: #ea8c00; }
  .form-button.c-secondary input:hover, .c-secondary.form-dl-button input:hover {
    background-color: #eba530; }

.form-dl-button::after {
  width: 16px;
  height: 16px;
  background: url("../images/common/button_icon_dl.svg") no-repeat center/contain; }
  @media (max-width: 768px) {
    .form-dl-button::after {
      width: 14px;
      height: 14px;
      right: 13px; } }

input:disabled {
  background-color: #dbdbdb;
  border: none;
  pointer-events: none; }

.form-title {
  margin: 60px auto 50px auto;
  text-align: center;
  font-weight: bold; }
  .form-title span:nth-of-type(1) {
    font-size: 24px; }
    @media (max-width: 768px) {
      .form-title span:nth-of-type(1) {
        font-size: 22px; } }
    @media (max-width: 500px) {
      .form-title span:nth-of-type(1) {
        font-size: 20px; } }
  .form-title span:nth-of-type(2) {
    font-size: 34px; }
    @media (max-width: 768px) {
      .form-title span:nth-of-type(2) {
        font-size: 32px; } }
    @media (max-width: 500px) {
      .form-title span:nth-of-type(2) {
        font-size: 30px; } }

.form-list {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 10px; }
  @media (max-width: 768px) {
    .form-list {
      width: 100%; } }
  .form-list dt {
    margin-top: 30px;
    font-weight: bold; }

.input-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .input-flex input[type="text"] {
    width: 49.5%; }
  @media (max-width: 500px) {
    .input-flex {
      flex-direction: column; }
      .input-flex input[type="text"] {
        width: 100%; }
        .input-flex input[type="text"]:nth-of-type(2) {
          margin-top: 0; }
      .input-flex .input-flex-inner {
        display: flex;
        flex-direction: column; } }

.policy-box {
  width: 100%;
  height: 260px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.8em; }

.error-box {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fdf4e8;
  border-radius: 4px;
  color: #d71c24; }
  @media (max-width: 768px) {
    .error-box {
      width: 100%;
      padding: 10px 5%; } }

.error-text {
  color: #d71c24; }

.error-msg {
  padding: 5px 10px;
  background-color: #fdf4e8;
  border-radius: 4px;
  color: #d71c24; }

/* 検索ボックス(sitemap・nav) */
.search-form-wrap {
  position: absolute;
  top: 19px;
  left: calc((100% - 1400px) / 2 );
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media screen and (max-width: 1560px) {
    .search-form-wrap {
      left: calc(80px + 1% ); } }
  @media (max-width: 1200px) {
    .search-form-wrap {
      left: calc(10px + 1% ); } }
  @media (max-width: 768px) {
    .search-form-wrap {
      left: calc(10px + 3% ); } }
  @media screen and (max-width: 590px) {
    .search-form-wrap {
      top: 60px; } }
  @media (max-width: 500px) {
    .search-form-wrap {
      top: 8px;
      left: 11%; } }
  @media (max-width: 320px) {
    .search-form-wrap {
      top: 8px;
      left: 6%; } }

.search-form {
  width: 322px;
  margin: 0 auto;
  display: flex;
  border-bottom: solid 1px #333;
  background-color: #fff; }
  @media (max-width: 768px) {
    .search-form {
      width: 220px; } }
  .search-form input {
    width: 280px;
    margin: 0;
    border: none;
    border-radius: 0; }
    @media (max-width: 768px) {
      .search-form input {
        width: 178px; } }
  .search-form button {
    width: 42px; }

.search-button {
  width: 42px;
  height: 42px;
  background: url("../images/common/icon_search_black.svg") no-repeat;
  background-position: center center;
  background-size: 24px 24px;
  border: none;
  cursor: pointer; }
  .search-button:hover {
    opacity: 0.6; }

/* reCAPTCHA */
.grecaptcha-badge {
  position: fixed !important;
  bottom: 10px !important;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  z-index: 10; }

.grecaptcha-badge.footer-scroll {
  bottom: 190px !important; }
  @media (max-width: 768px) {
    .grecaptcha-badge.footer-scroll {
      bottom: 186px !important; } }
  @media (max-width: 320px) {
    .grecaptcha-badge.footer-scroll {
      bottom: 196px !important; } }

/* ログイン後画面
------------------------------------------------------------*/
/* ログアウトボタン */
.logout-button-end {
  padding-bottom: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  @media (max-width: 500px) {
    .logout-button-end {
      padding-bottom: 20px; } }

/* おといあわせ:確認
------------------------------------------------------------*/
/* おといあわせ:完了
------------------------------------------------------------*/
/* ダウンロードフォームベース　chemSHERPA/download
------------------------------------------------------------*/
.form-dl-title {
  margin: 30px auto 90px auto;
  font-weight: bold;
  font-size: 34px;
  line-height: 1.4em;
  display: flex;
  justify-content: center; }
  @media (max-width: 768px) {
    .form-dl-title {
      margin-bottom: 60px;
      font-size: 26px; } }
  @media (max-width: 500px) {
    .form-dl-title {
      font-size: 22px; } }

.tool-term-box {
  margin: 30px auto;
  padding: 20px;
  background-color: #f0f0f0; }
  .tool-term-box h4 {
    font-weight: bold; }
  .tool-term-box h5 {
    margin-top: 15px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.8em; }
  .tool-term-box p {
    font-size: 14px;
    line-height: 1.8em; }
  .tool-term-box li {
    font-size: 14px;
    line-height: 1.8em; }

/*　FAQ/お問い合わせ　help
------------------------------------------------------------
------------------------------------------------------------*/
.contact-box-wrap {
  margin-top: 90px; }
  @media (max-width: 768px) {
    .contact-box-wrap {
      margin-top: 50px; } }

.contact-box {
  margin: 0 20px;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); }
  @media (max-width: 768px) {
    .contact-box {
      width: 80%;
      margin: 0 auto; } }
  @media (max-width: 500px) {
    .contact-box {
      width: 100%;
      padding: 30px 20px; } }
  .contact-box h4 {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 24px;
    text-align: center; }
    @media (max-width: 768px) {
      .contact-box h4 {
        font-size: 22px; } }
    @media (max-width: 500px) {
      .contact-box h4 {
        font-size: 20px; } }
  .contact-box:nth-child(1) h4 {
    color: #3e4174; }
  .contact-box:nth-child(2) {
    margin-top: 20px; }
    .contact-box:nth-child(2) h4 {
      color: #6167ad; }
    @media (max-width: 768px) {
      .contact-box:nth-child(2) {
        margin-top: 20px; } }

/*　管理ガイドライン　docs/guidelines
------------------------------------------------------------
------------------------------------------------------------*/
/*　CMP cmp
------------------------------------------------------------
------------------------------------------------------------*/
.cmp-logo {
  width: 70%;
  max-width: 340px;
  margin: 0 auto 90px auto; }
  @media (max-width: 768px) {
    .cmp-logo {
      margin: 0 auto 50px auto; } }

/*　CMPコンソーシアム
------------------------------------------------------------
------------------------------------------------------------*/
/* CMPコンソーシアム：議長ご挨拶　consortium/greeting
------------------------------------------------------------*/
.greeting-box {
  display: flex; }
  @media (max-width: 500px) {
    .greeting-box {
      flex-direction: column; } }
  .greeting-box .text {
    width: calc(100% - 350px); }
    @media (max-width: 768px) {
      .greeting-box .text {
        width: calc(100% - 270px); } }
    @media (max-width: 500px) {
      .greeting-box .text {
        width: 100%; } }
    .greeting-box .text p:not(:first-child) {
      margin-top: 20px; }
  .greeting-box .img {
    width: 300px;
    margin-left: 50px; }
    @media (max-width: 768px) {
      .greeting-box .img {
        width: 240px;
        margin-left: 30px; } }
    @media (max-width: 500px) {
      .greeting-box .img {
        width: 70%;
        max-width: 240px;
        margin: 30px auto 0 auto; } }
  .greeting-box .greeting-title {
    margin-top: 20px;
    font-weight: bold;
    line-height: 1.6em; }
    @media (max-width: 768px) {
      .greeting-box .greeting-title {
        margin-top: 10px; } }
  .greeting-box .greeting-name {
    margin-top: 10px;
    font-weight: bold; }
  .greeting-box img {
    width: 100%;
    height: auto; }

/* CMPコンソーシアム：沿革　consortium/history
------------------------------------------------------------*/
.history-list li {
  display: flex; }
  .history-list li:last-child {
    background-color: #f0f0f0;
    border-radius: 4px; }
  .history-list li .date {
    width: 230px;
    padding: 15px 10px 15px 30px;
    position: relative;
    border-right: dotted 1px #6167ad; }
    @media (max-width: 768px) {
      .history-list li .date {
        width: 210px;
        padding: 15px 10px 15px 20px; } }
    @media (max-width: 500px) {
      .history-list li .date {
        width: 50%;
        padding: 15px 10px; } }
    .history-list li .date::after {
      content: "";
      position: absolute;
      right: -0.3em;
      top: 1.6em;
      width: 0.6em;
      height: 0.6em;
      background-color: #6167ad;
      border-radius: 50%; }
    .history-list li .date span {
      padding: 0 3px;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      color: #6167ad; }
      @media (max-width: 500px) {
        .history-list li .date span {
          padding: 0 1px; } }
      .history-list li .date span:first-child {
        font-size: 30px; }
        @media (max-width: 500px) {
          .history-list li .date span:first-child {
            font-size: 22px; } }
      .history-list li .date span:nth-child(2) {
        font-size: 20px; }
        @media (max-width: 500px) {
          .history-list li .date span:nth-child(2) {
            font-size: 18px; } }
  .history-list li .text {
    width: calc(100% - 230px);
    margin-top: 3px;
    padding: 15px 30px;
    line-height: 1.6em; }
    @media (max-width: 768px) {
      .history-list li .text {
        width: calc(100% - 210px);
        margin-top: 0;
        padding: 15px 20px; } }
    @media (max-width: 500px) {
      .history-list li .text {
        width: 50%;
        padding: 15px 10px; } }
    .history-list li .text p:first-child {
      font-weight: bold; }

.list {
  padding-left: 1em;
  list-style: none; }
  .list li {
    position: relative; }
    .list li::before {
      content: "";
      position: absolute;
      left: -1em;
      top: 0.7em;
      width: 0.6em;
      height: 0.6em;
      background-color: #666;
      border-radius: 50%; }
    .list li:not(:first-child) {
      margin-top: 13px; }
  .list ol li {
    list-style: none; }

/* CMPコンソーシアム：組織　consortium/organization
------------------------------------------------------------*/
.organization-img {
  background: url("../images/consortium/consortium_organization_img.svg") no-repeat;
  background-size: 30% auto;
  background-position: left bottom;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
  @media (max-width: 500px) {
    .organization-img {
      background-size: 200px auto;
      background-position: center bottom;
      padding-bottom: 180px; } }
  .organization-img img {
    width: 80%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
    @media (max-width: 768px) {
      .organization-img img {
        width: 70%; } }
    @media (max-width: 500px) {
      .organization-img img {
        width: 100%; } }

/* CMPコンソーシアム：規約　consortium/term
------------------------------------------------------------*/
.term-wrap h4 {
  margin: 50px 0 20px 0;
  font-size: 24px;
  border-bottom: solid 1px #666; }
  @media (max-width: 768px) {
    .term-wrap h4 {
      font-size: 22px; } }
  @media (max-width: 500px) {
    .term-wrap h4 {
      font-size: 20px; } }
.term-wrap h5 {
  margin: 20px 0 10px 0;
  font-weight: bold; }

/* CMPコンソーシアム：会員一覧　consortium/memberlist
------------------------------------------------------------*/
.member-count {
  margin-top: 20px;
  text-align: right; }
  @media (max-width: 500px) {
    .member-count {
      text-align: left; } }
  .member-count br {
    display: none; }
    @media (max-width: 500px) {
      .member-count br {
        display: block; } }

.memberlist-list {
  display: flex;
  flex-wrap: wrap; }
  @media (max-width: 500px) {
    .memberlist-list {
      flex-direction: column; } }
  .memberlist-list li {
    width: 50%;
    padding-right: 10px;
    line-height: 1.6em; }
    @media (max-width: 500px) {
      .memberlist-list li {
        width: 100%; } }
    .memberlist-list li.group {
      width: 100%;
      padding-bottom: 10px;
      font-weight: bold;
      color: #6167ad; }
    .memberlist-list li:not(:first-child).group {
      margin-top: 10px;
      padding-top: 10px;
      border-top: dotted 1px #dbdbdb; }

/*　入会案内・変更手続き entry
------------------------------------------------------------
------------------------------------------------------------*/
.box-s-add {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto; }

/*　会員メニュー　member
------------------------------------------------------------
------------------------------------------------------------*/
/* 会員メニュー：ログイン　member/login
------------------------------------------------------------*/
.member-login-box-wrap {
  margin-top: 30px;
  display: flex;
  justify-content: center; }
  @media (max-width: 768px) {
    .member-login-box-wrap {
      margin-top: 50px;
      flex-direction: column; } }

.member-login-box {
  max-width: 510px;
  margin: 0 20px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); }
  @media (max-width: 768px) {
    .member-login-box {
      max-width: initial;
      width: 80%;
      margin: 0 auto;
      padding: 50px 30px; } }
  @media (max-width: 500px) {
    .member-login-box {
      width: 100%;
      padding: 30px 20px; } }
  .member-login-box h3 {
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 24px;
    color: #6167ad;
    text-align: center; }
    @media (max-width: 768px) {
      .member-login-box h3 {
        font-size: 22px; } }
    @media (max-width: 500px) {
      .member-login-box h3 {
        font-size: 20px; } }

/* 会員メニュー：会員向けお知らせ　member/news
------------------------------------------------------------*/
/* ログアウトボタン */
.logout-button-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #333; }
  @media (max-width: 500px) {
    .logout-button-wrap {
      padding-bottom: 10px;
      flex-direction: column-reverse;
      align-items: flex-end; } }
  .logout-button-wrap .name {
    margin-right: 10px;
    line-height: 1.4em;
    font-weight: bold; }
    @media (max-width: 500px) {
      .logout-button-wrap .name {
        margin: 10px 0 0 0; } }

.logout-button {
  display: flex;
  justify-content: center; }
  .logout-button a {
    width: 120px;
    height: 40px;
    margin: 0 auto;
    padding: 5px 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    line-height: 1.2em;
    text-align: center;
    font-feature-settings: "palt";
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
    background-color: #666; }
    .logout-button a img {
      width: 16px;
      height: auto;
      margin-left: 5px; }
      @media (max-width: 768px) {
        .logout-button a img {
          width: 14px; } }
    .logout-button a span {
      width: calc(100% - 15px); }
      @media (max-width: 768px) {
        .logout-button a span {
          width: calc(100% - 13px); } }
    .logout-button a:hover {
      background-color: #888;
      box-shadow: 0 0px 6px rgba(84, 84, 84, 0.5); }

/* 会員メニューnav */
.member-nav-wrap {
  margin-bottom: 90px; }
  @media (max-width: 768px) {
    .member-nav-wrap {
      margin-bottom: 60px; } }

.member-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; }
  @media (max-width: 768px) {
    .member-nav {
      justify-content: flex-start; } }
  .member-nav .arrow-button {
    margin: 20px 30px 0 0; }
    @media (max-width: 500px) {
      .member-nav .arrow-button {
        margin: 20px 20px 0 0; } }
    .member-nav .arrow-button.current {
      pointer-events: none; }
      .member-nav .arrow-button.current a {
        color: #6167ad; }
      .member-nav .arrow-button.current img {
        transform: rotate(90deg); }
    .member-nav .arrow-button img {
      width: 34px; }
      @media (max-width: 768px) {
        .member-nav .arrow-button img {
          width: 30px; } }

.member-news-list li {
  padding: 0 10px 0 20px;
  border-bottom: dotted 1px #dbdbdb; }
  @media (max-width: 768px) {
    .member-news-list li {
      padding: 0; } }
.member-news-list a {
  margin: 15px 0;
  display: flex;
  align-items: center; }
  @media (max-width: 768px) {
    .member-news-list a {
      flex-wrap: wrap; } }
  .member-news-list a:hover {
    opacity: 0.6; }
.member-news-list img {
  width: 10px;
  height: auto;
  margin-left: 20px; }
  @media (max-width: 768px) {
    .member-news-list img {
      width: 8px; } }
.member-news-list .news-date {
  width: 100px;
  font-weight: bold;
  line-height: 1.6em; }
.member-news-list .news-text {
  width: calc(100% - 100px - 30px);
  line-height: 1.6em; }
  @media (max-width: 768px) {
    .member-news-list .news-text {
      width: calc(100% - 28px);
      margin-top: 10px; } }

/*　その他のページ
------------------------------------------------------------
------------------------------------------------------------*/
/* 所在地　access
------------------------------------------------------------*/
.googlemap {
  width: 100%;
  max-width: 800px;
  margin: 50px auto 0 auto; }
  @media (max-width: 768px) {
    .googlemap {
      margin: 30px auto 0 auto; } }
  .googlemap iframe {
    width: 100%;
    height: 450px; }
    @media (max-width: 768px) {
      .googlemap iframe {
        height: 300px; } }

/* 検索結果　search-results
------------------------------------------------------------*/
.search-results-title {
  margin-bottom: 60px;
  padding-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
  font-feature-settings: "palt";
  line-height: 1.4em;
  border-bottom: solid 1px #333; }
  @media (max-width: 768px) {
    .search-results-title {
      margin-bottom: 30px;
      padding-bottom: 10px;
      font-size: 24px; } }
  @media (max-width: 500px) {
    .search-results-title {
      font-size: 20px; } }

.search-results-list li {
  padding: 15px 10px 15px 20px;
  border-bottom: dotted 1px #dbdbdb; }
  @media (max-width: 768px) {
    .search-results-list li {
      padding: 15px 0; } }
.search-results-list a {
  display: flex;
  align-items: center; }
  @media (max-width: 768px) {
    .search-results-list a {
      flex-wrap: wrap; } }
  .search-results-list a:hover {
    opacity: 0.6; }
.search-results-list img {
  width: 10px;
  height: auto;
  margin-left: 20px; }
  @media (max-width: 768px) {
    .search-results-list img {
      width: 8px; } }
.search-results-list div {
  width: calc(100% - 30px); }
  @media (max-width: 768px) {
    .search-results-list div {
      width: calc(100% - 28px); } }
.search-results-list .search-title {
  font-weight: bold;
  line-height: 1.6em; }
.search-results-list .search-text {
  margin-top: 10px;
  line-height: 1.6em; }

/*
------------------------------------------------------------
------------------------------------------------------------
調整
------------------------------------------------------------
------------------------------------------------------------*/
.none-top {
  margin-top: 0 !important;
  padding-top: 0 !important; }

.none-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important; }

.MB90-MB60 {
  margin-bottom: 90px; }
  @media (max-width: 768px) {
    .MB90-MB60 {
      margin-bottom: 60px; } }

.MB50-MB30 {
  margin-bottom: 50px; }
  @media (max-width: 768px) {
    .MB50-MB30 {
      margin-bottom: 30px; } }

/*PCとSPの非表示指示*/
@media screen and (min-width: 769px) {
  .pc-none {
    display: none !important; } }
@media (max-width: 768px) {
  .sp-none {
    display: none !important; } }

.sp-block {
  display: none; }
  @media (max-width: 500px) {
    .sp-block {
      display: block !important; } }

@media (max-width: 500px) {
  .only-sp-none {
    display: none !important; } }