@charset "utf-8";
:root {
	--primary-color: #877732;
    --secondary-color: #b19b3c;
}
/* ============================================== */
/* 1. 基本構造                                 　　　 
/* 2. テキスト
/* 3.
/* 4.
/* 5.
/* 6.
/* 7.
/* 8.
/* 9.
/* 10.
/* ============================================== */

/*----------1. 基本構造----------*/
html {
  font-size: 62.5%;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
	font-size: 1.6rem;
  font-weight: normal;
  font-style: normal;
  color: #202020;
  width: 100%;
	background: #121212;
  overflow-x: hidden;
  -moz-user-select: none;
  /*Firefox*/
  -webkit-user-select: none;
  /*Safari,Chrome*/
  -ms-user-select: none;
  /*IE*/
  -webkit-touch-callout: none;
  /*Disable Android and iOS callouts*/
  user-select: none;
  /*CSS3*/
}


/* 見出し　以下確認後捨てる */

/* for Tablet 600px～1024px適用 */
@media screen and (min-width:600px) and ( max-width:1024px) {
	h2 { font-size: clamp(2.4rem, 1.272rem + 3.01vw, 3.2rem);}
	h3 { font-size: clamp(2rem, 1.538rem + 2.3vw, 2.4rem);}
}
/* for SP 321px～599px適用 */
@media screen and (min-width:321px) and ( max-width:599px) {
	h2 { font-size: clamp(2rem, 1.538rem + 2.3vw, 2.4rem); line-height: 1.35;}
	h3 { font-size: clamp(1.8rem, 1.569rem + 1.15vw, 2rem); line-height: 1.35;}
	h4 { font-size: clamp(1.6rem, 1.418rem + 0.91vw, 2rem); line-height: 1.35;}
	p { font-size: 1.4rem;}
}



/* PC向けのスタイル */
@media screen and (min-width: 1280px) {
h1 { font-size: 4.2rem; line-height: 1.25;}
h2 { font-size: 3.6rem; line-height: 1.25;}
h3 { font-size: 3.2rem; line-height: 1.25;}
h4 { font-size: 2.4rem; line-height: 1.25;}
p { font-size: 1.6rem; line-height: 2;}

/*.c-ttl--xlg  { font-size: 8.6rem; line-height: 1.25;}
.c-ttl--xlg span {
	display: block;
	margin-top: 2rem;
	font-size: 1.8rem;
	color: var(--primary-color);
}*/
.c-ttl--lg  {
	font-family: Roboto, sans-serif;
	font-size: 7.2rem;
	line-height: 1.25;
	color: var(--primary-color);
	}
.c-ttl--lg span {
	display: block;
	margin-top: 2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.8rem;
	color: #202020;
}
.c-ttl--md {
	font-family: Roboto, sans-serif;
	font-size: 4.2rem;
	line-height: 1.25;
	color: var(--primary-color);
	}
.c-ttl--md span {
	display: block;
	margin-top: 2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	color: #202020;
}
.c-ttl--sm {
	font-family: Roboto, sans-serif;
	font-size: 3.6rem;
	line-height: 1.25;
	color: var(--primary-color);
	}
.c-ttl--sm span {
	display: block;
	margin-top: 2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	color: #202020;
	
}

/*リード*/
.c-lead--xlg { font-size: 4.2rem; line-height: 1.5;}
.c-lead--md { font-size: 3.2rem; line-height: 1.75;}
.c-lead--sm { font-size: 2.4rem; line-height: 1.75;}
}


/* タブレット向けのスタイル */
@media screen and (min-width: 768px) and (max-width: 1279px) {
}

/* スマートフォン向けのスタイル */
@media screen and (max-width: 767px) {
}











/*いろいろ*/
.c-en--narrow { font-family: Roboto Condensed, sans-serif!important;}
.c-en { font-family: Roboto, sans-serif!important;}
.c-jp { font-family: "Noto Sans JP", sans-serif!important;}

small {display: block; line-height: 2;}


/*---------バーガーメニュー---------*/
#sidebar {
  font-size: 2rem;
  height: 100%;
  position: fixed;
  color: #fff;
  text-align: center;
  top: 0;
  background: rgb(135, 119, 50, 1);
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  right: -300px;
  width: 300px;
  padding-top: 60px;
}
#global-nav ul {
  list-style: none;
  margin-left: 0;
}
#global-nav > ul > li {
  position: relative;
}
#global-nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 15px 0;
  -moz-transition: background-color .3s linear;
  -webkit-transition: background-color .3s linear;
  transition: background-color .3s linear;
}
#global-nav .sub-menu.is-active > a, #global-nav a:hover {
  /*color: rgb(177, 155, 60, 1);*/
  /*background: #fff;*/
	opacity: .6;
}
#global-nav .sub-menu-nav a, #global-nav .sub-menu:hover .sub-menu-nav {
  width: 230px;
}
/* sub-menu icon */
#global-nav .sub-menu-head {
  position: relative;
}
#global-nav .sub-menu-head:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 18px;
  margin: auto;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* nav-toggle */
#nav-toggle {
  display: none;
  position: fixed;
  top: 22px;
  right: 20px;
  height: 60px;
}
#nav-toggle > div {
  position: relative;
  width: 60px;
}
#nav-toggle span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #fff;
  position: absolute;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 22px;
}
#nav-toggle span:nth-child(3) {
  top: 44px;
}
#overlay {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, .6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#global-nav .sub-menu-head:after, #global-nav .sub-menu-nav {
  display: none;
}
#nav-toggle {
  display: block;
}
/* nav open */
.open {
  overflow: hidden;
}
.open #overlay {
  display: block;
}
.open #sidebar {
  -webkit-transform: translate3d(-400px, 0, 0);
  transform: translate3d(-400px, 0, 0);
  -webkit-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
}
/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* z-index */
#overlay {
  z-index: 200;
}
#sidebar {
  z-index: 300;
}
#nav-toggle {
  z-index: 400;
}


/*---------- hero ----------*/

.hero {
   position: relative;/*グローバルナビを固定する場合は、relativeにする*/
	top: 0;/*グローバルナビを固定する場合は削除*/
   width: 100%;
   height: calc(100vh - 94px);
   overflow: hidden;
}
.hero__head {
	position: absolute;
   top: 0;
   left: 0;
	z-index: 10;
   width: 100%;
	height: 90px;
	padding: 0 10rem 0 5rem;
	background: #121212;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.hero__head h1 {
	font-size: 2rem;
	color: #fff;
}
.hero__head span {
	display: inline-block;
	max-width: 63px;
}
.hero__head span a {
	width: 100%;
	max-width: 100%;
	height: auto;
	transition: .6s
}
.hero__head span a:hover {
	opacity: .6;
}
.hero__body-01,
.hero__body-02,
.hero__body-03 {
   position: absolute;
   top: 90px;
   left: 0;
   width: 100%;
   height: 96%;
	opacity : 0;
}
.hero__body-01 {
  background: url("../images/main-01.jpg") no-repeat 0 center;
	background-size: 95%;
  animation: slide-animation-01 15s infinite;
	animation-delay : 0s;
}
.hero__body-02 {
  background: url("../images/main-02.jpg") no-repeat 0 center;
	background-size: 95%;
  animation: slide-animation-02 15s infinite;
	animation-delay : 5s;
}
.hero__body-03 {
  background: url("../images/main-03.jpg") no-repeat 0 center;
	background-size: 95%;
  animation: slide-animation-03 15s infinite;
	animation-delay : 10s;
}

@keyframes slide-animation-01 {
  0% {
    opacity : 0;
  }
  10%{
    opacity : 1;
    z-index : 3;
  }
  33%{
    opacity : 1;
  }
  /**
   * 画像が3枚のため1枚当たり33%
   * 1枚目->2枚目(33%・不透明から50%・透明)にフェードして切り替える
   * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる
   */
  50%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}
@keyframes slide-animation-02 {
  0% {
    opacity : 0;
  }
  10%{
    opacity : 1;
    z-index : 3;
  }
  33%{
    opacity : 1;
  }
  /**
   * 画像が3枚のため1枚当たり33%
   * 1枚目->2枚目(33%・不透明から50%・透明)にフェードして切り替える
   * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる
   */
  50%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}
@keyframes slide-animation-03 {
  0% {
    opacity : 0;
  }
  10%{
    opacity : 1;
    z-index : 3;
  }
  33%{
    opacity : 1;
  }
  /**
   * 画像が3枚のため1枚当たり33%
   * 1枚目->2枚目(33%・不透明から50%・透明)にフェードして切り替える
   * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる
   */
  50%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}

.hero__body-01__txt {
	position: absolute;
  top: 50%;
   left: 48%;
   transform: translate(-50% , -50%);
	text-align: center;
}
.hero__body-01__txt p {
	display: inline-block;
}
.hero__body-01__txt p img.txt-01 {
  max-width: 828px;
  display: block;
  margin-bottom: 4rem;
}
.hero__body-01__txt p img.txt-02 {
  max-width: 680px;
  display: block;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.24));
}
.hero__body-01__txt p img.txt-03 {
  max-width: 690px;
  display: block;
}
.hero__body-02__txt {
	position: absolute;
  top: 50%;
   left: 48%;
   transform: translate(-50% , -50%);
	text-align: center;
}
.hero__body-02__txt p {
	display: inline-block;
}
.hero__body-02__txt p img.txt-01 {
  max-width: 828px;
  display: block;
  margin-bottom: 4rem;
}
.hero__body-02__txt p img.txt-02 {
  max-width: 680px;
  display: block;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.24));
}
.hero__body-02__txt p img.txt-03 {
  max-width: 690px;
  display: block;
}
.hero__body-03__txt {
	position: absolute;
  top: 50%;
   left: 48%;
   transform: translate(-50% , -50%);
	text-align: center;
}
.hero__body-03__txt p {
	display: inline-block;
}
.hero__body-03__txt p img.txt-01 {
  max-width: 828px;
  display: block;
  margin-bottom: 4rem;
}
.hero__body-03__txt p img.txt-02 {
  max-width: 680px;
  display: block;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.24));
}
.hero__body-03__txt p img.txt-03 {
  max-width: 690px;
  display: block;
}



/*---------- feature ----------*/
.feature {
  padding: 20rem 1rem 0 1rem;
	/*background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(12, 15, 28, 1) 47%, rgba(16, 28, 99, 1));*/
}
.feature__title {
	max-width: 1120px;
	margin: 0 auto 6rem auto;
	text-align: center;
}
.feature__title .c-ttl--lg {
	color: var(--primary-color);
}
.feature__title .c-ttl--lg span {
	color: #fff;
}
.feature__block {
	padding: 10rem 6rem;
	border-bottom: 1px solid #929292;
	color: #fff;
}
.feature__block:nth-child(odd) {
	background: #080808;
}
.feature__block:nth-child(even) {
	background: #121212;
}
.feature__block__wrap {
	display: flex;
	justify-content: space-between;
}
.feature__block__wrap__title {
	width: 35%;
}
.feature__block__wrap__description {
	width: 36%;
}
.feature__block__wrap__pic {
	width: 29%;
}
.feature__block__wrap__pic img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.feature__block__wrap__title .c-ttl--md {
color: var(--primary-color);	
}
.feature__block__wrap__title .c-ttl--md span {
 color: #fff;
}
.feature__block__wrap__description p {
	margin-top: 4rem;
}
.feature__block__wrap__description small {
	margin-top: 2rem;
}
.feature__block__wrap__description .c-btn--reflection {
	margin-top: 4rem;
}







/*---------- store-information ----------*/
section.store-information {
  padding: 10rem 1rem;
background: #fcfcfc url("../images/store-bg.png") no-repeat -10% 30%;
background-size: 35%;
}
.store-information__wrap {
  display: flex;
	justify-content: space-between;
}
.store-information__description {
  width: 60%;
	margin-left: auto;
}
.store-information__description .c-ttl--lg {
	margin-bottom: 4rem;
	color: var(--primary-color);
}
.store-information__description .c-ttl--lg span {
	color: #202020;
}
.store-information__description .c-lead--md {
	margin-bottom: 6rem;
}
.store-information__description__wrap {
display: flex;
  justify-content: space-between;
	margin-right: 6rem;
}
.store-information__description__wrap ul {
	  flex: 0 0 calc(96% / 2);
	border-top: 1px solid #ddd;
}
.store-information__description__wrap ul li {
	border-bottom: 1px solid #ddd;
}
.store-information__description__wrap ul li h4 {
	margin-bottom: 2rem;
	color: var(--secondary-color);
}
.store-information__description__wrap ul li p {
	font-size: 1.8rem;
	font-weight: 600;
}
.store-information__description__wrap ul li a {
  position: relative;
    display: block;
	padding: 2rem 0;
    text-decoration: none;
    outline: none;
	transition: .6s;
}
.store-information__description__wrap ul li a:hover {
	background: #f4f4f4;
}
.store-information__description__wrap ul li a::after{
	/*fontawsomeの指定*/
	font: var(--fa-font-solid);
    content: "\f178";
	color: #929292;
  position: absolute;
    top: 50%;
    right: 5%;
    transition: .6s;
}
/*hoverした際の移動*/
.store-information__description__wrap ul li a:hover::after{
    right: 2%;
}

@media screen and (min-width:321px) and ( max-width:1024px) {
	.store-information__description .c-ttl--xlg {
	margin: 0 auto 3rem auto;
	font-size: clamp(3.6rem, 1.376rem + 11.12vw, 8.5rem);
}
	.store-information__description .c-lead--md {
	margin: 0 auto 3rem auto;
	font-size: clamp(2.4rem, 1.272rem + 3.01vw, 3.2rem);
}
	.store-information__description__wrap ul li p {
	font-size: clamp(1.4rem, 1.264rem + 0.68vw, 1.8rem);
}
}


/*----------line-up----------*/
section.line-up {
  padding: 10rem 1rem;
background: #fcfcfc;
}
.line-up__wrap {
	max-width: 1500px;
	margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.line-up__wrap__ttl {
	width: 25%;
}
.line-up__wrap__list {
	width: 75%;
}
.line-up__wrap__ttl .c-btn--circle {
	margin-top: 4rem;
}
.line-up__wrap__list ul {
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
}
.line-up__wrap__list ul li {
  flex: 0 0 calc(100% / 7);
	margin-bottom: 2rem;
}
.line-up__wrap__list ul li img {
	display: inline-block;
	width: 100%;
	max-width: 98px;
	height: auto;
}


/*----------ニュース----------*/
section.news {
  padding: 10rem 1rem;
background: #fcfcfc;
}
.news__wrap {
	max-width: 1500px;
	margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.news__wrap__ttl {
	width: 25%;
}
.news__wrap__description {
	width: 75%;
}
.news__wrap__ttl .c-btn--circle {
	margin-top: 4rem;
}
/* ニュース記事欄 */
.news__wrap__description__list {
}
.news__wrap__description__list__item {
	border-bottom: 1px solid #e6e6e6;
}
.news__wrap__description__list__item:first-child {
	border-top: 1px solid #e6e6e6;
}
.news__wrap__description__list__item a {
  position: relative;
  display: flex;
	padding: 3rem 2rem;
	text-decoration: none;
    outline: none;
	transition: .6s;
}
.news__wrap__description__list__item a:hover {
background: #f4f4f4;
}
.news__wrap__description__list__item a::after{
	/*fontawsomeの指定*/
	font: var(--fa-font-solid);
    content: "\f178";
	color: #929292;
  position: absolute;
    top: 50%;
    right: 5%;
    transition: .6s;
}
/*hoverした際の移動*/
.news__wrap__description__list__item a:hover::after{
    right: 2%;
}
.news__wrap__description__list__item--date {
  display: flex;
  align-items: center;
	margin-right: 1.5rem;
}
.news__wrap__description__list__item--date--tug {
	width: 6em;
	margin-left: 2rem;
  background:#DFDDBA;
  font-size: 1.2rem;
	font-weight: 600;
	color: #5e5321;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .news__wrap__description__list__item a {
    display: block;
  }
}
@media screen and (max-width: 769px) {
  .news__wrap__description__list__item a {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 480px) {
  .news__wrap__description__list__item a {
    padding: 2rem 0;
  }
}



/*----------Topics----------*/
section.topics {
  padding: 10rem 1rem;
	background: #fcfcfc;
}
.topics__wrap {
	/* swiper.min.custom.cssに記述 */
}
.topics__wrap__title {
	display: flex;
	margin-bottom: 6rem;
}
.topics__wrap__title .c-ttl--lg {
	color: var(--primary-color);
}
.topics__wrap__title .c-ttl--lg span {
	color: #121212;
}
.topics__wrap__title a {
  display: block;
	max-width: 60px;
	padding: 2.4rem 0 0 1rem;
	transition: .6s;
}
.topics__wrap__title a:hover {
	opacity: .6;
}


/*---------- banner ----------*/
section.banner {
  padding: 10rem 1rem;
background: #fcfcfc;
}
.banner__wrap {
	max-width: 1500px;
	margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.banner__wrap__title {
	width: 20%;
	border-right: 1px solid #ddd;
}
.banner__wrap__title .c-btn--circle {
	margin-top: 4rem;
}
.banner__wrap__description {
  width: 70%;
}
.banner__wrap__description ul {
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
}
.banner__wrap__description ul li {
  flex: 0 0 calc(96% / 2);
	margin-bottom: 2rem;
}
.banner__wrap__description ul li img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	transition: transform .6s ease;
	transform: scale(1);
}
.banner__wrap__description ul li a:hover img {
	transform: scale(1.2);
}
.banner__wrap__description ul li h4 {
	margin-top: 2rem;
}
.banner__wrap__description ul li p {
	margin-top: 1rem;
	line-height: 1.5;
}
.banner__wrap__description ul li h4 a {
	transition: .6s;
}
.banner__wrap__description ul li h4 a:hover {
	opacity: .6;
}


























/*----------0. 調整----------*/

/*　画像のマスク　*/
.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


.txt16 {
  font-size: clamp(1.4rem, calc(1.25vw + 1.6rem), 1.6rem);
}
.txt24 {
  font-size: clamp(2.0rem, calc(1.25vw + 1.6rem), 2.4rem);
}
.txt32 {
  font-size: clamp(2.4rem, calc(1.25vw + 1.6rem), 3.2rem);
}
.txt36 {
  font-size: clamp(3.2rem, calc(1.25vw + 1.6rem), 3.6rem);
}
.txt42 {
  font-size: clamp(3.2rem, calc(1.25vw + 1.6rem), 4.2rem);
}

.ma10 {
  margin-bottom: 1rem !important;
}
.ma20 {
  margin-bottom: 2rem !important;
}
.ma30 {
  margin-bottom: 3rem !important;
}
.ma40 {
  margin-bottom: 4rem !important;
}
.ma50 {
  margin-bottom: 5rem !important;
}
.ma60 {
  margin-bottom: 6rem !important;
}


.mat10 {
  margin-top: 1rem !important;
}
.mat20 {
  margin-top: 2rem !important;
}
.mat30 {
  margin-top: 3rem !important;
}
.mat40 {
  margin-top: 4rem !important;
}
.mat50 {
  margin-top: 5rem !important;
}
.mat60 {
  margin-top: 6rem !important;
}

.weight600 {
  font-weight: 600 !important;
}
.weight600 {
  font-weight: 700 !important;
}
.weight600 {
  font-weight: 800 !important;
}

.align-l {
  text-align: left !important;
}
.align-r {
  text-align: right !important;
}
.align-center {
  text-align: center !important;
}


/*----------ボタン----------*/

a.c-btn--bg-color {
  display: inline-block;
  padding: 2rem 6rem 2rem 6rem;
  background: #877732;
  color: #fff;
  text-align: center;
  /*border-radius: 9999px;*/
  transition: .3s;
}
a.c-btn--bg-color::after {
  display: inline-block;
  margin-left: 1rem;
  text-align: center;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f061';
	transition: .3s;
}
a:hover.c-btn--bg-color {
	background: #b19b3c;
	color: #fff;
}
a:hover.c-btn--bg-color::after {
transform: translateX(8px);
}


a.c-btn--reflection {
    position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
    border: 1px solid #b19b3c;
    padding: 2rem 6rem 2rem 6rem;
    text-align: center;
    outline: none;   
    transition: ease .2s;
}
a.c-btn--reflection::after {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  display: inline-block;
  margin-left: 1rem;
  text-align: center;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f061';
	color: #b19b3c;
	transition: .3s;
}
a:hover.c-btn--reflection::after {
transform: translateX(8px);
	color: #fff;
}

/*ボタン内spanの形状*/
.c-btn--reflection span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#b19b3c;
}
.c-btn--reflection:hover span{
  color:#fff;
}

/*== 背景が流れる（斜め） */
a:hover.c-btn--reflection::before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
  background:#b19b3c;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
a:hover.c-btn--reflection:hover::before {
  animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}


/* 丸ボタン */
.c-btn--circle {
  position: relative;
    /*形状*/
    display: inline-block;
	vertical-align: middle;
	width: 6.4rem;
  height: 6.4rem;
  border: 1px solid #b29c3d;
  border-radius: 50%;
}
.c-btn--circle::after{
	/*fontawsomeの指定*/
	font: var(--fa-font-solid);
    content: "\f178";
	font-size: 2rem;
	color: #b29c3d;
  position: absolute;
    top: 50%;
	right: 15%;
	transform: translate(-50% , -50%);
    transition: all .6s;
}
.c-btn--circle:hover {
	background: #b29c3d;
}
/*hover移動距離*/
.c-btn--circle:hover::after{
    right: -5%;
	color: #fff;
}


/*矢印が右に移動するボタン*/
a.c-arrow--move {
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 0 20px;
    text-decoration: none;
    outline: none;
}
a.c-arrow--move::after{
	/*fontawsomeの指定*/
	font: var(--fa-font-solid);
    content: "\f178";
	color: #929292;
	/*位置*/
  position: absolute;
    top: 50%;
    right: 5%;
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
a.c-arrow--move:hover::after{
    right: 2%;
}