@charset "UTF-8";
/***********************************************************************
media queries setting
**********************************************************************/
/***********************************************************************
nav
**********************************************************************/
/*.gloval-nav{
	
	& > ul{
			
		& > li{
            margin: 0 0 1.5em;
            position: relative;

			a{
				color: #fff;
                position: relative;
                display: inline-block;
                transition: 0.5s;
                
				&:hover{
					color: #fff;
				}
			}
		}
	}
    .btn-wrapper{
        background: none;
        margin: auto;
    }
}

@include sp{
	.gloval-nav{
        ul{
			li:nth-child(1){
				margin-bottom: 0!important;
			}
            li:nth-child(1),
            li:nth-child(2){
                a{
                    color: #fff!important;
                    padding: 6px 24px;
                    font-size: 16px;
                }
            }
        }
	}
}
.page{
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        padding: 1rem 0 2rem;
        position: relative;
        width: 95%;
        z-index: 9;
        
        .page-logo{
            max-width: 196px;
            width: 15%;
            
            @include middle{
                width: 10%;
            }
            
            @include sp{
                width: 103px;
            }
        }
    }
    .fixed-menu{
        .btn-wrapper{
            padding: 0 0;
        }
    }
    #pc-gloval-nav{
        .gloval-nav{

            & > ul{

                & > li{
                    display: inline-block;
                    margin: 0 0 0em;
                    position: relative;

                    @media screen and (max-width: 1160px) {
                        font-size: 13px;
                    }

                    & + li{
                        margin-left: 2rem;

                        @media screen and (max-width: 1160px) {
                            margin-left: 1rem;
                        }
                    }

                    &:last-child{
                        img{
                            height: 32px;

                            @media screen and (max-width: 1160px) {
                                height: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
}*/
/*.page{
    #pc-gloval-nav{
        position: relative;
        top: auto;
        left: auto;
        opacity: 1;
        animation: inherit;
    }
}*/
#nav-toggle {
  z-index: 99999; }

#nav-toggle {
  background: transparent;
  position: fixed;
  top: 27px;
  right: 45px;
  border: 1px solid #ffd1e2;
  border-radius: 25px;
  padding: .75em 2.25em;
  cursor: pointer;
  transition: .5s;
  display: flex; }
  @media (max-width: 768px) {
    #nav-toggle {
      top: 16px;
      right: 14px;
      padding: .5em 1.75em; } }
  #nav-toggle .menu {
    margin-right: 15px; }
    #nav-toggle .menu img {
      width: clamp(56px, 6.666666vw, 80px); }
  #nav-toggle > .bar {
    position: relative;
    width: 38px; }
    @media (max-width: 768px) {
      #nav-toggle > .bar {
        width: 18px; } }
  #nav-toggle span {
    width: 100%;
    height: 1px;
    left: 0;
    display: block;
    background: #ffd1e2;
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease; }
    #nav-toggle span:nth-child(1) {
      top: 0; }
    #nav-toggle span:nth-child(2) {
      top: 7px; }
      @media (max-width: 768px) {
        #nav-toggle span:nth-child(2) {
          top: 5.5px; } }
    #nav-toggle span:nth-child(3) {
      top: 14px; }
      @media (max-width: 768px) {
        #nav-toggle span:nth-child(3) {
          top: 11px; } }
  @media (hover: hover) and (pointer: fine) {
    #nav-toggle:hover span:nth-child(1) {
      top: -4px; } }
  @media (hover: hover) and (pointer: fine) and (max-width: 768px) {
    #nav-toggle:hover span:nth-child(1) {
      top: 0; } }
  @media (hover: hover) and (pointer: fine) {
    #nav-toggle:hover span:nth-child(2) {
      top: 7px; }
    #nav-toggle:hover span:nth-child(3) {
      top: 18px; } }
  @media (hover: hover) and (pointer: fine) and (max-width: 768px) {
    #nav-toggle:hover span:nth-child(3) {
      top: 14px; } }

  #nav-toggle .menu {
    line-height: 0; }
  #nav-toggle.nav-toggle-bg {
    background: #00483d;
    border-color: #00483d; }

/*.people{
    #nav-toggle.nav-toggle-bg{
        background: none;
        border-color: #fff;
    }
}*/
.open #nav-toggle.nav-toggle-bg {
  background: transparent;
  border-color: #ffd1e2; }
.open #nav-toggle span:nth-child(1) {
  top: 8px;
  transform: rotate(24deg); }
  @media (max-width: 768px) {
    .open #nav-toggle span:nth-child(1) {
      top: 4px; } }
.open #nav-toggle span:nth-child(2) {
  display: none; }
.open #nav-toggle span:nth-child(3) {
  top: 8px;
  transform: rotate(-24deg); }
  @media (max-width: 768px) {
    .open #nav-toggle span:nth-child(3) {
      top: 4px; } }

/************展開メニュー外側******************/
#gloval-nav {
  background: url("../images/common/menu-back.jpg") repeat 0 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  min-height: 760px;
  visibility: hidden;
  opacity: 0;
  /*visibility: visible;
  opacity: 1;*/
  transition: opacity .6s ease, visibility .6s ease; }
  @media (max-width: 768px) {
    #gloval-nav {
      overflow-y: auto;
      padding: 6em 0em 1em;
      min-height: inherit; } }

.open #gloval-nav {
  visibility: visible;
  opacity: 1; }

/************展開メニュー装飾******************/
#gloval-nav {
  /*nav-inner*/
  /*left-right-wrapper*/
  /*left-wrapper*/
  /*right-wrapper*/
  /*mokuji-inner*/
  /*mokuji*/ }
  #gloval-nav .nav-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 95%; }
    @media (max-width: 560px) {
      #gloval-nav .nav-inner {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: auto;
        width: 90%; } }
    #gloval-nav .nav-inner .head {
      margin: auto;
      width: min(39.1666vw, 470px); }
      @media (max-width: 768px) {
        #gloval-nav .nav-inner .head {
          width: 65.0666666vw; } }
    #gloval-nav .nav-inner .sub-head {
      margin: .75em auto 0;
      width: min(33.33333vw, 400px); }
      @media (max-width: 768px) {
        #gloval-nav .nav-inner .sub-head {
          margin-top: .25em;
          width: 68.8vw; } }
  #gloval-nav .left-right-wrapper {
    display: flex;
    gap: 2%;
    margin-top: min(3vw, 36px);
    /*text-link*/ }
    @media (max-width: 965px) {
      #gloval-nav .left-right-wrapper {
        display: inherit; } }
    @media (max-width: 768px) {
      #gloval-nav .left-right-wrapper {
        margin-top: 18px; } }
    #gloval-nav .left-right-wrapper .text-link {
      text-align: center;
      /*a*/ }
      #gloval-nav .left-right-wrapper .text-link a {
        background: #d9dd1a;
        border-bottom: 8px solid #fff;
        display: block;
        padding: .5em 0;
        width: 100%;
        transition: .3s; }
        @media (max-width: 965px) {
          #gloval-nav .left-right-wrapper .text-link a {
            border-bottom-width: 2px; } }
        #gloval-nav .left-right-wrapper .text-link a .text-inner {
          background: url("../images/common/nav-arrow-long.svg") no-repeat 0 center;
          background-size: min(4vw, 48px), min(1.1666666vw, 14px);
          color: #00483d;
          font-size: min(2.5vw, 30px);
          font-family: "Shippori Mincho", serif;
          font-weight: 700;
          padding-left: min(5.3333vw, 64px);
          margin-left: .25em;
          transition: .2s; }
          @media (max-width: 768px) {
            #gloval-nav .left-right-wrapper .text-link a .text-inner {
              font-size: 16px;
              background-size: 26px 7px;
              padding-left: 40px; } }
        @media (hover: hover) and (pointer: fine) {
          #gloval-nav .left-right-wrapper .text-link a:hover {
            background: #eef09c; }
            #gloval-nav .left-right-wrapper .text-link a:hover .text-inner {
              background-position: 5px center; } }
    #gloval-nav .left-right-wrapper .nav-slider-wrapper {
      margin-top: 12px; }
      @media (max-width: 965px) {
        #gloval-nav .left-right-wrapper .nav-slider-wrapper {
          display: none; } }
      #gloval-nav .left-right-wrapper .nav-slider-wrapper ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2%; }
        #gloval-nav .left-right-wrapper .nav-slider-wrapper ul li {
          position: relative;
          margin-top: 2%;
          width: 49%; }
          #gloval-nav .left-right-wrapper .nav-slider-wrapper ul li img {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 2.5s ease; }
            #gloval-nav .left-right-wrapper .nav-slider-wrapper ul li img.active {
              opacity: 1;
              position: relative; }
  #gloval-nav .left-wrapper {
    flex: 1;
    width: 49%; }
    @media (max-width: 965px) {
      #gloval-nav .left-wrapper {
        width: 100%; } }
  #gloval-nav .right-wrapper {
    flex: 1;
    width: 49%; }
    @media (max-width: 965px) {
      #gloval-nav .right-wrapper {
        margin-top: 1em;
        width: 100%; } }
  #gloval-nav .mokuji-inner {
    background: #f3f3ef;
    padding: 1em 1.5em; }
    @media (max-width: 768px) {
      #gloval-nav .mokuji-inner {
        padding: 1em .75em; } }
    #gloval-nav .mokuji-inner .head-wrapper {
      display: flex;
      gap: 0 2%;
      align-items: center;
      justify-content: center; }
      @media (max-width: 965px) {
        #gloval-nav .mokuji-inner .head-wrapper {
          display: inherit; } }
    #gloval-nav .mokuji-inner .head {
      color: #735029;
      font-size: min(1.32231vw, 16px);
      font-weight: 700;
      text-align: left;
      margin: 0;
      width: auto; }
      @media (max-width: 965px) {
        #gloval-nav .mokuji-inner .head {
          text-align: center; } }
      @media (max-width: 768px) {
        #gloval-nav .mokuji-inner .head {
          font-size: 13px; } }
    #gloval-nav .mokuji-inner .sub-head {
      background: #d6dabd;
      border-bottom: 2px solid #00483d;
      color: #00483d;
      font-size: min(1.983471vw, 24px);
      font-family: "Shippori Mincho", serif;
      font-weight: 500;
      padding: 0 .5em;
      letter-spacing: -1px;
      margin: 0;
      text-align: left;
      width: auto; }
      @media (max-width: 965px) {
        #gloval-nav .mokuji-inner .sub-head {
          text-align: center; } }
      @media (max-width: 768px) {
        #gloval-nav .mokuji-inner .sub-head {
          font-size: 15px;
          margin-top: 2px; } }
  #gloval-nav .mokuji {
    margin-top: 1em;
    /*li*/ }
    #gloval-nav .mokuji li {
      border-bottom: 1px solid #c2b99a;
      letter-spacing: -0.75px;
      /*a*/ }
      #gloval-nav .mokuji li a {
        color: #00483d;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        font-family: "Shippori Mincho", serif;
        font-size: min(1.5833333vw, 17px);
        font-weight: 700;
        letter-spacing: -1px;
        padding: 4px 0 3px;
        padding-left: min(3.91666vw, 47px);
        position: relative;
        width: 100%;
        transition: .5s; }
        @media (max-width: 1024px) {
          #gloval-nav .mokuji li a {
            display: inherit; } }
        @media (max-width: 768px) {
          #gloval-nav .mokuji li a {
            font-size: 14px;
            padding-left: 0;
            text-align: center; } }
        @media (hover: hover) and (pointer: fine) {
          #gloval-nav .mokuji li a:hover {
            background: #eef09c; } }
        #gloval-nav .mokuji li a::before {
          content: "";
          background: url("../images/people/arrow-green.svg") no-repeat 0 0;
          background-size: cover;
          height: min(1vw, 12px);
          width: min(2.6666vw, 32px);
          position: absolute;
          top: min(1.1666666vw, 14px);
          left: 0;
          transition: .2s; }
          @media (max-width: 768px) {
            #gloval-nav .mokuji li a::before {
              display: none; } }
        @media (hover: hover) and (pointer: fine) {
          #gloval-nav .mokuji li a:hover::before {
            left: .25em; } }
      #gloval-nav .mokuji li .name {
        color: #735029;
        font-size: 16px;
        margin-left: auto;
        padding-right: .75em; }
  #gloval-nav .link-btn {
    margin-top: 1em; }
    #gloval-nav .link-btn img {
      border-radius: 15px; }
      @media (max-width: 965px) {
        #gloval-nav .link-btn img {
          margin: 1em auto 0; } }

/*gloval-nav*/