@charset "UTF-8";
/* =============================================== */
/* reset */
/* =============================================== */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:wght@400;700&display=swap);
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, footer, header, nav, section, article, aside, canvas, figcaption, figure, address, em, img, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

ul, li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, select {
  vertical-align: middle; }

h1, h2, h3, h4, h5, h6, b, th {
  font-weight: inherit;
  font-size: inherit; }

address {
  font-style: normal; }

button {
  outline: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0; }

/* =============================================== */
/* screen */
/* =============================================== */
@media only screen and (max-width: 768px) {
  .scr-wide {
    display: none !important; } }

@media only screen and (min-width: 769px) {
  .scr-narrow {
    display: none !important; } }

.futura {
  font-family: futura-pt, sans-serif;
  font-weight: 400; }

/* =============================================== */
/* base */
/* =============================================== */
html {
  font-size: 10px; }

body {
  font-size: 1rem;
  line-height: 1;
  font-family: 'PT Sans', '游ゴシック Medium', YuGothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #3f4e64;
  position: relative;
  background: #fff;
  min-width: 320px; }

img {
  width: 100%;
  vertical-align: top;
/* pointer-events: none; */
  user-select: none; }

sup {
  font-size: 12px;
  line-height: 1; }

a {
  color: #3f4e64;
  text-decoration: none; }

.notTouchDevice a:hover {
  opacity: 0.8;
  transition: opacity 0.15s; }

/* =============================================== */
/* z-index */
/* =============================================== */
.header {
  z-index: 10000; }
  .header .logo {
    z-index: 0; }
  .header #header_menu {
    z-index: 1; }
  .header #menu_btn {
    z-index: 2; }

#loading {
  z-index: 20000; }

/* =============================================== */
/* loading */
/* =============================================== */
#loading {
  width: 100%;
  height: 100%;
  position: fixed;
  box-sizing: border-box;
  top: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff; }

.spinner {
  width: 28px;
  height: 28px;
  display: block;
  animation: spinner-rotate 0.5s linear infinite; }

@keyframes spinner-rotate {
  from {
    transform: rotate(-90deg); }
  to {
    transform: rotate(270deg); } }
.spinner .circle {
  box-sizing: border-box;
  width: 28px;
  height: 14px;
  overflow: hidden; }
.spinner .circle2 {
  transform: rotate(180deg); }
.spinner .circle .inner {
  box-sizing: border-box;
  transform: rotate(45deg);
  border-radius: 50%;
  border: 4px solid #7EA0C5;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  width: 100%;
  height: 200%; }
.spinner .circle1 .inner {
  animation: circle1 0.5s cubic-bezier(0.25, 0.1, 0.5, 1) alternate infinite; }
.spinner .circle2 .inner {
  animation: circle2 0.5s cubic-bezier(0.25, 0.1, 0.5, 1) alternate infinite; }

@keyframes circle1 {
  from {
    transform: rotate(205deg); }
  to {
    transform: rotate(60deg); } }
@keyframes circle2 {
  from {
    transform: rotate(-115deg); }
  to {
    transform: rotate(30deg); } }
#loading {
  transition: opacity 0.2s, visibility 0.2s; }

#loading.ready {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s 0.3s, visibility 0.6s 0.3s; }

.spinner_wrap {
  animation: loading_inner-in 0.2s linear forwards; }

.spinner_wrap.ready {
  animation: loading_inner-out 0.3s ease forwards; }

.spinner_wrap.ready .circle .inner {
  animation: loading_ready 0.3s forwards; }

@keyframes loading_inner-in {
  from {
    opacity: 0.5;
    transform: scale(1.2); }
  to {
    opacity: 1; } }
@keyframes loading_inner-out {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: scale(1.2); } }
@keyframes loading_ready {
  to {
    transform: rotate(45deg);
    border-width: 1px; } }
/* =============================================== */
/* base layout */
/* =============================================== */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.footer {
  margin-top: auto; }

@media only screen and (max-width: 900px) {
  .contents {
    margin-top: 50px; } }
/* =============================================== */
/* wrap */
/* =============================================== */
.cnt_a {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1309px;
  padding-left: 6%;
  padding-right: 6%; }

/* =============================================== */
/* body */
/* =============================================== */
@media only screen and (max-width: 900px) {
  html.lock {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll; }

  html.lock body {
    position: fixed;
    width: 100%;
    top: 0;
    height: auto; } }
/* =============================================== */
/* site_header - wide */
/* =============================================== */
@media only screen and (min-width: 901px) {
  .header {
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e8eaed; }
    .header .inner {
      box-sizing: border-box;
      height: 100px;
      width: 100%;
      max-width: 1212px;
      padding: 15px 30px;
      margin-left: auto;
      margin-right: auto; }
    .header .base {
      height: 100%;
      position: relative; }
    .header .logo {
      position: absolute;
      bottom: -2px;
      left: 0; }
      .header .logo a {
        display: block;
        width: 193px;
        height: 35px;
        background: url(../img/logo_simplyhario.svg) 50% 50% no-repeat;
        background-size: 100% auto;
        white-space: nowrap;
        text-indent: 100%;
        overflow: hidden; }
    .header .menu {
      height: 100%;
      position: absolute;
      top: 0;
      right: 0; }
    .header .menu_inner {
      height: 100%;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      align-items: flex-end; }
    .header .site_menu {
      display: flex; }
      .header .site_menu li {
        margin-left: 40px; }
      .header .site_menu a {
        font-size: 15px;
        letter-spacing: 0.05em; }
    .header .language_menu {
      display: flex; }
      .header .language_menu li {
        border-left: 1px solid #979faa;
        padding-left: 10px;
        margin-left: 10px; }
        .header .language_menu li:first-child {
          border: none; }
      .header .language_menu a {
        font-size: 12px;
        letter-spacing: 0.05em; }
    .header #menu_btn {
      display: none; } }
/* =============================================== */
/* site_header - narrow */
/* =============================================== */
@media only screen and (max-width: 900px) {
  .header {
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    position: fixed;
    top: 0;
    width: 100%; }
    .header .base {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative; }
    .header .logo {
      position: relative;
      bottom: -3px;
      left: 17px; }
      .header .logo a {
        display: block;
        width: 137px;
        height: 25px;
        background: url(../img/logo_simplyhario.svg) 0% 50% no-repeat;
        background-size: 100% auto;
        white-space: nowrap;
        text-indent: 100%;
        overflow: hidden; }

  #menu_btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    cursor: pointer;
    z-index: 100;
    overflow: hidden; }
    #menu_btn .icon {
      width: 22px;
      height: 18px;
      position: relative; }
    #menu_btn span {
      width: 21px;
      height: 2px;
      background: #3f4e64;
      display: block;
      position: absolute;
      transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

  #menu_btn .top {
    top: 0; }
  #menu_btn .mid {
    top: 8px; }
  #menu_btn .btm {
    top: 16px; }

  #menu_btn.active .top {
    transform: translateY(8px) rotate(135deg);
    width: 110%; }
  #menu_btn.active .mid {
    opacity: 0;
    transform: translateX(30px); }
  #menu_btn.active .btm {
    transform: translateY(-8px) rotate(225deg);
    width: 110%; }

  #header_menu {
    display: none; }

  #header_menu {
    background: white;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: block; }
    #header_menu .menu_inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center; }
    #header_menu .site_menu li {
      margin-top: 30px; }
    #header_menu .site_menu a {
      font-size: 20px;
      letter-spacing: 0.05em; }
    #header_menu .language_menu {
      display: inline-flex;
      margin-top: 50px; }
      #header_menu .language_menu li {
        border-right: 1px solid #979faa;
        padding: 0 10px; }
        #header_menu .language_menu li:last-child {
          border: none; }
      #header_menu .language_menu a {
        font-size: 13px;
        letter-spacing: 0.05em; }

  #header_menu {
    visibility: hidden;
    opacity: 0;
    z-index: -100; }
    #header_menu .menu_inner {
      transform: scale3d(0.9, 0.9, 1);
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

  #header_menu.active {
    visibility: visible;
    opacity: 1;
    z-index: 0; }
    #header_menu.active .menu_inner {
      transform: scale3d(1, 1, 1); }

  #header_menu {
    transition: opacity 0.15s linear, visibility 0.15s step-end, z-index 0.15s step-end, transform 0.3s; }

  #header_menu.active {
    transition: opacity 0.3s linear, visibility 0s, z-index 0s, transform 0.5s; } }
@media only screen and (max-width: 500px) {
  #header_menu .site_menu a {
    font-size: 18px; } }
/* =============================================== */
/* site_footer */
/* =============================================== */
.footer {
  background: #f3f7fc; }
  .footer .inner {
    box-sizing: border-box;
    max-width: 1212px;
    padding: 30px;
    margin-left: auto;
    margin-right: auto; }
  .footer .menu_list li {
    margin-top: 10px; }
  .footer .menu_list a {
    font-size: 12px; }
  .footer .sns_list {
    display: flex;
    margin-top: 15px; }
    .footer .sns_list li {
      margin-right: 7px; }
    .footer .sns_list .btn {
      display: block;
      width: 26px;
      height: 26px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
      white-space: nowrap;
      text-indent: 100%;
      overflow: hidden; }
    .footer .sns_list .facebook {
      background-image: url(../img/icon_facebook.svg); }
    .footer .sns_list .instagram {
      background-image: url(../img/icon_instagram.svg); }
    .footer .sns_list .youtube {
      background-image: url(../img/icon_youtube.svg); }
    .footer .sns_list .twitter {
      background-image: url(../img/icon_twitter.svg); }
  .footer .logo {
    text-align: center;
    margin-top: 30px; }
    .footer .logo a {
      display: inline-block;
      background: url(../img/logo_hario.svg) 50% 50% no-repeat;
      background-size: 100% auto;
      width: 90px;
      height: 18px;
      white-space: nowrap;
      text-indent: 100%;
      overflow: hidden; }
  .footer .copyright {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 14px; }
  @media only screen and (max-width: 768px) {
    .footer .inner {
      padding: 30px 6%; } }

/* =============================================== */
/* element */
/* =============================================== */
.sec_heading {
  font-size: 25px;
  line-height: 1.75;
  letter-spacing: 0.08em;
  margin-bottom: 2.2em; }

.sec_lead {
  font-size: 19px;
  line-height: 2;
  letter-spacing: 0.05em; }

.text_m {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.05em; }

.text_p {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.05em; }

@media only screen and (max-width: 768px) {
  .sec_heading {
    font-size: 22px;
    margin-bottom: 40px; }

  .sec_lead {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.02em; }

  .text_m {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.02em; }

    .text_p {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.02em; } }
/* =============================================== */
/* button */
/* =============================================== */
.btn_primary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  padding: 0.5em;
  letter-spacing: 0.1em;
  position: relative;
  cursor: pointer;
  background: #7EA0C5;
  border: 1px solid #7EA0C5;
  color: #fff;
  font-size: 16px;
  min-width: 300px; }
  .notTouchDevice .btn_primary:hover {
    opacity: 0.8;
    transition: opacity 0.15s; }
  @media only screen and (max-width: 374px) {
    .btn_primary {
      min-width: 100%; } }

/* =============================================== */
/* spacing */
/* =============================================== */
.mt_l {
  margin-top: 120px !important; }
  @media only screen and (max-width: 768px) {
    .mt_l {
      margin-top: 70px !important; } }

.mb_l {
  margin-bottom: 120px !important; }
  @media only screen and (max-width: 768px) {
    .mb_l {
      margin-bottom: 70px !important; } }

.pt_l {
  padding-top: 120px !important; }
  @media only screen and (max-width: 768px) {
    .pt_l {
      padding-top: 70px !important; } }

.pb_l {
  padding-bottom: 120px !important; }
  @media only screen and (max-width: 768px) {
    .pb_l {
      padding-bottom: 70px !important; } }

.mt_m {
  margin-top: 70px !important; }
  @media only screen and (max-width: 768px) {
    .mt_m {
      margin-top: 40px !important; } }

.mb_m {
  margin-bottom: 70px !important; }
  @media only screen and (max-width: 768px) {
    .mb_m {
      margin-bottom: 40px !important; } }

.pt_m {
  padding-top: 70px !important; }
  @media only screen and (max-width: 768px) {
    .pt_m {
      padding-top: 40px !important; } }

.pb_m {
  padding-bottom: 70px !important; }
  @media only screen and (max-width: 768px) {
    .pb_m {
      padding-bottom: 40px !important; } }

/* =============================================== */
/* top */
/* =============================================== */
.layout_a {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: cover;
  height: 550px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; }
  .layout_a .bg {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }

.layout_a_inner {
  display: flex;
  align-items: center; }
  .layout_a_inner .box {
    box-sizing: border-box;
    width: 350px;
    padding-top: 350px;
    background: rgba(255, 255, 255, 0.85);
    position: relative; }
  .layout_a_inner .box_inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 25px;
    position: absolute;
    top: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; }

@media only screen and (max-width: 650px) {
  .layout_a_inner {
    justify-content: center !important; } }
@media only screen and (max-width: 400px) {
  .layout_a {
    width: 100%;
    height: auto;
    padding-top: 133%;
    position: relative; }

  .layout_a_inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; }
    .layout_a_inner .box {
      width: 100%;
      padding-top: 100%; }
    .layout_a_inner .text_m {
      line-height: 2; } }
/* =============================================== */
.sec_mv .list {
  width: 100%;
  padding-top: 45%;
  position: relative;
  overflow: hidden; }
.sec_mv .slide {
  width: 100%;
  height: 100%;
  background: #eee;
  position: absolute;
  top: 0;
  overflow: hidden;
  display: flex;
  justify-content: center; }
  .sec_mv .slide img {
    display: block; }
.sec_mv .nav {
  display: flex;
  justify-content: center;
  margin-top: 10px; }
.sec_mv .dot {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; }
  .notTouchDevice .sec_mv .dot:hover {
    opacity: 0.8; }
  .sec_mv .dot:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8eaed; }
.sec_mv .dot.current:after {
  background: #7EA0C5; }
@media only screen and (max-width: 768px) {
  .sec_mv .list {
    padding-top: 66.6%; }
    .sec_mv .list img {
      width: auto;
      height: 100%; } }
.sec_mv .slide {
  z-index: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: z-index 0s step-end, opacity 1s step-end, transform 3s step-end; }
.sec_mv .slide.current {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  transition: z-index 0s, opacity 1s linear, transform 4.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.sec_overview {
  padding-top: 140px;
  padding-bottom: 140px;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .sec_overview {
      padding-top: 70px;
      padding-bottom: 80px; } }
  .sec_overview .sec_heading {
    letter-spacing: 0.02em; }
    .sec_overview .sec_heading .futura {
      font-size: 105%;
      letter-spacing: 0.06em; }
  .sec_overview .text_m {
    margin-top: 1.5em; }
  @media only screen and (max-width: 1000px) {
    .sec_overview .sec_lead {
      text-align: justify; }
    .sec_overview .text_m {
      text-align: justify; }
      .sec_overview .text_m br {
        display: none; } }
  .sec_overview .movie_area {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto; }
  .sec_overview .movie {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    box-shadow: 0px 0px 0px 1px #f2f2f2; }
    .sec_overview .movie iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .sec_overview .movie_play {
    width: 100%;
    height: 100%;
    background: url("../../img/movie_thumb.jpg") 50% 50% no-repeat;
    background-size: cover;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; }
    .sec_overview .movie_play:after {
      content: '';
      display: block;
      width: 8%;
      height: 13.4%;
      background: url(../img/btn_movie_play.svg) 50% 50% no-repeat;
      background-size: contain;
      opacity: 0; }
    .sec_overview .movie_play.ready:after {
      opacity: 1; }
    .notTouchDevice .sec_overview .movie_play:hover:after {
      opacity: 0.8;
      transition: opacity 0.15s; }
  .sec_overview .movie_play.played:after {
    opacity: 0 !important;
    transform: scale(1.05);
    transition: 1.2s linear; }
  .sec_overview .movie_play.played {
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s 1s linear, z-index 0.5s 1s step-end; }
  .sec_overview #yt_player {
    visibility: hidden; }
  .sec_overview #yt_player.played {
    visibility: visible; }

.sec_story .n01 .bg {
  background-image: url("../../img/story_bg_01.jpg"); }
.sec_story .n02 .bg {
  background-image: url("../../img/story_bg_02.jpg"); }
.sec_story .n03 .bg {
  background-image: url("../../img/story_bg_03.jpg"); }
.sec_story .n04 .bg {
  background-image: url("../../img/story_bg_04.jpg"); }
.sec_story .type_r .layout_a_inner {
  justify-content: flex-end; }

.sec_products {
  padding-top: 140px;
  padding-bottom: 140px;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .sec_products {
      padding-top: 70px;
      padding-bottom: 80px; } }
  .sec_products .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 80px; }
  .sec_products .item a {
    display: block; }
  .sec_products .item .pic {
    display: block; }
    .sec_products .item .pic img {
      width: 90%; }
  .sec_products .item .name {
    font-size: 15px;
    line-height: 1.5;
    margin-top: 0.3em; }
  @media only screen and (min-width: 1001px) {
    .sec_products .list {
      margin-bottom: -3.75%; }
    .sec_products .item {
      width: 17%;
      margin-right: 3.75%;
      margin-bottom: 3.75%; }
      .sec_products .item:nth-child(5n) {
        margin-right: 0; } }
  @media only screen and (max-width: 1000px) and (min-width: 769px) {
    .sec_products .list {
      margin-bottom: -5%; }
    .sec_products .item {
      width: 21.25%;
      margin-right: 5%;
      margin-bottom: 5%; }
      .sec_products .item:nth-child(4n) {
        margin-right: 0; } }
  @media only screen and (max-width: 768px) {
    .sec_products .list {
      justify-content: flex-start;
      margin-top: 40px; }
      .sec_products .list .name {
        font-size: 14px; } }
  @media only screen and (max-width: 768px) and (min-width: 551px) {
    .sec_products .list {
      margin-bottom: -5%; }
    .sec_products .item {
      width: 30%;
      margin-right: 5%;
      margin-bottom: 5%; }
      .sec_products .item:nth-child(3n) {
        margin-right: 0; } }
  @media only screen and (max-width: 550px) {
    .sec_products .list {
      margin-bottom: -5%; }
    .sec_products .item {
      width: 47.5%;
      margin-right: 5%;
      margin-bottom: 5%; }
      .sec_products .item:nth-child(2n) {
        margin-right: 0; } }

.sec_about .bg {
  background-image: url("../../img/about_bg.jpg"); }
.sec_about .box_inner {
  align-items: center; }
.sec_about .el_group {
  width: 100%; }
.sec_about .sec_heading {
  margin-top: 10%;
  margin-bottom: 10%; }
.sec_about .btn_primary {
  margin-top: 5%; }
@media only screen and (max-width: 650px) {
  .sec_about .box {
    margin-left: auto;
    margin-right: auto; } }
@media only screen and (max-width: 400px) {
  .sec_about .box {
    width: 100%;
    padding-top: 100%; }
  .sec_about .btn_primary {
    min-width: 100%; } }

.sec_news {
  padding-top: 140px;
  padding-bottom: 140px;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    .sec_news {
      padding-top: 70px;
      padding-bottom: 80px; } }
  .sec_news .sec_heading {
    margin-bottom: 80px; }
  .sec_news .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
  .sec_news .item {
    flex: 0 0 auto;
    width: 48%;
    text-align: left;
    margin-bottom: 50px; }
    .sec_news .item a {
      display: inline-flex; }
    .sec_news .item .pic {
      display: block;
      flex: 0 0 auto;
      width: 150px;
      margin-right: 20px; }
      .sec_news .item .pic img {
        display: block; }
    .sec_news .item .noimage {
      box-sizing: border-box;
      border: 1px solid #C8CED3;
      font-size: 15px;
      letter-spacing: 0.05em;
      color: #979faa;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .sec_news .item .text_group {
      font-size: 15px; }
    .sec_news .item time {
      color: #979faa;
      letter-spacing: 0.05em; }
    .sec_news .item h5 {
      line-height: 1.7;
      margin-top: 0.7em; }
  .sec_news #news_btn {
    margin-top: 20px; }
  .sec_news #news_btn.tr_enter {
    display: none; }
  .sec_news #news_btn.tr_end {
    display: none; }
  .sec_news #news_more {
    display: none; }
    .sec_news #news_more .list {
      opacity: 0; }
  .sec_news #news_more.tr_enter {
    display: block; }
  .sec_news #news_more.tr_end .list {
    opacity: 1;
    transition: opacity 1s 0.5s; }
  @media only screen and (max-width: 768px) {
    .sec_news .sec_heading {
      margin-bottom: 40px; }
    .sec_news .item {
      width: 100%;
      margin-bottom: 25px; }
      .sec_news .item .pic {
        width: 100px;
        height: 100px; }
      .sec_news .item .text_group {
        font-size: 14px; }
      .sec_news .item h5 {
        line-height: 1.5;
        margin-top: 0.5em; }
    .sec_news .item {
      width: 100%; } }

.page_top .contents {
  visibility: hidden; }

.page_top .contents.ready {
  visibility: visible; }

.animElm, .animEnd {
  -webkit-transform-style: preserve-3d; }

.fx_fadeIn {
  opacity: 0; }

.fx_fadeIn.animEnd {
  opacity: 1;
  transition: 1s;
  transition-property: opacity; }

/*---------------------*/
.fx_slideUp {
  opacity: 0;
  transform: translate(0, 20px); }

.fx_slideUp.animEnd {
  opacity: 1;
  transform: translate(0, 0);
  transition: 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity; }

.fx_layout_a .bg {
  opacity: 0;
  transform: scale(1.03); }
.fx_layout_a .box {
  opacity: 0;
  transform: translate(0, 15px); }
.fx_layout_a .box_inner {
  opacity: 0;
  transform: scale(1.05); }

.fx_layout_a.animEnd .bg {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s linear, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
.fx_layout_a.animEnd .box {
  opacity: 1;
  transform: translate(0, 0);
  transition: 1s 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity; }
.fx_layout_a.animEnd .box_inner {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s 1.5s linear, transform 1s 1.55s cubic-bezier(0.165, 0.84, 0.44, 1); }

/* =============================================== */
/* news_detail */
/* =============================================== */
.sec_news_detail {
  padding-bottom: 140px; }
  .sec_news_detail .image_full {
    width: 100%; }
  .sec_news_detail .pic_m {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px; }
  .sec_news_detail .text_group {
    margin-top: 100px; }
  .sec_news_detail .inner {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto; }
  .sec_news_detail time {
    font-size: 15px;
    color: #979faa; }
  .sec_news_detail .title {
    font-size: 19px;
    line-height: 2;
    letter-spacing: 0.05em;
    margin-top: 1em; }
  .sec_news_detail .text_m {
    margin-top: 3em; }
  .sec_news_detail .btn {
    text-align: center;
    margin-top: 60px; }
  @media only screen and (max-width: 768px) {
    .sec_news_detail {
      padding-bottom: 80px; }
      .sec_news_detail .pic_m {
        margin-top: 70px; }
      .sec_news_detail .text_group {
        margin-top: 70px; }
      .sec_news_detail .title {
        font-size: 17px;
        line-height: 2;
        letter-spacing: 0.02em; } }

/* =============================================== */
/* edit */
/* =============================================== */
.txc {
  text-align: center; }

.txl {
  text-align: left; }

.txr {
  text-align: right; }

.nowrap {
  white-space: nowrap; }

.preline {
  white-space: pre-line; }

.underline {
  text-decoration: underline; }

.ml1em {
  margin-left: 1em; }

.mt0 {
  margin-top: 0 !important; }

strong {
  font-weight: bold; }

.color_main_02 {
  color: #B30000 !important; }