@charset "UTF-8";
/**************************
Compass Text Replacement
*/
/**************************
Inline List
*/
/**************************
Inline Block List
*/
/**************************
horizontal-list
*/
/**************************
Bullets
*/
/* simple clearfix */
/**************************
@mixin for sprite
*/
@keyframes fade-in {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }
@keyframes fade-out {
  0% {
    display: block;
    opacity: 1; }
  99% {
    display: block;
    opacity: 0; }
  100% {
    display: none;
    opacity: 0; } }
@keyframes zoom-in {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }
@keyframes zoom-in-2 {
  0% {
    transform: scale(0); }
  80% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }
@keyframes zoom-in-3 {
  0% {
    transform: scale(0);
    opacity: 0; }
  49% {
    transform: scale(0.8);
    opacity: 0; }
  50% {
    transform: scale(0.9);
    opacity: 0; }
  60% {
    transform: scale(1.05);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes zoom-in-4 {
  0% {
    transform: scale(0);
    opacity: 0; }
  80% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes zoom-in-5 {
  0% {
    transform: scale(0);
    opacity: 0; }
  1% {
    transform: scale(0.8);
    opacity: 0; }
  2% {
    transform: scale(0.9);
    opacity: 0; }
  20% {
    transform: scale(1.05);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes zoom-in-6 {
  0% {
    transform: scale(0);
    opacity: 0; }
  1% {
    transform: scale(0.8);
    opacity: 0; }
  2% {
    transform: scale(0.9);
    opacity: 0; }
  20% {
    transform: scale(1.2);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes zoom-in-hover {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }
@keyframes gnav_sub {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-5%); }
  100% {
    transform: scale(1) translateY(0); } }
@keyframes _on_opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes scrol_to_top_image {
  0% {
    top: 0; }
  10% {
    top: -9px; }
  12% {
    top: -10px; }
  14% {
    top: -9px; }
  20% {
    top: 0; }
  30% {
    top: -9px; }
  32% {
    top: -10px; }
  34% {
    top: -9px; }
  40% {
    top: 0; } }
@keyframes sp_menu_panel {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }
@keyframes left-slide-in {
  0% {
    display: none;
    transform: translateX(-10%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(-10%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
@keyframes right-slide-in {
  0% {
    display: none;
    transform: translateX(10%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(10%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
@keyframes left-slide-in-2 {
  0% {
    display: none;
    transform: translateX(-30%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(-30%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
@keyframes right-slide-in-2 {
  0% {
    display: none;
    transform: translateX(30%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(30%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
@keyframes bg_slide_show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes imessage_title_show {
  0% {
    transform: translateY(30px); }
  100% {
    transform: translateY(0); } }
@keyframes imap_show {
  0% {
    transform: scale(0.9);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes hero_bg {
  0% {
    bottom: -130px;
    background-position: 0 0; }
  40% {
    bottom: -100px; }
  60% {
    background-position: -100px 0; }
  80% {
    bottom: -115px; }
  100% {
    bottom: -130px;
    background-position: 0 0; } }
@keyframes hero_bg2 {
  0% {
    bottom: -150px;
    background-position: -100px 0; }
  30% {
    bottom: -130px; }
  50% {
    background-position: 0 0; }
  100% {
    bottom: -150px;
    background-position: -100px 0; } }
@keyframes hero_bg_sp {
  0% {
    bottom: -25px;
    background-position: 0 0; }
  40% {
    bottom: -15px; }
  60% {
    background-position: -40px 0; }
  80% {
    bottom: -20px; }
  100% {
    bottom: -25px;
    background-position: 0 0; } }
@keyframes hero_bg2_sp {
  0% {
    bottom: -10px;
    background-position: -80px 0; }
  30% {
    bottom: -6px; }
  50% {
    background-position: 0 0; }
  100% {
    bottom: -10px;
    background-position: -80px 0; } }
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px); }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px); } }
@keyframes fade-in-2 {
  0% {
    display: none;
    opacity: 0;
    transform: translateY(15%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateY(15%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateY(0); } }
@keyframes fade-in-3 {
  0% {
    display: none;
    opacity: 0;
    transform: translateX(15%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(15%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
@keyframes fade-in-4 {
  0% {
    display: none;
    opacity: 0;
    transform: translateX(-15%); }
  1% {
    display: block;
    opacity: 0;
    transform: translateX(-15%); }
  100% {
    display: block;
    opacity: 1;
    transform: translateX(0); } }
/***********************************************************************
 ***********************************************************************
 ***********************************************************************
## Layout
*/
body {
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
  min-width: 1000px;
  background-color: #ebf4d3; }

.wrapper {
  width: auto;
  min-width: 1000px; }

.root {
  min-width: 1000px;
  box-sizing: border-box; }
  .root .gnavmenulink.pc_none {
    display: none !important; }

.root .gnav .gnav_none {
  display: none !important; }

.pc_container,
.pc_tb_container,
.container {
  width: 1000px;
  min-width: 1000px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto; }
  .pc_container-relative,
  .pc_tb_container-relative,
  .container-relative {
    position: relative;
    top: 0;
    left: 0; }
  .pc_container-sm,
  .pc_tb_container-sm,
  .container-sm {
    width: 500px;
    min-width: 500px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto; }
  .pc_container-sm2,
  .pc_tb_container-sm2,
  .container-sm2 {
    width: 300px;
    min-width: 300px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto; }

.pc_padding,
.padding {
  padding-left: 0;
  padding-right: 0; }

.main_wrapper {
  position: relative;
  z-index: 1;
  margin-bottom: 100px;
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 40px;
  padding-bottom: 100px;
  background-color: #fff;
  border-radius: 10px;
  min-height: 800px; }

.main_column {
  order: 1;
  width: 670px;
  box-sizing: border-box; }

.sub_column {
  order: 2;
  width: 210px;
  box-sizing: border-box;
  padding-top: 25px; }

.main_content {
  font-size: 0.938rem;
  padding-left: 0;
  padding-right: 0; }

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Utility - Cosmetic

ユーティリティー設定。
このサイト専用というわけでもない共通設定。

*/
.pc_none,
.root .pc_none {
  display: none; }

.block,
.pc_block {
  display: block; }

.tel_link, .tel_link-no {
  pointer-events: none;
  cursor: default;
  color: inherit; }
  .root .tel_link, .root .tel_link:hover,
  .root .tel_link-no, .root .tel_link-no:hover {
    text-decoration: none;
    color: inherit; }

.sp_click,
.pc_no_click {
  pointer-events: none;
  cursor: default; }

/***********************************************************************
 ***********************************************************************
 ***********************************************************************



## Component - Base

コンポーネント設定。
各ページでよく使い回す記述。
このサイト専用の共通設定。

*/
/**************************

## - 段組設定 2列 3列 4列

PCの時だけ、中央に等間隔で余白を作り、width: 100%; を守って列になる。
ul でなくてもいい。

**2列 .pc_column2**

	<ul class="pc_column2">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**3列 .pc_column3**

	<ul class="pc_column3">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

**4列 .pc_column4**

	<ul class="pc_column4">
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
		<li>コンテンツ</li>
	</ul>

*/
.pc_column2::before, .pc_column2::after {
  content: '';
  display: table; }
.pc_column2::after {
  clear: both; }
.pc_column2 > * {
  width: 50%;
  float: left;
  box-sizing: border-box; }
.pc_column2 > *:nth-child(2n + 1) {
  clear: left;
  padding-right: 10px; }
.pc_column2 > *:nth-child(2n) {
  padding-left: 10px; }

.pc_column3::before, .pc_column3::after {
  content: '';
  display: table; }
.pc_column3::after {
  clear: both; }
.pc_column3 > * {
  width: 33.3333333333%;
  float: left;
  box-sizing: border-box; }
.pc_column3 > *:nth-child(3n + 1) {
  clear: left;
  padding-right: 13px; }
.pc_column3 > *:nth-child(3n + 2) {
  padding-left: 7px;
  padding-right: 7px; }
.pc_column3 > *:nth-child(3n) {
  padding-left: 13px; }

.pc_column4::before, .pc_column4::after {
  content: '';
  display: table; }
.pc_column4::after {
  clear: both; }
.pc_column4 > * {
  width: 25%;
  float: left;
  box-sizing: border-box; }
.pc_column4 > *:nth-child(4n + 1) {
  clear: left;
  padding-right: 15px; }
.pc_column4 > *:nth-child(4n + 2) {
  padding-left: 5px;
  padding-right: 10px; }
.pc_column4 > *:nth-child(4n + 3) {
  padding-left: 10px;
  padding-right: 5px; }
.pc_column4 > *:nth-child(4n) {
  padding-left: 15px; }

.set::before, .set::after {
  content: '';
  display: table; }
.set::after {
  clear: both; }
.set .resize.right {
  width: 100%;
  box-sizing: border-box;
  float: right;
  padding-left: 330px;
  margin-left: -300px; }
.set .fix.left {
  width: 300px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: left; }
.set .resize.left {
  width: 100%;
  box-sizing: border-box;
  float: left;
  padding-right: 330px;
  margin-right: -300px; }
.set .fix.right {
  width: 300px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: right; }
.set .fix > img:not(.cancel),
.set .resize > img:not(.cancel) {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; }
.set-2 .resize.right {
  width: 100%;
  box-sizing: border-box;
  float: right;
  padding-left: 220px;
  margin-left: -200px; }
.set-2 .fix.left {
  width: 200px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: left; }
.set-2 .resize.left {
  width: 100%;
  box-sizing: border-box;
  float: left;
  padding-right: 220px;
  margin-right: -200px; }
.set-2 .fix.right {
  width: 200px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: right; }
.set-3 .resize.right {
  width: 100%;
  box-sizing: border-box;
  float: right;
  padding-left: 260px;
  margin-left: -240px; }
.set-3 .fix.left {
  width: 240px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: left; }
.set-3 .resize.left {
  width: 100%;
  box-sizing: border-box;
  float: left;
  padding-right: 260px;
  margin-right: -240px; }
.set-3 .fix.right {
  width: 240px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  float: right; }

/***********************************************************************
 ***********************************************************************
 ***********************************************************************

## Project

特定ページ専用、効果範囲が限定的な記述。
コンテンツ内容に密接で、汎用性がなく、機能の付け替えを想定していない。

*/
.header_container {
  height: 300px; }

.header {
  box-sizing: border-box;
  height: 300px; }
  .header > .container {
    position: relative; }
  .header__1 {
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding-top: 15px; }
    .header__1__2 {
      display: flex;
      justify-content: flex-end; }
  .header__3 {
    padding-top: 60px; }
  .header__logo {
    width: 190px;
    position: relative; }
  .header__fontsize {
    display: flex;
    align-items: center;
    margin-right: 15px; }
    .header__fontsize .label {
      font-size: 14px;
      margin-right: 5px;
      width: 70px; }
  .header__search {
    width: 140px;
    display: flex;
    align-items: center; }
  .header__link_list_area {
    display: flex;
    align-items: center; }
  .header__link_list {
    display: flex; }
    .header__link_list > li {
      margin-left: 30px; }
  .header__link {
    display: block;
    font-size: 14px;
    color: #000;
    padding-left: 10px;
    position: relative; }
    .header__link:hover {
      text-decoration: none;
      opacity: 0.7;
      transition: 0.2s opacity; }
    .header__link::before {
      content: '';
      display: block;
      background: url("/common/img/header/link_arrow.png") 0 0 no-repeat transparent;
      background-size: 5px 8px;
      width: 5px;
      height: 8px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin-top: auto;
      margin-bottom: auto; }
  .header.header-fixed {
    background-color: #fff;
    position: fixed;
    height: 70px;
    box-shadow: 0px 0px 2px #e5e5e5;
    transform: translateY(-100px);
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-name: header_fixed;
    animation-fill-mode: forwards; }
    .header.header-fixed .gnavmenu {
      padding-top: 50px; }
    .header.header-fixed .gnavlist {
      position: static; }
    .header.header-fixed .gnavlink__title {
      display: none; }
    .header.header-fixed .gnavlink__title-fixed {
      display: block; }
@keyframes header_fixed {
  0% {
    transform: translateY(-100px);
    display: none; }
  1% {
    transform: translateY(-100px);
    display: block; }
  100% {
    transform: translateY(0);
    display: block; } }
    .header.header-fixed > .container {
      display: flex;
      justify-content: space-between;
      position: relative; }
    .header.header-fixed .header__1__2 {
      display: none; }
    .header.header-fixed .header__2 {
      display: none; }
    .header.header-fixed .header__3 {
      padding-top: 7px; }
    .header.header-fixed .gnavlink {
      position: static;
      border-radius: 50%;
      background-image: none !important;
      margin-top: 0 !important;
      height: auto !important;
      width: 120px !important; }
      .header.header-fixed .gnavlink__image {
        top: 0 !important;
        width: 40px !important;
        height: auto !important; }
      .header.header-fixed .gnavlink__title {
        top: 0 !important;
        width: 120px !important;
        margin-left: auto;
        margin-right: auto; }
  .header .gnavmenu {
    padding-top: 20px;
    display: none;
    position: absolute;
    z-index: 2;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    animation-iteration-count: 1;
    transform-origin: top left;
    left: 0; }
@keyframes gnav_show {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    opacity: 0.3; }
  100% {
    display: block;
    opacity: 1; } }
    .header .gnavmenu:hover {
      display: block; }
    .header .gnavmenu a:not(.gnavmenulink) {
      display: none; }
  .header .gnavmenulist {
    position: relative;
    text-align: center;
    padding: 30px 30px 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    box-shadow: 10px 10px 30px 0 rgba(117, 99, 65, 0.5);
    border-radius: 50px; }
    .header .gnavmenulist::before {
      content: '';
      display: block;
      position: absolute;
      width: 30px;
      height: 40px;
      top: -39px;
      background-image: url("/common/img/header/fukidashi_arrow.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute; }
    .header .gnavmenulist a:not(.gnavmenulink) {
      display: none !important; }
    .header .gnavmenulist * {
      display: inline !important; }
  .header .gnavmenulink {
    display: inline-block !important;
    vertical-align: top;
    width: 100px;
    padding: 3px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px; }
    .header .gnavmenulink:hover .gnavmenulink__image {
      transform: scale(1.05); }
    .header .gnavmenulink:hover .gnavmenulink__title {
      opacity: 0.7; }
    .header .gnavmenulink__image {
      display: block !important;
      transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
      margin-bottom: 5px; }
      .header .gnavmenulink__image > .img {
        display: block !important;
        border: solid 2px #c7bfbf; }
    .header .gnavmenulink__title {
      text-align: center;
      display: block !important;
      line-height: 1.3;
      font-size: 12px !important; }
      .header .gnavmenulink__title > .text {
        font-size: 12px !important;
        text-align: left !important;
        display: inline-block !important;
        transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
        font-size: 0.813rem; }
  .header .gnavlist {
    display: flex;
    justify-content: space-between;
    position: relative; }
    .header .gnavlist > li {
      position: relative; }
    .header .gnavlist > li:nth-child(1) .gnavmenu::before {
      top: 43px;
      left: 100px;
      transform: rotate(-18deg); }
    .header .gnavlist > li:nth-child(2) .gnavmenu::before {
      top: -1px;
      left: 220px;
      transform: rotate(3deg); }
    .header .gnavlist > li:nth-child(3) .gnavmenu::before {
      top: -7px;
      left: 390px;
      transform: rotate(8deg); }
    .header .gnavlist > li:nth-child(4) .gnavmenu::before {
      top: -9px;
      left: 560px;
      transform: rotate(8deg); }
    .header .gnavlist > li:nth-child(5) .gnavmenu::before {
      top: 0;
      left: 740px;
      transform: rotate(15deg); }
    .header .gnavlist > li:nth-child(6) .gnavmenu::before {
      top: 19px;
      left: 880px;
      transform: rotate(18deg); }
    .header .gnavlist > li:nth-child(1) > .gnavlink {
      background-image: url("/common/img/header/gnav01_bg.png"); }
      .header .gnavlist > li:nth-child(1) > .gnavlink .gnavmenu {
        top: 140px; }
    .header .gnavlist > li:nth-child(2) > .gnavlink {
      background-image: url("/common/img/header/gnav02_bg.png");
      margin-top: 40px; }
      .header .gnavlist > li:nth-child(2) > .gnavlink .gnavmenu {
        top: 180px; }
    .header .gnavlist > li:nth-child(3) > .gnavlink {
      background-image: url("/common/img/header/gnav03_bg.png"); }
      .header .gnavlist > li:nth-child(3) > .gnavlink .gnavmenu {
        top: 140px; }
    .header .gnavlist > li:nth-child(4) > .gnavlink {
      background-image: url("/common/img/header/gnav04_bg.png");
      margin-top: 40px; }
      .header .gnavlist > li:nth-child(4) > .gnavlink .gnavmenu {
        top: 180px; }
    .header .gnavlist > li:nth-child(5) > .gnavlink {
      background-image: url("/common/img/header/gnav05_bg.png"); }
      .header .gnavlist > li:nth-child(5) > .gnavlink .gnavmenu {
        top: 140px; }
      .header .gnavlist > li:nth-child(5) > .gnavlink .gnavlink__title {
        top: -10px; }
    .header .gnavlist > li:nth-child(6) > .gnavlink {
      background-image: url("/common/img/header/gnav06_bg.png");
      margin-top: 40px; }
      .header .gnavlist > li:nth-child(6) > .gnavlink .gnavmenu {
        top: 180px; }
      .header .gnavlist > li:nth-child(6) > .gnavlink .gnavlink__title {
        top: -10px; }
  .header .gnavlink {
    display: block;
    width: 140px;
    height: 140px;
    background-size: 140px;
    background-repeat: no-repeat; }
    .header-fixed .header .gnavlink-agriculture + .gnavmenu {
      left: -160px; }
      .header-fixed .header .gnavlink-agriculture + .gnavmenu .gnavmenulist::before {
        transform: scale(-1, 1);
        left: 210px; }
    .header-fixed .header .gnavlink-jabank + .gnavmenu {
      left: -10px; }
      .header-fixed .header .gnavlink-jabank + .gnavmenu .gnavmenulist::before {
        transform: scale(-1, 1);
        left: 60px; }
    .header-fixed .header .gnavlink-jakyousai + .gnavmenu {
      left: -130px; }
      .header-fixed .header .gnavlink-jakyousai + .gnavmenu .gnavmenulist::before {
        transform: scale(-1, 1);
        left: 180px; }
    .header-fixed .header .gnavlink-useful + .gnavmenu {
      left: -520px; }
      .header-fixed .header .gnavlink-useful + .gnavmenu .gnavmenulist::before {
        left: 570px; }
    .header-fixed .header .gnavlink-store + .gnavmenu {
      left: -570px; }
      .header-fixed .header .gnavlink-store + .gnavmenu .gnavmenulist::before {
        left: 610px; }
    .header-fixed .header .gnavlink-about + .gnavmenu {
      left: -260px; }
      .header-fixed .header .gnavlink-about + .gnavmenu .gnavmenulist::before {
        left: 300px; }
    .header .gnavlink-agriculture + .gnavmenu {
      width: 780px; }
      .header .gnavlink-agriculture + .gnavmenu .gnavmenulist::before {
        left: 40px;
        transform: scale(-1, 1); }
    .header .gnavlink-jabank + .gnavmenu {
      width: 780px; }
      .header .gnavlink-jabank + .gnavmenu .gnavmenulist::before {
        left: 40px;
        transform: scale(-1, 1); }
    .header .gnavlink-jakyousai + .gnavmenu {
      width: 610px; }
      .header .gnavlink-jakyousai + .gnavmenu .gnavmenulist::before {
        left: 40px;
        transform: scale(-1, 1); }
    .header .gnavlink-useful + .gnavmenu {
      left: -430px;
      width: 890px; }
      .header .gnavlink-useful + .gnavmenu .gnavmenulist::before {
        left: 480px; }
    .header .gnavlink-store + .gnavmenu {
      width: 750px;
      left: -570px; }
      .header .gnavlink-store + .gnavmenu .gnavmenulist::before {
        left: 630px; }
    .header .gnavlink-about + .gnavmenu {
      width: 610px;
      left: -440px; }
      .header .gnavlink-about + .gnavmenu .gnavmenulist::before {
        left: 490px; }
    .header .gnavlink__image {
      width: 80px;
      height: 80px;
      top: -15px;
      margin-left: auto;
      margin-right: auto;
      position: relative; }
    .header .gnavlink__title {
      width: 140px;
      position: relative;
      transition: transform 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); }
      .header .gnavlink__title-fixed {
        display: none;
        height: 15px; }
        .header .gnavlink__title-fixed .img {
          max-height: 100%;
          max-width: auto; }
    .header .gnavlink:hover + .gnavmenu {
      display: block;
      animation-name: gnav_show; }
    .header .gnavlink:hover .gnavlink__title {
      transform: scale(1.1); }
    .header .gnavlink:hover .gnavlink__title-fixed {
      transform: scale(1.1); }
    .header .gnavlink:hover .gnavlink__image {
      animation-iteration-count: 1;
      animation-name: gnavi_img;
      animation-duration: .25s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      transform-origin: center; }
@keyframes gnavi_img {
  0% {
    transform: scale(1) translateY(0); }
  50% {
    transform: scale(1) translateY(-20%); }
  100% {
    transform: scale(1.2) translateY(-10%); } }
.header_chara_container .container {
  position: relative; }

.header_chara {
  width: 140px;
  position: absolute;
  top: 140px;
  left: 100vw;
  z-index: 0;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-name: header_chara_init;
  animation-fill-mode: forwards; }
@keyframes header_chara_init {
  0% {
    top: 140px;
    left: 100vw; }
  50% {
    top: 300px; }
  90% {
    top: 100px;
    left: -150px; }
  98% {
    top: 145px; }
  100% {
    top: 140px;
    left: -150px; } }
  .header_chara .img {
    left: -150px;
    top: 140px;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: header_chara;
    animation-fill-mode: forwards; }
@keyframes header_chara {
  0% {
    transform: translateY(5px); }
  100% {
    transform: translateY(-5px); } }