a {
  font-size: inherit;
}

/* keywords_mv
---------------------------------------------------- */

#keywords_mv .box:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 15.74%;
}

#keywords_mv .inner {
  position: relative;
  padding: 17.87% 0 5.53%;
}

#keywords_mv .title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 90%;
  max-width: 800px;
  margin: -11.79% auto 0;
}

#keywords_mv .lead {
  width: 90.91%;
  max-width: 800px;
  margin: 0 auto;
  padding: 5% 3.2%;
  text-align: center;
  position: relative;
}

#keywords_mv .lead:before,
#keywords_mv .lead:after {
  content: '';
  display: block;
  width: 13.125%;
  padding-top: 7.95%;
  position: absolute;
}

#keywords_mv .lead:before {
  top: 0;
  left: 0;
  background-size: 100%;
  border-top: solid 2px #979797;
  border-left: solid 2px #979797;
}

#keywords_mv .lead:after {
  bottom: 0;
  right: 0;
  border-bottom: solid 2px #979797;
  border-right: solid 2px #979797;
}

#keywords_mv .indexpage {
  width: 8.86%;
  margin: 5.68% auto 0;
}



/* keywords_box
---------------------------------------------------- */
#keywords_box {
  position: relative;
}

#keywords_box::before {
  content: "";
  width: 100%;
  height: 100%;
  max-width: 880px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  padding-bottom: 5%;
}

#keywords_box .box {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto 5%;
}

#keywords_box .box:nth-child(odd) {
  flex-direction: row-reverse;
}

#keywords_box .image {
  min-width: 500px;
  max-width: 500px;
  font-size: 0;
}

#keywords_box .inner {
  position: relative;
  background: none;
}

#keywords_box .box:nth-child(odd) .inner {
  margin-right: 30px;
}

#keywords_box .box:nth-child(even) .inner {
  margin-left: 30px;
}

#keywords_box .new {
  display: inline-block;
  font-size: 15px;
  padding: 0.5em 1em;
  color: #fff;
  line-height: 4;
  width: 5em;
  border-radius: 50%;
  height: 5em;
  background-color: #c6a06f;
  margin: 0 auto 1em;
}

#keywords_box .word {
  text-align: center;
}

#keywords_box .head {
  margin: 0 auto;
  font-size: 23px;
  font-weight: bold;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.2em;
}

#keywords_box .subhead {
  margin: 7.31% auto 0;
  font-size: 13px;
  line-height: 1.23;
  text-align: center;
}

#keywords_box .subhead a {
  display: block;
  text-decoration: none;
}

#keywords_box .subhead strong {
  display: block;
  margin: 1% auto 3%;
  color: #70a0b7;
  font-size: 26px;
  font-weight: 700;
  animation: fc-change 50s ease infinite;
}

#keywords_box .more {
  display: block;
  width: 64.4%;
  max-width: 264px;
  margin: 0 auto;
}

#keywords_box .taglist {
  margin-top: 6.09%;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

#keywords_box .taglist li {
  display: inline-block;
  margin: 2.68% 1.34% 0;
}

#keywords_box .taglist a {
  display: block;
  padding: 0.75em;
  color: #737373;
  border: 1px solid #737373;
  text-decoration: none;
  transition: all ease .3s;
  animation: tc-change 50s ease infinite;
}

#keywords_box .taglist a:hover {
  border-color: #f5f5f5;
  background: #f5f5f5;
}

@keyframes fc-change {
  0% {
    color: #70a0b7
  }

  /*変化させたい色*/
  25% {
    color: #b2dffb;
  }

  /*変化させたい色*/
  50% {
    color: #ff9a90;
  }

  /*変化させたい色*/
  75% {
    color: #fda64c;
  }

  /*変化させたい色*/
  90% {
    color: #ffe036;
  }

  /*変化させたい色*/
  100% {
    color: #70a0b7;
  }

  /*変化させたい色*/
}

@keyframes tc-change {
  0% {
    border-color: #70a0b7;
    color: #70a0b7;
  }

  /*変化させたい色*/
  25% {
    border-color: #b2dffb;
    color: #b2dffb;
  }

  /*変化させたい色*/
  50% {
    border-color: #ff9a90;
    color: #ff9a90;
  }

  /*変化させたい色*/
  75% {
    border-color: #fda64c;
    color: #fda64c;
  }

  /*変化させたい色*/
  90% {
    border-color: #ffe036;
    color: #ffe036;
  }

  /*変化させたい色*/
  100% {
    border-color: #70a0b7;
    color: #70a0b7;
  }

  /*変化させたい色*/
}


svg .svg-elem-1 {
  stroke-dashoffset: 740.0286865234375px;
  stroke-dasharray: 740.0286865234375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1s ease-in 3s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 1s ease-in 3s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-2 {
  stroke-dashoffset: 615.6769409179688px;
  stroke-dasharray: 615.6769409179688px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s,
    fill 1s ease-in 3.1s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s,
    fill 1s ease-in 3.1s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-3 {
  stroke-dashoffset: 320.8102111816406px;
  stroke-dasharray: 320.8102111816406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s,
    fill 1s ease-in 3.2s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s,
    fill 1s ease-in 3.2s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-4 {
  stroke-dashoffset: 363.9873962402344px;
  stroke-dasharray: 363.9873962402344px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s,
    fill 1s ease-in 3.3s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s,
    fill 1s ease-in 3.3s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-5 {
  stroke-dashoffset: 507.7663269042969px;
  stroke-dasharray: 507.7663269042969px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s,
    fill 1s ease-in 3.4s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s,
    fill 1s ease-in 3.4s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-6 {
  stroke-dashoffset: 320.6366882324219px;
  stroke-dasharray: 320.6366882324219px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
    fill 1s ease-in 3.5s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1s,
    fill 1s ease-in 3.5s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-7 {
  stroke-dashoffset: 243.47634887695312px;
  stroke-dasharray: 243.47634887695312px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s,
    fill 1s ease-in 3.6s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s,
    fill 1s ease-in 3.6s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-8 {
  stroke-dashoffset: 439.9706115722656px;
  stroke-dasharray: 439.9706115722656px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s,
    fill 1s ease-in 3.7s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s,
    fill 1s ease-in 3.7s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-9 {
  stroke-dashoffset: 255.80841064453125px;
  stroke-dasharray: 255.80841064453125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s,
    fill 1s ease-in 3.8s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s,
    fill 1s ease-in 3.8s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-10 {
  stroke-dashoffset: 200.13345336914062px;
  stroke-dasharray: 200.13345336914062px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s,
    fill 1s ease-in 3.9s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s,
    fill 1s ease-in 3.9s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-11 {
  stroke-dashoffset: 206.64817810058594px;
  stroke-dasharray: 206.64817810058594px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
    fill 1s ease-in 4s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2s,
    fill 1s ease-in 4s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-12 {
  stroke-dashoffset: 196.1678009033203px;
  stroke-dasharray: 196.1678009033203px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s,
    fill 1s ease-in 4.1s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s,
    fill 1s ease-in 4.1s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-13 {
  stroke-dashoffset: 384.71527099609375px;
  stroke-dasharray: 384.71527099609375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s,
    fill 1s ease-in 4.2s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s,
    fill 1s ease-in 4.2s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-14 {
  stroke-dashoffset: 170.21217346191406px;
  stroke-dasharray: 170.21217346191406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s,
    fill 1s ease-in 4.3s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s,
    fill 1s ease-in 4.3s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-15 {
  stroke-dashoffset: 176.77005004882812px;
  stroke-dasharray: 176.77005004882812px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s,
    fill 1s ease-in 4.4s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s,
    fill 1s ease-in 4.4s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-16 {
  stroke-dashoffset: 177.93141174316406px;
  stroke-dasharray: 177.93141174316406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
    fill 1s ease-in 4.5s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
    fill 1s ease-in 4.5s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-17 {
  stroke-dashoffset: 151.66334533691406px;
  stroke-dasharray: 151.66334533691406px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s,
    fill 1s ease-in 4.6s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s,
    fill 1s ease-in 4.6s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-18 {
  stroke-dashoffset: 65.56781005859375px;
  stroke-dasharray: 65.56781005859375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s,
    fill 1s ease-in 4.7s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s,
    fill 1s ease-in 4.7s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-19 {
  stroke-dashoffset: 123.8731460571289px;
  stroke-dasharray: 123.8731460571289px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s,
    fill 1s ease-in 4.8s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s,
    fill 1s ease-in 4.8s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-20 {
  stroke-dashoffset: 65.56800842285156px;
  stroke-dasharray: 65.56800842285156px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8000000000000003s,
    fill 1s ease-in 4.9s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8000000000000003s,
    fill 1s ease-in 4.9s;
}

svg.active .svg-elem-20 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

svg .svg-elem-21 {
  stroke-dashoffset: 124.6672592163086px;
  stroke-dasharray: 124.6672592163086px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 4s,
    fill 1s ease-in 5s;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.47, 0, 0.745, 0.715) 4s,
    fill 1s ease-in 5s;
}

svg.active .svg-elem-21 {
  stroke-dashoffset: 0;
  fill: rgb(51, 51, 51);
}

/*========= hamburger menu ===============*/

#g-nav {
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: fixed;
	z-index: 9999;
	/*ナビのスタート位置と形状*/
	top: 0;
	left: -120%;
  width: 100%;
	height: 100vh;
	/*ナビの高さ*/
	background: rgb(255, 255, 255);
	/*動き*/
	transition: all 0.5s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
	left: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav #g-nav-list {
	/*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav #g-nav-list::-webkit-scrollbar {
  width: 15px;
}

#g-nav #g-nav-list::-webkit-scrollbar-track {
  background-color: #fff;
  margin: 10px;
}

#g-nav #g-nav-list::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 6px;
  border-left: solid transparent 5px;
  border-right: solid transparent 5px;
  background-clip: padding-box;
}

#g-nav #g-nav-list img {
  width: min(80%,200px);
  display: block;
  margin: 0 auto;
}


/*ナビゲーション*/
#g-nav ul {
  margin: 0 auto;
  width: min(90%,940px);
  box-sizing: border-box;
  padding-bottom:2em;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*リストのレイアウト設定*/

#g-nav li {
	list-style: none;
	text-align: left;
}

#g-nav li a {
  font-size: 1.1em;
  color: #333;
  text-decoration: none;
  margin: 1em;
  padding: 0.75em 1.5em;
  display: block;
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 1;
  font-style: normal;
  transition: all ease .3s;
  background: #eee;
  border-radius: 6em;
}

#g-nav li a.new {
  position: relative;
  background-color: #c6a06f;
  color: #fff;
}

#g-nav li a.new::before {
  content: "NEW";
  margin-right: 1em;
}

#g-nav li a:hover {
  color: #fff;
 background-color: #333;
}

.openbtn {
	display: none;
	position: fixed;
	z-index: 99999;
	/*ボタンを最前面に*/
	top: 10px;
	left: 10px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-color: #333;
  border-radius: 50%;
}

/*×に変化*/
.openbtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 2px;
	width: 45%;
	background-color: #fff;
}

.openbtn span:nth-of-type(1) {
	top: 15px;
}

.openbtn span:nth-of-type(2) {
	top: 23px;
}

.openbtn span:nth-of-type(3) {
	top: 31px;
}

.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}


@media screen and (max-width: 767px) {

  /* keywords_mv
---------------------------------------------------- */
  #keywords_mv .box:before {
    padding-top: 19.73%;
  }

  #keywords_mv .inner {
    padding: 22.4% 0 10.66%;
  }

  #keywords_mv .title {
    width: 100%;
    left: 0;
    margin-top: -13.76%;
    margin-left: 0;
  }

  #keywords_mv .lead {
    width: 90.43%;
    /*624*/
    padding: 8.69% 7.24%;
    text-align: left;
  }

  #keywords_mv .lead br {
    display: none;
  }

  #keywords_mv .lead:before,
  #keywords_mv .lead:after {
    width: 16.83%;
    padding-top: 15.39%;
    border-width: 1px;
  }

  #keywords_mv .indexpage {
    width: 18.11%;
    margin: 10.66% auto 0;
  }



  /* keywords_box
---------------------------------------------------- */
  #keywords_box .box {
    display: block;
  }

  #keywords_box::before {
    max-width: 92%;
  }

  #keywords_box .image {
    width: 100%;
    max-width: 100%;
    min-width: inherit
  }

  #keywords_box .inner {
    padding: 0%;
    margin: 0 auto !important;
  }

  #keywords_box .inner:after {
    content: none;
  }

  #keywords_box .word {
    position: static;
    transform: translateY(0%);
    width: 100%;
    padding-top: 10.14%;
    padding-bottom: 10.43%;
  }

  #keywords_box .head {
    font-size: 4.93vw;
  }

  #keywords_box .new {
    font-size: 3vw;
  }


  #keywords_box .subhead {
    margin: 8.69% auto 0;
    font-size: 2.8vw;
  }

  #keywords_box .subhead strong {
    font-size: 5.6vw;
  }

  #keywords_box .more {
    width: 70%;
  }

  #keywords_box .taglist {
    margin-top: 5.79%;
    font-size: 3.5vw;
  }

  #keywords_box .taglist li {
    margin: 2.46% 0.86% 0;
  }

  #keywords_box .taglist a:hover {
    border-color: #737373;
    background: none;
  }

  #keywords_box #keywords1 .head {
    padding-top: 0;
  }

  #keywords_box #keywords4:after {
    padding-top: 5.6%;
  }

  #keywords_box #lastspace {
    padding-top: 9.33%;
  }


}