@charset "utf-8";
/*-----------------------------------------------
 * common.css
 * レスポンシブは基本スタイルを引き継ぐ（PCファースト）
 * @media screen and (max-width:767px)
-------------------------------------------------*/
/*-----------------------------------------------
 * Reset, root
 * Bace
 * Modal
 * Header
 * Footer
 * Parts
-------------------------------------------------*/
/*-----------------------------------------------
 * 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: 'M PLUS Rounded 1c',"Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

	--font-en: 'Biryani', sans-serif;
	--font-mincho: 'Zen Old Mincho', serif;

	/* easing */
	--easing-outquart: cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width:767px){
	:root {
		--common-min-width: 100%;
		--common-min-height: auto;
		--main-font-size: 12px;
	}
}

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}


/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
html{
	height: 100%;
}
body{
	-webkit-text-size-adjust: 100%;
	background-color: #1176d4;
	color: #000;
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	font-weight: normal;
	letter-spacing: 0.07em;
	line-height: 1.8;
	word-wrap: break-word;
}
.pc{ display: block; }
.sp{ display: none; }
a{ color: #222; }
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: #fff;
}
::-webkit-scrollbar-thumb {
	background: #039aef;
	margin: 2px;
	box-shadow: none;
}


/**
 * Wrap
 * 大枠のwrap指定
 */
/* fullWrap */
#fullWrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	z-index: 1;
	/*overflow-y: hidden;*/
	/*overflow: hidden;*/
}


/*-----------------------------------------------
 * Modal
-------------------------------------------------*/
/**
 * modalBox
 * 基盤のモーダル
 */
.modalBox{
	-webkit-overflow-scrolling: touch;
	background: rgba(0,0,0,.85);
	background: rgba(255,255,255,.85);;
	-webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.oneModal{
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}
.oneModal.is-show {
	display: block;
}

/* oneModalIn */
.oneModalIn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
}
.oneModalIn__cont{
	padding: 50px 0;
}
@media screen and (max-width:767px){
	.oneModalIn{
		min-width: 100%;
	}
	.oneModalIn__cont{
		width: 100%;
	}
}

/**
 * closeBtn
 */
.closeBtn{
	width: 80px;
	height: 80px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
@media screen and (max-width:767px){
	.closeBtn{
		width:50px;
		height:50px;
	}
}

.closeBtn a {
	background-color: #039aef;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* img */
.closeBtn a:before {
	content: "";
	background: url(/wp-content/themes/mobkara/assets/img/common/icon/icon_close.png) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
}

/**
 * iframe
 */
/* common */
.commonIframe{
	width: 100%;
	height: 100%;
	display: block;
}

/* youtube */
.youtubeIframeWrap {
	width: 70%;
	max-width: 159.993vh;
	position: relative;
}
@media screen and (max-width:767px){
	.youtubeIframeWrap {
		width: 100%;
		max-width: 100%;
		margin: 50px 0;
	}
}
.youtubeIframeWrap:before{
	content: "";
	display: block;
	padding-top: 56.25%;
	z-index: 0;
}
.youtubeIframe{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}


/*-----------------------------------------------
 * Header
-------------------------------------------------*/
.header.fixed {
	width: 100%;
	min-width: 1200px;
	position: fixed;
	left: 0;
	top: 0;
	/*z-index: 999;*/
	z-index: 20;
	opacity: 0;
	transition: opacity .3s ease;
	filter: drop-shadow(4px 4px 4px rgba(153, 153, 153, 0.6));
}
.sub .header.fixed {
	opacity: 1!important;
	filter: drop-shadow(4px 4px 4px rgba(153, 153, 153, 0.6));
	z-index: 100;
	pointer-events: none;	
}
.logo.fixed img{
	position: absolute;
	left: 40px;
	opacity: 0;
	/*transition: all .3s ease;*/
}
.logo.fixed.view img{
	opacity: 1;
	/*transform:translateY(0);*/
}
.sub .header.is-active .logo{
	display: none;
}
.header.fixed.view{
	opacity: 1;
}

/* inner */
.header.fixed .header__inner {
	/*background-color: #FFF;*/
	position: relative;
	z-index: 100;
	width: 100%;
	height: 180px;
    clip-path: polygon(0% 0%, 100% 0%,100% 90px, 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
    background: url(/wp-content/themes/mobkara/assets/img/top/mv_top_bg2.jpg) no-repeat center top fixed;
    background-size: 100% auto; 
	box-shadow:6px 6px 22px 10px #9d9999;
}
@media screen and (max-width:767px){
	.header__inner {
		background-color: rgba(0,0,0,.7);
		-webkit-overflow-scrolling: touch;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}
}

/**
 * headerNav
 */
 .header.fixed .headerNav,
 .header.fixed .headerNav__inner,
 .header.fixed .headerNav__cont {
	width: 100%;
	height: 100%;
}
.header.fixed .headerNav__inner{
	padding: 20px 0;
}

/*NAV*/
.headerNavLists{
	text-align: left;
	font-weight: bold;
	margin-bottom: 0;
}
.headerNavLists__item{
	font-size: min(1.5vw, 24px);
	font-family: var(--font-en);
	margin-bottom: 30px;
	line-height: 1;
	padding-left: 50px;
	position: relative;
}
.header.fixed .headerNavLists__item{
	font-size: 16px;
	margin-bottom: 0;
	padding-left: 30px;
}
.headerNavLists__item a{
	text-decoration: none;
	color: #000;
	position: relative;
}
.headerNavLists__item a::after{
	content: "";
	display: block;
    width: 0;
    height: 4px;
    background-color: #039aef;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
	opacity: 0;
	transition: all .3s;
}
.header.fixed .headerNavLists__item a::after{
	height: 2px;
    bottom: -5px;
}
.headerNavLists__item::before{
	content: "";
	display: block;
	background: url(/wp-content/themes/mobkara/assets/img/common/memu_icon.png) no-repeat left center;
	background-size: 100% auto;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
	top: -10px;
	opacity: 0;
	transition: all .3s;
}
.header.fixed .headerNavLists__item::before{
	width: 25px;
    height: 25px;
    top: -5px;
}
.headerNavLists__item:hover::before,
.headerNavLists__item.is-active::before{
	opacity: 1;
}
.headerNavLists__item a:hover::after,
.headerNavLists__item.is-active a::after{
    width: 100%;
	opacity: 1;
}



@media screen and (max-width:767px){
	.header{
		z-index: -1000;
		pointer-events: none;
	}
	.header.is-active{
		z-index: 100;
		pointer-events: all;
	}
	.headerNav {
		height: calc(100% + 1px);
		position: relative;
		padding: 10vw 5vw;
	}
	.headerNav__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: 100%;
		margin: 0 auto;
		position: relative;
		background: url(/wp-content/themes/mobkara/assets/img/common/sp_menu_bg.jpg) no-repeat center center;
		background-size: cover;
		border-radius: 20px;
	}
	.headerNav__cont {
		height: auto;
		margin: 10vw 0;
		position: relative;
		width: 50vw;
	}
	.headerNavLists__item{
		font-size: 28px;
		margin-bottom: 0;
		padding-left: 0;
		text-align: center;
		background: url(/wp-content/themes/mobkara/assets/img/common/sp_menu_line.png) no-repeat center bottom;
		background-size: 100% auto;
		padding-bottom: 9vw;
	}
	.headerNavLists__item a::after{
		display: none;
	}
	.headerNavLists:last-child .headerNavLists__item:last-child{
		background: none;
		padding-bottom: 0;
	
	}
	.headerNavLists__item::before{
		display: none;
	}
	
}

/**
 * headerNavLists
 */
 .header.fixed .headerNavLists {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	height: 40px;
	pointer-events: all;
}
.header.fixed .headerNavLists__item {
	margin: 0 15px;
	
}
.header.fixed .headerNavLists__item a {
	color: #000;
}
@media screen and (max-width:767px){
	.headerNavLists {
		display: block;
		margin-bottom: 0;
	}
	.headerNavLists__item {
		height: auto;
	}
	.headerNavLists__item{
		margin-top: 20px;
	}
	.headerNavLists:first-child .headerNavLists__item:first-child{
		margin-top: 0;
	}

}

/* a */
.header.fixed .headerNavLists__item > a {
	/* 固定時 */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 16px;
	font-weight: 800;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.headerNavLists__item > a {
		display: block;
		color: #fff;
		height: auto;
		font-size: 16px;
		padding: 0 0 0 0;
	}
}

/**
 * navBtn
 */
@media screen and (max-width:767px){
	.header__navBtnWrap {
		background: url(/wp-content/themes/mobkara/assets/img/common/sp_btn.png) no-repeat center center;
		background-size: contain;
		width:  calc(79 / 375 * 100vw);
		height: calc(116 / 375 * 100vw);
		position: fixed;
		top: 1vw;
		right: 0;
		z-index: 2000;
	}
	.header__navBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.header__navBtn__lineWrap {
		width: 22px;
		height: 17px;
		position: relative;
		margin-top: -15%;
		margin-right: -5%;
	}
	.header__navBtn--line {
		background-color: #fff;
		display: block;
		width: 100%;
		height: 2px;
		margin: auto;
		position: absolute;
	}
	.header__navBtn--line:nth-child(1) {
		top: 0;
	}
	.header__navBtn--line:nth-child(2) {
		top: 0;
		bottom: 0;
	}
	.header__navBtn--line:nth-child(3) {
		bottom: 0;
	}
}

/**
 * active
 */
@media screen and (max-width:767px){
	.header__inner {
		opacity: 0;
		transition: opacity .5s var(--easing-outquart);
		/*transform: translateX(100%);
		*/
	}
	.header.is-active .header__inner {
		opacity: 1;
		/*transform: translateX(0);*/
	}
	.header__navBtn--line {
		transition: transform .3s ease,
					opacity .3s ease;
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(1) {
		transform: rotate(45deg);
		top: 7px;
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(3) {
		transform: rotate(-45deg);
		bottom: 7px;
	}
	.header__navBtn.is-active .header__navBtn--line:nth-child(2) {
		transform: translateX(20%);
		opacity: 0;
	}
}


/*-----------------------------------------------
 * Parts
-------------------------------------------------*/
/**
 * shareLists
 */
.shareLists {
	display: flex;
}

/* item */
.shareLists__item {
	width: 60px;
	height: 60px;
}


/*TO TOP*/
.toTop {
	position: absolute;
	z-index: 51;
	right: 35px;
	top: 50px;
	transform: translateY(-53px) ;
}
.toTop_img{
	width: 100px;
}
.toTop_img img{
	width: 100%;
	height: auto;
}
.toTop:hover .toTop_img{
	transform: rotateY(-360deg);
    transition: .5s ease-out;
	-webkit-transition:.5s ease-out;

}
.toTop span{
	color: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
    align-items: center;
    justify-content: center;
}
/*
@keyframes txt_opacity{
	0%{opacity: 1;}
	50%{ opacity:0; }
	100%{ opacity:1; }
}
.toTop:hover span{
	animation: txt_opacity .5s ease-out backwards;
}
*/

@media screen and (max-width: 767px){
	.toTop {
		position: absolute;
		z-index: 51;
		right: 15px;
		top: 50px;
		transform: translateY(-35px) ;
	}
	.toTop:hover .toTop_img{
		transform: rotateY(0);
	}
	.toTop_img{
		width: 70px;
	}

}



/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
.loading{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10002;
	pointer-events: none;	
}
.loading_inner{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFF;
	display: flex;
	align-items: center;
}
@media screen and (max-width: 767px){
	.loading_logo{
		width: 40%;
	}
}
.loading_logo{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 1;
}
.stage{
	opacity: 0;
}
body.--loaded .loading{
	animation: fadeOut .6s forwards;
}
body .stage{
	opacity: 0;
}
body.--loaded .stage{
	animation: fadein 1.5s forwards;
	animation-delay: 1.5s;
}
@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
/**/



/*-----------------------------------------------
 * COMMON
-------------------------------------------------*/
.inner{
	width: 1200px;
	padding: 100px 50px;
	margin: 0 auto;
	position: relative;
	z-index: 30;
 }
 @media screen and (max-width:767px){
    body{
        width: 100%;
        min-width: unset;
        background: url(/wp-content/themes/mobkara/assets/img/top/bg_sp.jpg) no-repeat center top;
        background-attachment: fixed;
        background-size: 100% auto;
    }
    .inner{
        width: 100%;
        padding: 30% 0;
        margin: 0 auto;
     }
	.sub .inner{
        padding: 10% 0;
	 }
     img {
       width: 100%;
       height: auto; 
     }
}
.hd {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

 
.contents_ttl{
    text-align: center;
    line-height: 1;
    color: #b9c1cb;
    margin-bottom: 90px;

 }
 .contents_ttl span{
    display: inline-block;
    font-size: 30px;
    font-family: var(--font-en);
    font-weight: 700;
    padding: 20px 60px 0 60px;
    position: relative;
 }
 .contents_ttl span::before,
 .contents_ttl span::after{
    width: 46px;
    height: 46px;
    content: "";
    display: block;
    position: absolute;
    margin: 0;
    background-color: #b9c1cb;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
 }
 .contents_ttl span::before{
    left: 0;
    top: 0;
    -webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/ttl_deco_hane_left.png);
    mask-image: url(/wp-content/themes/mobkara/assets/img/common/ttl_deco_hane_left.png);
 }
 .contents_ttl span::after{
    right: 0;
    top: 0;
    -webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/ttl_deco_hane_right.png);
    mask-image: url(/wp-content/themes/mobkara/assets/img/common/ttl_deco_hane_right.png);
 }

 @media screen and (max-width:767px){
    .contents_ttl{
        margin-bottom: 10vw;
     }
     .contents_ttl span{
        font-size: 20px;
        padding: 2vw 6vw 0 6vw;
     }
     .contents_ttl span::before,
     .contents_ttl span::after{
        width: 5vw;
        height: 5vw;
     }
 }


 .section_ttl{
    font-family: var(--font-en);
    font-weight: 200;
    position: absolute;
    width: 80px;
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
    /*z-index: 10;*/
    overflow: hidden;
    writing-mode: vertical-lr;
}
.section_ttl span{
    font-size: 98px;
    line-height:1;
    transform:rotate(-180deg) translateX(-10px);
    color: #FFF;
    display: block;
 }
 @media screen and (max-width:767px){

    .section_ttl{
       display: none;
    }
    .box_ttl{
        font-size: 22px;
    }
 }


/*-----------------------------------------------
 * FOOTER
-------------------------------------------------*/
.footerArea{
    z-index: 30;
    position: relative;
    padding-top: 10%;
    margin-top: -20%;
	width: 100%;
    min-width: 1200px;
}
.sub .footerArea{
	padding-top: 20%;
	margin-top:auto;
}
.footerArea .inner {
    padding: 0px 50px 40px 50px;
}
.footerBnrLists{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.footerBnrLists li{
    padding: 0 10px;
}
.footerBnrLists li img{
	height: 76px;
	width: auto;   
}

.footerArea::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 2;
    width: 100%;
    width: 100%;
    height: 100%;
    /*clip-path: polygon(0% 0%, 100% 0%, 100% 50%,60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);*/
    /*clip-path: polygon(0% 95%, calc(100% - 60px) calc(100% - 60px),calc(100% - 40px) calc(100% - 40px),100% 0%, 100% 50%,60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);*/
    clip-path: polygon(0% 30%,
     calc(100% - 60px) 60px,
     calc(100% - 60px) 40px ,
     calc(100% - 40px) 40px ,
    calc(100% - 40px) 20px ,
    calc(100% - 20px) 20px ,
     calc(100% - 20px)  0 ,
     100% 0,
       100% 100%, 
 0% 100%);
    /*clip-path: polygon(0% 76%, 89% 42%, 89% 33%, 92% 32%, 92% 19%, 96% 18%, 96% 8%, 100% 7%, 100% 100%, 0% 100%);*/
    /*transform:rotate(180deg);*/
    background: url(/wp-content/themes/mobkara/assets/img/top/footer_bg.jpg) no-repeat center bottom fixed;
    background-size: cover;
}

.introArea .sec_bg{
    clip-path: polygon(0% 0%, 100% 20vw,100% 100%, 0 calc(100% - 20vw));    
    background: url(/wp-content/themes/mobkara/assets/img/top/intro_bg.jpg) no-repeat center bottom fixed;
    background-size: 100% auto; 
    position: absolute;
    z-index: 5;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}
.charaArea .sec_bg{
    clip-path: polygon(0% 0%, 100% 20vw,100% 100%, 0 calc(100% - 20vw));
    background: url(/wp-content/themes/mobkara/assets/img/top/chara_bg.jpg) no-repeat center top;
    background-size: cover; 
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}
.booksArea .sec_bg{
    clip-path: polygon(0% 0%, 100% 20%,100% 100%, 0 100%);
    background: url(/wp-content/themes/mobkara/assets/img/top/books_bg.jpg) no-repeat center top;
    background-size: cover;
    position: absolute;
    z-index: 5;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}
@media screen and (max-width: 767px){

    .introArea .sec_bg{
        clip-path: polygon(0% 0%, 100% 10%,100% 100%, 0 90%);
        background: url(/wp-content/themes/mobkara/assets/img/top/intro_bg_sp.jpg) no-repeat center bottom;
        background-size: cover; 
    }
    .charaArea .sec_bg{
        clip-path: polygon(0% 0%, 100% 10%,100% 100%, 0 90%);
        background: url(/wp-content/themes/mobkara/assets/img/top/chara_bg.jpg) no-repeat center top;
        background-size: cover;
        height: 100%;
        top: 0%;
        left: 0;

    }
    .booksArea .sec_bg{
        clip-path: polygon(0% 0%, 100% 10%,100% 100%, 0 100%);
        background: url(/wp-content/themes/mobkara/assets/img/top/books_bg.jpg) no-repeat center top;
        background-size: cover;
    }
    .footerArea{
        padding-top: 20vw;
        margin-top: -30vw;
		min-width: 100%;
    }
    .footerArea::after{
        background: url(/wp-content/themes/mobkara/assets/img/top/footer_bg.jpg) no-repeat center bottom;
        background-size: cover;    
        clip-path: polygon(0% 20%,
         calc(100% - 60px) 60px,
         calc(100% - 60px) 40px ,
         calc(100% - 40px) 40px ,
        calc(100% - 40px) 20px ,
        calc(100% - 20px) 20px ,
         calc(100% - 20px)  0 ,
         100% 0,
           100% 100%, 
     0% 100%);
    }
	.sub .footerArea::after{
        clip-path: polygon(0% 30%,
         calc(100% - 60px) 60px,
         calc(100% - 60px) 40px ,
         calc(100% - 40px) 40px ,
        calc(100% - 40px) 20px ,
        calc(100% - 20px) 20px ,
         calc(100% - 20px)  0 ,
         100% 0,
           100% 100%, 
     0% 100%);
    }

    
    .footerArea .inner {
        padding: 5vw 8.8vw;
    }
    .footerBnrLists{
        flex-direction: column;
        margin-bottom: 5vw;
    }
    .footerBnrLists li {
        padding: 0 0;
    }
	.footerBnrLists li img{
		height: auto;
		width: 100%;   
	}
   .footerBnrLists li:not(:last-child) {
        margin-bottom: 4%;
    }
}
/*
clip-path: polygon(0% 0%, 100% 0%, 100% 50%,60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
.footerArea::before{
    content: "";
    display: block;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url(/wp-content/themes/mobkara/assets/img/top/footer_bg.png) no-repeat right top;
    background-size: contain;
    position: absolute;
    left: 0;
    top:-16%;
}
.footerArea::before {
    margin-top:100px;
    background:#F00;
    width:100%;
    height:500px;
    /* clip-path:polygon(
       40px 0,
        100% 0,
        100% calc(100% - 60px),
        calc(100% - 20px) calc(100% - 60px),
        calc(100% - 20px) calc(100% - 40px),
        calc(100% - 40px) calc(100% - 40px),
        calc(100% - 40px) calc(100% - 20px),
        calc(100% - 60px) calc(100% - 20px),
        calc(100% - 60px) 100%,
        0 100%,
        0 40px,
        20px 40px,
        20px 20px,
        40px 20px
       
        0% 0%, 100% 0%,calc(100% - 60px) calc(100% - 60px), calc(100% - 40px) calc(100% - 20px),0% 100%
    ); 
}
*/
/*
clip-path: polygon(0% 0%, 100% 0%, 60px calc(100% - 60px), 60px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
transform:skewY(-5deg);
*/

 /*----------------
shareLists
-----------------*/

.shareListsWrap{
    text-align: center;
    margin-bottom: 40px;
}
.shareLists {
	display: flex;
    justify-content: center;

}
/* title */
.shareLists_ttl {
	color: #FFF;
	font-size: 20px;
    margin-bottom: 20px;
}
/* item */
.shareLists__item {
	width: 30px;
	height: 30px;
	padding: 0;
    margin: 0 15px;
}
@media screen and (max-width: 767px){
    .shareLists_ttl {
        font-size: 12px;
        margin-bottom: 5vw;
    }
	.shareLists__item {
		width: 6vw;
		height: 6vw;
        margin: 0 2vw;
	}
}
/* link */
.shareLists__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.shareLists__link:before {
	content: "";
	width: 100%;
	height: 100%;
	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;
}
.shareLists__link:hover:before {
	background-color: #039aef;
}

/* 各SNSパーツ */
.shareLists__item.is-twitter .shareLists__link:before {
	-webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_x.svg);
	mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_x.svg);
}
.shareLists__item.is-facebook .shareLists__link:before {
	-webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_fb.svg);
	mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_fb.svg);
}
.shareLists__item.is-line .shareLists__link:before {
	-webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_line.svg);
	mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_line.svg);
}
.shareLists__item.is-yt .shareLists__link:before {
	-webkit-mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_yt.png);
	mask-image: url(/wp-content/themes/mobkara/assets/img/common/sns/icon_yt.png);
}
.pp_link,
.copyright{
    color: #FFF;
    font-size: 10px;
    text-align: center;
}
.pp_link{
	margin-bottom: 5px;
}
.pp_link a{
    color: #FFF;
	text-decoration: underline;
	transition: all .3s;
}
.pp_link a:hover{
	text-decoration: underline;
}
/*LINK BTN*/
.link_btn{
    width: 100%;	
    height: 150px;
    position: absolute;
    bottom: -80px;
	left: 0;
}
.link_btn a::before,
.link_btn a::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    transition: all .3s;
}
.link_btn a::before{
    opacity: 0;
    background: url(/wp-content/themes/mobkara/assets/img/common/more_on.png) no-repeat center center;
}
.link_btn a::after{
    opacity: 1;
    background: url(/wp-content/themes/mobkara/assets/img/common/more_off.png) no-repeat center center;
}
.link_btn a:hover::after{
    opacity: 0;
}
.link_btn a:hover::before{
    opacity: 1;
}
.link_btn span{
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.link_btn a{
    color: #FFF;
    font-family: var(--font-en);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

@media screen and (max-width:767px){
    .link_btn{
        width: 100%;
        height: 20vw;
        bottom: -10vw;
        left: 0;
    }
    .link_btn a::before,
    .link_btn a::after{
        background-size: contain;

    }
    .link_btn span {
        top: 32%;
    }
    
}




/*-----------------------------------------------
 * NAV - SUB PAGE
-------------------------------------------------*/
/*-----------------------------------------------
 * NAV - INDEX PAGE

.index .headerNavLists {
    text-align: left;
    font-weight: bold;
    margin-bottom: 0;
}
.index .headerNavLists__item {
    font-size: 24px;
    font-family: var(--font-en);
    margin-bottom: 30px;
    line-height: 1;
    padding-left: 50px;
    position: relative;
}
.index .headerNavLists__item::before {
    content: "";
    display: block;
    background: url(/wp-content/themes/mobkara/assets/img/common/memu_icon.png) no-repeat left center;
    background-size: 100% auto;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: -10px;
    opacity: 0;
    transition: all .3s;
}
-------------------------------------------------*/
/*-----------------------------------------------
 * SUB PAGE
-------------------------------------------------*/
#fullWrap.--inPage{
    background: url(/wp-content/themes/mobkara/assets/img/common/bg_hougan.jpg) no-repeat center bottom;
    background-size: cover;
}
#fullWrap.--inPage::before{
    background: url(/wp-content/themes/mobkara/assets/img/common/bg_hougan_top.png) no-repeat center top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 100%;
    padding-top: 40%;
    pointer-events: none;
}
#fullWrap.--inPage::after{
    background: url(/wp-content/themes/mobkara/assets/img/common/bg_hougan_btm.png) no-repeat center bottom 9%;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@media screen and (max-width:767px){
    #fullWrap.--inPage::before{
        background: url(/wp-content/themes/mobkara/assets/img/common/bg_hougan_top_sp.png) no-repeat center top;
        background-size: 100% auto;
    }
    #fullWrap.--inPage::after{
        background: url(/wp-content/themes/mobkara/assets/img/common/bg_hougan_btm_sp.png) no-repeat center bottom 67vw;
        background-size: 100% auto;
    }
}





@media screen and (max-width:767px){
    .sub .hd_bg {
        clip-path: polygon(0% 0%, 100% 0%,100% 30%, 40px calc(100% - 40px), 40px calc(100% - 20px), 20px calc(100% - 20px), 20px 100%, 0 100%);
        background: url(/wp-content/themes/mobkara/assets/img/common/hd_bg_sp.jpg) no-repeat center top fixed;
        background-size: 100% auto;
        position: absolute;
        z-index: 20;
        top: 0;
        left: 0;
        height: unset;
        padding-top: 29.6vw;
		width: 100%;
    }
}
/*SUB PAGE HEAD*/
.sub .logo.fixed {
    position: fixed;
    top: 50px;
    left: 0;
    width: 200px;
    z-index: 101;
}
.sub .logo img{
    width: 100%;
    height: auto;
}
.sub .header.fixed .header__inner {
    height: 240px;
}
@media screen and (max-width:767px){
    .sub .logo.fixed {
        position: absolute;
        top: 2.6vw;
        left: 0;
        width: 26vw;
        z-index: 90;
    }
	.sub .logo.fixed img {
        left: 4vw;
    }
    .sub .logo.fixed{
        opacity: 1; 
    }
}
/*SUB PAGE CONTENTS*/
/*ttl*/
.sub .section_ttl{
    left: 0;
    top: 300px;
    transform: translate(0);
}
.sub .section_ttl span{
    transform:rotate(0) translateX(-28px);
    color: #ece4cc;
 }
.sub .contents_ttl{
    color: #a4915d;
    margin-bottom: 100px;
 }
.sub .contents_ttl span::before,
.sub .contents_ttl span::after{
    background-color: #a4915d;
}
.sub .logo.fixed img {
    opacity: 1!important; 
}
.sub .contentAreaWrap{
    position: relative;
    padding: 260px 0 0 0;
    width: 100%;
    min-width: 1200px;
    z-index: 10;
}
@media screen and (max-width:767px){
    .sub .contentAreaWrap{
        padding: 30vw 0 0 0;
        min-width: 100%;
    }
    .sub .contents_ttl {
        margin-bottom: 6.4vw;
    }
    .sub .contents_ttl span {
        font-size: min(calc( 22 / 375 * 100vw),22px);
    }
}