@charset "utf-8";
body{
	font-family: "游明朝体", YuMincho, "Yu Mincho", "Noto Serif JP", Avenir, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
}

.ui,
button,
input,
textarea {
  font-family:
    "Noto Sans",
    "游ゴシック体", YuGothic, "Yu Gothic",
    sans-serif;
}

#wrapper { background: #070E16;}

#hd .hd-ctn nav ul li a:hover { opacity:0.7;}
#hd .hd-ctn nav ul li a:hover svg { fill: #070E16; opacity:0.7;}

.footer-gradient {
    background: linear-gradient(180deg, #EFF1F1 5.41%, #EFF0F0 28.46%, #09121A 100%);
    width: 100%;
    position: relative;
    top: 0;
    padding-top: 10%;
    z-index: 100;
	max-width: 1280px;
	margin: 0 auto;
}

@media (max-width: 801px) {
	.footer-gradient { 
		background: linear-gradient(180deg, #fff 5.41%, #EFF0F0 28.46%, #09121A 100%);
	}
}

.footer-wrapper{
	background-color: #000;
    width: 100%;
    height: auto;
}

.footer-area{
	background: url(../../img/common/bg-sns-premium.webp) no-repeat;
	background-size: cover;
	max-width: 1280px;
	height:790px;
	margin: 0 auto;
}

#ft ul li{
	padding: 0;
}

@media (max-width: 640px) {
	#ft ul li{
		padding: 0 12px;
	}
}

#ft ul li a{
	line-height: 1;
	text-decoration: none;
}

#ft ul li a:hover{
	text-decoration: underline;
}

@media (max-width: 640px){
.footer-area{
		background: url(../../img/common/bg-sns-premium@sp.webp) no-repeat center;
		background-size: cover;
		max-width: initial;
		aspect-ratio: 440 / 778;
		width: 100%;
		height: 678px;
}
}


#ft{
	background: transparent;
}

#ft h3{
	margin-bottom: 36px;
}

@media (max-width: 640px) {
	#ft h3{margin-bottom: 24px;}
	#ft h3 a{ width: 100%;}
}

#ft ul{
	margin-bottom: 30px;;
}

@media (max-width: 481px) {
	#ft ul{margin-bottom: 28px;}
}
#ft ul li{
	border-right: 1px solid #fff;
	font-family: 'Noto Sans', sans-serif;
}
#ft ul li a{color: #fff; font-size:13px; padding: 0 15px;}

@media (max-width: 801px) {
	#ft ul li a{font-size: 13px;}
}

@media (max-width: 481px) {
	#ft ul li {
        border-right: none;
		padding: 0 10px;
	}
	#ft ul li a{
        font-size: 12px;
		padding: 0 ;
	}
}

#ft p{
	color: #fff;
	font-family: 'Noto Sans', sans-serif;
	font-size: 12px;
}

@media (max-width: 640px) {
	#ft p{font-size: 11px;}
}

#ft .inner-ft{padding: 310px 0 38px;}

@media (max-width: 801px) { 
	.footer-area{position: relative;}
	#ft{position: absolute; bottom: 48px; width: 100%;}
}

#choose { z-index: 4;}
#choose .inner { background: linear-gradient(180deg, #FFF 2.88%, #E8E8E8 61.54%, #FFF 100%); max-width: 1280px; margin: 0 auto;}
#choose .ttl { padding: 60px 0 0; background: url('../../img/common/bg-ttl-choose-premium.webp') no-repeat 50% top / 1280px auto; min-height: 275px;}
#choose .ttl h2 { margin-bottom:4px;}
#choose .ttl h2 img { max-width: 282px;}
#choose .ttl p { color: #fff; font-size: 27px;}
#choose .ctn{ padding: 40px 16px 56px 60px;}
#choose .ctn .caution{ font-weight: 500;}
@media (max-width: 801px) {
	#choose .ctn{ padding: 8px 0 40px 60px;}
	#choose .ttl { padding: 11.0vw 0 29vw; background: url('../../img/common/bg-ttl-choose-premium@sp.webp') no-repeat 50% 0%/ 100% auto;}
	#choose .ttl p { font-size: 20px;}
	#choose .ctn .tit{padding-bottom: 112px; left: 10px;}
}
@media (max-width: 641px) {
	#choose .ttl { padding: 10.0vw 0 24vw;}
	#ft .inner-ft{ padding: 0 0 0px;}
}

@media (max-width: 481px) {
	#choose .ttl { min-height: 212px;}
}

#sns { position: relative; z-index: 3; background: transparent;}

@media (max-width: 801px) {
	#sns { position: relative; z-index: 3; background: transparent;}
}

#sns .inner { position: relative; z-index: 1; background: transparent; background-size: 100% auto; padding: 106px 0 0;}

@media (max-width: 641px) {
	#sns .inner {  padding: 96px 0 0;}
}

@media	(max-width: 481px) {
	#sns .inner { position: relative; z-index: 1; background: transparent; background-size: 100% auto; padding: 120px 0 38vw;}
}


#sns h3 a { display: block; transition: opacity 0.3s; max-width: initial; width: 100%;}
#sns h3 a img { max-width: 200px; width: 100%;}
#sns h3 a:hover { opacity: 0.7;}
#sns h3 a:hover svg { fill: #fff; opacity: 0.7;}

#sns ul{
	display: flex;
	justify-content: center;
}

#sns ul li{
	width:80px;
}

#sns ul li a{
	width: 38px;
}

#sns ul li a:hover svg { fill: #fff; opacity: 0.7;}

@media (max-width: 801px) { 
	#sns ul li a{
		width: 38px;
	}
	#sns h3 a { 
		margin-bottom: 32px;
		max-width: 200px;
	}
	#sns h3 a img { 
		width:100%;
	}
}

@media (max-width: 481px) { 
	#sns h3 a { 
		max-width: 200px;
	}
}

/* custom */
#hd .hd-ctn .menu div span{	background-color: #fff;}
.sp-menu div span	{ background-color: #fff;}


.sp-menu.active div span:nth-child(1),
.sp-menu.active div span:nth-child(3){
	background-color: #393a39;
}