@charset "utf-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* Reset
------------------------------------------------------------ */
html {overflow-y: scroll;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd
{	margin: 0;padding: 0;border: 0;outline: 0;font-size: 1em;}
address,caption,cite,code,dfn,em,strong,th,var {	font-style: normal;}
a {
	margin: 0;
	padding: 0;
	overflow: hidden;
	outline: none;
	color: #323232;
	text-decoration:none;
	transition: all 0.2s ease-in-out;
}
a:hover,a:active,a:visited{color:#6c9cd1;}
img {	vertical-align: bottom;-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-drag: none;-khtml-user-drag: none;}
/* normalize.css --END-- */

@font-face {
	font-family: 'myfont';
  src: url('/assets/font/myfont01.woff') format('woff');
}

.font-m{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.font-notosans {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.font-gabarito{
  font-family: "Gabarito", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
/* Base
------------------------------------------------------------ */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	overflow:auto;
	-webkit-font-smoothing: antialiased;
}
body {
	margin: 0;
	background: #fff;
	color: #323232;
	font-size: 16px;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow: hidden;
	width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}
ul {	list-style: none;}
ol {	margin-left: 1.5em;}
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
body, #page, #wrap, #content {    height: 100%;}
img, object, embed {
	max-width: 100%;
	width: 100%;
}
img {
	height: auto;
	vertical-align: bottom;
}
#wrap {
    overflow: hidden;
}

/* Link
------------------------------------------------------------ */
a:link {	color: #323232;	text-decoration: none;}
a:visited {	color: #323232;	text-decoration: none;}
a:hover {	color: #6a6e62;	text-decoration: none;}

/* Layout
------------------------------------------------------------ */
#container{position: relative;}
.under main{ padding: 6em 0 0;}
.contents{
	width: 90vw;
	margin: auto;
}
.underpage{ padding-top: 1em;}
.underpage　#section01{
  position: relative;
  margin: 8em auto;
}
.underpage .area-bg {
    position: absolute;
    top: -15%;
    z-index: -3;
}
.underpage .area-bg02 {
    position: absolute;
		bottom: -30%;
    z-index: -4;
}
.clum02{
	display: flex;
  flex-wrap: wrap;
}
.clum02-rev{
	display: flex;
  flex-wrap: wrap;
	flex-direction: row-reverse;
}
.clum03,.clum04{
	display: flex;
  flex-wrap: wrap;
}
.clum03 li{width: 33.3%;}
.clum04 li{width: 24.99%;}

#temp02 #container {padding-top: 92px;}
#temp02 .temp-ttlarea{ padding: 5em 0 3em;}
.fullbg{
	width: 100%;
  margin: auto;
}
#under-bg{
	width: 100%;
	margin: auto;
	background: url(../img/common/bg01.gif) 0 0 repeat;
	padding: 1em 0.2em;
	margin-bottom: 5em;
}
#under-bg .fullbg{
background: url(../img/common/bg_img05.png) 0 100% no-repeat;
background-size: contain;
}

#TOP .grecaptcha-badge,
#News .grecaptcha-badge,
#privacy .grecaptcha-badge,
#terms .grecaptcha-badge,
#attention .grecaptcha-badge{
    visibility: hidden;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
	.contents {width: 90%;}
}
@media screen and (max-width: 520px) {
	#temp02 #container{
		position: relative;
    padding-top: 67px;
	}
	#temp02 .temp-ttlarea{ padding: 1em;}
	.contents {width: 95%;}
	.underpage {padding-top: 1em;}
.clum03 li,
.clum04 li {
	width: 50%;
	margin-bottom: 2%;
}

}
/*-----page-----*/
.pc{display: block;}
.sp{display: none;}
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {
.pc{display: none;}
.sp{display: block;}
}

/*-----header-----*/
header{
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	top: -84px;
	width: 100%;
	padding: 0.5em 1em 1em;
	background: #00000047;
	z-index: 9;
	transition: .5s; /* アニメーションタイミング */
}
.fixed-header {}
	#fixed-header.is-show {
	  top: 0;
	}
header .logoarea{
	width: 20%;
	margin-right: 1em;
}
header .logoarea img{width: 80%;}
header .left-head{
	display: flex;
	align-items: center;
	width: 80%;
	text-align: right;
	justify-content: flex-end;
}
header .left-head .con-btn{
	width: 20%;
	margin-right: 1em;
}
header .left-head .con-btn .btn a{
	border: 1px solid #fff;
	padding: 0.5em;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	font-weight: bold;
}

/*　ハンバーガーボタン */
  .hamburger {
  	width: 60px;
  	height: 60px;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	cursor: pointer;
  	margin-left: auto;
  	display: flex;
  	transition: all 0.4s;
  	position: relative;
		z-index: 30;
			right: 1%;
			top: 0%;
  }
  .checkbox:checked ~ .hamburger {}
  .hamburger .bar {
    width: 40px;
    height: 1px;
    background: #fff;
    border-radius: 2px;
    display: block;
    position: absolute;
  }
  .hamburger .bar-top {
    transform: translate(0, -12px) rotate(0);
    transition: all 0.4s;
  }
  .hamburger .bar-middle {
    transition: all 0.4s;
    opacity: 1;
  }
  .hamburger .bar-bottom {
    transform: translate(0, 12px) rotate(0);
    transition: all 0.4s;
  }
	.hamburger .bar-bottom::after {
		content: "";
    position: absolute;
    top: 2px;
    left: 0.1em;
    color: #fff;
    font-size: 0.85rem;
		font-family: "Noto Sans Japanese", "游ゴシック", "游ゴシック体", "YuGothic", "Yu Gothic", "ヒラギノ⾓ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-transform: uppercase;
}
  .checkbox:checked ~ .hamburger .bar-middle {
    opacity: 0;
  }
  .checkbox:checked ~ .hamburger .bar-top {
    transform: translate(0, 0) rotate(-45deg);
  }

  .checkbox:checked ~ .hamburger .bar-bottom {
    transform: translate(0, 0) rotate(45deg);
  }
	.checkbox:checked ~ .hamburger .bar-bottom::after {
	  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
	    transform: translateY(0) rotate(-45deg);
			top: 9px;
	    left: 18px;
	}
  .checkbox {
    display: none;
  }

  .nav-menu {
		display: none;
		width: 100%;
		height: 100%;
    opacity: 0;
    color: #333;
    top: 0;
    left: 0;
    transition: all 0.3s;
  	z-index: -1;
  }
  .nav-menu ul.gnav-sp {
  	position: absolute;
  	top: 40%;
  	left: 50%;
  	transform: translate(-50%,-40%);
  	width: 60%;
  }

  .nav-menu ul.gnav-sp li {
  	padding: 20px 10px;
  	border-bottom: 0.5px solid #fff;
  }

  .nav-menu ul.gnav-sp a{
    text-align: center;
  	font-size: 1.1em;
  	font-weight: 600;
  	color: #fff;
  }
  .nav-menu a:hover {}
  .checkbox:checked ~ .nav-menu {
		position: fixed;
		display: block;
    backdrop-filter: blur(4px);
		background: #d0d8ddc4;
		width: 100%;
		height: 100%;
    opacity: 1;
		z-index: 20;
		-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
  }

  .h_conarea-sp{display: none;}
.nav-menu-in{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.nav-img{
	width: 25%;
	height: 100vh;
	overflow: hidden;
}
.nav-img .logoimage{ padding: 1.5em 1em 1em;}
.nav-img .logoimage img{ width: 39%;}
.nav-area{
	width: 50%;
  margin: auto;
}
.nav-m-in{
}
.nav-left{width: 90%;}
.nav-right{
	margin-top: 1em;
}

.nav-m-in ul{}
.nav-m-in.nav-left ul li{
  border-bottom: 1px solid #999;
}
.nav-m-in ul.nav-clum2 {margin-bottom: 2em;}
.nav-m-in ul.nav-clum2 li{}
.nav-m-in ul.s-nav li{}
.nav-m-in ul li a{
  padding: 2em 1em;
	display: block;
	letter-spacing: 0.2em;
	font-family: "Noto Sans Japanese", "游ゴシック", "游ゴシック体", "YuGothic", "Yu Gothic", "ヒラギノ⾓ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.nav-m-in ul li a:hover{
	color: #14b9d7;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
	header .logoarea img {width: 50%;}
	header .h_convarea ul {width: 60%;}

}
@media screen and (max-width: 520px) {
	header {padding: 0.2em 0.5em 1em;}
	header .logoarea { padding-top: 0.5em;}
	header .logoarea img {width: 100%;}
	header .h_convarea ul a .txt {
		display: none;
}
	.hamburger .bar-bottom::after {
    font-size: 0.9rem;
}
	.nav-img{ width: 26%;}
	.nav-img .logoimage { padding: 1.5em 0.5em 0;}
	.nav-img .logoimage img { width: 100%;}
	.nav-m-in ul.nav-clum2 {margin-bottom: 0em;}
	.nav-m-in .nav-clum2 li {
		width: 100%;
	  margin-bottom: 10%;
	}
	.nav-m-in .nav-clum2 li:last-child {margin-bottom: 0%;}
	.nav-area {
    padding-left: 5%;
    padding-top: 10%;
}
	.nav-m-in.nav-left ul li {width: 100%;}
	header .h_convarea li {}
	header .h_convarea ul a {
		width: 85px;
		height: 67px;
}
header .h_convarea li a .m-icon,
header .h_convarea li a .t-icon {
		width: 2.5em;
		margin-right: 0;
}
	.nav-m-in ul li a{ padding: 0.8em;}
	.nav-m-in ul.nav-clum2 li {
	    width: 100%;
	    margin-bottom: 5%;
	}
	.nav-m-in .nav-clum2 li a span {
    font-size: 0.7em;
    margin-left: 0;
    display: block;
}
.nav-m-in ul.s-nav li {width: 25%;}

}
/* タイトル
------------------------------------------------------------ */
.ttl01{
font-size: 5em;
letter-spacing: 0.3em;
display: inline-block;
border-bottom: 1px solid #000;
padding: 0 3em 0 0.5em;
font-weight: bold;
position: relative;
margin-bottom: 1em;
}
.ttl01 span{
font-size: 0.3em;
letter-spacing: 0.2em;
position: absolute;
bottom: -15%;
right: -20%;
}
.ttl02{
	font-size: 1.8em;
	letter-spacing: 0.2em;
	display: inline-block;
	border-bottom: 1px solid #000;
	padding: 0 3em 0 0.5em;
	font-weight: normal;
	position: relative;
	margin-bottom: 1em;
}
.ttl03{
letter-spacing: 0.3em;
font-size: 1.5em;
margin-bottom: 1em;
}
.ttl03 span{
display: block;
line-height: 0.8em;
color: #b58e0f;
font-size: 0.9em;
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
	.ttl01{}
	.ttl02 {font-size: 1.3em;}
	.ttl02:after {
    width: 2.5em;
    height: 2.5em;
}
}
/* ボタン
------------------------------------------------------------ */

.btn01 a{
	position: relative;
	box-sizing: border-box;
	font-size: 1.1em;
	text-decoration: none;
	white-space: nowrap;
  letter-spacing: 0.2em;
	transition: all 0.2s ease-in-out;
}
.btn01 a:hover,.btn01-rev a:hover {
	color: #14b9d7;
}
.btn01 a::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -25px;
	width: 20px;
	height: 1px;
	background: #14b9d7;
	-webkit-transition: .3s;
	transition: .3s;
}
.btn01 a:hover:before{}
	.txtlink a{
	  position: relative;
	  display: inline-flex;
	  padding: 3px 0 3px 60px;
	  border: none;
	  box-sizing: border-box;
	  font-size: 0.9em;
	  text-align: center;
	  text-decoration: none;
	  white-space: nowrap;
	  font-family: myfont;
	  letter-spacing: 0.2em;
	  transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	  transition-property: padding, color, background-color;
	  overflow: hidden;
	}
	.txtlink a:hover{
	    color: #969696;
	}
	.txtlink a::before {
	    position: absolute;
	    left: 0;
	    top: 3px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 50px;
	    height: 1.5px;
	    background-color: rgb(0 0 0 / 50%);
	    opacity: 0.5;
	    box-sizing: border-box;
	    content: "";
	    transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	    transition-property: opacity, border-color;
	}
	.txtlink a:hover:before {
	    opacity: 0 !important;
	}
	.txtlink a::after {
	    position: absolute;
	    left: 0;
	    top: 3px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 50px;
	    height: 1.5px;
	    border-radius: 50px;
	    content: "";
	    transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	    background-color: #969696;
	    -moz-transform: translateX(-50px);
	    transform: translateX(-50px);
	}
	.txtlink a:hover:after {
	    -moz-transform: translateX(0px) !important;
	    transform: translateX(0px) !important;
	}


@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.btn01 a {
    font-size: 1em;
    letter-spacing: 0.2em;
}
	.btn01 a::before {
    content: "";
    left: -28px;
}

}
/* ぱんくずエリア
------------------------------------------------------------ */
.pankuzarea{
	width: 98%;
	margin: 0 auto 5%;
}
.pankuzarea ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.pankuzarea ul li::after{
	content: "＞";
	padding: 0 0.5em;
	color: #323232;
}
.pankuzarea ul li:last-child:after{
	content: "";
}
.pankuzarea ul li{color: #6a6e62;}

.pankuzarea ul li a{
	position: relative;
	color: #323232;
	transition: all 0.2s ease-in-out;
}
.pankuzarea ul li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #323232;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s;
}
.pankuzarea ul li a:hover{
	color: #6a6e62;
}
.pankuzarea ul li a:hover::after {
transform: scale(1, 1);
transform-origin: right top;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.pankuzarea{
		margin: 0 auto 5%;
    font-size: 0.7em;
    width: 90%;
	}
}
/* ページネーション
------------------------------------------------------------ */
.archive .pagearea {
    width: 90%;
    margin: 3em auto;
}
.archive .pagearea .pagearea-in{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.archive .pagearea .pagearea-in .page-numbers{
  margin-right: 1em;
  margin-bottom: 1em;
}
.archive .pagearea .pagearea-in .page-numbers{
  display: block;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #11b9d8;
  padding: 0.3em 1em;
  font-size: 1.2em;
  color: #11b9d8;
  padding: 0.5em 1em;
  transition: all 0.3s ease-in-out;
}
.archive .pagearea .pagearea-in .page-numbers:hover{
  background: #cae4e9;
  color: #292929;
}
.archive .pagearea .pagearea-in .page-numbers.current{
  display: block;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #cae4e9;
  padding: 0.3em 1em;
  font-size: 1.2em;
  background: #cae4e9;
  color: #292929;
  padding: 0.5em 1em;
}
.detall .pagearea{
	width: 85%;
	margin: 0 auto 6em;
}
.detall .pagearea .pagearea-in{
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.detall .pagearea .pagearea-in a{
	position: relative;
	font-family: myfont;
	font-size: 1.2em;
	color: #292929;
	transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a:hover{
	color: #aaa;
}
.detall .pagearea .pagearea-in a.p-all{
	background: #11b9d8;
	padding: 0.2em 3em;
	color: #fff;
	border: 1px solid #11b9d8;
}
.detall .pagearea .pagearea-in a.prev{ padding-left: 1.3em;}
.detall .pagearea .pagearea-in a.prev::before{
	content: "";
    display: inline-block;
    position: absolute;
    margin: auto;
    color: #292929;
    vertical-align: middle;
    line-height: 1;
    width: 0.5em;
    height: 0.5em;
    border: 0.13em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(25%) rotate(-135deg);
    top: 11px;
    left: 5px;
    transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a.prev:hover:before{
  left: 0px;
}
.detall .pagearea .pagearea-in a.next{ padding-right: 1.3em;}
.detall .pagearea .pagearea-in a.next::before{
	content: "";
	display: inline-block;
	position: absolute;
	margin: auto;
	color: #292929;
	vertical-align: middle;
	line-height: 1;
	width: 0.5em;
	height: 0.5em;
	border: 0.13em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(10%) rotate(45deg);
	top: 12px;
	right: 10px;
	transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a.p-all:hover{
	background: #fff;
	color: #11b9d8;
}
.detall .pagearea .pagearea-in a.next:hover:before{
	right: 5px;
}


@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.detall .pagearea{
		width: 95%;
		margin: 0 auto 6em;
	}
	.detall .pagearea .pagearea-in a {
    font-size: 1em;
}
.detall .pagearea .pagearea-in a.p-all {
    padding: 0.2em 2em;
    font-size: 0.9em;
}
.detall .pagearea .pagearea-in a.prev::before {
    top: 8px;
		left: 4px;
}
.detall .pagearea .pagearea-in a.next::before {
    top: 8px;
    right: 8px;
}

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

/* コンバージョン
------------------------------------------------------------ */
#conversion {}
.all-conversion{position: relative;}
.all-conversion .bg{
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(../img/common/allbg01.jpg) 50% 50% no-repeat;
	background-size: cover;
	min-height: 400px;
	padding: 8em 0;
	z-index: -2;
}
.all-conversion .btn{
	width: 300px;
}
.all-conversion .btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid #bc9326;
	background: #bc9326;
	padding: 1em 0;
	width: 100%;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	font-weight: bold;
	transition: 0.3s ease-out;
}
.all-conversion .btn a .c_icon{
	width: 20px;
	height: 22px;
	margin-right: 0.5em;
	line-height: 0.1em;
}
/* --サイド追従-- */
.side-con-fix a{
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	color: #fff;
	background: #bc9326;
	border-radius: 10px 0px 0px 10px;

	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	height: 160px;

	margin: 0 0 0 0;
	opacity: 0.9;
	right: 0px;
	top: 309px;
	width: 50px;
	max-width: 100%;
}
.side-con-fix a .sc_icon{
	width: 20px;
	height: auto;
	display: inline-block;
	margin-bottom: 0.5em;
	margin-left: 3px;
}
.side-con-fix a .sc_txt{
	font-size: 0.8em;
  writing-mode: vertical-rl;
}
.side-con-fix a::before{
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {}


/* フッター
------------------------------------------------------------ */
footer{position: relative;}
#footer{}
#footer .footer-bg{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 2em;
	background: url(../img/common/footerbg.jpg) 50% 50% no-repeat;
	background-size: cover;
}
#footer .logo{
	width: 25%;
  border-right: 1px solid #fff;
}
#footer .logo .footerlogo{
	width: 60%;
  margin: auto;
}
#footer .logo .f-sns{
	width: 40px;
  margin: 1em auto 0;
}

#footer .footerabout{
	position: relative;
	width: 75%;
	padding: 1em;
}
#footer .footerabout .f-nav ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#footer .footerabout .f-nav ul li{ margin-left: 1em;}
#footer .footerabout .f-nav ul li:first-child{ margin-left: 0em;}
#footer .footerabout .f-nav ul li::before{
		content: "/";
		margin-right: 1em;
		color: #fff;
	}
#footer .footerabout .f-nav ul li:first-child:before{
	content: "";
	margin-right: 0em;
}
#footer .footerabout .f-nav ul li a{color: #fff;}
#footer .footerabout .f-about-in{
	position: absolute;
	bottom: 0;
}
#footer .footerabout .spec-nav {
	color: #fff;
	font-size: 0.9em;
	margin: auto;
  padding: 3em 0 1em;
	}

footer .copy{
	padding: 0.5em;
	text-align: center;
	font-size: 0.7em;
}

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

/* topへ戻る
------------------------------------------------------------ */
#page_top{}
#page_top .page-top{}
#page_top .page-top span{
	position: relative;
	display: inline-flex;
  writing-mode: vertical-rl;
	letter-spacing: 0.2em;
	transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-property: padding, color, background-color;
	overflow: hidden;
}
#page_top .page-top span::before {
	    position: absolute;
	    left: 0;
	    top: 3px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 50px;
	    height: 1.5px;
	    background-color: rgb(0 0 0 / 50%);
	    opacity: 0.5;
	    box-sizing: border-box;
	    content: "";
	    transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	    transition-property: opacity, border-color;
	}
#page_top .page-top span:hover:before {
	    opacity: 0 !important;
	}
#page_top .page-top span::after {
	    position: absolute;
	    left: 0;
	    top: 3px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 50px;
	    height: 1.5px;
	    border-radius: 50px;
	    content: "";
	    transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	    background-color: #969696;
	    -moz-transform: translateX(-50px);
	    transform: translateX(-50px);
	}
#page_top .page-top span:hover:after {
	    -moz-transform: translateX(0px) !important;
	    transform: translateX(0px) !important;
	}

#page_top .is-active {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {}
@media screen and (max-width: 375px) {}