/* CSS Document */


/* ================================
   Comments : コメント
================================ */

/* 全体適用、個別ページ CSS分割法 ユーティリティは必要に応じて選択 */
/* メディアクエリはセクション単位の小分け記載で対応 */

/* ================================
   Font : フォント指定
================================ */

body {
    font-family: 'BIZ UDP Gothic', sans-serif;
	color: #1d1d1d;
}

h1, h2, h3, p, li , a {
    font-family: 'BIZ UDP Gothic', sans-serif;
	color: #1d1d1d;
}

.gradient-text{
	background: linear-gradient(-90deg, #ddc77f, #deaf79);
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.gradient-border {
	border:1px solid;
	margin-inline: auto;
    border-image: linear-gradient(-90deg, #ddc77f, #deaf79) 1; /* グラデーション */
}
.gradient-background{
	background: linear-gradient(-90deg, #DDC77F 0%, #DEAF79 54%);
}

/* ================================
   Util : 汎用機能
================================ */

.onlyPc{
	display: block;
}

.onlyMobile{
	display: none;
}

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.8rem;
	transition:all 0.3s;
}
#page-top a p{
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: linear-gradient(-90deg, #ddc77f, #deaf79);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#page-top a p span{
	display: inline-block;
	margin-bottom: 0.5em;
	vertical-align: middle;
	color: #deaf79;
	line-height: 1;
	width: 0.5em;
	height: 0.5em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(25%) rotate(-45deg);
}

#page-top a:hover{
	opacity: 0.5;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

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

/* ================================
   Navigation : ナビ指定
================================ */

/* デザイン制約上 iPad縦の幅で切り替え想定  */

@media screen and (min-width:1024px){
	.pc-navi{
		width: 100%;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translate(-50%,-0%);
		display: flex;
		height: 50px;
		background-color: #f8f8f8;
		flex-wrap: wrap;
		justify-content: center;
		z-index: 1;
	}
	.pc-navi .logo{
		width: 110px;
		height: 50px;
	}
	.pc-navi .logo img{
		width: 100%;
	}
	.pc-navi>ul{
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.pc-navi>ul>li{
		display: inline-block;
		padding:0 10px;
		position: relative;
	}
	.pc-navi>ul>li a{
		display: block;
		font-size: 15px;
		line-height: 50px;
	}
	
	.sp-navi{
		display: none;
	}

	.sp {
		display: none;
	}
	
	.submenu{
		
		visibility: hidden;
		opacity: 0;
		
		position: absolute;
		top:50px;
		left:0;
		background-color: #f8f8f8;
		width: 100%;
		height: 150px;
		transition: height 1s ease,visibility 0s, opacity 0.5s ease-in-out;
	}
	.submenu .title{
		font-weight: bold;
		font-size: 20px;
		margin-top:30px;
	}
	.submenu ul{
		margin-top:35px;
	}
	.submenu ul li{
		list-style: none;
		font-size:14px;
		margin-bottom: 12px;
	}
	.menus{
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.submenuInnerWrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 940px;
		margin:auto;
	}

}
@media screen and (max-width:1023.9px){
	.pc-navi{
		display: none;
	}
	.sp-navi{
		width: 100%;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translate(-50%, -0%);
		display: block;
		z-index: 998;
	}
	.sp-navi .bar{
		background: #f8f8f8;
	}
	.sp-navi .logo{
		width: 110px;
		height: 50px;
	}
	.sp-navi .logo img{
		width: 100%;
	}
	.sp {
		display: block;
	}
}

/* ================================
   Btns : 基本のボタン
================================ */

.btn{
	display: inline-block;
	border-radius: 300px;
	padding:8px 30px;
}
.btn a{
	display: block;
	font-weight: bold;
}

.btn-black{
	background-color: #121212;
	background-image: url("../images/common/btn-arrow_white.svg");
	background-repeat: no-repeat;
	background-position: right 8px center;
	color:white;
}
.btn-black a{
	color:white;
}
.btn-white{
	background-color: #fff;
	background-image: url("../images/common/btn-arrow_black.svg");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
.btn-gray{
	background-color: #e9e9e9;
	color:black;
	font-weight: bold;
}
.btn-gray a{
	color:black;
}
.btn-black a{
	color:white;
}

.btn-black-line{
	background-color: transparent;
	background-image: url("../images/common/btn-arrow_black.svg");
	background-repeat: no-repeat;
	background-position: right 8px center;
	border:1px solid #121212;
	color:#090303;
}
.btn-black-line:hover{
	background-color:#121212;
	color:#fff;
	text-decoration: none;
	background-image: url("../images/common/btn-arrow_white.svg");
}
.btn-white-line{
	background-color: transparent;
	background-image: url("../images/common/btn-arrow_white.svg");
	background-repeat: no-repeat;
	background-position: right 8px center;
	border:1px solid #fff;
	color:#fff;
}
.btn-white-line:hover{
	background-color:white;
	color:black;
	background-image: url("../images/common/btn-arrow_black.svg");
}
.btn-gold{
	background-color: #090303;
	background-image: url("../images/common/btn-arrow_gold.svg");
	background-repeat: no-repeat;
	background-position: right 8px center;
	border:1px solid #ddbc7c;
	color:#ddbc7c!important;
}
.btn-gold a{
	color:#ddbc7c!important;
}

/* ================================
   Parts : 基本パーツ
================================ */


.basic-radius{
	border-radius: 24px;
}
.basic-shadow{
	box-shadow: 0 0 30px rgba(0,0,0,0.25);
}
.separate .basic-width{
	width: 650px;
}
.basic-width{
	width: 650px;
}

.bg-black{
	/*background-color: #121212;*/
	background-color: #090903;
}
.bg-white{
	background-color: #fff;
}
.bg-lightgray{
	background-color: #f8f8f8;
}
/* ================================
   Layouts : 基本レイアウト
================================ */

/* width 1720pxおよび1300px */
/* 1024px未満でスマホ切り替え */
/* コンテンツに寄って見せ方は変えて良い */

.w-max,
.w-full,
.w-mid{
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
}
.w-max{
	width: 100%;
}
.w-full{
	width: 1720px;
}
.w-mid{
	width: 1300px;
}

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

.l-sepalate{
	
}

.separate {
    display: flex;
    flex-wrap: wrap;
    
}
.separate .div1,.separate .div2{
	width: 50%;
}
/* レスポンシブ対応：スマホなどの画面が狭い場合に縦並びに */
@media (max-width: 1299px) {
	.separate .div1,.separate .div2{
		width: 100%;
	}
   .separate {
        flex-direction: column; /* 縦方向に並べる */
    }
}




/* 全幅レイアウト角処理 */
.corner-top{
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
}
.corner-bottom{
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
}


/* ================================
   Footer
================================ */
@media screen and (min-width:1300px){
	div.ft-navi{
		max-width: 1300px;
		margin:30px auto auto auto;
	}
}
@media screen and (max-width:1299px){
	div.ft-navi{
		max-width: 90%;
		margin:30px auto auto auto;
	}
}
@media screen and (min-width:992px){

	div.ft-navi .logo{
		width: 102px;
		height: 46px;
	}
	footer .ft-navi .menus>ul>li{
		list-style: none;
	}
	footer .ft-navi .menus>ul>li>a,
	footer .ft-navi .menus>ul>li div>a{
		font-size:15px;
		font-weight: bold;
	}
	footer .ft-navi .menus>ul>li>ul{
		padding:0;
	}
	footer .ft-navi .menus>ul>li>ul>li{
		list-style: none;
	}
	footer .ft-navi .menus>ul>li>ul>li>a,
	li.ftmn4 .uls>ul>li a{
		font-size:13px;
	}


	footer .ft-navi .menus>ul>li.ftmn1{	width: 195px;}
	footer .ft-navi .menus>ul>li.ftmn2{	width: 245px;}
	footer .ft-navi .menus>ul>li.ftmn3{	width: 120px;}
	footer .ft-navi .menus>ul>li.ftmn4{	width: 145px;}
	footer .ft-navi .menus>ul>li.ftmn5{	width: 180px;}
	footer .ft-navi .menus>ul>li.ftmn6{	width: 180px;}
	footer .ft-navi .menus>ul>li.ftmn7{	width: 180px;}

	li.ftmn4 .uls{
		display: flex;
	}
	li.ftmn4 .uls>ul{
		padding:0;
		width: 155px;
	}
	li.ftmn4 .uls>ul>li{
		list-style: none;
	}
}
@media screen and (min-width:1300px){
	footer .ft-navi .menus>ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding:0;
	}
}
@media screen and (max-width:1299px){
	footer .ft-navi .menus>ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding:0;
	}
	footer .ft-navi .menus>ul>li.ftmn4{	width: 145px;}
}

@media screen and (min-width:992px){
	.openSubMenu{
		display: none;
	}	
}
@media screen and (max-width:991px){
	
	
	
	footer .ft-navi .menus>ul{
		display: block;
	}
	footer .ft-navi .menus>ul>li.ftmn4{	width: 100%;}

	div.ft-navi{
		padding: 15px;
	}
	div.ft-navi ul{
		padding-left:0;
	}
	div.ft-navi li{
		list-style: none;
	}
	div.ft-navi .menus>ul>li{
		border-top: solid 1px #d7d7d7;
	}
	div.ft-navi .ftmn5 div{
		border-top: solid 1px #d7d7d7;
	}
	div.ft-navi .ftmn5{
		border:none!important;
	}
	div.ft-navi{
		width: 100%;
		margin:30px auto auto auto;
	}
	div.ft-navi .logo{
		width: 102px;
		height: 46px;
	}
	
	div.ft-navi{
		
	}
	.ftmn1,
	.ftmn2,
	.ftmn3,
	.ftmn4{
		position: relative;
		/*background:url("../images/common/bottom_arrow.svg") no-repeat;
		background-position: top 15px right 10px;*/
	}
	
	.openSubMenu{
		position: absolute;
		top: 10px;
		right: 0;
		width: 30px;
		height: 30px;
		background:url("../images/common/bottom_arrow.svg") no-repeat;
		background-position: center;
	}	
	
	div.ft-navi .menus>ul>li>.uls ul,
	div.ft-navi .menus>ul>li>ul{
		display: none;
	}
	.menus>ul>li{
		padding:10px 0;
	}
	
	.menus>ul>li>ul>li{
		padding:5px 0;
	}
	.menus li.ftmn5{
		padding-top:0!important;
	}
	.ftmn5 div{
		padding:10px 0;
	}
	
	.menus>ul>li>a,
	.ftmn5 div a{
		font-size: 16px;
		font-weight: bold;
	}
	.menus>ul>li>ul>li>a{
		font-size: 14px;
		font-weight: normal;
	}
}

.ftbar{
	padding-top:10px;
	border-top: 2px solid #e7e7e7;
	font-size: 12px;
}
.ftbar p{
	font-size: 15px;
	color: #858585;
}
.ftbar>ul{
	padding:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.ftbar>ul>li{
	padding:0 10px 0 0;
	list-style: none;
	
}
.ftbar>ul>li a{
	font-size: 15px;
	color: #858585;
}


/* ================================
   #bottomContents
================================ */

#contentsBottom{
	background: linear-gradient(-100deg, #DDC77F 0%, #DEAF79 54%);
}
#contentsBottom .bspace{
	height: 100px;
	background-color:white;
}

#contentsBottom .items{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top:    100px;
	padding-bottom: 100px;
	grid-gap: 25px;
}
#contentsBottom .items.itemvr{
	padding-bottom: 0;
}
#contentsBottom .items.itemtwin{
	padding-top: 50px;
}

#contentsBottom .items .item{
	border-radius: 26px;
	width: 632px;
	height: 362px;
	position: relative;
	
}
#contentsBottom .items .item{
	background-image:no-repeat;
	background-position: center;
}
#contentsBottom .items .item.item-1{
	background-image:url("../images/top/cb_panels_contact.jpg");
}
#contentsBottom .items .item.item-2{
	background-image:url("../images/top/cb_panels_faq.jpg");
}
#contentsBottom .items .item.item-3 img{
	width: 100%;
	border-radius: 26px;
}
@media screen and (max-width:768px){
	#contentsBottom .items .item.item-3 {
		height: 365px;
	}
}
@media screen and (max-width:500px){
	#contentsBottom .items .item.item-3 {
		height: 195px;
	}
}
#contentsBottom .items .item .header{
	color:white;
	font-size:34px;
}
#contentsBottom .items .item .header{
	position: absolute;
	left:30px;
	top:20px;
}
#contentsBottom .items .item .btnWrap{
	position: absolute;
	right:10px;
	bottom:10px;
	
}

@media screen and (max-width:768px){
	#contentsBottom .items,
	#contentsBottom .items.itemtwin{
		padding:25px;
	}
	#contentsBottom .items .item{
		max-width: 632px;
		width: 100%;
		height: 195px;
	}
}

.modal-dialog,
.modal-lg{
	max-width: 1300px;
}