@charset "UTF-8";
/* CSS Document */

body{
	position: relative;
	font-family:"din-2014","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",sans-serif;
	letter-spacing: 1px;
}

.pc{
	display: none;
}

.sp{
	display: block;
}

@media screen and (min-width: 960px) {
	.pc{
		display: block;
	}

	.sp{
		display: none;
	}
}


/* トップページ */

.top__wrap{
	width: 100%;
	background-attachment: fixed;
	background:  linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url("../img/top-back.jpg") no-repeat 70% center / cover;
	/* display:flex;
  	flex-direction:column; */
}

@media screen and (min-width: 960px) {
	.top__wrap{
		display:flex;
		flex-direction:column;
		height: 100vh;
	}
}


/* トップページ（ヘッダー） */

.top__header{
	width: 100%;
	height: 80vh;
	padding: 5em;
	position: relative;
	text-align: center;
}

.top__header-inner{
	width: 100%;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.top__header-inner h1{
	width: 30%;
	margin: 0 auto;
}

.top__header-nav{
	margin-top: 3em;
}

.top__header-nav ul li{
	font-size: 1.2em;
	letter-spacing: 0.2em;
	color: #fff;
	margin-bottom: 2em;
	line-height: 1;
}

.top__header-nav ul li:last-child{
	margin-bottom: 0;
}

.top__header-nav ul li a:hover{
	border-bottom: 1px solid #fff;
	padding-bottom: 0.5em;
}


@media screen and (min-width: 960px) {
	.top__header{
		height: 100%;
	}
	
	.top__header-inner h1{
		width: 230px;
	}
	
	.top__header-nav ul{
		display: flex;
		justify-content: center;
	}

	.top__header-nav ul li{
		padding: 0 1.5em;
		border-right: 1px solid #fff;
	}

	.top__header-nav ul li:first-child{
		padding: 0 1.5em 0 0;
	}

	.top__header-nav ul li:last-child{
		padding: 0 0 0 1.5em;
		border-right: none;
	}
}


/* トップページ（フッター） */

.top__footer{
	background: #000;
	color: #fff;
	padding: 3em 2em;
	text-align: center;
}

.top__footer-menu{
	margin: 0 auto 2em;
}

.top__footer-menu-sns ul, .top__footer-menu-list ul{
	display: flex;
	justify-content: center;
}

.top__footer-menu-sns{
	margin: 0 0 1em;
}

.top__footer-menu-sns ul li{
	font-size: 2em;
	padding-right: 0.5em;
}

.top__footer-menu-list ul li{
	font-size: 0.85em;
	border-right: 1px solid #fff;
	padding-right: 1em;
	line-height: 1;
	letter-spacing: 0.2em;
}

.top__footer-menu-list ul li:last-child{
	border-right: none;
	padding-left: 1em;
}

.top__footer-menu-sns ul li:last-child, .top__footer-menu-list ul li:last-child{
	padding-right: 0;
}


.top__footer address{
	font-size: 0.7em;
}

@media screen and (min-width: 960px) {
	.top__footer{
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 1em 2em;
		align-items: center;
	}
	
	.top__footer-menu{
		margin: 0;
		display: flex;
		align-items: center;
	}
	
	.top__footer-menu-sns{
		margin: 0 2em 0;
	}
	
	.page__footer-menu{
		display: block;
	}
	
	.page__footer-menu .top__footer-menu-sns{
		margin-bottom: 0.5em;
	}
}


/* トップページ（About） */

.top__about{
	background: #000;
	color: #fff;
	padding: 5em 0 0;
	text-align: center;
}

.top__about-ttl{
	margin-bottom: 2em;
}

.top__about-ttl h2{
	font-size: 1.7em;
}

.top__about-ttl h2 span{
	color: #a17126;
}

.top__about-ttl h3{
	font-size: 1em;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.top__about-box {
    width: 80%;
	max-width: 1000px;
    margin: 0 auto;
}

.top__about-left img{
	width: 65%;
}

.top__about-right{
	margin: 2em 0 3em;
}

.top__about-right p{
	text-align: justify;
	font-size: 0.8em;
	line-height: 2em;
	margin-bottom: 2em;
}

.top__about-right h4{
	font-size: 0.9em;
    letter-spacing: 0.1em;
    margin: 0 0 0.8em;
	font-weight: 500;
	display: inline-block;
    border-bottom: 1px solid #fff;
	padding-bottom: 0.2em;
}

.top__about-right h4 span{
	color: #a17126;
}

.top__about-img {
    position: relative;
    width: 100%;
	padding-top: 10em;
}

.top__about-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
	left: 0;
    object-fit: cover;
}

.top__about-more{
	width: 100%;
}

.top__about-more a{
	font-size: 0.9em;
	background: #a17126;
	padding: 1em 1.5em;
	margin-top: 2.5em;
	position: relative;
	display: block;
}

.top__about-more a::after{
	content: '\f105';
	font: var(--fa-font-solid);
	position: absolute;
	top: 50%;
	right: 1.5em;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (min-width: 960px) {
	.top__about-ttl h2{
		font-size: 2em;
	}

	.top__about-ttl h3{
		font-size: 1em;
	}

	.top__about-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top__about-left img{
		width: 80%;
	}

	.top__about-right{
		margin: 0;
		text-align: left;
	}

	.top__about-right p{
		font-size: 0.9em;
		margin-bottom: 2em;
	}

	.top__about-right h4{
		font-size: 1em;
		padding-bottom: 0;
	}

	.top__about-img {
		padding-top: 18em;
		margin-top: 3em;
	}

	.top__about-more {
		width: 60%;
		margin-top: 2em;
	}
}



/* 共通（ページ内フッター） */

.page__footer-submenu-list{
	font-size: 0.7em;
	color: #AFAFAF;
	margin: 3em 0 2em;
	line-height: 1;
}

.page__footer-submenu-list ul li{
	margin-bottom: 1.5em;
}

.page__footer-submenu-list ul li:last-child{
	margin-bottom: 0;
}

@media screen and (min-width: 960px) {
	.page__footer{
		padding: 2em;
	}
	
	.top__footer-submenu{
		text-align: right;
	}
	
	.page__footer-submenu-list{
		margin: 0;
	}
	
	.page__footer-submenu-list ul{
		display: flex;
	}
	
	.page__footer-submenu-list ul li{
		padding-right: 1em;
		margin-right: 1em;
		border-right: 1px solid #AFAFAF;
	}
	
	.page__footer-submenu-list ul li:last-child{
		padding-right: 0;
		margin-right: 0;
		border-right: none;
	}
}



/* 共通（ページ内ヘッダー） */

.inner__header {
  background: #000;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.inner__header-in {
  padding: 0.8em;
  position: relative;
}

@media screen and (min-width: 960px) {
	.inner__header-in {
		padding: 0.8em 2em;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  height: inherit;
	}
}


/* ヘッダーのロゴ部分 */
.header__title {
	width: 170px;
}

.header__title img {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 99;
}

@media screen and (min-width: 960px) {
  .header__title img{
  }
}


/* ヘッダーのナビ部分 */

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #000;
  transition: ease .4s;
}


@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    height: inherit;
    width: 45%;
  }
}

.nav__items {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
}

.nav-item__sp {
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
	margin: 5em 0 0;
}

.nav-item__sp li{
	margin: 0 0.5em 0;
	font-size: 2em;
}


@media screen and (min-width: 960px) {
  .nav__items {
    height: initial;
    justify-content: space-evenly;
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(30px, 0);
	  padding-right: 1.5em;
  }
	
  .nav-items {
	display: flex;
	  justify-content: flex-end;
	  align-items: center;
  }
	
  .nav-items li {
	  margin-right: 2em;
  }
	
  .nav-items li:last-child {
	  margin-right: 0;
  }
	
	.nav-item__sp {
		display: none;
	}
}

/* ナビのリンク */
.nav-items__item a {
  color: #fff;
  width: fit-content;
  display: block;
  text-align: center;
  font-size: 1em;
  margin: 0 auto 2em;
	letter-spacing: 0.2em;
	padding: 0.6em 0;
}

.nav-items__item a:hover {
	border-bottom: 1px solid #fff;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
	
	.nav-items__item a {
		margin-bottom: 0;
  		color: #fff;
	}

	.header.change-color {
		height: 70px;
		background: rgba(255,255,255,0.5);
		transition: 0.3s;
	}

	.cng-text-color a{
		color: #000;
	}
}

/* アクティブページのメニュー指定 */

.menu__active {
	color: #a17126 !important;
	pointer-events: none;
}


/* ハンバーガーメニュー */

.header__hamburger {
	width: 25px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
}

.cng-hamburger-color.hamburger span {
  background-color: #fff;
}

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

.hamburger span:nth-child(2) {
  margin: 6px 0;
	width: 80%;
}

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


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
	background: #fff;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -11px;
  transform: rotate(-45deg);
	background: #fff;
}



/* サイト内部 パンくず */
.pan_list{
	width: 95%;
	margin: 80px auto 5em;
	font-size: 0.6em;
	color: #aaa;
	text-align: center;
	padding: 0 1em;
	letter-spacing: 0;
}

.pan_list nav ol{
	text-align: left;
}

.pan_list nav ol li{
	margin: 0.5em 0 0;
}

.pan_list nav ol li::after{
	content: "＞";
	padding: 0 1em;
}

.pan_list nav ol li:last-child::after{
	content: " ";
	padding: 0;
}

.pan_list a{
	border-bottom: 1px solid #aaa;
	padding-bottom: 0.2em;
}

@media screen and (min-width: 960px) {
	.pan_list{
		width: 100%;
		padding: 0 3em;
	}
	.pan_list nav ol{
		display: flex;
		justify-content: flex-start;
	}
}


/* 共通（ページ内タイトル） */

.page__ttl{
	width: 100%;
	padding: 2em;
	text-align: center;
}

.page__ttl-txt b{
	font-size: 2.8em;
	color: #a17126;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.page__ttl-txt h2{
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.1em;
}

@media screen and (min-width: 960px) {
	.page__ttl{
		padding: 2em 2em 3em;
	}
}


/* 共通（ページ内コンテンツ幅） */

.page__con90{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.page__con100{
	width: 100%;
}


/* ABOUT（メインコピー）*/

.abt__iphone-img{
	width: 80%;
	margin: 0 auto 2em;
}

.abt__copy-txt{
	text-align: center;
}

.abt__copy-txt h3{
	font-size: 1.6em;
	font-weight: 600;
}

.abt__copy-txt h4{
	font-size: 1.3em;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.abt__copy-txt h4 span{
	color: #a17126;
}

.abt__copy-txt h3{
	padding-bottom: 0.5em;
	border-bottom: 2px solid #a17126;
}

.abt__copy-txt p{
	font-size: 0.7em;
	margin: 2em 0 0;
}

.abt__app-dl-txt p {
    font-size: 1em;
    display: block;
    margin-bottom: 1.5em;
}

.abt__app-dl{
	width: 70%;
	font-size: 1em;
	color: #fff;
	background: #a17126;
	padding: 1em 4em 1em 1.5em;
	margin-top: 2.5em;
	position: relative;
}

.abt__app-dl::after{
	content: '\f105';
	font: var(--fa-font-solid);
	position: absolute;
	top: 50%;
	right: 1.5em;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (min-width: 960px) {
	.abt__copy{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.abt__copy-txt{
		text-align: left;
	}
	
	.abt__copy-txt{
		width: 50%;
	}
	
	.abt__iphone-img{
		width: 45%;
		order: 2;
		margin-bottom: 0;
	}
	
	.abt__copy-txt{
		padding-right: 2em;
		order: 1;
	}

	.abt__copy-txt h3{
		font-size: 2.4em;
	}

	.abt__copy-txt h4{
		font-size: 1.8em;
	}
	
	.abt__app-dl{
		width: 60%;
		margin-top: 4em;
	}
}


/* ABOUT（What is BRNADVOX?）*/

.abt__whatis{
	padding: 5em 0;
}

.abt__whatis-img {
	position: relative;
	width: 100%;
	padding-top: 40%;
}

.abt__whatis-img img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: cover;
}

.abt__whatis-ttl{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

.abt__whatis-ttl-border{
	content: "";
	width: 1px;
	height: 80px;
	background: #a17126;
	margin: 1em auto;
}

.abt__whatis-ttl-cap{
	color: #a17126;
	font-size: 0.9em;
	font-weight: 600;
	margin-bottom: 1.5em;
}

.abt__whatis-ttl h5{
	font-size: 1em;
	font-weight: 600;
	line-height: 1.8;
	margin-bottom: 2em;
}

.abt__whatis-txt{
	width: 80%;
	margin: 0 auto;
	border: 1px solid #707070;
	border-radius: 10px;
	padding: 2em 1.5em;
}

.abt__whatis-logo{
	width: 60%;
	margin: 0 auto 1em;
}

.abt__whatis-txt p{
	line-height: 1.8em;
	font-size: 0.9em;
	font-weight: 300;
	text-align: justify;
}

@media screen and (min-width: 960px) {
	.abt__whatis-img {
		padding-top: 25%;
	}
	
	.abt__whatis-ttl-cap{
		font-size: 1em;
	}
	
	.abt__whatis-ttl h5{
		font-size: 1.5em;
	}
	
	.abt__whatis-txt{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 3em 9em;
	}
	
	.abt__whatis-logo{
		width: 15%;
		margin-bottom: 0;
	}
	
	.abt__whatis-txt p{
		width: 70%;
		font-size: 1em;
	}
}


/* ABOUT（FOR FUTURE）*/

.abt__future{
	background: #363636;
	color: #fff;
	text-align: center;
	padding: 5em 0;
}

.abt__future-ttl {
	width: 90%;
	margin: 0 auto;
}

.abt__future-ttl h6{
	font-size: 2.2em;
	font-weight: 700;
}

.abt__future-txt{
	width: 90%;
	margin: 2em auto 0;
}

.abt__future-box{
	width: 100%;
	border-radius: 10px;
	padding: 2em 1em;
	margin-bottom: 1em;
}

.abt__future-box:last-child{
	margin-bottom: 0;
}

.abt__future-img1{
	background:  linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.7)), url("../img/abt-future-img1.jpg") no-repeat center center / cover;
}

.abt__future-img2{
	background:  linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.7)), url("../img/abt-future-img2.jpg") no-repeat center center / cover;
}

.abt__future-box-no{
	font-size: 2em;
	margin-bottom: 0.5em;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.abt__future-box-cp{
	font-size: 1.1em;
	font-weight: 500;
}

.abt__future-box p{
	font-size: 0.9em;
	font-weight: 200;
	line-height: 2;
	padding-top: 1em;
	border-top: 1px solid #fff;
	margin-top: 1em;
	text-align: justify;
}

@media screen and (min-width: 960px) {
	.abt__future-ttl h6{
		font-size: 3em;
	}

	.abt__future-txt{
		max-width: 1000px;
		margin: 4em auto 0;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}

	.abt__future-box{
		width: 49%;
		padding: 3em;
		margin: 0;
	}

	.abt__future-box-cp{
		font-size: 1.4em;
	}

	.abt__future-box p{
		font-size: 1em;
	}
}


/* ABOUT（ブラボの機能・特徴）*/

.abt__outline{
	padding: 5em 0;
}

.abt__outline-ttl{
	text-align: center;
}

.abt__outline-ttl h7{
	font-size: 1.5em;
	font-weight: 600;
	margin-bottom: 3em;
	display: block;
}

.abt__outline-box{
	margin-bottom: 3em;
}

.abt__outline-box:last-child{
	margin-bottom: 0;
}

.abt__outline-img{
	margin-bottom: 1em;
}

.abt__outline-cap{
	width: 100%;
	border-bottom: 1px solid #000;
	margin-bottom: 1em;
}

.abt__outline-cap p{
	font-size: 0.8em;
	color: #fff;
	background: #000;
	padding: 0.3em 1em;
	width: fit-content;
}

.abt__outline-cp{
	font-size: 1.4em;
	font-weight: 600;
}

.abt__outline-text{
	font-size: 0.9em;
	font-weight: 300;
	margin-top: 0.5em;
	line-height: 1.8;
	text-align: justify;
}

.abt__outline-price-btn{
	width: 70%;
    font-size: 1em;
	color: #fff;
    background: #D74632;
    margin: 3em auto 0;
    position: relative;
	border-radius: 50px;
}

.abt__outline-price-btn a{
	display: block;
    padding: 1em 2em;
}

.abt__outline-price-btn a::after{
	content: '\f105';
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: 2em;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (min-width: 960px) {

	.abt__outline-ttl h7{
		font-size: 2em;
		margin-bottom: 2em;
	}

	.abt__outline-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4em;
	}

	.abt__outline-img{
		width: 45%;
		margin-bottom: 0;
		order: 2;
	}

	.abt__outline-info{
		width: 48%;
		order: 1;
	}

	.abt__outline-cap{
		margin-bottom: 1.5em;
	}

	.abt__outline-text{
		margin-top: 1em;
	}

	.abt__outline-price-btn {
		width: 35%;
	}

	.abt__outline-price-btn a{
		padding: 1.5em 2em;
	}
}


/* 料金プラン */

.page__price{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 2em 0 5em;
}

.page__price-box-tb{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

.page__price-box-pre{
	width: 100%;
}

.page__price-box-con{
	border: 1px solid #dddddd;
	padding: 2em 2em 1em;
}

.page__price-box-red{
	border: 1px solid #C41708;
}

.page__price-box-ttl{
	text-align: center;
}

.page__price-box-ttl h5{
	font-size: 30px;
	font-weight: 700;
}

.page__price-ttl-border{
	content: "";
	width: 100%;
	height: 1px;
	background: #000;
	margin: 1em auto;
}

.page__price-ttl-txt{
	font-size: 0.8em;
}

.page__price-box-price{
	font-size: 2.8em;
	font-weight: 600;
	text-align: center;
	margin: 0.5em auto 1em;
	color: #C41708;
}

.page__price-box-price p::after{
	content: "/ 月額";
	font-size: 0.3em;
	margin-left: 0.5em;
	color: #000;
}

.table-plan table{
	width: 100%;
}

.table-plan table tr{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-weight: 500;
	align-items: center;
	border-bottom: 1px solid #dddddd;
	height: 60px;
	font-size: 0.8em;
}
.table-plan table tr:last-child{
	border: none;
	padding-bottom: 0;
}

.table-plan table tr td{
	text-align: right;
	line-height: 0.7em;
	font-size: 1.3em;
}

.table-plan table tr td span{
	font-size: 0.7em;
}

.table-plan_jp{
	font-size: 1.1em !important;
}

.table-plan .fa-xmark{
	color: #bbb;
}

.lp__sub::after{
	content: "円/月" !important;
}

.page__price-box-cp{
	font-size: 1.1em;
	color: #fff;
	position: relative;
	display: block;
	padding: 0.5em 1.5em;
	background: #C41708;
	text-align: center;
	margin: 3em 0 1em;
}

.page__price-box-cp:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 10px solid #C41708;
}

.page__price-pre h5{
	color: #C41708;
}

@media screen and (min-width: 960px) {

	.page__price-box-pre{
		width: 49%;
	}
	
	.page__price-box-cp{
		margin: 0 0 1em;
	}

}


/* HISTORY（トップのイメージ）*/

.htr__ttl-img {
	position: relative;
	width: 100%;
	padding-top: 40%;
	margin-top: 2em;
}

.htr__ttl-img img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	object-fit: cover;
}

@media screen and (min-width: 960px) {
	.htr__ttl-img {
		padding-top: 20%;
	}
}


/* HISTORY（プロフィール）*/

.htr__interview{
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 5em 0;
}

.htr__interview-pf-name{
	text-align: center;
	padding: 1em 0;
    margin-bottom: 2em;
    border-bottom: 1px solid #aaa;
}

.htr__interview-pf-name h4{
	font-size: 0.9em;
}

.htr__interview-pf-name h3{
	font-size: 1.3em;
}

.htr__interview-pf-name span{
	font-size: 0.7em;
}

.htr__interview-com{
	margin-bottom: 2em;
}

.htr__interview-com p{
	font-size: 0.9em;
	line-height: 2;
	text-align: justify;
}

.htr__interview-img{
	margin-bottom: 2em;
}

@media screen and (min-width: 960px) {
	.htr__interview-pf, .htr__interview-clm{
		display: flex;
		justify-content: space-between;
		margin-bottom: 2em;
	}
	
	.htr__interview-pf-img, .htr__interview-pf-text{
		width: 48%;
	}
	
	.htr__interview-pf-img{
		order: 2;
	}
	
	.htr__interview-pf-text{
		order: 1;
	}
	
	.htr__interview-pf-name{
		text-align: left;
		padding: 0 0 1em;
	}
	
	.htr__interview-clm .htr__interview-img{
		width: 48%;
	}
	
	.htr__interview-clm .htr__interview-com{
		width: 48%;
	}
}



/* FAQ 内容リスト */

.faq__list{
	width: 90%;
	margin: 2em auto 5em;
}

.faq__list .panel {
  display: none;
  text-align: center;
}
.faq__list .panel.active {
  display: block;
}

/* FAQブルダウン */

.top__faq-list{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
	letter-spacing: 0;
}

.top__faq-list dl {
    position: relative;
    cursor: pointer;
	border-bottom: 1px solid #E0E0E0;
}

.top__faq-list dl:last-child{
	border-bottom: none;
}

.top__faq-list dl:first-child {
	margin-top: 0;
}

.top__faq-list dl::after {
    position: absolute;
    top: 35px;
    right: 1em;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.top__faq-list .open::after {
    transform: rotate(-45deg);
}
.top__faq-list dl dt {
    position: relative;
    margin: 0;
    padding: 2em 2.5em 2em 4em;
	font-size: 0.9em;
	font-weight: 400;
}
.top__faq-list dl dt::before {
    font-size: 1.3em;
	font-weight: 400;
    line-height: 1.9;
    position: absolute;
    top: 50%;
    left: 0;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: block;
    content: 'Q';
    color: #fff;
	width: 35px;
	height: 35px;
	border-radius: 100%;
	background:#A37126;
	text-align: center;
}
.top__faq-list dl dd::before {
    font-size: 1.3em;
	font-weight: 400;
    line-height: 1.8;
    position: absolute;
	top: 0.5em;
    left: 0;
    display: block;
    content: 'A';
    color: #A37126;
	width: 35px;
	height: 35px;
	border-radius: 100%;
	background:#fff;
	border: 1px solid #A37126;
	text-align: center;
}
.top__faq-list dl dd {
    position: relative;
    margin: 0;
    padding: 1em 2.5em 2em 4em;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.8;
	text-align: justify;
}



/* COMPANY */

.page__company{
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 2em 0 5em;
}
.page__company-info dl dt{
	width: 23%;
	padding: 0 0 0.5em;
	text-align-last: justify;
    color: #A37126;
	font-weight: 600;
	font-size: 0.9em;
}

.page__company-info dl dd{
	width: 100%;
	padding: 0 0 1.5em;
	font-size: 0.9em;
	line-height: 1.5;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1.5em;
}

.page__company-info dl dd a:hover{
	border-bottom: 1px solid #000;
	padding-bottom: 0.5em;
}

dl.page__company-adress dd{
	border: 0;
	margin-bottom: 0;
}

dl.page__company-map dd{
	overflow: hidden;
	padding-top: 0;
	border: 0;
}

dl.page__company-map iframe {
    width: 100%;
}

@media screen and (min-width: 960px) {
	.page__company-info dl{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page__company-info dl dt{
		padding: 1em 5em 1em 0;
		font-size: 1em;
	}

	.page__company-info dl dd{
		width: 77%;
		padding: 2em 0 2em 5em;
		line-height: 1.8;
		border-bottom: none;
		border-left: 1px solid #ccc;
		margin: 0;
	}

	.page__company-info dl dd a:hover{
		border-bottom: 1px solid #000;
		padding-bottom: 0.5em;
	}
}



/* NEWS */

.page__news-sns{
	width: 100%;
}

.page__news-sns-box{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	border: 1px solid #ccc;
	padding: 2em 1em;
}

.page__news-sns-box h3{
	font-size: 0.9em;
}

.page__news-sns-box ul{
	display: flex;
	justify-content: center;
}

.page__news-sns-box ul li{
	margin: 1em 0.7em 0;
}

.page__news-sns-box ul li a:hover{
	color: #987334;
}

.page__news-sns-box ul li i{
	font-size: 2em;
}

.page__news{
	width: 100%;
	padding: 3em 0 5em;
}

.page__news-box{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	font-size: 0.9em;
	font-weight: 600;
}

.page__news-list{
	border-bottom: 1px solid #ccc;
}

.page__news-list a{
	padding: 2em 0;
	display: flex;
	flex-wrap: wrap;
}

.page__news-list .type{
	font-style: italic;
	color: #a17126;
	margin-left: 1em;
}

.page__news-list .text{
	width: 100%;
	margin-top: 0.5em;
	font-weight: 300;
}

@media screen and (min-width: 960px) {
	.page__news-sns-box{
		width: 60%;
	}
	
	.page__news-list a time{
		width: 12%;
	}

	.page__news-list .type{
		width: 8%;
	}

	.page__news-list .text{
		width: 78%;
		margin: 0;
	}
}



/* NEWS（詳細ページ） */

.news__ttl{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 3em 0;
}

.news__ttl-txt{
	display: flex;
	flex-wrap: wrap;
}

.news__ttl-date, .news__ttl-cate{
	font-size: 0.8em;
}

.news__ttl-cate{
	color: #a17126;
	margin-left: 1em;
}

.news__ttl-txt h2{
	width: 100%;
	font-size: 1.3em;
	font-weight: 500;
	margin: 1em 0 0;
}

.news__text{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 7em;
}

.news__text-box{
	text-align: justify;
	font-size: 0.9em;
	line-height: 1.8em;
}

.news__text-att{
	color: #aaa;
	margin-top: 1.5em;
}

.news__text-link{
	width: fit-content;
	margin: 5em auto;
}

.news__text-link a{
	border: 1px solid #000;
	padding: 1.5em 2.5em;
}

.news__text-link a:hover{
	color: #a17126;
	border: 1px solid #a17126;
}


.news__text-img{
	margin: 0 auto 2em;
	text-align: center;
}

.media-img{
	width: 100%;
	margin: 2em auto;
}

.news__text-btn{
	margin: 2em 0 0;
	text-align: center;
}

.news__text-btn p{
	font-size: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.news__text-btn p span{
	color: #B5191C;
}

.news__text-btn a{
	background: #06C755;
    border-radius: 5px;
    padding: 1em;
    color: #fff;
    font-size: 1.5em;
    display: block;
    font-weight: 600;
}

.news__text-brand{
	width: 100%;
	margin: 5em 0 3em;
}

.news__text-brand h3{
	font-size: 1.3em;
	background: #eee;
	padding: 0.5em 1em;
	margin-bottom: 2em;
}

.news__brand-info{
	width: 100%;
	margin-bottom: 2em;
}

.news__brand-info:last-child{
	margin-bottom: 0;
}

.news__brand-info p{
	font-size: 0.9em;
	line-height: 1.8em;
	margin-top: 1em;
}

.news__brand-other{
	font-size: 0.8em;
	line-height: 1.8em;
	margin-top: 2em;
}

.news__text-info{
	margin: 3em 0;
}

.news__brand-other h4{
	font-weight: 600;
}

.news__text-info h3{
	font-size: 1.3em;
	background: #eee;
	padding: 0.5em 1em;
	margin-bottom: 2em;
	line-height: 1.5;
}

.news__text-info h3 span{
	font-size: 0.8em;
	font-weight: 400;
	display: flex;
}

.news__text-info h4{
	font-size: 1.2em;
	margin-bottom: 1em;
}

.news__text-info dt{
    margin-bottom: 1em;
	font-weight: 600;
}

.news__text-info dd{
    margin: 0 0 1em;
    border-bottom: 1px solid #eee;
    padding: 0 0 1em;
}

.news__text-info a{
	color: #224A98;
}

.news__list-back{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 5em;
}

.news__list-back a{
	width: 100%;
	display: block;
	border-bottom: 1px solid #000;
	padding: 1em 0;
	font-size: 0.9em;
	position: relative;
}

.news__list-back a::after{
	content: '\f101';
    font: var(--fa-font-solid);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.news__link{
	margin: 1.5em 0;
	color: #a17126;
}

.news__link a{
	border-bottom: 1px solid #a17126;
	padding-bottom: 0.5em;
}

@media screen and (min-width: 960px) {
	.news__ttl-txt h2{
		font-size: 1.5em;
	}

	.news__text-info h3{
		display: flex;
		justify-content: space-between;
	}
	
	.news__text-brand{
		margin: 5em 0;
	}

	.news__text-brandbox{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.news__text-img{
		margin: 0 auto 2em;
		text-align: center;
	}

	.media-img{
		width: 100%;
		margin: 1em auto 2em;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.media-img img{
		width: 49%;
	}

	.news__brand-info{
		width: 47%;
	}

	.news__brand-other{
		margin-top: 1em;
	}

	.news__text-info dl{
		display: flex;
		flex-wrap: wrap;
	}

	.news__text-info dt{
		width: 15%;
		padding-bottom: 1em;
		border-bottom: 1px solid #eee;
	}

	.news__text-info dd{
		width: 80%;
		padding: 0 0 1em 5%;
	}
	
	.news__text-btn a{
		max-width: 400px;
		margin: 0 auto;
	}
}


.top__news .page__news-list a{
	color: #fff;
}

.top__news.page__news{
	padding: 0 0 5em;
}




/* BLOG */

.blog-text{
	max-width: 800px;
	margin: 0 auto;
}

.blog-text p {
    margin-bottom: 1.5em;
}

.blog-text h4 {
    font-size: 1.3em;
    font-weight: bold;
    margin: 3em 0 1em;
	text-align: center;
}

p.blog-cap {
    color: #707070;
    font-size: 0.8em;
    text-align: left;
    line-height: 1.4;
}

.blog-img {
    text-align: center;
	max-width: 700px;
	margin: 0 auto 2em;
}

.in-img{
	margin: 2em auto 0;
}

.blog-line {
    border-bottom: 1px solid #ccc;
    margin: 3em 0;
}


@media screen and (min-width: 960px) {

	.blog-img {
		margin: 0 auto 4em;
	}

}



/* ふわっとフェードイン */

.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*==================================================
下からふわっ
===================================*/

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}




/* コンテンツが少ない時のフッター位置調整 */

.page__foot-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page__foot-max {
    flex: 1;
}






/* MENU ボタン */

a.menu_btn {
    padding: 0.5em 3em;
    line-height: 1em;
	width: 250px;
}



.nav-items__item a.menu_btn:hover {
	border-bottom: none;
}

@media screen and (min-width: 960px) {

	a.menu_btn {
		padding: 0;
		width: 110px;
	}
	
}



/* BRAVO バナーボタン */

.top_bravo_btn{
	width: 250px;
	margin: 2em auto;
}

@media screen and (min-width: 960px) {

	.top_bravo_btn {
		margin: 0 auto;
	}
	
}