@charset "UTF-8";
/*
@mixin tabMpc { 
	@media screen and (min-width: 768px) and (max-width: 1280px){
		@content;
	}	
}
@mixin tabwMpc { 
	@media screen and (min-width: 961px) and (max-width: 1280px){
		@content;
	}	
}
*/
/* Reset */
/*-----------------------------------------------*/
html {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: auto !important;
  width: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  overflow: auto; }

body {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-style: inherit;
  font-family: "游ゴシック", "YuGothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic";
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  vertical-align: baseline;
  color: #333;
  box-sizing: padding-box;
  border: 0;
  outline: 0;
  /*overflow: hidden;*/
  word-break: break-all;
  font-feature-settings: "palt"; }

:root {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  outline: 0;
  font-size: 1.6rem;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

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

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px; }

a {
  text-decoration: none;
  color: #000000; }
  a.decoration {
    text-decoration: underline; }
    a.decoration:visited, a.decoration:focus, a.decoration:active {
      text-decoration: underline;
      outline: 0; }
  a:visited, a:focus, a:active {
    text-decoration: none;
    color: #000000;
    outline: 0; }

/* clearfix */
/*-----------------------------------------------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

* html .clearfix {
  zoom: 1; }

*:first-child + html .clearfix {
  zoom: 1; }

img {
  max-width: 100%;
  vertical-align: bottom;
  transition: all .25s ease-out; }
  img .centerize {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block; }

.centerize {
  text-align: center;
  margin-left: auto;
  margin-right: auto; }

.center {
  text-align: center !important; }

.right {
  text-align: right !important; }

.left {
  text-align: left !important; }

.rightBox {
  float: right !important; }

.leftBox {
  float: left !important; }

.clear {
  clear: both; }

.bold {
  font-weight: bold !important; }

.noline {
  border: none !important; }

.hide {
  display: none !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb70 {
  margin-bottom: 70px !important; }

@media screen and (min-width: 768px) {
  .mb10 {
    margin-bottom: 15px !important; }

  .mb20 {
    margin-bottom: 30px !important; }

  .mb30 {
    margin-bottom: 50px !important; }

  .mb50 {
    margin-bottom: 70px !important; }

  .mb70 {
    margin-bottom: 100px !important; } }
.bold {
  font-weight: bold !important; }

.noline {
  border: none !important; }

.hide {
  display: none !important; }

.f20 {
  font-size: 2rem !important; }

@media screen and (max-width: 960px) {
  .onlyPc {
    display: none; } }
@media screen and (min-width: 961px) {
  .onlySp {
    display: none; } }
.switch {
  visibility: hidden; }

/*-----------------------------------------------*/
/* Reset */
.anchor {
  display: block;
  padding-top: 55px;
  margin-top: -55px; }
  @media screen and (min-width: 768px) and (max-width: 960px) {
    .anchor {
      padding-top: 80px;
      margin-top: -80px; } }
  @media screen and (min-width: 768px) {
    .anchor {
      padding-top: 115px;
      margin-top: -115px; } }

body {
  height: 100%;
  /*overflow: hidden;*/ }

/* ----------------------------------------
	#layout
---------------------------------------- */
#container {
  position: relative; }
  @media screen and (max-width: 960px) {
    #container #header {
      width: 100%;
      position: absolute; } }
  #container #header #masthead {
    z-index: 100;
    background: #ffffff; }
    @media screen and (max-width: 960px) {
      #container #header #masthead {
        width: 100%;
        position: fixed; } }
    @media screen and (min-width: 961px) {
      #container #header #masthead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        position: fixed;
        width: 100%;
        height: 90px; } }
  #container #content {
    position: relative;
    margin: 0 auto;
    z-index: 1; }
    @media screen and (max-width: 960px) {
      #container #content {
        padding-top: 65px; } }
    @media screen and (min-width: 961px) {
      #container #content {
        /*width: -webkit-calc(100% - 200px);
        width: calc(100% - 200px);*/
        margin-top: 90px; } }

.inner {
  margin: 0 auto;
  padding: 120px 5% 80px 5%;
  max-width: 1280px;
  width: 100%; }
  @media screen and (min-width: 961px) and (max-width: 1280px) {
    .inner {
      padding: 150px 7%; } }
  @media screen and (min-width: 1281px) {
    .inner {
      padding: 180px 50px 160px 50px; } }

/* ----------------------------------------
	#header
---------------------------------------- */
#header #masthead {
  /*width: 200px;*/ }
  @media screen and (max-width: 960px) {
    #header #masthead {
      position: fixed; } }
  @media screen and (min-width: 961px) {
    #header #masthead {
      /*padding: 20px 20px 20px 20px;*/ } }
  @media screen and (max-width: 960px) {
    #header #masthead #nav_head {
      height: 65px;
      background: #ffffff;
      z-index: 10;
      position: fixed;
      width: 230px; } }
  @media screen and (min-width: 768px) {
    #header #masthead #nav_head {
      width: 230px; } }
  #header #masthead #nav_head .siteTitle {
    position: relative;
    z-index: 100; }
    @media screen and (max-width: 960px) {
      #header #masthead #nav_head .siteTitle {
        width: 200px;
        padding: 8px 10px 10px 20px; } }
    @media screen and (min-width: 961px) {
      #header #masthead #nav_head .siteTitle {
        width: 230px;
        padding: 20px 0px 0px 20px; } }
  @media screen and (max-width: 480px) {
    #header #masthead #nav_ol {
      max-width: 350px;
      padding: 3%;
      margin: 0px auto; } }
  @media screen and (min-width: 481px) and (max-width: 960px) {
    #header #masthead #nav_ol {
      max-width: 500px;
      padding: 3%;
      margin: 0px auto; } }
  @media screen and (min-width: 961px) {
    #header #masthead #nav_global {
      position: absolute;
      right: 30px;
      top: 20px; } }
  @media screen and (min-width: 961px) and (max-width: 1280px) {
    #header #masthead #nav_global {
      width: 600px; } }
  @media screen and (min-width: 1281px) {
    #header #masthead #nav_global {
      width: 700px; } }
  #header #masthead ul#nav_main {
    /*margin-bottom: 30px;*/ }
    @media screen and (max-width: 960px) {
      #header #masthead ul#nav_main {
        margin: 0px auto; } }
    @media screen and (min-width: 961px) {
      #header #masthead ul#nav_main {
        display: flex;
        justify-content: space-between;
        /*height: calc(100vh - (500px + 20px) );
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;*/ } }
    #header #masthead ul#nav_main li a {
      display: block;
      padding: 30px 10px;
      font-weight: 500;
      text-align: center;
      font-weight: bold; }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li a {
          font-size: 1.5rem;
          padding: 13px 10px; } }
    #header #masthead ul#nav_main li:nth-child(1) {
      background-image: linear-gradient(90deg, #111a4d, #2a2f87); }
      @media screen and (max-width: 960px) {
        #header #masthead ul#nav_main li:nth-child(1) {
          margin-bottom: 15px; } }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li:nth-child(1) {
          width: 23%; } }
      #header #masthead ul#nav_main li:nth-child(1) a {
        color: #ffffff; }
    #header #masthead ul#nav_main li:nth-child(2) {
      background-image: linear-gradient(90deg, #967324, #bc983a);
      color: #ffffff; }
      @media screen and (max-width: 960px) {
        #header #masthead ul#nav_main li:nth-child(2) {
          margin-bottom: 15px; } }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li:nth-child(2) {
          width: 23%; } }
      #header #masthead ul#nav_main li:nth-child(2) a {
        color: #ffffff; }
    #header #masthead ul#nav_main li:nth-child(3) {
      background-image: linear-gradient(90deg, #87221b, #95372d);
      color: #ffffff; }
      @media screen and (max-width: 960px) {
        #header #masthead ul#nav_main li:nth-child(3) {
          margin-bottom: 15px; } }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li:nth-child(3) {
          width: 23%; } }
      #header #masthead ul#nav_main li:nth-child(3) a {
        color: #ffffff; }
    @media screen and (min-width: 961px) {
      #header #masthead ul#nav_main li:nth-child(4) {
        width: 10%; } }
    #header #masthead ul#nav_main li:nth-child(4) a {
      color: #111a4c;
      padding: 20px 0px;
      font-family: "Lato", serif;
      letter-spacing: 0px; }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li:nth-child(4) a {
          padding: 13px 0px; } }
      @media screen and (max-width: 960px) {
        #header #masthead ul#nav_main li:nth-child(4) a::after {
          content: url("../images/common/arrow_perple.svg");
          display: inline-block;
          width: 17px;
          background-size: contain;
          vertical-align: middle;
          position: absolute;
          right: 15px;
          top: 23px; } }
    @media screen and (min-width: 961px) {
      #header #masthead ul#nav_main li:nth-child(5) {
        width: 15%; } }
    #header #masthead ul#nav_main li:nth-child(5) a {
      color: #111a4c;
      padding: 20px 0px;
      font-family: "Lato", serif; }
      @media screen and (min-width: 961px) {
        #header #masthead ul#nav_main li:nth-child(5) a {
          padding: 13px 0px; } }
      @media screen and (max-width: 960px) {
        #header #masthead ul#nav_main li:nth-child(5) a::after {
          content: url("../images/common/arrow_perple.svg");
          display: inline-block;
          width: 17px;
          background-size: contain;
          vertical-align: middle;
          position: absolute;
          right: 15px;
          top: 23px; } }

/*
#header{
	.transform{
		background: rgba(255,255,255,0.9);
		padding: 20px;
	}
}*/
@media screen and (max-width: 960px) {
  header#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    color: #ffffff;
    line-height: 1.2;
    z-index: 99;
    transition: all .25s ease-out; } }

/******************************************
	Navigation　Area
******************************************/
/***ハンバーガーメニューボタン　**************/
@media screen and (max-width: 960px) {
  .hamburger {
    display: block;
    position: fixed;
    z-index: 3;
    right: 23px;
    top: 10px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center; }

  .hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    left: 6px;
    background: #333333;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }

  .hamburger span:nth-child(1) {
    top: 10px; }

  .hamburger span:nth-child(2) {
    top: 20px; }

  .hamburger span:nth-child(3) {
    top: 30px; }

  /* スマホメニューを開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background: #333333;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg); }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    background: #333333;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg); }

  /* メニュー背景　*/
  nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    color: #333333;
    /*background: rgba( 71,70,73,0.6 );*/
    background: #ffffff;
    text-align: center;
    width: 100%;
    transform: translateX(100%);
    transition: all 0.6s;
    height: 100%;
    padding-top: 180px;
    overflow: auto; } }
  @media screen and (max-width: 960px) and (min-width: 768px) and (max-width: 960px) {
    nav.globalMenuSp {
      padding-top: 80px; } }

@media screen and (max-width: 960px) {
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #cccccc; }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
    position: relative; }

  nav.globalMenuSp ul li:nth-of-type(3) a {
    padding-bottom: 15px; }

  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0; }

  nav.globalMenuSp ul li:hover {
    color: #ebebeb; }

  li.gnav {
    border-bottom: 1px solid #cccccc; }
    li.gnav a {
      font-size: 2.0rem; }

  ul#nav_sub {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
    border-top: 0px; }
    ul#nav_sub li.nav_submenu a {
      font-size: 1.6rem;
      padding: 10px 0px 10px 0px; }
      ul#nav_sub li.nav_submenu a::before {
        content: "　"; }
      ul#nav_sub li.nav_submenu a::after {
        width: 12px;
        top: 5px;
        content: url("../images/common/arrow_g2.svg");
        display: none; }

  nav.globalMenuSp ul li a {
    display: block;
    color: #303030;
    padding: 20px 0px;
    font-size: 3.0rem;
    text-decoration: none;
    text-align: left;
    font-weight: bold; } }
  @media screen and (max-width: 960px) and (min-width: 481px) {
    nav.globalMenuSp ul li a {
      padding: 25px 0px; } }
@media screen and (max-width: 960px) {
    nav.globalMenuSp ul li a::after {
      content: url("../images/common/arrow_white.svg");
      display: inline-block;
      top: 19px;
      right: 0px;
      width: 10px;
      background-size: contain;
      vertical-align: middle;
      position: absolute; } }
    @media screen and (max-width: 960px) and (min-width: 481px) {
      nav.globalMenuSp ul li a::after {
        top: 25px; } }

@media screen and (max-width: 960px) {
  /* クリックでjQueryで追加・削除 */
  nav.globalMenuSp.active {
    opacity: 100;
    display: block;
    transform: translateX(0%); } }
@media screen and (max-width: 960px) {
  nav.globalMenuSp {
    padding-top: 80px; }

  nav.globalMenuSp ul li a {
    padding: 20px 0px;
    font-size: 1.8rem;
    position: relative; }
    nav.globalMenuSp ul li a::after {
      content: url("../images/common/arrow_white.svg");
      display: inline-block;
      width: 17px;
      background-size: contain;
      vertical-align: middle;
      position: absolute;
      right: 15px;
      top: 23px; } }
@media screen and (min-width: 961px) and (max-width: 1280px) {
  nav.globalMenuSp ul {
    margin-bottom: 40px; } }
/* ----------------------------------------
	#mastfoot
---------------------------------------- */
#mastfoot {
  position: relative;
  text-align: center; }
  #mastfoot #footer_ol {
    padding: 20px 20px; }
  #mastfoot #footer_logo {
    width: 150px;
    margin: 0px auto;
    margin-bottom: 30px; }
  #mastfoot #copyright {
    position: relative;
    font-size: 1.2rem; }
    #mastfoot #copyright a.pagetop {
      display: block;
      position: absolute;
      top: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 10px;
      padding: 0 0 0 0;
      z-index: 10; }
      @media screen and (min-width: 961px) {
        #mastfoot #copyright a.pagetop {
          top: 50%;
          height: 100%;
          padding: 0 0px; } }
      #mastfoot #copyright a.pagetop img {
        width: 55px; }
        @media screen and (min-width: 961px) {
          #mastfoot #copyright a.pagetop img {
            /*padding-top: 20px;*/ } }