@charset "utf-8";
/*-----------------------------------------------
 * common.css
 * レスポンシブは基本スタイルを引き継ぐ（PCファースト）
 * @media screen and (max-width:767px)
-------------------------------------------------*/
/*-----------------------------------------------
 * Reset, root
 * Bace
 * Contents
 * Footer
-------------------------------------------------*/
/*-----------------------------------------------
 * Reset, root
-------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{font-size:100%}legend{color:#FFF}hr{display:none}img{vertical-align:bottom}select,input,button,textarea{font-size:99%}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%}.hd{display:block;width:0;height:0;overflow:hidden}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}

:root {
	--common-min-width: 1200px;
	--common-min-height: 640px;

	/* メインで使用するサイズやカラー */
	--main-font-size: 16px;
	--main-font-family: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

	/* color */
	--color-gold: 184,144,113; /* #b89071 */

	/* easing */
	--easing-outquart: cubic-bezier(0.25, 1, 0.5, 1);

	/* vw min 計算 => min(calc(数値 / var(--vw-min) * 100vw), 数値); */
	--vw-min: 1200;
}
@media screen and (max-width:767px){
	:root {
		--common-min-width: 100%;
		--common-min-height: auto;
		--main-font-size: 3.2vw;

		/* vw min 計算 => min(calc(数値 / var(--vw-min) * 100vw), 数値); */
		--vw-min: 750;
	}
}


/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
body{
    -webkit-text-size-adjust: 100%;
	background-color: #000;
	color: #fff;
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 1.8;
	word-wrap: break-word;
}
.pc{ display: block; }
.sp{ display: none; }
a{ color: #fff; }
a:hover{ text-decoration: none; }
.ah { transition: opacity .3s ease; }
.ah:hover { opacity: .7; }
::selection{
    background: #B7D4F9;
    color: #000;
}
::-moz-selection{
    background: #B7D4F9;
    color: #000;
}
@media screen and (max-width:767px){
	.sp{ display: block; }
	.pc{ display: none; }
	.ah:hover { opacity: 1; }
}

/**
 * scroll bar
 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--color-gold));
    margin: 2px;
    box-shadow: none;
}

/**
 * font
 */
.font-Bellefair {
	font-family: 'Bellefair', serif;
}
.font-e {
	font-family: mrs-eaves-roman-petite-caps,serif;
}
/* 平体*/
 .font-wide {
	letter-spacing: 0.25em;
	transform: scale(1.2, 1);
	transform-origin: left;
}

/**
 * Wrap
 * 大枠のwrap指定
 */
/* fullWrap */
#fullWrap {
	display: flex;
	flex-direction: column;
	min-width: 1200px;
	min-height: 100vh;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	#fullWrap {
		min-width: 100%;
	}
}

/*-----------------------------------------------
 * Contents
-------------------------------------------------*/
.main {
	position: relative;
	z-index: 1;
}

/**
 * mainBox
 */
.main__mainBox {
	width: 620px;
	height: 100%;
	margin: 0 auto;
}
.main__mainBox__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	position: relative;
}
.main__mainBox__cont {
	width: 100%;
	padding: 50px 0;
}
@media (orientation: portrait) and (min-width: 768px) {
	.main__mainBox {
		height: 740px;
	}
	.main__mainBox__inner {
		min-height: 100%;
	}
}
@media screen and (max-width:767px){
	.main__mainBox {
		width: 100%;
		height: auto;
	}
	.main__mainBox__inner {
		min-height: auto;
	}
	.main__mainBox__cont {
		padding: calc(100 / var(--vw-min) * 100vw) 0;
	}
}

/* logo, title */
.main__logo {
	width: 160px;
	margin: 0 auto 20px;
}
.main__logo img {
	width: 100%;
}
.main__title {
	width: 430px;
	margin: 0 auto;
}
.main__title img {
	width: 100%;
}
@media screen and (max-width:767px){
	.main__logo {
		width: calc(240 / var(--vw-min) * 100vw);
		margin: 0 auto calc(40 / var(--vw-min) * 100vw);
	}
	.main__title {
		width: calc(600 / var(--vw-min) * 100vw);
	}
}

/* emblem */
.main__em {
	width: 360px;
	margin: 30px auto 0;
}
.main__em img {
	width: 100%;
}
@media screen and (max-width:767px){
	.main__em {
		width: calc(500 / var(--vw-min) * 100vw);
		margin: calc(60 / var(--vw-min) * 100vw) auto 0;
	}
}

/* read */
.main__read {
	font-size: 26px;
	margin-top: 20px;
	text-align: center;
}
@media screen and (max-width:767px){
	.main__read {
		font-size: calc(36 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

/* start */
.main__start {
	width: 367px;
	margin: 30px auto 0;
}
.main__start img {
	width: 100%;
}
@media screen and (max-width:767px){
	.main__start {
		width: calc(520 / var(--vw-min) * 100vw);
		margin: calc(60 / var(--vw-min) * 100vw) auto 0;
	}
}

/**
 * charaBox
 */
.main__charaBox {
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	z-index: 1;
}
.main__charaBox__sticky {
	width: 100%;
	height: 100vh;
	min-height: 640px;
	padding: 10px;
	position: sticky;
	top: 0;
}
.charaOneWrap {
	width: 100%;
	height: 100%;
	position: relative;
}
@media (orientation: portrait) and (min-width: 768px) {
	.main__charaBox__sticky {
		height: 100%;
		min-height: auto;
	}
}
@media screen and (max-width:767px){
	.main__charaBox {
		height: auto;
		position: relative;
		top: auto;
	}
	.main__charaBox__sticky {
		height: auto;
		min-height: auto;
		padding: calc(10 / var(--vw-min) * 100vw);
	}
	.charaOneWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: auto;
	}
}

/* chara */
.charaOne {
	border-radius: 5px;
	width: calc(280 / var(--vw-min) * 100vw);
	min-width: 280px;
	max-width: 400px;
	height: calc(50% - 5px);
	overflow: hidden;
	position: absolute;
}
.charaOne:before {
	content: "";
	background-repeat: repeat;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
@media screen and (max-width:767px){
	.charaOne {
		width: calc(50% - calc(5 / var(--vw-min) * 100vw));
		min-width: auto;
		max-width: 100%;
		height: calc(500 / var(--vw-min) * 100vw);
		position: relative;
	}
}

.charaOne__inner {
	background-image: url(../img/chara_frame_1.svg), url(../img/chara_frame_2.svg), url(../img/chara_frame_3.svg), url(../img/chara_frame_4.svg);
	background-size: auto;
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	width: 100%;
	height: calc(100% - 8px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.charaOne__inner:before {
	content: "";
	background-image: url(../img/chara_frame_line_top.svg), url(../img/chara_frame_line_bottom.svg);
	background-size: auto;
	background-position: top left, bottom left;
	background-repeat: repeat-x;
	width: calc(100% - 80px);
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.charaOne__inner:after {
	content: "";
	background-image: url(../img/chara_frame_line_left.svg), url(../img/chara_frame_line_right.svg);
	background-size: auto;
	background-position: top left, top right;
	background-repeat: repeat-y;
	width: calc(100% - 13px);
	height: calc(100% - 100px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.charaOne__img {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.charaOne__img:before {
	content: "";
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	width: 106px;
	height: 100%;
	position: absolute;
	top: 16px;
	left: 16px;
}
.charaOne__img img {
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.charaOne__img:before {
		width: calc(120 / var(--vw-min) * 100vw);
		top: 6vw;
		left: 5vw;
	}
}

.charaOne__nameWrap {
	background: url(../img/chara_shadow.png) repeat-x center bottom / auto;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: 100;
}
.charaOne__name {
	color: #ba8f6f;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.5em;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 10px;
}
.charaOne__name:before{
	content: attr(data-kana);
	font-size: 50%;
	font-weight: 500;
	letter-spacing: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: -1em;
	left: 0;
}
.charaOne__name > .font-min {
	font-size: 80%;
}
@media screen and (max-width:767px){
	.charaOne__name {
		font-size: calc(34 / var(--vw-min) * 100vw);
		bottom: calc(20 / var(--vw-min) * 100vw);
	}
}

/* chara1 */
.charaOne.is-chara1 {
	background: rgb(70,9,9);
	background: linear-gradient(0deg, rgba(70,9,9,1) 0%, rgba(148,40,40,1) 100%);
	top: 0;
	left: 0;
}
.charaOne.is-chara1:before { background-image: url(../img/chara1_ptn.png); }
.charaOne.is-chara1 .charaOne__img:before { background-image: url(../img/chara1_em.png); }
.charaOne.is-chara1 .charaOne__img img { margin-left: 20px; }
@media screen and (max-width:767px){
	.charaOne.is-chara1 .charaOne__img img {
		width: 120%;
		margin-left: 4vw;
	}
}

/* chara2 */
.charaOne.is-chara2 {
	background: rgb(10,37,70);
	background: linear-gradient(0deg, rgba(10,37,70,1) 0%, rgba(39,90,154,1) 100%);
	top: 0;
	right: 0;
}
.charaOne.is-chara2:before { background-image: url(../img/chara2_ptn.png); }
.charaOne.is-chara2 .charaOne__img:before { background-image: url(../img/chara2_em.png); }
.charaOne.is-chara2 .charaOne__img img { margin-left: 10px; }
@media screen and (max-width:767px){
	.charaOne.is-chara2 .charaOne__img img {
		width: 110%;
		margin-left: 1vw;
		margin-top: 1vw;
	}
}

/* chara3 */
.charaOne.is-chara3 {
	background: rgb(6,45,10);
	background: linear-gradient(0deg, rgba(6,45,10,1) 0%, rgba(47,132,55,1) 100%);
	bottom: 0;
	left: 0;
}
.charaOne.is-chara3:before { background-image: url(../img/chara3_ptn.png); }
.charaOne.is-chara3 .charaOne__img:before { background-image: url(../img/chara3_em.png); }
.charaOne.is-chara3 .charaOne__img img { margin-top: -30px; }
@media screen and (max-width:767px){
	.charaOne.is-chara3 {
		margin-top: calc(10 / var(--vw-min) * 100vw);
	}
	.charaOne.is-chara3 .charaOne__img img {
		width: 150%;
		margin-top: -6vw;
		margin-left: 3vw;
	}
}

/* chara4 */
.charaOne.is-chara4 {
	background: rgb(51,9,59);
	background: linear-gradient(0deg, rgba(51,9,59,1) 0%, rgba(126,66,137,1) 100%);
	bottom: 0;
	right: 0;
}
.charaOne.is-chara4:before { background-image: url(../img/chara4_ptn.png); }
.charaOne.is-chara4 .charaOne__img:before { background-image: url(../img/chara4_em.png); }
.charaOne.is-chara4 .charaOne__img img { margin-top: 20px; margin-right: 90px; }
@media screen and (max-width:767px){
	.charaOne.is-chara4 {
		margin-top: calc(10 / var(--vw-min) * 100vw);
	}
	.charaOne.is-chara4 .charaOne__img img {
		width: 170%;
		margin-top: 2vw;
		margin-right: 17vw;
	}
}

/**
 * qArea
 */
.qArea {
	margin-top: 40px;
}
.qArea__text {
	font-size: 24px;
	text-align: center;
}
@media screen and (max-width:767px){
	.qArea {
		margin-top: calc(80 / var(--vw-min) * 100vw);
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.qArea__text {
		font-size: calc(30 / var(--vw-min) * 100vw);
	}
}

/* lists */
.qArea__lists {
	width: 580px;
	margin: 40px auto 0;
}
.qArea__lists > li {
	height: 62px;
}
.qArea__lists > li:not(:first-child) {
	margin-top: 16px;
}
.qArea__lists > li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 18px;
	position: relative;
	text-decoration: none;
	transition: color .3s ease;
}
.qArea__lists > li a:hover {
	color: #ba8f6f;
}
@media screen and (max-width:767px){
	.qArea__lists {
		width: 100%;
	}
	.qArea__lists > li {
		height: calc(100 / var(--vw-min) * 100vw);
	}
	.qArea__lists > li:not(:first-child) {
		margin-top: calc(30 / var(--vw-min) * 100vw);
	}
	.qArea__lists > li a {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

.qArea__lists > li a:before {
	content: "";
	border: 1px solid #ba8f6f;
	clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	transition: border .3s ease;
}
.qArea__lists > li a:after {
	content: "";
	background-color: #ba8f6f;
	-webkit-mask-image: url(../img/frame_deco_tl.svg),url(../img/frame_deco_tr.svg),url(../img/frame_deco_bl.svg),url(../img/frame_deco_br.svg);
	mask-image: url(../img/frame_deco_tl.svg),url(../img/frame_deco_tr.svg),url(../img/frame_deco_bl.svg),url(../img/frame_deco_br.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top left, top right, bottom left, bottom right;
	mask-position: top left, top right, bottom left, bottom right;
	-webkit-mask-size: 9px;
	mask-size: 9px;
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 1px;
	z-index: 1;
	transition: background-color .3s ease;
}
.qArea__lists > li a:hover:before{
	border-color: #fff;
}
.qArea__lists > li a:hover:after{
	background-color: #fff;
}

/**
 * result
 */
.main-r {
	padding-top: 50px;
	position: relative;
}
.main-r:before {
	content: "";
	background: rgb(0,0,0);
	width: 100%;
	height: 480px;
	pointer-events: none;
	position: fixed;
	top: 0;
	z-index: 0;
}
@media screen and (max-width:767px){
	.main-r {
		padding-top: calc(100 / var(--vw-min) * 100vw);
	}
	.main-r:before {
		height: calc(600 / var(--vw-min) * 100vw);
	}
}

.main-r.is-chara1:before { background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(51,7,7,1) 100%); }
.main-r.is-chara2:before { background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(10,37,70,1) 100%); }
.main-r.is-chara3:before { background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(6,45,10,1) 100%); }
.main-r.is-chara4:before { background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(51,9,59,1) 100%); }

/* inner */
.main-r__inner {
	width: 540px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.main-r__cont {
	margin-top: 40px;
}
@media screen and (max-width:767px){
	.main-r__inner {
		width: 100%;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
	.main-r__cont {
		margin-top: calc(60 / var(--vw-min) * 100vw);
	}
}

/* text */
.main-r__text1,
.main-r__text2 {
	font-size: 24px;
	text-align: center;
}
@media screen and (max-width:767px){
	.main-r__text1,
	.main-r__text2 {
		font-size: calc(30 / var(--vw-min) * 100vw);
	}
}

/* em */
.main-r__em {
	margin-top: 20px;
	padding: 50px 0;
	position: relative;
}
.main-r__em:before {
	content: "";
	background: url(../img/frame2_deco_top.png) no-repeat top center / contain;
	width: 544px;
	height: 26px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}
.main-r__em:after {
	content: "";
	background: url(../img/frame2_deco_bottom.png) no-repeat top center / contain;
	width: 544px;
	height: 26px;
	margin: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
}
@media screen and (max-width:767px){
	.main-r__em {
		margin-top: calc(40 / var(--vw-min) * 100vw);
		padding: calc(60 / var(--vw-min) * 100vw) 0;
	}
	.main-r__em:before,
	.main-r__em:after {
		width: 100%;
		height: calc(36 / var(--vw-min) * 100vw);
	}
}

.main-r__em__inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.main-r__em__text {
	display: flex;
	flex-direction: column;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.5em;
	text-align: center;
}
.main-r__em__text:before{
	content: attr(data-kana);
	font-size: 50%;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	width: 100%;
	margin-left: -0.5em;
	text-align: center;
}
@media screen and (max-width:767px){
	.main-r__em__text {
		font-size: calc(40 / var(--vw-min) * 100vw);
	}
}

.main-r__em__inner:before {
	content: "";
	background: no-repeat center / contain;
	display: block;
	width: 106px;
	height: 126px;
	margin-right: 24px;
}
@media screen and (max-width:767px){
	.main-r__em__inner:before {
		width: calc(136 / var(--vw-min) * 100vw);
		height: calc(163 / var(--vw-min) * 100vw);
		margin-right: calc(34 / var(--vw-min) * 100vw);
	}
}
.main-r.is-chara1 .main-r__em__inner:before { background-image: url(../img/chara1_em.png); }
.main-r.is-chara2 .main-r__em__inner:before { background-image: url(../img/chara2_em.png); }
.main-r.is-chara3 .main-r__em__inner:before { background-image: url(../img/chara3_em.png); }
.main-r.is-chara4 .main-r__em__inner:before { background-image: url(../img/chara4_em.png); }

/* photo */
.main-r__photo {
	width: 540px;
	margin-top: 30px;
}
.main-r__photo img {
	width: 100%;
}
@media screen and (max-width:767px){
	.main-r__photo {
		width: 100%;
		margin-top: calc(50 / var(--vw-min) * 100vw);
	}
}

/* lists */
.main-r__lists {
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}
.main-r__lists > li {
	width: calc((100% - 20px) / 2);
	height: 62px;
}
.main-r__lists > li a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 18px;
	position: relative;
	text-decoration: none;
	transition: color .3s ease;
}
.main-r__lists > li a:hover {
	color: #ba8f6f;
}
@media screen and (max-width:767px){
	.main-r__lists {
		display: block;
		margin-top: calc(100 / var(--vw-min) * 100vw);
	}
	.main-r__lists > li {
		width: 100%;
		height: calc(100 / var(--vw-min) * 100vw);
	}
	.main-r__lists > li:not(:first-child) {
		margin-top: calc(30 / var(--vw-min) * 100vw);
	}
	.main-r__lists > li a {
		font-size: calc(30 / var(--vw-min) * 100vw);
	}
}

.main-r__lists > li a:before {
	content: "";
	border: 1px solid #ba8f6f;
	clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	transition: border .3s ease;
}
.main-r__lists > li a:after {
	content: "";
	background-color: #ba8f6f;
	-webkit-mask-image: url(../img/frame_deco_tl.svg),url(../img/frame_deco_tr.svg),url(../img/frame_deco_bl.svg),url(../img/frame_deco_br.svg);
	mask-image: url(../img/frame_deco_tl.svg),url(../img/frame_deco_tr.svg),url(../img/frame_deco_bl.svg),url(../img/frame_deco_br.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: top left, top right, bottom left, bottom right;
	mask-position: top left, top right, bottom left, bottom right;
	-webkit-mask-size: 9px;
	mask-size: 9px;
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 1px;
	z-index: 1;
	transition: background-color .3s ease;
}
.main-r__lists > li a:hover:before{
	border-color: #fff;
}
.main-r__lists > li a:hover:after{
	background-color: #fff;
}

.main-r__lists > li a > span {
	display: flex;
	align-items: center;
}
.main-r__lists > li a > span.is-x:after {
	content: "";
	background-color: #fff;
	-webkit-mask: url(../img/sns/icon_x.svg) no-repeat center / contain;
	mask: url(../img/sns/icon_x.svg) no-repeat center / contain;
	width: 22px;
	height: 22px;
	margin-left: 10px;
	transition: background-color .3s ease;
}
.main-r__lists > li a:hover > span.is-x:after {
	background-color: #ba8f6f;
}
@media screen and (max-width:767px){
	.main-r__lists > li a > span.is-x:after {
		width: calc(32 / var(--vw-min) * 100vw);
		height: calc(32 / var(--vw-min) * 100vw);
		margin-left: calc(10 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * Footer
-------------------------------------------------*/
.footer {
	margin-top: auto;
	padding: 80px 0;
	position: relative;
	z-index: 2;
}
@media screen and (max-width:767px){
	.footer {
		padding: calc(120 / var(--vw-min) * 100vw) 0;
	}
}

/* bnr */
.footer__bnr {
	width: 240px;
	margin: 0 auto 60px;
}
.footer__bnr img {
	width: 100%;
}
@media screen and (max-width:767px){
	.footer__bnr {
		width: calc(380 / var(--vw-min) * 100vw);
		margin: 0 auto calc(60 / var(--vw-min) * 100vw);
	}
}

/* flex */
.footer__flex {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 0 40px;
}
.footer__right {
	display: flex;
	flex-direction: column;
}
.footer__left {
	display: flex;
	flex-direction: column;
}
@media screen and (max-width:767px){
	.footer__flex {
		display: block;
		padding: 0;
	}
	.footer__right {
		justify-content: center;
	}
	.footer__left {
		margin-top: calc(50 / var(--vw-min) * 100vw);
	}
}

/* share */
.footer__share {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.footer__share > dt {
	font-size: 14px;
	line-height: 1;
	margin-right: 20px;
}
@media screen and (max-width:767px){
	.footer__share {
		justify-content: center;
		margin-left: inherit;
	}
	.footer__share > dt {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-right: calc(40 / var(--vw-min) * 100vw);
	}
}

.shareLists {
	display: flex;
}
.shareLists__item {
    width: 30px;
    height: 30px;
}
.shareLists__item:not(:first-child) {
	margin-left: 10px;
}
.shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.shareLists__link:before {
	content: "";
	background-color: #fff;
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .4s ease;
}
@media screen and (max-width:767px){
	.shareLists__item {
		width: calc(60 / var(--vw-min) * 100vw);
		height: calc(60 / var(--vw-min) * 100vw);
	}
	.shareLists__item:not(:first-child) {
		margin-left: calc(20 / var(--vw-min) * 100vw);
	}
}

/* 各SNSパーツ */
.shareLists__item.is-twitter .shareLists__link:before {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url(../img/sns/icon_x.svg);
	mask-image: url(../img/sns/icon_x.svg);
}
.shareLists__item.is-facebook .shareLists__link:before {
	width: 20px;
	height: 20px;
	-webkit-mask-image: url(../img/sns/icon_fb.svg);
	mask-image: url(../img/sns/icon_fb.svg);
}
.shareLists__item.is-line .shareLists__link:before {
	width: 20px;
	height: 21px;
	-webkit-mask-image: url(../img/sns/icon_line.svg);
	mask-image: url(../img/sns/icon_line.svg);
}
@media screen and (max-width:767px){
	.shareLists__item.is-twitter .shareLists__link:before {
		width: calc(36 / var(--vw-min) * 100vw);
		height: calc(36 / var(--vw-min) * 100vw);
	}
	.shareLists__item.is-facebook .shareLists__link:before {
		width: calc(40 / var(--vw-min) * 100vw);
		height: calc(40 / var(--vw-min) * 100vw);
	}
	.shareLists__item.is-line .shareLists__link:before {
		width: calc(40 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
}

/* footerLinkLists */
.footerLinkLists {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.footerLinkLists > li {
	position: relative;
}
.footerLinkLists > li:not(:first-child) {
	margin-left: 1em;
	padding-left: 1em;
}
.footerLinkLists > li:not(:first-child):before {
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1em;
	background: rgba(255,255,255,.4);
}
.footerLinkLists > li a {
	font-size: 16px;
	line-height: 2;
	text-decoration: none;
	white-space: nowrap;
}
@media screen and (max-width:767px){
	.footerLinkLists {
		justify-content: center;
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.footerLinkLists > li a {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

/* caution */
.footer__caution {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
	opacity: .4;
	margin-top: auto;
}
.footer__copyright {
	color: #fff;
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	opacity: .4;
	margin-top: 14px;
}
@media screen and (max-width:767px){
	.footer__caution {
		font-size: calc(20 / var(--vw-min) * 100vw);
		text-align: center;
	}
	.footer__copyright {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
		text-align: center;
	}
}