@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box;}
body { background: url(../images/background.jpg) center top #fff no-repeat; color: #1e1e1e; font-family: "Avenir Next", Verdana, sans-serif; font-size: 14px; line-height: 1.5em; overflow-x: hidden;}

a { text-decoration: none; outline:none; color: #e85298; word-break: break-all; text-decoration: underline;}
a:hover {  color: #d02876;}
a:hover img{ opacity:0.8;filter: alpha(opacity=80);}
p {line-height: 1.7em; margin-bottom: 2%;}
/* =container
------------------------------------------------------------------------------------------*/
#container{ position:relative; z-index:10;}

/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 { background: url(../images/loading-30.gif) center no-repeat #000; height: 100vh; position: fixed; top: 0; left: 0; width: 100vw; z-index: 100;}

/* =header
------------------------------------------------------------------------------------------*/
header { background: #fff; border-top: solid 3px #e95098; display: table; width: 100%; z-index: 1; -webkit-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.4);
box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.4);}
header .header-wrap { display: table; padding: .6em 1em .4em; width: 1000px; margin: 0 auto; }
header .left { display: table-cell; vertical-align: middle; width: 30%; }
header .left img { vertical-align: bottom; }
header .right { display: table-cell; margin: .5em 0; width: 70%; padding-top: 0.8vw;}
header h1 { color: #7f7f7f; font-size: 10px; line-height: 1em; text-align: right; }
header aside ul li { float: left; margin-right: 3px;}
header aside ul li:last-child { margin-right: 0; }
header aside ul li.gp { overflow: hidden; width: 60px; }

.logo-eplus { width: 100px; }
.logo-eplus img { vertical-align: bottom; width: 100%; }

/* =navi CSS
------------------------------------------------------------------------------------------*/

/* =foot
-----------------------------------------------------------------------------------------*/
footer { background: #909090; color: #fff; text-align: center; width: 100vw; padding: 2vw; }
footer p { font-size: 12px; }
footer img { width: 41px; vertical-align: middle;}
.piapro {width: 58px; vertical-align: middle; margin-left: 5px;}
.f-eplus {margin-right: 5px;}
.f-miku {width: 113px; margin: 0 auto 13px auto;}
/* =SNSボタン
-----------------------------------------------------------------------------------------*/
.sharearea{ margin:0 auto 35px; text-align: left; width: 279px; }
.sharearea p{ float: left; width: 70px; }
.sharearea ul{ padding: 8px 0 0; }
.sharearea li{ float: right; margin-left: 10px; }
.sharearea li.fb{ display: block; overflow: hidden; width: 120px; }
.sharearea li.twt{ display: block; margin: 1px 0 0 4px; overflow: hidden; width: 75px; }

/* =SNSボタン
----------------------------------*/
.btn-sns-pc { display: inherit; float: right; }
.btn-sns { display: none;}

.fb_iframe_widget { display: inline-block !important; width: auto !important;}
.fb_iframe_widget > span { vertical-align: baseline !important;}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top { text-align: right; margin: 0; position: fixed; right:60px; bottom:50px; text-align: center; width:120px; z-index:10; }
.page_top a { background: url(../images/page_top.png) no-repeat ; background-size: contain;  display: block; font-size: 12px; height: 120px; line-height: 100px; transition: all .3s; width: 100px; opacity: 0.7; }
.page_top a:hover {opacity: 1;}

/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 7%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* =見出し
------------------------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 { margin: 0;}

/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix::after { clear: both; content: "."; display: block; font-size: .1em; height: 0; line-height: 0; visibility: hidden;}

/* =parts
------------------------------------------------------------------------------------------*/
.pc-none { display: none; }
.sp-none { display: block; }
span { font-size: .7em; }

/* =font
------------------------------------------------------ */

/* smartphone
------------------------------------------------------ */
@media screen and (max-width: 768px){
	/* =header
	------------------------------------------------------------------------------------------*/
	header { border-top: solid 2px #e95098; border-bottom: solid 1px #ccc; }
	header .header-wrap { padding: .1em .6em .4em; }
	header .left,
	header .right { display: block; width: 100%; }
	header .left { margin-bottom: .5em; }
	header .right { margin: 0; }
	header .header-wrap { display: table; padding: .6em 1em .4em; width: 100%; margin: 0 auto; }
	header h1 { text-align: left;}
	.logo-eplus { width: 100px; }

	/* =SNSボタン
	----------------------------------*/
	.btn-sns-pc { display: none;}
	#sns .section-wrap { margin: 2vw auto; padding: 2vw 0 0 0; }
	.btn-sns { display: block; width: 100%;}
	.btn-sns ul { margin: 0 auto; width: 270px; }
	.btn-sns ul li { float: left; margin-right: 10px;}
	.btn-sns ul li:last-child { margin-right: 0; }
	.btn-sns ul li.tw { margin-top: 41px; }
	.btn-sns ul li.gp {}

	/* =pagetop
	------------------------------------------------------------------------------------------*/
	.page_top{ display:none;}

	/* =parts
	------------------------------------------------------------------------------------------*/
	.pc-none { display: block; }
	.sp-none { display: none; }
	span { font-size: .7rem; }
}